feat

pyt

2025-04-28 35743f996ade9e2993fb15a274bf3dbb6a3df9d7

feat

 culture/src/layouts/components/HeaderNav.vue

@@ -52,11 +52,11 @@
    },
    // 获取用户信息
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    },
    // 退出登录
    outLogin() {
      localStorage.clear()
      sessionStorage.clear()
      this.$router.replace({ path: "/" });
    },
    // 关闭标签

 culture/src/router/index.js

@@ -38,6 +38,33 @@
        component: () => import("../views/login"),
    },
    {
        path: "/projectList",
        meta: {
            title: "项目组管理",
        },
        component: Layouts,
        children: [
            {
                path: "list",
                name: "ProjectList",
                meta: {
                    title: "项目组管理",
                },
                component: () => import("../views/projectList"),
            },
            {
                path: "addProject",
                name: "AddProject",
                meta: {
                    title: "新增项目组",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/projectList/addProject"),
            }
        ]
    },
    {
        path: "/system",
        meta: {
            title: "系统管理",
@@ -97,32 +124,99 @@
        ]
    },
    {
        path: "/projectList",
        meta: {
            title: "项目组管理",
        },
        path: "/strain",
        component: Layouts,
        meta: {
            title: "菌种库",
        },
        children: [
            {
                path: "list",
                name: "ProjectList",
                path: "/strain-library",
                component: Parent,
                meta: {
                    title: "项目组管理",
                   title: "菌种库管理",
                },
                component: () => import("../views/projectList"),
                children: [
                   {
                       path: "strain-library-manage",
                       name: "StrainLibraryManage",
                       meta: {
                           title: "原始细胞库",
                           keepAlive: true,
                       },
                       component: () => import("../views/strain-library/strain-library-manage"),
                   },
                   {
                       path: "strain-library-manage/add",
                       name: "StrainLibraryManageAdd",
                       meta: {
                           title: "新增原始细胞库",
                           keepAlive: true,
                           hide: true
                       },
                       component: () => import("../views/strain-library/strain-library-manage/add.vue"),
                   },
                   {
                       path: "strain-library-manage/record",
                       name: "StrainRecord",
                       meta: {
                           title: "出入库记录",
                           keepAlive: true,
                           hide: true
                       },
                       component: () => import("../views/strain-library/strain-library-manage/record.vue"),
                   },
                   {
                       path: "main-cell-library",
                       name: "MainCellLibrary",
                       meta: {
                           title: "主细胞库",
                           keepAlive: true,
                       },
                       component: () => import("../views/strain-library/main-cell-library"),
                   },
                   {
                       path: "main-cell-library/add",
                       name: "MainCellLibraryAdd",
                       meta: {
                           title: "新增主细胞",
                           keepAlive: true,
                           hide: true
                       },
                       component: () => import("../views/strain-library/main-cell-library/add.vue"),
                   },
                   {
                     path: "production-cell-library",
                     name: "ProductionCellLibrary",
                     meta: {
                        title: "生产细胞库",
                        keepAlive: true,
                     },
                     component: () => import("../views/strain-library/production-cell-library"),
                   },
                   {
                    path: "production-cell-library/add",
                    name: "ProductionCellLibraryAdd",
                    meta: {
                        title: "新增生产细胞",
                        keepAlive: true,
                        hide: true
                    },
                    component: () => import("../views/strain-library/production-cell-library/add.vue"),
                   }
                ]
           },
           {
            path: 'pedigree-vhart',
            name: 'PedigreeChart',
            meta: {
                title: "菌种传代生产谱系图",
            },
            {
                path: "addProject",
                name: "AddProject",
                meta: {
                    title: "新增项目组",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/projectList/addProject"),
            }
            component: () => import("../views/pedigree-chart"),
           }
        ]
    },
    
    {
        path: "/dataManagement",
        component: Layouts,
@@ -509,9 +603,9 @@

    // 登录验证
    // if (to.path === "/login") {
    //     localStorage.removeItem('userInfo')
    //     sessionStorage.removeItem('userInfo')
    //     next()
    // } else if (!localStorage.getItem('userInfo')) {
    // } else if (!sessionStorage.getItem('userInfo')) {
    //     next('/login')
    // } else {
    //     // 判断是否拥有要跳转菜单权限
@@ -522,7 +616,7 @@

    // 设置标签列表
    if (!to.meta.hide || !to.meta.oneself) {
        let tagList = JSON.parse(localStorage.getItem('tagList') || '[]')
        let tagList = JSON.parse(sessionStorage.getItem('tagList') || '[]')
        // 判断是否存在
        let isExist = tagList.some(item => item.path === to.path)
        if (!isExist) {
@@ -533,19 +627,19 @@
                meta: to.meta
            }
            tagList.push(tagInfo)
            localStorage.setItem('tagList', JSON.stringify(tagList))
            sessionStorage.setItem('tagList', JSON.stringify(tagList))
            store.commit('SET_TAGLIST', tagList)
        }
    }

    // 判断是否需要缓存
    if (to.meta.keepAlive) {
        let keepAliveList = JSON.parse(localStorage.getItem('keepAliveList') || '[]')
        let keepAliveList = JSON.parse(sessionStorage.getItem('keepAliveList') || '[]')
        // 判断是否已经缓存
        let isExist = keepAliveList.includes(to.name)
        if (!isExist) {
            keepAliveList.push(to.name)
            localStorage.setItem('keepAliveList', JSON.stringify(keepAliveList))
            sessionStorage.setItem('keepAliveList', JSON.stringify(keepAliveList))
            store.commit('SET_KEEPALIVELIST', keepAliveList)
        }
    }

 culture/src/store/index.js

@@ -4,9 +4,9 @@

const store = new Vuex.Store({
  state: {
    menus: localStorage.getItem('menuList') ? JSON.parse(localStorage.getItem('menuList')) : [],
    keepAliveList: localStorage.getItem('keepAliveList') ? JSON.parse(localStorage.getItem('keepAliveList')) : [],//缓存页面
    tagList: localStorage.getItem('tagList') ? JSON.parse(localStorage.getItem('tagList')) : [],//标签列表
    menus: sessionStorage.getItem('menuList') ? JSON.parse(sessionStorage.getItem('menuList')) : [],
    keepAliveList: sessionStorage.getItem('keepAliveList') ? JSON.parse(sessionStorage.getItem('keepAliveList')) : [],//缓存页面
    tagList: sessionStorage.getItem('tagList') ? JSON.parse(sessionStorage.getItem('tagList')) : [],//标签列表
    isFold: false,//是否折叠
    assay: [
      '检验方法正确',
@@ -39,11 +39,11 @@
    },
    SET_KEEPALIVELIST(state, data) {
      state.keepAliveList = data;
      localStorage.setItem('keepAliveList', JSON.stringify(data));
      sessionStorage.setItem('keepAliveList', JSON.stringify(data));
    },
    SET_TAGLIST(state, data) {
      state.tagList = data;
      localStorage.setItem('tagList', JSON.stringify(data));
      sessionStorage.setItem('tagList', JSON.stringify(data));
    },
    SET_ISFOLD(state, data) {
      state.isFold = data;

 culture/src/utils/request.js

@@ -15,7 +15,7 @@
// 请求拦截
service.interceptors.request.use(
  config => {
    config['headers']['Authorization'] = `${localStorage.getItem('token')}`
    config['headers']['Authorization'] = `${sessionStorage.getItem('token')}`
    if (config.method == 'get') {
      if (!config.params) config.params = {};
      config.params = {
@@ -54,7 +54,7 @@
          type: 'warning',
          duration: 2000
        })
        localStorage.clear();
        sessionStorage.clear();
        window.location.replace('/');
        return Promise.reject(res.data.data)
      }

 culture/src/views/pedigree-chart/index.vue

New file
@@ -0,0 +1,305 @@
<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.creator" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" @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
            >
            <el-button
              @click="handleBatchAdd"
              class="el-icon-plus"
              type="primary"
              >新增母代起传</el-button
            >
          </div>
        </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="stage" 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="approveTime" label="创建时间"></el-table-column>
        <el-table-column prop="approver" 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: "PedigreeChart",
  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: "",
      };
    },
    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/projectList/addProject.vue

@@ -5,7 +5,7 @@
                <el-form-item prop="name" label="项目组名称">
                    <el-input v-model="form.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item prop="description" label="项目组描述">
                <el-form-item prop="description" label="项目负责人">
                    <el-input v-model="form.description" placeholder="请输入" />
                </el-form-item>
            </el-form>
@@ -17,11 +17,11 @@
                <el-button class="el-icon-plus" type="primary" @click="addMember"> 添加项目组成员</el-button>
            </div>
            <div class="member-list">
                <div v-for="item in 4" :key="item" class="member-list-card">
                <div v-for="(item,index) in ['审批人', '菌种工程师', '菌种实验员']" :key="item" class="member-list-card">
                    <div class="member-item">
                        <div class="member-title">{{ ['审批人', '工艺工程师', '实验员', '化验师'][item - 1] }}</div>
                        <div :class="item == 1 || item == 2 ? 'member-name-box' : 'member-name-box-2'">
                            <div v-for="i in memberList(item)" :key="i" class="member-name">张三</div>
                        <div class="member-title">{{ item }}</div>
                        <div :class="index == 0 || index == 1 ? 'member-name-box' : 'member-name-box-2'">
                            <div v-for="i in memberList(index+1)" :key="i" class="member-name">张三</div>
                        </div>
                        <div class="member-edit">修改</div>
                    </div>

 culture/src/views/projectList/index.vue

@@ -23,11 +23,11 @@
            </template>
            <template #setting>
                <el-button @click="handleAddProject" class="el-icon-plus" type="primary">
                    新增项目组</el-button>
                    新增菌种库项目组</el-button>
            </template>
            <template #table>
                <el-table-column prop="name" label="项目组名称" />
                <el-table-column prop="age" label="项目负责人" />
                <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="age" label="状态">

 culture/src/views/strain-library/main-cell-library/add.vue

New file
@@ -0,0 +1,190 @@
<template>
  <Card>
      <el-form 
          :model="form" 
          :rules="rules" 
          ref="strainForm" 
          label-position="top"
          class="strain-form"
      >
          <div class="form-grid">
              <el-form-item label="菌种编号" prop="strainNo" required>
                  <el-input v-model="form.strainNo" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="菌种名称" prop="strainName" required>
                  <el-input v-model="form.strainName" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="菌种来源" prop="source" required>
                  <el-input v-model="form.source" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="鉴定方法" prop="identificationMethod" required>
                  <el-input v-model="form.identificationMethod" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="特征描述" prop="characteristics" required>
                  <el-input v-model="form.characteristics" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="菌种保存方法" prop="preservationMethod" required>
                  <el-input v-model="form.preservationMethod" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="保存位置" prop="storageLocation" required>
                  <el-input v-model="form.storageLocation" placeholder="请输入"></el-input>
              </el-form-item>
          </div>

          <div class="form-row">
              <el-form-item label="备注" prop="remarks" class="full-width">
                  <el-input 
                      type="textarea" 
                      v-model="form.remarks" 
                      :rows="4"
                      placeholder="请输入"
                  ></el-input>
              </el-form-item>
          </div>
          <div class="end-btn" style="margin-top: 38px">
              <el-button type="primary" @click="handleSubmit">提交</el-button>
              <el-button @click="handleDraft">存草稿</el-button>
          </div>
      </el-form>

      <!-- 签字确认组件 -->
      <SignatureCanvas
          :visible.sync="signatureVisible"
          @confirm="handleSignatureConfirm"
      />
  </Card>
</template>

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

export default {
  name: 'AddMainCell',
  components: {
      SignatureCanvas
  },
  data() {
      return {
          signatureVisible: false,
          form: {
              strainNo: '',
              strainName: '',
              source: '',
              identificationMethod: '',
              characteristics: '',
              storageLocation: '',
              preservationMethod: '',
              remarks: ''
          },
          rules: {
              strainNo: [{ required: true, message: '请输入菌种编号', trigger: 'blur' }],
              strainName: [{ required: true, message: '请输入菌种名称', trigger: 'blur' }],
              source: [{ required: true, message: '请输入菌种来源', trigger: 'blur' }],
              identificationMethod: [{ required: true, message: '请输入鉴定方法', trigger: 'blur' }],
              characteristics: [{ required: true, message: '请输入特征描述', trigger: 'blur' }],
              storageLocation: [{ required: true, message: '请输入保存位置', trigger: 'blur' }],
              preservationMethod: [{ required: true, message: '请输入菌种保存方法', trigger: 'blur' }]
          }
      }
  },
  methods: {
      handleSubmit() {
          this.$refs.strainForm.validate((valid) => {
              if (valid) {
                  this.signatureVisible = true
              }
          })
      },
      handleDraft() {
          // 实现存草稿逻辑
          console.log('save draft', this.form)
          this.$message.success('草稿保存成功')
      },
      handleSignatureConfirm(signatureImage) {
          this.signatureVisible = false
          // 处理提交逻辑
          console.log('submit form with signature:', this.form, signatureImage)
          this.$message.success('提交成功')
          this.$router.back()
      }
  }
}
</script>

<style scoped lang="less">
.strain-form {
  padding: 0 40px;

  .form-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 24px;
      
      @media screen and (max-width: 1200px) {
          grid-template-columns: repeat(2, 1fr);
      }
      
      @media screen and (max-width: 768px) {
          grid-template-columns: 1fr;
      }
  }

  .form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 24px;

      .el-form-item {
          margin-bottom: 0;

          &.full-width {
              width: 100%;
          }
      }
  }

  :deep(.el-form-item__label) {
      font-weight: normal;
      color: #606266;
      padding-bottom: 8px;
      line-height: 20px;
  }

  :deep(.el-form-item__content) {
      line-height: unset;
  }

  :deep(.el-input__inner) {
      border-radius: 4px;
      height: 36px;
      line-height: 36px;
  }

  :deep(.el-textarea__inner) {
      border-radius: 4px;
      padding: 8px 12px;
      min-height: 120px;
  }
}

.end-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  :deep(.el-button) {
      width: 180px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      border-radius: 4px;
      margin: 0;
  }
}
</style>

 culture/src/views/strain-library/main-cell-library/index.vue

New file
@@ -0,0 +1,474 @@
<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、菌种全部集中登记在【菌种源保藏出/入主细胞库登记表】，请分类管理。</p>
                <p>1.1 接种入主细胞库（现代-M）的菌株经过培养和保藏。</p>
                <p>1.2 从原始细胞库转入的菌株需要按照标准程序进行记录和管理。</p>
                <p>1.3 主细胞库的菌株可用于科研项目和工业生产中的应用研究。</p>
            </div>

            <!-- 查看全部弹窗 -->
            <el-dialog
                title="菌种源保藏出/入主细胞库登记表说明"
                :visible.sync="dialogVisible"
                width="50%"
                class="view-all-dialog"
            >
                <div class="dialog-content">
                    <p>1、菌种全部集中登记在【菌种源保藏出/入主细胞库登记表】，请分类管理。</p>
                    <p>1.1 接种入主细胞库（现代-M）的菌株经过培养和保藏。</p>
                    <p>1.2 从原始细胞库转入的菌株需要按照标准程序进行记录和管理。</p>
                    <p>1.3 主细胞库的菌株可用于科研项目和工业生产中的应用研究。</p>
                    <p>1.4 菌株转出时需要严格记录去向和用途，确保可追溯性。</p>
                    <p>1.5 主细胞库的菌株保存应当遵循标准操作规程，确保活性和稳定性。</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>
        <StrainDetail
            :visible.sync="detailVisible"
            :detail="currentDetail"
        />
    </div>
</template>

<script>
import StrainDetail from '../strain-library-manage/components/StrainDetail.vue'

export default {
    name: 'MainCellLibrary',
    components: {
        StrainDetail
    },
    data() {
        return {
            dialogVisible: false,
            currentType: 'list',
            detailVisible: false,
            currentDetail: {},
            form: {
                strainNo: '',
                strainName: '',
                status: ''
            },
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            total: 800,
            tableData: [
                {
                    strainNo: 'M-2024001',
                    strainName: '大肠杆菌BL21',
                    source: '原始细胞库',
                    method: '分子生物学鉴定',
                    certificate: '常用表达宿主菌，含有DE3溶源体，适合蛋白表达',
                    storage: '甘油冷冻',
                    amount: 'M区-01-001',
                    inventory: '100',
                    notes: '高效表达宿主',
                    status: '1'
                },
                {
                    strainNo: 'M-2024002',
                    strainName: '乳酸菌L.plantarum',
                    source: '菌种保藏中心',
                    method: '16S rDNA测序',
                    certificate: '革兰氏阳性杆菌，产乳酸，益生特性',
                    storage: '冷冻保存',
                    amount: 'M区-02-005',
                    inventory: '80',
                    notes: '发酵剂开发',
                    status: '1'
                },
                {
                    strainNo: 'M-2024003',
                    strainName: '酵母S.cerevisiae',
                    source: '原始细胞库',
                    method: '生理生化鉴定',
                    certificate: '椭圆形单细胞真菌，高效发酵能力',
                    storage: '斜面培养',
                    amount: 'M区-03-002',
                    inventory: '60',
                    notes: '酒精发酵',
                    status: '2'
                },
                {
                    strainNo: 'M-2024004',
                    strainName: '枯草芽孢杆菌',
                    source: '环境样本分离',
                    method: '形态学观察和生化鉴定',
                    certificate: '革兰氏阳性芽孢杆菌，可产多种酶类',
                    storage: '冻干保存',
                    amount: 'M区-01-003',
                    inventory: '90',
                    notes: '工业酶生产',
                    status: '3'
                },
                {
                    strainNo: 'M-2024005',
                    strainName: '链霉菌S.griseus',
                    source: '原始细胞库',
                    method: 'PCR鉴定',
                    certificate: '丝状菌，产生灰色气生菌丝和分生孢子',
                    storage: '液氮保存',
                    amount: 'M区-04-001',
                    inventory: '70',
                    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/main-cell-library/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;
}

.a-center {
    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/main-cell-library/record.vue

New file
@@ -0,0 +1,352 @@
<template>
  <div class="record-page">
    <div class="page-header">
      <div class="header-left">
        <el-page-header @back="goBack" content="主细胞出入库记录"></el-page-header>
      </div>
      <div class="header-right">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddRecord">新增记录</el-button>
      </div>
    </div>
    
    <el-card class="record-card">
      <div class="strain-info">
        <div class="info-row">
          <div class="info-item">
            <span class="label">菌种编号：</span>
            <span class="value">{{ strainInfo.strainNo }}</span>
          </div>
          <div class="info-item">
            <span class="label">菌种名称：</span>
            <span class="value">{{ strainInfo.strainName }}</span>
          </div>
          <div class="info-item">
            <span class="label">菌种来源：</span>
            <span class="value">{{ strainInfo.source }}</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">鉴定方法：</span>
            <span class="value">{{ strainInfo.method }}</span>
          </div>
          <div class="info-item full">
            <span class="label">特征描述：</span>
            <span class="value">{{ strainInfo.certificate }}</span>
          </div>
        </div>
        <div class="info-row">
          <div class="info-item">
            <span class="label">菌种保存方法：</span>
            <span class="value">{{ strainInfo.storage }}</span>
          </div>
          <div class="info-item">
            <span class="label">保存位置：</span>
            <span class="value">{{ strainInfo.amount }}</span>
          </div>
          <div class="info-item">
            <span class="label">出入库状态：</span>
            <span class="value status">{{ strainInfo.statusText }}</span>
          </div>
        </div>
      </div>
      
      <div class="record-timeline-container">
        <h3 class="section-title">出入库记录</h3>
        <RecordTimeline :list="recordList" />
      </div>
    </el-card>
    
    <!-- 新增记录弹窗 -->
    <el-dialog
      title="新增出入库记录"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <el-form ref="recordForm" :model="recordForm" :rules="recordRules" label-width="100px">
        <el-form-item label="操作类型" prop="type">
          <el-radio-group v-model="recordForm.type">
            <el-radio label="入库">入库</el-radio>
            <el-radio label="出库">出库</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="操作人" prop="operator">
          <el-input v-model="recordForm.operator" placeholder="请输入操作人"></el-input>
        </el-form-item>
        
        <el-form-item label="操作时间" prop="operateTime">
          <el-date-picker
            v-model="recordForm.operateTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item label="保藏人" prop="reviewer">
          <el-input v-model="recordForm.reviewer" placeholder="请输入保藏人"></el-input>
        </el-form-item>
        
        <el-form-item label="操作数量" prop="amount">
          <el-input-number v-model="recordForm.amount" :min="1" :max="100"></el-input-number>
        </el-form-item>
        
        <el-form-item label="备注" prop="remarks">
          <el-input
            type="textarea"
            v-model="recordForm.remarks"
            :rows="3"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRecord">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import RecordTimeline from '../strain-library-manage/components/RecordTimeline.vue'

export default {
  name: 'MainCellRecord',
  components: {
    RecordTimeline
  },
  data() {
    return {
      strainId: '',
      strainInfo: {
        strainNo: 'M-2024001',
        strainName: '大肠杆菌BL21',
        source: '原始细胞库',
        method: '分子生物学鉴定',
        certificate: '常用表达宿主菌，含有DE3溶源体，适合蛋白表达',
        storage: '甘油冷冻',
        amount: 'M区-01-001',
        inventory: '100',
        status: '1',
        statusText: '已入库'
      },
      recordList: [
        {
          type: '入库',
          operator: '张三',
          operateTime: '2024-05-01 10:30:00',
          reviewer: '李四',
          confirmTime: '2024-05-01 14:20:00'
        },
        {
          type: '出库',
          operator: '王五',
          operateTime: '2024-05-15 09:45:00',
          reviewer: '赵六',
          confirmTime: '2024-05-15 11:30:00'
        },
        {
          type: '入库',
          operator: '钱七',
          operateTime: '2024-05-20 14:00:00',
          reviewer: '孙八',
          confirmTime: '2024-05-20 16:15:00'
        }
      ],
      dialogVisible: false,
      recordForm: {
        type: '入库',
        operator: '',
        operateTime: '',
        reviewer: '',
        amount: 1,
        remarks: ''
      },
      recordRules: {
        type: [
          { required: true, message: '请选择操作类型', trigger: 'change' }
        ],
        operator: [
          { required: true, message: '请输入操作人', trigger: 'blur' }
        ],
        operateTime: [
          { required: true, message: '请选择操作时间', trigger: 'change' }
        ],
        reviewer: [
          { required: true, message: '请输入保藏人', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入操作数量', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 获取路由参数中的菌种ID
    this.strainId = this.$route.query.id
    // 实际项目中这里应该根据ID加载菌种信息和记录列表
    console.log('加载菌种ID:', this.strainId)
  },
  methods: {
    goBack() {
      this.$router.push('/strain-library/main-cell-library')
    },
    handleAddRecord() {
      this.dialogVisible = true
      this.resetRecordForm()
    },
    submitRecord() {
      this.$refs.recordForm.validate(valid => {
        if (valid) {
          // 表单验证通过，提交数据
          console.log('提交的记录数据:', this.recordForm)
          
          // 模拟添加记录到列表
          const newRecord = {
            type: this.recordForm.type,
            operator: this.recordForm.operator,
            operateTime: this.recordForm.operateTime,
            reviewer: this.recordForm.reviewer,
            confirmTime: new Date().toLocaleString()
          }
          
          // 添加到记录列表的开头
          this.recordList.unshift(newRecord)
          
          // 关闭弹窗
          this.dialogVisible = false
          
          // 显示成功消息
          this.$message.success('记录添加成功')
        } else {
          this.$message.error('请正确填写表单')
          return false
        }
      })
    },
    resetRecordForm() {
      this.recordForm = {
        type: '入库',
        operator: '',
        operateTime: '',
        reviewer: '',
        amount: 1,
        remarks: ''
      }
    }
  }
}
</script>

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

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  .header-left {
    :deep(.el-page-header__content) {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }
}

.record-card {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 20px;
}

.strain-info {
  padding: 10px 0;
  
  .info-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .info-item {
    flex: 1;
    min-width: 200px;
    margin-right: 20px;
    
    &:last-child {
      margin-right: 0;
    }
    
    &.full {
      flex: 2;
    }
    
    .label {
      color: #606266;
      margin-right: 8px;
    }
    
    .value {
      color: #333;
      font-weight: 500;
      
      &.status {
        color: #67C23A;
      }
    }
  }
}

.record-timeline-container {
  margin-top: 30px;
  
  .section-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 500;
  }
}

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

@media screen and (max-width: 768px) {
  .strain-info {
    .info-row {
      flex-direction: column;
      
      .info-item {
        margin-right: 0;
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    
    .header-right {
      margin-top: 16px;
    }
  }
}
</style> 

 culture/src/views/strain-library/production-cell-library/add.vue

New file
@@ -0,0 +1,191 @@
<template>
    <Card>
        <el-form 
            :model="form" 
            :rules="rules" 
            ref="strainForm" 
            label-position="top"
            class="strain-form"
        >
            <div class="form-grid">
                <el-form-item label="菌种编号" prop="strainNo" required>
                    <el-input v-model="form.strainNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="菌种名称" prop="strainName" required>
                    <el-input v-model="form.strainName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="菌种来源" prop="source" required>
                    <el-input v-model="form.source" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="鉴定方法" prop="identificationMethod" required>
                    <el-input v-model="form.identificationMethod" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="特征描述" prop="characteristics" required>
                    <el-input v-model="form.characteristics" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="菌种保存方法" prop="preservationMethod" required>
                    <el-input v-model="form.preservationMethod" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="保存位置" prop="storageLocation" required>
                    <el-input v-model="form.storageLocation" placeholder="请输入"></el-input>
                </el-form-item>
            </div>

            <div class="form-row">
                <el-form-item label="备注" prop="remarks" class="full-width">
                    <el-input 
                        type="textarea" 
                        v-model="form.remarks" 
                        :rows="4"
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </div>

            <div class="end-btn" style="margin-top: 38px">
                <el-button type="primary" @click="handleSubmit">提交</el-button>
                <el-button @click="handleDraft">存草稿</el-button>
            </div>
        </el-form>

        <!-- 签字确认组件 -->
        <SignatureCanvas
            :visible.sync="signatureVisible"
            @confirm="handleSignatureConfirm"
        />
    </Card>
</template>

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

export default {
    name: 'AddProductionCell',
    components: {
        SignatureCanvas
    },
    data() {
        return {
            signatureVisible: false,
            form: {
                strainNo: '',
                strainName: '',
                source: '',
                identificationMethod: '',
                characteristics: '',
                storageLocation: '',
                preservationMethod: '',
                remarks: ''
            },
            rules: {
                strainNo: [{ required: true, message: '请输入菌种编号', trigger: 'blur' }],
                strainName: [{ required: true, message: '请输入菌种名称', trigger: 'blur' }],
                source: [{ required: true, message: '请输入菌种来源', trigger: 'blur' }],
                identificationMethod: [{ required: true, message: '请输入鉴定方法', trigger: 'blur' }],
                characteristics: [{ required: true, message: '请输入特征描述', trigger: 'blur' }],
                storageLocation: [{ required: true, message: '请输入保存位置', trigger: 'blur' }],
                preservationMethod: [{ required: true, message: '请输入菌种保存方法', trigger: 'blur' }]
            }
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.strainForm.validate((valid) => {
                if (valid) {
                    this.signatureVisible = true
                }
            })
        },
        handleDraft() {
            // 实现存草稿逻辑
            console.log('save draft', this.form)
            this.$message.success('草稿保存成功')
        },
        handleSignatureConfirm(signatureImage) {
            this.signatureVisible = false
            // 处理提交逻辑
            console.log('submit form with signature:', this.form, signatureImage)
            this.$message.success('提交成功')
            this.$router.back()
        }
    }
}
</script>

<style scoped lang="less">
.strain-form {
    padding: 0 40px;

    .form-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 24px;
        
        @media screen and (max-width: 1200px) {
            grid-template-columns: repeat(2, 1fr);
        }
        
        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }

    .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 24px;

        .el-form-item {
            margin-bottom: 0;

            &.full-width {
                width: 100%;
            }
        }
    }

    :deep(.el-form-item__label) {
        font-weight: normal;
        color: #606266;
        padding-bottom: 8px;
        line-height: 20px;
    }

    :deep(.el-form-item__content) {
        line-height: unset;
    }

    :deep(.el-input__inner) {
        border-radius: 4px;
        height: 36px;
        line-height: 36px;
    }

    :deep(.el-textarea__inner) {
        border-radius: 4px;
        padding: 8px 12px;
        min-height: 120px;
    }
}

.end-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    :deep(.el-button) {
        width: 180px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border-radius: 4px;
        margin: 0;
    }
}
</style>

 culture/src/views/strain-library/production-cell-library/index.vue

New file
@@ -0,0 +1,452 @@
<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 
                v-for="item in statusOptions" 
                :key="item.value" 
                :label="item.label" 
                :value="item.value">
              </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="handleAdd" class="el-icon-plus" type="primary" style="margin-right: 12px;">新增生产细胞</el-button>
            <el-button @click="handleAdd" class="el-icon-plus" type="primary" style="margin-right: 12px;">批量新增</el-button>
          </div>
        </div>
      </template>

      <template #table>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="strainNo" label="菌种编号" width="150" />
        <el-table-column prop="strainName" label="菌种名称" width="180" />
        <el-table-column prop="source" label="菌种来源" width="150" />
        <el-table-column prop="preservationMethod" label="鉴定方法" width="120" />
        <el-table-column prop="storageLocation" label="特征描述" width="150" />
        <el-table-column prop="inventory" label="菌种保存方法" width="100" />
        <el-table-column prop="inventory" label="保存位置" width="100" />
        <el-table-column prop="inventory" label="库存余量" width="100" />
        <el-table-column prop="inventory" label="备注"  />
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleView(scope.row)">详情</el-button>
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)" class="delete-btn">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCustom>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="确认删除"
      :visible.sync="deleteDialogVisible"
      width="30%">
      <div class="delete-dialog-content">
        <i class="el-icon-warning-outline warning-icon"></i>
        <span>确定要删除该菌种记录吗？删除后将无法恢复。</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProductionCellLibrary',
  data() {
    return {
      dialogVisible: false,
      currentType: 'list',
      form: {
        strainNo: '',
        strainName: '',
        status: ''
      },
      queryForm: {
        pageSize: 10,
        pageNum: 1
      },
      total: 100,
      loading: false,
      sourceOptions: [
        { value: '主细胞库', label: '主细胞库' },
        { value: '工作细胞库', label: '工作细胞库' },
        { value: '外部来源', label: '外部来源' }
      ],
      statusOptions: [
        { value: '正常', label: '正常' },
        { value: '缺货', label: '缺货' },
        { value: '异常', label: '异常' },
        { value: '已停用', label: '已停用' }
      ],
      tableData: [],
      selectedRows: [],
      deleteDialogVisible: false,
      deleteRow: null
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleViewMore() {
      this.dialogVisible = true;
    },
    resetForm() {
      this.form = {
        strainNo: '',
        strainName: '',
        status: ''
      }
      this.searchData()
    },
    searchData() {
      this.queryForm.pageNum = 1;
      this.fetchData();
    },
    // 获取数据
    fetchData() {
      this.loading = true;
      
      // 构建请求参数
      const params = {
        page: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        ...this.form
      };
      
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据，实际项目中应替换为真实API调用
        const mockData = [];
        for (let i = 1; i <= 10; i++) {
          mockData.push({
            id: `${i}`,
            strainNo: `PCLS-2023-${String(i).padStart(3, '0')}`,
            strainName: `枯草芽孢杆菌生产株${i}`,
            source: i % 3 === 0 ? '外部来源' : (i % 2 === 0 ? '工作细胞库' : '主细胞库'),
            preservationMethod: i % 2 === 0 ? '冻干保存' : '超低温冷冻保存',
            storageLocation: `A区-A-${100 + i}-冷藏柜`,
            inventory: 10 + i,
            status: i % 4 === 0 ? '异常' : (i % 3 === 0 ? '缺货' : (i % 2 === 0 ? '已停用' : '正常')),
            preparationDate: `2023-05-${String(i).padStart(2, '0')}`,
            expiryDate: `2024-05-${String(i).padStart(2, '0')}`
          });
        }
        
        this.tableData = mockData;
        this.total = 100; // 模拟总数
        this.loading = false;
      }, 500);
    },
    
    // 状态标签类型
    getStatusType(status) {
      switch(status) {
        case '正常':
          return 'success';
        case '缺货':
          return 'warning';
        case '异常':
          return 'danger';
        case '已停用':
          return 'info';
        default:
          return 'info';
      }
    },
    
    handleCurrentChange(page) {
      this.queryForm.pageNum = page
      this.fetchData();
    },
    handleSizeChange(size) {
      this.queryForm.pageSize = size
      this.queryForm.pageNum = 1
      this.fetchData();
    },
    handleTypeChange(type) {
      this.currentType = type;
      this.fetchData();
    },
    
    // 表格多选
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    
    // 新增菌种
    handleAdd() {
      this.$router.push('/strain-library/production-cell-library/add');
    },
    
    // 查看菌种详情
    handleView(row) {
      this.$router.push(`/strain-library/production-cell-library/record/${row.id}`);
    },
    
    // 编辑菌种
    handleEdit(row) {
      this.$router.push(`/strain-library/production-cell-library/edit/${row.id}`);
    },
    
    // 删除菌种
    handleDelete(row) {
      this.deleteRow = row;
      this.deleteDialogVisible = true;
    },
    
    // 确认删除
    confirmDelete() {
      if (!this.deleteRow) return;
      
      // 模拟API请求
      this.$message({
        type: 'success',
        message: `删除成功: ${this.deleteRow.strainNo} - ${this.deleteRow.strainName}`
      });
      
      // 移除本地数据
      const index = this.tableData.findIndex(item => item.id === this.deleteRow.id);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
      
      this.deleteDialogVisible = false;
      this.deleteRow = null;
    },
    
    // 导出
    handleExport() {
      this.$message.info('生产细胞库菌种导出功能开发中');
      // 实际项目中应实现导出逻辑
    }
  }
}
</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-btn-box {
  margin-left: auto;
}

.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;
    
  }
}

.delete-dialog-content {
  display: flex;
  align-items: center;
  padding: 20px 0;
  
  .warning-icon {
    font-size: 24px;
    color: #E6A23C;
    margin-right: 10px;
  }
}

.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;
        }
      }
    }
  }
}

