路由冲突

hejianhao

9 天以前 ef0313a2670f82b910de7728c573a41547691a40

路由冲突

 culture/src/router/index.js

@@ -241,6 +241,45 @@
            //     },
            //     component: () => import("../views/strain-library/strain-flow-chart"),
            // },
            {
                path: 'breeding-record',
                name: 'BreedingRecord',
                meta: {
                    title: "菌种选育保藏记录",
                },
                component: () => import("../views/strain-library/breeding-record"),
            },
            {
                path: 'add-breeding-record',
                name: 'AddBreedingRecord',
                meta: {
                    title: "新增菌种选育保藏记录",
                    hide: true,
                },
                component: () => import("../views/strain-library/breeding-record/add"),
            },
            {
                path: 'validation',
                meta: {
                    title: "菌种验证数据资料",
                },
                children: [
                    {
                        path: 'primitive-cell',
                        meta: {
                            title: '原始细胞库资料'
                        },
                        component: () => import("../views/strain-library/validation/primitive-cell")
                    },
                    {
                        path: 'chief-cell',
                        meta: {
                            title: '主细胞库资料'
                        },
                        component: () => import("../views/strain-library/validation/chief-cell")
                    }
                ]
            },
        ]
    }, {
        path: "/strainReportLibrary",

 culture/src/views/strain-library/breeding-record/add.vue

New file
@@ -0,0 +1,480 @@
<template>
  <div>
    <Card>
      <el-form ref="form" :model="form" :rules="rules" inline label-position="top">
        <div class="header-title" style="width: 100%">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>来源类型</div>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 20px">
          <div class="tabs">
            <div :class="{ active: activeTab === 'strain' }" @click="activeTab = 'strain'">
              来源菌株
            </div>
            <div :class="{ active: activeTab === 'material' }" @click="activeTab = 'material'">
              来源物资
            </div>
          </div>
        </div>
        <!-- 来源菌株 -->
        <el-row v-if="activeTab === 'strain'" :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="菌株编号" prop="strainCode" required>
              <el-input v-model="form.strainCode" class="w-380" placeholder="请输入菌株编号" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="菌株名称" prop="strainName" required>
              <el-input v-model="form.strainName" class="w-380" placeholder="请输入菌株名称" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <el-form-item label="培养基配方" prop="mediumFormula" required>
              <el-input v-model="form.mediumFormula" class="w-380" placeholder="请输入培养基配方" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 来源物资 -->
        <el-row v-if="activeTab === 'material'" :gutter="10">
          <el-col :span="24">
            <el-form-item label="来源物资、时间及批号" prop="materialCode" required>
              <el-input v-model="form.materialCode" placeholder="请输入物资编号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="培养基配方" prop="materialName" required>
              <el-input v-model="form.materialName" placeholder="请输入物资名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分离菌落编号" prop="materialDescription" required>
              <el-input v-model="form.materialDescription" placeholder="请输入物资描述" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="header-title" style="margin-top: 20px;">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>培养条件</div>
          </div>
        </div>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-form-item label="培养基" prop="strainCode" required>
              <el-input v-model="form.strainCode" class="w-380" placeholder="请输入培养基" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-form-item label="培养温度" prop="strainName" required>
              <el-input v-model="form.strainName" class="w-380" placeholder="请输入培养温度" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-form-item label="需氧类型" prop="mediumFormula" required>
              <el-input v-model="form.mediumFormula" class="w-380" placeholder="请输入需氧类型" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <el-form-item label="培养时间" prop="mediumFormula" required>
              <el-input v-model="form.mediumFormula" class="w-380" placeholder="请输入培养时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="header-title" style="margin-top: 20px;">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>一、培养基分离记录</div>
          </div>
          <div class="header-title-right">
            <el-button @click="showSeparationDialog = true" class="el-icon-circle-plus-outline" type="primary">
              新增培养皿分离记录</el-button>
          </div>
        </div>
        <SeparationRecordDialog
          :visible.sync="showSeparationDialog"
          @save="handleSeparationSave"
        />
        <Table :height="null" :queryForm="queryForm" :total="0">
          <template>
            <el-table-column prop="name" label="培养皿序号" />
            <el-table-column prop="age" label="分离菌落编号" />
            <el-table-column prop="age" label="接种操作人签字" />
            <el-table-column prop="age" label="操作时间" />
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope"><el-button type="text"
                @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text"
                @click="handleEdit(scope.row)">删除</el-button></template>
            </el-table-column>
          </template>
        </Table>
        <div class="header-title" style="margin-top: 20px;">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>二、培养皿生物学形态观察记录</div>
          </div>
          <div class="header-title-right">
            <el-button @click="showChoose = true" class="el-icon-circle-plus-outline" type="primary">
              新增观察记录</el-button>
          </div>
        </div>
        <Table :height="null" :queryForm="queryForm" :total="0">
          <template>
            <el-table-column prop="age" label="分离菌落编号" />
            <el-table-column prop="age" label="形状强壮度排名" />
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope"><el-button type="text"
                @click="handleEdit(scope.row)">形态记录</el-button>
                <el-button type="text"
                @click="handleEdit(scope.row)">删除</el-button></template>
            </el-table-column>
          </template>
        </Table>
        <div class="header-title" style="margin-top: 20px;">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>三、接种斜面记录</div>
          </div>
          <div class="header-title-right">
            <el-button @click="showInoculationSlopeDialog = true" class="el-icon-circle-plus-outline" type="primary">
              新增斜面记录</el-button>
          </div>
        </div>
        <InoculationSlopeRecordDialog
          :visible.sync="showInoculationSlopeDialog"
          @save="handleInoculationSlopeSave"
        />
        <Table :height="null" :queryForm="queryForm" :total="0">
          <template>
            <el-table-column prop="age" label="分离菌落编号" />
            <el-table-column prop="age" label="接种斜面编号" />
            <el-table-column prop="age" label="接种操作人" />
            <el-table-column prop="age" label="接种操作人签字" />
            <el-table-column prop="age" label="接种操作时间" />
            <el-table-column prop="age" label="入库/废弃" />
            <el-table-column prop="age" label="入库总数（只）" />
            <el-table-column prop="age" label="菌种保藏人签字" />
            <el-table-column prop="age" label="入库保藏/废弃时间" />

            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                @click="handleEdit(scope.row)">删除</el-button>
                <el-button type="text"
                @click="showConfirmStorageDialog = true">确认入库</el-button></template>
            </el-table-column>
          </template>
        </Table>
        <ConfirmStorageDialog
          :visible.sync="showConfirmStorageDialog"
          @confirm="handleConfirmStorage"
        />
        <div class="header-title" style="margin-top: 20px;">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <div>四、菌种保藏记录</div>
          </div>
          <div class="header-title-right">
            <el-button @click="showPreserveStrainDialog = true" class="el-icon-circle-plus-outline" type="primary">
              新增菌种保藏记录</el-button>
          </div>
        </div>
        <Table :height="null" :queryForm="queryForm" :total="0">
          <template>
            <el-table-column prop="age" label="用于保藏的菌种编号" />
            <el-table-column prop="age" label="实验验证结论" />
            <el-table-column prop="age" label="保藏方法" />
            <el-table-column prop="age" label="保藏菌种编号" />
            <el-table-column prop="age" label="菌种保藏人签字" />
            <el-table-column prop="age" label="保藏时间" />
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <el-button type="text"
                @click="handleEdit(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </template>
        </Table>
        <PreserveStrainRecordDialog
          :visible.sync="showPreserveStrainDialog"
          @save="handlePreserveStrainSave"
        />
        <div class="end-btn">
          <el-button type="primary">提交</el-button>
          <el-button type="primary">同步给保藏人</el-button>
          <el-button type="default">存草稿</el-button>
        </div>
      </el-form>
    </Card>
  </div>
</template>
<script>
import AiEditor from "@/components/AiEditor";
import SeparationRecordDialog from './separation-record-dialog.vue';
import InoculationSlopeRecordDialog from './inoculation-slope-record-dialog.vue';
import PreserveStrainRecordDialog from './preserve-strain-record-dialog.vue';
import ConfirmStorageDialog from './confirm-storage-dialog.vue';
export default {
  components: { AiEditor, SeparationRecordDialog, InoculationSlopeRecordDialog, PreserveStrainRecordDialog, ConfirmStorageDialog },
  name: "AddBreedingRecord",
  data() {
    return {
      form: {
        strainCode: "",
        strainName: "",
        mediumFormula: "",
        materialCode: "",
        materialName: "",
        materialDescription: "",
        planName: "",
        planCode: "",
        stage: "",
        creator: "",
        createTime: "",
        approvalComment: "",
        status: "pending",
        approver: "",
        approveTime: "",
      },
      rules: {
        strainCode: [{ required: true, message: "请输入菌株编号", trigger: "blur" }],
        strainName: [{ required: true, message: "请输入菌株名称", trigger: "blur" }],
        mediumFormula: [{ required: true, message: "请输入培养基配方", trigger: "blur" }],
        materialCode: [{ required: true, message: "请输入物资编号", trigger: "blur" }],
        materialName: [{ required: true, message: "请输入物资名称", trigger: "blur" }],
        materialDescription: [{ required: true, message: "请输入物资描述", trigger: "blur" }],
      },
      activeTab: "strain", // 默认显示来源菌株表单
      fileList: [], // 附件列表
      showChoose: false,
      radio1: 1,
      status: "1",
      remark: "",
      queryForm: {},
      showSeparationDialog: false,
      separationRecords: [], // 用于存储分离记录
      showInoculationSlopeDialog: false,
      inoculationSlopeRecords: [],
      showPreserveStrainDialog: false,
      preserveStrainRecords: [],
      showConfirmStorageDialog: false,
    };
  },
  methods: {
    handleSeparationSave(record) {
      this.separationRecords.push(record);
      // 这里可以根据需要将数据同步到表格等
    },
    handleInoculationSlopeSave(record) {
      this.inoculationSlopeRecords.push(record);
    },
    handlePreserveStrainSave(record) {
      this.preserveStrainRecords.push(record);
    },
    handleConfirmStorage() {
      // 这里可以处理确认入库后的逻辑
      this.showConfirmStorageDialog = false;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep(.el-form-item) {
  width: 100%;

  .el-input__inner {
    width: 100%;
  }

  .w-380 {
    width: 280px;
  }
}

.mt-unset {
  margin-top: unset !important;
}

.flex {
  display: flex;
}

.tabs {
  display: flex;
  align-items: center;
  border: 2px solid rgba(4, 156, 154, 0.5);
  border-radius: 10px;
  padding: 4px;

  div {
    width: 183px;
    height: 32px;
    border-radius: 10px;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
    cursor: pointer;
  }

  .active {
    background: #ebfefd;
    color: #049c9a;
  }

  .inactive {
    background: #fff;
    color: #333333;
  }
}

.header-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 13px;

  .header-title-left {
    display: flex;
    align-items: center;
    gap: 13px;

    img {
      width: 12px;
      height: 19px;
    }

    div {
      flex-shrink: 0;
      font-weight: bold;
      font-size: 18px;
      color: #222222;
      line-height: 27px;
      font-family: "Source Han Sans CN Bold Bold";

    }

    span {
      flex-shrink: 0;
      font-weight: bold;
      font-size: 18px;
      color: #222222;
      line-height: 27px;
      font-family: "Source Han Sans CN Bold Bold";
    }
  }

  .header-title-left :first-child {
    margin-top: 0;
  }
}

.header-title:first-child {
  .header-title-left {
    margin-top: 0;
  }
}

.end-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;

  button {
    width: 180px;
    height: 36px;
    // background: #409EFF;
  }
}

.member-list {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;

  .member-list-card {
    width: 340px;
    height: 400px;
    border-radius: 8px;
    border: 1px solid #dcdfe6;
    background: linear-gradient(to bottom,
        rgba(5, 160, 193, 0.2) 0%,
        rgba(5, 242, 194, 0) 70%);

    .member-item {
      height: 100%;
      display: flex;
      flex-direction: column;

      .member-title {
        margin-top: 20px;
        width: 100%;
        font-family: "Source Han Sans CN Bold Bold";
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.8);
        line-height: 16px;
        text-align: center;
      }

      .flex1 {
        flex: 1;
      }

      .member-name-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .member-name-box-2 {
        flex: 1;
        padding: 0 20px;
        padding-top: 40px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        justify-items: center;
        align-items: start;
      }

      .member-name {
        width: 60px;
        height: 60px;
        background: #7d8b79;
        border-radius: 50%;
        text-align: center;
        line-height: 60px;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        margin: 0;
      }

      .member-change {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        margin-top: auto;
        cursor: pointer;

        .member-change-btn {
          background: #fff1f0;
          border-radius: 4px;
          border: 1px solid #ffccc7;
          padding: 1px 8px;
          font-weight: 400;
          font-size: 12px;
          color: #ff4d4f;
        }
      }
    }
  }
}
</style>

 culture/src/views/strain-library/breeding-record/confirm-storage-dialog.vue

New file
@@ -0,0 +1,135 @@
<template>
  <el-dialog
    :visible.sync="visible"
    title=""
    width="520px"
    :close-on-click-modal="false"
    custom-class="record-detail-dialog"
    @close="handleClose"
  >
    <div class="dialog-content">
      <div class="confirm-tip">
        是否确认该项菌种信息？
        <span class="danger">确认后将无法再次编辑菌种传代项内容</span>
      </div>
      <el-form :model="form" :rules="rules" ref="form" label-position="top">
        <el-form-item required>
          <template #label>
            <span>菌种保藏人签字</span>
            <el-button type="primary" class="sign-btn" @click="showSignature = true">签名</el-button>
          </template>
          <div class="signature-area" :class="{ 'waiting': !form.signature }">
            <template v-if="form.signature">
              <img :src="form.signature" alt="菌种保藏人签字" />
            </template>
            <template v-else>
              <span class="waiting-text">等待确认</span>
            </template>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer-btns">
      <el-button @click="handleClose" style="margin-right: 16px;">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
    <signature-canvas :visible.sync="showSignature" @confirm="handleSignatureConfirm" />
  </el-dialog>
</template>

<script>
import SignatureCanvas from '@/components/SignatureCanvas.vue';
export default {
  name: 'ConfirmStorageDialog',
  components: { SignatureCanvas },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        signature: ''
      },
      rules: {
        signature: [
          { required: true, message: '请签名', trigger: 'change' }
        ]
      },
      showSignature: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    handleConfirm() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.$emit('confirm', { ...this.form })
        this.handleClose()
      })
    },
    handleSignatureConfirm(dataUrl) {
      this.form.signature = dataUrl
      this.showSignature = false
    }
  }
}
</script>

