feat:[模板管理][组件抽离ing]

src/api/template/index.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//获取试剂列表
+export const getReagentList = (params) => {
+  return request({
+    url: '/api/business/sj/sj_list',
+    method: 'get',
+    params
+  })
+}

src/components/Template/BaseInfoFormPcakge.vue

@@ -94,7 +94,7 @@
                             <HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]" 
                             @copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" />
                             <div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div>
-                            <div class="clickable" :class="getFillType(sItem.subFillType)" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem)">
+                            <div class="clickable" :class="getFillType(sItem.subFillType)" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem,$event)">
                                 <span v-if="formFields[sItem.subKey]">{{ formFields[sItem.subKey] }}</span>
                                 <span v-else class="default-placeholder-text">请选择</span>
                             </div>
@@ -105,7 +105,7 @@
                             <HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]" 
                             @copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" />
                             <div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div>
-                            <div class="clickable" :class="getFillType(sItem.subFillType)" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem)">
+                            <div class="clickable" :class="getFillType(sItem.subFillType)" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem,$event)">
                                 <span v-if="formFields[sItem.subKey]">{{ formFields[sItem.subKey] }}</span>
                                 <span v-else class="default-placeholder-text">请选择</span>
                             </div>
@@ -191,8 +191,7 @@ export default {
                 this.formFields[key] = data[key];
             })
         },
