| @ -0,0 +1,240 @@ | |||||
| <!-- 试验物质配制计划表 --> | |||||
| <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" /> | |||||
| <LineLabel label="计划信息" /> | |||||
| <div class="template-form-item"> | |||||
| <BaseInfoFormPcakge ref="stepFormPackageRef" :formConfig="stepFormConfig" @blur="onHandleBlur" | |||||
| :formData="formData" /> | |||||
| <CustomTable @blur="onHandleTableBlur" :showHeaderSelect="fillType === 'actFill'" :showOperation="fillType === 'actFill'" ref="stepTableRef" :columns="stepColumns" | |||||
| :formData="formData" > | |||||
| <template slot="operation" slot-scope="{ row, rowIndex}"> | |||||
| <TableOpertaion :fillType="fillType" :row="row" :rowIndex="rowIndex" @deleteRow="deleteRow"></TableOpertaion> | |||||
| </template> | |||||
| </CustomTable> | |||||
| <div class="add-row"> | |||||
| <el-button type="primary" plain @click="addRow">添加行</el-button> | |||||
| </div> | |||||
| </div> | |||||
| <BaseInfoFormPcakge label="特别说明" ref="remarkRef" :formConfig="remarkConig" :formData="formData" /> | |||||
| </div> | |||||
| </div> | |||||
| <button @click="onSave">保存</button> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"; | |||||
| import LineLabel from "@/components/Template/LineLabel"; | |||||
| import templateMixin from "../../mixins/templateMixin"; | |||||
| import CustomTable from '@/components/Template/CustomTable.vue'; | |||||
| import TableOpertaion from "@/components/Template/operation/TableOpertaion.vue" | |||||
| export default { | |||||
| name: "MJYLQSQD", | |||||
| components: { BaseInfoFormPcakge, LineLabel, CustomTable, TableOpertaion }, | |||||
| mixins: [templateMixin], | |||||
| props: { | |||||
| value: { | |||||
| type: {}, | |||||
| default: () => { }, | |||||
| }, | |||||
| fillType: { | |||||
| type: String, | |||||
| default: 'preFill', | |||||
| }, | |||||
| }, | |||||
| watch: { | |||||
| value: { | |||||
| immediate: true, | |||||
| handler(v) { | |||||
| } | |||||
| }, | |||||
| fillType: { | |||||
| immediate: true, | |||||
| handler(v) { | |||||
| console.log(v,"fillType") | |||||
| } | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| // 备注表单配置 | |||||
| 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, | |||||
| }, | |||||
| } | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| // 操作步骤表单配置 | |||||
| stepFormConfig() { | |||||
| return [ | |||||
| { | |||||
| type: "step", | |||||
| config: { | |||||
| drawTime: { | |||||
| label: "领取时间", | |||||
| type: "dateTime", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| analyzeTime: { | |||||
| label: "分析时间", | |||||
| type: "dateTime", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| testSubstance: { | |||||
| label: "试验物质", | |||||
| type: "input", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| configFrequency: { | |||||
| label: "配置频率", | |||||
| type: "input", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 步骤表格列配置 | |||||
| stepColumns() { | |||||
| return [ | |||||
| { | |||||
| label: "给药剂量或组别", | |||||
| prop: "startSolutionCode", | |||||
| width: 280, | |||||
| bodyType: "input", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "配制浓度", | |||||
| prop: "preparationConcentration", | |||||
| width: 280, | |||||
| headerSelectKey: "preparationConcentrationUnit", | |||||
| fillType: "actFill", | |||||
| headerOptions: this.$store.state.template.volumeOptions, | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "配制体积", | |||||
| prop: "preparationVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "preparationVolumeUnit", | |||||
| fillType: "actFill", | |||||
| headerOptions: this.$store.state.template.volumeOptions, | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| selectReagentVisible: false, | |||||
| subSolutionVisible: false, | |||||
| currentSubKey: "",//当前点击的子项key | |||||
| dataSource: [], | |||||
| stepTableDataSource: [], | |||||
| }; | |||||
| }, | |||||
| mounted() { | |||||
| this.formData = { | |||||
| headerSelectFields: { | |||||
| preparationVolumeUnit: "ml", | |||||
| preparationConcentrationUnit: "ul", | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| async getFormData() { | |||||
| const baseData = await this.$refs.baseInfoRef.getFormData(); | |||||
| const stepFormData = await this.$refs.stepFormPackageRef.getFormData(); | |||||
| const stepTableFormData = await this.$refs.stepTableRef.getFormData(); | |||||
| const remarkData = await this.$refs.remarkRef.getFormData(); | |||||
| if(!stepTableFormData.stepTableFormData.length){ | |||||
| this.$message.error("请添加计划信息"); | |||||
| return; | |||||
| } | |||||
| return { | |||||
| ...baseData, | |||||
| ...stepFormData, | |||||
| ...remarkData, | |||||
| ...stepTableFormData | |||||
| } | |||||
| }, | |||||
| async onSave() { | |||||
| const formData = await this.getFormData(); | |||||
| // const formData = await this.$refs.stepTableRef.getFormData(); | |||||
| console.log(formData, "formData") | |||||
| }, | |||||
| // 添加行 | |||||
| addRow() { | |||||
| this.$refs.stepTableRef.addRow({ | |||||
| startSolutionCode: "", | |||||
| preparationConcentration: "", | |||||
| preparationVolume: "", | |||||
| }) | |||||
| } | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style rel="stylesheet/scss" lang="scss"> | |||||
| .mt-20 { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .add-row{ | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| padding: 20px 0; | |||||
| } | |||||
| </style> | |||||
| @ -0,0 +1,240 @@ | |||||
| <!-- 试验物质配制计划表 --> | |||||
| <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" /> | |||||
| <LineLabel label="计划信息" /> | |||||
| <div class="template-form-item"> | |||||
| <BaseInfoFormPcakge ref="stepFormPackageRef" :formConfig="stepFormConfig" @blur="onHandleBlur" | |||||
| :formData="formData" /> | |||||
| <CustomTable @blur="onHandleTableBlur" :showHeaderSelect="fillType === 'actFill'" :showOperation="fillType === 'actFill'" ref="stepTableRef" :columns="stepColumns" | |||||
| :formData="formData" > | |||||
| <template slot="operation" slot-scope="{ row, rowIndex}"> | |||||
| <TableOpertaion :fillType="fillType" :row="row" :rowIndex="rowIndex" @deleteRow="deleteRow"></TableOpertaion> | |||||
| </template> | |||||
| </CustomTable> | |||||
| <div class="add-row"> | |||||
| <el-button type="primary" plain @click="addRow">添加行</el-button> | |||||
| </div> | |||||
| </div> | |||||
| <BaseInfoFormPcakge label="特别说明" ref="remarkRef" :formConfig="remarkConig" :formData="formData" /> | |||||
| </div> | |||||
| </div> | |||||
| <button @click="onSave">保存</button> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"; | |||||
| import LineLabel from "@/components/Template/LineLabel"; | |||||
| import templateMixin from "../../mixins/templateMixin"; | |||||
| import CustomTable from '@/components/Template/CustomTable.vue'; | |||||
| import TableOpertaion from "@/components/Template/operation/TableOpertaion.vue" | |||||
| export default { | |||||
| name: "SYWZPZJHB", | |||||
| components: { BaseInfoFormPcakge, LineLabel, CustomTable, TableOpertaion }, | |||||
| mixins: [templateMixin], | |||||
| props: { | |||||
| value: { | |||||
| type: {}, | |||||
| default: () => { }, | |||||
| }, | |||||
| fillType: { | |||||
| type: String, | |||||
| default: 'preFill', | |||||
| }, | |||||
| }, | |||||
| watch: { | |||||
| value: { | |||||
| immediate: true, | |||||
| handler(v) { | |||||
| } | |||||
| }, | |||||
| fillType: { | |||||
| immediate: true, | |||||
| handler(v) { | |||||
| console.log(v,"fillType") | |||||
| } | |||||
| }, | |||||
| }, | |||||
| computed: { | |||||
| // 备注表单配置 | |||||
| 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, | |||||
| }, | |||||
| } | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| // 操作步骤表单配置 | |||||
| stepFormConfig() { | |||||
| return [ | |||||
| { | |||||
| type: "step", | |||||
| config: { | |||||
| drawTime: { | |||||
| label: "领取时间", | |||||
| type: "dateTime", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| analyzeTime: { | |||||
| label: "分析时间", | |||||
| type: "dateTime", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| testSubstance: { | |||||
| label: "试验物质", | |||||
| type: "input", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| configFrequency: { | |||||
| label: "配置频率", | |||||
| type: "input", | |||||
| fillType: "actFill", | |||||
| }, | |||||
| } | |||||
| } | |||||
| ] | |||||
| }, | |||||
| // 步骤表格列配置 | |||||
| stepColumns() { | |||||
| return [ | |||||
| { | |||||
| label: "给药剂量或组别", | |||||
| prop: "startSolutionCode", | |||||
| width: 280, | |||||
| bodyType: "input", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "配制浓度", | |||||
| prop: "preparationConcentration", | |||||
| width: 280, | |||||
| headerSelectKey: "preparationConcentrationUnit", | |||||
| fillType: "actFill", | |||||
| headerOptions: this.$store.state.template.volumeOptions, | |||||
| defaultValue: "mg", | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| { | |||||
| label: "配制体积", | |||||
| prop: "preparationVolume", | |||||
| width: 280, | |||||
| headerSelectKey: "preparationVolumeUnit", | |||||
| fillType: "actFill", | |||||
| headerOptions: this.$store.state.template.volumeOptions, | |||||
| bodyType: "inputNumber", | |||||
| bodyFillType: "actFill", | |||||
| bodyMaxlength: 10, | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| selectReagentVisible: false, | |||||
| subSolutionVisible: false, | |||||
| currentSubKey: "",//当前点击的子项key | |||||
| dataSource: [], | |||||
| stepTableDataSource: [], | |||||
| }; | |||||
| }, | |||||
| mounted() { | |||||
| this.formData = { | |||||
| headerSelectFields: { | |||||
| preparationVolumeUnit: "ml", | |||||
| preparationConcentrationUnit: "ul", | |||||
| } | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| async getFormData() { | |||||
| const baseData = await this.$refs.baseInfoRef.getFormData(); | |||||
| const stepFormData = await this.$refs.stepFormPackageRef.getFormData(); | |||||
| const stepTableFormData = await this.$refs.stepTableRef.getFormData(); | |||||
| const remarkData = await this.$refs.remarkRef.getFormData(); | |||||
| if(!stepTableFormData.stepTableFormData.length){ | |||||
| this.$message.error("请添加计划信息"); | |||||
| return; | |||||
| } | |||||
| return { | |||||
| ...baseData, | |||||
| ...stepFormData, | |||||
| ...remarkData, | |||||
| ...stepTableFormData | |||||
| } | |||||
| }, | |||||
| async onSave() { | |||||
| const formData = await this.getFormData(); | |||||
| // const formData = await this.$refs.stepTableRef.getFormData(); | |||||
| console.log(formData, "formData") | |||||
| }, | |||||
| // 添加行 | |||||
| addRow() { | |||||
| this.$refs.stepTableRef.addRow({ | |||||
| startSolutionCode: "", | |||||
| preparationConcentration: "", | |||||
| preparationVolume: "", | |||||
| }) | |||||
| } | |||||
| } | |||||
| }; | |||||
| </script> | |||||
| <style rel="stylesheet/scss" lang="scss"> | |||||
| .mt-20 { | |||||
| margin-top: 20px; | |||||
| } | |||||
| .add-row{ | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| padding: 20px 0; | |||||
| } | |||||
| </style> | |||||