fix

pyt

6 天以前 b2be0e128c2788aa735e85b17cd30cadb018de92

 culture/src/views/strain-library/validation/primitive-cell/index.vue

@@ -1,8 +1,13 @@
<template>
    <div class="list">
        <!-- Table -->
        <TableCustom :queryForm="queryForm" :tableData="tableData" :total="total" @currentChange="handleCurrentChange"
            @sizeChange="handleSizeChange">
    <TableCustom
      :queryForm="queryForm"
      :tableData="tableData"
      :total="total"
      @currentChange="handleCurrentChange"
      @sizeChange="handleSizeChange"
    >
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="鉴别菌株编号：">
@@ -24,15 +29,29 @@
            <template #setting>
                <div class="tableTitle">
                    <div class="flex a-center">
                        <div class="title" :class="{ active: currentType === 'list' }"
                            @click="handleTypeChange('list')">
                            原始细胞库验证资料</div>
                        <div class="drafts" :class="{ active: currentType === 'draft' }"
                            @click="handleTypeChange('draft')">
                            草稿箱</div>
            <div
              class="title"
              :class="{ active: currentType === 'list' }"
              @click="handleTypeChange('list')"
            >
              原始细胞库验证资料
            </div>
            <div
              class="drafts"
              :class="{ active: currentType === 'draft' }"
              @click="handleTypeChange('draft')"
            >
              草稿箱
            </div>
                    </div>
                    <div class="flex a-center">
                        <el-button @click="handleNewStrain" class="el-icon-plus" type="primary" style="margin-right: 12px;">新增原始细胞库资料</el-button>
            <el-button
              @click="handleNewStrain"
              class="el-icon-plus"
              type="primary"
              style="margin-right: 12px"
              >新增原始细胞库资料</el-button
            >
                    </div>
                </div>
            </template>