.delete-btn {
  color: #F56C6C;
}
</style>

 culture/src/views/strain-library/production-cell-library/record.vue

New file
@@ -0,0 +1,538 @@
<template>
  <div class="production-cell-record">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
        <h2>生产细胞库菌种详情</h2>
      </div>
      <div class="header-actions">
        <el-button type="primary" plain icon="el-icon-edit" @click="handleEdit">编辑</el-button>
        <el-button type="primary" plain icon="el-icon-printer" @click="handlePrint">打印</el-button>
      </div>
    </div>

    <!-- 菌种信息卡片 -->
    <el-card class="strain-card" v-loading="loading">
      <div slot="header" class="card-header">
        <span class="card-title">菌种信息</span>
        <div class="status-tag">
          <el-tag :type="getStatusType(strainData.status)">{{ strainData.status }}</el-tag>
        </div>
      </div>
      
      <div class="strain-info">
        <div class="info-item">
          <span class="label">菌种编号：</span>
          <span class="value">{{ strainData.strainNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">菌种名称：</span>
          <span class="value">{{ strainData.strainName }}</span>
        </div>
        <div class="info-item">
          <span class="label">菌种来源：</span>
          <span class="value">{{ strainData.source }}</span>
        </div>
        <div class="info-item">
          <span class="label">生产批次：</span>
          <span class="value">{{ strainData.batchNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">保存方法：</span>
          <span class="value">{{ strainData.preservationMethod }}</span>
        </div>
        <div class="info-item">
          <span class="label">保存位置：</span>
          <span class="value">{{ strainData.storageLocation }}</span>
        </div>
        <div class="info-item">
          <span class="label">当前库存：</span>
          <span class="value">{{ strainData.inventory }} 份</span>
        </div>
        <div class="info-item">
          <span class="label">状态：</span>
          <span class="value">{{ strainData.status }}</span>
        </div>
        <div class="info-item">
          <span class="label">更新时间：</span>
          <span class="value">{{ strainData.updateTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">制备日期：</span>
          <span class="value">{{ strainData.preparationDate }}</span>
        </div>
        <div class="info-item">
          <span class="label">有效期至：</span>
          <span class="value">{{ strainData.expiryDate }}</span>
        </div>
        <div class="info-item full-width">
          <span class="label">特征描述：</span>
          <div class="value description">{{ strainData.description }}</div>
        </div>
        
        <div class="info-item full-width" v-if="strainData.certificateUrl">
          <span class="label">质量证书：</span>
          <div class="value">
            <el-button type="text" @click="handleViewCertificate">查看证书</el-button>
            <el-button type="text" @click="handleDownloadCertificate">下载证书</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 使用记录 -->
    <el-card class="record-card" v-loading="loadingRecords">
      <div slot="header" class="card-header">
        <span class="card-title">使用记录</span>
        <el-button type="text" @click="handleAddUsage">新增使用记录</el-button>
      </div>
      
      <el-table
        :data="usageRecords"
        style="width: 100%"
        :empty-text="usageRecords.length ? '' : '暂无使用记录'"
      >
        <el-table-column prop="date" label="使用日期" width="120"></el-table-column>
        <el-table-column prop="amount" label="使用数量" width="100"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="120"></el-table-column>
        <el-table-column prop="project" label="项目名称"></el-table-column>
        <el-table-column prop="batchNo" label="生产批次" width="150"></el-table-column>
        <el-table-column prop="purpose" label="使用目的"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleViewUsageDetail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleEditUsage(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container" v-if="usageRecords.length">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="usageTotalCount"
          :current-page.sync="usageCurrentPage"
          :page-size="usagePageSize"
          @current-change="handleUsagePageChange">
        </el-pagination>
      </div>
    </el-card>

    <!-- 测试记录 -->
    <el-card class="record-card" v-loading="loadingTests">
      <div slot="header" class="card-header">
        <span class="card-title">测试记录</span>
        <el-button type="text" @click="handleAddTest">新增测试记录</el-button>
      </div>
      
      <el-table
        :data="testRecords"
        style="width: 100%"
        :empty-text="testRecords.length ? '' : '暂无测试记录'"
      >
        <el-table-column prop="date" label="测试日期" width="120"></el-table-column>
        <el-table-column prop="type" label="测试类型" width="150"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="120"></el-table-column>
        <el-table-column prop="result" label="测试结果">
          <template slot-scope="scope">
            <el-tag :type="scope.row.result === '合格' ? 'success' : scope.row.result === '不合格' ? 'danger' : 'info'">
              {{ scope.row.result }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleViewTestDetail(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleEditTest(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container" v-if="testRecords.length">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="testTotalCount"
          :current-page.sync="testCurrentPage"
          :page-size="testPageSize"
          @current-change="handleTestPageChange">
        </el-pagination>
      </div>
    </el-card>

    <!-- 证书预览对话框 -->
    <el-dialog
      title="证书预览"
      :visible.sync="certificateDialogVisible"
      width="70%">
      <div v-if="strainData.certificateUrl" class="certificate-preview">
        <iframe v-if="strainData.certificateUrl.endsWith('.pdf')" :src="strainData.certificateUrl" width="100%" height="500"></iframe>
        <img v-else :src="strainData.certificateUrl" style="max-width: 100%; max-height: 500px;" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProductionCellLibraryRecord',
  data() {
    return {
      loading: false,
      loadingRecords: false,
      loadingTests: false,
      strainId: '',
      strainData: {
        id: '',
        strainNo: '',
        strainName: '',
        source: '',
        batchNo: '',
        preservationMethod: '',
        storageLocation: '',
        inventory: 0,
        status: '',
        description: '',
        preparationDate: '',
        expiryDate: '',
        updateTime: '',
        certificateUrl: ''
      },
      certificateDialogVisible: false,
      
      // 使用记录分页数据
      usageRecords: [],
      usageCurrentPage: 1,
      usagePageSize: 10,
      usageTotalCount: 0,
      
      // 测试记录分页数据
      testRecords: [],
      testCurrentPage: 1,
      testPageSize: 10,
      testTotalCount: 0
    }
  },
  created() {
    this.strainId = this.$route.params.id;
    this.fetchStrainData();
    this.fetchUsageRecords();
    this.fetchTestRecords();
  },
  methods: {
    // 获取菌种详情
    fetchStrainData() {
      this.loading = true;
      
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据，实际项目中应替换为真实API调用
        this.strainData = {
          id: this.strainId,
          strainNo: 'PCLS-2023-001',
          strainName: '枯草芽孢杆菌生产株',
          source: '主细胞库',
          batchNo: 'P20230515-001',
          preservationMethod: '冻干保存',
          storageLocation: 'A区-A-102-冷藏柜',
          inventory: 12,
          status: '正常',
          description: '本菌种为工业生产级别枯草芽孢杆菌生产株，由主细胞库转入，经过严格筛选和稳定性测试。该菌株具有高产蛋白酶能力，发酵条件适应性强，适合大规模工业化生产。产品稳定性好，批次间差异小，可用于洗涤用酶制剂、食品加工酶制剂等多种产品的生产。',
          preparationDate: '2023-05-10',
          expiryDate: '2024-05-10',
          updateTime: '2023-05-15 14:30:22',
          certificateUrl: '/api/strain-library/certificates/sample.pdf'
        };
        
        this.loading = false;
      }, 500);
    },
    
    // 获取使用记录
    fetchUsageRecords() {
      this.loadingRecords = true;
      
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据，实际项目中应替换为真实API调用
        this.usageRecords = [
          {
            id: '1',
            date: '2023-06-05',
            amount: 2,
            operator: '张工',
            project: '酶制剂研发项目',
            batchNo: 'E20230605-001',
            purpose: '小试生产'
          },
          {
            id: '2',
            date: '2023-07-12',
            amount: 3,
            operator: '李工',
            project: '蛋白酶产品项目',
            batchNo: 'E20230712-002',
            purpose: '中试生产'
          },
          {
            id: '3',
            date: '2023-08-18',
            amount: 5,
            operator: '王工',
            project: '工业酶制剂生产',
            batchNo: 'E20230818-003',
            purpose: '规模化生产'
          }
        ];
        
        this.usageTotalCount = 3;
        this.loadingRecords = false;
      }, 600);
    },
    
    // 获取测试记录
    fetchTestRecords() {
      this.loadingTests = true;
      
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据，实际项目中应替换为真实API调用
        this.testRecords = [
          {
            id: '1',
            date: '2023-05-15',
            type: '活力测定',
            operator: '刘工',
            result: '合格',
            remark: '酶活性达标，符合生产要求'
          },
          {
            id: '2',
            date: '2023-05-15',
            type: '纯度检测',
            operator: '张工',
            result: '合格',
            remark: '纯度>98%，无杂菌污染'
          },
          {
            id: '3',
            date: '2023-05-16',
            type: '稳定性测试',
            operator: '李工',
            result: '合格',
            remark: '常温保存7天活力下降小于5%'
          }
        ];
        
        this.testTotalCount = 3;
        this.loadingTests = false;
      }, 700);
    },
    
    // 状态标签类型
    getStatusType(status) {
      switch(status) {
        case '正常':
          return 'success';
        case '缺货':
          return 'warning';
        case '异常':
          return 'danger';
        case '已停用':
          return 'info';
        default:
          return 'info';
      }
    },
    
    // 编辑菌种
    handleEdit() {
      this.$router.push(`/strain-library/production-cell-library/edit/${this.strainId}`);
    },
    
    // 打印菌种信息
    handlePrint() {
      window.print();
    },
    
    // 查看证书
    handleViewCertificate() {
      this.certificateDialogVisible = true;
    },
    
    // 下载证书
    handleDownloadCertificate() {
      // 实际项目中应处理文件下载逻辑
      window.open(this.strainData.certificateUrl, '_blank');
    },
    
    // 新增使用记录
    handleAddUsage() {
      this.$message.info('功能开发中：新增使用记录');
      // 实际项目中应跳转到新增使用记录页面或打开对话框
    },
    
    // 查看使用记录详情
    handleViewUsageDetail(row) {
      this.$message.info(`查看使用记录: ${row.id}`);
      // 实际项目中应跳转到使用记录详情页面或打开对话框
    },
    
    // 编辑使用记录
    handleEditUsage(row) {
      this.$message.info(`编辑使用记录: ${row.id}`);
      // 实际项目中应跳转到编辑使用记录页面或打开对话框
    },
    
    // 使用记录分页切换
    handleUsagePageChange(page) {
      this.usageCurrentPage = page;
      this.fetchUsageRecords();
    },
    
    // 新增测试记录
    handleAddTest() {
      this.$message.info('功能开发中：新增测试记录');
      // 实际项目中应跳转到新增测试记录页面或打开对话框
    },
    
    // 查看测试记录详情
    handleViewTestDetail(row) {
      this.$message.info(`查看测试记录: ${row.id}`);
      // 实际项目中应跳转到测试记录详情页面或打开对话框
    },
    
    // 编辑测试记录
    handleEditTest(row) {
      this.$message.info(`编辑测试记录: ${row.id}`);
      // 实际项目中应跳转到编辑测试记录页面或打开对话框
    },
    
    // 测试记录分页切换
    handleTestPageChange(page) {
      this.testCurrentPage = page;
      this.fetchTestRecords();
    }
  }
}
</script>

<style scoped lang="less">
.production-cell-record {
  padding: 20px;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    
    .header-left {
      display: flex;
      align-items: center;
      
      h2 {
        margin: 0 0 0 12px;
        font-size: 22px;
        font-weight: 500;
      }
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .strain-card {
    margin-bottom: 24px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .card-title {
        font-size: 16px;
        font-weight: 500;
      }
    }
    
    .strain-info {
      display: flex;
      flex-wrap: wrap;
      
      .info-item {
        width: 33.33%;
        margin-bottom: 16px;
        
        &.full-width {
          width: 100%;
        }
        
        .label {
          font-weight: 500;
          color: #606266;
        }
        
        .value {
          color: #303133;
          
          &.description {
            white-space: pre-line;
            line-height: 1.6;
            padding: 8px 0;
          }
        }
      }
    }
  }
  
  .record-card {
    margin-bottom: 24px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .card-title {
        font-size: 16px;
        font-weight: 500;
      }
    }
    
    .pagination-container {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
  
  .certificate-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    background-color: #f5f7fa;
  }
  
  @media print {
    .page-header, .header-actions, .record-card {
      display: none;
    }
    
    .strain-card {
      border: none;
      box-shadow: none;
      
      .card-header {
        background-color: #fff !important;
        border-bottom: 1px solid #ddd;
      }
    }
  }
}
</style> 

 culture/src/views/strain-library/strain-library-manage/add.vue

New file
@@ -0,0 +1,397 @@
<template>
    <Card>
        <!-- <div class="header-title">
            <div class="header-title-left">
                <img src="@/assets/public/headercard.png" />
                <div>新增原始细胞</div>
            </div>
        </div> -->
        <el-form 
            :model="form" 
            :rules="rules" 
            ref="strainForm" 
            label-position="top"
            class="strain-form"
        >
            <div class="form-row three-columns">
                <el-form-item label="菌种编号" prop="strainNo" required>
                    <el-input v-model="form.strainNo" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="菌种名称" prop="strainName" required>
                    <el-input v-model="form.strainName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="菌种来源" prop="source" required>
                    <el-input v-model="form.source" placeholder="请输入"></el-input>
                </el-form-item>
            </div>

            <div class="form-row">
                <el-form-item label="鉴定方法" prop="identificationMethod" required>
                    <el-input v-model="form.identificationMethod" placeholder="请输入"></el-input>
                </el-form-item>
            </div>

            <div class="form-row">
                <el-form-item label="特征描述" prop="characteristics" required class="full-width">
                    <el-input 
                        type="textarea" 
                        v-model="form.characteristics" 
                        :rows="4"
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </div>

            <div class="form-row three-columns">
                <el-form-item label="保存位置" prop="storageLocation" required>
                    <el-input v-model="form.storageLocation" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="菌种保存方法" prop="preservationMethod" required>
                    <el-input v-model="form.preservationMethod" placeholder="请输入"></el-input>
                </el-form-item>
                <div class="form-item-placeholder"></div>
            </div>

            <div class="form-row">
                <el-form-item label="备注" prop="remarks" class="full-width">
                    <el-input 
                        type="textarea" 
                        v-model="form.remarks" 
                        :rows="4"
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </div>

            <div class="end-btn" style="margin-top: 38px">
                <el-button type="primary" @click="handleSubmit">提交</el-button>
                <el-button type="primary" @click="handleBatchAdd">批量新增</el-button>
                <el-button @click="handleDraft">存草稿</el-button>
            </div>
        </el-form>

        <!-- 批量新增弹窗 -->
        <el-dialog
            title="批量新增"
            :visible.sync="batchAddDialogVisible"
            width="520px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            custom-class="batch-add-dialog"
        >
            <div class="dialog-content">
                <el-form :model="batchForm" ref="batchFormRef" label-position="top" class="batch-form">
                    <el-form-item 
                        label="批量新增数量" 
                        prop="count"
                        required
                        :rules="[{ required: true, message: '请输入批量新增数量', trigger: 'blur' }]"
                    >
                        <el-input v-model.number="batchForm.count" placeholder="请输入" />
                    </el-form-item>
                </el-form>
                <div class="dialog-notice">
                    <p>注意：操作批量新增后，系统会自动生成对应数量的菌种数据，</p>
                    <p>这些菌种的基础信息内容都是一致的，唯独菌种编号内容系统</p>
                    <p>不会自动生成，需要操作员自行编辑</p>
                </div>
            </div>
            <template #footer>
                <div class="end-btn">
                    <el-button type="primary" @click="handleConfirmBatchAdd">确认新增</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 签字确认组件 -->
        <SignatureCanvas
            :visible.sync="signatureVisible"
            @confirm="handleSignatureConfirm"
        />
    </Card>
</template>

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

export default {
    name: 'AddStrain',
    components: {
        SignatureCanvas
    },
    data() {
        return {
            batchAddDialogVisible: false,
            signatureVisible: false,
            currentAction: '', // 'submit' or 'batchAdd'
            batchForm: {
                count: ''
            },
            form: {
                strainNo: '',
                strainName: '',
                source: '',
                identificationMethod: '',
                characteristics: '',
                storageLocation: '',
                preservationMethod: '',
                remarks: ''
            },
            rules: {
                strainNo: [{ required: true, message: '请输入菌种编号', trigger: 'blur' }],
                strainName: [{ required: true, message: '请输入菌种名称', trigger: 'blur' }],
                source: [{ required: true, message: '请输入菌种来源', trigger: 'blur' }],
                identificationMethod: [{ required: true, message: '请输入鉴定方法', trigger: 'blur' }],
                characteristics: [{ required: true, message: '请输入特征描述', trigger: 'blur' }],
                storageLocation: [{ required: true, message: '请输入保存位置', trigger: 'blur' }],
                preservationMethod: [{ required: true, message: '请输入菌种保存方法', trigger: 'blur' }]
            }
        }
    },
    methods: {
        handleSubmit() {
            this.$refs.strainForm.validate((valid) => {
                if (valid) {
                    this.currentAction = 'submit'
                    this.signatureVisible = true
                }
            })
        },
        handleBatchAdd() {
            this.batchAddDialogVisible = true
        },
        handleConfirmBatchAdd() {
            this.$refs.batchFormRef.validate((valid) => {
                if (valid) {
                    this.currentAction = 'batchAdd'
                    this.batchAddDialogVisible = false
                    this.signatureVisible = true
                }
            })
        },
        handleDraft() {
            // 实现存草稿逻辑
            console.log('save draft', this.form)
        },
        handleSignatureConfirm(signatureImage) {
            this.signatureVisible = false
            this.$router.back()
            if (this.currentAction === 'submit') {
                // 处理提交逻辑
                console.log('submit form with signature:', this.form, signatureImage)
            } else if (this.currentAction === 'batchAdd') {
                // 处理批量新增逻辑
                console.log('batch add with signature:', this.batchForm.count, signatureImage)
            }
        }
    }
}
</script>

<style scoped lang="less">
.add-strain {
    height: 100%;
    background: #F5F7FA;

    .form-card {
        background: #fff;
        border-radius: 8px;
    }
}

.header-title {
    margin-bottom: 24px;

    &-left {
        display: flex;
        align-items: center;
        
        img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        div {
            font-size: 18px;
            font-weight: bold;
            color: #303133;
        }
    }
}
.end-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    button{
        width: 180px;
        height: 36px;
        // background: #409EFF; 
    }
}
.strain-form {
    padding: 0 40px;

    .form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 24px;

        &.three-columns {
            .el-form-item, .form-item-placeholder {
                flex: 1;
                min-width: 280px;
                
                @media screen and (max-width: 1200px) {
                    min-width: calc(50% - 12px);
                }
                
                @media screen and (max-width: 768px) {
                    min-width: 100%;
                }
            }

            .form-item-placeholder {
                @media screen and (max-width: 1200px) {
                    display: none;
                }
            }
        }

        .el-form-item {
            margin-bottom: 0;

            &.full-width {
                width: 100%;
            }
        }
    }

    :deep(.el-form-item__label) {
        font-weight: normal;
        color: #606266;
        padding-bottom: 8px;
        line-height: 20px;
    }

    :deep(.el-form-item__content) {
        line-height: unset;
    }

    :deep(.el-input__inner) {
        border-radius: 4px;
        height: 36px;
        line-height: 36px;
    }

    :deep(.el-textarea__inner) {
        border-radius: 4px;
        padding: 8px 12px;
        min-height: 120px;
    }
}

.batch-add-dialog {
    :deep(.el-dialog__header) {
        margin: 0;
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid #EBEEF5;
        
        .el-dialog__title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }
    }

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

    .dialog-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .batch-form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        :deep(.el-form-item) {
            width: 320px;
            margin-bottom: 0;
        }

        :deep(.el-form-item__label) {
            width: 100%;
            color: #606266;
            font-weight: normal;
            padding-bottom: 8px;
            &::before {
                color: #F56C6C;
            }
        }

        :deep(.el-input) {
            width: 100%;
            input {
            width: 100%;
            }
        }
    }

    .dialog-notice {
        margin-top: 16px;
        text-align: center;
        p {
            margin: 0;
            line-height: 22px;
            color: #606266;
            font-size: 14px;
        }
    }

    :deep(.el-dialog__footer) {
        padding: 0 20px 20px;
        text-align: center;
        
        .el-button {
            width: 180px;
            height: 36px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            border-radius: 4px;
            margin: 0;
        }
    }
}

