luojie
6 days ago
8 changed files with 1075 additions and 94 deletions
Split 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> | |||