@@ -46,175 +65,196 @@
                <el-table-column prop="inventory" label="创建时间" />
                <el-table-column prop="status" label="状态">
                    <template #default="{ row }">
                        <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
            <el-tag :type="getStatusType(row.status)">{{
              getStatusText(row.status)
            }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="{ row }">
                        <el-button type="text" @click="handleDetail(row)">确认</el-button>
                        <el-button type="text" @click="handleDetail(row)">详情</el-button>
            <el-button
              type="text"
              @click="$router.push('/strain/validation/confirm-detail')"
              >确认</el-button
            >
            <el-button type="text" @click="handleDetail(row)">详情1</el-button>
            <el-button type="text" @click="handleDetail2(row)">详情2</el-button>
                        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                        <el-button type="text" @click="handleRecord(row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>
     
    <PrimitiveCellDetailDialog
      :visible.sync="detailVisible"
      :detail="currentDetail"
    />
    <DetailConditionDialog
    :visible.sync="detailDialogVisible"
    :value="detailDialogValue"
/>
    </div>
</template>

<script>

import PrimitiveCellDetailDialog from "./primitive-cell-detail-dialog.vue";
import DetailConditionDialog from "./DetailConditionDialog.vue";
export default {
    name: 'PrimitiveCell',
  name: "PrimitiveCell",
    components: {
    PrimitiveCellDetailDialog,
    DetailConditionDialog,
    },
    data() {
        return {
        detailDialogVisible: false,
        detailDialogValue: {},
            dialogVisible: false,
            currentType: 'list',
      currentType: "list",
            detailVisible: false,
            currentDetail: {},
            form: {
                strainNo: '',
                strainName: '',
                status: ''
        strainNo: "",
        strainName: "",
        status: "",
            },
            queryForm: {
                pageSize: 10,
                pageNum: 1
        pageNum: 1,
            },
            total: 800,
            tableData: [
                {
                    strainNo: 'YX-2024001',
                    strainName: '大肠杆菌',
                    source: '实验室分离',
                    method: '形态学鉴定、生理生化试验',
                    certificate: '革兰氏阴性杆菌，可发酵葡萄糖产酸产气，IMViC试验++--',
                    storage: '斜面培养',
                    amount: 'A区-01-001',
                    inventory: '50',
                    notes: '用于质粒转化',
                    status: '1'
          strainNo: "YX-2024001",
          strainName: "大肠杆菌",
          source: "实验室分离",
          method: "形态学鉴定、生理生化试验",
          certificate: "革兰氏阴性杆菌，可发酵葡萄糖产酸产气，IMViC试验++--",
          storage: "斜面培养",
          amount: "A区-01-001",
          inventory: "50",
          notes: "用于质粒转化",
          status: "1",
                },
                {
                    strainNo: 'YX-2024002',
                    strainName: '枯草芽孢杆菌',
                    source: '菌种保藏中心',
                    method: '16S rDNA测序',
                    certificate: '革兰氏阳性芽孢杆菌，可水解淀粉，产生溶菌素',
                    storage: '冷冻保存',
                    amount: 'B区-02-005',
                    inventory: '30',
                    notes: '工业发酵菌种',
                    status: '1'
          strainNo: "YX-2024002",
          strainName: "枯草芽孢杆菌",
          source: "菌种保藏中心",
          method: "16S rDNA测序",
          certificate: "革兰氏阳性芽孢杆菌，可水解淀粉，产生溶菌素",
          storage: "冷冻保存",
          amount: "B区-02-005",
          inventory: "30",
          notes: "工业发酵菌种",
          status: "1",
                },
                {
                    strainNo: 'YX-2024003',
                    strainName: '酿酒酵母',
                    source: '发酵工厂',
                    method: '显微镜观察、生理特性',
                    certificate: '椭圆形单细胞真菌，可发酵葡萄糖产生乙醇',
                    storage: '甘油管保存',
                    amount: 'A区-03-002',
                    inventory: '40',
                    notes: '发酵工艺优化',
                    status: '2'
          strainNo: "YX-2024003",
          strainName: "酿酒酵母",
          source: "发酵工厂",
          method: "显微镜观察、生理特性",
          certificate: "椭圆形单细胞真菌，可发酵葡萄糖产生乙醇",
          storage: "甘油管保存",
          amount: "A区-03-002",
          inventory: "40",
          notes: "发酵工艺优化",
          status: "2",
                },
                {
                    strainNo: 'YX-2024004',
                    strainName: '乳酸菌',
                    source: '乳制品分离',
                    method: '生化鉴定、API条',
                    certificate: '革兰氏阳性球菌，产生乳酸，耐酸性强',
                    storage: '冷冻干燥',
                    amount: 'C区-01-003',
                    inventory: '25',
                    notes: '益生菌研究',
                    status: '3'
          strainNo: "YX-2024004",
          strainName: "乳酸菌",
          source: "乳制品分离",
          method: "生化鉴定、API条",
          certificate: "革兰氏阳性球菌，产生乳酸，耐酸性强",
          storage: "冷冻干燥",
          amount: "C区-01-003",
          inventory: "25",
          notes: "益生菌研究",
          status: "3",
                },
                {
                    strainNo: 'YX-2024005',
                    strainName: '青霉菌',
                    source: '环境样本',
                    method: '形态学特征、ITS测序',
                    certificate: '丝状真菌，产生蓝绿色分生孢子，可产青霉素',
                    storage: '斜面培养',
                    amount: 'B区-04-001',
                    inventory: '35',
                    notes: '次级代谢产物研究',
                    status: '1'
                }
            ]
        }
          strainNo: "YX-2024005",
          strainName: "青霉菌",
          source: "环境样本",
          method: "形态学特征、ITS测序",
          certificate: "丝状真菌，产生蓝绿色分生孢子，可产青霉素",
          storage: "斜面培养",
          amount: "B区-04-001",
          inventory: "35",
          notes: "次级代谢产物研究",
          status: "1",
        },
      ],
    };
    },
    methods: {
    handleDetail(row) {
      this.currentDetail = row;
      this.detailVisible = true;
    },
    handleDetail2(row) {
        this.detailDialogValue = row;
        this.detailDialogVisible = true;
    },
        handleViewMore() {
            this.dialogVisible = true;
        },
        resetForm() {
            this.form = {
                strainNo: '',
                strainName: '',
                status: ''
            }
            this.searchData()
        strainNo: "",
        strainName: "",
        status: "",
      };
      this.searchData();
        },
        searchData() {
            // 模拟搜索逻辑
            const { strainNo, strainName, status } = this.form
            let filteredData = [...this.tableData]
      const { strainNo, strainName, status } = this.form;
      let filteredData = [...this.tableData];
            
            if (strainNo) {
                filteredData = filteredData.filter(item => 
        filteredData = filteredData.filter((item) =>
                    item.strainNo.toLowerCase().includes(strainNo.toLowerCase())
                )
        );
            }
            if (strainName) {
                filteredData = filteredData.filter(item => 
        filteredData = filteredData.filter((item) =>
                    item.strainName.toLowerCase().includes(strainName.toLowerCase())
                )
        );
            }
            if (status) {
                filteredData = filteredData.filter(item => 
                    item.status === status
                )
        filteredData = filteredData.filter((item) => item.status === status);
            }
            
            this.total = filteredData.length
      this.total = filteredData.length;
            // 实际项目中这里应该调用API
            console.log('搜索条件:', this.form)
            console.log('分页信息:', this.queryForm)
      console.log("搜索条件:", this.form);
      console.log("分页信息:", this.queryForm);
        },
        handleNewStrain() {
            this.$router.push('/strain/validation/add-primitive-cell')
      this.$router.push("/strain/validation/add-primitive-cell");
            // Implement new strain logic
        },
        handleBatchAdd() {
            // Implement batch add logic
        },
        handleDetail(row) {
            this.currentDetail = row;
            this.detailVisible = true;
        },
        handleEdit(row) {
            // Implement edit logic
        },
        handleRecord(row) {
            this.$router.push({
                path: '/strain-library/strain-library-manage/record',
        path: "/strain-library/strain-library-manage/record",
                query: {
                    id: row.strainNo
                }
            })
          id: row.strainNo,
        },
      });
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
      this.queryForm.pageNum = page;
            // Implement page change logic
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
      this.queryForm.pageSize = size;
            // Implement size change logic
        },
        handleTypeChange(type) {
@@ -223,22 +263,22 @@
        },
        getStatusType(status) {
            const types = {
                1: 'success',
                2: 'info',
                3: 'warning'
            }
            return types[status] || 'info'
        1: "success",
        2: "info",
        3: "warning",
      };
      return types[status] || "info";
        },
        getStatusText(status) {
            const texts = {
                1: '已入库',
                2: '已出库',
                3: '入库待确认'
            }
            return texts[status] || '未知状态'
        }
    }
}
        1: "已入库",
        2: "已出库",
        3: "入库待确认",
      };
      return texts[status] || "未知状态";
    },
  },
};
</script>