.end-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    :deep(.el-button) {
        width: 180px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border-radius: 4px;
        margin: 0;
    }
}
</style>

 culture/src/views/strain-library/strain-library-manage/components/AddRecordDialog.vue

New file
@@ -0,0 +1,173 @@
<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>
          <div class="type-buttons">
            <el-button
              :type="formData.type === '出库' ? 'primary' : 'default'"
              @click="formData.type = '出库'"
            >出库</el-button>
            <el-button
              :type="formData.type === '入库' ? 'primary' : 'default'"
              @click="formData.type = '入库'"
            >入库</el-button>
          </div>
        </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/strain-library-manage/components/RecordDetailDialog.vue

New file
@@ -0,0 +1,235 @@
<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>
                    <div class="type-buttons">
                        <el-button 
                            type="primary" 
                            @click="handleOutbound"
                        >出库</el-button>
                    </div>
                </el-form-item>

                <div class="signature-row">
                    <el-form-item label="操作人签字" required class="signature-item">
                        <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-item 
                        v-if="formData.operatorSignature"
                        label="出库时间" 
                        required 
                        class="time-item"
                    >
                        <div class="time-value">{{ formData.operateTime }}</div>
                    </el-form-item>
                </div>

                <div class="signature-row">
                    <el-form-item required class="signature-item">
                        <template #label>
                            <span>保藏人签字</span>
                            <el-button type="primary" class="edit-sign-btn" @click="showSignature = true">修改签名</el-button>
                        </template>
                        <div class="signature-area" :class="{ 'waiting': !formData.reviewerSignature }">
                            <template v-if="formData.reviewerSignature">
                                <img :src="formData.reviewerSignature" alt="保藏人签字" />
                            </template>
                            <template v-else>
                                <span class="waiting-text">等待确认</span>
                            </template>
                        </div>
                    </el-form-item>

                    <el-form-item 
                        v-if="formData.reviewerSignature"
                        label="确认时间" 
                        required 
                        class="time-item"
                    >
                        <div class="time-value">{{ formData.confirmTime }}</div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <signature-canvas :visible.sync="showSignature" @confirm="handleSignatureConfirm" @cancel="showSignature = false" />
    </el-dialog>
