| @ -0,0 +1,427 @@ | |||||
| <!-- 供试品部特异性样品配制记录表 --> | |||||
| <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" /> | |||||
| <TableList label="template.common.instrumentInfo" :columns="yqColumns" :dataSource="yqResource" /> | |||||
| <LineLabel label="template.common.operationSteps" /> | |||||
| <!-- 操作步骤 --> | |||||
| <div v-for="(formConfig, ladderIndex) in formData.formConfigs" :key="'ladder_' + ladderIndex"> | |||||
| <div class="template-form-item"> | |||||
| <div class="config-header-right"> | |||||
| <el-button v-if="fillType === 'preFill'" type="primary" @click="handleAddFormConfig">{{ | |||||
| $t('template.common.addBtn') }}</el-button> | |||||
| <el-button v-if="fillType === 'preFill' && formData.formConfigs.length > 1" | |||||
| type="danger" @click="handleDeleteFormConfig(ladderIndex)">{{ | |||||
| $t('template.common.deleteBtn') | |||||
| }}</el-button> | |||||
| <el-button class="print-btn" v-if="fillType === 'actFill'" type="primary" | |||||
| @click="printTag">{{ $t('template.common.bqdy') }}</el-button> | |||||
| </div> | |||||
| <BaseInfoFormPackage fieldItemLabel="template.common.operationSteps" | |||||
| :ref="`formConfigStepFormPackageRef_${ladderIndex}`" :formConfig="stepFormConfig" | |||||
| :formData="formConfig" /> | |||||
| <Step class="mt-0 s-container" :ref="`formStepRef_${ladderIndex}`" | |||||
| :formData="formConfig.stepData" :fieldItemLabel="$t('template.common.jtpz')" | |||||
| :prefixKey="'form_' + ladderIndex"></Step> | |||||
| </div> | |||||
| </div> | |||||
| <!-- 备注 --> | |||||
| <BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark" | |||||
| ref="remarkRef" :formConfig="remarkConig" :formData="formData" /> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </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 CustomTable from '@/components/Template/CustomTable.vue'; | |||||
| import { getLatestSn } from '@/api/template'; | |||||
| import { EventBus } from "@/utils/eventBus"; | |||||
| import { uniqeResource } from "@/utils/calUnitTools"; | |||||
| import { debounce } from 'lodash-es' | |||||
| import { duplicateResource, getExpireDate } from "@/utils/index.js"; | |||||
| export default { | |||||
| name: "GSP010", | |||||
| components: { BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable }, | |||||
| 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, | |||||
| }, | |||||
| 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.common.testConfigurationConditions', | |||||
| 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.common.configurationTime', | |||||
| config: { | |||||
| startDate: { | |||||
| label: 'template.common.startTime', | |||||
| type: "input", | |||||
| }, | |||||
| endDate: { | |||||
| label: 'template.common.endTime', | |||||
| type: "input", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 操作步骤表单配置 | |||||
| stepFormConfig() { | |||||
| return [ | |||||
| { | |||||
| type: "step", | |||||
| config: { | |||||
| targetName: { | |||||
| label: 'template.common.targetSolutionName', | |||||
| type: "input", | |||||
| fillType: "preFill", | |||||
| maxlength: 50 | |||||
| }, | |||||
| targetCode: { | |||||
| label: 'template.common.targetSolutionCode', | |||||
| type: "input", | |||||
| subType: "span", | |||||
| fillType: "preFill", | |||||
| subKey: "targetCodeSn", | |||||
| maxlength: 20 | |||||
| }, | |||||
| targetPreConcentration: { | |||||
| label: 'template.common.targetPreConcentration', | |||||
| type: "inputNumber", | |||||
| subType: "select", | |||||
| subKey: "targetPreConcentrationUnit", | |||||
| fillType: "preFill", | |||||
| subOptions: this.getDictOptions('business_nddw'), | |||||
| maxlength: 10, | |||||
| selectTo: "targetActConcentrationUnit",//下拉选择后,赋值到对应字段 | |||||
| }, | |||||
| targetActConcentration: { | |||||
| label: 'template.common.targetActConcentration', | |||||
| type: "inputNumber", | |||||
| subType: "select", | |||||
| subKey: "targetActConcentrationUnit", | |||||
| compareTo: "targetPreConcentration",//与哪个字段比较 | |||||
| fillType: "actFill", | |||||
| subFillType: "preFill", | |||||
| subOptions: this.getDictOptions('business_nddw'), | |||||
| copyFrom: "targetPreConcentration",//复制哪个字段 | |||||
| maxlength: 10 | |||||
| }, | |||||
| targetPreVolume: { | |||||
| label: 'template.common.targetPreVolume', | |||||
| type: "inputNumber", | |||||
| subType: "select", | |||||
| subKey: "targetPreVolumeUnit", | |||||
| subOptions: this.getDictOptions('business_tjdw'), | |||||
| fillType: "preFill", | |||||
| maxlength: 10, | |||||
| selectTo: "targetActVolumeUnit",//下拉选择后,赋值到对应字段 | |||||
| }, | |||||
| targetActVolume: { | |||||
| label: 'template.common.targetActVolume', | |||||
| type: "inputNumber", | |||||
| subType: "select", | |||||
| subKey: "targetActVolumeUnit", | |||||
| fillType: "actFill", | |||||
| subFillType: "preFill", | |||||
| subOptions: this.getDictOptions('business_tjdw'), | |||||
| compareTo: "targetPreVolume",//与哪个字段比较 | |||||
| copyFrom: "targetPreVolume",//复制哪个字段 | |||||
| maxlength: 10 | |||||
| }, | |||||
| effectivePeriod: { | |||||
| label: 'template.common.effectivePeriod', | |||||
| type: "inputNumber", | |||||
| subType: "select", | |||||
| subKey: "effectivePeriodUnit", | |||||
| fillType: "preFill", | |||||
| subOptions: this.getDictOptions('business_yxqdw'), | |||||
| maxlength: 10 | |||||
| }, | |||||
| expireDate: { | |||||
| label: 'template.common.expireDate', | |||||
| type: "input", | |||||
| }, | |||||
| storageCondition: { | |||||
| label: 'template.common.storageConditionLabel', | |||||
| type: "select", | |||||
| fillType: "preFill", | |||||
| options: this.getDictOptions("business_cctj"), | |||||
| otherCode: "storageConditionOther", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| formData: {} | |||||
| }; | |||||
| }, | |||||
| mounted() { | |||||
| const formData = this.getFormDataByTemplateData(); | |||||
| if (!formData.targetCodeSn && this.fillType === "actFill") { | |||||
| this.getCode(formData); | |||||
| } else { | |||||
| if (!this.formData.formConfigs) { | |||||
| this.$set(this.formData, 'formConfigs', []); | |||||
| this.formData.formConfigs.push({ | |||||
| formConfigs: [], | |||||
| }); | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| //新增 | |||||
| handleAddFormConfig() { | |||||
| if (!this.formData.formConfigs) { | |||||
| this.$set(this.formData, 'formConfigs', []); | |||||
| } | |||||
| this.formData.formConfigs.push({ | |||||
| formConfigs: [], | |||||
| }); | |||||
| }, | |||||
| //删除 | |||||
| handleDeleteFormConfig(index) { | |||||
| this.formData.formConfigs.splice(index, 1); | |||||
| }, | |||||
| //todo 打印标签 | |||||
| printTag() { | |||||
| const printConfig = this.getBasePrintConfig(); | |||||
| const { storageCondition, targetCodeSn } = this.formData; | |||||
| printConfig["存储条件"] = storageCondition; | |||||
| printConfig["编号"] = targetCodeSn; | |||||
| EventBus.$emit('showTagPrintDialog', { printConfig }) | |||||
| }, | |||||
| //填报获取编号 | |||||
| getCode: debounce(async function (v) { | |||||
| if (this.formData.formConfigs && this.formData.formConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.formConfigs.length; i++) { | |||||
| let item = this.formData.formConfigs[i] | |||||
| const result = await getLatestSn({ | |||||
| count: 1, | |||||
| pre: item.targetCode, | |||||
| type: 1 | |||||
| }) | |||||
| if (result.code == 200) { | |||||
| this.$refs[`formConfigStepFormPackageRef_${i}`][0].updateFormData("targetCodeSn", result.data[0]) | |||||
| } | |||||
| } | |||||
| } | |||||
| }, 100), | |||||
| //获取字段值,不检验 | |||||
| getFilledFormData() { | |||||
| const baseData = this.$refs.baseInfoRef.getFilledFormData(); | |||||
| const formConfigsData = []; | |||||
| if (this.formData.formConfigs && this.formData.formConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.formConfigs.length; i++) { | |||||
| const formData = this.$refs[`formConfigStepFormPackageRef_${i}`][0].getFilledFormData(); | |||||
| const stepData = this.$refs[`formStepRef_${i}`][0].getFilledFormData(); | |||||
| if(this.formData.startDate&&formData.effectivePeriod&&formData.effectivePeriodUnit){ | |||||
| formData.expireDate=getExpireDate(this.formData.startDate, formData.effectivePeriod, formData.effectivePeriodUnit) | |||||
| } | |||||
| formConfigsData.push({ | |||||
| ...formData, | |||||
| ...stepData, | |||||
| }); | |||||
| } | |||||
| } | |||||
| const remarkData = this.$refs.remarkRef.getFilledFormData(); | |||||
| return { | |||||
| ...baseData, | |||||
| formConfigs: formConfigsData, | |||||
| ...remarkData | |||||
| } | |||||
| }, | |||||
| //检验 | |||||
| async validFields() { | |||||
| // 构建需要验证的引用数组 | |||||
| let refsToValidate = ["baseInfoRef", "remarkRef"]; | |||||
| if (this.formData.formConfigs && this.formData.formConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.formConfigs.length; i++) { | |||||
| refsToValidate.push(`formConfigStepFormPackageRef_${i}`); | |||||
| refsToValidate.push(`formStepRef_${i}`); | |||||
| } | |||||
| } | |||||
| return await this.validFormFields(refsToValidate); | |||||
| }, | |||||
| //获取字段值 | |||||
| async getFormData() { | |||||
| //先校验再获取值 | |||||
| const validFlag = await this.validFields(); | |||||
| if (!validFlag) { | |||||
| return false; | |||||
| } | |||||
| let content = this.getFilledFormData(); | |||||
| return content; | |||||
| }, | |||||
| //获取生成,使用物资 | |||||
| getResource() { | |||||
| let content = this.getFilledFormData(); | |||||
| //生成resource | |||||
| let tmpResource = [] | |||||
| if (this.fillType === "actFill") { | |||||
| let tableList = content.formConfigs | |||||
| if (tableList && tableList.length > 0) { | |||||
| for (let i = 0; i < tableList.length; i++) { | |||||
| let item = tableList[i] | |||||
| tmpResource.push({ | |||||
| mc: item.targetName, | |||||
| bh: item.targetCode + item.targetCodeSn, | |||||
| ph: '', | |||||
| ndz: item.targetActConcentration + item.targetActConcentrationUnit, | |||||
| nd: item.targetActConcentration, | |||||
| nddw: item.targetActConcentrationUnit, | |||||
| ly: 'ELN配制', | |||||
| sxrq: item.expireDate, | |||||
| kc: item.targetActVolume, | |||||
| kcdw: item.targetActVolumeUnit, | |||||
| syl: null, | |||||
| type: null, | |||||
| elnType: this.product, | |||||
| syldw: item.targetActVolumeUnit, | |||||
| yxzq: item.effectivePeriod, | |||||
| yxzqdw: item.effectivePeriodUnit, | |||||
| }) | |||||
| } | |||||
| } | |||||
| } | |||||
| //使用的试剂、仪器 | |||||
| const stepResource = this.getStepResource() | |||||
| this.resourceTmp = uniqeResource(tmpResource, stepResource.sjResource || []) | |||||
| this.yqResourceTmp = stepResource.yqResource || [] | |||||
| debugger | |||||
| return this.resourceTmp; | |||||
| }, | |||||
| //获取步骤使用物资 | |||||
| getStepResource() { | |||||
| const sjResource = [], yqResource = []; | |||||
| if (this.formData.formConfigs && this.formData.formConfigs.length > 0) { | |||||
| for (let i = 0; i < this.formData.formConfigs.length; i++) { | |||||
| const paralleResource = this.$refs[`formStepRef_${i}`][0].getStepResource(); | |||||
| sjResource.push(...paralleResource.sjResource); | |||||
| yqResource.push(...paralleResource.yqResource); | |||||
| } | |||||
| } | |||||
| //去重 | |||||
| const { sj, yq } = duplicateResource(sjResource, yqResource) | |||||
| return { sjResource: sj, yqResource: yq }; | |||||
| }, | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style rel="stylesheet/scss" lang="scss"> | |||||
| .mt-20 { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .print-btn { | |||||
| margin-bottom: 20px; | |||||
| } | |||||
| .config-header-right { | |||||
| margin-bottom: 15px; | |||||
| font-weight: bold; | |||||
| font-size: 16px; | |||||
| color: #303133; | |||||
| text-align: right; | |||||
| width: 100%; | |||||
| } | |||||
| </style> | |||||