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

13404089107

2025-05-28 e65a6e0bbdf46c377b0c340259cc69a32a52511b

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

@@ -6,34 +6,28 @@
                <div>新增原始细胞</div>
            </div>
        </div> -->
        <el-form 
            :model="form" 
            :rules="rules" 
            ref="strainForm" 
            label-position="top"
            class="strain-form"
        >

        <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 label="菌种来源" prop="strainSource">
                    <el-input v-model="form.strainSource" 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 label="鉴别菌株编号" prop="identifyingStrainCode">
                    <el-input v-model="form.identifyingStrainCode" 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 label="鉴别菌株名称" prop="identifyingStrainName">
                    <el-input v-model="form.identifyingStrainName" 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 label="验证实验编号" prop="validationExperimentCode">
                    <el-input v-model="form.validationExperimentCode" 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 label="实验时间" prop="experimentTime">
                    <el-date-picker :prefix-icon="' '" style="width: 290px;" v-model="form.experimentTime" type="date"
                        placeholder="请选择实验时间"></el-date-picker>
                </el-form-item>
                <div class="form-item-placeholder"></div>
            </div>
@@ -43,51 +37,16 @@
            </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>

        <!-- 签字确认组件 -->
        <ConfirmStorageDialog
            :visible.sync="signatureVisible"
            @confirm="handleSignatureConfirm"
            name="操作人签字"
            text="是否确认提交该项原始细胞库资料信息？"
        />
        <ConfirmStorageDialog :visible.sync="signatureVisible" @confirm="handleSignatureConfirm" name="操作人签字"
            text="是否确认提交该项原始细胞库资料信息？" />
    </Card>
</template>

<script>
import ConfirmStorageDialog from '@/components/confirm-storage-dialog/index.vue'
import { add, edit, detail } from './service'
import moment from 'moment'

export default {
    name: 'AddprimitiveCell',
@@ -96,30 +55,24 @@
    },
    data() {
        return {
            batchAddDialogVisible: false,
            signatureVisible: false,
            currentAction: '', // 'submit' or 'batchAdd'
            batchForm: {
                count: ''
            },
            form: {
                strainNo: '',
                strainName: '',
                source: '',
                identificationMethod: '',
                characteristics: '',
                storageLocation: '',
                preservationMethod: '',
                remarks: ''
                strainSource: '',         // 菌种来源
                identifyingStrainCode: '',      // 鉴别菌株编号
                identifyingStrainName: '',    // 鉴别菌株名称
                validationExperimentCode: '',      // 验证实验编号
                experimentTime: '' // 实验时间
            },
            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' }]
                strainSource: [{ required: true, message: '请输入菌种来源', trigger: 'blur' }],
                identifyingStrainCode: [{ required: true, message: '请输入鉴别菌株编号', trigger: 'blur' }],
                identifyingStrainName: [{ required: true, message: '请输入鉴别菌株名称', trigger: 'blur' }],
                validationExperimentCode: [{ required: true, message: '请输入验证实验编号', trigger: 'blur' }],
                experimentTime: [{ required: true, message: '请输入实验时间', trigger: 'blur' }]
            }
        }
    },
@@ -132,31 +85,44 @@
                }
            })
        },
        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)
            this.signatureVisible = true
            this.currentAction = 'draft'
        },
        handleSignatureConfirm(signatureImage) {
            this.signatureVisible = false
            this.$router.back()
            this.signatureVisible = false;
            const id = this.$route.query.id || this.$route.params.id;
            const submitData = { ...this.form, strainType: 1, isDraft: this.currentAction == 'submit' ? 0 : 1, handleSignature: signatureImage.signature, experimentTime: moment(this.form.experimentTime).format('YYYY-MM-DD') };
            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)
                if (id) {
                    // 编辑
                    edit({ ...submitData, id }).then(() => {
                        this.$router.back();
                    });
                } else {
                    // 新增
                    add(submitData).then(() => {
                        this.$router.back();
                    });
                }
            } else {
                // 存草稿
                add(submitData).then(() => {
                    this.$router.back();
                });
            }
        },
        mounted() {
            const id = this.$route.query.id || this.$route.params.id;
            if (id) {
                // 编辑或详情回显
                detail({ id }).then(res => {
                    if (res && res.data) {
                        // 这里根据实际接口返回字段做适配
                        Object.assign(this.form, res.data);
                    }
                });
            }
        }
    }
@@ -180,7 +146,7 @@
    &-left {
        display: flex;
        align-items: center;
        

        img {
            width: 20px;
            height: 20px;
@@ -194,18 +160,20 @@
        }
    }
}
.end-btn{

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

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

.strain-form {
    padding: 0 40px;

@@ -216,14 +184,16 @@
        margin-bottom: 24px;

        &.three-columns {
            .el-form-item, .form-item-placeholder {

            .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%;
                }
@@ -275,7 +245,7 @@
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid #EBEEF5;
        

        .el-dialog__title {
            font-size: 16px;
            font-weight: 600;
@@ -309,6 +279,7 @@
            color: #606266;
            font-weight: normal;
            padding-bottom: 8px;

            &::before {
                color: #F56C6C;
            }
@@ -316,8 +287,9 @@

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

            input {
            width: 100%;
                width: 100%;
            }
        }
    }
@@ -325,6 +297,7 @@
    .dialog-notice {
        margin-top: 16px;
        text-align: center;

        p {
            margin: 0;
            line-height: 22px;
@@ -336,7 +309,7 @@
    :deep(.el-dialog__footer) {
        padding: 0 20px 20px;
        text-align: center;
        

        .el-button {
            width: 180px;
            height: 36px;