| @ -0,0 +1,507 @@ | |||||
| <!-- 配体结合分析处理记录表 --> | |||||
| <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="baseInfoRef" :formConfig="baseInfoFormConfig" :formData="formData" /> | |||||
| <TableList label="template.common.reagentInfo" :columns="sysjColumns" :dataSource="resource" /> | |||||
| <TableList label="template.common.wzInfo" :columns="sywzColumns" :dataSource="resourceWz" v-if="resourceWz.length>0"/> | |||||
| <TableList label="template.common.instrumentInfo" :columns="yqColumns" :dataSource="yqResource" /> | |||||
| <LineLabel label="template.lba.lba004.xbxx" /> | |||||
| <CustomTable | |||||
| :isBorder="false" | |||||
| @blur="onHandleTableBlur" | |||||
| :ref="`jcbRef`" | |||||
| :columns="jcbColumns" | |||||
| :formData="formData" | |||||
| :prefixKey = "`jcb`" | |||||
| fieldItemLabel = "template.lba.lba004.xbxx" | |||||
| :showOperation="fillType === 'preFill'" | |||||
| > | |||||
| <template slot="operation" slot-scope="{ row, rowIndex, columns }"> | |||||
| <TableOpertaionDelete :row="row" :rowIndex="rowIndex" :columns="columns" @deleteRow="deleteJcbRow" ></TableOpertaionDelete> | |||||
| </template> | |||||
| </CustomTable> | |||||
| <BaseInfoFormPackage fieldItemLabel="template.lba.lba004.ypxx" label="template.lba.lba004.ypxx" | |||||
| ref="fjRef" :formConfig="getFjFormConfig" :formData="formData" /> | |||||
| <LineLabel label="template.lba.lba004.xszj" /> | |||||
| <!-- 平行配制区域 --> | |||||
| <div :label="$t('template.common.pxpz')" | |||||
| v-for="(paralleConfig, paralleIndex) in formData.paralleConfigs" | |||||
| :key="'paralle_' + paralleIndex"> | |||||
| <div class="template-form-item"> | |||||
| <div class="config-header-end" v-if="fillType === 'preFill'"> | |||||
| <el-button type="primary" @click="handleAddParalle(false)">{{ $t('template.lba.lba004.xz')}}</el-button> | |||||
| <el-button type="danger" plain @click="deleteParalleConfig(paralleIndex)">{{ $t('template.lba.lba004.sc')}}</el-button> | |||||
| </div> | |||||
| <BaseInfoFormPackage @clickable="(e) => handleClickable('paralle', paralleIndex, e)" | |||||
| :ref="`paralleStepFormPackageRef_${paralleIndex}`" :formConfig="paralleStepFormConfig" | |||||
| :formData="paralleConfig" :prefixKey="'paralle' + paralleIndex" | |||||
| :fieldItemLabel="$t('template.lba.lba004.xszj')" /> | |||||
| <!-- <CustomTable @blur="(e) => onHandleTableBlur('paralle', paralleIndex, e)" | |||||
| :ref="`paralleStepTableRef_${paralleIndex}`" :showOperation="fillType === 'actFill' || fillType === 'preFill'" | |||||
| :columns="paralleStepColumns" | |||||
| @onRegentSubmit="(data) => onTableRegentSubmit('paralle', paralleIndex, data)" | |||||
| :formData="paralleConfig" :prefixKey="'paralle' + paralleIndex" | |||||
| :fieldItemLabel="$t('template.lba.lba004.xszj')"> | |||||
| <template slot="operation" slot-scope="{ row, rowIndex, columns }"> | |||||
| <TableOpertaionDelete :row="row" :rowIndex="rowIndex" :columns="columns" @deleteRow="(rowIndex) => deleteRow(rowIndex, 'paralle', paralleIndex)" ></TableOpertaionDelete> | |||||
| </template> | |||||
| </CustomTable> --> | |||||
| <CustomTable | |||||
| :ref="`paralleStepTableRef_${paralleIndex}`" :showOperation="fillType === 'preFill'" | |||||
| :columns="paralleStepColumns" | |||||
| :formData="paralleConfig" :prefixKey="'paralle' + paralleIndex" | |||||
| :fieldItemLabel="$t('template.lba.lba004.xszj')"> | |||||
| <template slot="operation" slot-scope="{ row, rowIndex, columns }"> | |||||
| <TableOpertaionDelete :row="row" :rowIndex="rowIndex" :columns="columns" @deleteRow="(rowIndex) => deleteRow(rowIndex, 'paralle', paralleIndex)" ></TableOpertaionDelete> | |||||
| </template> | |||||
| </CustomTable> | |||||
| <Step class="mt-0 s-container" :ref="`paralleStepRef_${paralleIndex}`" | |||||
| :formData="paralleConfig.paralleStepData" :fieldItemLabel="$t('template.lba.lba004.xszj')" | |||||
| :prefixKey="'paralle' + paralleIndex"></Step> | |||||
| </div> | |||||
| </div> | |||||
| <BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark" | |||||
| ref="remarkRef" :formConfig="remarkConig" :formData="formData" /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| <!-- <button @click="onSave">保存</button> --> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import BaseInfoFormPackage from "@/components/Template/BaseInfoFormPackage"; | |||||
| import LineLabel from "@/components/Template/LineLabel"; | |||||
| import TableList from "@/components/Template/Table"; | |||||
| import Step from "@/components/Template/Step"; | |||||
| import templateMixin from "../../mixins/templateMixin"; | |||||
| import { EventBus } from "@/utils/eventBus"; | |||||
| import { uniqeResource,uniqeResourceOne } from "@/utils/calUnitTools"; | |||||
| import { duplicateResource } from "@/utils/index.js"; | |||||
| import { debounce } from 'lodash-es'; | |||||
| import CustomTable from '@/components/Template/CustomTable.vue'; | |||||
| import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue" | |||||
| export default { | |||||
| name: "LBA006", | |||||
| components: { BaseInfoFormPackage, LineLabel, TableList, Step,CustomTable,TableOpertaionDelete }, | |||||
| mixins: [templateMixin], | |||||
| props: { | |||||
| fillType: { | |||||
| type: String, | |||||
| default: 'preFill', | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| // 操作步骤表单配置 | |||||
| jcbColumns() { | |||||
| return [{ | |||||
| label: 'template.lba.lba002.jcbmc', | |||||
| prop: 'jcb', | |||||
| bodyType: 'input', | |||||
| bodyFillType: 'preFill', | |||||
| width: 280, | |||||
| },{ | |||||
| label: '', | |||||
| prop: 'jcbBh', | |||||
| bodyType: 'jcb', | |||||
| bodyFillType: 'actFill', | |||||
| width: 280 | |||||
| }] | |||||
| }, | |||||
| // 备注表单配置 | |||||
| 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, | |||||
| }, | |||||
| methodCode: { | |||||
| label: 'template.common.methodCode', | |||||
| type: "input", | |||||
| fillType: "preFill", | |||||
| maxlength: 50 | |||||
| }, | |||||
| versionNum: { | |||||
| label: 'template.common.versionNumber', | |||||
| type: "inputNumber", | |||||
| fillType: "actFill", | |||||
| prepend: "V", | |||||
| maxlength: 50 | |||||
| }, | |||||
| } | |||||
| }, | |||||
| { | |||||
| type: "conditionItem", | |||||
| label: 'template.lba.lba002.cztj', | |||||
| config: { | |||||
| pre: { | |||||
| label: 'template.common.preFill', | |||||
| type: "select", | |||||
| multiple: true, | |||||
| fillType: "preFill", | |||||
| options: this.getDictOptions('business_pztj'), | |||||
| otherCode: "preOther", | |||||
| }, | |||||
| act: { | |||||
| label: 'template.common.actualFill', | |||||
| type: "select", | |||||
| fillType: "actFill", | |||||
| otherCode: "actOther", | |||||
| multiple: true, | |||||
| compareTo: "pre", | |||||
| options: this.getDictOptions('business_pztj') | |||||
| } | |||||
| } | |||||
| }, | |||||
| { | |||||
| type: "cellItem", | |||||
| label: 'template.lba.lba002.czsj', | |||||
| config: { | |||||
| startDate: { | |||||
| label: 'template.common.startTime', | |||||
| type: "input", | |||||
| }, | |||||
| endDate: { | |||||
| label: 'template.common.endTime', | |||||
| type: "input", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 附件表单配置 | |||||
| getFjFormConfig() { | |||||
| return [ | |||||
| { | |||||
| type: "attachment", | |||||
| config: { | |||||
| attTitle: { | |||||
| label: 'template.lba.lba003.fj', | |||||
| type: "attachment", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| paralleStepFormConfig(){ | |||||
| return [ | |||||
| { | |||||
| type: 'step', | |||||
| config: { | |||||
| jz: { | |||||
| label: 'template.lba.lba004.jzmc', | |||||
| type: 'input', | |||||
| fillType: 'preFill', | |||||
| subType: 'sj', | |||||
| subKey: 'jzCode', | |||||
| subFillType: 'actFill', | |||||
| maxlength: 20 | |||||
| } | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| paralleStepColumns(){ | |||||
| return [ | |||||
| { | |||||
| label: 'template.lba.lba004.xsbs', | |||||
| prop: 'xsbs', | |||||
| width: 150, | |||||
| showWidth: 120, | |||||
| bodyType: 'input', | |||||
| bodyFillType: 'preFill' | |||||
| }, | |||||
| { | |||||
| label: 'template.lba.lba004.ysypjrz', | |||||
| prop: 'ysypjrz', | |||||
| width: 250, | |||||
| showWidth: 120, | |||||
| fillType: 'preFill', | |||||
| bodyType: 'inputNumber', | |||||
| bodyFillType: 'preFill', | |||||
| headerSelectKey: 'ysypjrzUnit', | |||||
| headerSelectTo: 'sjypjrzUnit', | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| }, | |||||
| { | |||||
| label: 'template.lba.lba004.sjypjrz', | |||||
| prop: 'sjypjrz', | |||||
| width: 250, | |||||
| showWidth: 120, | |||||
| fillType: 'preFill', | |||||
| bodyType: 'inputNumber', | |||||
| bodyFillType: 'actFill', | |||||
| compareTo: 'ysypjrz', | |||||
| copyFrom: 'ysypjrz', | |||||
| headerSelectKey: 'sjypjrzUnit', | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| }, | |||||
| { | |||||
| label: 'template.lba.lba004.ysjzjrz', | |||||
| prop: 'ysjzjrz', | |||||
| width: 250, | |||||
| showWidth: 120, | |||||
| fillType: 'preFill', | |||||
| bodyType: 'inputNumber', | |||||
| bodyFillType: 'preFill', | |||||
| headerSelectKey: 'ysjzjrzUnit', | |||||
| headerSelectTo: 'sjjzjrzUnit', | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| }, | |||||
| { | |||||
| label: 'template.lba.lba004.sjjzjrz', | |||||
| prop: 'sjjzjrz', | |||||
| width: 250, | |||||
| showWidth: 120, | |||||
| fillType: 'preFill', | |||||
| bodyType: 'inputNumber', | |||||
| bodyFillType: 'actFill', | |||||
| compareTo: 'ysjzjrz', | |||||
| copyFrom: 'ysjzjrz', | |||||
| headerSelectKey: 'sjjzjrzUnit', | |||||
| headerOptions: this.getDictOptions('business_tjdw'), | |||||
| } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| formData: {} | |||||
| }; | |||||
| }, | |||||
| mounted() { | |||||
| if(this.fillType === "preFill"){ | |||||
| this.handleAddParalle(true); | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| //获取已填写的表单数据 | |||||
| getFilledFormData() { | |||||
| const baseData = this.$refs.baseInfoRef.getFilledFormData(); | |||||
| const jcbData = this.$refs.jcbRef.getFilledFormData(); | |||||
| const fjData = this.$refs.fjRef.getFilledFormData(); | |||||
| const remarkData = this.$refs.remarkRef.getFilledFormData(); | |||||
| // 获取所有平行配制数据 | |||||
| const paralleConfigsData = []; | |||||
| if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.paralleConfigs.length; i++) { | |||||
| const paralleFormData = this.$refs[`paralleStepFormPackageRef_${i}`][0].getFilledFormData(); | |||||
| const paralleTableFormData = this.$refs[`paralleStepTableRef_${i}`][0].getFilledFormData(); | |||||
| const paralleStepData = this.$refs[`paralleStepRef_${i}`][0].getFilledFormData(); | |||||
| paralleConfigsData.push({ | |||||
| ...paralleFormData, | |||||
| ...paralleTableFormData, | |||||
| paralleStepData: paralleStepData.stepData, | |||||
| showParalleConfig: true | |||||
| }); | |||||
| } | |||||
| } | |||||
| return { | |||||
| ...baseData, | |||||
| ...jcbData, | |||||
| ...fjData, | |||||
| ...remarkData, | |||||
| paralleConfigs: paralleConfigsData, | |||||
| } | |||||
| }, | |||||
| //获取填写完成的表单数据 | |||||
| async getFormData() { | |||||
| //先校验再获取值 | |||||
| const validFlag = await this.validFields(); | |||||
| if (!validFlag) { | |||||
| return false; | |||||
| } | |||||
| let content = this.getFilledFormData(); | |||||
| return content | |||||
| }, | |||||
| //只做校验 | |||||
| async validFields() { | |||||
| // 构建需要验证的引用数组 | |||||
| let refsToValidate = ["baseInfoRef","jcbRef","fjRef", "remarkRef"]; | |||||
| // 添加平行配制相关的引用 | |||||
| if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.paralleConfigs.length; i++) { | |||||
| refsToValidate.push(`paralleStepFormPackageRef_${i}`); | |||||
| refsToValidate.push(`paralleStepTableRef_${i}`); | |||||
| refsToValidate.push(`paralleStepRef_${i}`); | |||||
| } | |||||
| } | |||||
| return await this.validFormFields(refsToValidate); | |||||
| }, | |||||
| getResource() { | |||||
| let content = this.getFilledFormData(); | |||||
| //生成resource | |||||
| let tmpResource = [] | |||||
| if (this.fillType === "actFill") { | |||||
| //平行配置 | |||||
| if (content.paralleConfigs && content.paralleConfigs.length > 0) { | |||||
| for (let i = 0; i < content.paralleConfigs.length; i++) { | |||||
| let paralleConfigs = content.paralleConfigs[i] | |||||
| let stepTableFormData = paralleConfigs.stepTableFormData | |||||
| for (let j = 0; j < stepTableFormData.length; j++) { | |||||
| //稀释液 | |||||
| tmpResource.push({ | |||||
| mc: null, | |||||
| bh: paralleConfigs.jzCode, | |||||
| ph: null, | |||||
| nd: null, | |||||
| nddw: null, | |||||
| ndz: null, | |||||
| ly: null, | |||||
| sxrq: null, | |||||
| kc: null, | |||||
| kcdw: null, | |||||
| type: 1, | |||||
| syl: stepTableFormData[j].sjjzjrz, | |||||
| syldw: paralleConfigs.headerSelectFields.sjjzjrzUnit, | |||||
| yxzq: null, | |||||
| yxzqdw: null, | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| if (tmpResource.length > 0) { | |||||
| tmpResource = uniqeResourceOne(tmpResource) | |||||
| } | |||||
| //使用的试剂、仪器 | |||||
| const stepResource = this.getStepResource() | |||||
| this.resourceTmp = uniqeResource(tmpResource, stepResource.sjResource || []) | |||||
| this.yqResourceTmp = stepResource.yqResource || [] | |||||
| this.resourceTmp = tmpResource | |||||
| return this.resourceTmp; | |||||
| }, | |||||
| getStepResource() { | |||||
| const sjResource = [], yqResource = []; | |||||
| if (this.formData.paralleConfigs && this.formData.paralleConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.paralleConfigs.length; i++) { | |||||
| const paralleResource = this.$refs[`paralleStepRef_${i}`][0].getStepResource(); | |||||
| sjResource.push(...paralleResource.sjResource); | |||||
| yqResource.push(...paralleResource.yqResource); | |||||
| } | |||||
| } | |||||
| //去重 | |||||
| const { sj, yq } = duplicateResource(sjResource, yqResource) | |||||
| return { sjResource: sj, yqResource: yq }; | |||||
| }, | |||||
| //保存 | |||||
| async onSave() { | |||||
| const formData = this.getStepResource(); | |||||
| console.log(formData, "formData") | |||||
| }, | |||||
| //新增平行配制 | |||||
| handleAddParalle(init) { | |||||
| let isAdd = !init | |||||
| if(init && (!this.formData.paralleConfigs || this.formData.paralleConfigs.length===0)){ | |||||
| isAdd = true | |||||
| } | |||||
| if(isAdd){ | |||||
| // 初始化平行配制配置列表 | |||||
| if (!this.formData.paralleConfigs) { | |||||
| this.$set(this.formData, 'paralleConfigs', []); | |||||
| } | |||||
| // 添加新的平行配制配置 | |||||
| this.formData.paralleConfigs.push({ | |||||
| paralleStepData: [], | |||||
| paralleTableFormData: [], | |||||
| showParalleConfig: true | |||||
| }); | |||||
| } | |||||
| }, | |||||
| // 删除平行配制配置 | |||||
| deleteParalleConfig(index) { | |||||
| if(this.formData.paralleConfigs.length===1){ | |||||
| // this.$message.error("至少需要1个"); | |||||
| return; | |||||
| } | |||||
| this.formData.paralleConfigs.splice(index, 1); | |||||
| }, | |||||
| deleteJcbRow(rowIndex){ | |||||
| const jcbRef = this.$refs['jcbRef']; | |||||
| if (jcbRef) { | |||||
| jcbRef.deleteRow(rowIndex); | |||||
| } | |||||
| }, | |||||
| // 删除表格行 | |||||
| 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[0].deleteRow(rowIndex); | |||||
| } | |||||
| } | |||||
| }, | |||||
| } | |||||
| }; | |||||
| </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> | |||||