luojie
6 days ago
8 changed files with 1075 additions and 94 deletions
Unified View
Diff Options
-
+2 -1src/components/Template/BaseInfoFormPcakge.vue
-
+3 -1src/views/business/comps/template/TemplateTable.vue
-
+1 -1src/views/business/comps/template/comps/dl/SYWZPZJHB.vue
-
+15 -15src/views/business/comps/template/comps/sp/SWYPBQGZYZBB.vue
-
+8 -8src/views/business/comps/template/comps/sp/SWYPFXCBYPZB.vue
-
+8 -9src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
-
+985 -0src/views/business/comps/template/comps/sp/SWYPNBGZYZBB.vue
-
+53 -59src/views/business/comps/template/mixins/templateMixin.js
+ 2
- 1
src/components/Template/BaseInfoFormPcakge.vue
View File
+ 3
- 1
src/views/business/comps/template/TemplateTable.vue
View File
+ 1
- 1
src/views/business/comps/template/comps/dl/SYWZPZJHB.vue
View File
+ 15
- 15
src/views/business/comps/template/comps/sp/SWYPBQGZYZBB.vue
View File
+ 8
- 8
src/views/business/comps/template/comps/sp/SWYPFXCBYPZB.vue
View File
+ 8
- 9
src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
View File
+ 985
- 0
src/views/business/comps/template/comps/sp/SWYPNBGZYZBB.vue
View File
| @ -0,0 +1,985 @@ | |||||
| <!-- 生物样品内标工作液制备表 --> | |||||
| <template> | |||||
| <div> | |||||
| <div class="detail-container"> | |||||
| <div class="detail-title"><img src="@/assets/images/detail-title.png">生物样品内标工作液制备表<img | |||||
| src="@/assets/images/detail-title.png" /></div> | |||||
| <div class="detail-content"> | |||||
| <div class="content"> | |||||
| <BaseInfoFormPcakge label="试验基本信息" ref="baseInfoRef" :formConfig="baseInfoFormConfig" | |||||
| :formData="formData" /> | |||||
| <TableList label="试验试剂信息" :columns="sysjColumns" :dataSource="dataSource" /> | |||||
| <TableList label="仪器使用信息" :columns="yqsColumns" :dataSource="dataSource" /> | |||||
| <BaseInfoFormPcakge label="存储条件" ref="storageConditionRef" :formConfig="storageFormConfig" | |||||
| :formData="formData" /> | |||||
| <LineLabel label="操作步骤" /> | |||||
| <div class = "mt-20"> | |||||
| <el-button type="primary" @click="handleAddParalle">新增平行配制</el-button> | |||||
| <el-button type="primary" @click="handleAddLadder">新增阶梯配制</el-button> | |||||
| </div> | |||||
| <!-- 阶梯配制区域 --> | |||||
| <div | |||||
| label="阶梯配制" | |||||
| v-for="(ladderConfig, ladderIndex) in formData.ladderConfigs" | |||||
| :key="'ladder_' + ladderIndex" | |||||
| > | |||||
| <div class="template-form-item"> | |||||
| <div class="config-header"> | |||||
| <div>阶梯配制</div> | |||||
| <el-button | |||||
| type="text" | |||||
| icon="el-icon-delete" | |||||
| @click="deleteLadderConfig(ladderIndex)" | |||||
| >删除</el-button> | |||||
| </div> | |||||
| <BaseInfoFormPcakge | |||||
| @clickable="handleClickable" | |||||
| :ref="`ladderStepFormPackageRef_${ladderIndex}`" | |||||
| :formConfig="ladderStepFormConfig" | |||||
| @blur="onHandleBlur" | |||||
| :formData="ladderConfig" | |||||
| /> | |||||
| <CustomTable | |||||
| @blur="onHandleTableBlur" | |||||
| :showOperation="fillType === 'actFill'" | |||||
| :ref="`ladderStepTableRef_${ladderIndex}`" | |||||
| :columns="ladderStepColumns" | |||||
| :formData="ladderConfig" | |||||
| > | |||||
| <template slot="operation" slot-scope="{ row, rowIndex}"> | |||||
| <TableOpertaion | |||||
| :fillType="fillType" | |||||
| :row="row" | |||||
| :rowIndex="rowIndex" | |||||
| @deleteRow="(rowIndex) => deleteRow(rowIndex, 'ladder', ladderIndex)" | |||||
| ></TableOpertaion> | |||||
| </template> | |||||
| </CustomTable> | |||||
| <div class="add-row"> | |||||
| <el-button @click="handleAddRow('ladder', undefined, ladderIndex)">添加行</el-button> | |||||
| </div> | |||||
| <Step | |||||
| class="mt-0" | |||||
| :ref="`ladderStepRef_${ladderIndex}`" | |||||
| :formData="ladderConfig.ladderStepData" | |||||
| ></Step> | |||||
| </div> | |||||
| </div> | |||||
| <!-- 平行配制区域 --> | |||||
| <div | |||||
| label="平行配制" | |||||
| v-for="(paralleConfig, paralleIndex) in formData.paralleConfigs" | |||||
| :key="'paralle_' + paralleIndex" | |||||
| > | |||||
| <div class="template-form-item"> | |||||
| <div class="config-header"> | |||||
| <div>平行配制</div> | |||||
| <el-button | |||||
| type="text" | |||||
| icon="el-icon-delete" | |||||
| @click="deleteParalleConfig(paralleIndex)" | |||||
| >删除</el-button> | |||||
| </div> | |||||
| <BaseInfoFormPcakge | |||||
| @clickable="handleClickable" | |||||
| :ref="`paralleStepFormPackageRef_${paralleIndex}`" | |||||
| :formConfig="paralleStepFormConfig" | |||||
| @blur="onHandleBlur" | |||||
| :formData="paralleConfig" | |||||
| /> | |||||
| <CustomTable | |||||
| @blur="onHandleTableBlur" | |||||
| :showOperation="fillType === 'actFill'" | |||||
| :ref="`paralleStepTableRef_${paralleIndex}`" | |||||
| :columns="paralleStepColumns" | |||||
| :formData="paralleConfig" | |||||
| > | |||||
| <template slot="operation" slot-scope="{ row, rowIndex}"> | |||||
| <TableOpertaion | |||||
| :fillType="fillType" | |||||
| :row="row" | |||||
| :rowIndex="rowIndex" | |||||
| @deleteRow="(rowIndex) => deleteRow(rowIndex, 'paralle', paralleIndex)" | |||||
| ></TableOpertaion> | |||||
| </template> | |||||
| </CustomTable> | |||||
| <div class="add-row"> | |||||
| <el-button @click="handleAddRow('paralle', undefined, paralleIndex)">添加行</el-button> | |||||
| </div> | |||||
| <Step | |||||
| class="mt-0" | |||||
| :ref="`paralleStepRef_${paralleIndex}`" | |||||
| :formData="paralleConfig.paralleStepData" | |||||
| ></Step> | |||||
| </div> | |||||
| </div> | |||||
| <BaseInfoFormPcakge label="备注" ref="remarkRef" :formConfig="remarkConig" :formData="formData" /> | |||||
| </div> | |||||
| </div> | |||||
| <button @click="onSave">保存</button> | |||||
| </div> | |||||
| <SelectReagentDialog @submit="onSelectReagentSubmit" @cancel="selectReagentVisible = false" | |||||
| ref="selectReagentDialogRef" :visible.sync="selectReagentVisible"> | |||||
| </SelectReagentDialog> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"; | |||||
| import LineLabel from "@/components/Template/LineLabel"; | |||||
| import TableList from "@/components/Template/Table"; | |||||
| import Step from "@/components/Template/Step"; | |||||
| import templateMixin from "../../mixins/templateMixin"; | |||||
| import CustomTable from '@/components/Template/CustomTable.vue'; | |||||
| import SelectReagentDialog from '../../dialog/SelectReagentDialog.vue'; | |||||
| import TableOpertaion from "@/components/Template/operation/TableOpertaion.vue" | |||||
| export default { | |||||
| name: "SWYPBQGZYZBB", | |||||
| components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable, SelectReagentDialog, TableOpertaion }, | |||||
| mixins: [templateMixin], | |||||
| props: { | |||||
| value: { | |||||
| type: {}, | |||||
| default: () => { }, | |||||
| }, | |||||
| fillType: { | |||||
| type: String, | |||||
| default: 'preFill', | |||||
| }, | |||||
| }, | |||||
| watch: { | |||||
| value: { | |||||
| immediate: true, | |||||
| handler(v) { | |||||
| // 数据回显 | |||||
| if (v && Object.keys(v).length > 0) { | |||||
| this.formData = { ...this.formData, ...v }; | |||||
| // 处理阶梯配制配置 | |||||
| if (v.ladderConfigs && Array.isArray(v.ladderConfigs) && v.ladderConfigs.length > 0) { | |||||
| // 确保 ladderConfigs 是数组 | |||||
| if (!this.formData.ladderConfigs || !Array.isArray(this.formData.ladderConfigs)) { | |||||
| this.$set(this.formData, 'ladderConfigs', []); | |||||
| } | |||||
| // 回显每个阶梯配制配置的数据 | |||||
| v.ladderConfigs.forEach((ladderConfig, index) => { | |||||
| // 确保配置项有必要的属性 | |||||
| if (!this.formData.ladderConfigs[index]) { | |||||
| this.formData.ladderConfigs[index] = { | |||||
| ladderStepData: [], | |||||
| ladderTableFormData: [], | |||||
| showLadderConfig: true | |||||
| }; | |||||
| } | |||||
| // 回显表格数据 | |||||
| if (ladderConfig.ladderTableFormData && ladderConfig.ladderTableFormData.length > 0 && this.$refs[`ladderStepTableRef_${index}`]) { | |||||
| this.$refs[`ladderStepTableRef_${index}`].updateDataSource(ladderConfig.ladderTableFormData); | |||||
| } | |||||
| // 确保步骤数据有值 | |||||
| if (!ladderConfig.ladderStepData) { | |||||
| this.$set(this.formData.ladderConfigs[index], 'ladderStepData', []); | |||||
| } | |||||
| // 确保显示状态有值 | |||||
| if (ladderConfig.showLadderConfig === undefined) { | |||||
| this.$set(this.formData.ladderConfigs[index], 'showLadderConfig', !!ladderConfig.ladderStepData && ladderConfig.ladderStepData.length > 0); | |||||
| } | |||||
| }); | |||||
| } | |||||
| // 处理平行配制配置 | |||||
| if (v.paralleConfigs && Array.isArray(v.paralleConfigs) && v.paralleConfigs.length > 0) { | |||||
| // 确保 paralleConfigs 是数组 | |||||
| if (!this.formData.paralleConfigs || !Array.isArray(this.formData.paralleConfigs)) { | |||||
| this.$set(this.formData, 'paralleConfigs', []); | |||||
| } | |||||
| // 回显每个平行配制配置的数据 | |||||
| v.paralleConfigs.forEach((paralleConfig, index) => { | |||||
| // 确保配置项有必要的属性 | |||||
| if (!this.formData.paralleConfigs[index]) { | |||||
| this.formData.paralleConfigs[index] = { | |||||
| paralleStepData: [], | |||||
| paralleTableFormData: [], | |||||
| showParalleConfig: true | |||||
| }; | |||||
| } | |||||
| // 回显表格数据 | |||||
| if (paralleConfig.paralleTableFormData && paralleConfig.paralleTableFormData.length > 0 && this.$refs[`paralleStepTableRef_${index}`]) { | |||||
| this.$refs[`paralleStepTableRef_${index}`].updateDataSource(paralleConfig.paralleTableFormData); | |||||
| } | |||||
| // 确保步骤数据有值 | |||||
| if (!paralleConfig.paralleStepData) { | |||||
| this.$set(this.formData.paralleConfigs[index], 'paralleStepData', []); | |||||
| } | |||||
| // 确保显示状态有值 | |||||
| if (paralleConfig.showParalleConfig === undefined) { | |||||
| this.$set(this.formData.paralleConfigs[index], 'showParalleConfig', !!paralleConfig.paralleStepData && paralleConfig.paralleStepData.length > 0); | |||||
| } | |||||
| }); | |||||
| } | |||||
| // 兼容旧数据格式（单个配置） | |||||
| if (v.ladderTableFormData && v.ladderTableFormData.length > 0 && (!v.ladderConfigs || v.ladderConfigs.length === 0)) { | |||||
| this.formData.ladderConfigs = [{ | |||||
| ladderStepData: v.ladderStepData || [], | |||||
| ladderTableFormData: v.ladderTableFormData, | |||||
| showLadderConfig: v.showLadderConfig !== undefined ? v.showLadderConfig : true | |||||
| }]; | |||||
| } | |||||
| if (v.paralleTableFormData && v.paralleTableFormData.length > 0 && (!v.paralleConfigs || v.paralleConfigs.length === 0)) { | |||||
| this.formData.paralleConfigs = [{ | |||||
| paralleStepData: v.paralleStepData || [], | |||||
| paralleTableFormData: v.paralleTableFormData, | |||||
| showParalleConfig: v.showParalleConfig !== undefined ? v.showParalleConfig : true | |||||
| }]; | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| fillType: { | |||||
| immediate: true, | |||||
| handler(v) { | |||||
| console.log(v, "fillType") | |||||
| } | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| // 存储条件表单配置 | |||||
| storageFormConfig() { | |||||
| return [ | |||||
| { | |||||
| type: "conditionItem", | |||||
| config: { | |||||
| storageCondition1: { | |||||
| label: "存储条件", | |||||
| type: "select", | |||||
| fillType: "preFill", | |||||
| options: this.getDictOptions('business_cctj'), | |||||
| otherCode: "other1", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ]; | |||||
| }, | |||||
| // 备注表单配置 | |||||
| remarkConig() { | |||||
| return [ | |||||
| { | |||||
| type: "cellItem", | |||||
| config: { | |||||
| remark: { | |||||
| label: "", | |||||
| type: "textarea", | |||||
| fillType: "actFill", | |||||
| span: 1, | |||||
| placeholder: "请输入备注", | |||||
| maxlength: 1000, | |||||
| rows: 5 | |||||
| } | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 试验基本信息表单配置 | |||||
| baseInfoFormConfig() { | |||||
| return [ | |||||
| { | |||||
| type: "cardItem", | |||||
| config: { | |||||
| studyMc: { | |||||
| label: "试验名称", | |||||
| type: "input", | |||||
| disabled: true, | |||||
| }, | |||||
| studySn: { | |||||
| label: "试验编号", | |||||
| type: "input", | |||||
| disabled: true, | |||||
| }, | |||||
| methodCode: { | |||||
| label: "方法编号", | |||||
| type: "input", | |||||
| fillType: "preFill", | |||||
| maxlength: 50, | |||||
| }, | |||||
| versionNum: { | |||||
| label: "版本号", | |||||
| type: "inputNumber", | |||||
| fillType: "actFill", | |||||
| prepend: "V", | |||||
| maxlength: 50, | |||||
| }, | |||||
| } | |||||
| }, | |||||
| { | |||||
| type: "conditionItem", | |||||
| label: "试验配制条件", | |||||
| config: { | |||||
| pre: { | |||||
| label: "预填", | |||||
| type: "select", | |||||
| multiple: true, | |||||
| fillType: "preFill", | |||||
| options: this.getDictOptions('business_pztj'), | |||||
| otherCode: "preOther", | |||||
| }, | |||||
| act: { | |||||
| label: "实际", | |||||
| type: "select", | |||||
| fillType: "actFill", | |||||
| otherCode: "actOther", | |||||
| multiple: true, | |||||
| options: this.getDictOptions('business_pztj') | |||||
| } | |||||
| } | |||||
| }, | |||||
| { | |||||
| type: "cellItem", | |||||
| config: { | |||||
| containerMaterial: { | |||||
| label: "容器材质", | |||||
| type: "select", | |||||
| options: this.getDictOptions('business_rqcz'), | |||||
| fillType: "actFill", | |||||
| otherCode: "containerMaterialOther", | |||||
| } | |||||
| } | |||||
| }, | |||||
| { | |||||
| type: "cellItem", | |||||
| label: "处理时间", | |||||
| config: { | |||||
| createTime: { | |||||
| label: "开始时间", | |||||
| type: "input", | |||||
| }, | |||||
| endTime: { | |||||
| label: "结束时间", | |||||
| type: "input", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| paralleStepFormConfig(){ | |||||
| return[ | |||||
| { | |||||
| type:"step", | |||||
| config:{ | |||||
| solution: { | |||||
| label: "稀释液", | |||||
| type: "input", | |||||
| fillType: "preFill", | |||||
| subType: "clickable", | |||||
| subKey: "subSolution", | |||||
| subFillType: "actFill", | |||||
| maxlength: 20, | |||||
| }, | |||||
| stepStorageCondition: { | |||||
| label: "存储条件", | |||||
| type: "select", | |||||
| fillType: "preFill", | |||||
| options: this.getDictOptions('business_cctj'), | |||||
| otherCode: "stepStorageConditionOther", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 操作步骤表单配置 | |||||
| ladderStepFormConfig() { | |||||
| return [ | |||||
| { | |||||
| type: "step", | |||||
| config: { | |||||
| startSolution: { | |||||
| label: "起始源溶液", | |||||
| type: "input", | |||||
| fillType: "preFill", | |||||
| subType: "clickable", | |||||
| subKey: "subStartSolution", | |||||
| subFillType: "actFill", | |||||
| maxlength: 20, | |||||
| }, | |||||
| targetStartSolution: { | |||||
| label: "预设起始源溶液浓度", | |||||
| type: "inputNumber", | |||||
| subType: "select", | |||||
| fillType: "preFill", | |||||
| subOptions: this.getDictOptions('business_nddw'), | |||||
| subKey: "subTargetStartSolution", | |||||
| maxlength: 10, | |||||
| }, | |||||
| targetAcSolution: { | |||||
| label: "实际起始源溶液浓度", | |||||
| type: "input", | |||||
| fillType: "actFill", | |||||
| disabled: true, | |||||
| maxlength: 10, | |||||
| }, | |||||
| solution: { | |||||
| label: "稀释液", | |||||
| type: "input", | |||||
| fillType: "preFill", | |||||
| subType: "clickable", | |||||
| subKey: "subSolution", | |||||
| subFillType: "actFill", | |||||
| maxlength: 20, | |||||
| }, | |||||
| codeSTD: { | |||||
| label: "起始编号STD", | |||||
| type: "input", | |||||
| maxlength: 10, | |||||
| fillType: "preFill", | |||||
| }, | |||||
| stepStorageCondition: { | |||||
| label: "存储条件", | |||||
| type: "select", | |||||
| fillType: "preFill", | |||||
| options: this.getDictOptions('business_cctj'), | |||||
| otherCode: "stepStorageConditionOther", | |||||
| }, | |||||
| effectivePeriod: { | |||||
| label: "目标溶液有效周期", | |||||
| type: "input", | |||||
| subType: "select", | |||||
| subKey: "effectivePeriodUnit", | |||||
| fillType: "preFill", | |||||
| subOptions: this.getDictOptions('business_yxqdw'), | |||||
| }, | |||||
| expireDate: { | |||||
| label: "目标溶液失效日", | |||||
| type: "input", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| paralleStepColumns() { | |||||
| return [ | |||||
| { | |||||
| label: "目标溶液编号", | |||||
| prop: "targetSolutionCode", | |||||
| bodyType: "input", | |||||
| subType: "span", | |||||
| subKey: "subTargetSolutionCode", | |||||
| bodyFillType: "preFill", | |||||
| width: 280 | |||||
| }, | |||||
| { | |||||
| label: "起始溶液编号", | |||||
| prop: "startSolutionCode", | |||||
| width: 280, | |||||
| bodyType: "input", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "预设起始溶液体积", | |||||
| prop: "targetStartSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "targetStartSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "targetStartSolutionVolumePrecision", | |||||
| bodyFillType: "preFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "targetStartSolutionVolumePrecision", | |||||
| bodyMaxlength: 10, | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| { | |||||
| label: "实际起始溶液体积", | |||||
| prop: "actStartSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "actStartSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetStartSolutionVolume",//复制哪个字段 | |||||
| }, | |||||
| { | |||||
| label: "预设稀释液体积", | |||||
| prop: "targetDiluentVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "targetDiluentVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "targetDiluentVolumePrecision", | |||||
| bodyFillType: "preFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "targetDiluentVolumePrecision", | |||||
| bodyMaxlength: 10, | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| { | |||||
| label: "实际稀释液体积", | |||||
| prop: "actDiluentVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "actDiluentVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetDiluentVolume",//复制哪个字段 | |||||
| }, | |||||
| { | |||||
| label: "预设目标溶液浓度", | |||||
| prop: "targetSolutionConcentration", | |||||
| width: 280, | |||||
| headerSelectKey: "targetSolutionConcentrationUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_nddw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "preFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "实际目标溶液浓度", | |||||
| prop: "actSolutionConcentration", | |||||
| width: 280, | |||||
| headerSelectKey: "actSolutionConcentrationUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_nddw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "actSolutionConcentrationPrecision", | |||||
| bodyFillType: "actFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "actSolutionConcentrationPrecision", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetSolutionConcentration",//复制哪个字段 | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| { | |||||
| label: "预设目标溶液体积", | |||||
| prop: "targetSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "targetSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "preFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "实际目标溶液体积", | |||||
| prop: "actSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "actSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "actSolutionVolumePrecision", | |||||
| bodyFillType: "actFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "actSolutionVolumePrecision", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetSolutionVolume",//复制哪个字段 | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| // 步骤表格列配置 | |||||
| ladderStepColumns() { | |||||
| return [ | |||||
| { | |||||
| label: "目标溶液编号", | |||||
| prop: "targetSolutionCode", | |||||
| bodyType: "input", | |||||
| subType: "span", | |||||
| subKey: "subTargetSolutionCode", | |||||
| bodyFillType: "preFill", | |||||
| width: 280 | |||||
| }, | |||||
| { | |||||
| label: "起始溶液编号", | |||||
| prop: "startSolutionCode", | |||||
| width: 280, | |||||
| bodyType: "input", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "预设起始溶液体积", | |||||
| prop: "targetStartSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "targetStartSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "targetStartSolutionVolumePrecision", | |||||
| bodyFillType: "preFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "targetStartSolutionVolumePrecision", | |||||
| bodyMaxlength: 10, | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| { | |||||
| label: "实际起始溶液体积", | |||||
| prop: "actStartSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "actStartSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetStartSolutionVolume",//复制哪个字段 | |||||
| }, | |||||
| { | |||||
| label: "预设稀释液体积", | |||||
| prop: "targetDiluentVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "targetDiluentVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "targetDiluentVolumePrecision", | |||||
| bodyFillType: "preFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "targetDiluentVolumePrecision", | |||||
| bodyMaxlength: 10, | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| { | |||||
| label: "实际稀释液体积", | |||||
| prop: "actDiluentVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "actDiluentVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetDiluentVolume",//复制哪个字段 | |||||
| }, | |||||
| { | |||||
| label: "预设目标溶液浓度", | |||||
| prop: "targetSolutionConcentration", | |||||
| width: 280, | |||||
| headerSelectKey: "targetSolutionConcentrationUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_nddw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "preFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "实际目标溶液浓度", | |||||
| prop: "actSolutionConcentration", | |||||
| width: 280, | |||||
| headerSelectKey: "actSolutionConcentrationUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_nddw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "actSolutionConcentrationPrecision", | |||||
| bodyFillType: "actFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "actSolutionConcentrationPrecision", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetSolutionConcentration",//复制哪个字段 | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| { | |||||
| label: "预设目标溶液体积", | |||||
| prop: "targetSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "targetSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "preFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "实际目标溶液体积", | |||||
| prop: "actSolutionVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "actSolutionVolumeUnit", | |||||
| fillType: "preFill", | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodySubType: "inputNumber", | |||||
| bodySubKey: "actSolutionVolumePrecision", | |||||
| bodyFillType: "actFill", | |||||
| bodySubFillType: "preFill", | |||||
| showBodySub: this.fillType === "preFill", | |||||
| bodyDisabled: true, | |||||
| bodyPrecisionKey: "actSolutionVolumePrecision", | |||||
| bodyMaxlength: 10, | |||||
| copyFrom: "targetSolutionVolume",//复制哪个字段 | |||||
| bodySubPlaceholder: "请输入保留小数位数", | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| selectReagentVisible: false, | |||||
| subSolutionVisible: false, | |||||
| currentSubKey: "",//当前点击的子项key | |||||
| dataSource: [], | |||||
| stepTableDataSource: [], | |||||
| sysjColumns: [ | |||||
| { label: "试剂名称", prop: "reagentName" }, | |||||
| { label: "编号", prop: "reagentCode" }, | |||||
| { label: "批号", prop: "reagentNo" }, | |||||
| { label: "浓度/含量/纯度", prop: "concentration" }, | |||||
| { label: "来源", prop: "source" }, | |||||
| { label: "失效日", prop: "expireDate" }, | |||||
| ], | |||||
| yqsColumns: [ | |||||
| { label: "仪器名称", prop: "instrumentName" }, | |||||
| { label: "仪器型号", prop: "instrumentModel" }, | |||||
| { label: "仪器编号", prop: "instrumentCode" }, | |||||
| { label: "下次测试/校准/检定日期", prop: "nextTestDate" }, | |||||
| ], | |||||
| }; | |||||
| }, | |||||
| mounted() { | |||||
| if (this.fillType === "preFill") { | |||||
| this.formData = { | |||||
| effectivePeriodUnit: "days",//设置默认值 | |||||
| createTime: "2026-01-02 18:05:36",//设置默认值 | |||||
| versionNum: 1, | |||||
| stepTableFormData: [], | |||||
| ladderConfigs: [], // 阶梯配制配置列表 | |||||
| paralleConfigs: [], // 平行配制配置列表 | |||||
| headerSelectFields: { | |||||
| targetStartSolutionVolumeUnit: "mg", | |||||
| actStartSolutionVolumeUnit: "mg", | |||||
| targetDiluentVolumeUnit: "mg", | |||||
| actDiluentVolumeUnit: "mg", | |||||
| targetSolutionConcentrationUnit: "mg", | |||||
| actSolutionConcentrationUnit: "mg", | |||||
| targetSolutionVolumeUnit: "mg", | |||||
| actSolutionVolumeUnit: "mg", | |||||
| } | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| //新增平行配制 | |||||
| handleAddParalle() { | |||||
| // 初始化平行配制配置列表 | |||||
| if (!this.formData.paralleConfigs) { | |||||
| this.$set(this.formData, 'paralleConfigs', []); | |||||
| } | |||||
| // 添加新的平行配制配置 | |||||
| this.formData.paralleConfigs.push({ | |||||
| paralleStepData: [], | |||||
| paralleTableFormData: [], | |||||
| showParalleConfig: true | |||||
| }); | |||||
| }, | |||||
| //新增阶梯配制 | |||||
| handleAddLadder() { | |||||
| // 初始化阶梯配制配置列表 | |||||
| if (!this.formData.ladderConfigs) { | |||||
| this.$set(this.formData, 'ladderConfigs', []); | |||||
| } | |||||
| // 添加新的阶梯配制配置 | |||||
| this.formData.ladderConfigs.push({ | |||||
| ladderStepData: [], | |||||
| ladderTableFormData: [], | |||||
| showLadderConfig: true | |||||
| }); | |||||
| }, | |||||
| // 删除阶梯配制配置 | |||||
| deleteLadderConfig(index) { | |||||
| this.formData.ladderConfigs.splice(index, 1); | |||||
| }, | |||||
| // 删除平行配制配置 | |||||
| deleteParalleConfig(index) { | |||||
| this.formData.paralleConfigs.splice(index, 1); | |||||
| }, | |||||
| // 添加表格行 | |||||
| handleAddRow(type, rowIndex, configIndex = 0) { | |||||
| const tableRef = type === 'ladder' ? | |||||
| this.$refs[`ladderStepTableRef_${configIndex}`] : | |||||
| this.$refs[`paralleStepTableRef_${configIndex}`]; | |||||
| console.log(tableRef,"refff") | |||||
| if (tableRef && tableRef[0].addRow) { | |||||
| tableRef[0].addRow({}); | |||||
| } | |||||
| }, | |||||
| // 删除表格行 | |||||
| deleteRow(rowIndex, type, configIndex = 0) { | |||||
| // 根据类型删除对应的表格行 | |||||
| if (type === 'ladder') { | |||||
| const tableRef = this.$refs[`ladderStepTableRef_${configIndex}`]; | |||||
| if (tableRef) { | |||||
| tableRef.deleteRow(rowIndex); | |||||
| } | |||||
| } else if (type === 'paralle') { | |||||
| const tableRef = this.$refs[`paralleStepTableRef_${configIndex}`]; | |||||
| if (tableRef) { | |||||
| tableRef.deleteRow(rowIndex); | |||||
| } | |||||
| } | |||||
| }, | |||||
| handleClickable(item) { | |||||
| if (this.fillType === "preFill") { | |||||
| // return; | |||||
| } | |||||
| const { subKey = "" } = item; | |||||
| if (subKey === "subStartSolution" || subKey === "subSolution") {//起始源溶液点击事件 | |||||
| this.selectReagentVisible = true; | |||||
| this.currentSubKey = subKey; | |||||
| } | |||||
| }, | |||||
| //选择试剂提交事件 | |||||
| onSelectReagentSubmit(code) { | |||||
| this.$refs.stepFormPackageRef.updateFormData(this.currentSubKey, code); | |||||
| this.selectReagentVisible = false; | |||||
| }, | |||||
| async getFormData() { | |||||
| const baseData = await this.$refs.baseInfoRef.getFormData(); | |||||
| const conditionData = await this.$refs.storageConditionRef.getFormData(); | |||||
| // 获取所有阶梯配制数据 | |||||
| const ladderConfigsData = []; | |||||
| if (this.formData.ladderConfigs && this.formData.ladderConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.ladderConfigs.length; i++) { | |||||
| const ladderFormData = await this.$refs[`ladderStepFormPackageRef_${i}`][0].getFormData(); | |||||
| const ladderTableFormData = await this.$refs[`ladderStepTableRef_${i}`][0].getFormData(); | |||||
| const ladderStepData = await this.$refs[`ladderStepRef_${i}`][0].getFormData(); | |||||
| ladderConfigsData.push({ | |||||
| ...ladderFormData, | |||||
| ...ladderTableFormData, | |||||
| ladderStepData, | |||||
| showLadderConfig: true | |||||
| }); | |||||
| } | |||||
| } | |||||
| // 获取所有平行配制数据 | |||||
| const paralleConfigsData = []; | |||||
| if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.paralleConfigs.length; i++) { | |||||
| const paralleFormData = await this.$refs[`paralleStepFormPackageRef_${i}`][0].getFormData(); | |||||
| const paralleTableFormData = await this.$refs[`paralleStepTableRef_${i}`][0].getFormData(); | |||||
| const paralleStepData = await this.$refs[`paralleStepRef_${i}`][0].getFormData(); | |||||
| paralleConfigsData.push({ | |||||
| ...paralleFormData, | |||||
| ...paralleTableFormData, | |||||
| paralleStepData, | |||||
| showParalleConfig: true | |||||
| }); | |||||
| } | |||||
| } | |||||
| const remarkData = await this.$refs.remarkRef.getFormData(); | |||||
| return { | |||||
| ...baseData, | |||||
| ...conditionData, | |||||
| ladderConfigs: ladderConfigsData, | |||||
| paralleConfigs: paralleConfigsData, | |||||
| ...remarkData | |||||
| } | |||||
| }, | |||||
| async onSave() { | |||||
| const formData = await this.getFormData(); | |||||
| console.log(formData, "formData") | |||||
| } | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style rel="stylesheet/scss" lang="scss"> | |||||
| .mt-20 { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .config-section { | |||||
| margin-bottom: 20px; | |||||
| padding: 15px; | |||||
| border: 1px solid #ebeef5; | |||||
| border-radius: 4px; | |||||
| background-color: #fafafa; | |||||
| } | |||||
| .config-header { | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| align-items: center; | |||||
| margin-bottom: 15px; | |||||
| font-weight: bold; | |||||
| font-size: 16px; | |||||
| color: #303133; | |||||
| } | |||||
| .config-header .el-button { | |||||
| color: #f56c6c; | |||||
| font-size: 14px; | |||||
| } | |||||
| .config-header .el-button:hover { | |||||
| color: #f78989; | |||||
| } | |||||
| .add-row { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| padding: 20px 0; | |||||
| border-bottom: 1px solid #ebeef5; | |||||
| } | |||||
| .mt-0{ | |||||
| margin-top: 0; | |||||
| } | |||||
| </style> | |||||