| @ -0,0 +1,323 @@ | |||
| <!-- 生物样品分析方法学样品制备表(Recovery) --> | |||
| <template> | |||
| <div> | |||
| <div class="detail-container"> | |||
| <div class="detail-title"><img src="@/assets/images/detail-title.png">{{ formData.templateMc || | |||
| '生物样品分析方法学样品制备表(Recovery)' }}<img src="@/assets/images/detail-title.png" /></div> | |||
| <div class="detail-content"> | |||
| <div class="content"> | |||
| <BaseInfoFormPcakge 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.instrumentInfo" :columns="yqsColumns" | |||
| :dataSource="resource" /> | |||
| <BaseInfoFormPcakge fieldItemLabel="template.common.storageCondition" label="template.common.storageCondition" ref="storageConditionRef" | |||
| :formConfig="storageFormConfig" :formData="formData" /> | |||
| <LineLabel label="template.common.operationSteps" /> | |||
| <div class="template-form-item"> | |||
| <BaseInfoFormPcakge fieldItemLabel="template.common.operationSteps" ref="stepFormPackageRef" :formConfig="stepFormConfig" @blur="onHandleBlur" | |||
| :formData="formData" /> | |||
| <CustomTable | |||
| @blur="onHandleTableBlur" | |||
| :ref="`tableRef`" | |||
| :columns="tableStepColumns" | |||
| :formData="formData" | |||
| :prefixKey = "`table`" | |||
| @clickable="handleClickable" | |||
| fieldItemLabel = "这个是什么" | |||
| > | |||
| <template slot="operation" slot-scope="{ row, rowIndex}"> | |||
| <TableOpertaion | |||
| :fillType="fillType" | |||
| :row="row" | |||
| :rowIndex="rowIndex" | |||
| @deleteRow="(rowIndex) => deleteRow(rowIndex)" | |||
| ></TableOpertaion> | |||
| </template> | |||
| </CustomTable> | |||
| </div> | |||
| <Step ref="stepRef" :formData="formData.stepData"></Step> | |||
| <BaseInfoFormPcakge 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 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 { getLatestSn } from '@/api/template'; | |||
| import {getSWYPFXFFXYPZBBTableConfig} from "../../../formConfig/SWYPFXFFXYPZBBTableConfig.js"; | |||
| import TableOpertaion from "@/components/Template/operation/TableOpertaion.vue" | |||
| export default { | |||
| name: "SWYPFXRYPZB", | |||
| components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable,TableOpertaion }, | |||
| mixins: [templateMixin], | |||
| props: { | |||
| fillType: { | |||
| type: String, | |||
| default: 'preFill', | |||
| }, | |||
| }, | |||
| computed: { | |||
| storageFormConfig() { | |||
| return [ | |||
| { | |||
| type: "conditionItem", | |||
| config: { | |||
| storageCondition: { | |||
| label: 'template.common.storageConditionLabel', | |||
| type: "select", | |||
| fillType: "preFill", | |||
| options: this.getDictOptions("business_cctj"), | |||
| otherCode: "storageConditionOther", | |||
| }, | |||
| } | |||
| } | |||
| ]; | |||
| }, | |||
| 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: "input", | |||
| fillType: "actFill", | |||
| maxlength: 50 | |||
| }, | |||
| //处理批编号 | |||
| clpbg: { | |||
| label: 'template.common.clpbh', | |||
| type: "input", | |||
| fillType: "actFill", | |||
| 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, | |||
| options: this.getDictOptions('business_pztj') | |||
| } | |||
| } | |||
| }, | |||
| { | |||
| type: "cellItem", | |||
| label: 'template.common.rqcz', | |||
| config: { | |||
| rqcz: { | |||
| type: "input", | |||
| fillType: "actFill", | |||
| maxlength: 50 | |||
| }, | |||
| } | |||
| }, | |||
| { | |||
| type: "cellItem", | |||
| label: 'template.common.clsj', | |||
| config: { | |||
| startDate: { | |||
| label: 'template.common.startTime', | |||
| type: "input", | |||
| }, | |||
| endDate: { | |||
| label: 'template.common.endTime', | |||
| type: "input", | |||
| }, | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| stepFormConfig() { | |||
| return [ | |||
| { | |||
| type: "step", | |||
| config: { | |||
| jz: { | |||
| label: 'template.common.xzjz', | |||
| type: "input", | |||
| fillType: "preFill", | |||
| subType: "clickable", | |||
| subKey: "subSolution", | |||
| subFillType: "actFill", | |||
| maxlength: 20, | |||
| }, | |||
| } | |||
| } | |||
| ] | |||
| }, | |||
| tableStepColumns() { | |||
| return getSWYPFXFFXYPZBBTableConfig(this); | |||
| }, | |||
| }, | |||
| data() { | |||
| return { | |||
| resource: [], | |||
| resourceData1: [], | |||
| sysjColumns: [ | |||
| { label: 'template.common.reagentName', prop: "mc" },//名称 | |||
| { label: 'template.common.reagentCode', prop: "bh" },//编号 | |||
| { label: 'template.common.reagentNo', prop: "ph" },//批号 试剂,供试品才有 | |||
| { label: 'template.common.concentration', prop: "nd" },//浓度 | |||
| { label: 'template.common.source', prop: "source" },//来源 | |||
| { label: 'template.common.reagentExpireDate', prop: "sxrq" },//失效日期 | |||
| ], | |||
| yqsColumns: [ | |||
| { label: 'template.common.instrumentName', prop: "instrumentName" }, | |||
| { label: 'template.common.instrumentModel', prop: "instrumentModel" }, | |||
| { label: 'template.common.instrumentCode', prop: "instrumentCode" }, | |||
| { label: 'template.common.nextTestDate', prop: "nextTestDate" }, | |||
| ], | |||
| formData: {} | |||
| }; | |||
| }, | |||
| mounted() { | |||
| }, | |||
| watch: { | |||
| formData: { | |||
| immediate: true, | |||
| handler(v) { | |||
| if(!v.targetCodeSn && this.fillType === "actFill"){ | |||
| this.getCode(); | |||
| } | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| //点击表格单元格 | |||
| handleClickable(col, rowIndex) { | |||
| console.log("clickable",rowIndex, col) | |||
| if(col.prop === "sjry"){ | |||
| //调用对应弹窗的方法; | |||
| } | |||
| this.$refs.tableRef.updateDataSourceByRowIndex(rowIndex,{ | |||
| sjry: "我是填充进来的数据", | |||
| }) | |||
| }, | |||
| //获取目标溶液编号 | |||
| async getCode(){ | |||
| const result = await getLatestSn({ | |||
| count: 1, | |||
| }) | |||
| if(result.code == 200){ | |||
| this.$refs.stepFormPackageRef.updateFormData("targetCodeSn",result.data) | |||
| } | |||
| }, | |||
| //获取已填写的表单数据 | |||
| getFilledFormData(){ | |||
| return this.getFilledFormDataByRefs(["baseInfoRef", "storageConditionRef", "stepFormPackageRef", "tableRef","stepRef", "remarkRef"]) | |||
| }, | |||
| async getFormData() { | |||
| let content = await this.validFormFields(["baseInfoRef", "storageConditionRef", "stepFormPackageRef","tableRef" ,"stepRef", "remarkRef"]); | |||
| //生成resource | |||
| let tmpResource = [] | |||
| debugger | |||
| //配置的试剂 | |||
| tmpResource.push({ | |||
| mc: content.targetName, | |||
| bh: content.targetCode+content.targetCodeSn, | |||
| ph: '', | |||
| nd: content.targetActConcentration + content.targetActConcentrationUnit, | |||
| source: 'ELN配制', | |||
| sxrq: content.expireDate, | |||
| ndz: content.targetActConcentration, | |||
| nddw: content.targetActConcentrationUnit, | |||
| kc: content.targetActVolume, | |||
| kcdw: content.targetActVolumeUnit, | |||
| syl: null, | |||
| syldw:content.targetActVolumeUnit, | |||
| yxzq:content.effectivePeriod, | |||
| yxzqdw:content.effectivePeriodUnit, | |||
| }) | |||
| //使用的试剂 | |||
| this.resource=tmpResource | |||
| return content; | |||
| }, | |||
| async onSave() { | |||
| const formData = await this.getFilledFormData(); | |||
| console.log(formData, "formData") | |||
| }, | |||
| // 删除表格行 | |||
| deleteRow(rowIndex) { | |||
| const tableRef = this.$refs['tableRef']; | |||
| if (tableRef) { | |||
| tableRef.deleteRow(rowIndex); | |||
| } | |||
| }, | |||
| } | |||
| }; | |||
| </script> | |||
| <style rel="stylesheet/scss" lang="scss"> | |||
| .mt-20 { | |||
| margin-top: 20px; | |||
| } | |||
| </style> | |||