</template>

<script>
import SignatureCanvas from '@/components/SignatureCanvas.vue'
export default {
    name: 'RecordDetailDialog',
    components: { SignatureCanvas },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        recordData: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            formData: {},
            showSignature: false
        }
    },
    watch: {
        recordData: {
            immediate: true,
            handler(val) {
                this.formData = { ...val }
            }
        }
    },
    methods: {
        handleClose() {
            this.$emit('update:visible', false)
            this.$emit('close')
        },
        handleOutbound() {
            if (!this.formData.operatorSignature || !this.formData.reviewerSignature) {
                this.$message.warning('请等待所有签字确认后再进行出库操作')
                return
            }
            this.$emit('confirm', this.formData)
            this.handleClose()
        },
        handleSignatureConfirm(dataUrl) {
            this.formData.reviewerSignature = dataUrl
            this.showSignature = false
            // 可选：this.formData.confirmTime = new Date().toLocaleString()
        }
    }
}
</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 {
        .el-button {
            width: 80px;
            background: #409EFF;
            border-color: #409EFF;
            color: #FFFFFF;

            &:hover {
                opacity: 0.8;
            }
        }
    }

    .signature-row {
        display: flex;
        gap: 24px;
        margin-bottom: 24px;

        &:last-child {
            margin-bottom: 0;
        }

        .signature-item {
            flex: 2;
            margin-bottom: 0;
        }

        .time-item {
            flex: 1;
            margin-bottom: 0;

            .time-value {
                height: 120px;
                line-height: 120px;
                background: #F5F7FA;
                border-radius: 4px;
                padding: 0 12px;
                font-size: 14px;
                color: #606266;
            }
        }

        .signature-area {
            height: 120px;
            width: 100%;
            background: #FFFFFF;
            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;
            }
        }
    }
}