-        handleClickable(sItem){
-            console.log(sItem)
+        handleClickable(sItem,event){
             this.$emit("clickable",sItem)
         },
         //根据span判断一行显示几列

src/components/Template/HandleFormItem.vue

@@ -118,10 +118,8 @@ export default {
             const { item } = this;
             const { fillType } = item;
             if (item.hasOwnProperty("disabled")) {
-                console.log(item,item.disabled,"item.disabled")
                 return item.disabled
             } else {
-                console.log(item,"else")
                 const { templateStatus } = this.$store.state.template;
                 if (fillType === "actFill") {//当模板状态是实际填写时，只有当fillType是actFill时才能填写
                     return templateStatus !== "actFill"

src/components/Template/SelectTable.vue

@@ -0,0 +1,173 @@
+<template>
+    <div>
+        <div >
+            <el-form :inline="true"  class="demo-form-inline">
+                <el-form-item v-for="(item,key) in searchForm" :key="key" :label="item.label">
+                    <el-select v-if="item.type === 'select'" v-model="listParams[key]" placeholder="请选择">
+                        <el-option v-for="(opt) in item.options" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
+                    </el-select>
+                    <el-input v-else v-model="listParams[key]" placeholder="请输入"></el-input>
+                  
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="onSearch">查询</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table :data="dataSource" :row-key="(row) => row.id">
+                <el-table-column width="80" align="center" v-if="showRadio">
+                    <template slot-scope="scope">
+                        <el-radio v-model="localSelectedId" :label="scope.row[selectedCode]" class="hide-label"  @input.native.stop="handleRadioClick(scope.row)"></el-radio>
+                    </template>
+                </el-table-column>
+                <el-table-column v-for="(item) in columns" :prop="item.prop" :key="item.prop" :label="item.label">
+                </el-table-column>
+            </el-table>
+            <div class="mt-10">
+                <el-pagination
+                    :page-limit.sync="pagination.pageSize"
+                    :current-page.sync="pagination.pageNum"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="pagination.total"
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        //[{label:"名称",prop:"name"}]
+        searchForm: {
+            type: Object,
+            default: () => {},
+        },
+        showRadio: {//是否显示单选框
+            type: Boolean,
+            default: true,
+        },
+        columns: {
+            type: Array,
+            default: [],
+        },
+        
+        selectedId: {
+            type: String,
+            default: "",
+        },
+        selectedCode: {
+            type: String,
+            default: "code",//radio选中的值的字段
+        },
+        listApi:{
+            type: Function,
+            default: () => {},
+        }
+    },
+    data() {
+        return {
+            localSelectedId: "",
+            listParams: {
+                pageNum: 1,
+                pageSize: 10,
+            },
+            pagination: {
+                pageNum: 1,
+                pageSize: 10,
+                total: 0,
+            },
+            dataSource: [
+                {
+                    id: 1,
+                    name: '试剂1',
+                    code: 'R001',
+                    vol: '100',
+                    unit: 'mg/mL',
+                    expireDate: '2023-12-31',
+                    ss: '试验1',
+                },
+                {
+                    id: 2,
+                    name: '试剂2',
+                    code: 'R002',
+                    vol: '200',
+                    unit: 'mg/mL',
+                    expireDate: '2024-06-30',
+                    ss: '试验2',
+                },
+                {
+                    id: 3,
+                    name: '试剂2',
+                    code: 'R002',
+                    vol: '200',
+                    unit: 'mg/mL',
+                    expireDate: '2024-06-30',
+                    ss: '试验2',
+                },
+            ]
+        }
+    },
+    watch: {
+        selectedId: {
+            immediate: true,
+            handler(newVal, oldVal) {
+                this.localSelectedId = newVal;
+            },
+        },
+    },
+    mounted() {
+        this.getList();
+        this.initSearchForm();
+    },
+    methods: {
+        //初始化查询表单
+        initSearchForm() {
+            for(let key in this.searchForm) {
+                this.listParams[key] = "";
+            }
+            this.listParams = {...this.listParams}
+        },
+        async getList() {
+            const res = await this.listApi(this.listParams);
+            this.dataSource = res.rows;
+            this.pagination = {
+                pageNum: this.listParams.pageNum,
+                pageSize: this.listParams.pageSize,
+                total: res.total,
+            };
+        },
+        //查询
+        onSearch() {
+            this.pagination.pageNum = 1;
+            this.getList();
+        },  
+        //分页大小切换
+        handleSizeChange(e) {
+            this.$emit("pagination", {pageSize: e});
+            this.listParams.pageSize = e;
+            this.getList();
+        },
+        //分页切换
+        handleCurrentChange(e) {
+            this.$emit("pagination", {pageNum: e});
+            this.listParams.pageNum = e;
+            this.getList();
+        },
+        //单选框点击
+        handleRadioClick(row) {
+            this.localSelectedId = row[this.selectedCode];
+            this.$emit("radioSelect", row[this.selectedCode],row);
+        },
+    }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.mt-10 {
+    margin-top: 10px;
+}
+</style>

src/views/business/comps/template/comps/sp/SWYPBQGZYZBB.vue

@@ -14,18 +14,23 @@
 						:formData="formData" />
 					<LineLabel label="操作步骤" />
 					<div class="template-form-item">
-						<BaseInfoFormPcakge ref="stepFormPackageRef" :formConfig="stepFormConfig"
-							@blur = "onHandleBlur"
+						<BaseInfoFormPcakge @clickable="handleClickable" ref="stepFormPackageRef" :formConfig="stepFormConfig" @blur="onHandleBlur"
+							:formData="formData" />
+						<CustomTable  ref="stepTable" :columns="stepColumns"
 							:formData="formData" />
-						<CustomTable ref = "stepTable" :columns = "stepColumns" :formData = "formData"/>
 					</div>
 					<Step ref="stepRef" :formData="formData"></Step>
 					<BaseInfoFormPcakge label="备注" ref="remarkRef" :formConfig="remarkConig" :formData="formData" />
 
 				</div>
 			</div>
-			<button @click = "onSave">保存</button>
+			<button @click="onSave">保存</button>
 		</div>
+		<SelectReagentDialog 
+		@submit="onSelectReagentSubmit"
+		@cancel="selectReagentVisible=false"
+		ref="selectReagentDialogRef" :visible.sync="selectReagentVisible" >
+		</SelectReagentDialog>
 	</div>
 </template>
 
@@ -36,10 +41,11 @@ 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 SelectReagentDialog from '../../dialog/SelectReagentDialog.vue';
 
 export default {
 	name: "SWYPBQGZYZBB",
-	components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable },
+	components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable, SelectReagentDialog },	
 	mixins: [templateMixin],
 	props: {
 		value: {
@@ -244,54 +250,57 @@ export default {
 			]
 		},
 		// 步骤表格列配置
-		stepColumns(){
+		stepColumns() {
 			return [
 				{
-					label:"目标溶液编号",
-					prop:"targetSolutionCode",
-					bodyType:"input",
-					subType:"span",
-					subKey:"subTargetSolutionCode",
-					bodyFillType:"preFill",
+					label: "目标溶液编号",
+					prop: "targetSolutionCode",
+					bodyType: "input",
+					subType: "span",
+					subKey: "subTargetSolutionCode",
+					bodyFillType: "preFill",
 					width: 280
 				},
 				{
-					label:"起始溶液编号",prop:"startSolutionCode",
+					label: "起始溶液编号", prop: "startSolutionCode",
 					width: 280,
-					bodyType:"input",
-					bodyFillType:"actFill",
-					bodyMaxlength:10,
+					bodyType: "input",
+					bodyFillType: "actFill",
+					bodyMaxlength: 10,
 				},
 				{
-					label:"预设起始溶液体积",prop:"targetStartSolutionVolume",
+					label: "预设起始溶液体积", prop: "targetStartSolutionVolume",
 					width: 280,
-					headerSelectKey:"targetStartSolutionVolumeUnit",
-					fillType:"preFill",
-					headerOptions:this.$store.state.template.volumeOptions,
-					defaultValue:"mg",
-					bodyType:"inputNumber",
-					bodySubType:"inputNumber",
-					bodySubKey:"subTargetStartSolutionPrecision",
-					bodyFillType:"preFill",
-					bodySubFillType:"preFill",
-					showBodySub:this.fillType === "preFill",
+					headerSelectKey: "targetStartSolutionVolumeUnit",
+					fillType: "preFill",
+					headerOptions: this.$store.state.template.volumeOptions,
+					defaultValue: "mg",
+					bodyType: "inputNumber",
+					bodySubType: "inputNumber",
+					bodySubKey: "subTargetStartSolutionPrecision",
+					bodyFillType: "preFill",
+					bodySubFillType: "preFill",
+					showBodySub: this.fillType === "preFill",
 					bodyDisabled: true,
-					bodyPrecisionKey:"subTargetStartSolutionPrecision",
+					bodyPrecisionKey: "subTargetStartSolutionPrecision",
 				},
 				{
-					label:"实际起始溶液体积",prop:"actStartSolutionVolume",
+					label: "实际起始溶液体积", prop: "actStartSolutionVolume",
 					width: 280,
-					headerSelectKey:"actStartSolutionVolumeUnit",
-					fillType:"preFill",
-					headerOptions:this.$store.state.template.volumeOptions,
-					bodyType:"inputNumber",
-					bodyFillType:"actFill",
+					headerSelectKey: "actStartSolutionVolumeUnit",
+					fillType: "preFill",
+					headerOptions: this.$store.state.template.volumeOptions,
+					bodyType: "inputNumber",
+					bodyFillType: "actFill",
 				},
 			]
 		},
 	},
 	data() {
 		return {
+			selectReagentVisible: false,
+			subSolutionVisible: false,
+			currentSubKey: "",//当前点击的子项key
 			dataSource: [],
 			stepTableDataSource: [],
 			sysjColumns: [
@@ -316,9 +325,9 @@ export default {
 			this.formData = {
 				effectivePeriodUnit: "days",//设置默认值
 				createTime: "2026-01-02 18:05:36",//设置默认值
-				stepTableFormData:[
-					{actStartSolutionVolume:1,subActStartSolutionVolume:"ul",subTargetStartSolutionPrecision:3},
-					{targetStartSolutionVolume:3,subTargetStartSolutionVolume:"mg",subTargetStartSolutionPrecision:2},
+				stepTableFormData: [
+					{ actStartSolutionVolume: 1, subActStartSolutionVolume: "ul", subTargetStartSolutionPrecision: 3 },
+					{ targetStartSolutionVolume: 3, subTargetStartSolutionVolume: "mg", subTargetStartSolutionPrecision: 2 },
 				],
 				headerSelectFields: {
 					targetStartSolutionVolumeUnit: "mg",
@@ -328,6 +337,23 @@ export default {
 		}
 	},
 	methods: {
+		handleClickable(item) {
+			if(this.fillType === "preFill"){
+				// return;
+			}
+			const {subKey = ""} = item;
+			if(subKey === "subStartSolution" || subKey === "subSolution"){//起始源溶液点击事件
+				this.selectReagentVisible = true;
+				this.currentSubKey = subKey;
+			}
+		},
+		//选择试剂提交事件
+		onSelectReagentSubmit(code){
+			this.formData[this.currentSubKey] = code;
+			this.$set(this.formData, this.currentSubKey, code);
+			this.formData = {...this.formData}
+			this.selectReagentVisible = false;
+		},
 		async getFormData() {
 			const baseData = await this.$refs.baseInfoRef.getFormData();
 			const conditionData = await this.$refs.storageConditionRef.getFormData();

src/views/business/comps/template/dialog/SelectReagentDialog.vue

@@ -0,0 +1,86 @@
+<template>
+    <el-dialog title="选择试剂" @close="onCancel" :visible.sync="visible" append-to-body>
+        <SelectTable :columns="columns"  
+            :selectedId="selectedId"
+            :searchForm="searchForm"
+            :listApi="listApi"
+            @radioSelect="handleSelect"/>
+        <template slot="footer" class="dialog-footer">
+            <el-button @click="onCancel">取消</el-button>
+            <el-button :disabled="!selectedId" type="primary" @click="onSubmit">确定</el-button>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import SelectTable from '@/components/Template/SelectTable.vue';
+import { getReagentList } from '@/api/template';
+
+export default {
+    components: {
+        SelectTable,
+    },
+    props: {
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            listApi: getReagentList,
+            searchForm: {
+                name: {
+                    label:"试剂名称",
+                },
+                code: {
+                    label:"试剂编号",
+                },
+                vol: {
+                    label:"所属试验",
+                },
+            },
+            columns: [
+                {
+                    prop: 'name',
+                    label: '试剂名称',
+                },
+                {
+                    prop: 'code',
+                    label: '试剂编号',
+                },
+                {
+                    prop: 'vol',
+                    label: '试剂浓度',
+                },
+                {
+                    prop: 'unit',
+                    label: '浓度单位',
+                },
+                {
+                    prop: 'expireDate',
+                    label: '失效日',
+                },
+                {
+                    prop: 'ss',
+                    label: '所属试验',
+                },
+            ],
+            selectedId: "",
+        }
+    },
+    methods: {
+        onCancel() {
+            this.$emit('cancel');
+        },
+        onSubmit() {
+            this.$emit('submit', this.selectedId);
+        },
+        handleSelect(code,row) {
+            this.selectedId = code;
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/business/comps/template/mixins/templateMixin.js

@@ -65,8 +65,9 @@ export default {
 			}else if(key === "codeSTD"){//起始编号STD失焦时，更新stepDataSource
         const arr = Array.from({length:codeSTD},(item,index) => ({
          subTargetStartSolutionPrecision:3,//小数点精度默认为3
+         targetSolutionCode:`STD${Number(codeSTD)-index}`
         }));
-        this.stepTableDataSource = arr;
+        this.$refs.stepTable.updateDataSource(arr);
       }
 		}