<style lang="less" scoped>
.confirm-tip {
  color: #f5222d;
  font-size: 16px;
  margin-bottom: 24px;
  .danger {
    margin-left: 12px;
  }
}
.signature-area {
  height: 120px;
  width: 100%;
  background: #F5F7FA;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DCDFE6;
  overflow: hidden;
  padding: 0;
}
.signature-area.waiting {
  border-style: dashed;
  background: #FAFAFA;
}
.signature-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.waiting-text {
  color: #909399;
  font-size: 14px;
}
.sign-btn {
  height: 32px;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 20px;
  font-weight: 400;
  margin-left: 12px;
}
.footer-btns {
  display: flex;
  justify-content: center;
  padding: 24px;
  padding-top: 0;
  .el-button {
    width: 150px;
  }
}
</style> 

 culture/src/views/strain-library/breeding-record/index.vue

New file
@@ -0,0 +1,300 @@
<template>
  <div class="list">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total">
      <template #search>
        <el-form :model="form" labelWidth="auto" inline>
          <el-form-item label="来源类型：">
            <el-input v-model="form.planName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="培养基：">
            <el-input v-model="form.planCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="培养基配方：">
            <el-input v-model="form.planCode" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="需氧类型">
            <el-input v-model="form.creator" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" style="margin-left: 10px;" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <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>
          <div class="flex a-center">
            <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="stage" label="来源类型"></el-table-column>
        <el-table-column prop="creator" label="培养基"></el-table-column>
        <el-table-column prop="creator" label="培养基配方"></el-table-column>
        <el-table-column prop="createTime" label="培养温度"></el-table-column>
        <el-table-column prop="approver" label="需氧类型"></el-table-column>
        <el-table-column prop="approver" label="创建人"></el-table-column>
        <el-table-column prop="approveTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)"
              >详情</el-button
            >
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </TableCustom>
  </div>
</template>

<script>
export default {
  name: "BreedingRecord",
  components: {},
  data() {
    return {
      currentType: "list", // 当前显示类型：list-列表，draft-草稿箱
      form: {
        planName: "",
        planCode: "",
        creator: "",
        createTime: [],
        approver: "",
        status: "",
      },
      tableData: [],
      total: 0,
      // 模拟数据
      mockListData: [
        {
          planCode: "PLAN-2024-001",
          planName: "2024年度实验室设备升级方案",
          stage: "规划阶段",
          creator: "张三",
          createTime: "2024-03-15",
          status: "pending",
          approver: "李四",
          approveTime: "2024-03-16",
        },
        {
          planCode: "PLAN-2024-002",
          planName: "实验室安全管理制度更新方案",
          stage: "实施阶段",
          creator: "王五",
          createTime: "2024-03-14",
          status: "approved",
          approver: "赵六",
          approveTime: "2024-03-15",
        },
        {
          planCode: "PLAN-2024-003",
          planName: "实验室人员培训计划",
          stage: "准备阶段",
          creator: "孙七",
          createTime: "2024-03-13",
          status: "rejected",
          approver: "周八",
          approveTime: "2024-03-14",
        },
      ],
      mockDraftData: [
        {
          planCode: "DRAFT-2024-001",
          planName: "实验室设备采购计划（草稿）",
          stage: "规划阶段",
          creator: "张三",
          createTime: "2024-03-16",
          status: "draft",
          approver: "",
          approveTime: "",
        },
        {
          planCode: "DRAFT-2024-002",
          planName: "实验室改造方案（草稿）",
          stage: "准备阶段",
          creator: "李四",
          createTime: "2024-03-15",
          status: "draft",
          approver: "",
          approveTime: "",
        },
      ],
      approvalDialogVisible: false,
      approvalDialogType: "approve",
      currentApprovalData: null,
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    resetForm() {
      this.form = {
        planName: "",
        planCode: "",
        creator: "",
        createTime: [],
        approver: "",
        status: "",
      };
    },
    handleNewStrain() {
      this.$router.push({
        path: "/strain/add-breeding-record",
      });
    },
    handleSearch() {
      // 实现查询逻辑
      console.log("查询条件：", this.form);
    },
    getStatusType(status) {
      const statusMap = {
        pending: "warning",
        rejected: "danger",
        approved: "success",
        archived: "info",
        draft: "info",
      };
      return statusMap[status] || "info";
    },
    getStatusText(status) {
      const statusMap = {
        pending: "待审批",
        rejected: "已驳回",
        approved: "已通过",
        archived: "已封存",
        draft: "草稿",
      };
      return statusMap[status] || "未知";
    },
    handleAddPlan() {
      this.$router.push({
        path: "/dataManagement/addPlan",
      });
    },
    handleApprove(row) {
      this.currentApprovalData = row;
      this.approvalDialogType = "approve";
      this.approvalDialogVisible = true;
    },
    handleApproveSubmit(data) {
      // 处理审批通过
      console.log("审批通过：", data);
      this.approvalDialogVisible = false;
      this.$message.success("审批通过成功");
      this.getTableData();
    },
    handleRejectSubmit(data) {
      // 处理审批驳回
      console.log("审批驳回：", data);
      this.approvalDialogVisible = false;
      this.$message.success("审批驳回成功");
      this.getTableData();
    },
    handleRevokeApprove(row) {
      // 实现撤销审批逻辑
      console.log("撤销审批数据：", row);
    },
    handleEdit(row) {
      // 实现编辑逻辑
      console.log("编辑数据：", row);
    },
    handleDelete(row) {
      // 实现删除逻辑
      console.log("删除数据：", row);
    },
    handleDetail(row) {
      this.currentApprovalData = row;
      this.approvalDialogType = "view";
      this.approvalDialogVisible = true;
    },
    handleTypeChange(type) {
      this.currentType = type;
      this.getTableData();
    },
    getTableData() {
      // 根据currentType请求不同的数据
      if (this.currentType === "list") {
        this.tableData = this.mockListData;
        this.total = this.mockListData.length;
      } else {
        this.tableData = this.mockDraftData;
        this.total = this.mockDraftData.length;
      }
    },
  },
};
</script>

<style scoped lang="less">
.list {
  height: 100%;
}
.flex {
  display: flex;
  align-items: center;
}
.tableTitle {
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
  align-items: center;
  .title {
    background: #fafafc;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    padding: 16px 29px;
    font-weight: bold;
    font-size: 18px;
    color: #606266;
    width: unset;
    cursor: pointer;
  }
  .drafts {
    padding: 16px 65px;
    background: #fafafc;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    font-weight: 400;
    font-size: 18px;
    color: #606266;
    margin-left: 16px;
    cursor: pointer;
  }
  .active {
    color: #049c9a;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049c9a;
  }
}
</style>

 culture/src/views/strain-library/breeding-record/inoculation-slope-record-dialog.vue

New file
@@ -0,0 +1,186 @@
<template>
  <el-dialog
    :visible.sync="visible"
    title="新增接种斜面记录"
    width="700px"
    @close="handleClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
      label-position="top"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="分离菌落编号" prop="colonyCode" required>
            <el-input v-model="form.colonyCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接种斜面编号" prop="slopeCode" required>
            <el-input v-model="form.slopeCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="保存/废弃" prop="status" required>
        <el-button
          :type="form.status === '保存' ? 'primary' : 'default'"
          @click="form.status = '保存'"
          >保存</el-button
        >
        <el-button
          :type="form.status === '废弃' ? 'primary' : 'default'"
          @click="form.status = '废弃'"
          >废弃</el-button
        >
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="菌种入库时间" prop="storageTime" required>
            <el-input
              v-model="form.storageTime"
              disabled
              placeholder="自动回填"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="接种操作时间" prop="operationTime" required>
            <el-input
              v-model="form.operationTime"
              disabled
              placeholder="自动填入"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item required>
            <template #label>
              <span>接种操作人签字</span>
              <el-button type="primary" class="sign-btn" @click="showSignature = true">签名</el-button>
            </template>
            <div class="signature-area" :class="{ 'waiting': !form.signature }">
              <template v-if="form.signature">
                <img :src="form.signature" alt="接种操作人签字" />
              </template>
              <template v-else>
                <span class="waiting-text">等待确认</span>
              </template>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center; margin-top: 20px">
      <el-button @click="handleClose" style="margin-right: 16px;">取消</el-button>
      <el-button type="primary" @click="handleSave">确认</el-button>
    </div>
    <signature-canvas :visible.sync="showSignature" @confirm="handleSignatureConfirm" />
  </el-dialog>
</template>

<script>
import SignatureCanvas from '@/components/SignatureCanvas.vue';

export default {
  components: { SignatureCanvas },
  props: { visible: Boolean },
  data() {
    return {
      form: {
        colonyCode: "",
        slopeCode: "",
        status: "保存",
        storageTime: this.getNowTime(),
        operationTime: this.getNowTime(),
        signature: "",
      },
      rules: {
        colonyCode: [
          { required: true, message: "请输入分离菌落编号", trigger: "blur" },
        ],
        slopeCode: [
          { required: true, message: "请输入接种斜面编号", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择保存/废弃", trigger: "change" },
        ],
        signature: [{ required: true, message: "请签名", trigger: "change" }],
      },
      showSignature: false,
    };
  },
  methods: {
    getNowTime() {
      const d = new Date();
      return (
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1).toString().padStart(2, "0") +
        "-" +
        d.getDate().toString().padStart(2, "0") +
        " " +
        d.getHours().toString().padStart(2, "0") +
        ":" +
        d.getMinutes().toString().padStart(2, "0")
      );
    },
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("save", { ...this.form });
          this.handleClose();
        }
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    handleSignatureConfirm(dataUrl) {
      this.form.signature = dataUrl;
      this.showSignature = false;
    },
  },
};
</script>

<style scoped>
.signature-area {
  height: 120px;
  width: 100%;
  background: #F5F7FA;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DCDFE6;
  overflow: hidden;
  padding: 0;
}
.signature-area.waiting {
  border-style: dashed;
  background: #FAFAFA;
}
.signature-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.waiting-text {
  color: #909399;
  font-size: 14px;
}
.sign-btn {
  height: 32px;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 20px;
  font-weight: 400;
  margin-left: 12px;
}
</style>

 culture/src/views/strain-library/breeding-record/preserve-strain-record-dialog.vue