.edit-sign-btn {
    margin-left: 12px;
}
</style> 

 culture/src/views/strain-library/strain-library-manage/components/RecordTimeline.vue

New file
@@ -0,0 +1,311 @@
<template>
  <div class="record-timeline">
    <el-timeline>
      <el-timeline-item
        v-for="(item, idx) in list"
        :key="idx"
        :type="item.type === '入库' ? 'primary' : 'warning'"
        :color="item.type === '入库' ? '#04A9A7' : '#FF9900'"
        :icon="''"
        :timestamp="''"
      >
        <div class="timeline-row">
          <div :class="['left-block', item.type === '入库' ? 'in' : 'out']">
            <div class="type-tag">{{ item.type }}</div>
            <div class="info-main">
              <div class="info-title">操作人：{{ item.operator || '--' }}</div>
              <div class="info-time">操作时间：{{ item.operateTime || '--' }}</div>
            </div>
          </div>
          <div :class="[
            'right-block', 
            item.confirmTime && item.confirmTime !== '--' ? 
              (item.type === '入库' ? 'confirmed-in' : 'confirmed-out') : 
              'unconfirmed'
          ]">
            <div class="info-title">保藏人：{{ item.reviewer || '--' }}</div>
            <div class="info-time">确认时间：{{ item.confirmTime || '--' }}</div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'RecordTimeline',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
