ZHANGTENG\张腾
1 month ago
7 changed files with 623 additions and 4 deletions
Split View
Diff Options
-
+6 -1src/components/Template/BaseInfoFormPackage.vue
-
+2 -2src/components/Template/mixins/formPackageMixins.js
-
+18 -0src/lang/en/template/dl.js
-
+18 -0src/lang/zh/template/dl.js
-
+3 -0src/views/business/comps/template/TemplateTable.vue
-
+1 -1src/views/business/comps/template/comps/dl/DL003.vue
-
+575 -0src/views/business/comps/template/comps/dl/DL006.vue
+ 6
- 1
src/components/Template/BaseInfoFormPackage.vue
View File
+ 2
- 2
src/components/Template/mixins/formPackageMixins.js
View File
+ 18
- 0
src/lang/en/template/dl.js
View File
+ 18
- 0
src/lang/zh/template/dl.js
View File
+ 3
- 0
src/views/business/comps/template/TemplateTable.vue
View File
+ 1
- 1
src/views/business/comps/template/comps/dl/DL003.vue
View File
+ 575
- 0
src/views/business/comps/template/comps/dl/DL006.vue
View File
| @ -0,0 +1,575 @@ | |||
| <!-- Ames实验（掺入法）平皿培养记录表 --> | |||
| <template> | |||
| <div> | |||
| <div class="detail-container"> | |||
| <div class="detail-title"> | |||
| <img src="@/assets/images/detail-title.png" />{{ formData.bdmc | |||
| }}<img src="@/assets/images/detail-title.png" /> | |||
| </div> | |||
| <div class="detail-content"> | |||
| <div class="content"> | |||
| <BaseInfoFormPackage | |||
| fieldItemLabel="template.common.baseInfo" | |||
| label="template.common.baseInfo" | |||
| :ref="refConf.base" | |||
| :formConfig="baseInfoFormConfig" | |||
| :formData="formData" | |||
| /> | |||
| <TableList label="template.common.gyzjInfo" :columns="gyzjColumns" :dataSource="resourceGyzj" /> | |||
| <TableList label="template.common.reagentInfo" :columns="sysjColumns" :dataSource="resource" /> | |||
| <TableList label="template.common.instrumentInfo" :columns="yqColumns" :dataSource="yqResource" /> | |||
| <LineLabel label="template.common.operationSteps" /> | |||
| <Step :ref="refConf.bz" :formData="formData.stepData"></Step> | |||
| <LineLabel label="template.dl.dl006.jlzpzxx" /> | |||
| <div class="template-form-item"> | |||
| <BaseInfoFormPackage | |||
| fieldItemLabel="template.common.operationSteps" | |||
| :ref="refConf.czInfo" | |||
| @select="(e) => onCzChange(e)" | |||
| :formConfig="czInfoFormConfig" | |||
| :formData="formData" | |||
| @clickButton="handleClickButton" | |||
| @onRegentSubmit="onRegentSubmit" | |||
| /> | |||
| <CustomTable | |||
| fieldItemLabel="template.common.operationSteps" | |||
| :columns="jlzpzxxColumns" | |||
| @blur="operateBlur" | |||
| :ref="'jlzpzxxTableRef'" | |||
| @onRegentSubmit="(e) => onRegentSubmit(e)" | |||
| :showOperation="false" | |||
| :showAddRow="false" | |||
| :formData="{stepTableFormData:formData.stepTableFormData_1,headerSelectFields:{}}" | |||
| :showHeaderSelect="fillType === 'preFill'" | |||
| :prefixKey="`jlzpzxxTable`" | |||
| > | |||
| </CustomTable> | |||
| </div> | |||
| <BaseInfoFormPackage | |||
| fieldItemLabel="template.dl.dl007.bz" | |||
| label="template.dl.dl007.bz" | |||
| :ref="refConf.remark" | |||
| :formConfig="remarkConig" | |||
| :formData="formData" | |||
| /> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import BaseInfoFormPackage from '@/components/Template/BaseInfoFormPackage' | |||
| import TableOpertaionDelete from '@/components/Template/operation/TableOpertaionDelete.vue' | |||
| import CustomTable from '@/components/Template/CustomTable.vue' | |||
| import LineLabel from '@/components/Template/LineLabel' | |||
| import TableList from '@/components/Template/Table' | |||
| import Step from '@/components/Template/Step' | |||
| import templateMixin from '../../mixins/templateMixin' | |||
| import moment from 'moment' | |||
| const refConf = { | |||
| base: 'baseInfoRef', | |||
| czInfo: 'czInfoRef', | |||
| gyzj: 'gyzjTableRef', | |||
| remark: 'remarkRef', | |||
| jzjz: 'jlzpzxxTableRef', | |||
| bz: 'stepRef' | |||
| } | |||
| const refNames = Object.values(refConf) | |||
| export default { | |||
| name: 'DL006', | |||
| components: { | |||
| BaseInfoFormPackage, | |||
| LineLabel, | |||
| TableList, | |||
| Step, | |||
| CustomTable, | |||
| TableOpertaionDelete | |||
| }, | |||
| mixins: [templateMixin], | |||
| props: { | |||
| fillType: { | |||
| type: String, | |||
| default: 'preFill' | |||
| } | |||
| }, | |||
| computed: { | |||
| // 备注表单配置 | |||
| remarkConig() { | |||
| return [ | |||
| { | |||
| type: 'cellItem', | |||
| config: { | |||
| remark: { | |||
| label: '', | |||
| type: 'textarea', | |||
| fillType: 'actFill', | |||
| span: 1, | |||
| placeholder: 'template.common.remarkPlaceholder', | |||
| maxlength: 1000, | |||
| rows: 5 | |||
| } | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| // 试验基本信息表单配置 | |||
| baseInfoFormConfig() { | |||
| return [ | |||
| { | |||
| type: 'cardItem', | |||
| config: { | |||
| studyMc: { | |||
| label: 'template.common.testName', | |||
| type: 'input', | |||
| disabled: true | |||
| }, | |||
| studySn: { | |||
| label: 'template.common.testNumber', | |||
| type: 'input', | |||
| disabled: true | |||
| } | |||
| } | |||
| }, | |||
| { | |||
| type: 'conditionItem', | |||
| label: 'template.dl.dl003.pytj', | |||
| config: { | |||
| pytjyt: { | |||
| span: 1, | |||
| label: 'template.common.preFill', | |||
| type: 'select', | |||
| options: this.getDictOptions('business_pytj'), | |||
| fillType: 'preFill', | |||
| otherCode: 'pytjOther' | |||
| }, | |||
| pytjsj: { | |||
| span: 1, | |||
| label: 'template.common.actualFill', | |||
| type: 'select', | |||
| options: this.getDictOptions('business_pytj'), | |||
| fillType: 'actFill', | |||
| otherCode: 'syddOther' | |||
| } | |||
| } | |||
| }, | |||
| { | |||
| type: 'conditionItem', | |||
| label: 'template.dl.dl003.sydd', | |||
| config: { | |||
| sydd: { | |||
| span: 1, | |||
| label: 'template.dl.dl007.sydd', | |||
| type: 'select', | |||
| options: this.getDictOptions('business_sydd'), | |||
| fillType: 'actFill', | |||
| otherCode: 'syddOther' | |||
| } | |||
| } | |||
| }, | |||
| { | |||
| type: 'cellItem', | |||
| label: 'template.dl.dl003.czsj', | |||
| config: { | |||
| startDate: { | |||
| label: 'template.common.startTime', | |||
| type: 'input', | |||
| disabled: true | |||
| }, | |||
| endDate: { | |||
| label: 'template.common.endTime', | |||
| type: 'input', | |||
| disabled: true | |||
| } | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| // 操作信息表信息 | |||
| czInfoFormConfig() { | |||
| return [ | |||
| { | |||
| type: 'step', | |||
| config: { | |||
| jzs: { | |||
| label: 'template.dl.dl006.jzs', | |||
| type: 'inputNumber', | |||
| fillType: 'preFill', | |||
| maxlength: 2, | |||
| }, | |||
| pxms: { | |||
| label: 'template.dl.dl006.pxms', | |||
| type: 'inputNumber', | |||
| fillType: 'preFill', | |||
| maxlength: 2, | |||
| }, | |||
| qsbh: { | |||
| label: 'template.dl.dl006.qsbh', | |||
| type: 'inputNumber', | |||
| fillType: 'preFill', | |||
| maxlength: 4, | |||
| }, | |||
| sftjs9: { | |||
| label: 'template.dl.dl006.sftjs9', | |||
| type: 'select', | |||
| options: [ | |||
| {value:1,label:'是'}, | |||
| {value:0,label:'否'}, | |||
| ], | |||
| fillType: 'preFill', | |||
| }, | |||
| jlzsl: { | |||
| label: 'template.dl.dl006.jlzsl', | |||
| type: 'inputNumber', | |||
| fillType: 'preFill', | |||
| subType: 'button', | |||
| isClearForm: true, | |||
| subKey: 'jlzsl', | |||
| buttonName: 'template.dl.dl006.wcButton', | |||
| maxlength: 2, | |||
| }, | |||
| // pykssj: { | |||
| // label: 'template.dl.dl007.pykssj', | |||
| // fillType: 'actFill', | |||
| // type: 'input', | |||
| // subType: 'button', | |||
| // subKey: 'pykssj', | |||
| // buttonName: 'template.dl.dl003.ksButton', | |||
| // }, | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| // 操作信息表菌种列表 | |||
| jlzpzxxColumns() { | |||
| return [ | |||
| { | |||
| label: 'template.dl.dl006.jlzmc', | |||
| prop: "jlzmc", | |||
| bodyType: 'input', | |||
| bodyMaxlength: 20, | |||
| bodyFillType: 'preFill' | |||
| }, | |||
| { | |||
| label: 'template.dl.dl006.jymc', | |||
| prop: 'jymc', | |||
| bodyType: 'input', | |||
| bodyMaxlength: 20, | |||
| bodyFillType: 'preFill', | |||
| }, | |||
| { | |||
| label: 'template.dl.dl006.jybh', | |||
| prop: 'jybh', | |||
| bodyType: 'sj', | |||
| bodyFillType: 'actFill', | |||
| }, | |||
| { | |||
| label: 'template.dl.dl006.ysjytj', | |||
| prop: 'ysjytj', | |||
| headerSelectKey: "ysjytjDw", | |||
| headerOptions: this.getDictOptions('business_tjdw'), | |||
| bodyType: 'inputNumber', | |||
| bodyMaxlength: 10, | |||
| bodyFillType: 'preFill', | |||
| fillType: 'preFill', | |||
| } | |||
| // { | |||
| // label: "template.sp.sp003.ysmbrynd", | |||
| // prop: "targetSolutionConcentration", | |||
| // width: 210, | |||
| // showWidth: 120, | |||
| // headerSelectKey: "targetSolutionConcentrationUnit", | |||
| // fillType: "preFill", | |||
| // headerOptions: this.getDictOptions('business_nddw'), | |||
| // bodyType: "inputNumber", | |||
| // bodyFillType: "preFill", | |||
| // bodyMaxlength: 10, | |||
| // headerSelectTo:"actSolutionConcentrationUnit", | |||
| // }, | |||
| ] | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| formData: {}, | |||
| refConf | |||
| } | |||
| }, | |||
| methods: { | |||
| // 删除表格行 | |||
| async deleteTableRow(rowIndex, refName) { | |||
| this.$refs[refName].deleteRow(rowIndex) | |||
| }, | |||
| handleClickButton(_item, signData) { | |||
| // 1. 严格判空 + 合法性校验 | |||
| const formFields = this.$refs?.czInfoRef?.formFields; | |||
| if (!formFields) { | |||
| console.warn('未找到表单字段引用 czInfoRef'); | |||
| return; | |||
| } | |||
| const { jlzsl } = formFields; | |||
| if (!Number.isInteger(jlzsl) || jlzsl < 0) { | |||
| console.warn('记录总数 jlzsl 必须是大于等于0的整数，当前值：', jlzsl); | |||
| return; | |||
| } | |||
| // 2. 获取表单数据 | |||
| const formData = this.getFilledFormData(); | |||
| // 3. 核心逻辑1：生成jlzsl行新数据（完全重置） | |||
| const newStepTableData = []; | |||
| for (let i = 0; i < jlzsl; i++) { | |||
| const row = { | |||
| index: i + 1, // 行序号 | |||
| // 表格列默认字段，按需修改 | |||
| name: '', | |||
| amount: '', | |||
| date: '', | |||
| status: 'normal' | |||
| }; | |||
| newStepTableData.push(row); | |||
| } | |||
| // 4. 覆盖表单数据源 | |||
| formData.stepTableFormData = newStepTableData; | |||
| // 5. 核心逻辑2：更新表格（关键：先清空/截断，再设置新数据） | |||
| const tableRef = this.$refs.jlzpzxxTableRef; | |||
| if (tableRef) { | |||
| // ===== 方式1：表格组件支持直接设置数据源（推荐，最简洁）===== | |||
| if (tableRef.setDataSource) { | |||
| tableRef.setDataSource(newStepTableData); // 直接替换，自动删多余行 | |||
| } | |||
| // ===== 方式2：仅支持逐行更新/删除（兼容老旧表格组件）===== | |||
| else if (tableRef.updateDataSourceByRowIndex && tableRef.deleteRow) { | |||
| // 步骤1：先更新前jlzsl行数据 | |||
| newStepTableData.forEach((row, i) => { | |||
| tableRef.updateDataSourceByRowIndex(i, row); | |||
| }); | |||
| // 步骤2：删除超出jlzsl的行（关键！解决3→1时多余行问题） | |||
| // 获取表格当前总行数 | |||
| const currentRowCount = tableRef.getDataSource?.()?.length || 0; | |||
| // 从最后一行往前删（避免索引错乱） | |||
| for (let i = currentRowCount - 1; i >= jlzsl; i--) { | |||
| tableRef.deleteRow(i); // 删除第i行 | |||
| } | |||
| } | |||
| // ===== 方式3：无批量/删除方法（兜底方案）===== | |||
| else { | |||
| // 强制刷新表格（如果组件支持） | |||
| tableRef.refresh?.(); | |||
| // 或重新渲染（极端场景） | |||
| this.$nextTick(() => { | |||
| tableRef.updateDataSourceByRowIndex(0, newStepTableData[0] || {}); | |||
| }); | |||
| } | |||
| } | |||
| }, | |||
| // 获取已填写的表单数据 | |||
| getFilledFormData() { | |||
| return this.getFilledFormDataByRefs(refNames) | |||
| }, | |||
| // 获取填写完成的表单数据 | |||
| async getFormData() { | |||
| return await this.validFormFields(refNames) | |||
| }, | |||
| // 只做校验 | |||
| async validFields() { | |||
| return await this.validFormFields(refNames) | |||
| }, | |||
| getResource() { | |||
| // const stepResource = this.$refs.yqsyTableRef.getStepResource() | |||
| // 使用的试剂、仪器 | |||
| // this.resourceTmp = stepResource.sjResource || [] | |||
| // this.yqResourceTmp = stepResource.yqResource || [] | |||
| // return this.resourceTmp | |||
| }, | |||
| onRegentSubmit(e) { | |||
| const { selectInfo, key, rowIndex } = e | |||
| const { row } = selectInfo | |||
| if (key === 'qxbd') { | |||
| this.$refs.czInfoRef.updateFormData('pykssj', row.startDate) | |||
| } | |||
| }, | |||
| // 保存 | |||
| async onSave() { | |||
| const formData = this.getStepResource() | |||
| console.log(formData, 'formData') | |||
| }, | |||
| //处理table失焦事件 | |||
| async operateBlur(params) { | |||
| let isGeneratingSubCode = false; | |||
| const { dataSource = [], rowIndex } = params; // 重点：接收当前行索引rowIndex | |||
| // 1. 数据源为空/正在生成中，直接返回 | |||
| if (dataSource.length === 0 || isGeneratingSubCode) { | |||
| return; | |||
| } | |||
| // 2. 获取当前失去焦点的行（核心：只处理当前行，而非遍历整表） | |||
| const currentItem = dataSource[rowIndex]; | |||
| if (!currentItem) { | |||
| return; | |||
| } | |||
| // 3. 条件判断：有targetSolutionCode 且 无subTargetSolutionCode | |||
| const hasTargetCode = !!currentItem.targetSolutionCode; | |||
| const noSubTargetCode = !currentItem.subTargetSolutionCode; | |||
| if (!hasTargetCode || !noSubTargetCode) { | |||
| return; // 不满足条件，直接返回 | |||
| } | |||
| try { | |||
| // 4. 加锁，防止重复请求 | |||
| isGeneratingSubCode = true; | |||
| // 5. 调用接口生成子码（仅传当前行的参数） | |||
| const subCode = await this.getLatestSnArr([{ | |||
| pre: currentItem.targetSolutionCode, | |||
| type: 1 | |||
| }]); | |||
| // 6. 赋值到当前行（兼容接口返回空的情况） | |||
| currentItem.subTargetSolutionCode = subCode[0] || ''; | |||
| // 7. 只更新当前行的表格数据（而非遍历全表，提升性能） | |||
| if (this.$refs.jlzpzxxTableRef) { | |||
| this.$refs.jlzpzxxTableRef.updateDataSourceByRowIndex(rowIndex, { ...currentItem }); | |||
| } | |||
| } catch (error) { | |||
| // 8. 异常捕获，给出友好提示 | |||
| this.$message.error('子码生成失败，请重试'); | |||
| } finally { | |||
| // 9. 解锁，允许后续请求 | |||
| isGeneratingSubCode = false; | |||
| } | |||
| }, | |||
| //处理是否添加S9 | |||
| onCzChange(e) { | |||
| const { sftjs9 , key } = e; | |||
| if(key == 'sftjs9'){ | |||
| // 抽离固定配置（和之前一致） | |||
| const configMap = { | |||
| 1: { | |||
| s9hhybh: { | |||
| label: 'template.dl.dl006.s9hhybh', | |||
| type: 'input', | |||
| fillType: 'actFill', | |||
| maxlength: 4, | |||
| }, | |||
| s9hhyyjjrl: { | |||
| label: 'template.dl.dl006.s9hhyyjjrl', | |||
| type: 'inputNumber', | |||
| fillType: 'preFill', | |||
| subType: 'select', | |||
| subKey: "s9hhyyjjrldw", | |||
| subOptions: this.getDictOptions('business_tjdw'), | |||
| maxlength: 10, | |||
| } | |||
| }, | |||
| other: { | |||
| pbsbh: { | |||
| label: 'template.dl.dl006.pbsbh', | |||
| type: 'input', | |||
| fillType: 'actFill', | |||
| maxlength: 4, | |||
| }, | |||
| pbsryyjrl: { | |||
| label: 'template.dl.dl006.pbsryyjjrl', | |||
| type: 'inputNumber', | |||
| fillType: 'preFill', | |||
| subType: 'select', | |||
| subKey: "pbsryyjjrldw", | |||
| subOptions: this.getDictOptions('business_tjdw'), | |||
| maxlength: 10, | |||
| } | |||
| } | |||
| }; | |||
| // 选择要添加的配置和要删除的冗余配置 | |||
| let addConfig, removeKeys; | |||
| if (sftjs9 === 1) { | |||
| addConfig = configMap[1]; | |||
| removeKeys = ['pbsbh', 'pbsryyjrl']; | |||
| } else { | |||
| addConfig = configMap.other; | |||
| removeKeys = ['s9hhybh', 's9hhyyjjrl']; | |||
| } | |||
| this.czInfoFormConfig.forEach(item => { | |||
| // 1. 复制原config并删除冗余项 | |||
| let newConfig = { ...item.config }; | |||
| removeKeys.forEach(key => delete newConfig[key]); | |||
| // 2. 拆分原config为「前半部分」和「最后一项」 | |||
| const keys = Object.keys(newConfig); // 获取原config的所有属性名（按顺序） | |||
| const lastKey = keys.pop(); // 取出最后一个属性名 | |||
| const frontConfig = {}; | |||
| // 组装前半部分（除最后一项外的所有属性） | |||
| keys.forEach(key => { | |||
| frontConfig[key] = newConfig[key]; | |||
| }); | |||
| // 最后一项单独保留 | |||
| const lastConfig = lastKey ? { [lastKey]: newConfig[lastKey] } : {}; | |||
| // 3. 重新组合：前半部分 → 新增配置 → 最后一项 | |||
| newConfig = { | |||
| ...frontConfig, // 原配置的前半部分 | |||
| ...addConfig, // 新增的两个配置项（插入到最后一项前面） | |||
| ...lastConfig // 原配置的最后一项 | |||
| }; | |||
| // 4. 赋值回item.config | |||
| item.config = newConfig; | |||
| }); | |||
| } | |||
| }, | |||
| //选择table header下拉框也要更新体积 | |||
| // onHeaderSelectChange(data){ | |||
| // const {key, headerSelectFields,dataSource=[]} = data; | |||
| // const keys = [ | |||
| // 'targetDiluentVolumeUnit', | |||
| // ] | |||
| // if(keys.includes(key)){ | |||
| // const {targetStartSolution,subTargetStartSolution} = this.$refs.stepFormPackageRef?.getFilledFormData(); | |||
| // const params = { | |||
| // subTargetStartSolution, | |||
| // headerSelectFields | |||
| // } | |||
| // this.batchUpdateTargetStartSolutionVolume(dataSource,targetStartSolution,params) | |||
| // } | |||
| // }, | |||
| } | |||
| } | |||
| </script> | |||
| <style rel="stylesheet/scss" lang="scss"> | |||
| .mt-20 { | |||
| margin-top: 20px; | |||
| } | |||
| .print-btn { | |||
| margin-bottom: 20px; | |||
| } | |||
| .config-header-end { | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| align-items: center; | |||
| margin-bottom: 15px; | |||
| font-weight: bold; | |||
| font-size: 16px; | |||
| color: #303133; | |||
| } | |||
| </style> | |||