feat:[模板管理][模板组件提取ing]

src/App.vue

@@ -309,4 +309,14 @@ export default {
     margin-top: 10px;
   }
 }
+.template-form-item {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    margin-top: 24px;
+    padding: 24px;
+    border-radius: 5px 5px;
+
+}
 </style>

src/components/Template/BaseInfoFormPcakge.vue

@@ -63,6 +63,37 @@
 
                 </div>
             </template>
+            <template v-else-if="item.type === 'step'">
+                <div class="grid-container gap2">
+                    <div v-for="(sItem, key) in item.config" class="c-Item flex item-center" :class="getSpanClass(sItem)"
+                        :key="key">
+                        <div class="step-title" v-if="sItem.label">{{ sItem.label }}</div>
+                        <div v-if="sItem.type === 'dateTime'">
+                            <HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]"
+                                @copy="onCopy(sItem, key)" />
+                        </div>
+                        <div v-else-if="sItem.type === 'select'" class="flex flex1">
+                            <HandleFormItem type="select" :item="sItem" style="width: auto;flex:1" v-model="formFields[key]"
+                                @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" />
+                            <div v-show="isShowOther(formFields[key])" class="flex flex1">
+                                <div class="other-title">其他</div>
+                                <div class="flex">
+                                    <HandleFormItem class="sub-select" :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]" 
+                                        @copy="onCopy(sItem, key)" />
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else-if="sItem.type === 'input'" class="flex flex1">
+                            <HandleFormItem class="flex1" :item="sItem" v-model="formFields[key]" 
+                            @copy="onCopy(sItem, key)" />
+                            <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" v-else-if = "sItem.subType ==='clickable'" @click="handleClickable(sItem)">{{ formFields[sItem.subKey] }}</div>
+                        </div>
+                    </div>
+                </div>
+            </template>
         </div>
     </div>
 </template>
@@ -104,6 +135,10 @@ export default {
     },
 
     methods: {
+        handleClickable(sItem){
+            console.log(sItem)
+            this.$emit("clickable",sItem)
+        },
         //根据span判断一行显示几列
         getSpanClass(sItem){
             const spanArr = ["full-row","","three-row"]
@@ -112,12 +147,19 @@ export default {
             }
             return ""
         },
+        //获取其他下拉框的配置
         getOtherItem(sItem){
             return {
                 label:"其他",
                 fillType: sItem.fillType,
             }
         },
+        getSubItem(sItem){
+            return {
+                label: sItem.label,
+                options: sItem.subOptions || [],
+            }
+        },
         isShowOther(v = []) {
             // 确保v是数组类型，以避免类型错误
             const arr = Array.isArray(v) ? v : [v];
@@ -177,6 +219,11 @@ export default {
                             result[otherCode] = formData[otherCode] || '';
                             config[otherCode] = { label: "其他", type: "input" }
                         }
+                        if (currentConfig.subKey) {
+                            const { subKey } = currentConfig;
+                            result[subKey] = formData[subKey] || '';
+                            config[subKey] = { label: currentConfig.label, type: currentConfig.subType }
+                        }
                     });
                     
                     // 处理可能存在的直接otherCode字段
@@ -295,6 +342,14 @@ export default {
     font-weight: normal;
     color: #606266;
 }
+.step-title{
+    font-size: 14px;
+    font-weight: normal;
+    color: #606266;
+    width: 150px;
+    text-align: right;
+    padding-right: 10px;
+}
 .p-r-20{
     padding-right: 20px;
 }
@@ -315,8 +370,16 @@ export default {
 .flex {
     display: flex;
 }
-
+.other-title{
+    width: 50px; 
+    text-align: right;
+    margin: 0 10px;
+}
 .mr-24 {
     margin-right: 24px;
 }
+.sub-select{
+    width: auto;
+    margin-left: 10px;
+}
 </style>

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

@@ -14,6 +14,9 @@
 					<TableList class="mt-20" :columns = "yqsColumns" :dataSource = "dataSource"/>
 					<BaseInfoFormPcakge ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/>
 					<LineLabel class="mt-20" label = "操作步骤"/>
+					<div class="template-form-item">
+						<BaseInfoFormPcakge ref = "stepFormPackage" :formConfig = "stepFormConfig" :formData = "formData"/>
+					</div>
 					<Step ref = "stepRef"></Step>
 				</div>
 			</div>
@@ -63,19 +66,18 @@ export default {
 			],
 			storageFormConfig:[
 			{
-					type:"cellItem",
+					type:"conditionItem",
 					config:{
-						storageCondition:{
-							label:"存储条件",
-							type:"input",
-						},
 						storageCondition1:{
 							label:"存储条件",
 							type:"select",
+							fillType:"preFill",
 							options:[
-								{label:"正常",value:"1"},
-								{label:"特殊",value:"2"},
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
 							],
+							otherCode:"other1",
 						},
 						
 					}
@@ -154,13 +156,46 @@ export default {
 					}
 				}
 			],
+			stepFormConfig:[
+				{
+					type:"step",
+					config:{
+						startDate:{
+							label:"目标溶液名称",
+							type:"input",
+						},
+						endDate:{
+							label:"目标溶液编号",
+							type:"input",
+							subType:"span",
+							subKey:"targetCode1",
+						},
+						target:{
+							label:"目标溶液预计浓度",
+							type:"input",
+							subType:"select",
+							subKey:"taget1",
+							subOptions:[
+								{label:"mg",value:"mg"},
+								{label:"ng",value:"ng"},
+							],
+						},
+						target:{
+							label:"目标溶液预计浓度",
+							type:"input",
+							subType:"clickable",
+							subKey:"taget1c",
+						},
+					}
+				}
+			],
 			formData:{}
 		};
 	},
 	mounted() {
 		setTimeout(()=>{
 			this.formData = {
-				code:"code1",name:"name1",act:["1","-1"]
+				code:"code1",name:"name1",act:["1","-1"],taget1:"mg",targetCode1:"123456",taget1c:"可点击"
 			}
 		},3000)
 	},
@@ -168,8 +203,9 @@ export default {
 		async onSave(){
 			// const result1 = await this.$refs.baseInfo.getFormData();
 			// const result2 = await this.$refs.storageCondition.getFormData();
-			const result3 = await this.$refs.stepRef.getFormData();
-			console.log(result3,"reee")
+			// const result3 = await this.$refs.stepRef.getFormData();
+			const result = await this.$refs.stepFormPackage.getFormData();
+			console.log(result,"reee")
 		}
 	}
 };