.record-timeline {
  border-radius: 12px;
  padding: 0 0 24px 0;
  min-height: 400px;
}

:deep(.el-timeline) {
  padding-left: 32px;
}

:deep(.el-timeline-item) {
  position: relative;
  margin-bottom: 30px;
  height: 84px;
  box-sizing: border-box;
}

:deep(.el-timeline-item:last-child) {
  margin-bottom: 0;
}

:deep(.el-timeline-item__node) {
  position: absolute;
  width: 12px !important;
  height: 12px !important;
  left: -6px;
  top: 34px !important; /* 微调位置使其看起来完全居中 */
  margin: 0 !important;
  background: #ffffff;
  box-shadow: none !important;
  border: none !important;
  z-index: 3;
}

:deep(.el-timeline-item__tail) {
  border-left: 3px solid #e6e6e6;
  left: -1px;
  top: 0;
  height: 114px; /* 84px + 30px */
  z-index: 1;
}

:deep(.el-timeline-item:first-child .el-timeline-item__tail) {
  top: 34px; /* 与节点位置对应 */
  height: 80px; /* 调整为与新节点位置匹配 */
}

:deep(.el-timeline-item:last-child .el-timeline-item__tail) {
  height: 34px; /* 调整为与新节点位置匹配 */
  display: block !important; /* 确保显示 */
}

:deep(.el-timeline-item__content) {
  padding-left: 45px;
  height: 84px;
}

:deep(.el-timeline-item__wrapper) {
  height: 84px;
  padding: 0;
  margin: 0;
}

.timeline-row {
  display: flex;
  gap: 14px;
  height: 84px;
  width: 100%;
  flex-wrap: wrap; /* 允许在小屏幕上换行 */
}