<style scoped lang="less">
@@ -268,7 +308,7 @@
        .view-more {
            position: absolute;
            right: 0;
            color: #049C9A;
      color: #049c9a;
        }
    }

@@ -293,7 +333,7 @@

.search-form {
    margin-bottom: 20px;
    background: #F5F7FA;
  background: #f5f7fa;
    padding: 24px;
    border-radius: 8px;

@@ -321,17 +361,17 @@

    .tab {
        padding: 10px 30px;
        border: 1px solid #DCDFE6;
    border: 1px solid #dcdfe6;
        border-bottom: none;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        margin-right: 10px;
        background: #F5F7FA;
    background: #f5f7fa;

        &.active {
            background: #fff;
            border-color: #049C9A;
            color: #049C9A;
      border-color: #049c9a;
      color: #049c9a;
            font-weight: bold;
        }
    }
@@ -361,7 +401,6 @@
        line-height: 50px;
        width: 166px;
        text-align: center;

    }

    .drafts {
@@ -384,14 +423,13 @@
        background: #ffffff;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #049c9a;
        
    }
}

.view-all-dialog {
    :deep(.el-dialog__header) {
        padding: 20px;
        border-bottom: 1px solid #EBEEF5;
    border-bottom: 1px solid #ebeef5;
        margin-right: 0;
        
        .el-dialog__title {
@@ -423,5 +461,4 @@
        }
    }
}

</style>