| | |
| | | <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> |
| | |
| | | </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', |
| | |
| | | }, |
| | | 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' }] |
| | | } |
| | | } |
| | | }, |
| | |
| | | } |
| | | }) |
| | | }, |
| | | 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); |
| | | } |
| | | }); |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .end-btn{ |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | // background: #409EFF; |
| | | } |
| | | } |
| | | |
| | | .strain-form { |
| | | padding: 0 40px; |
| | | |
| | |
| | | margin-bottom: 24px; |
| | | |
| | | &.three-columns { |
| | | .el-form-item, .form-item-placeholder { |
| | | |
| | | .el-form-item, |
| | | .form-item-placeholder { |
| | | flex: 1; |
| | | min-width: 280px; |
| | | |
| | |
| | | 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; |