feat:[模板管理][update]

src/components/Template/HandleFormItem.vue

@@ -687,7 +687,7 @@ export default {
 }
 
 .handle-row {
-    margin-left: 10px;
+    margin-left: 5px;
     display: flex;
     align-items: center;
     cursor: pointer;

src/components/Template/Step.vue

@@ -11,8 +11,9 @@
 						v-model="step.type" @change="onTypeChange(index)" />
 
 					<!-- 根据步骤类型显示对应的表单 -->
-					<component :is="getStepComponent(step.type)" :step-data="step.formData"
-						@update="onFormUpdate(index, $event)">
+					<!-- 根据步骤类型显示对应的表单 -->
+					<component :is="getStepComponent(step.type)" :formData="step.formData"
+						@update="onFormUpdate(index, $event)" :ref="'stepCompRef_' + index">
 					</component>
 					<div class="step-header-item">
 						<el-button type="text" @click="removeStep(index)" icon="el-icon-delete"
@@ -25,12 +26,10 @@
 </template>
 
 <script>
-import ContainerStep from './StepComponents/ContainerStep.vue'
 import HandleFormItem from './HandleFormItem.vue';
 import Czdd from './StepComponents/ry/czdd.vue';//溶液-操作地点
 
 const stepTypes = [
-	{ label: '容器选择', value: 'container' },
 	{ label: '操作地点', value: 'czdd' },
 ];
 
@@ -57,14 +56,12 @@ export default {
 	},
 	components: {
 		HandleFormItem,
-		ContainerStep,
 		Czdd,
 	},
 	computed: {
 		stepComponentMap() {
 			if (!this.componentMap) {
 				this.componentMap = {
-					'container': 'ContainerStep',
 					'czdd': 'Czdd',
 				}
 			}
@@ -86,24 +83,19 @@ export default {
 		// }
 	},
 	watch: {
-		steps: {
-			handler(newVal) {
-				this.$emit('input', newVal.map(step => ({
-					type: step.type,
-					formData: step.formData
-				})))
-			},
-			deep: true
-		},
-		'formData': {
+		// steps: {
+		// 	handler(newVal) {
+		// 		this.$emit('input', newVal.map(step => ({
+		// 			type: step.type,
+		// 			formData: step.formData
+		// 		})))
+		// 	},
+		// 	deep: true
+		// },
+		formData: {
 			handler(newVal) {
-				console.log('stepValue', newVal)
 				if (!newVal || newVal.length === 0) return
-				this.steps = newVal.map((step) => ({
-					id: this.stepId++,
-					type: step.type || '',
-					formData: step
-				}))
+				this.steps = newVal;
 			},
 			deep: true,
 			immediate: true
@@ -149,8 +141,6 @@ export default {
 		},
 
 		onFormUpdate(stepIndex, formData) {
-			console.log('stepIndex', stepIndex)
-			console.log('formData', formData)
 			this.steps[stepIndex].formData = formData
 		},
 
@@ -161,15 +151,7 @@ export default {
 
 		// 公共方法：获取所有步骤数据
 		getFormData() {
-			return new Promise((resolve, reject) => {
-				// 校验所有步骤是否填写完整
-				const validation = this.validateSteps()
-				if (!validation.isValid) {
-					// this.$message.error(validation.errors[0])
-					reject(validation.errors[0])
-					return
-				}
-
+			return new Promise(async (resolve, reject) => {
 				// 检查是否有步骤数据
 				if (this.steps.length === 0) {
 					// this.$message.error(this.$t('template.common.addStepError'))
@@ -177,20 +159,42 @@ export default {
 					return
 				}
 
-				const stepData = this.steps.map(step => ({
-					type: step.type,
-					...step.formData
-				}))
-				resolve({ stepData })
+				try {
+					const stepData = await Promise.all(
+						this.steps.map(async (step, index) => {
+							const stepComponentRef = this.$refs[`stepCompRef_${index}`];
+							if (stepComponentRef && stepComponentRef.length > 0) {
+								try {
+									const stepFormData = await stepComponentRef[0].getFormData();
+									return { type: step.type, formData: stepFormData }
+								} catch (error) {
+									// 如果某个步骤的getFormData方法失败，抛出错误
+									throw error;
+								}
+							} else {
+								// 如果没有找到组件引用，返回原始数据
+								return { type: step.type, formData: step.formData }
+							}
+						})
+					);
+					resolve({ stepData });
+				} catch (error) {
+					reject(error);
+				}
 			})
 		},
 
 		// 直接获取表单数据，不做校验
 		getFilledFormData() {
-			const stepData = this.steps.map(step => ({
-				type: step.type,
-				...step.formData
-			}))
+			const stepData = this.steps.map((step, index) => {
+				const stepComponentRef = this.$refs[`stepCompRef_${index}`];
+				if(stepComponentRef && stepComponentRef.length > 0){
+					const stepFormData = this.$refs[`stepCompRef_${index}`][0]?.getFilledFormData();
+					return { type: step.type, formData: stepFormData }
+				}else{
+					return { type: step.type, formData: step.formData }
+				}
+			})
 			return { stepData }
 		},
 
@@ -227,14 +231,28 @@ export default {
 		},
 
 		// 公共方法：验证所有步骤
-		validateSteps() {
+		async validateSteps() {
 			const errors = []
-			this.steps.forEach((step, index) => {
+			for (let index = 0; index < this.steps.length; index++) {
+				const step = this.steps[index];
+				
 				if (!step.type) {
 					errors.push(`步骤 ${index + 1}: 请选择步骤类型`)
+					continue;
 				}
-				// 可以在这里添加更具体的表单验证逻辑
-			})
+				
+				// 获取当前步骤的组件实例
+				const stepComponentRef = this.$refs[`stepCompRef_${index}`];
+				if (stepComponentRef && stepComponentRef.length > 0) {
+					try {
+						// 调用子组件的getFormData方法进行验证（不抛出错误，只验证）
+						await stepComponentRef[0].validateAndMarkRed();
+					} catch (error) {
+						// validateAndMarkRed方法不应该抛出错误，但如果有的话捕获它
+						console.error(`步骤 ${index + 1} 验证时出错:`, error);
+					}
+				}
+			}
 			return {
 				isValid: errors.length === 0,
 				errors

src/components/Template/StepComponents/ry/czdd.vue

@@ -1,13 +1,17 @@
 <template>
-    <StepFormPackage :form-config="formConfig" :form-data = "formData" />
+    <StepFormPackage ref = "stepFormPackageRef" :form-config="formConfig" :formData = "formData" />
 </template>
 
 <script>
-import StepFormPackage from '@/components/Template/StepFormPackage.vue'
+import StepFormPackage from '@/components/Template/StepFormPackage.vue';
+import stepMixins from '@/components/Template/mixins/stepMixins.js';    
+
     export default {
+        mixins: [stepMixins],
         components: {
             StepFormPackage
         },
+        
         computed: {
             formConfig() {
                 return [{
@@ -32,15 +36,6 @@ import StepFormPackage from '@/components/Template/StepFormPackage.vue'
                 }]
             }
         },
-        data() {
-            return {
-                formData: {
-                    ddsys: "xxx",
-                    yq: "",
-                }
-            }
-        },
-
     }
 </script>
 

src/components/Template/StepFormPackage.vue

@@ -20,9 +20,17 @@
                         @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false"
                         :orange-bg="orangeBgFields[key]" />
                 </template>
+                <!-- 仪器 -->
                 <template v-else-if="sItem.type === 'instrument'">
                     <HandleFormItem class="step-row" :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
-                        type="clickable" @clickable="handleClickable(sItem, $event)" :error="errors[key]"
+                        type="clickable" @clickable="handleClickInstrument(key,'instrument')" :error="errors[key]"
+                        @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="getClickableItem(sItem)"
+                        :value="formFields[key]" />
+                </template>
+                <!-- 仪器 -->
+                <template v-else-if="sItem.type === 'regent'">
+                    <HandleFormItem class="step-row" :field-item-label="fieldItemLabel" :field-key="prefixKey + '_' + key"
+                        type="clickable" @clickable="handleClickInstrument(key,'regent')" :error="errors[key]"
                         @update:error="errors[key] = false" @resetRecord="resetRecord(key)" :item="getClickableItem(sItem)"
                         :value="formFields[key]" />
                 </template>
@@ -34,6 +42,7 @@
                 </template>
             </div>
         </div>
+    
     </div>
 </template>
 
@@ -41,7 +50,10 @@
 import HandleFormItem from '@/components/Template/HandleFormItem.vue'
 import formPackageMixins from '@/components/Template/mixins/formPackageMixins.js'
 import { isShowOther } from "@/utils/formPackageCommon.js";
+import { EventBus } from "@/utils/eventBus";
+import { getuuid } from "@/utils/index.js";
 export default {
+    inject: ['templateFillType','templateData'],
     components: {
         HandleFormItem,
     },
@@ -65,6 +77,12 @@ export default {
             default: ""
         }
     },
+    mounted() {
+        EventBus.$on("onReagentSubmit",this.onReagentSubmit)
+    },
+    unmounted() {
+        EventBus.$off("onReagentSubmit",this.onReagentSubmit)
+    },
     data() {
         return {
             formFields: {},//表单绑定字段
@@ -72,15 +90,34 @@ export default {
             errors: {},//存储表单错误信息，用于标红提示
             orangeBgFields: {},// 存储需要橙色背景的字段
             isShowOther,
+            currentClickKey: "",//当前点击的字段key
+            uuid:getuuid(),
         }
     },
     methods: {
+        // 处理选择试剂提交
+        onReagentSubmit(data){
+            if(data.uuid !== this.uuid) return;
+            this.formFields[this.currentClickKey] = data.selectedId;
+        },
         getClickableItem(sItem) {
             return {
                 ...sItem,
                 type:"clickable"
             }
-        }
+        },
+        handleClickInstrument(key,type) {
+            this.currentClickKey = key;
+            if(type === 'regent'){
+                EventBus.$emit("showSelectReagentDialog",{
+                    studyFormId:this.templateData.id,
+                    uuid:this.uuid,
+                })  
+            }
+        },
+        onSelectReagentSubmit(reagent){
+            this.formFields[this.currentClickKey] = reagent
+        },
     }
 }
 </script>
@@ -93,7 +130,7 @@ export default {
 }
 
 .step-row {
-    width: 180px;
+    min-width: 180px;
 }
 
 .step-item {

src/components/Template/mixins/formPackageMixins.js

@@ -31,7 +31,6 @@ export default {
         this.handleFormField();
     },
     unmounted() {
-        console.log("unmounted")
         this.formFields = {};//清空当前填写的数据
     },
 
@@ -79,7 +78,6 @@ export default {
             })
         },
         handleClickable(sItem, event) {
-            console.log("clickable", sItem)
             if (this.templateFillType !== 'actFill') {
                 return
             }
@@ -220,10 +218,8 @@ export default {
         validateFormData() {
             const { formFields, allFieldsConfig } = this;
             const errors = [];
-
             // 清空之前的错误状态
             this.errors = {};
-
             for (const key in allFieldsConfig) {
                 const o = allFieldsConfig[key];
                 if (o.otherCode) {//
@@ -246,7 +242,7 @@ export default {
                         continue
                     }
                     //span的字段不校验
-                    if (o.type === "span") {
+                    if (o.type === "span" || o.type ==="text") {
                         continue
                     }
                     if (o.fillType === this.templateFillType && !o.disabled) {
@@ -268,6 +264,7 @@ export default {
                     }
                 }
             }
+            console.log(errors,"errors")
             return {
                 valid: errors.length === 0,
                 errors: errors

src/components/Template/mixins/stepMixins.js

@@ -0,0 +1,16 @@
+export default {
+    props: {
+        formData: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    methods: {
+        async getFormData() {
+            return await this.$refs.stepFormPackageRef.getFormData();
+        },
+        getFilledFormData() {
+            return this.$refs.stepFormPackageRef?.getFilledFormData();
+        }
+    },
+}

src/utils/index.js

@@ -418,3 +418,8 @@ export const getExpireDate = (startDate, effectivePeriod, effectivePeriodUnit) =
 		.format('YYYY-MM-DD HH:mm:ss');
 	return end;
 }
+
+export function getuuid() {
+    return Math.random().toString(36).substring(2) + 
+               Date.now().toString(36);
+}

src/views/business/comps/template/TemplateTable.vue

@@ -4,11 +4,17 @@
     </component>
     <SubPackageDialog ref = "subPackageDialogRef"></SubPackageDialog>
     <TagPrintDialog ref = "tagPrintDialogRef"></TagPrintDialog>
+    <SelectReagentDialog ref="selectReagentDialogRef">
+		</SelectReagentDialog>
   </div>
 </template>
 
 <script>
 import { EventBus } from "@/utils/eventBus";
+
+import SubPackageDialog from "./dialog/SubPackageDialog.vue";//分装弹窗
+import TagPrintDialog from "./dialog/PrintTagDialog.vue";//标签打印弹窗
+import SelectReagentDialog from "./dialog/SelectReagentDialog.vue";//选择试剂弹窗
 //色谱
 import SWYPFXRYPZB from "./comps/sp/SWYPFXRYPZB.vue";
 import SWYPFXCBYPZB from "./comps/sp/SWYPFXCBYPZB.vue";
@@ -30,13 +36,13 @@ import Demo from "./comps/sp/Demo.vue";
 //供试品
 import SYWZPZJHB from "./comps/gsp/SYWZPZJHB.vue";
 import MJYLQSQD from "./comps/gsp/MJYLQSQD.vue";
-import SubPackageDialog from "./dialog/SubPackageDialog.vue";//分装弹窗
-import TagPrintDialog from "./dialog/PrintTagDialog.vue";//标签打印弹窗
+
+
 
 export default {
   name: "TemplateTable",
   components: {
-    SubPackageDialog,TagPrintDialog,
+    SubPackageDialog,TagPrintDialog,SelectReagentDialog,
     //供试品
     MJYLQSQD, SYWZPZJHB,
     //色谱
@@ -119,6 +125,7 @@ export default {
   provide() {
     return {
       //分发给子组件的fillType
+      templateData: this.templateData,
       templateFillType: this.fillType,
       getZdxgjl: () => this.zdxgjl ,
       getFhyjjl: () => this.fhyjjl,
@@ -154,18 +161,25 @@ export default {
     EventBus.$on('onModifyRecord', (data) => {
       this.$emit(this.emitName, data)
     });
+    //分装弹窗
     EventBus.$on("showSubPackageDialog",(data)=>{
       this.$refs.subPackageDialogRef.show(data)
     })
+    //标签打印弹窗
     EventBus.$on("showTagPrintDialog",(data)=>{
       this.$refs.tagPrintDialogRef.show(data)
     })
+    //选择试剂弹窗
+    EventBus.$on("showSelectReagentDialog",(data)=>{
+      this.$refs.selectReagentDialogRef.show(data.studyFormId,data)
+    })
   },
   beforeDestroy() {
     // 记得移除监听，避免内存泄漏
     EventBus.$off('onModifyRecord');
     EventBus.$off("showSubPackageDialog");
     EventBus.$off("showTagPrintDialog");
+    EventBus.$off("showSelectReagentDialog");
   },
   methods: {
     async getFormData() {

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

@@ -28,7 +28,7 @@
 				</div>
 			</div>
 		</div>
-		<!-- <button @click = "onSave">保存</button> -->
+		<button @click = "onSave">保存</button>
 	</div>
 </template>
 
@@ -308,7 +308,7 @@ export default {
 			return content;
 		},
 		async onSave() {
-			const formData = await this.getFilledFormData();
+			const formData = await this.validFormFields(["stepRef"]);
 
 			console.log(formData, "formData")
 		},

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

@@ -29,7 +29,7 @@
 import SelectTable from '@/components/Template/SelectTable.vue';
 import SelectDept from "@/views/business/comps/select/SelectDept";
 import { public_sjList,public_bzList } from '@/api/business/public/public';
-
+import { EventBus } from "@/utils/eventBus";
 export default {
     components: {
         SelectTable,
@@ -107,7 +107,8 @@ export default {
 
             bzList:[],
             depart:"",
-            studyFormId:''//有个studyFormId需要从外面动态传过来
+            studyFormId:'',//有个studyFormId需要从外面动态传过来
+            uuid:'',//为了标识eventBus的事件id,
         }
     },
     computed: {
@@ -129,7 +130,10 @@ export default {
         }
     },
     methods: {
-        show(studyFormId){
+        show(studyFormId,data){
+            if(data && data.uuid) {//为了标识eventBus的事件id
+                this.uuid = data.uuid
+            }
             this.visible = true
             this.studyFormId = studyFormId
             this.showTableData()
@@ -173,6 +177,9 @@ export default {
                }
             }
             this.$emit('submit', this.selectedId,row);
+            // 触发eventBus事件
+            EventBus.$emit("onReagentSubmit",{uuid:this.uuid,selectedId:this.selectedId,row});
+            this.visible = false;
         },
         handleSelect(code,row) {
             this.selectedId = code;