对接菌种验证数据资料接口

13404089107

2025-05-28 e65a6e0bbdf46c377b0c340259cc69a32a52511b

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

@@ -1,24 +1,20 @@
<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="鉴别菌株编号：">
            <el-input v-model="form.strainNo" placeholder="请输入"></el-input>
            <el-input v-model="form.identifyingStrainCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="鉴别菌株名称：">
            <el-input v-model="form.strainName" placeholder="请输入"></el-input>
            <el-input v-model="form.identifyingStrainName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="验证实验编号：">
            <el-input v-model="form.strainName" placeholder="请输入"></el-input>
            <el-input v-model="form.validationExperimentCode" placeholder="请输入"></el-input>
          </el-form-item>

          <el-form-item class="search-btn-box">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" @click="searchData">查询</el-button>
@@ -29,162 +25,86 @@
      <template #setting>
        <div class="tableTitle">
          <div class="flex a-center">
            <div
              class="title"
              :class="{ active: currentType === 'list' }"
              @click="handleTypeChange('list')"
            >
            <div class="title" :class="{ active: currentType === 'list' }" @click="handleTypeChange('list')">
              原始细胞库验证资料
            </div>
            <div
              class="drafts"
              :class="{ active: currentType === 'draft' }"
              @click="handleTypeChange('draft')"
            >
            <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>

      <template #table>
        <el-table-column prop="source" label="菌种来源" />
        <el-table-column prop="method" label="鉴别菌株编号" />
        <el-table-column prop="certificate" label="鉴别菌株名称" />
        <el-table-column prop="storage" label="验证实验编号" />
        <el-table-column prop="amount" label="创建人" />
        <el-table-column prop="inventory" label="创建时间" />
        <el-table-column prop="status" label="状态">
        <el-table-column prop="strainSource" label="菌种来源" />
        <el-table-column prop="identifyingStrainCode" label="鉴别菌株编号" />
        <el-table-column prop="identifyingStrainName" label="鉴别菌株名称" />
        <el-table-column prop="validationExperimentCode" label="验证实验编号" />
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="status" label="状态" v-if="currentType == 'list'">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{
              getStatusText(row.status)
            }}</el-tag>
            <el-tag v-if="row.status == 1" type="info">待确认</el-tag>
            <el-tag v-if="row.status == 2" type="success">已提交</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <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="$router.push('/strain/validation/confirm-detail')">确认</el-button>
            <el-button type="text" @click="handleDetail(row)">详情</el-button>
            <el-button type="text" @click="handleDetail2(row)">详情</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"
/>
    <PrimitiveCellDetailDialog :visible.sync="detailVisible" :detail="currentDetail" />
    <DetailConditionDialog :visible.sync="detailDialogVisible" :value="detailDialogValue" />
    <EditConditionDialog :visible.sync="editDialogVisible" :value="editDialogValue" />
  </div>
</template>

<script>
import PrimitiveCellDetailDialog from "./primitive-cell-detail-dialog.vue";
import DetailConditionDialog from "./DetailConditionDialog.vue";
import EditConditionDialog from "./EditConditionDialog.vue";

import { getList } from "./service";
export default {
  name: "PrimitiveCell",
  components: {
    PrimitiveCellDetailDialog,
    DetailConditionDialog,
    EditConditionDialog,
  },
  data() {
    return {
        detailDialogVisible: false,
        detailDialogValue: {},
      detailDialogVisible: false,
      detailDialogValue: {},
      dialogVisible: false,
      currentType: "list",
      detailVisible: false,
      currentDetail: {},
      form: {
        strainNo: "",
        strainName: "",
        status: "",
        identifyingStrainCode: "",
        identifyingStrainName: "",
        validationExperimentCode: "",
        startTime: "",
        endTime: "",
        isDraft: 0,
        strainType: 1,
      },
      queryForm: {
        pageSize: 10,
        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-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-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",
        },
      ],
      total: 0,
      tableData: [],
    };
  },
  methods: {
@@ -193,43 +113,38 @@
      this.detailVisible = true;
    },
    handleDetail2(row) {
        this.detailDialogValue = row;
        this.detailDialogVisible = true;
      this.detailDialogValue = row;
      this.detailDialogVisible = true;
    },
    handleViewMore() {
      this.dialogVisible = true;
    },
    resetForm() {
      this.form = {
        strainNo: "",
        strainName: "",
        status: "",
        identifyingStrainCode: "",
        identifyingStrainName: "",
        startTime: "",
        endTime: "",
        validationExperimentCode: "",
        isDraft: this.currentType === 'draft' ? 1 : 0,
        strainType: 1,
      };
      this.searchData();
    },
    searchData() {
      // 模拟搜索逻辑
      const { strainNo, strainName, status } = this.form;
      let filteredData = [...this.tableData];

      if (strainNo) {
        filteredData = filteredData.filter((item) =>
          item.strainNo.toLowerCase().includes(strainNo.toLowerCase())
        );
    async searchData() {
      const params = {
        ...this.form,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
      };
      try {
        const res = await getList(params);
        this.tableData = res.data?.records || [];
        this.total = res.data?.total || 0;
      } catch (e) {
        this.tableData = [];
        this.total = 0;
      }
      if (strainName) {
        filteredData = filteredData.filter((item) =>
          item.strainName.toLowerCase().includes(strainName.toLowerCase())
        );
      }
      if (status) {
        filteredData = filteredData.filter((item) => item.status === status);
      }

      this.total = filteredData.length;
      // 实际项目中这里应该调用API
      console.log("搜索条件:", this.form);
      console.log("分页信息:", this.queryForm);
    },
    handleNewStrain() {
      this.$router.push("/strain/validation/add-primitive-cell");
@@ -251,32 +166,21 @@
    },
    handleCurrentChange(page) {
      this.queryForm.pageNum = page;
      // Implement page change logic
      this.searchData();
    },
    handleSizeChange(size) {
      this.queryForm.pageSize = size;
      // Implement size change logic
      this.searchData();
    },
    handleTypeChange(type) {
      this.currentType = type;
      // Implement type change logic
      this.form.isDraft = type === "draft" ? 1 : 0;
      this.form.strainType = 1; // 1: 原始细胞库
      this.searchData();
    },
    getStatusType(status) {
      const types = {
        1: "success",
        2: "info",
        3: "warning",
      };
      return types[status] || "info";
    },
    getStatusText(status) {
      const texts = {
        1: "已入库",
        2: "已出库",
        3: "入库待确认",
      };
      return texts[status] || "未知状态";
    },
  },
  mounted() {
    this.searchData();
  },
};
</script>