New file
@@ -0,0 +1,153 @@
<template>
  <el-dialog
    :visible.sync="visible"
    title="新增菌种保藏记录"
    width="900px"
    @close="handleClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="120px"
      label-position="top"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用于保藏的菌种编号" prop="strainCode" required>
            <el-input v-model="form.strainCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="实验验证结论" prop="experimentConclusion" required>
        <el-input type="textarea" :rows="4" v-model="form.experimentConclusion" placeholder="请输入" />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="保藏方法" prop="preserveMethod" required>
            <el-input v-model="form.preserveMethod" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保藏菌种编号" prop="preserveStrainCode" required>
            <el-input v-model="form.preserveStrainCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item required>
            <template #label>
              <span>操作人签字</span>
              <el-button type="primary" class="sign-btn" @click="showSignature = true">签名</el-button>
            </template>
            <div class="signature-area" :class="{ 'waiting': !form.signature }">
              <template v-if="form.signature">
                <img :src="form.signature" alt="操作人签字" />
              </template>
              <template v-else>
                <span class="waiting-text">等待确认</span>
              </template>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: center; margin-top: 20px">
      <el-button @click="handleClose" style="margin-right: 16px;">取消</el-button>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
    <signature-canvas :visible.sync="showSignature" @confirm="handleSignatureConfirm" />
  </el-dialog>
</template>

<script>
import SignatureCanvas from '@/components/SignatureCanvas.vue';
export default {
  components: { SignatureCanvas },
  props: { visible: Boolean },
  data() {
    return {
      form: {
        strainCode: '',
        experimentConclusion: '',
        preserveMethod: '',
        preserveStrainCode: '',
        signature: '',
      },
      rules: {
        strainCode: [
          { required: true, message: '请输入用于保藏的菌种编号', trigger: 'blur' },
        ],
        experimentConclusion: [
          { required: true, message: '请输入实验验证结论', trigger: 'blur' },
        ],
        preserveMethod: [
          { required: true, message: '请输入保藏方法', trigger: 'blur' },
        ],
        preserveStrainCode: [
          { required: true, message: '请输入保藏菌种编号', trigger: 'blur' },
        ],
        signature: [
          { required: true, message: '请签名', trigger: 'change' },
        ],
      },
      showSignature: false,
    };
  },
  methods: {
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('save', { ...this.form });
          this.handleClose();
        }
      });
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleSignatureConfirm(dataUrl) {
      this.form.signature = dataUrl;
      this.showSignature = false;
    },
  },
};
</script>

<style scoped>
.signature-area {
  height: 120px;
  width: 100%;
  background: #F5F7FA;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #DCDFE6;
  overflow: hidden;
  padding: 0;
}
.signature-area.waiting {
  border-style: dashed;
  background: #FAFAFA;
}
.signature-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.waiting-text {
  color: #909399;
  font-size: 14px;
}
.sign-btn {
  height: 32px;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 20px;
  font-weight: 400;
  margin-left: 12px;
}
</style> 

 culture/src/views/strain-library/breeding-record/separation-record-dialog.vue

New file
@@ -0,0 +1,164 @@
<template>
    <el-dialog
      title="添加出入库记录"
      :visible.sync="visible"
      width="520px"
      :close-on-click-modal="false"
      custom-class="record-detail-dialog"
      @close="handleClose"
    >
      <div class="dialog-content">
        <el-form :model="formData" label-position="top">
          <el-form-item label="分离菌落编号" required>
            <el-input v-model="formData.colonyCode" placeholder="请输入" />
          </el-form-item>
  
          <el-form-item required>
            <template #label>
              <span>操作人签字</span>
              <el-button type="primary" class="sign-btn" @click="showSignature = true">签名</el-button>
            </template>
            <div class="signature-area" :class="{ 'waiting': !formData.operatorSignature }">
              <template v-if="formData.operatorSignature">
                <img :src="formData.operatorSignature" alt="操作人签字" />
              </template>
              <template v-else>
                <span class="waiting-text">等待确认</span>
              </template>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer-btns">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
      <signature-canvas :visible.sync="showSignature" @confirm="handleSignatureConfirm" />
    </el-dialog>
  </template>
  
  <script>
  import SignatureCanvas from '@/components/SignatureCanvas.vue'
  export default {
    name: 'AddRecordDialog',
    components: { SignatureCanvas },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        formData: {
          type: '出库',
          operatorSignature: ''
        },
        showSignature: false
      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false)
        this.$emit('close')
      },
      handleConfirm() {
        if (!this.formData.operatorSignature) {
          this.$message.warning('请先签名')
          return
        }
        this.$emit('confirm', this.formData)
        this.handleClose()
      },
      handleSignatureConfirm(dataUrl) {
        this.formData.operatorSignature = dataUrl
        this.showSignature = false
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .record-detail-dialog {
    :deep(.el-dialog__header) {
      padding: 20px 24px;
      margin: 0;
      border-bottom: 1px solid #DCDFE6;
      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }
    :deep(.el-dialog__body) {
      padding: 24px;
    }
  }
  .dialog-content {
    :deep(.el-form-item__label) {
      padding-bottom: 8px;
      line-height: 20px;
      font-size: 14px;
      color: #606266;
      &::before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
      }
    }
    .type-buttons {
      display: flex;
      gap: 12px;
      .el-button {
        width: 80px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        box-sizing: border-box;
      }
    }
    .signature-area {
      height: 120px;
      width: 100%;
      background: #F5F7FA;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #DCDFE6;
      overflow: hidden;
      padding: 0;
      &.waiting {
        border-style: dashed;
        background: #FAFAFA;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .waiting-text {
        color: #909399;
        font-size: 14px;
      }
    }
    .sign-btn {
      height: 32px;
      border-radius: 4px;
      font-size: 14px;
      padding: 0 20px;
      font-weight: 400;
      margin-left: 12px;
    }
  }
  .footer-btns {
    display: flex;
    justify-content: space-between;
    padding: 24px;
    padding-top: 0;
    .el-button {
      width: 150px;
    }
  }
  </style> 

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

New file
@@ -0,0 +1,465 @@
<template>
    <div class="list">
        <el-card class="header-box">
            
            <div class="box-title">
                <img src="@/assets/public/notice.png" class="header-icon">
                <span>菌种源保藏出/入细胞库登记表说明</span>
                <el-button type="text" class="view-more" @click="handleViewMore">查看全部 >></el-button>
            </div>
            <div class="header-content" :class="{ 'collapsed': true }">
                <p>1、菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，请将来源有3 类菌经。</p>
                <p>1.1 原净土管理日油性的源头菌种：入细胞细胞库（现代-O）。</p>
                <p>1.2 是到菌的源头菌种：接种入主细胞库（现代-O），经过百种、验证后，菌种被保存日油管理沙土菌种，入细胞细胞库（现代-O）。</p>
                <p>1.3 是否菌种能自己分离后获得的源头菌种，接种入主细胞库：经过产验证后，保藏为少土管理日油管，入细胞细胞库（现代-O）。</p>
            </div>

            <!-- 查看全部弹窗 -->
            <el-dialog
                title="菌种源保藏出/入细胞库登记表说明"
                :visible.sync="dialogVisible"
                width="50%"
                class="view-all-dialog"
            >
                <div class="dialog-content">
                    <p>1、菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，请将来源有3 类菌经。</p>
                    <p>1.1 原净土管理日油性的源头菌种：入细胞细胞库（现代-O）。</p>
                    <p>1.2 是到菌的源头菌种：接种入主细胞库（现代-O），经过百种、验证后，菌种被保存日油管理沙土菌种，入细胞细胞库（现代-O）。</p>
                    <p>1.3 是否菌种能自己分离后获得的源头菌种，接种入主细胞库：经过产验证后，保藏为少土管理日油管，入细胞细胞库（现代-O）。</p>
                </div>
            </el-dialog>
        </el-card>

        <!-- Table -->
        <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-form-item>
                    <el-form-item label="菌种名称：">
                        <el-input v-model="form.strainName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已入库" value="1"></el-option>
                            <el-option label="已出库" value="2"></el-option>
                            <el-option label="入库待确认" value="3"></el-option>
                        </el-select>
                    </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>
                    </el-form-item>
                </el-form>
            </template>

            <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>
                    <div class="flex a-center">
                        <el-button @click="handleNewStrain" class="el-icon-plus" type="primary" style="margin-right: 12px;">新增原始细胞</el-button>
                        <el-button @click="handleBatchAdd" class="el-icon-plus" type="primary">批量新增</el-button>
                    </div>
                </div>
            </template>

            <template #table>
                <el-table-column prop="strainNo" label="菌种编号" />
                <el-table-column prop="strainName" label="菌种名称" />
                <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="notes" label="备注" />
                <el-table-column prop="status" label="当前状态">
                    <template #default="{ row }">
                        <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="handleEdit(row)">编辑</el-button>
                        <el-button type="text" @click="handleRecord(row)">出入库记录</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>
     
    </div>
</template>

<script>

export default {
    name: 'StrainLibraryManage',
    components: {
    },
    data() {
        return {
            dialogVisible: false,
            currentType: 'list',
            detailVisible: false,
            currentDetail: {},
            form: {
                strainNo: '',
                strainName: '',
                status: ''
            },
            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'
                }
            ]
        }
    },
    methods: {
        handleViewMore() {
            this.dialogVisible = true;
        },
        resetForm() {
            this.form = {
                strainNo: '',
                strainName: '',
                status: ''
            }
            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())
                )
            }
            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-library/strain-library-manage/add')
            // 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',
                query: {
                    id: row.strainNo
                }
            })
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            // Implement page change logic
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            // Implement size change logic
        },
        handleTypeChange(type) {
            this.currentType = type;
            // Implement type change logic
        },
        getStatusType(status) {
            const types = {
                1: 'success',
                2: 'info',
                3: 'warning'
            }
            return types[status] || 'info'
        },
        getStatusText(status) {
            const texts = {
                1: '已入库',
                2: '已出库',
                3: '入库待确认'
            }
            return texts[status] || '未知状态'
        }
    }
}
</script>

<style scoped lang="less">
.list {
    padding: 20px;
}

.header-box {
    margin-bottom: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);

    .box-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        position: relative;

        .header-icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .view-more {
            position: absolute;
            right: 0;
            color: #049C9A;
        }
    }

    .header-content {
        color: rgba(0, 0, 0, 0.88);
        font-size: 14px;
        line-height: 1.8;
        margin-left: 30px;
        transition: max-height 0.3s ease-in-out;
        overflow: hidden;

        &.collapsed {
            max-height: 48px;
            overflow: hidden;
        }

        p {
            margin: 5px 0;
        }
    }
}

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

    .el-form-item {
        margin-right: 20px;
        margin-bottom: 0;
    }

    .el-button {
        margin-left: 10px;
    }
}

.action-buttons {
    margin-bottom: 20px;

    .el-button {
        margin-right: 10px;
    }
}

.tab-container {
    display: flex;
    margin-bottom: 20px;

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

        &.active {
            background: #fff;
            border-color: #049C9A;
            color: #049C9A;
            font-weight: bold;
        }
    }
}

.flex {
    display: flex;
    align-items: center;
}