.left-block, .right-block {
  width: 330px;
  border-radius: 10px;
  padding: 0;
  background: #f5f7fa;
  display: flex;
  min-width: 270px; /* 减小最小宽度 */
  max-width: 330px; /* 设置最大宽度 */
  width: 100%; /* 使用百分比宽度 */
  height: 84px;
  box-sizing: border-box;
}

.left-block.in {
  background: #E6F6F6;
}

.left-block.out {
  background: #FBF5EC;
}

.right-block {
  padding: 16px 20px 12px 20px;
  flex-direction: column;
  height: 84px;
  overflow: hidden;
  box-sizing: border-box;
}

.right-block.unconfirmed {
  background: #F5F7FB;
}

.right-block.confirmed-in {
  background: #E6F6F6;
}

.right-block.confirmed-out {
  background: #FBF5EC;
}

.type-tag {
  width: 35px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-align: center;
  border-radius: 10px 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient( 180deg, #0ACBCA 0%, #049C9A 100%);
  letter-spacing: 8px; /* 增加字间距 */
}

.left-block.out .type-tag {
  background: linear-gradient( 180deg, #FDBF2D 0%, #FA8B14 100%);
}

.info-main {
  flex: 1;
  padding: 16px 20px 12px 20px;
}

.info-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
}

.info-time {
  font-size: 14px;
  color: #999;
}

:deep(.el-timeline-item__node--primary)::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0ACBCA 0%, #049C9A 100%);
  z-index: -1;
}

:deep(.el-timeline-item__node--primary)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  z-index: 1;
}

:deep(.el-timeline-item__node--warning)::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FDBF2D 0%, #FA8B14 100%);
  z-index: -1;
}

:deep(.el-timeline-item__node--warning)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  z-index: 1;
}

/* 添加媒体查询，适配小屏幕设备 */
@media screen and (max-width: 1200px) {
  .left-block, .right-block {
    min-width: 240px;
  }
  
  .timeline-row {
    gap: 10px;
  }
}

@media screen and (max-width: 992px) {
  .timeline-row {
    flex-direction: column; /* 垂直排列 */
    height: auto;
    gap: 8px;
  }
  
  .left-block, .right-block {
    width: 100%;
    max-width: 100%;
  }
  
  :deep(.el-timeline-item) {
    position: relative;
    height: auto;
    min-height: 176px;
    margin-bottom: 40px;
  }
  
  :deep(.el-timeline-item__wrapper) {
    height: auto !important;
    min-height: 176px;
  }
  
  :deep(.el-timeline-item__tail) {
    height: calc(100% + 40px);
  }
  
  :deep(.el-timeline-item:last-of-type) {
    margin-bottom: 0;
  }
  
  :deep(.el-timeline-item:last-of-type .el-timeline-item__tail) {
    height: 34px;
  }
  
  /* 第一个元素的轴线需要特殊处理 */
  :deep(.el-timeline-item:first-of-type .el-timeline-item__tail) {
    top: 34px;
    height: calc(100% + 40px - 34px);
  }
  
  /* 确保所有轴线正确连接 */
  :deep(.el-timeline-item__tail) {
    top: 0;
    height: calc(100% + 40px);
  }
  
  /* 修正内容区域的高度 */
  :deep(.el-timeline-item__content) {
    height: auto;
    min-height: 176px;
  }
}
</style> 

 culture/src/views/strain-library/strain-library-manage/components/StrainDetail.vue

New file
@@ -0,0 +1,207 @@
<template>
    <el-dialog
        title="原始细胞库详情"
        :visible.sync="visible"
        width="70%"
        :close-on-click-modal="false"
        custom-class="strain-detail-dialog"
        append-to-body
        @close="$emit('update:visible', false)"
    >
        <div class="strain-info">
            <!-- 第一行信息 -->
            <div class="info-row">
                <div class="info-item left-column">
                    <span class="label">菌种编号：</span>
                    <span class="value">{{ detail.strainNo }}</span>
                </div>
                <div class="info-item flex-column">
                    <span class="label">鉴定方法：</span>
                    <span class="value">{{ detail.method }}</span>
                </div>
                <div class="info-item flex-column">
                    <span class="label">保存位置：</span>
                    <span class="value">{{ detail.amount }}</span>
                </div>
            </div>
            
            <!-- 第二行信息 -->
            <div class="info-row">
                <div class="info-item left-column">
                    <span class="label">菌种名称：</span>
                    <span class="value">{{ detail.strainName }}</span>
                </div>
                <div class="info-item flex-column full-width">
                    <span class="label">特性描述：</span>
                    <span class="value">{{ detail.certificate }}</span>
                </div>
            </div>
            
            <!-- 第三行信息 -->
            <div class="info-row">
                <div class="info-item left-column">
                    <span class="label">菌种来源：</span>
                    <span class="value">{{ detail.source }}</span>
                </div>
                <div class="info-item flex-column">
                    <span class="label">菌种保存方法：</span>
                    <span class="value">{{ detail.storage }}</span>
                </div>
                <div class="info-item flex-column">
                    <span class="label">出入库状态：</span>
                    <span class="value">{{ detail.operator }}</span>
                </div>
            </div>
        </div>

        <div class="record-table">
            <div class="table-title">原始细胞库出/入库记录</div>
            <el-table :data="detail.records" style="width: 100%">
                <el-table-column prop="type" label="出库/入库" />
                <el-table-column prop="operateTime" label="操作时间" />
                <el-table-column prop="operator" label="操作人姓名" />
                <el-table-column prop="reviewer" label="签核确认人姓名" />
                <el-table-column prop="status" label="状态">
                    <template #default="{ row }">
                        <el-tag :type="row.status === '已确认' ? 'success' : 'warning'">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="{ row }">
                        <el-button type="text" @click="handleView(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    :current-page.sync="currentPage"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="total"
                    @current-change="handlePageChange"
                />
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'StrainDetail',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            currentPage: 1,
            total: 0
        }
    },
    methods: {
        handleView(row) {
            console.log('View record:', row)
        },
        handlePageChange(page) {
            this.currentPage = page
            this.$emit('page-change', page)
        }
    }
}
</script>

<style lang="less" scoped>
.strain-detail-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;
    }
}

.strain-info {
    background: #F5F7FA;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;

    .info-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16px;
        
        &:last-child {
            margin-bottom: 0;
        }
        
        .info-item {
            display: flex;
            align-items: flex-start;
            margin-right: 24px;
            margin-bottom: 8px;
            
            &.left-column {
                width: 33%;
                min-width: 200px;
            }
            
            &.flex-column {
                flex: 1;
                min-width: 150px;
            }
            
            &.full-width {
                flex: 1;
                min-width: 300px;
            }
            
            .label {
                color: #606266;
                margin-right: 8px;
                white-space: nowrap;
            }
            
            .value {
                flex: 1;
                color: #303133;
                word-break: break-all;
            }
        }
    }
}

.record-table {
    .table-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 16px;
        padding-left: 8px;
        border-left: 4px solid #049C9A;
    }

    .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
}
</style> 

 culture/src/views/strain-library/strain-library-manage/index.vue

New file
@@ -0,0 +1,470 @@
<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>
        <StrainDetail
            :visible.sync="detailVisible"
            :detail="currentDetail"
        />
    </div>
</template>

<script>
import StrainDetail from './components/StrainDetail.vue'

