feat

pyt

8 天以前 ce225f48a56ffc70768a1350730003c557543c54

feat

 culture/src/components/confirm-storage-dialog/index.vue

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

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

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

 culture/src/router/index.js

@@ -274,6 +274,15 @@
                        component: () => import("../views/strain-library/validation/primitive-cell/index.vue")
                    },
                    {
                        path: 'add-primitive-cell',
                        name: 'AddPrimitiveCell',
                        meta: {
                            title: '新增原始细胞库资料',
                            hide: true
                        },
                        component: () => import("../views/strain-library/validation/primitive-cell/add.vue")
                    },
                    {
                        path: 'chief-cell',
                        name: 'ChiefCell',
                        meta: {

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

New file
@@ -0,0 +1,370 @@
<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">
                <el-form-item label="菌种来源" prop="identificationMethod" required>
                    <el-input v-model="form.identificationMethod" 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 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="end-btn" style="margin-top: 400px">
                <el-button type="primary" @click="handleSubmit">提交</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: 'AddprimitiveCell',
    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/validation/primitive-cell/index.vue

@@ -5,19 +5,14 @@
            @sizeChange="handleSizeChange">
            <template #search>
                <el-form :model="form" label-width="auto" inline>
                    <el-form-item label="菌种编号：">
                    <el-form-item label="鉴别菌株编号：">
                        <el-input v-model="form.strainNo" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="菌种名称：">
                    <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 label="验证实验编号：">
                        <el-input v-model="form.strainName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item class="search-btn-box">
                            <el-button type="default" @click="resetForm">重置</el-button>
@@ -31,38 +26,35 @@
                    <div class="flex a-center">
                        <div class="title" :class="{ active: currentType === 'list' }"
                            @click="handleTypeChange('list')">
                            原始细胞列表</div>
                            原始细胞库验证资料</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>
                        <el-button @click="handleNewStrain" class="el-icon-plus" type="primary" style="margin-right: 12px;">新增原始细胞库资料</el-button>
                    </div>
                </div>
            </template>

            <template #table>
                <el-table-column prop="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="当前状态">
                <el-table-column prop="method" label="鉴别菌株编号" />
                <el-table-column prop="certificate" label="鉴别菌株名称" />
                <el-table-column prop="storage" label="验证实验编号" />
                <el-table-column prop="amount" label="创建人" />
                <el-table-column prop="inventory" label="创建时间" />
                <el-table-column prop="status" label="状态">
                    <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="handleDetail(row)">详情</el-button>
                        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                        <el-button type="text" @click="handleRecord(row)">出入库记录</el-button>
                        <el-button type="text" @click="handleRecord(row)">删除</el-button>
                    </template>
                </el-table-column>
            </template>
@@ -196,7 +188,7 @@
            console.log('分页信息:', this.queryForm)
        },
        handleNewStrain() {
            this.$router.push('/strain-library/strain-library-manage/add')
            this.$router.push('/strain/validation/add-primitive-cell')
            // Implement new strain logic
        },
        handleBatchAdd() {