.tableTitle {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
    align-items: center;

    .title {
        background: #fafafc;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #dcdfe6;
        font-weight: bold;
        font-size: 18px;
        color: #606266;
        width: unset;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        width: 166px;
        text-align: center;

    }

    .drafts {
        background: #fafafc;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #dcdfe6;
        font-weight: 400;
        font-size: 18px;
        color: #606266;
        margin-left: 16px;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        width: 166px;
        text-align: center;
    }

    .active {
        color: #049c9a;
        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;
        margin-right: 0;
        
        .el-dialog__title {
            font-size: 18px;
            font-weight: bold;
            color: #303133;
        }
    }

    :deep(.el-dialog__body) {
        padding: 20px;

        .dialog-content {
            font-size: 14px;
            line-height: 1.8;
            color: #606266;

            p {
                margin: 12px 0;
                
                &:first-child {
                    margin-top: 0;
                }
                
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

</style>

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

New file
@@ -0,0 +1,465 @@
<template>
    <div class="list">
        <el-card class="header-box">
            
            <div class="box-title">
                <img src="@/assets/public/notice.png" class="header-icon">
                <span>菌种源保藏出/入细胞库登记表说明</span>
                <el-button type="text" class="view-more" @click="handleViewMore">查看全部 >></el-button>
            </div>
            <div class="header-content" :class="{ 'collapsed': true }">
                <p>1、菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，请将来源有3 类菌经。</p>
                <p>1.1 原净土管理日油性的源头菌种：入细胞细胞库（现代-O）。</p>
                <p>1.2 是到菌的源头菌种：接种入主细胞库（现代-O），经过百种、验证后，菌种被保存日油管理沙土菌种，入细胞细胞库（现代-O）。</p>
                <p>1.3 是否菌种能自己分离后获得的源头菌种，接种入主细胞库：经过产验证后，保藏为少土管理日油管，入细胞细胞库（现代-O）。</p>
            </div>

            <!-- 查看全部弹窗 -->
            <el-dialog
                title="菌种源保藏出/入细胞库登记表说明"
                :visible.sync="dialogVisible"
                width="50%"
                class="view-all-dialog"
            >
                <div class="dialog-content">
                    <p>1、菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，请将来源有3 类菌经。</p>
                    <p>1.1 原净土管理日油性的源头菌种：入细胞细胞库（现代-O）。</p>
                    <p>1.2 是到菌的源头菌种：接种入主细胞库（现代-O），经过百种、验证后，菌种被保存日油管理沙土菌种，入细胞细胞库（现代-O）。</p>
                    <p>1.3 是否菌种能自己分离后获得的源头菌种，接种入主细胞库：经过产验证后，保藏为少土管理日油管，入细胞细胞库（现代-O）。</p>
                </div>
            </el-dialog>
        </el-card>

        <!-- Table -->
        <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-form-item>
                    <el-form-item label="菌种名称：">
                        <el-input v-model="form.strainName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已入库" value="1"></el-option>
                            <el-option label="已出库" value="2"></el-option>
                            <el-option label="入库待确认" value="3"></el-option>
                        </el-select>
                    </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>
                    </el-form-item>
                </el-form>
            </template>

            <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>
                    <div class="flex a-center">
                        <el-button @click="handleNewStrain" class="el-icon-plus" type="primary" style="margin-right: 12px;">新增原始细胞</el-button>
                        <el-button @click="handleBatchAdd" class="el-icon-plus" type="primary">批量新增</el-button>
                    </div>
                </div>
            </template>

            <template #table>
                <el-table-column prop="strainNo" label="菌种编号" />
                <el-table-column prop="strainName" label="菌种名称" />
                <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="notes" label="备注" />
                <el-table-column prop="status" label="当前状态">
                    <template #default="{ row }">
                        <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="handleEdit(row)">编辑</el-button>
                        <el-button type="text" @click="handleRecord(row)">出入库记录</el-button>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>
     
    </div>
</template>

<script>

export default {
    name: 'StrainLibraryManage',
    components: {
    },
    data() {
        return {
            dialogVisible: false,
            currentType: 'list',
            detailVisible: false,
            currentDetail: {},
            form: {
                strainNo: '',
                strainName: '',
                status: ''
            },
            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'
                }
            ]
        }
    },
    methods: {
        handleViewMore() {
            this.dialogVisible = true;
        },
        resetForm() {
            this.form = {
                strainNo: '',
                strainName: '',
                status: ''
            }
            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())
                )
            }
            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-library/strain-library-manage/add')
            // 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',
                query: {
                    id: row.strainNo
                }
            })
        },
        handleCurrentChange(page) {
            this.queryForm.pageNum = page
            // Implement page change logic
        },
        handleSizeChange(size) {
            this.queryForm.pageSize = size
            // Implement size change logic
        },
        handleTypeChange(type) {
            this.currentType = type;
            // Implement type change logic
        },
        getStatusType(status) {
            const types = {
                1: 'success',
                2: 'info',
                3: 'warning'
            }
            return types[status] || 'info'
        },
        getStatusText(status) {
            const texts = {
                1: '已入库',
                2: '已出库',
                3: '入库待确认'
            }
            return texts[status] || '未知状态'
        }
    }
}
</script>

<style scoped lang="less">
.list {
    padding: 20px;
}

.header-box {
    margin-bottom: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);

    .box-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        position: relative;

        .header-icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        .view-more {
            position: absolute;
            right: 0;
            color: #049C9A;
        }
    }

    .header-content {
        color: rgba(0, 0, 0, 0.88);
        font-size: 14px;
        line-height: 1.8;
        margin-left: 30px;
        transition: max-height 0.3s ease-in-out;
        overflow: hidden;

        &.collapsed {
            max-height: 48px;
            overflow: hidden;
        }

        p {
            margin: 5px 0;
        }
    }
}

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

    .el-form-item {
        margin-right: 20px;
        margin-bottom: 0;
    }

    .el-button {
        margin-left: 10px;
    }
}

.action-buttons {
    margin-bottom: 20px;

    .el-button {
        margin-right: 10px;
    }
}

.tab-container {
    display: flex;
    margin-bottom: 20px;

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

        &.active {
            background: #fff;
            border-color: #049C9A;
            color: #049C9A;
            font-weight: bold;
        }
    }
}

.flex {
    display: flex;
    align-items: center;
}

.tableTitle {
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
    align-items: center;

    .title {
        background: #fafafc;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #dcdfe6;
        font-weight: bold;
        font-size: 18px;
        color: #606266;
        width: unset;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        width: 166px;
        text-align: center;

    }

    .drafts {
        background: #fafafc;
        border-radius: 8px 8px 0px 0px;
        border: 1px solid #dcdfe6;
        font-weight: 400;
        font-size: 18px;
        color: #606266;
        margin-left: 16px;
        cursor: pointer;
        height: 50px;
        line-height: 50px;
        width: 166px;
        text-align: center;
    }

    .active {
        color: #049c9a;
        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;
        margin-right: 0;
        
        .el-dialog__title {
            font-size: 18px;
            font-weight: bold;
            color: #303133;
        }
    }

    :deep(.el-dialog__body) {
        padding: 20px;

        .dialog-content {
            font-size: 14px;
            line-height: 1.8;
            color: #606266;

            p {
                margin: 12px 0;
                
                &:first-child {
                    margin-top: 0;
                }
                
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

</style>

 laboratory/src/App.vue

@@ -145,6 +145,16 @@
    .el-input__inner {
      width: 200px;
    }
    .el-pagination__sizes{
      .el-input__inner {
      width: 100px;
    }
    }
    .el-pagination__jump{
      .el-input__inner {
      width: 50px;
    }
    }
  }
}


 laboratory/src/components/TableSlot/index.vue

@@ -13,7 +13,9 @@
            </template>
            <template v-if="$slots.table">
                <Table :data="tableData" :total="total" :height="height" :queryForm="queryForm"
                    @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
                    @handleCurrentChange="handleCurrentChange" 
                    @handleSizeChange="handleSizeChange"
                    @selection-change="handleSelectionChange">
                    <slot name="table"></slot>
                </Table>
            </template>
@@ -60,6 +62,9 @@
        },
        handleSizeChange(size) {
            this.$emit('handleSizeChange', size)
        },
        handleSelectionChange(selection) {
            this.$emit('selection-change', selection)
        }
    }
}

 laboratory/src/components/approvalProcess/index.vue

@@ -1,44 +1,25 @@
<template>
  <div class="approval-process">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in processData"
        :key="index"
        :type="activity.type"
      >
      <el-timeline-item v-for="(activity, index) in processData" :key="index" :type="activity.type">
        <div v-if="activity.mode === 'card'">
          <div
            class="member-list-card"
            v-for="(group, groupIndex) in activity.groups"
            :key="groupIndex"
          >
          <div class="member-list-card" v-for="(group, groupIndex) in activity.groups" :key="groupIndex">
            <div class="member-item">
              <div class="member-title">
                {{ group.title }}
              </div>
              <div class="flex-over">
                <div
                  class="people-list"
                  v-for="(member, memberIndex) in group.members"
                  :key="memberIndex"
                >
                <div class="people-list" v-for="(member, memberIndex) in group.members" :key="memberIndex">
                  <div class="people-item">
                    <img :src="member.avatar" alt="" class="people-img" />
                    <div class="member-name">{{ member.name }}</div>
                  </div>
                  <div class="member-status">
                    <div
                      class="member-status-text"
                      :class="
                        member.status === 'approved' ? 'success' : 'warning'
                      "
                    >
                      {{ member.status}}
                    <div class="member-status-text" :class="member.status === 'approved' ? 'success' : 'warning'
                      ">
                      {{ member.status }}
                    </div>
                    <div
                      v-if="member.status === '已确认'"
                      class="member-status-time"
                    >
                    <div v-if="member.status === '已确认'" class="member-status-time">
                      {{ member.approveTime }}
                    </div>
                  </div>
@@ -47,18 +28,17 @@
            </div>
          </div>
        </div>
        <div
          v-else
          class="approval-process-item"
          :class="activity.type === 'primary' ? '' : 'approval-process-item1'"
        >
          <div
            v-for="(field, idx) in activity.fields"
            :key="idx"
            style="margin-bottom: 6px"
          >
            <span>{{ field.label }}</span>
            <span>{{ field.value }}</span>
        <div v-else class="approval-process-item" :class="activity.type === 'primary' ? '' : 'approval-process-item1'">
          <div v-for="(field, idx) in activity.fields" :key="idx" style="margin-bottom: 6px">
            <span v-if="field.type == 'img'">
              <el-image style="width: 50px; height: 50px;margin-left: 40px;" v-if="field.value" :src="field.value"
                    :preview-src-list="[field.value]">
                  </el-image>
            </span>
            <span v-else>
              <span>{{ field.label }}</span>
              <span>{{ field.value }}</span>
            </span>
          </div>
        </div>
      </el-timeline-item>
@@ -217,27 +197,21 @@
    // }

    &:nth-child(1) {
      background: linear-gradient(
        to bottom,
        rgba(5, 160, 193, 0.2) 0%,
        rgba(5, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(5, 160, 193, 0.2) 0%,
          rgba(5, 242, 194, 0) 70%);
    }

    &:nth-child(2) {
      background: linear-gradient(
        to bottom,
        rgba(255, 77, 79, 0.2) 0%,
        rgba(255, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(255, 77, 79, 0.2) 0%,
          rgba(255, 242, 194, 0) 70%);
    }

    &:nth-child(3) {
      background: linear-gradient(
        to bottom,
        rgba(250, 199, 20, 0.21) 0%,
        rgba(255, 242, 194, 0) 70%
      );
      background: linear-gradient(to bottom,
          rgba(250, 199, 20, 0.21) 0%,
          rgba(255, 242, 194, 0) 70%);
    }

    .member-item {
@@ -256,12 +230,14 @@
        text-align: left;
        padding-left: 17px;
      }

      .flex-over {
        margin-top: 12px;
        flex: 1;
        overflow: auto;
        height: 100%;
      }

      .people-list {
        display: flex;
        justify-content: space-between;
@@ -270,6 +246,7 @@
        margin-top: 12px;

        display: flex;

        .people-item {
          display: flex;
          align-items: center;
@@ -281,12 +258,14 @@
          border-radius: 50%;
          margin-right: 10px;
        }

        .member-status {
          align-items: flex-end;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .member-status-text {
          width: 52px;
          height: 22px;
@@ -295,6 +274,7 @@
          text-align: center;
          border: 1px solid rgba(0, 0, 0, 0.15);
        }

        .warning {
          background: #fffbe6;
          border-radius: 4px;
@@ -304,12 +284,14 @@
          font-size: 12px;
          color: #faad14;
        }

        .success {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.88);
        }

        .member-status-time {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;

 laboratory/src/views/dataManagement/confirmation-sheet/components/add-test-item.vue

@@ -49,6 +49,10 @@
    dialogVisible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
      default: () => null
    }
  },
  data() {
@@ -59,7 +63,9 @@
        termType: 1,
        termMethodCode: '',
        termMethod: '',
        sampleRequire: ''
        sampleRequire: '',
        status: 1,
        testId: ''
      },
      rules: {
        termCode: [
@@ -83,17 +89,48 @@
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val && this.editData) {
        // 编辑模式，回显数据
        this.$nextTick(() => {
          this.form = {
            ...this.editData,
            termType: Number(this.editData.termType) // 确保termType是数字类型
          }
        })
      } else if (!val) {
        // 关闭对话框时重置表单
        this.resetForm()
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('confirm', this.form)
          // 提交前确保termType是数字类型
          const submitData = {
            ...this.form,
            termType: Number(this.form.termType)
          }
          this.$emit('confirm', submitData)
          this.resetForm()
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        termCode: '',
        termName: '',
        termType: 1,
        termMethodCode: '',
        termMethod: '',
        sampleRequire: '',
        status: 1,
        testId: ''
      }
    }
  }
}

 laboratory/src/views/dataManagement/confirmation-sheet/components/add.vue