export default {
    name: 'StrainLibraryManage',
    components: {
        StrainDetail
    },
    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/strain-library-manage/record.vue

New file
@@ -0,0 +1,417 @@
<template>
    <div class="record-page">
        <!-- 基本信息展示区域 -->
        <el-card class="header-box">
            <div class="header-content">
                <!-- 第一行 -->
                <div class="info-row">
                    <div class="info-item left-column">
                        <span class="label">菌种编号：</span>
                        <span class="value">{{ detail.strainNo }}</span>
                    </div>
                    <div class="info-item flex-column">
                        <span class="label">鉴定方法：</span>
                        <span class="value">{{ detail.method }}</span>
                    </div>
                    <div class="info-item flex-column">
                        <span class="label">保藏位置：</span>
                        <span class="value">{{ detail.amount }}</span>
                    </div>
                </div>
                
                <!-- 第二行 -->
                <div class="info-row">
                    <div class="info-item left-column">
                        <span class="label">菌种名称：</span>
                        <span class="value">{{ detail.strainName }}</span>
                    </div>
                    <div class="info-item flex-column full-width">
                        <span class="label">特性描述：</span>
                        <span class="value">{{ detail.certificate }}</span>
                    </div>
                </div>
                
                <!-- 第三行 -->
                <div class="info-row">
                    <div class="info-item left-column">
                        <span class="label">菌种来源：</span>
                        <span class="value">{{ detail.source }}</span>
                    </div>
                    <div class="info-item flex-column">
                        <span class="label">菌种保存方法：</span>
                        <span class="value">{{ detail.storage }}</span>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 出入库记录表格 -->
        <TableCustom :queryForm="queryForm" :tableData="recordList" :total="total" @currentChange="handlePageChange">
            <template #setting>
                <div class="tableTitle">
                    <div class="flex a-center">
                        <div class="title" :class="{ active: currentType === 'table' }"
                            @click="handleTypeChange('table')">
                            原始细胞保藏出/入库登记表</div>
                        <div class="drafts" :class="{ active: currentType === 'timeline' }"
                            @click="handleTypeChange('timeline')">
                            原始细胞保藏出/入库时间轴</div>
                    </div>
                    <div class="flex a-center">
                        <el-button @click="handleAddRecord" class="el-icon-plus" type="primary">新增出入库记录</el-button>
                    </div>
                </div>
            </template>

            <template #table v-if="currentType === 'table'">
                <el-table-column prop="type" label="出库/入库" />
                <el-table-column prop="operateTime" label="操作时间" />
                <el-table-column prop="operator" label="操作人签字" />
                <el-table-column prop="reviewer" label="菌种保藏人签字" />
                    <el-table-column prop="status" label="状态">
                        <template #default="{ row }">
                            <el-tag :type="row.status === '已确认' ? 'success' : 'warning'">
                                {{ row.status }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template #default="{ row }">
                            <el-button type="text" class="operation-btn" @click="handleView(row)">详情</el-button>
                            <el-button type="text" class="operation-btn" @click="handleEdit(row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </template> 
            <template #tableCustom v-if="currentType === 'timeline'">
                <record-timeline :list="timelineList" />

            </template>
        </TableCustom>

        <!-- 详情弹窗 -->
        <record-detail-dialog
            :visible.sync="dialogVisible"
            :record-data="currentRecord"
            @close="handleDialogClose"
            @confirm="handleOutbound"
        />

        <add-record-dialog
            :visible.sync="addDialogVisible"
            @confirm="handleAddRecordConfirm"
        />
    </div>
</template>

<script>
import RecordDetailDialog from './components/RecordDetailDialog.vue'
import AddRecordDialog from './components/AddRecordDialog.vue'
import RecordTimeline from './components/RecordTimeline.vue'

export default {
    name: 'StrainRecord',
    components: {
        RecordDetailDialog,
        AddRecordDialog,
        RecordTimeline
    },
    data() {
        return {
            currentType: 'table',
            detail: {},
            currentPage: 1,
            pageSize: 10,
            total: 0,
            queryForm: {
                pageSize: 10,
                pageNum: 1
            },
            recordList: [
                {
                    type: '入库',
                    operateTime: '2025-1-21 15:46:50',
                    operator: '张三',
                    reviewer: '李四',
                    status: '已确认'
                },
                {
                    type: '出库',
                    operateTime: '2025-1-21 15:46:50',
                    operator: '张三',
                    reviewer: '李四',
                    status: '已确认'
                },
                {
                    type: '入库',
                    operateTime: '2025-1-21 15:46:50',
                    operator: '张三',
                    reviewer: '李四',
                    status: '已确认'
                },
                {
                    type: '出库',
                    operateTime: '2025-1-21 15:46:50',
                    operator: '张三',
                    reviewer: '李四',
                    status: '已确认'
                },
                {
                    type: '入库',
                    operateTime: '2025-1-21 15:46:50',
                    operator: '李四',
                    reviewer: '李四',
                    status: '已确认'
                }
            ],
            dialogVisible: false,
            currentRecord: {},
            addDialogVisible: false
        }
    },
    computed: {
        timelineList() {
            // 可根据需要处理数据格式，这里直接用 recordList
            return this.recordList.map(item => ({
                ...item,
                confirmTime: item.confirmTime || item.operateTime // 若无确认时间则用操作时间
            }))
        }
    },
    created() {
        // 获取路由参数中的菌种信息
        const strainId = this.$route.query.id
        if (strainId) {
            this.getStrainDetail(strainId)
            this.getRecordList()
        }
    },
    methods: {
        getStrainDetail(id) {
            // 这里应该调用接口获取菌种详情
            // 暂时使用模拟数据
            this.detail = {
                strainNo: '3418732431',
                strainName: '名称名称名称',
                source: '来源11111111111',
                method: '1231231',
                certificate: '特性描述',
                storage: '方法方法',
                amount: '位置位置位置位置位置位置位置位置',
                operator: '入库'
            }
        },
        getRecordList() {
            // 这里应该调用接口获取出入库记录
            // 暂时使用已有模拟数据
            this.total = this.recordList.length
        },
        handleView(row) {
            this.currentRecord = { 
                ...row,
                operatorSignature: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', // 模拟操作人签字图片
                reviewerSignature: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', // 模拟保藏人签字图片
                operateTime: '2025-1-22 13:49:51',
                confirmTime: '2025-1-22 14:30:00'
            }
            this.dialogVisible = true
        },
        handlePageChange(page) {
            this.queryForm.pageNum = page
            // 这里应该调用接口获取对应页码的数据
        },
        handleTypeChange(type) {
            this.currentType = type
        },
        handleAddRecord() {
            this.addDialogVisible = true
        },
        handleEdit(row) {
            console.log('编辑记录:', row)
            // 实现编辑记录逻辑
        },
        handleDelete(row) {
            this.$confirm('确认删除该记录吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('删除记录:', row)
                // 实际项目中这里应该调用删除API
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })          
            })
        },
        handleDialogClose() {
            this.currentRecord = {}
            this.dialogVisible = false
        },
        handleOutbound(data) {
            // 这里调用出库API
            console.log('出库操作:', data)
            this.$message.success('出库成功')
            this.dialogVisible = false
            // 刷新列表
            this.getRecordList()
        },
        handleAddRecordConfirm(record) {
            // 这里可以将新记录添加到 recordList 或调用后端API
            this.$message.success('新增出入库记录成功')
            // 例如：this.recordList.push(record)
            this.getRecordList() // 或刷新列表
        },
        goBack() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less" scoped>
.record-page {
    min-height: 100vh;

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

        .header-content {
            color: rgba(0, 0, 0, 0.88);
            font-size: 14px;
            line-height: 1.5;

            .info-row {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: 8px;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .info-item {
                    display: flex;
                    align-items: flex-start;
                    margin-right: 24px;
                    margin-bottom: 6px;
                    
                    &.left-column {
                        width: 33%;
                        min-width: 200px;
                    }
                    
                    &.flex-column {
                        flex: 1;
                        min-width: 150px;
                    }
                    
                    &.full-width {
                        flex: 1;
                        min-width: 300px;
                    }
                    
                    .label {
                        color: #606266;
                        margin-right: 8px;
                        white-space: nowrap;
                    }
                    
                    .value {
                        flex: 1;
                        color: #303133;
                        word-break: break-all;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }

    .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;
            cursor: pointer;
            height: 50px;
            line-height: 50px;
            width: 280px;
            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: 280px;
            text-align: center;
        }

        .active {
            color: #049c9a;
            background: #ffffff;
            border-radius: 8px 8px 0px 0px;
            border: 1px solid #049c9a;
        }
    }

    .timeline-container {
        padding: 20px;
        background: rgba(255, 255, 255, 0.8);
        
        .timeline-card {
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.8);
            
            h4 {
                margin: 0 0 10px;
                font-size: 16px;
                font-weight: bold;
            }
            
            p {
                margin: 5px 0;
                font-size: 14px;
            }
        }
    }

    .operation-btn {
        margin-right: 12px;
    }
}
</style> 

 culture/src/views/system/user/components/add-edit.vue

@@ -20,7 +20,7 @@
              :value="item.roleId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启动状态" prop="status">
        <el-form-item label="登录状态" prop="status">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="remark">

 laboratory/src/layouts/components/HeaderNav.vue

@@ -52,11 +52,11 @@
    },
    // 获取用户信息
    getUserInfo() {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    },
    // 退出登录
    outLogin() {
      localStorage.clear()
      sessionStorage.clear()
      this.$router.replace({ path: "/" });
    },
    // 关闭标签

 laboratory/src/router/index.js

@@ -510,9 +510,9 @@

    // 登录验证
    // if (to.path === "/login") {
    //     localStorage.removeItem('userInfo')
    //     sessionStorage.removeItem('userInfo')
    //     next()
    // } else if (!localStorage.getItem('userInfo')) {
    // } else if (!sessionStorage.getItem('userInfo')) {
    //     next('/login')
    // } else {
    //     // 判断是否拥有要跳转菜单权限
@@ -523,7 +523,7 @@

    // 设置标签列表
    if (!to.meta.hide || !to.meta.oneself) {
        let tagList = JSON.parse(localStorage.getItem('tagList') || '[]')
        let tagList = JSON.parse(sessionStorage.getItem('tagList') || '[]')
        // 判断是否存在
        let isExist = tagList.some(item => item.path === to.path)
        if (!isExist) {
@@ -534,19 +534,19 @@
                meta: to.meta
            }
            tagList.push(tagInfo)
            localStorage.setItem('tagList', JSON.stringify(tagList))
            sessionStorage.setItem('tagList', JSON.stringify(tagList))
            store.commit('SET_TAGLIST', tagList)
        }
    }

    // 判断是否需要缓存
    if (to.meta.keepAlive) {
        let keepAliveList = JSON.parse(localStorage.getItem('keepAliveList') || '[]')
        let keepAliveList = JSON.parse(sessionStorage.getItem('keepAliveList') || '[]')
        // 判断是否已经缓存
        let isExist = keepAliveList.includes(to.name)
        if (!isExist) {
            keepAliveList.push(to.name)
            localStorage.setItem('keepAliveList', JSON.stringify(keepAliveList))
            sessionStorage.setItem('keepAliveList', JSON.stringify(keepAliveList))
            store.commit('SET_KEEPALIVELIST', keepAliveList)
        }
    }

 laboratory/src/store/index.js

@@ -4,9 +4,9 @@

const store = new Vuex.Store({
  state: {
    menus: localStorage.getItem('menuList') ? JSON.parse(localStorage.getItem('menuList')) : [],
    keepAliveList: localStorage.getItem('keepAliveList') ? JSON.parse(localStorage.getItem('keepAliveList')) : [],//缓存页面
    tagList: localStorage.getItem('tagList') ? JSON.parse(localStorage.getItem('tagList')) : [],//标签列表
    menus: sessionStorage.getItem('menuList') ? JSON.parse(sessionStorage.getItem('menuList')) : [],
    keepAliveList: sessionStorage.getItem('keepAliveList') ? JSON.parse(sessionStorage.getItem('keepAliveList')) : [],//缓存页面
    tagList: sessionStorage.getItem('tagList') ? JSON.parse(sessionStorage.getItem('tagList')) : [],//标签列表
    isFold: false,//是否折叠
    assay: [
      '检验方法正确',
@@ -39,11 +39,11 @@
    },
    SET_KEEPALIVELIST(state, data) {
      state.keepAliveList = data;
      localStorage.setItem('keepAliveList', JSON.stringify(data));
      sessionStorage.setItem('keepAliveList', JSON.stringify(data));
    },
    SET_TAGLIST(state, data) {
      state.tagList = data;
      localStorage.setItem('tagList', JSON.stringify(data));
      sessionStorage.setItem('tagList', JSON.stringify(data));
    },
    SET_ISFOLD(state, data) {
      state.isFold = data;

 laboratory/src/utils/request.js

@@ -15,7 +15,7 @@
// 请求拦截
service.interceptors.request.use(
  config => {
    config['headers']['Authorization'] = `${localStorage.getItem('token')}`
    config['headers']['Authorization'] = `${sessionStorage.getItem('token')}`
    if (config.method == 'get') {
      if (!config.params) config.params = {};
      config.params = {
@@ -54,7 +54,7 @@
          type: 'warning',
          duration: 2000
        })
        localStorage.clear();
        sessionStorage.clear();
        window.location.replace('/');
        return Promise.reject(res.data.data)
      }