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

src/components/Template/BaseInfoFormPcakge.vue

@@ -94,7 +94,10 @@
                             <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)">{{ formFields[sItem.subKey] }}</div>
+                            <div class="clickable" :class="getFillType(sItem.subFillType)" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem)">
+                                <span v-if="formFields[sItem.subKey]">{{ formFields[sItem.subKey] }}</span>
+                                <span v-else class="default-placeholder-text">请选择</span>
+                            </div>
                         </div>
                         <div v-else-if="sItem.type === 'inputNumber'" class="flex flex1">
                             <HandleFormItem type = "inputNumber" @blur="onBlur(key, $event)" class="flex1" :item="sItem" @input = "onInputNumberChange(key, $event)" :value = "formFields[key]" 
@@ -102,7 +105,10 @@
                             <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)">{{ formFields[sItem.subKey] }}</div>
+                            <div class="clickable" :class="getFillType(sItem.subFillType)" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem)">
+                                <span v-if="formFields[sItem.subKey]">{{ formFields[sItem.subKey] }}</span>
+                                <span v-else class="default-placeholder-text">请选择</span>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -374,6 +380,9 @@ export default {
         padding-right: 20px;
     }
 }
+.default-placeholder-text{
+    color: #C0C4CC;
+}
 .form-title {
     margin-bottom: 12px;
     font-size: 14px;
@@ -428,6 +437,9 @@ export default {
     height: 28px;
     border-radius: 4px;
     border:1px solid #4ea2ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .orange-border {

src/components/Template/CustomTable.vue

@@ -7,7 +7,7 @@
           <div class="header-cell-content">
             <div>{{ col.label }}</div>
             <template v-if="col.headerSelectKey && col.headerOptions">
-              <HandleFormItem type="select" class="header-select" :item="getHeaderItem(col)"
+              <HandleFormItem type="select" class="header-select"  :item="getHeaderItem(col)"
                 v-model="headerSelectFields[col.headerSelectKey]" @change="onHeaderSelectChange(index, $event)" />
             </template>
           </div>
@@ -29,29 +29,24 @@
           <div class="inner-table-cell">
             <div>
               <template v-if="col.bodyType === 'input'">
-                <HandleFormItem type="input" class="body-input" :item="getBodyItem(col)" v-model="row[col.prop]" @change="onBodyValueChange(rowIndex, colIndex, $event)" />
+                <HandleFormItem type="input" class="body-input" :item="getBodyItem(col,rowIndex)" v-model="row[col.prop]" @change="onBodyValueChange(rowIndex, colIndex, $event)" />
               </template>
               <template v-else-if="col.bodyType === 'inputNumber'">
-                <HandleFormItem type="inputNumber" class="body-input-number" :item="getBodyItem(col)"
+                <HandleFormItem type="inputNumber" class="body-input-number" :item="getBodyItem(col,rowIndex)"
                   v-model="row[col.prop]" @change="onBodyValueChange(rowIndex, colIndex, $event)" />
               </template>
               <template v-else-if="col.bodyType === 'select'">
-                <HandleFormItem type="select" class="body-select" :item="getBodyItem(col)" v-model="row[col.prop]" @change="onBodyValueChange(rowIndex, colIndex, $event)" />
+                <HandleFormItem type="select" class="body-select" :item="getBodyItem(col,rowIndex)" v-model="row[col.prop]" @change="onBodyValueChange(rowIndex, colIndex, $event)" />
               </template>
               <template v-else>
                 {{ row[col.prop] }}
               </template>
             </div>
             <div class="m-l-5">
-              <template v-if="col.bodySubType === 'inputNumber'">
+              <template v-if="col.bodySubType === 'inputNumber' && col.showBodySub">
                 <HandleFormItem type="inputNumber" :item="getBodySubItem(col)"
                   v-model="row[col.bodySubKey]" @change="onBodySubValueChange(rowIndex, colIndex, $event)" />
               </template>
-              <!-- 预填才显示精度输入框 -->
-              <template v-else-if="col.bodySubType === 'precisionNumber'&& $store.state.template.templateStatus === 'preFill'">
-                <HandleFormItem type="inputNumber" class="sub-input-number" :item="getPrecisionNumberItem(col)"
-                  v-model="row[col.bodySubKey]" @change="onBodySubValueChange(rowIndex, colIndex, $event)" />
-              </template>
               <template v-else>
                 {{ row[col.bodySubKey] }}
               </template>
@@ -98,10 +93,15 @@ export default {
       //   { label: '状态', prop: 'status', type: 'select', options: [{value:1,label:'启用'},...], selected: null }
       // ]
     },
-    dataSource: {
-      type: Array,
-      required: true
-    }
+    formData: {
+      type: Object,
+      default:()=>{
+        return {
+          stepTableFormData: [],
+          headerSelectFields: {}
+        }
+      }
+    },
   },
   data() {
     return {
@@ -110,19 +110,18 @@ export default {
     }
   },
   watch: {
-    dataSource: {
+    formData:{
       immediate: true,
       handler(newData) {
-        this.localDataSource = JSON.parse(JSON.stringify(newData));
-        // 初始化表头选择器值
+        console.log(newData,"newData")
+        const {stepTableFormData = [], headerSelectFields = {}} = newData;
+        this.updateDataSource(stepTableFormData);
+        this.headerSelectFields = JSON.parse(JSON.stringify(headerSelectFields))
       }
     },
-    columns: {
-      immediate: true,
-      handler(newColumns) {
-        this.initHeaderSelectValues();
-      }
-    }
+  },
+  mounted() {
+    this.initHeaderSelectValues();
   },
   methods: {
     // 初始化表头选择器值
@@ -133,7 +132,6 @@ export default {
           headerSelectObj[col.headerSelectKey] = col.defaultValue || col.headerOptions[0].value || ""
         }
       });
-      console.log(headerSelectObj,"headerSelectObj")
       this.headerSelectFields = headerSelectObj;
     },
     // 获取最新数据
@@ -146,7 +144,7 @@ export default {
       return new Promise((resolve,reject)=>{
         if(validateResult.valid){
           resolve({
-            dataSource: [...this.localDataSource],
+            stepTableFormData: [...this.localDataSource],
             headerSelectFields: this.headerSelectFields,
           })
         }else{
@@ -238,33 +236,41 @@ export default {
         label: ""
       }
     },
-    getBodyItem(col) {
-      return {
+    getBodyItem(col,rowIndex) {
+      const currentItem = this.localDataSource[rowIndex];
+      const item =  {
         fillType: col.bodyFillType,
         options: col.bodyOptions,
-        maxLength: col.bodyMaxLength,
-        label: ""
+        maxlength: col.bodyMaxlength,
+        label: col.label,
+        precision: currentItem[col.bodyPrecisionKey] || col.precision || 0,
+      };
+      if(col.bodyDisabled){
+        item.disabled = col.bodyDisabled;
       }
+      return item
     },
     getBodySubItem(col) {
-      return {
+     const item = {
         fillType: col.bodySubFillType,
         options: col.bodySubOptions,
+        maxlength: col.bodySubMaxlength,
         label: "",
+        placeholder:col.bodySubPlaceholder||"请输入"
       }
-    },
-    getPrecisionNumberItem(col) {
-      return {
-        fillType: col.bodySubFillType,
-        options: col.bodySubOptions,
-        label: "",
-        placeholder:"请输入保留小数位数"
+      if(col.bodySubDisabled){
+        item.disabled = col.bodySubDisabled;
       }
     },
     // 删除行
     deleteRow(rowIndex) {
       this.localDataSource.splice(rowIndex, 1);
       this.$emit('row-delete', rowIndex);
+    },
+    // 更新数据方法，可在formData变更时调用，也可由父组件调用
+    updateDataSource(dataSource = []) {
+      // 深拷贝数据以避免直接修改原始数据
+      this.localDataSource = JSON.parse(JSON.stringify(dataSource || []));
     }
   }
 };

src/components/Template/DecimalInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-input v-model="internalValue" @input="handleInput" @blur="handleBlur" :placeholder="placeholder" type="text" />
+  <el-input v-model="internalValue" @input="handleInput" @blur="handleBlur" :placeholder="placeholder" :disabled="disabled" type="text" />
 </template>
 
 <script>
@@ -17,6 +17,10 @@ export default {
     placeholder: {
       type: String,
       default: '请输入'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/components/Template/HandleFormItem.vue

@@ -118,8 +118,10 @@ 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/views/business/comps/template/TemplateTable.vue

@@ -39,8 +39,7 @@ export default {
       if (!this.componentMap) {
         this.componentMap = {
           'SP001': 'SWYPFXRYPZB',
-          // 'SP002': 'SWYPFXCBYPZB',
-          'SP002': 'SWYPBQGZYZBB',
+          'SP002': 'SWYPFXCBYPZB',
           'SP003': 'SWYPBQGZYZBB',
           // 'SP001': 'Demo',
         }

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

@@ -75,7 +75,7 @@ export default {
 					width: 280,
 					bodyType:"input",
 					bodyFillType:"actFill",
-					bodyMaxLength:10,
+					bodyMaxlength:10,
 				},
 				{
 					label:"预设起始溶液体积",prop:"code3",

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

@@ -17,13 +17,14 @@
 						<BaseInfoFormPcakge ref="stepFormPackageRef" :formConfig="stepFormConfig"
 							@blur = "onHandleBlur"
 							: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>
 	</div>
 </template>
@@ -36,9 +37,8 @@ import Step from "@/components/Template/Step";
 import templateMixin from "../../mixins/templateMixin";
 import CustomTable from '@/components/Template/CustomTable.vue';
 
-
 export default {
-	name: "SWYPFXRYPZB",
+	name: "SWYPBQGZYZBB",
 	components: { BaseInfoFormPcakge, LineLabel, TableList, Step, CustomTable },
 	mixins: [templateMixin],
 	props: {
@@ -60,6 +60,7 @@ export default {
 		}
 	},
 	computed: {
+		// 存储条件表单配置
 		storageFormConfig() {
 			return [
 				{
@@ -77,6 +78,7 @@ export default {
 				}
 			];
 		},
+		// 备注表单配置
 		remarkConig() {
 			return [
 				{
@@ -95,6 +97,7 @@ export default {
 				}
 			]
 		},
+		// 试验基本信息表单配置
 		baseInfoFormConfig() {
 			return [
 				{
@@ -175,6 +178,7 @@ export default {
 				}
 			]
 		},
+		// 操作步骤表单配置
 		stepFormConfig() {
 			return [
 				{
@@ -209,7 +213,7 @@ export default {
 							subKey: "subSolution",
 							subFillType: "actFill",
 						},
-						startSTD: {
+						codeSTD: {
 							label: "起始编号STD",
 							type: "input",
 							maxlength: 10,
@@ -239,10 +243,57 @@ export default {
 				}
 			]
 		},
+		// 步骤表格列配置
+		stepColumns(){
+			return [
+				{
+					label:"目标溶液编号",
+					prop:"targetSolutionCode",
+					bodyType:"input",
+					subType:"span",
+					subKey:"subTargetSolutionCode",
+					bodyFillType:"preFill",
+					width: 280
+				},
+				{
+					label:"起始溶液编号",prop:"startSolutionCode",
+					width: 280,
+					bodyType:"input",
+					bodyFillType:"actFill",
+					bodyMaxlength:10,
+				},
+				{
+					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",
+					bodyDisabled: true,
+					bodyPrecisionKey:"subTargetStartSolutionPrecision",
+				},
+				{
+					label:"实际起始溶液体积",prop:"actStartSolutionVolume",
+					width: 280,
+					headerSelectKey:"actStartSolutionVolumeUnit",
+					fillType:"preFill",
+					headerOptions:this.$store.state.template.volumeOptions,
+					bodyType:"inputNumber",
+					bodyFillType:"actFill",
+				},
+			]
+		},
 	},
 	data() {
 		return {
 			dataSource: [],
+			stepTableDataSource: [],
 			sysjColumns: [
 				{ label: "试剂名称", prop: "reagentName" },
 				{ label: "编号", prop: "reagentCode" },
@@ -258,8 +309,6 @@ export default {
 				{ label: "下次测试/校准/检定日期", prop: "nextTestDate" },
 			],
 
-
-			formData: {}
 		};
 	},
 	mounted() {
@@ -267,6 +316,14 @@ 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},
+				],
+				headerSelectFields: {
+					targetStartSolutionVolumeUnit: "mg",
+					actStartSolutionVolumeUnit: "ul",
+				}
 			}
 		}
 	},
@@ -275,6 +332,7 @@ export default {
 			const baseData = await this.$refs.baseInfoRef.getFormData();
 			const conditionData = await this.$refs.storageConditionRef.getFormData();
 			const stepFormData = await this.$refs.stepFormPackageRef.getFormData();
+			const stepDataFormData = await this.$refs.stepTable.getFormData();
 			const stepData = await this.$refs.stepRef.getFormData();
 			if (!stepData.length) {
 				this.$message.error("请添加步骤");
@@ -286,12 +344,14 @@ export default {
 				...conditionData,
 				...stepData,
 				stepData: stepFormData,
-				...remarkData
+				...remarkData,
+				...stepDataFormData
 			}
 		},
 		async onSave() {
-			const formData = await this.getFormData();
-			console.log(formData, "formData")
+			// const formData = await this.getFormData();
+			const stepDataFormData = await this.$refs.stepTable.getFormData();
+			console.log(stepDataFormData, "formData")
 		}
 	}
 };

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

@@ -1,3 +1,4 @@
+import moment from "moment";
 export default {
   props: {
     templateData: {
@@ -12,16 +13,19 @@ export default {
         if(v){
           let n = {...v};
           if(v.bdnr){
-            n = {...n,...JSON.parse(v.bdnr)};
+            this.formData = JSON.parse(v.bdnr);
           }
-          this.formData = n;
+          this.templateDetail = n;
           this.setTemplateData(n);
         }
 			}
 		}
 	},
   data() {
-  
+    return {
+      formData: {},
+      templateDetail:{}
+    }
   },
   mounted() {
 
@@ -52,13 +56,18 @@ export default {
     },
     //统一处理blur事件，因为有效周期和过期日期是相关的，所以需要在有效周期失焦时更新过期日期
     onHandleBlur(fields){
-			const {key ,effectivePeriodUnit,effectivePeriod} = fields;
+			const {key ,effectivePeriodUnit,effectivePeriod,codeSTD} = fields;
 			const {createTime} = this.formData;
 			if(key ==="effectivePeriod"){//统一处理有效周期失焦，计算失效事件，保证字段名不能变
 				const start = moment(createTime);
 				const end = start.add(Number(effectivePeriod), effectivePeriodUnit).format("YYYY-MM-DD HH:mm:ss");
 				this.$refs.stepFormPackageRef.updateFormField("expireDate", end);
-			}
+			}else if(key === "codeSTD"){//起始编号STD失焦时，更新stepDataSource
+        const arr = Array.from({length:codeSTD},(item,index) => ({
+         subTargetStartSolutionPrecision:3,//小数点精度默认为3
+        }));
+        this.stepTableDataSource = arr;
+      }
 		}
 
   },