@@ -6,16 +6,16 @@
      <el-button @click="showScheduling = true" class="el-icon-plus" type="primary">
        选择实验调度</el-button>
    </div>
    <Table :tableData="tableData" :total="total" :height="null">
    <Table :data="tableData" :total="total" :height="null">
      <template>
        <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
        <el-table-column prop="planName" label="实验编号"></el-table-column>
        <el-table-column prop="planName" label="实验名称"></el-table-column>
        <el-table-column prop="stage" label="    通知时间"></el-table-column>
        <el-table-column prop="stage" label="    实验开始时间"></el-table-column>
        <el-table-column prop="stage" label="    实验结束时间"></el-table-column>
        <el-table-column prop="stage" label="    参加人员"></el-table-column>
        <el-table-column prop="creator" label="状态"></el-table-column>
        <el-table-column prop="testName" label="实验名称"></el-table-column>
        <el-table-column prop="notifyTime" label="通知时间"></el-table-column>
        <el-table-column prop="startTime" label="实验开始时间"></el-table-column>
        <el-table-column prop="endTime" label="实验结束时间"></el-table-column>
        <el-table-column prop="participants" label="参加人员"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </template>
    </Table>
    <div class="header-title-left" style="margin-top: 60px;">
@@ -25,25 +25,35 @@
        新增检测项</el-button>
      <span>【注意：这里有多少个检测项 系统就会自动创建对应数量的《检测项的检验方法及数据记录》】</span>
    </div>
    <Table :tableData="tableData" :total="total" :height="null">
    <Table :data="testItems" :total="testItems.length" :height="null">
      <template>
        <el-table-column prop="planCode" label="序号"></el-table-column>
        <el-table-column prop="planName" label="检测项名称"></el-table-column>
        <el-table-column prop="planName" label="检测项编号"></el-table-column>
        <el-table-column prop="stage" label="    定性/定量"></el-table-column>
        <el-table-column prop="stage" label="    检测方法编号"></el-table-column>
        <el-table-column prop="stage" label="    检测方法"></el-table-column>
        <el-table-column prop="stage" label="    收样要求"></el-table-column>
        <el-table-column prop="creator" label="操作"></el-table-column>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="termName" label="检测项名称"></el-table-column>
        <el-table-column prop="termCode" label="检测项编号"></el-table-column>
        <el-table-column prop="termType" label="定性/定量">
          <template slot-scope="scope">
            {{ scope.row.termType === 1 ? '定性' : '定量' }}
          </template>
        </el-table-column>
        <el-table-column prop="termMethodCode" label="检测方法编号"></el-table-column>
        <el-table-column prop="termMethod" label="检测方法"></el-table-column>
        <el-table-column prop="sampleRequire" label="收样要求"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEditTestItem(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDeleteTestItem(scope.$index)" class="delete-btn">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Table>
    <div class="btn_box flex ">
      <el-button type="primary" @click="handleSubmit">提交确认单</el-button>
      <el-button @click="$router.go(-1)">存草稿</el-button>
      <el-button @click="handleSaveDraft">存草稿</el-button>
    </div>
    <experimentalScheduling :show="showScheduling"/>
    <experimentalScheduling :show="showScheduling" @close="showScheduling = false" @submit="setSelectedScheduling"/>
    <add-test-item
      :dialogVisible="testItemDialogVisible"
      :editData="currentTestItem"
      @close="handleTestItemDialogClose"
      @confirm="handleTestItemConfirm"
    />
@@ -60,6 +70,7 @@
import experimentalScheduling from './experimental-scheduling.vue';
import AddTestItem from './add-test-item.vue'
import ConfirmDialog from './confirm-dialog.vue'
import { add, update, getDetail } from '../service'

export default {
  name: 'AddConfirmationSheet',
@@ -93,6 +104,16 @@
        testName: '', // 实验名称
        sampleCode: '' // 取样单编号
      },
      selectedScheduling: null, // 添加选中的实验调度数据
      currentTestItem: null, // 当前编辑的检测项
      formData: {
        id: '', // 确认单ID
        dispatchId: '', // 实验调度ID
        auditStatus: -1, // 审核状态，默认草稿
        testMethodConfirmSheetTerms: [], // 确认单检测项
        confirmSign: '', // 签字
        signTime: '', // 签字时间
      }
    };
  },
  computed: {
@@ -102,10 +123,52 @@
  },
  watch: {},
  created() {
    
    // 判断是否是编辑模式
    const id = this.$route.query.id
    if (id) {
      this.getDetailData(id)
    }
  },
  mounted() { },
  methods: {
    setSelectedScheduling(data) {
      console.log('data',data)
      if (!data || data.length === 0) return;
      const selectedData = data[0]; // 获取选中的第一条数据
      this.selectedScheduling = selectedData;
      
      // 更新表格数据
      this.tableData = [{
        planCode: selectedData.projectName || '', // 所属项目课题方案
        planName: selectedData.experimentCode || '', // 实验编号
        testName: selectedData.experimentName || '', // 实验名称
        notifyTime: selectedData.experimentDate || '', // 通知时间
        startTime: selectedData.experimentStartTime || '', // 实验开始时间
        endTime: selectedData.experimentEndTime || '', // 实验结束时间
        participants: selectedData.participantsName || '', // 参加人员
        status: this.getStatusText(selectedData.status) // 状态
      }];
      this.total = this.tableData.length;
      
      // 更新确认表单数据
      this.confirmFormData = {
        planName: selectedData.projectName || '',
        testCode: selectedData.experimentCode || '',
        testName: selectedData.experimentName || '',
        sampleCode: selectedData.experimentCode || '' // 使用实验编号作为取样单编号
      };
    },
    
    // 添加状态转换方法
    getStatusText(status) {
      const statusMap = {
        "-1": "草稿箱",
        "1": "待确认",
        "2": "已确认",
        "3": "已封存"
      };
      return statusMap[status] || "未知";
    },
    setSelectedIds(arr, selectKeyList) {
      function traverse(item) {
        item.selected = selectKeyList.includes(item.menuId);
@@ -235,37 +298,213 @@
      })
    },
    showAddTestItem() {
      this.currentTestItem = null // 清空当前编辑项
      this.testItemDialogVisible = true
    },
    handleTestItemDialogClose() {
      this.testItemDialogVisible = false
      this.currentTestItem = null
    },
    handleTestItemConfirm(formData) {
      // 将新增的检测项添加到列表中
      this.testItems.push({
        ...formData,
        index: this.testItems.length + 1
      })
      if (this.currentTestItem) {
        // 编辑模式
        const index = this.testItems.findIndex(item => item.termCode === this.currentTestItem.termCode)
        if (index !== -1) {
          this.testItems.splice(index, 1, {
            ...formData,
            id: this.currentTestItem.id // 保留原有ID
          })
        }
      } else {
        // 新增模式
        this.testItems.push({
          ...formData,
          id: this.generateUniqueId() // 生成唯一ID
        })
      }
      this.testItemDialogVisible = false
      this.$message.success('添加成功')
      this.currentTestItem = null
      this.$message.success(this.currentTestItem ? '编辑成功' : '添加成功')
    },
    handleEditTestItem(row) {
      this.currentTestItem = { ...row } // 深拷贝当前行数据
      this.testItemDialogVisible = true
    },
    handleDeleteTestItem(index) {
      this.$confirm('确认删除该检测项吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.testItems.splice(index, 1)
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    generateUniqueId() {
      return 'test_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9)
    },
    handleSubmit() {
      // 这里可以添加表单验证逻辑
      if (this.testItems.length === 0) {
        this.$message.warning('请至少添加一个检测项')
        return
      }
      if (!this.selectedScheduling) {
        this.$message.warning('请选择实验调度')
        return
      }
      // 设置确认弹窗的数据
      this.confirmFormData = {
        planName: '项目名称示例',
        testCode: '实验编号示例',
        testName: '实验名称示例',
        sampleCode: '取样单编号示例'
        planName: this.selectedScheduling.projectName || '', // 所属项目课题方案
        testCode: this.selectedScheduling.experimentCode || '', // 实验编号
        testName: this.selectedScheduling.experimentName || '', // 实验名称
        sampleCode: this.selectedScheduling.experimentCode || '' // 取样单编号
      }
      this.confirmDialogVisible = true
    },
    handleConfirmSubmit(signatureImage) {
      // 处理最终提交逻辑
      console.log('提交确认单，签名图片：', signatureImage)
      // TODO: 调用提交API
      this.$message.success('提交成功')
      this.$router.push('/dataManagement/confirmation-sheet')
    }
    async handleConfirmSubmit(signatureImage) {
      try {
        // 构建提交数据
        const submitData = {
          dispatchId: this.selectedScheduling.id, // 实验调度ID
          auditStatus: 1, // 待确认状态
          confirmSign:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'|| signatureImage, // 签字图片
          signTime: new Date().toISOString(), // 签字时间
          testMethodConfirmSheetTerms: this.testItems.map(item => ({
            id: item.id, // 保留原有ID（编辑时使用）
            termCode: item.termCode,
            termName: item.termName,
            termType: item.termType,
            termMethodCode: item.termMethodCode,
            termMethod: item.termMethod,
            sampleRequire: item.sampleRequire,
            status: 2, // 已填写状态
            testId: item.testId
          }))
        }

        // 打印提交参数
        console.log('提交确认单参数：', JSON.stringify(submitData, null, 2))

        // 根据是否有 id 决定调用新增还是更新接口
        if (this.formData.id) {
          submitData.id = this.formData.id
          console.log('调用更新接口，参数：', JSON.stringify(submitData, null, 2))
          await update(submitData)
          this.$message.success('更新成功')
        } else {
          console.log('调用新增接口，参数：', JSON.stringify(submitData, null, 2))
          await add(submitData)
          this.$message.success('提交成功')
        }
        
        this.confirmDialogVisible = false // 关闭弹窗
        this.$router.go(-1)
      } catch (error) {
        this.$message.error((this.formData.id ? '更新' : '提交') + '失败：' + (error.message || '未知错误'))
      }
    },
    async handleSaveDraft() {
      try {
        if (!this.selectedScheduling) {
          this.$message.warning('请选择实验调度')
          return
        }

        // 构建草稿数据
        const draftData = {
          dispatchId: this.selectedScheduling.id,
          auditStatus: -1, // 草稿箱状态
          testMethodConfirmSheetTerms: this.testItems.map(item => ({
            id: item.id, // 保留原有ID（编辑时使用）
            termCode: item.termCode,
            termName: item.termName,
            termType: item.termType,
            termMethodCode: item.termMethodCode,
            termMethod: item.termMethod,
            sampleRequire: item.sampleRequire,
            status: -1, // 草稿箱状态
            testId: item.testId
          }))
        }

        // 打印草稿参数
        console.log('保存草稿参数：', JSON.stringify(draftData, null, 2))

        // 根据是否有 id 决定调用新增还是更新接口
        if (this.formData.id) {
          draftData.id = this.formData.id
          console.log('调用更新草稿接口，参数：', JSON.stringify(draftData, null, 2))
          await update(draftData)
          this.$message.success('更新草稿成功')
        } else {
          console.log('调用新增草稿接口，参数：', JSON.stringify(draftData, null, 2))
          await add(draftData)
          this.$message.success('保存草稿成功')
        }
        
        this.$router.push('/dataManagement/confirmation-sheet')
      } catch (error) {
        this.$message.error((this.formData.id ? '更新' : '保存') + '草稿失败：' + (error.message || '未知错误'))
      }
    },
    async getDetailData(id) {
      try {
        const res = await getDetail({ id })
        if (res.data) {
          // 设置实验调度数据
          this.selectedScheduling = {
            id: res.data.dispatchId,
            // ... 其他调度相关字段
          }
          
          // 设置检测项数据
          this.testItems = res.data.testMethodConfirmSheetTerms.map(item => ({
            ...item,
            id: item.id // 使用后端返回的ID
          }))

          // 设置表单数据
          this.formData = {
            id: res.data.id,
            dispatchId: res.data.dispatchId,
            auditStatus: res.data.auditStatus,
            confirmSign: res.data.confirmSign,
            signTime: res.data.signTime
          }
        }
      } catch (error) {
        this.$message.error('获取详情失败：' + (error.message || '未知错误'))
      }
    },

    async handleEditSubmit(signatureImage) {
      try {
        const submitData = {
          id: this.formData.id,
          dispatchId: this.selectedScheduling.id,
          auditStatus: 1,
          confirmSign: signatureImage,
          signTime: new Date().toISOString(),
          testMethodConfirmSheetTerms: this.testItems.map(item => ({
            id: item.id, // 保留原有ID
            termCode: item.termCode,
            termName: item.termName,
            termType: item.termType,
            termMethodCode: item.termMethodCode,
            termMethod: item.termMethod,
            sampleRequire: item.sampleRequire,
            status: item.status,
            testId: item.testId
          }))
        }

        await update(submitData)
        this.$message.success('更新成功')
        this.$router.push('/dataManagement/confirmation-sheet')
      } catch (error) {
        this.$message.error('更新失败：' + (error.message || '未知错误'))
      }
    },
  },
};
</script>

 laboratory/src/views/dataManagement/confirmation-sheet/components/confirm-dialog.vue

@@ -23,19 +23,19 @@
        </div>
      </div>

      <Table :tableData="sampleData" :total="0" :height="null">
      <Table :data="sampleData" :total="0" :height="null">
        <template>
          <el-table-column prop="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="testName" label="检测项名称"></el-table-column>
          <el-table-column prop="testCode" label="检测项编号"></el-table-column>
          <el-table-column prop="testType" label="定性/定量" align="center">
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="termName" label="检测项名称"></el-table-column>
          <el-table-column prop="termCode" label="检测项编号"></el-table-column>
          <el-table-column prop="termType" label="定性/定量" align="center">
            <template slot-scope="scope">
              {{ scope.row.testType === 1 ? '定性' : '定量' }}
              {{ scope.row.termType === 1 ? '定性' : '定量' }}
            </template>
          </el-table-column>
          <el-table-column prop="methodCode" label="检测方法编号"></el-table-column>
          <el-table-column prop="methodName" label="检测方法"></el-table-column>
          <el-table-column prop="requirements" label="收样要求" show-overflow-tooltip></el-table-column>
          <el-table-column prop="termMethodCode" label="检测方法编号"></el-table-column>
          <el-table-column prop="termMethod" label="检测方法"></el-table-column>
          <el-table-column prop="sampleRequire" label="收样要求" show-overflow-tooltip></el-table-column>
        </template>
      </Table>

@@ -53,7 +53,7 @@

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="!imgSrc">确 认</el-button>
      <el-button type="primary" @click="handleConfirm">确 认</el-button>
    </div>

    <SignatureCanvas
@@ -115,8 +115,12 @@
    },
    handleConfirm() {
      if (!this.imgSrc) {
        this.$message.warning("请先完成签名确认");
        return;
        this.$message({
          type: 'warning',
          message: '请先完成签名确认',
          duration: 2000
        })
        return
      }
      this.$emit("confirm", this.imgSrc);
      this.handleClose();

 laboratory/src/views/dataManagement/confirmation-sheet/components/experimental-scheduling.vue

@@ -1,27 +1,33 @@
<template>
    <div>
        <el-dialog title="选择实验调度" :visible.sync="show" width="80%">
            <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
        <el-dialog title="选择实验调度" :visible.sync="show" width="80%" @close="$emit('close', false)">
            <TableCustom 
            :queryForm="form" :tableData="tableData" 
            :total="total" :height="null"
             @handleCurrentChange="handleCurrentChange" 
             @selection-change="changeSelectedRows"
             @handleSizeChange="handleSizeChange">
                <template #search>
                    <el-form :model="form" label-width="140px" inline>
                        <el-form-item label="所属项目课题方案：">
                            <el-input v-model="form.planName" placeholder="请输入"></el-input>
                            <el-input v-model="form.projectName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="实验编号：">
                            <el-input v-model="form.planCode" placeholder="请输入"></el-input>
                            <el-input v-model="form.experimentCode" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="实验名称：">
                            <el-input v-model="form.creator" placeholder="请输入"></el-input>
                            <el-input v-model="form.experimentName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="通知时间：">
                            <el-date-picker v-model="form.createTime" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"></el-date-picker>
                                value-format="yyyy-MM-dd" @change="handleDateChange"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="状态：">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option label="待确认" value="待确认"></el-option>
                                <el-option label="已确认" value="已确认"></el-option>
                                <el-option label="全部" value=""></el-option>
                                <el-option label="待确认" value="1"></el-option>
                                <el-option label="已确认" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" class="search-btn-box">
@@ -32,44 +38,157 @@
                </template>
                
                <template #table>
                    <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
                    <el-table-column prop="planName" label="实验编号"></el-table-column>
                    <el-table-column prop="planName" label="实验名称"></el-table-column>
                    <el-table-column prop="stage" label="通知时间"></el-table-column>
                    <el-table-column prop="stage" label="实验开始时间"></el-table-column>
                    <el-table-column prop="stage" label="试验结束时间"></el-table-column>
                    <el-table-column prop="stage" label="参加人员"></el-table-column>
                    <el-table-column prop="creator" label="状态"></el-table-column>
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="projectName" label="所属项目课题方案"></el-table-column>
                    <el-table-column prop="experimentCode" label="实验编号"></el-table-column>
                    <el-table-column prop="experimentName" label="实验名称"></el-table-column>
                    <el-table-column prop="experimentDate" label="通知时间"></el-table-column>
                    <el-table-column prop="experimentStartTime" label="实验开始时间"></el-table-column>
                    <el-table-column prop="experimentEndTime" label="实验结束时间"></el-table-column>
                    <el-table-column prop="participantsName" label="参加人员"></el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                            <el-tag :type="getStatusType(scope.row.status)">
                                {{ getStatusText(scope.row.status) }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </template>
            </TableCustom>
            <span slot="footer" class="select-member-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="show = false">确 定</el-button>
                <el-button @click="$emit('close', false)">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getDispatchList } from "../service";

export default {
    props: ['show'],
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form: {},
            form: {
                projectName: "",
                experimentCode: "",
                experimentName: "",
                startTime: "",
                endTime: "",
                status: "",
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            total: 0
            total: 0,
            selectedRows: []
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.getTableData();
            }
        }
    },
    methods: {
        handleDateChange(val) {
            if (val) {
                this.form.startTime = val[0];
                this.form.endTime = val[1];
            } else {
                this.form.startTime = "";
                this.form.endTime = "";
            }
        },
        resetForm() {

            this.form = {
                projectName: "",
                experimentCode: "",
                experimentName: "",
                startTime: "",
                endTime: "",
                status: "",
                pageNum: 1,
                pageSize: 10
            };
            this.getTableData();
        },
        handleSearch() {
            
            this.form.pageNum = 1;
            this.getTableData();
        },
        getStatusType(status) {
            const statusMap = {
                "-1": "info",
                "1": "warning",
                "2": "success",
                "3": "info"
            };
            return statusMap[status] || "info";
        },
        getStatusText(status) {
            const statusMap = {
                "-1": "草稿箱",
                "1": "待确认",
                "2": "已确认",
                "3": "已封存"
            };
            return statusMap[status] || "未知";
        },
        getTableData() {
            const params = {
                ...this.form
            };
            getDispatchList(params).then(res => {
                console.log('222222222222',res)
                if (res) {
                    this.tableData = res || [];
                    this.total = res.length || 0;
                }
            });
        },
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getTableData();
        },
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.form.pageNum = 1;
            this.getTableData();
        },
        changeSelectedRows(val) {
            console.log('val',val)
            this.selectedRows = val;
        },
        handleCancel() {
            this.$emit('update:show', false);
        },
        handleConfirm() {
            if (!this.selectedRows || this.selectedRows.length === 0) {
                this.$message.warning('请至少选择一条数据');
                return;
            }
            if (this.selectedRows.length != 1) {
                this.$message.warning('请选择一条数据');
                return;
            }
            this.$emit('submit', this.selectedRows);
            this.$emit('close', false);
        }
    }
}
</script>

<style lang="less" scoped>
.select-member-footer {
    display: flex;
    justify-content: flex-end;
}
</style>

 laboratory/src/views/dataManagement/confirmation-sheet/components/review-dialog.vue

@@ -1,11 +1,6 @@
<template>
  <el-dialog
    title="审核检测方法确认单"
    :visible.sync="visible"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
  <el-dialog title="审核检测方法确认单" :visible="dialogVisible" width="80%" :close-on-click-modal="false" @close="handleClose"
    v-loading="loading">
    <div class="approval-dialog">
      <div class="approval-content">
        <div class="approval-content-card">
@@ -14,39 +9,46 @@
            <div class="basic-info">
              <div class="info-header">
                <div class="info-item">
                  <span class="label">所属项目课题方案：{{ formData.planName }}</span>
                  <span class="label">所属项目课题方案：{{ formData.projectName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">实验名称：{{ formData.testName }}</span>
                  <span class="label">实验名称：{{ formData.experimentName }}</span>
                </div>
                <div class="info-item">
                  <span class="label">所属实验编号：{{ formData.testCode }}</span>
                  <span class="label">所属实验编号：{{ formData.experimentCode }}</span>
                </div>
              </div>
              <div class="info-header">
                <div class="info-item">
                  <span class="label">提交人：{{ formData.submitter }}</span>
                  <span class="label">提交人：{{ formData.createBy }}</span>
                </div>
                <div class="info-item">
                  <span class="label">提交人签名：{{ formData.submitterSignature }}</span>
                  <span class="label">提交人签名：</span>
                  <el-image style="width: 50px; height: 50px" v-if="formData.confirmSign" :src="formData.confirmSign"
                    :preview-src-list="[formData.confirmSign]">
                  </el-image>
                </div>
                <div class="info-item">
                  <span class="label">提交时间：{{ formData.submitTime }}</span>
                  <span class="label">提交时间：{{ formData.signTime }}</span>
                </div>
              </div>
            </div>

            <!-- 检测项表格 -->
            <div class="table-wrapper">
              <Table :tableData="sampleData" :total="0" :height="null">
              <Table :data="formData.testMethodConfirmSheetTerms" :total="0" :height="null">
                <template>
                  <el-table-column prop="index" label="序号" width="60" fixed></el-table-column>
                  <el-table-column prop="processTime" label="检验项名称"></el-table-column>
                  <el-table-column prop="sampleName" label="检验项编号"></el-table-column>
                  <el-table-column prop="sampleCode" label="定性/定量"></el-table-column>
                  <el-table-column prop="temperature" label="检测方法编号"></el-table-column>
                  <el-table-column prop="ph" label="检测方法"></el-table-column>
                  <el-table-column prop="waterAmount" label="收样要求"></el-table-column>
                  <el-table-column type="index" label="序号" width="60" fixed></el-table-column>
                  <el-table-column prop="termName" label="检验项名称"></el-table-column>
                  <el-table-column prop="termCode" label="检验项编号"></el-table-column>
                  <el-table-column prop="termType" label="定性/定量">
                    <template slot-scope="scope">
                      {{ scope.row.termType === 1 ? '定性' : '定量' }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="termMethodCode" label="检测方法编号"></el-table-column>
                  <el-table-column prop="termMethod" label="检测方法"></el-table-column>
                  <el-table-column prop="sampleRequire" label="收样要求"></el-table-column>
                </template>
              </Table>
            </div>
@@ -56,12 +58,7 @@

      <div class="approval-flow">
        <div class="flow-content">
          <approval-process
            :status="formData.status"
            :submit-time="formData.submitTime"
            :approver="formData.approver"
            :approve-time="formData.approveTime"
          />
          <approval-process :processData="formData.processData" />
        </div>
      </div>
    </div>
@@ -72,29 +69,22 @@
        <span>签字确认</span>
        <el-button type="primary" class="el-icon-plus" @click="openSignature">签名</el-button>
      </div>
      <img
        v-if="imgSrc"
        :src="imgSrc"
        alt="签名"
        class="signature-preview"
      />
      <img v-if="imgSrc" :src="imgSrc" alt="签名" class="signature-preview" />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="!imgSrc">确 认</el-button>
      <el-button type="primary" @click="handleConfirm" :disabled="!imgSrc" v-if="type === 'review'">确 认</el-button>
    </div>

    <SignatureCanvas
      :visible="signatureDialogVisible"
      @confirm="handleSignatureConfirm"
    />
    <SignatureCanvas :visible="signatureDialogVisible" @confirm="handleSignatureConfirm" />
  </el-dialog>
</template>

<script>
import SignatureCanvas from "@/components/SignatureCanvas.vue";
import ApprovalProcess from "@/components/approvalProcess";
import { getDetail, sign } from '../service';

export default {
  name: "ReviewDialog",
@@ -111,63 +101,149 @@
      type: String,
      default: "review",
    },
    formData: {
      type: Object,
      default: () => ({
        planName: '',
        testCode: '',
        testName: '',
        submitter: '',
        submitterSignature: '',
        submitTime: '',
        status: '',
        approver: '',
        approveTime: ''
      }),
    },
    sampleData: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      dialogVisible: false,
      signatureDialogVisible: false,
      imgSrc: "",
      formData: {
        projectName: '',
        experimentCode: '',
        experimentName: '',
        auditPersonId: '',
        auditSign: '',
        auditStatus: '',
        auditTime: '',
        confirmSign: '',
        dispatchId: '',
        signTime: '',
        testMethodConfirmSheetTerms: [],
        processData: []
      },
      loading: false
    };
  },
  watch: {
    visible(val) {
      this.dialogVisible = val;
      if (val && this.id) {
        this.getDetailData();
      }
    }
  },
  methods: {
    async getDetailData() {
      try {
        this.loading = true;
        const res = await getDetail({ id: this.id });
        console.log('res', res)
        if (res) {
          this.formData = res
          // 组装流程数据
          let processData = [];
          // 提交节点
          processData.push({
            type: "primary",
            mode: "list",
            fields: [
              { label: "提交人：", value: res.createBy || "" },
              { label: ' ', value: res.confirmSign || "", type: 'img' },
              { label: "提交时间：", value: res.createTime || "" },
            ],
          });
          if (res.auditStatus == 2) {
            processData.push({
              type: "primary",
              mode: "list",
              fields: [
                { label: "审核人：", value: res.auditPersonName || "" },
                { label: ' ', value: res.auditSign || "", type: 'img' },
                { label: "审核时间：", value: res.auditTime || "" },
              ],
            });
          } else if (res.auditStatus == 1) {
            processData.push({
              type: "warning",
              mode: "list",
              fields: [
                { label: "等待审核" },
              ],
            });
          }
          this.formData.processData = processData
        } else {
          this.$message.error(res.msg || '获取详情失败');
        }
      } catch (error) {
        console.error('获取详情失败:', error);
        this.$message.error('获取详情失败');
      } finally {
        this.loading = false;
      }
    },
    handleClose() {
      this.$emit("update:visible", false);
      this.dialogVisible = false;
      this.$emit("close", false);
      this.imgSrc = "";
      this.formData = {
        projectName: '',
        experimentCode: '',
        experimentName: '',
        auditPersonId: '',
        auditSign: '',
        auditStatus: '',
        auditTime: '',
        confirmSign: '',
        dispatchId: '',
        signTime: '',
        testMethodConfirmSheetTerms: [],
        processData: []
      };
    },
    openSignature() {
      this.signatureDialogVisible = true;
    },
    handleSignatureConfirm(imageData) {
      this.signatureDialogVisible = false;
      this.imgSrc = imageData;
      this.imgSrc = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
    },
    handleConfirm() {
      if (!this.imgSrc) {
        this.$message.warning("请先完成签名确认");
        return;
      }
      this.$emit("confirm", this.imgSrc);
      this.handleClose();
      // 组装签名数据
      const params = {
        testMethodConfirmSheetId: this.id, // 传递当前确认单id
        confirmSign: this.imgSrc, // 签名图片
      };
      sign(params).then(res => {
        if (res && res.code === 200) {
          this.$message.success('签字成功');
          this.handleClose();
        } else {
          this.$message.error(res.msg || '签字失败');
        }
      }).catch(() => {
        this.$message.error('签字失败');
      });
    },
  },
};
</script>

<style lang="less" scoped>

.approval-dialog {
  display: flex;
  min-height: 60vh;
  max-height: 80vh;
  overflow: hidden;
  

  @media screen and (max-width: 1024px) {
    flex-direction: column;
  }
@@ -176,7 +252,7 @@
    flex: 1;
    margin: 20px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 4px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow-y: auto;

@@ -190,11 +266,12 @@
  .approval-flow {
    width: 405px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 4px rgba(0,0,0,0.08);
    box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 40px 20px;
    margin: 20px;
    margin-left: 0;

    @media screen and (max-width: 1024px) {
      width: 100%;
      padding: 20px;
@@ -209,7 +286,7 @@

.basic-info {
  padding: 28px 20px;
  background: linear-gradient( 180deg, #05A0C1 0%, #05F2C2 100%);
  background: linear-gradient(180deg, #05A0C1 0%, #05F2C2 100%);
  border-radius: 10px 10px 0 0;
  color: #fff;

@@ -231,6 +308,7 @@
    .info-item {
      flex: 1;
      min-width: 250px;
      display: flex;

      @media screen and (max-width: 768px) {
        min-width: 100%;
@@ -238,8 +316,8 @@

      .label {
        font-size: 14px;
        white-space: normal;
        word-break: break-all;
        // white-space: normal;
        // word-break: break-all;
      }
    }
  }
@@ -250,6 +328,7 @@
  background: #ffffff;
  border-radius: 4px;
  overflow-x: auto;

  ::v-deep .el-table {
    width: 100%;
    min-width: 800px;
@@ -302,8 +381,10 @@
  height: calc(100% - 100px) !important;
  box-shadow: none !important;
}

::v-deep .el-dialog__body {
  padding: 0;

  @media screen and (max-width: 768px) {
    padding: 15px;
  }
@@ -322,4 +403,12 @@
    line-height: 1.5;
  }
}
</style> 

.signature-image {
  max-width: 200px;
  max-height: 100px;
  margin-top: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>

 laboratory/src/views/dataManagement/confirmation-sheet/index.vue

@@ -1,6 +1,7 @@
<template>
    <div class="list">
        <TableCustom :queryForm="form" :tableData="tableData" :total="total">
        <TableCustom :queryForm="form" :height="null" :tableData="tableData" :total="total"
            @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="140px" inline>
                    <el-form-item label="所属项目课题方案：">
@@ -14,11 +15,10 @@
                    </el-form-item>
                    <el-form-item label="通知时间：">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" 
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            @change="handleDateChange"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态：" v-if="!isDrafts">
                    <el-form-item label="状态：">
                        <el-select v-model="form.auditStatus" placeholder="请选择">
                            <el-option label="待确认" :value="1"></el-option>
                            <el-option label="已通过" :value="2"></el-option>
@@ -36,48 +36,86 @@
            <template #setting>
                <div class="tableTitle">
                    <div class="flex a-center" style="gap: 16px;">
                        <div class="title pointer" :class="{ active: !isDrafts }" @click="switchToDrafts(false)">检验方法确认单列表</div>
                        <div class="drafts pointer" :class="{ active: isDrafts }" @click="switchToDrafts(true)">草稿箱</div>
                        <div class="title pointer" :class="{ active: !isDrafts }" @click="switchToDrafts(false)">
                            检验方法确认单列表</div>
                        <div class="drafts pointer" :class="{ active: isDrafts }" @click="switchToDrafts(true)">草稿箱
                        </div>
                    </div>
                    <el-button @click="handleAddPlan" class="el-icon-plus" type="primary">
                        新增检测方法确认单</el-button>
                </div>
            </template>
            <template #table>
                <el-table-column prop="planCode" label="所属项目课题方案"></el-table-column>
                <el-table-column prop="planName" label="实验编号"></el-table-column>
                <el-table-column prop="planName" label="实验名称"></el-table-column>
                <el-table-column prop="stage" label="提交时间"></el-table-column>
                <el-table-column prop="creator" label="状态"></el-table-column>
                <el-table-column label="操作" width="150">
                <el-table-column prop="projectName" label="所属项目课题方案"></el-table-column>
                <el-table-column prop="experimentCode" label="实验编号"></el-table-column>
                <el-table-column prop="experimentName" label="实验名称"></el-table-column>
                <el-table-column prop="createTime" label="提交时间"></el-table-column>
                <el-table-column prop="createBy" label="提交人"></el-table-column>
                <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleReview(scope.row)">审核</el-button>
                        <el-button type="text" @click="handleRevoke(scope.row)">撤销</el-button>
                        <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                        <el-tag :type="getStatusType(scope.row.auditStatus)">
                            {{ getStatusText(scope.row.auditStatus) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <!-- 超级管理员(1)和审批人(2) -->
                        <template v-if="userRole == '1' || userRole == '2'">
                            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                        </template>

                        <!-- 工艺工程师(3) -->
                        <template v-if="userRole == '3'">
                            <el-button type="text" @click="handleReview(scope.row)"
                                v-if="scope.row.auditStatus == 1">审核</el-button>
                            <el-button type="text" @click="handleDetail(scope.row)"
                                v-if="scope.row.auditStatus == 2">详情</el-button>
                        </template>

                        <!-- 化验师(4) -->
                        <template v-if="userRole == '4'">
                            <el-button type="text" @click="handleRevoke(scope.row)"
                                v-if="scope.row.auditStatus == 1">撤销</el-button>
                            <el-button type="text" @click="handleDetail(scope.row)"
                                v-if="scope.row.auditStatus === 2 || scope.row.auditStatus === 3">详情</el-button>
                            <el-button type="text" @click="handleEdit(scope.row)"
                                v-if="scope.row.auditStatus === 3">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)"
                                v-if="scope.row.auditStatus === 3">删除</el-button>
                        </template>
                    </template>
                </el-table-column>
            </template>
        </TableCustom>
        <ShowDelConfirm :show="showRevoke" btnType="primary" @close="showRevoke = false" tip="撤销后，工艺工程师将无法收到此审批信息" okText="确定" title="确认要撤销这条确认单吗？"/>
        <review-dialog
            :visible.sync="reviewDialogVisible"
            :type="dialogType"
            :formData="currentRow"
            :sampleData="sampleData"
            @confirm="handleConfirmSubmit"
        />
        <ShowDelConfirm 
            :show="showRevoke" 
            btnType="primary" 
            v-on:close="showRevoke = false" 
            tip="撤销后，工艺工程师将无法收到此审批信息"
            okText="确定" 
            title="确认要撤销这条确认单吗？"  
            v-on:confirm="handleRevokeConfirm" />
        <ShowDelConfirm 
            :show="showDelete" 
            :title="deleteTitle" 
            :tip="deleteTip" 
            v-on:close="showDelete = false"
            v-on:confirm="handleDeleteConfirm" />
        <review-dialog :visible.sync="reviewDialogVisible" :type="dialogType" :id="currentRow.id"
             @close="handleClose" />
    </div>
</template>

<script>
import reviewDialog from './components/review-dialog.vue';
import { getList } from './service'
import ShowDelConfirm from "@/components/showDelConfirm/index.vue";
import { getList, deleteById, revokedSheet } from './service'
export default {
    name: "ConfirmationSheet",
    components: {
        reviewDialog
        reviewDialog,
        ShowDelConfirm
    },
    data() {
        return {
@@ -96,34 +134,43 @@
            showRevoke: false,
            tableData: [],
            total: 0,
            editorContent: '',
            reviewDialogVisible: false,
            dialogType: 'review',
            currentRow: {},
            sampleData: [],
            userRole: null,
            showDelete: false,
            deleteTitle: "",
            deleteTip: "",
            currentDeleteRow: null,
        };
    },
    mounted() {
        // 获取用户角色
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');
        this.userRole = userInfo.roleType;
        this.getTableData();
    },
    methods: {
        async getTableData() {
            try {
                const params = { ...this.form };
                if (this.isDrafts) {
                    params.auditStatus = -1;
                }
                const params = {
                    ...this.form,
                    pageNum: Number(this.form.pageNum),
                    pageSize: Number(this.form.pageSize),
                    auditStatus: this.isDrafts ? -1 : Number(this.form.auditStatus) || ''
                };
                const res = await getList(params);
                if (res.code === 200) {
                    this.tableData = res.data.list || [];
                    this.tableData = res.data.records || [];
                    this.total = res.data.total || 0;
                }
            } catch (error) {
                console.error('获取列表数据失败：', error);
                this.$message.error('获取列表数据失败');
            }
        },
        handleDateChange(val) {
            if (val) {
            if (val && val.length === 2) {
                this.form.startTime = val[0];
                this.form.endTime = val[1];
            } else {
@@ -149,25 +196,37 @@
            this.form.pageNum = 1;
            this.getTableData();
        },
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getTableData();
        },
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getTableData();
        },
        switchToDrafts(isDrafts) {
            this.isDrafts = isDrafts;
            this.resetForm();
        },
        getStatusType(status) {
            const statusMap = {
                pending: "warning",
                rejected: "danger",
                approved: "success",
                archived: "info",
                1: "warning",    // 待确认
                2: "success",    // 已通过
                3: "danger",     // 已驳回
                4: "info",       // 已撤回
                5: "info",       // 已封存
                '-1': "info"     // 草稿箱
            };
            return statusMap[status] || "info";
        },
        getStatusText(status) {
            const statusMap = {
                pending: "待审批",
                rejected: "已驳回",
                approved: "已通过",
                archived: "已封存",
                1: "待确认",
                2: "已通过",
                3: "已驳回",
                4: "已撤回",
                5: "已封存",
                '-1': "草稿箱"
            };
            return statusMap[status] || "未知";
        },
@@ -186,21 +245,52 @@
            this.showRevoke = true;
        },
        handleDetail(row) {
            // 实现查看详情逻辑
            console.log("查看详情：", row);
            this.currentRow = row;
            this.dialogType = 'view';
            this.reviewDialogVisible = true;
        },
        handleEdit(row) {
            // 实现编辑逻辑
            console.log("编辑：", row);
            this.$router.push({
                path: "/dataManagement/confirmation-sheet/edit",
                query: { id: row.id }
            });
        },
        handleDelete(row) {
            // 实现删除逻辑
            console.log("删除：", row);
            this.currentDeleteRow = row;
            this.deleteTitle = "确认要删除该确认单吗？";
            this.deleteTip = "删除后信息无法找回";
            this.showDelete = true;
        },
        handleConfirmSubmit(data) {
            // 处理确认提交后的逻辑
            console.log("确认提交：", data);
        handleDeleteConfirm() {
            if (!this.currentDeleteRow) return;

            deleteById({
                id: this.currentDeleteRow.id
            }).then(() => {
                this.$message.success("删除成功");
                this.showDelete = false;
                this.getTableData();
            }).catch(error => {
                this.$message.error("删除失败");
            });
        },
        handleClose() {
            this.reviewDialogVisible = false;
            this.getTableData();
        },
        async handleRevokeConfirm() {
            if (!this.currentRow) return;
            
            try {
                await revokedSheet({ id: this.currentRow.id });
                this.$message.success("撤销成功");
                this.showRevoke = false;
                this.getTableData();
            } catch (error) {
                console.error('撤销失败：', error);
                this.$message.error("撤销失败");
            }
        }
    },
};
</script>
@@ -224,7 +314,9 @@
    padding-bottom: 20px;
    justify-content: space-between;
    align-items: center;
    .title, .drafts {

    .title,
    .drafts {
        background: #ffffff;
        border-radius: 8px 8px 0px 0px;
        padding: 16px 29px;
@@ -244,9 +336,8 @@

    .drafts {
        padding: 16px 65px;
        &:not(.active) {
            
        }

        &:not(.active) {}
    }
}


 laboratory/src/views/dataManagement/confirmation-sheet/service.js

@@ -2,5 +2,37 @@

// 列表
export const getList = (data) => {
  return axios.post('/t-experiment-dispatch/api/t-experiment-dispatch/pageList', { ...data })
}
  return axios.post('/api/t-test-method-confirm-sheet/pageList', { ...data })
}
// 详情
export const getDetail = (data) => {
  return axios.get('/open/t-test-method-confirm-sheet/getDetailById', { params:data })
}
//添加
export const add = (data) => {
  return axios.post('/api/t-test-method-confirm-sheet/add', { ...data })
}
//修改
export const update = (data) => {
  return axios.post('/api/t-test-method-confirm-sheet/update', { ...data })
}
//删除
export const deleteById = (data) => {
  return axios.delete('/open/t-test-method-confirm-sheet/deleteById', { params:data })
}
//批量删除
export const deleteByIds = (data) => {
  return axios.delete('/open/t-test-method-confirm-sheet/deleteByIds', { params:data })
}
// 签名
export const sign = (data) => {
  return axios.post('/api/t-test-method-confirm-sheet/sign', { ...data })
}
// 获取实验调度列表
export const getDispatchList = (data) => {
  return axios.get('/open/t-experiment-dispatch/chemistSignList', { params:data })
}
// 撤销
export const revokedSheet = (data) => {
  return axios.get('/open/t-test-method-confirm-sheet/revokedSheet', { params:data })
}

 laboratory/src/views/dataManagement/dispatching/addDispatch.vue

@@ -64,134 +64,134 @@
          </el-form-item>
        </div>

        <div class="header-title" style="margin-bottom: 38px">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <span>二 、实验信息</span>
          </div>
      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>二 、实验信息</span>
        </div>
        <div style="padding-left: 25px">
          <el-form-item prop="experimentDate" label="试验日期">
            <el-date-picker
              name="data-test"
              v-model="form.experimentDate"
              type="date"
              placeholder="选择日期"
              @change="handleDateChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="experimentName" label="实验名称">
            <el-input v-model="form.experimentName" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="experimentCode" label="实验编号">
            <el-input v-model="form.experimentCode" placeholder="请输入" disabled/>
          </el-form-item>
        </div>
      </div>
      <div style="padding-left: 25px">
        <el-form-item prop="experimentDate" label="试验日期">
          <el-date-picker
            name="data-test"
            v-model="form.experimentDate"
            type="date"
            placeholder="选择日期"
            @change="handleDateChange"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="experimentName" label="实验名称">
          <el-input v-model="form.experimentName" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="experimentCode" label="实验编号">
          <el-input v-model="form.experimentCode" placeholder="请输入" disabled/>
        </el-form-item>
      </div>

        <div class="add-group">
          <span>实验分组</span>
          <el-button type="primary" class="el-icon-plus" @click="handleAddGroup">添加组别</el-button>
        </div>
        <Table
          :data="groupTableData"
          :total="0"
          :height="null"
          class="groupTable"
        >
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="groupName" label="组别"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEditGroup(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDeleteGroup(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </Table>
      <div class="add-group">
        <span>实验分组</span>
        <el-button type="primary" class="el-icon-plus" @click="handleAddGroup">添加组别</el-button>
      </div>
      <Table
        :data="groupTableData"
        :total="0"
        :height="null"
        class="groupTable"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="groupName" label="组别"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEditGroup(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDeleteGroup(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </Table>

        <div class="header-title" style="margin-bottom: 38px">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <span>三 、计划时间及人员</span>
          </div>
      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>三 、计划时间及人员</span>
        </div>
        <div style="padding-left: 25px">
          <el-form-item prop="experimentTime" label="试验时间">
            <el-date-picker
              style="width: 100%"
              v-model="form.experimentTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              @change="handleTimeRangeChange"
            ></el-date-picker>
          </el-form-item>
        </div>
        <div class="add-group">
          <div>*</div>
          <span>参加人员</span>
          <el-button type="primary" class="el-icon-plus" @click="addMember">选择参加人员</el-button>
        </div>
        <div class="member-list">
          <div v-for="item in [3,4,5]" :key="item" class="member-list-card">
            <div class="member-item">
              <div class="member-title">
                {{ ["工艺工程师",  "化验师","实验员"][item - 3] }}
              </div>
      </div>
      <div style="padding-left: 25px">
        <el-form-item prop="experimentTime" label="试验时间">
          <el-date-picker
            style="width: 100%"
            v-model="form.experimentTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            @change="handleTimeRangeChange"
          ></el-date-picker>
        </el-form-item>
      </div>
      <div class="add-group">
        <div>*</div>
        <span>参加人员</span>
        <el-button type="primary" class="el-icon-plus" @click="addMember">选择参加人员</el-button>
      </div>
      <div class="member-list">
        <div v-for="item in [3,4,5]" :key="item" class="member-list-card">
          <div class="member-item">
            <div class="member-title">
              {{ ["工艺工程师",  "化验师","实验员"][item - 3] }}
            </div>
            <div
              :class="item == 3 ? 'member-name-box' : 'flex1'"
            >
              <div
                :class="item == 3 ? 'member-name-box' : 'flex1'"
                :class="
                  item == 3
                    ? 'member-name-box'
                    : 'member-name-box-2'
                "
              >
                <div
                  :class="
                    item == 3
                      ? 'member-name-box'
                      : 'member-name-box-2'
                  "
                  v-for="i in memberList(item)"
                  :key="i.userId"
                  class="member-name"
                >
                  <div
                    v-for="i in memberList(item)"
                    :key="i.userId"
                    class="member-name"
                  >
                    {{ i.nickName }}
                  </div>
                  {{ i.nickName }}
                </div>
              </div>
              <div class="member-change">
                <div class="member-change-btn" @click="editUserList(item)" v-if="item == 4 || item == 5">修改</div>
              </div>
            </div>
            <div class="member-change">
              <div class="member-change-btn" @click="editUserList(item)" v-if="item == 4 || item == 5">修改</div>
            </div>
          </div>
        </div>
      </div>

        <div class="header-title" style="margin-bottom: 38px">
          <div class="header-title-left">
            <img src="@/assets/public/headercard.png" />
            <span>四 、任务分解</span>
          </div>
          <el-button type="primary" class="el-icon-plus" @click="handleAddTask">新增任务</el-button>
      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>四 、任务分解</span>
        </div>
        <el-button type="primary" class="el-icon-plus" @click="handleAddTask">新增任务</el-button>
      </div>

        <Table
          :data="taskTableData"
          :total="0"
          :height="null"
          class="rwuTable"
        >
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="taskName" label="任务名称"></el-table-column>
          <el-table-column prop="personCharge" label="负责人"></el-table-column>
          <el-table-column prop="startTime" label="开始时间"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEditTask(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDeleteTask(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </Table>
      <Table
        :data="taskTableData"
        :total="0"
        :height="null"
        class="rwuTable"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="taskName" label="任务名称"></el-table-column>
        <el-table-column prop="personCharge" label="负责人"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEditTask(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDeleteTask(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </Table>

        <div class="header-title">
          <div class="header-title-left">

 laboratory/src/views/dataManagement/dispatching/editDispatch.vue

@@ -469,14 +469,15 @@
    },
    handleClose() {
      this.$emit("close", false);
      this.$emit("update:data", {}); // 触发事件通知父组件更新data
      this.signatureDialogVisible = false;
      this.imgSrc = '';
    },
    handleApprove() {
      // 组装签名数据
      const params = {
        id: this.data.id, // 传递当前调度id
        signImg: this.imgSrc, // 签名图片
        dispatchId: this.data.id, // 传递当前调度id
        confirmSign: this.imgSrc, // 签名图片
      };
      sign(params).then(res => {
        if (res && res.code === 200) {

 laboratory/src/views/dataManagement/dispatching/list.vue

@@ -49,6 +49,7 @@
              实验与调度列表
            </div>
            <div
              v-if="userRole === '3'"
              class="drafts"
              :class="{ active: currentType === 'draft' }"
              @click="handleTypeChange('draft')"
@@ -56,9 +57,14 @@
              草稿箱
            </div>
          </div>
          <el-button @click="handleAddPlan" class="el-icon-plus" type="primary">
            新增实验调度</el-button
          <el-button 
            v-if="userRole === '3'"
            @click="handleAddPlan" 
            class="el-icon-plus" 
            type="primary"
          >
            新增实验调度
          </el-button>
        </div>
      </template>
      <template #table>
@@ -136,6 +142,7 @@
      :type="approvalDialogType"
      :data="currentApprovalData"
      @close="approvalDialogVisible = false"
      @update:data="handleUpdateData"
    />
    <ShowDelConfirm 
      :title="changeStatusTitle" 
@@ -262,9 +269,10 @@
        status: this.currentType === 'draft' ? '-1' : this.form.status
      };
      getDispatchList(params).then(res => {
        if (res) {
          this.tableData = res.records || [];
          this.total = res.total || 0;
        console.log('111111111111',res)
        if (res.code==200) {
          this.tableData = res.data.records || [];
          this.total = res.data.total || 0;
        }
      });
    },
@@ -291,6 +299,10 @@
        this.$message.error("删除失败");
      });
    },
    handleUpdateData() {
      this.currentApprovalData = null;
      this.getTableData();
    }
  },
};
</script>

 laboratory/src/views/dataManagement/dispatching/service.js

@@ -2,15 +2,15 @@

// 添加项目课题方案
export function addDispatch(data) {
  return axios.post('/t-experiment-dispatch/api/t-experiment-dispatch/add', { ...data })
  return axios.post('/api/t-experiment-dispatch/add', { ...data })
}
//修改方案
export function updateDispatch(data) {
  return axios.post('/t-experiment-dispatch/api/t-experiment-dispatch/update', { ...data })
  return axios.post('/api/t-experiment-dispatch/update', { ...data })
}
//查询方案列表
export function getDispatchList(data) {
  return axios.post('/t-experiment-dispatch/api/t-experiment-dispatch/pageList', { ...data })
  return axios.post('/api/t-experiment-dispatch/pageList', { ...data })
}
//上下架
// export function upAndDown(data) {
@@ -23,18 +23,18 @@

//删除
export function deleteById(data) {
  return axios.delete('/t-experiment-dispatch/open/t-experiment-dispatch/deleteById', { params:data })
  return axios.delete('/open/t-experiment-dispatch/deleteById', { params:data })
}

//批量删除
export function deleteByIds(data) {
  return axios.delete('/t-experiment-dispatch/open/t-experiment-dispatch/deleteByIds', { params:data })
  return axios.delete('/open/t-experiment-dispatch/deleteByIds', { params:data })
}
//根据id查询方案详情
export function getDetailById(data) {
  return axios.get('/t-experiment-dispatch/open/t-experiment-dispatch/getDetailById', {params:data })
  return axios.get('/open/t-experiment-dispatch/getDetailById', {params:data })
}
// 签名
export function sign(data) {
  return axios.post('/t-experiment-dispatch/api/t-experiment-dispatch/sign', { ...data })
  return axios.post('/api/t-experiment-dispatch/sign', { ...data })
}