From ef4f4531a2736f4c3328da1d3e6ac07fe90cb863 Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Sun, 28 Dec 2025 22:43:44 +0800
Subject: [PATCH 1/9] feat:template

---
 src/components/Template/BaseInfoFormPcakge.vue     | 233 +++++++++++++++++++++
 .../business/comps/template/TemplateTable.vue      |   8 +-
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        | 123 +++++++++++
 3 files changed, 362 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Template/BaseInfoFormPcakge.vue
 create mode 100644 src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue

diff --git a/src/components/Template/BaseInfoFormPcakge.vue b/src/components/Template/BaseInfoFormPcakge.vue
new file mode 100644
index 0000000..9d67fbd
--- /dev/null
+++ b/src/components/Template/BaseInfoFormPcakge.vue
@@ -0,0 +1,233 @@
+<template>
+    <div>
+        <div v-for="(item, index) in formConfig" :key="index">
+            <template v-if="item.type === 'cardItem'">
+                <div class="grid-container">
+                    <div v-for="(sItem, sIndex) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
+                        :key="sIndex">
+                        <template v-if="sItem.type === 'input'">
+                            <div class="form-title">{{ sItem.label }}</div>
+                            <el-input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
+                                v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
+                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
+                        </template>
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="item.type === 'conditionItem'">
+                <div class="form-item ">
+                    <div class="form-title fs-16">{{ item.label }}</div>
+                    <div v-for="(sItem, sIndex) in item.config" class="flex">
+                        <div class="flex1 mr-24">
+                            <div class="form-title">{{ sItem.label }}</div>
+                            <div class="flex">
+                                <el-select class="flex1" v-model="formFields[sIndex]" multiple placeholder="请选择">
+                                    <el-option
+                                    v-for="op in sItem.options"
+                                    :key="op.value"
+                                    :label="op.label"
+                                    :value="op.value">
+                                    </el-option>
+                                </el-select>
+
+                            </div>
+                        </div>
+                        <div class="flex1" v-show = "isShowOther(formFields[sIndex])">
+                            <div class="form-title">其他</div>
+                            <div class="flex">
+                                <el-input v-model="formFields[sItem.otherCode]" :class="sItem.borderType | getBorderType"></el-input>
+                            </div>
+                        </div>
+                        
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    components: {
+    },
+    props: {
+        formConfig: {
+            type: Array,
+            value: () => [],
+        },
+        formData: {
+            type: Object,
+            value: () => ({})
+        }
+    },
+    data() {
+        return {
+            formFields: {},//表单双休绑定字段
+            allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
+        };
+    },
+    watch: {
+        immediate: true,
+        formData: {
+            handler(v) {
+                this.handleFormField();
+            }
+        }
+    },
+    mounted() {
+        this.handleFormField();
+    },
+    filters: {
+        getBorderType(type) {
+            const typeObj = {
+                orange: "orange-border",
+                green: "green-border",
+                blue: "blue-border",
+            }
+            return typeObj[type] || ""
+        },
+       
+    },
+    methods: {
+        isShowOther(v = []){
+            return v.includes(-1);
+        },
+        //根据formConifg回填form表单数据
+        handleFormField() {
+            const result = {};
+            let config = {};
+            const { formConfig, formData } = this;
+            formConfig.forEach((item) => {
+                if (item.config) {
+                    config = { ...config, ...item.config }
+                    Object.keys(item.config).forEach(key => {
+                        const currentConfig = item.config[key];
+                        result[key] = formData[key];
+                        if(currentConfig.otherCode){//如果有其它的字段需要赋值给formData
+                            const {otherCode} = currentConfig;
+                            result[otherCode] = formData[otherCode]
+                            config[otherCode] = {label:"其他",type:"input"}
+                        }
+                    });
+                    console.log(item.config,"config")
+                    if(item.config?.otherCode){
+                        config[item.config?.otherCode] = item.config?.otherCode;
+                    }
+                }
+
+            })
+            this.formFields = result;
+            this.allFieldsConfig = config;
+            console.log(config, "allFieldsConfig")
+        },
+        getFormData() {
+            const { formFields, allFieldsConfig } = this;
+            for (const key in formFields) {
+                if (!formFields[key]) {
+                    const o = allFieldsConfig[key];
+                    let prefix = "";
+                    if (o.type === "input") {
+                        prefix = "填写"
+                    } else {
+                        prefix = "选择"
+                    }
+                    this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
+                    return;
+                }
+            }
+            return formFields;
+        }
+    },
+}
+</script>
+
+<style lang="scss" >
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    /* 默认2列 */
+    gap: 0 24px;
+}
+
+.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;
+
+}
+
+/* 或者使用 span 语法 */
+.full-row {
+    grid-column: span 2;
+}
+
+.form-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: normal;
+    color:#606266;
+}
+
+.orange-border {
+    input {
+        border-color: #f9c588;
+
+        &:focus {
+            border-color: #f9c588;
+        }
+
+        &:hover {
+            border-color: #f9c588;
+        }
+    }
+
+}
+
+.green-border {
+    input {
+        border-color: green;
+
+        &:focus {
+            border-color: green;
+        }
+
+        &:hover {
+            border-color: green;
+        }
+    }
+
+}
+
+.blue-border {
+    input {
+        border-color: #4ea2ff;
+
+        &:focus {
+            border-color: #4ea2ff;
+        }
+
+        &:hover {
+            border-color: #4ea2ff;
+        }
+    }
+
+}
+.fs-16{
+    font-size: 0.96rem;
+    font-weight: bold;
+    color:#464647
+}
+.flex1{
+    flex:1;
+}
+.flex{
+    display: flex;
+}
+.mr-24{
+    margin-right: 24px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/comps/template/TemplateTable.vue b/src/views/business/comps/template/TemplateTable.vue
index 60b2d07..df193e6 100644
--- a/src/views/business/comps/template/TemplateTable.vue
+++ b/src/views/business/comps/template/TemplateTable.vue
@@ -1,15 +1,19 @@
 <template>
   <div class="template-table">
-    <SP001 v-if="sn == 'SP001'" />
+    <SP001 v-if="sn == 'SP0012'" />
+    <SWYPFXRYPZB v-if="sn == 'SP001'" />
   </div>
 </template>
 
 <script>
 //色谱
 import SP001 from './comps/sp/SP001';
+import SWYPFXRYPZB from "./comps/sp/SWYPFXRYPZB.vue";
 export default {
   name: "TemplateTable",
-  components: { SP001 },
+  components: { 
+    SP001,SWYPFXRYPZB 
+  },
   props: {
     sn: {
       type: String,
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
new file mode 100644
index 0000000..76d0aab
--- /dev/null
+++ b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
@@ -0,0 +1,123 @@
+<!-- 生物样品分析溶液配制表 -->
+<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">
+					<div class="content-title">
+						<div class="line"></div>
+						<div class="subtitle"> 试验基本信息</div>
+					</div>
+					<BaseInfoFormPcakge ref = "baseInfo" :formConfig = "formConfig" :formData = "formData"/>
+				</div>
+			</div>
+			<button @click = "onSave">保存</button>
+		</div>
+	</div>
+</template>
+  
+<script>
+import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"
+export default {
+	name: "SWYPFXRYPZB",
+	components: { BaseInfoFormPcakge },
+	props: {
+		value: {
+			type: {},
+			default: () => { },
+		}
+	},
+	watch: {
+		value: {
+			immediate: true,
+			handler(v) {
+
+			}
+		}
+	},
+	data() {
+		return {
+			formConfig: [
+				{
+					type:"cardItem",
+					config:{
+						name:{
+							label:"试验名称",
+							type:"input",
+							disabled:true,
+						},
+						code:{
+							label:"试验编号",
+							type:"input",
+							disabled:true,
+						},
+						methodCode:{
+							label:"方法编号",
+							type:"input",
+							borderType:"blue"
+						},
+						versionNum:{
+							label:"版本号",
+							type:"input",
+							borderType:"orange"
+						},
+
+					}
+				},
+				{
+					type:"conditionItem",
+					label:"试验配制条件",
+					config:{
+						pre:{
+							label:"预填",
+							type:"select",
+							borderType:"blue",
+							options:[
+								{label:"白光",value:1},
+								{label:"黄光",value:3},
+								{label:"其他",value:-1},
+							],
+							otherCode:"other1",
+						},
+						act:{
+							label:"实际",
+							type:"select",
+							borderType:"orange",
+							otherCode:"other2",
+							options:[
+								{label:"白光",value:1},
+								{label:"黄光",value:3},
+								{label:"其他",value:-1},
+							]
+						}
+					}
+				}
+			],
+			formData:{}
+		};
+	},
+	mounted() {
+		setTimeout(()=>{
+			this.formData = {
+				code:"code1",name:"name1"
+			}
+		},3000)
+	},
+	methods: {
+		onSave(){
+			const result = this.$refs.baseInfo.getFormData();
+			console.log(result,"reee")
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss">
+.b1 {
+	input {
+		border-color: aquamarine;
+
+	}
+}
+</style>
\ No newline at end of file

From 476656672bfdd56d04dc48411186d5fdbb343d75 Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Mon, 29 Dec 2025 16:54:06 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E5=88=97=E8=A1=A8]?=
 =?UTF-8?q?[=E7=BB=84=E4=BB=B6=E6=8A=BD=E7=A6=BBing]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Template/BaseInfoFormPcakge.vue     | 103 ++++++++++++++-------
 src/components/Template/Input.vue                  |  80 ++++++++++++++++
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        |  14 +++
 vue.config.js                                      |   4 +-
 4 files changed, 168 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Template/Input.vue

diff --git a/src/components/Template/BaseInfoFormPcakge.vue b/src/components/Template/BaseInfoFormPcakge.vue
index 9d67fbd..1c4977e 100644
--- a/src/components/Template/BaseInfoFormPcakge.vue
+++ b/src/components/Template/BaseInfoFormPcakge.vue
@@ -3,11 +3,11 @@
         <div v-for="(item, index) in formConfig" :key="index">
             <template v-if="item.type === 'cardItem'">
                 <div class="grid-container">
-                    <div v-for="(sItem, sIndex) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
-                        :key="sIndex">
+                    <div v-for="(sItem, sIndex) in item.config" class="form-item"
+                        :class="sItem.span == 1 ? 'full-row' : ''" :key="sIndex">
                         <template v-if="sItem.type === 'input'">
                             <div class="form-title">{{ sItem.label }}</div>
-                            <el-input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
+                            <Input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
                                 v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
                                 :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
                         </template>
@@ -16,30 +16,59 @@
             </template>
             <template v-else-if="item.type === 'conditionItem'">
                 <div class="form-item ">
-                    <div class="form-title fs-16">{{ item.label }}</div>
-                    <div v-for="(sItem, sIndex) in item.config" class="flex">
+                    <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
+                    <div v-for="(sItem, sIndex) in item.config" class="c-Item flex">
                         <div class="flex1 mr-24">
                             <div class="form-title">{{ sItem.label }}</div>
                             <div class="flex">
-                                <el-select class="flex1" v-model="formFields[sIndex]" multiple placeholder="请选择">
-                                    <el-option
-                                    v-for="op in sItem.options"
-                                    :key="op.value"
-                                    :label="op.label"
-                                    :value="op.value">
+                                <el-select class="flex1" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
+                                    <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
+                                        :value="op.value">
                                     </el-option>
                                 </el-select>
 
                             </div>
                         </div>
-                        <div class="flex1" v-show = "isShowOther(formFields[sIndex])">
+                        <div class="flex1" v-show="isShowOther(formFields[sIndex])">
                             <div class="form-title">其他</div>
                             <div class="flex">
-                                <el-input v-model="formFields[sItem.otherCode]" :class="sItem.borderType | getBorderType"></el-input>
+                                <el-input v-model="formFields[sItem.otherCode]"
+                                    :class="sItem.borderType | getBorderType"></el-input>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </template>
+            <template v-else-if="item.type === 'cellItem'">
+                <div class="form-item ">
+                    <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
+                    <div class="grid-container">
+                        <div v-for="(sItem, sIndex) in item.config" class="c-Item " :class="sItem.span == 1 ? 'full-row' : ''" :key = "sIndex">
+                            <div class="form-title" v-if = "sItem.label">{{ sItem.label }}</div>
+                            <div v-if = "sItem.type === 'dateTime'">
+                                <el-date-picker
+                                v-model="formFields[sIndex]" 
+                                type="datetime"
+                                class="w-100"
+                                format = "yyyy/MM/DD HH:mm:ss"
+                                value-format = "yyyy/MM/DD HH:mm:ss"
+                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
+                                </el-date-picker>
+                            </div>
+                            <div v-else-if = "sItem.type === 'select'">
+                                <el-select class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
+                                    <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
+                                        :value="op.value">
+                                    </el-option>
+                                </el-select>
+                            </div>
+                            <div v-else-if = "sItem.type === 'input'">
+                                <el-input class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)"></el-input>
                             </div>
                         </div>
-                        
                     </div>
+
                 </div>
             </template>
         </div>
@@ -47,8 +76,10 @@
 </template>
 
 <script>
+import Input from "./Input.vue";
 export default {
     components: {
+        Input
     },
     props: {
         formConfig: {
@@ -86,10 +117,10 @@ export default {
             }
             return typeObj[type] || ""
         },
-       
+
     },
     methods: {
-        isShowOther(v = []){
+        isShowOther(v = []) {
             return v.includes(-1);
         },
         //根据formConifg回填form表单数据
@@ -103,14 +134,14 @@ export default {
                     Object.keys(item.config).forEach(key => {
                         const currentConfig = item.config[key];
                         result[key] = formData[key];
-                        if(currentConfig.otherCode){//如果有其它的字段需要赋值给formData
-                            const {otherCode} = currentConfig;
+                        if (currentConfig.otherCode) {//如果有其它的字段需要赋值给formData
+                            const { otherCode } = currentConfig;
                             result[otherCode] = formData[otherCode]
-                            config[otherCode] = {label:"其他",type:"input"}
+                            config[otherCode] = { label: "其他", type: "input" }
                         }
                     });
-                    console.log(item.config,"config")
-                    if(item.config?.otherCode){
+                    console.log(item.config, "config")
+                    if (item.config?.otherCode) {
                         config[item.config?.otherCode] = item.config?.otherCode;
                     }
                 }
@@ -141,14 +172,16 @@ export default {
 }
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 .grid-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     /* 默认2列 */
     gap: 0 24px;
 }
-
+.w-100{
+    width: 100% !important;
+}
 .form-item {
     background: #fff;
     padding: 20px;
@@ -164,12 +197,16 @@ export default {
 .full-row {
     grid-column: span 2;
 }
-
+.c-Item{
+    &:not(:last-child){
+        margin-bottom: 16px;
+    }
+}
 .form-title {
     margin-bottom: 12px;
     font-size: 14px;
     font-weight: normal;
-    color:#606266;
+    color: #606266;
 }
 
 .orange-border {
@@ -216,18 +253,22 @@ export default {
     }
 
 }
-.fs-16{
+
+.fs-16 {
     font-size: 0.96rem;
     font-weight: bold;
-    color:#464647
+    color: #464647
 }
-.flex1{
-    flex:1;
+
+.flex1 {
+    flex: 1;
 }
-.flex{
+
+.flex {
     display: flex;
 }
-.mr-24{
+
+.mr-24 {
     margin-right: 24px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Template/Input.vue b/src/components/Template/Input.vue
new file mode 100644
index 0000000..e4b32b7
--- /dev/null
+++ b/src/components/Template/Input.vue
@@ -0,0 +1,80 @@
+<template>
+    <el-input v-bind="$attrs" v-on = "$listeners" :maxlength = "$attrs.maxlength || 30" v-model = "inputValue" :class="$attrs.borderType | getBorderType" />
+</template>
+
+<script>
+export default {
+    props:{
+        borderType: {
+            type: String,
+            default: ""
+        }
+    },
+    data(){
+        return {
+            inputValue: this.$attrs.modelValue
+        }
+    },
+    filters: {
+        getBorderType(type) {
+            const typeObj = {
+                orange: "orange-border",
+                green: "green-border",
+                blue: "blue-border",
+            }
+            return typeObj[type] || ""
+        },
+
+    },
+    methods:{
+        
+    }
+}
+</script>
+
+<style lang="scss">
+.orange-border {
+    input {
+        border-color: #f9c588;
+
+        &:focus {
+            border-color: #f9c588;
+        }
+
+        &:hover {
+            border-color: #f9c588;
+        }
+    }
+
+}
+
+.green-border {
+    input {
+        border-color: green;
+
+        &:focus {
+            border-color: green;
+        }
+
+        &:hover {
+            border-color: green;
+        }
+    }
+
+}
+
+.blue-border {
+    input {
+        border-color: #4ea2ff;
+
+        &:focus {
+            border-color: #4ea2ff;
+        }
+
+        &:hover {
+            border-color: #4ea2ff;
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
index 76d0aab..a6217c0 100644
--- a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+++ b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
@@ -93,6 +93,20 @@ export default {
 							]
 						}
 					}
+				},
+				{
+					type:"cellItem",
+					label:"配置时间",
+					config:{
+						startDate:{
+							label:"开始时间",
+							type:"dateTime",
+						},
+						endDate:{
+							label:"结束时间",
+							type:"dateTime",
+						},
+					}
 				}
 			],
 			formData:{}
diff --git a/vue.config.js b/vue.config.js
index 4fb77ed..d3ce99c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -34,8 +34,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
-        // target: `http://39.99.251.173:8080`,
+        // target: `http://localhost:8080`,
+        target: `http://39.99.251.173:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''

From 81cde6126f00673dfb086d1eaa16eb54f91cd759 Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Mon, 29 Dec 2025 23:02:06 +0800
Subject: [PATCH 3/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?=
 =?UTF-8?q?[=E7=BB=84=E4=BB=B6=E6=8A=BD=E7=A6=BBing]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Template/BaseInfoFormPcakge.vue     | 108 +++++++++++++--------
 src/components/Template/HandleFormItem.vue         | 106 ++++++++++++++++++++
 src/components/Template/Input.vue                  |  35 ++++++-
 src/components/Template/LineLabel.vue              |  43 ++++++++
 src/components/Template/Table.vue                  |  33 +++++++
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        |  78 ++++++++++-----
 6 files changed, 336 insertions(+), 67 deletions(-)
 create mode 100644 src/components/Template/HandleFormItem.vue
 create mode 100644 src/components/Template/LineLabel.vue
 create mode 100644 src/components/Template/Table.vue

diff --git a/src/components/Template/BaseInfoFormPcakge.vue b/src/components/Template/BaseInfoFormPcakge.vue
index 1c4977e..728b79c 100644
--- a/src/components/Template/BaseInfoFormPcakge.vue
+++ b/src/components/Template/BaseInfoFormPcakge.vue
@@ -3,13 +3,12 @@
         <div v-for="(item, index) in formConfig" :key="index">
             <template v-if="item.type === 'cardItem'">
                 <div class="grid-container">
-                    <div v-for="(sItem, sIndex) in item.config" class="form-item"
-                        :class="sItem.span == 1 ? 'full-row' : ''" :key="sIndex">
+                    <div v-for="(sItem, key) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
+                        :key="key">
                         <template v-if="sItem.type === 'input'">
                             <div class="form-title">{{ sItem.label }}</div>
-                            <Input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
-                                v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
-                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
+                            <HandleFormItem :item="sItem" :value="formFields[key]" @input="onInput(key, $event)"
+                                @copy="onCopy(sItem, key)" />
                         </template>
                     </div>
                 </div>
@@ -17,24 +16,24 @@
             <template v-else-if="item.type === 'conditionItem'">
                 <div class="form-item ">
                     <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
-                    <div v-for="(sItem, sIndex) in item.config" class="c-Item flex">
-                        <div class="flex1 mr-24">
+                    <div v-for="(sItem, key) in item.config" class="c-Item  grid-container">
+                        <div class="p-r-20">
                             <div class="form-title">{{ sItem.label }}</div>
-                            <div class="flex">
-                                <el-select class="flex1" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
-                                    <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
-                                        :value="op.value">
-                                    </el-option>
-                                </el-select>
+                            <div class="flex ">
+                                <HandleFormItem type="select" :item="sItem" :value="formFields[key]"
+                                    @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" />
 
                             </div>
                         </div>
-                        <div class="flex1" v-show="isShowOther(formFields[sIndex])">
-                            <div class="form-title">其他</div>
-                            <div class="flex">
-                                <el-input v-model="formFields[sItem.otherCode]"
-                                    :class="sItem.borderType | getBorderType"></el-input>
+                        <div  class="p-r-20">
+                            <div v-show="isShowOther(formFields[key])">
+                                <div class="form-title">其他</div>
+                                <div class="flex">
+                                    <el-input v-model="formFields[sItem.otherCode]"
+                                        :class="sItem.borderType | getBorderType"></el-input>
+                                </div>
                             </div>
+
                         </div>
 
                     </div>
@@ -44,27 +43,26 @@
                 <div class="form-item ">
                     <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
                     <div class="grid-container">
-                        <div v-for="(sItem, sIndex) in item.config" class="c-Item " :class="sItem.span == 1 ? 'full-row' : ''" :key = "sIndex">
-                            <div class="form-title" v-if = "sItem.label">{{ sItem.label }}</div>
-                            <div v-if = "sItem.type === 'dateTime'">
-                                <el-date-picker
-                                v-model="formFields[sIndex]" 
-                                type="datetime"
-                                class="w-100"
-                                format = "yyyy/MM/DD HH:mm:ss"
-                                value-format = "yyyy/MM/DD HH:mm:ss"
-                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
+                        <div v-for="(sItem, key) in item.config" class="c-Item " :class="sItem.span == 1 ? 'full-row' : ''"
+                            :key="key">
+                            <div class="form-title" v-if="sItem.label">{{ sItem.label }}</div>
+                            <div v-if="sItem.type === 'dateTime'">
+                                <el-date-picker v-model="formFields[key]" type="datetime" class="w-100"
+                                    format="yyyy/MM/DD HH:mm:ss" value-format="yyyy/MM/DD HH:mm:ss"
+                                    :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
                                 </el-date-picker>
                             </div>
-                            <div v-else-if = "sItem.type === 'select'">
-                                <el-select class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
+                            <div v-else-if="sItem.type === 'select'">
+                                <el-select class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[key]"
+                                    multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
                                     <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
                                         :value="op.value">
                                     </el-option>
                                 </el-select>
                             </div>
-                            <div v-else-if = "sItem.type === 'input'">
-                                <el-input class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)"></el-input>
+                            <div v-else-if="sItem.type === 'input'">
+                                <el-input class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[key]"
+                                    :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)"></el-input>
                             </div>
                         </div>
                     </div>
@@ -76,10 +74,10 @@
 </template>
 
 <script>
-import Input from "./Input.vue";
+import HandleFormItem from "./HandleFormItem.vue"
 export default {
     components: {
-        Input
+        HandleFormItem
     },
     props: {
         formConfig: {
@@ -121,7 +119,8 @@ export default {
     },
     methods: {
         isShowOther(v = []) {
-            return v.includes(-1);
+            console.log(v, "vvv")
+            return v.includes("-1");
         },
         //根据formConifg回填form表单数据
         handleFormField() {
@@ -153,7 +152,8 @@ export default {
         },
         getFormData() {
             const { formFields, allFieldsConfig } = this;
-            for (const key in formFields) {
+            return new Promise((resolve,reject)=>{
+                for (const key in formFields) {
                 if (!formFields[key]) {
                     const o = allFieldsConfig[key];
                     let prefix = "";
@@ -163,11 +163,29 @@ export default {
                         prefix = "选择"
                     }
                     this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
+                    reject("还未填写完");
                     return;
                 }
             }
-            return formFields;
-        }
+                resolve(formFields)
+            })
+            
+        },
+        onInput(key, val) {
+            this.formFields[key] = val;
+            this.$emit("input", { key, value: val });
+        },
+        onSelectChange(key, val) {
+            this.formFields[key] = val;
+            this.$emit("select", { key, value: val });
+        },
+        //复制
+        onCopy(config, key) {
+            const { formFields } = this;
+            if (config.copyFrom) {
+                formFields[key] = formFields[config.copyFrom]
+            }
+        },
     },
 }
 </script>
@@ -179,9 +197,11 @@ export default {
     /* 默认2列 */
     gap: 0 24px;
 }
-.w-100{
+
+.w-100 {
     width: 100% !important;
 }
+
 .form-item {
     background: #fff;
     padding: 20px;
@@ -197,18 +217,22 @@ export default {
 .full-row {
     grid-column: span 2;
 }
-.c-Item{
-    &:not(:last-child){
+
+.c-Item {
+    &:not(:last-child) {
         margin-bottom: 16px;
     }
 }
+
 .form-title {
     margin-bottom: 12px;
     font-size: 14px;
     font-weight: normal;
     color: #606266;
 }
-
+.p-r-20{
+    padding-right: 20px;
+}
 .orange-border {
     input {
         border-color: #f9c588;
diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue
new file mode 100644
index 0000000..868c298
--- /dev/null
+++ b/src/components/Template/HandleFormItem.vue
@@ -0,0 +1,106 @@
+<template>
+    <div class="flex w-100">
+        <div class="flex1 flex">
+            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 30" :disabled="item.disabled"
+                :class="item.borderType | getBorderType"
+                :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" :value="value" @input="onInput" />
+            <el-select v-else-if="type === 'select'" class="flex1" 
+                :multiple = "item.multiple" 
+                :class="item.borderType | getBorderType" 
+                :value = "value"
+                :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)" 
+                @change = "onSelectChange"
+                >
+                <el-option v-for="op in item.options" :key="op.value" :label="op.label"
+                    :value="op.value">
+                </el-option>
+            </el-select>
+        </div>
+        <div class="handle-row">
+            <i class="el-icon-question"></i>
+            <span @click="onCopy">复制</span>
+            <span>稽查轨迹</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        type: {//form类型  input/select等
+            type:String,
+            default:"input"
+        },
+        borderType: {
+            type: String,
+            default: ""
+        },
+        item: {
+            type: Object,
+            default: () => {
+                return {
+                    placeholder: "",
+                    maxlength: 30,
+                    label: "",
+                    disabled: false,
+                }
+            }
+        },
+        value: {
+            type: String,
+            value: "",
+        }
+    },
+    data() {
+        return {}
+    },
+    watch:{
+        value:{
+            immediate: true,
+            handler(val){
+                console.log(val,"watch")
+            }
+        }
+    },
+    filters: {
+        getBorderType(type) {
+            const typeObj = {
+                orange: "orange-border",
+                green: "green-border",
+                blue: "blue-border",
+            }
+            return typeObj[type] || ""
+        },
+
+    },
+    methods: {
+        onCopy() {
+            this.$emit("copy")
+        },
+        onInput(val){
+            this.$emit("input",val)
+        },
+        onSelectChange(val){
+            this.$emit("change",val)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.flex {
+    display: flex;
+    align-items: center;
+}
+
+.flex1 {
+    flex: 1;
+}
+
+.handle-row {
+    margin-left: 10px;
+}
+.w-100{
+    width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Template/Input.vue b/src/components/Template/Input.vue
index e4b32b7..72b42e2 100644
--- a/src/components/Template/Input.vue
+++ b/src/components/Template/Input.vue
@@ -1,13 +1,42 @@
 <template>
-    <el-input v-bind="$attrs" v-on = "$listeners" :maxlength = "$attrs.maxlength || 30" v-model = "inputValue" :class="$attrs.borderType | getBorderType" />
+    <HandleWrapper v-on="$listeners">
+        <el-input
+            :maxlength="item.maxlength || 30" 
+            :disabled="item.disabled"
+            :class="item.borderType | getBorderType"
+            :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" 
+            :value = "value"
+            @input = "onInput"
+        />
+    </HandleWrapper>
+    
 </template>
 
 <script>
+import HandleWrapper from './HandleFormItem.vue'
 export default {
+    components:{
+        HandleWrapper
+    },
     props:{
         borderType: {
             type: String,
             default: ""
+        },
+        item:{
+            type:Object,
+            default:()=>{
+                return{
+                    placeholder:"",
+                    maxlength:30,
+                    label:"",
+                    disabled:false,
+                }
+            }
+        },
+        value:{
+            type:String,
+            value:"",
         }
     },
     data(){
@@ -27,7 +56,9 @@ export default {
 
     },
     methods:{
-        
+        onInput(val){
+            this.$emit("input",val)
+        },
     }
 }
 </script>
diff --git a/src/components/Template/LineLabel.vue b/src/components/Template/LineLabel.vue
new file mode 100644
index 0000000..e77196b
--- /dev/null
+++ b/src/components/Template/LineLabel.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="content-title">
+        <div class="line"></div>
+        <div class="subtitle"> {{$attrs.label}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style lang="scss" scoped>
+ .content-title {
+      width: 100%;
+      background: #f9f9ff;
+      font-size: 0.96rem;
+      font-weight: bold;
+      padding-left: 10px;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      justify-content: flex-start;
+      text-align: left;
+
+      .line {
+        width: 2px;
+        float: left;
+        height: 16px;
+        margin-top: 12px;
+        margin-right: 8px;
+        border-left: #3178ff 3px solid;
+      }
+
+      .subtitle {
+        height: 40px;
+        line-height: 40px;
+        color: #464647 !important;
+      }
+
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Template/Table.vue b/src/components/Template/Table.vue
new file mode 100644
index 0000000..a29fb2f
--- /dev/null
+++ b/src/components/Template/Table.vue
@@ -0,0 +1,33 @@
+<template>
+    <el-table
+    :data="dataSource"
+    >
+    <el-table-column
+        v-for="(item) in columns"
+        :prop="item.prop"
+        :key = "item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
+</template>
+
+<script>
+    export default {
+        props:{
+            //[{label:"名称",prop:"name"}]
+            columns:{
+                type:Array,
+                default:[],
+            },
+            dataSource:{
+                type:Array,
+                default:[],
+            }
+        }
+        
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
index a6217c0..e2b5eb1 100644
--- a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+++ b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
@@ -6,11 +6,14 @@
 					src="@/assets/images/detail-title.png" /></div>
 			<div class="detail-content">
 				<div class="content">
-					<div class="content-title">
-						<div class="line"></div>
-						<div class="subtitle"> 试验基本信息</div>
-					</div>
+					<LineLabel label = "试验基本信息"/>
 					<BaseInfoFormPcakge ref = "baseInfo" :formConfig = "formConfig" :formData = "formData"/>
+					<LineLabel class="mt-20" label = "试验试剂信息"/>
+					<TableList class="mt-20" :columns = "sysjColumns" :dataSource = "dataSource"/>
+					<LineLabel class="mt-20" label = "仪器使用信息"/>
+					<TableList class="mt-20" :columns = "yqsColumns" :dataSource = "dataSource"/>
+					<LineLabel class="mt-20" label = "存储条件"/>
+					<BaseInfoFormPcakge ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/>
 				</div>
 			</div>
 			<button @click = "onSave">保存</button>
@@ -19,10 +22,12 @@
 </template>
   
 <script>
-import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"
+import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
+import LineLabel from "@/components/Template/LineLabel";
+import TableList from "@/components/Template/Table"
 export default {
 	name: "SWYPFXRYPZB",
-	components: { BaseInfoFormPcakge },
+	components: { BaseInfoFormPcakge,LineLabel,TableList },
 	props: {
 		value: {
 			type: {},
@@ -39,6 +44,32 @@ export default {
 	},
 	data() {
 		return {
+			dataSource:[{name:"名称1"}],
+			sysjColumns:[
+				{label:"试剂名称",prop:"name"},
+				{label:"编号",prop:"name"},
+				{label:"批号",prop:"name"},
+				{label:"浓度/含量/纯度",prop:"name"},
+				{label:"来源",prop:"name"},
+				{label:"失效日",prop:"name"},
+			],
+			yqsColumns:[
+				{label:"仪器名称",prop:"name"},
+				{label:"仪器型号",prop:"name"},
+				{label:"仪器编号",prop:"name"},
+				{label:"下次测试/校准/检定日期",prop:"name"},
+			],
+			storageFormConfig:[
+			{
+					type:"cellItem",
+					config:{
+						storageCondition:{
+							label:"存储条件",
+							type:"input",
+						},
+					}
+				}
+			],
 			formConfig: [
 				{
 					type:"cardItem",
@@ -56,7 +87,8 @@ export default {
 						methodCode:{
 							label:"方法编号",
 							type:"input",
-							borderType:"blue"
+							borderType:"blue",
+							copyFrom:"name",//复制哪个字段
 						},
 						versionNum:{
 							label:"版本号",
@@ -73,11 +105,12 @@ export default {
 						pre:{
 							label:"预填",
 							type:"select",
+							multiple:true,
 							borderType:"blue",
 							options:[
-								{label:"白光",value:1},
-								{label:"黄光",value:3},
-								{label:"其他",value:-1},
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
 							],
 							otherCode:"other1",
 						},
@@ -86,10 +119,11 @@ export default {
 							type:"select",
 							borderType:"orange",
 							otherCode:"other2",
+							multiple:true,
 							options:[
-								{label:"白光",value:1},
-								{label:"黄光",value:3},
-								{label:"其他",value:-1},
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
 							]
 						}
 					}
@@ -115,23 +149,21 @@ export default {
 	mounted() {
 		setTimeout(()=>{
 			this.formData = {
-				code:"code1",name:"name1"
+				code:"code1",name:"name1",act:["1","-1"]
 			}
-		},3000)
+		},300)
 	},
 	methods: {
-		onSave(){
-			const result = this.$refs.baseInfo.getFormData();
-			console.log(result,"reee")
+		async onSave(){
+			const result1 = await this.$refs.baseInfo.getFormData();
+			const result2 = await this.$refs.storageCondition.getFormData();
+			console.log(result1,"reee")
 		}
 	}
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
-.b1 {
-	input {
-		border-color: aquamarine;
-
-	}
+.mt-20{
+	margin-top: 20px;
 }
 </style>
\ No newline at end of file

From a506b60be7615709f64f81b34e65d02fbef09bb2 Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Tue, 30 Dec 2025 16:57:47 +0800
Subject: [PATCH 4/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?=
 =?UTF-8?q?[=E6=A8=A1=E6=9D=BF=E7=BB=84=E4=BB=B6=E6=8F=90=E5=8F=96?=
 =?UTF-8?q?=E4=B8=AD]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Template/BaseInfoFormPcakge.vue     | 200 +++++++-----
 src/components/Template/HandleFormItem.vue         | 102 ++++--
 src/components/Template/Input.vue                  | 257 +++++++++++----
 src/components/Template/Step.vue                   | 353 +++++++++++++++++++++
 .../Template/StepComponents/AddSolutionStep.vue    |  66 ++++
 .../Template/StepComponents/AutoWeighStep.vue      |  89 ++++++
 .../Template/StepComponents/CentrifugeStep.vue     |  62 ++++
 .../Template/StepComponents/CoatStep.vue           | 152 +++++++++
 .../Template/StepComponents/ContainerStep.vue      |  70 ++++
 .../Template/StepComponents/FiltrationStep.vue     |  84 +++++
 .../Template/StepComponents/ManualWeighStep.vue    |  50 +++
 src/components/Template/StepComponents/MixStep.vue |  59 ++++
 .../Template/StepComponents/PackageStep.vue        |  90 ++++++
 .../Template/StepComponents/Seal2Step.vue          | 113 +++++++
 .../Template/StepComponents/Seal3Step.vue          | 114 +++++++
 .../Template/StepComponents/StaticEndStep.vue      | 144 +++++++++
 .../Template/StepComponents/StaticStartStep.vue    | 142 +++++++++
 .../Template/StepComponents/TakePlateStep.vue      | 147 +++++++++
 .../Template/StepComponents/UltrasoundStep.vue     |  50 +++
 .../Template/StepComponents/VortexStep.vue         | 124 ++++++++
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        |  34 +-
 21 files changed, 2328 insertions(+), 174 deletions(-)
 create mode 100644 src/components/Template/Step.vue
 create mode 100644 src/components/Template/StepComponents/AddSolutionStep.vue
 create mode 100644 src/components/Template/StepComponents/AutoWeighStep.vue
 create mode 100644 src/components/Template/StepComponents/CentrifugeStep.vue
 create mode 100644 src/components/Template/StepComponents/CoatStep.vue
 create mode 100644 src/components/Template/StepComponents/ContainerStep.vue
 create mode 100644 src/components/Template/StepComponents/FiltrationStep.vue
 create mode 100644 src/components/Template/StepComponents/ManualWeighStep.vue
 create mode 100644 src/components/Template/StepComponents/MixStep.vue
 create mode 100644 src/components/Template/StepComponents/PackageStep.vue
 create mode 100644 src/components/Template/StepComponents/Seal2Step.vue
 create mode 100644 src/components/Template/StepComponents/Seal3Step.vue
 create mode 100644 src/components/Template/StepComponents/StaticEndStep.vue
 create mode 100644 src/components/Template/StepComponents/StaticStartStep.vue
 create mode 100644 src/components/Template/StepComponents/TakePlateStep.vue
 create mode 100644 src/components/Template/StepComponents/UltrasoundStep.vue
 create mode 100644 src/components/Template/StepComponents/VortexStep.vue

diff --git a/src/components/Template/BaseInfoFormPcakge.vue b/src/components/Template/BaseInfoFormPcakge.vue
index 728b79c..16b057d 100644
--- a/src/components/Template/BaseInfoFormPcakge.vue
+++ b/src/components/Template/BaseInfoFormPcakge.vue
@@ -7,7 +7,7 @@
                         :key="key">
                         <template v-if="sItem.type === 'input'">
                             <div class="form-title">{{ sItem.label }}</div>
-                            <HandleFormItem :item="sItem" :value="formFields[key]" @input="onInput(key, $event)"
+                            <HandleFormItem :item="sItem" v-model="formFields[key]" 
                                 @copy="onCopy(sItem, key)" />
                         </template>
                     </div>
@@ -20,17 +20,17 @@
                         <div class="p-r-20">
                             <div class="form-title">{{ sItem.label }}</div>
                             <div class="flex ">
-                                <HandleFormItem type="select" :item="sItem" :value="formFields[key]"
+                                <HandleFormItem type="select" :item="sItem" v-model="formFields[key]"
                                     @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" />
 
                             </div>
                         </div>
-                        <div  class="p-r-20">
+                        <div  class="p-l-20">
                             <div v-show="isShowOther(formFields[key])">
                                 <div class="form-title">其他</div>
                                 <div class="flex">
-                                    <el-input v-model="formFields[sItem.otherCode]"
-                                        :class="sItem.borderType | getBorderType"></el-input>
+                                    <HandleFormItem :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]" 
+                                        @copy="onCopy(sItem, key)" />
                                 </div>
                             </div>
 
@@ -42,27 +42,21 @@
             <template v-else-if="item.type === 'cellItem'">
                 <div class="form-item ">
                     <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
-                    <div class="grid-container">
-                        <div v-for="(sItem, key) in item.config" class="c-Item " :class="sItem.span == 1 ? 'full-row' : ''"
+                    <div class="grid-container gap2">
+                        <div v-for="(sItem, key) in item.config" class="c-Item" :class="getSpanClass(sItem)"
                             :key="key">
                             <div class="form-title" v-if="sItem.label">{{ sItem.label }}</div>
                             <div v-if="sItem.type === 'dateTime'">
-                                <el-date-picker v-model="formFields[key]" type="datetime" class="w-100"
-                                    format="yyyy/MM/DD HH:mm:ss" value-format="yyyy/MM/DD HH:mm:ss"
-                                    :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
-                                </el-date-picker>
+                                <HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]"
+                                    @copy="onCopy(sItem, key)" />
                             </div>
                             <div v-else-if="sItem.type === 'select'">
-                                <el-select class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[key]"
-                                    multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
-                                    <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
-                                        :value="op.value">
-                                    </el-option>
-                                </el-select>
+                                <HandleFormItem type="select" :item="sItem" v-model="formFields[key]"
+                                    @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" />
                             </div>
                             <div v-else-if="sItem.type === 'input'">
-                                <el-input class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[key]"
-                                    :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)"></el-input>
+                                <HandleFormItem :item="sItem" v-model="formFields[key]" 
+                                @copy="onCopy(sItem, key)" />
                             </div>
                         </div>
                     </div>
@@ -91,64 +85,110 @@ export default {
     },
     data() {
         return {
-            formFields: {},//表单双休绑定字段
+            formFields: {},//表单绑定字段
             allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
         };
     },
     watch: {
-        immediate: true,
         formData: {
+            immediate: true,
+            deep: true, // 深度监听，以便检测嵌套对象变化
             handler(v) {
                 this.handleFormField();
             }
         }
     },
+ 
     mounted() {
         this.handleFormField();
     },
-    filters: {
-        getBorderType(type) {
-            const typeObj = {
-                orange: "orange-border",
-                green: "green-border",
-                blue: "blue-border",
-            }
-            return typeObj[type] || ""
-        },
 
-    },
     methods: {
+        //根据span判断一行显示几列
+        getSpanClass(sItem){
+            const spanArr = ["full-row","","three-row"]
+            if(sItem.span){
+                return spanArr[sItem.span-1]
+            }
+            return ""
+        },
+        getOtherItem(sItem){
+            return {
+                label:"其他",
+                fillType: sItem.fillType,
+            }
+        },
         isShowOther(v = []) {
-            console.log(v, "vvv")
-            return v.includes("-1");
+            // 确保v是数组类型，以避免类型错误
+            const arr = Array.isArray(v) ? v : [v];
+            return arr.map(val => String(val)).includes("-1");
         },
-        //根据formConifg回填form表单数据
+        // 根据formConfig回填form表单数据
         handleFormField() {
             const result = {};
             let config = {};
-            const { formConfig, formData } = this;
+            const { formConfig, formData, formFields } = this;
+            
+            // 遍历配置
             formConfig.forEach((item) => {
                 if (item.config) {
+                    // 合并配置项
                     config = { ...config, ...item.config }
+                    
+                    // 处理每个配置项
                     Object.keys(item.config).forEach(key => {
                         const currentConfig = item.config[key];
-                        result[key] = formData[key];
-                        if (currentConfig.otherCode) {//如果有其它的字段需要赋值给formData
+                        let value = formData[key];
+                        
+                        // 处理多选下拉框的默认值，确保数组类型
+                        if (currentConfig.type === 'select' && currentConfig.multiple) {
+                            if (!Array.isArray(value)) {
+                                // 转换为数组格式，确保兼容性
+                                value = value ? [value] : [];
+                            }
+                        }
+                        
+                        // 处理null/undefined值，保持一致性
+                        if (value === null || value === undefined) {
+                            // 根据类型设置默认值
+                            if (currentConfig.type === 'select' && currentConfig.multiple) {
+                                value = [];
+                            } else {
+                                value = '';
+                            }
+                        }
+                        
+                        // 如果formFields中已经有值，保持原值（用户输入或之前设置的值）
+                        if (formFields[key] !== null && 
+                            formFields[key] !== undefined && 
+                            formFields[key] !== ''&&
+                            typeof formFields[key] !== 'object'
+                        ) {
+                            // 保留原值，不使用formData中的值
+                            result[key] = formFields[key];
+                        } else {
+                            // 使用formData中的值
+                            result[key] = value;
+                        }
+                        
+                        // 处理特殊字段 - "其他"字段
+                        if (currentConfig.otherCode) {
                             const { otherCode } = currentConfig;
-                            result[otherCode] = formData[otherCode]
+                            result[otherCode] = formData[otherCode] || '';
                             config[otherCode] = { label: "其他", type: "input" }
                         }
                     });
-                    console.log(item.config, "config")
+                    
+                    // 处理可能存在的直接otherCode字段
                     if (item.config?.otherCode) {
                         config[item.config?.otherCode] = item.config?.otherCode;
                     }
                 }
-
-            })
+            });
+            console.log(result,"initResult")
+            // 更新表单字段
             this.formFields = result;
             this.allFieldsConfig = config;
-            console.log(config, "allFieldsConfig")
         },
         getFormData() {
             const { formFields, allFieldsConfig } = this;
@@ -176,7 +216,18 @@ export default {
             this.$emit("input", { key, value: val });
         },
         onSelectChange(key, val) {
-            this.formFields[key] = val;
+            // 获取对应的配置
+            const currentConfig = this.allFieldsConfig[key];
+            
+            // 确保多选下拉框的值是数组类型
+            if (currentConfig && currentConfig.multiple) {
+                // 多选情况，确保值为数组类型
+                this.formFields[key] = Array.isArray(val) ? val : (val ? [val] : []);
+            } else {
+                // 单选情况
+                this.formFields[key] = val;
+            }
+            
             this.$emit("select", { key, value: val });
         },
         //复制
@@ -197,9 +248,12 @@ export default {
     /* 默认2列 */
     gap: 0 24px;
 }
+.gap2{
+    gap:0 64px;
+}
 
 .w-100 {
-    width: 100% !important;
+    width: 100%;
 }
 
 .form-item {
@@ -217,13 +271,24 @@ export default {
 .full-row {
     grid-column: span 2;
 }
+.three-row {
+    grid-column: span 3;
+}
+
 
 .c-Item {
     &:not(:last-child) {
         margin-bottom: 16px;
     }
 }
-
+.eo{
+      &:nth-child(even) {
+        padding-left: 20px;
+    }
+    &:nth-child(odd) {
+        padding-right: 20px;
+    }
+}
 .form-title {
     margin-bottom: 12px;
     font-size: 14px;
@@ -233,49 +298,8 @@ export default {
 .p-r-20{
     padding-right: 20px;
 }
-.orange-border {
-    input {
-        border-color: #f9c588;
-
-        &:focus {
-            border-color: #f9c588;
-        }
-
-        &:hover {
-            border-color: #f9c588;
-        }
-    }
-
-}
-
-.green-border {
-    input {
-        border-color: green;
-
-        &:focus {
-            border-color: green;
-        }
-
-        &:hover {
-            border-color: green;
-        }
-    }
-
-}
-
-.blue-border {
-    input {
-        border-color: #4ea2ff;
-
-        &:focus {
-            border-color: #4ea2ff;
-        }
-
-        &:hover {
-            border-color: #4ea2ff;
-        }
-    }
-
+.p-l-20{
+    padding-left: 20px;
 }
 
 .fs-16 {
diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue
index 868c298..b6daccc 100644
--- a/src/components/Template/HandleFormItem.vue
+++ b/src/components/Template/HandleFormItem.vue
@@ -2,12 +2,13 @@
     <div class="flex w-100">
         <div class="flex1 flex">
             <el-input v-if="type === 'input'" :maxlength="item.maxlength || 30" :disabled="item.disabled"
-                :class="item.borderType | getBorderType"
-                :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" :value="value" @input="onInput" />
+                :class="item.fillType | getFillType"
+                :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" 
+                v-model="inputValue" />
             <el-select v-else-if="type === 'select'" class="flex1" 
                 :multiple = "item.multiple" 
-                :class="item.borderType | getBorderType" 
-                :value = "value"
+                :class="item.fillType | getFillType" 
+                v-model="inputValue"
                 :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)" 
                 @change = "onSelectChange"
                 >
@@ -15,9 +16,17 @@
                     :value="op.value">
                 </el-option>
             </el-select>
+            <el-date-picker 
+                    v-else-if="type === 'dateTime'" class="flex1" 
+                    :class="item.fillType | getFillType" 
+                    v-model="inputValue"
+                    format="yyyy/MM/DD HH:mm:ss" value-format="yyyy/MM/DD HH:mm:ss"
+                    :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)">
+                </el-date-picker>
         </div>
         <div class="handle-row">
             <i class="el-icon-question"></i>
+            <el-checkbox></el-checkbox>
             <span @click="onCopy">复制</span>
             <span>稽查轨迹</span>
         </div>
@@ -31,7 +40,7 @@ export default {
             type:String,
             default:"input"
         },
-        borderType: {
+        fillType: {
             type: String,
             default: ""
         },
@@ -46,28 +55,36 @@ export default {
                 }
             }
         },
+        // v-model 值
         value: {
-            type: String,
-            value: "",
-        }
+            type: [String, Number,Array],
+            default: ''
+        },
     },
     data() {
-        return {}
+        return {
+            inputValue: this.value
+        }
     },
-    watch:{
-        value:{
-            immediate: true,
-            handler(val){
-                console.log(val,"watch")
+    watch: {
+        value(newVal) {
+            console.log(newVal,"value")
+            this.inputValue = newVal
+        },
+        inputValue(newVal) {
+            if(this.type === "input"){
+                this.$emit('input', newVal)
+            }else{
+                this.$emit('change', newVal)
             }
         }
     },
     filters: {
-        getBorderType(type) {
+        getFillType(type) {
             const typeObj = {
-                orange: "orange-border",
+                actFill: "orange-border",//实际填写的边框颜色
                 green: "green-border",
-                blue: "blue-border",
+                preFill: "blue-border",//预填写的边框颜色
             }
             return typeObj[type] || ""
         },
@@ -77,8 +94,8 @@ export default {
         onCopy() {
             this.$emit("copy")
         },
-        onInput(val){
-            this.$emit("input",val)
+        onBlur(val){
+            this.$emit("blur",val)
         },
         onSelectChange(val){
             this.$emit("change",val)
@@ -87,7 +104,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .flex {
     display: flex;
     align-items: center;
@@ -103,4 +120,49 @@ export default {
 .w-100{
     width: 100%;
 }
+
+.orange-border {
+    input {
+        border-color: #f9c588;
+
+        &:focus {
+            border-color: #f9c588;
+        }
+
+        &:hover {
+            border-color: #f9c588;
+        }
+    }
+
+}
+
+.green-border {
+    input {
+        border-color: green;
+
+        &:focus {
+            border-color: green;
+        }
+
+        &:hover {
+            border-color: green;
+        }
+    }
+
+}
+
+.blue-border {
+    input {
+        border-color: #4ea2ff;
+
+        &:focus {
+            border-color: #4ea2ff;
+        }
+
+        &:hover {
+            border-color: #4ea2ff;
+        }
+    }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Template/Input.vue b/src/components/Template/Input.vue
index 72b42e2..8f347de 100644
--- a/src/components/Template/Input.vue
+++ b/src/components/Template/Input.vue
@@ -1,111 +1,258 @@
 <template>
-    <HandleWrapper v-on="$listeners">
-        <el-input
-            :maxlength="item.maxlength || 30" 
-            :disabled="item.disabled"
-            :class="item.borderType | getBorderType"
-            :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" 
-            :value = "value"
-            @input = "onInput"
-        />
-    </HandleWrapper>
-    
+    <el-input
+        v-model="inputValue"
+        :maxlength="maxLength"
+        :disabled="disabled"
+        :readonly="readonly"
+        :clearable="clearable"
+        :show-password="showPassword"
+        :placeholder="placeholder || ('请输入' + label)"
+        :class="borderClass"
+        @blur="onBlur"
+        @focus="onFocus"
+        @change="onChange"
+        @clear="onClear"
+        @keyup.enter="onEnter"
+    />
 </template>
 
 <script>
-import HandleWrapper from './HandleFormItem.vue'
 export default {
-    components:{
-        HandleWrapper
-    },
-    props:{
-        borderType: {
+    name: 'CustomInput',
+    props: {
+        // v-model 值
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        // 标签名称
+        label: {
+            type: String,
+            default: ''
+        },
+        // 最大长度
+        maxLength: {
+            type: Number,
+            default: null
+        },
+        // 是否禁用
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        // 是否只读
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        // 是否显示清除按钮
+        clearable: {
+            type: Boolean,
+            default: true
+        },
+        // 是否显示密码
+        showPassword: {
+            type: Boolean,
+            default: false
+        },
+        // 占位符
+        placeholder: {
             type: String,
-            default: ""
-        },
-        item:{
-            type:Object,
-            default:()=>{
-                return{
-                    placeholder:"",
-                    maxlength:30,
-                    label:"",
-                    disabled:false,
-                }
+            default: ''
+        },
+        // 边框类型
+        fillType: {
+            type: String,
+            default: '',
+            validator: value => {
+                return ['', 'actFill', 'green', 'preFill'].includes(value)
             }
         },
-        value:{
-            type:String,
-            value:"",
+        // 输入框尺寸
+        size: {
+            type: String,
+            default: 'default',
+            validator: value => {
+                return ['large', 'default', 'small'].includes(value)
+            }
         }
     },
-    data(){
+    data() {
         return {
-            inputValue: this.$attrs.modelValue
+            inputValue: this.value
         }
     },
-    filters: {
-        getBorderType(type) {
-            const typeObj = {
-                orange: "orange-border",
-                green: "green-border",
-                blue: "blue-border",
+    computed: {
+        borderClass() {
+            const typeMap = {
+                actFill: 'orange-border',
+                green: 'green-border', 
+                preFill: 'blue-border'
             }
-            return typeObj[type] || ""
+            return typeMap[this.fillType] || ''
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.inputValue = newVal
         },
-
+        inputValue(newVal) {
+            this.$emit('input', newVal)
+        }
     },
-    methods:{
-        onInput(val){
-            this.$emit("input",val)
+    methods: {
+        onBlur(event) {
+            this.$emit('blur', event)
+        },
+        onFocus(event) {
+            this.$emit('focus', event)
+        },
+        onChange(value) {
+            this.$emit('change', value)
         },
+        onClear() {
+            this.$emit('clear')
+        },
+        onEnter(event) {
+            this.$emit('enter', event)
+        },
+        // 公开方法：清除输入
+        clear() {
+            this.inputValue = ''
+            this.$emit('input', '')
+            this.$emit('clear')
+        },
+        // 公开方法：聚焦
+        focus() {
+            this.$el.querySelector('input').focus()
+        },
+        // 公开方法：失焦
+        blur() {
+            this.$el.querySelector('input').blur()
+        }
+    },
+    filters: {
+        getFillType(type) {
+            const typeMap = {
+                actFill: 'orange-border',
+                green: 'green-border',
+                preFill: 'blue-border'
+            }
+            return typeMap[type] || ''
+        }
     }
 }
 </script>
 
 <style lang="scss">
+// 基础样式增强
+:deep(.el-input) {
+    .el-input__inner {
+        transition: border-color 0.2s ease, box-shadow 0.2s ease;
+        
+        &:focus {
+            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+        }
+    }
+}
+
+// 橙色边框样式
 .orange-border {
-    input {
+    :deep(.el-input__inner) {
         border-color: #f9c588;
 
         &:focus {
             border-color: #f9c588;
+            box-shadow: 0 0 0 2px rgba(249, 197, 136, 0.2);
         }
 
         &:hover {
             border-color: #f9c588;
         }
     }
-
 }
 
+// 绿色边框样式
 .green-border {
-    input {
-        border-color: green;
+    :deep(.el-input__inner) {
+        border-color: #67c23a;
 
         &:focus {
-            border-color: green;
+            border-color: #67c23a;
+            box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
         }
 
         &:hover {
-            border-color: green;
+            border-color: #67c23a;
         }
     }
-
 }
 
+// 蓝色边框样式
 .blue-border {
-    input {
-        border-color: #4ea2ff;
+    :deep(.el-input__inner) {
+        border-color: #409eff;
 
         &:focus {
-            border-color: #4ea2ff;
+            border-color: #409eff;
+            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
         }
 
         &:hover {
-            border-color: #4ea2ff;
+            border-color: #409eff;
         }
     }
+}
+
+// 禁用状态样式
+:deep(.el-input.is-disabled) {
+    .el-input__inner {
+        background-color: #f5f7fa;
+        border-color: #e4e7ed;
+        color: #c0c4cc;
+    }
+}
+
+// 只读状态样式
+:deep(.el-input.is-readonly) {
+    .el-input__inner {
+        background-color: #fafafa;
+        cursor: not-allowed;
+    }
+}
+
+// 清除按钮样式
+:deep(.el-input__clear) {
+    color: #909399;
+    transition: color 0.2s ease;
+    
+    &:hover {
+        color: #409eff;
+    }
+}
+
+// 密码显示按钮样式
+:deep(.el-input__password) {
+    color: #909399;
+    transition: color 0.2s ease;
+    
+    &:hover {
+        color: #409eff;
+    }
+}
 
+// 输入框尺寸样式
+:deep(.el-input--large) {
+    .el-input__inner {
+        height: 40px;
+        font-size: 16px;
+    }
+}
+
+:deep(.el-input--small) {
+    .el-input__inner {
+        height: 32px;
+        font-size: 13px;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Template/Step.vue b/src/components/Template/Step.vue
new file mode 100644
index 0000000..52ae962
--- /dev/null
+++ b/src/components/Template/Step.vue
@@ -0,0 +1,353 @@
+<template>
+  <div class="step-container">
+    <div class="step-header">
+      <el-button type="primary" @click="addStep" icon="el-icon-plus">添加步骤</el-button>
+    </div>
+    
+    <div class="step-list">
+      <div 
+        v-for="(step, index) in steps" 
+        :key="step.id" 
+        class="step-item"
+      >
+        <div class="step-header-item">
+          <el-button 
+            type="text" 
+            @click="removeStep(index)" 
+            icon="el-icon-delete"
+            class="delete-btn"
+            :disabled="steps.length === 1"
+          ></el-button>
+        </div>
+        
+        <div class="step-content">
+            <span class="step-title">步骤{{ index + 1 }}</span>
+              <el-select 
+                class = "step-type-select"
+                v-model="step.type" 
+                @change="onTypeChange(index)"
+                placeholder="请选择"
+              >
+                <el-option 
+                  v-for="option in stepTypes" 
+                  :key="option.value" 
+                  :label="option.label" 
+                  :value="option.value"
+                ></el-option>
+              </el-select>
+          
+        <!-- 根据步骤类型显示对应的表单 -->
+        <component :is="getStepComponent(step.type)" 
+                    :step-data="step.formData"
+                    @update="onFormUpdate(index, $event)">
+        </component>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ContainerStep from './StepComponents/ContainerStep.vue'
+import CentrifugeStep from './StepComponents/CentrifugeStep.vue'
+import AutoWeighStep from './StepComponents/AutoWeighStep.vue'
+import ManualWeighStep from './StepComponents/ManualWeighStep.vue'
+import AddSolutionStep from './StepComponents/AddSolutionStep.vue'
+import MixStep from './StepComponents/MixStep.vue'
+import UltrasoundStep from './StepComponents/UltrasoundStep.vue'
+import FiltrationStep from './StepComponents/FiltrationStep.vue'
+import PackageStep from './StepComponents/PackageStep.vue'
+import Seal2Step from './StepComponents/Seal2Step.vue'
+import Seal3Step from './StepComponents/Seal3Step.vue'
+import VortexStep from './StepComponents/VortexStep.vue'
+import CoatStep from './StepComponents/CoatStep.vue'
+import StaticStartStep from './StepComponents/StaticStartStep.vue'
+import StaticEndStep from './StepComponents/StaticEndStep.vue'
+import TakePlateStep from './StepComponents/TakePlateStep.vue'
+
+export default {
+  name: 'Step',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      stepTypes: [
+        { label: '容器选择', value: 'container' },
+        { label: '离心', value: 'centrifuge' },
+        { label: '自动称量', value: 'autoWeigh' },
+        { label: '手动称量', value: 'manualWeigh' },
+        { label: '加入溶液', value: 'addSolution' },
+        { label: '混合', value: 'mix' },
+        { label: '超声', value: 'ultrasound' },
+        { label: '抽滤', value: 'filtration' },
+        { label: '分装', value: 'package' },
+        { label: '封装2管', value: 'seal2' },
+        { label: '封装3管', value: 'seal3' },
+        { label: '漩涡混匀', value: 'vortex' },
+        { label: '包被', value: 'coat' },
+        { label: '静置开始', value: 'staticStart' },
+        { label: '静置结束', value: 'staticEnd' },
+        { label: '取板', value: 'takePlate' }
+      ],
+      steps: [],
+      stepId: 1,
+      componentMap: null
+    }
+  },
+  computed: {
+    stepComponentMap() {
+      if (!this.componentMap) {
+        this.componentMap = {
+          'container': 'ContainerStep',
+          'centrifuge': 'CentrifugeStep',
+          'autoWeigh': 'AutoWeighStep',
+          'manualWeigh': 'ManualWeighStep',
+          'addSolution': 'AddSolutionStep',
+          'mix': 'MixStep',
+          'ultrasound': 'UltrasoundStep',
+          'filtration': 'FiltrationStep',
+          'package': 'PackageStep',
+          'seal2': 'Seal2Step',
+          'seal3': 'Seal3Step',
+          'vortex': 'VortexStep',
+          'coat': 'CoatStep',
+          'staticStart': 'StaticStartStep',
+          'staticEnd': 'StaticEndStep',
+          'takePlate': 'TakePlateStep'
+        }
+      }
+      return this.componentMap
+    }
+  },
+  components: {
+    ContainerStep,
+    CentrifugeStep,
+    AutoWeighStep,
+    ManualWeighStep,
+    AddSolutionStep,
+    MixStep,
+    UltrasoundStep,
+    FiltrationStep,
+    PackageStep,
+    Seal2Step,
+    Seal3Step,
+    VortexStep,
+    CoatStep,
+    StaticStartStep,
+    StaticEndStep,
+    TakePlateStep
+  },
+  created() {
+    // 初始化步骤数据
+    if (this.value && this.value.length > 0) {
+      this.steps = this.value.map((step) => ({
+        id: this.stepId++,
+        type: step.type || '',
+        formData: step.formData || {}
+      }))
+    } else {
+      // 默认添加一个步骤
+      this.addStep()
+    }
+  },
+  watch: {
+    steps: {
+      handler(newVal) {
+        this.$emit('input', newVal.map(step => ({
+          type: step.type,
+          formData: step.formData
+        })))
+      },
+      deep: true
+    }
+  },
+  methods: {
+    addStep() {
+      try {
+        this.steps.push({
+          id: this.stepId++,
+          type: '',
+          formData: {}
+        })
+        this.$emit('step-added', this.steps.length)
+      } catch (error) {
+        console.error('添加步骤失败:', error)
+        this.$message.error('添加步骤失败，请重试')
+      }
+    },
+    
+    removeStep(index) {
+      if (this.steps.length > 1) {
+        const removedStep = this.steps.splice(index, 1)[0]
+        this.$emit('step-removed', { index, step: removedStep, remaining: this.steps.length })
+      } else {
+        this.$message.warning('至少需要保留一个步骤')
+      }
+    },
+    
+    onTypeChange(index) {
+      // 切换步骤类型时重置表单数据，并确保数据更新
+      const oldType = this.steps[index].type
+      this.$set(this.steps[index], 'formData', {})
+      // 可选：添加类型变化的回调
+      this.$emit('step-type-changed', {
+        index,
+        newType: this.steps[index].type,
+        oldType
+      })
+    },
+    
+    onFormUpdate(stepIndex, formData) {
+      this.steps[stepIndex].formData = formData
+    },
+    
+    getStepComponent(type) {
+      // 使用计算属性中的映射，提高性能
+      return this.stepComponentMap[type] 
+    },
+    
+    // 公共方法：获取所有步骤数据
+    getFormData() {
+      return new Promise((resolve, reject) => {
+        const stepData = this.steps.map(step => ({
+          type: step.type,
+          ...step.formData
+        }))
+        resolve(stepData)
+      })
+    },
+    
+    // 公共方法：设置步骤数据
+    setStepData(data) {
+      if (Array.isArray(data)) {
+        this.steps = data.map(step => ({
+          id: this.stepId++,
+          type: step.type || '',
+          formData: step.formData || {}
+        }))
+      }
+    },
+    
+    // 公共方法：重置所有步骤
+    resetSteps() {
+      this.steps = [{
+        id: this.stepId++,
+        type: '',
+        formData: {}
+      }]
+      this.$emit('steps-reset')
+    },
+    
+    // 公共方法：获取指定步骤的数据
+    getStepDataByIndex(index) {
+      if (index >= 0 && index < this.steps.length) {
+        return {
+          type: this.steps[index].type,
+          formData: this.steps[index].formData
+        }
+      }
+      return null
+    },
+    
+    // 公共方法：验证所有步骤
+    validateSteps() {
+      const errors = []
+      this.steps.forEach((step, index) => {
+        if (!step.type) {
+          errors.push(`步骤 ${index + 1}: 请选择步骤类型`)
+        }
+        // 可以在这里添加更具体的表单验证逻辑
+      })
+      return {
+        isValid: errors.length === 0,
+        errors
+      }
+    },
+    
+    // 公共方法：批量导入步骤数据
+    importSteps(stepDataArray) {
+      if (Array.isArray(stepDataArray)) {
+        this.steps = stepDataArray.map((step, index) => ({
+          id: this.stepId++,
+          type: step.type || '',
+          formData: step.formData || {}
+        }))
+        this.$emit('steps-imported', this.steps.length)
+      }
+    },
+    
+    // 公共方法：获取步骤统计信息
+    getStepStatistics() {
+      const stats = {
+        total: this.steps.length,
+        byType: {},
+        filled: 0
+      }
+      
+      this.steps.forEach(step => {
+        // 统计各类型数量
+        if (step.type) {
+          stats.byType[step.type] = (stats.byType[step.type] || 0) + 1
+        }
+        
+        // 统计已填写的步骤
+        if (step.type && Object.keys(step.formData).length > 0) {
+          stats.filled++
+        }
+      })
+      
+      return stats
+    }
+  },
+ 
+}
+</script>
+
+<style lang="scss" scoped>
+.step-container {
+  .step-header {
+    margin-bottom: 20px;
+    padding: 15px;
+    background: #f5f7fa;
+    border-radius: 6px;
+  }
+  
+  .step-list {
+    .step-item {
+      margin-bottom: 20px;
+      border: 1px solid #e4e7ed;
+      border-radius: 6px;
+      overflow: hidden;
+
+        .step-title {
+          margin-right: 10px;
+        }
+        .step-type-select{
+            width: 200px;
+            margin-right: 10px;
+        }
+        .delete-btn {
+          color: #f56c6c;
+          
+          &:hover {
+            color: #f78989;
+          }
+          
+          &:disabled {
+            color: #c0c4cc;
+          }
+      }
+      
+      .step-content {
+        padding: 20px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/AddSolutionStep.vue b/src/components/Template/StepComponents/AddSolutionStep.vue
new file mode 100644
index 0000000..3313f85
--- /dev/null
+++ b/src/components/Template/StepComponents/AddSolutionStep.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="add-solution-step">
+    <el-form label-width="120px">
+      <el-form-item label="溶液名称">
+        <el-input v-model="formData.solutionName" placeholder="请输入溶液名称"></el-input>
+      </el-form-item>
+      <el-form-item label="加入体积">
+        <div style="display: flex; gap: 10px;">
+          <el-input v-model="formData.volume" placeholder="体积"></el-input>
+          <el-select v-model="formData.unit" style="width: 80px;">
+            <el-option label="μl" value="μl"></el-option>
+            <el-option label="ml" value="ml"></el-option>
+            <el-option label="l" value="l"></el-option>
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="浓度">
+        <el-input v-model="formData.concentration" placeholder="请输入浓度"></el-input>
+      </el-form-item>
+      <el-form-item label="温度(℃)">
+        <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input>
+      </el-form-item>
+      <el-form-item label="加入速度">
+        <el-select v-model="formData.additionSpeed" placeholder="请选择加入速度">
+          <el-option label="慢速" value="slow"></el-option>
+          <el-option label="中速" value="medium"></el-option>
+          <el-option label="快速" value="fast"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AddSolutionStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        solutionName: '',
+        volume: '',
+        unit: 'ml',
+        concentration: '',
+        temperature: '',
+        additionSpeed: '',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/AutoWeighStep.vue b/src/components/Template/StepComponents/AutoWeighStep.vue
new file mode 100644
index 0000000..e0c4f01
--- /dev/null
+++ b/src/components/Template/StepComponents/AutoWeighStep.vue
@@ -0,0 +1,89 @@
+
+<!-- 自动称重步骤表单 -->
+<template>
+  <div class="flex">
+      <div class="form-label">选择</div>
+      <HandleFormItem 
+        class = "w-120"
+        :item="fieldConfigs.notes"
+        v-model="formData.notes"
+      />
+  </div>
+</template>
+
+<script>
+import HandleFormItem from '../HandleFormItem.vue'
+import Input from '../Input.vue'
+export default {
+  name: 'AutoWeighStep',
+  components: {
+    HandleFormItem,
+    Input
+  },
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        targetWeight: '123',
+        tolerance: '',
+        sampleName: '',
+        containerWeight: '',
+        notes: ''
+      },
+      // 字段配置
+      fieldConfigs: {
+        targetWeight: {
+          label: '目标重量',
+          placeholder: '请输入目标重量',
+          maxlength: 50
+        },
+        tolerance: {
+          label: '允许误差',
+          placeholder: '请输入允许误差',
+          maxlength: 20
+        },
+        sampleName: {
+          label: '样品名称',
+          placeholder: '请输入样品名称',
+          maxlength: 100
+        },
+        containerWeight: {
+          label: '容器重量',
+          placeholder: '请输入容器重量',
+          maxlength: 20
+        },
+        notes: {
+          label: '备注',
+          placeholder: '请输入备注信息',
+          maxlength: 500
+        }
+      }
+    }
+  },
+  created() {
+    // 合并传入的数据
+    if (this.stepData) {
+      this.formData = { ...this.formData, ...this.stepData }
+    }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    onFieldChange(field, value) {
+      this.formData[field] = value
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.w-120{
+    width: 120px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/CentrifugeStep.vue b/src/components/Template/StepComponents/CentrifugeStep.vue
new file mode 100644
index 0000000..52d5b07
--- /dev/null
+++ b/src/components/Template/StepComponents/CentrifugeStep.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="centrifuge-step">
+    <el-form label-width="120px">
+      <el-form-item label="转速(rpm)">
+        <el-input v-model="formData.speed" placeholder="请输入转速"></el-input>
+      </el-form-item>
+      <el-form-item label="时间(min)">
+        <el-input v-model="formData.time" placeholder="请输入时间"></el-input>
+      </el-form-item>
+      <el-form-item label="温度(℃)">
+        <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input>
+      </el-form-item>
+      <el-form-item label="加速度">
+        <el-select v-model="formData.acceleration" placeholder="请选择加速度">
+          <el-option label="慢" value="slow"></el-option>
+          <el-option label="中" value="medium"></el-option>
+          <el-option label="快" value="fast"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="减速度">
+        <el-select v-model="formData.deceleration" placeholder="请选择减速度">
+          <el-option label="慢" value="slow"></el-option>
+          <el-option label="中" value="medium"></el-option>
+          <el-option label="快" value="fast"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CentrifugeStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        speed: '',
+        time: '',
+        temperature: '',
+        acceleration: '',
+        deceleration: '',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/CoatStep.vue b/src/components/Template/StepComponents/CoatStep.vue
new file mode 100644
index 0000000..bc94107
--- /dev/null
+++ b/src/components/Template/StepComponents/CoatStep.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="coat-step">
+    <el-form label-width="120px">
+      <el-form-item label="包被物质">
+        <el-input v-model="formData.coatMaterial" placeholder="请输入包被物质名称"></el-input>
+      </el-form-item>
+      
+      <el-form-item label="包被浓度">
+        <el-input v-model="formData.concentration" placeholder="请输入浓度值">
+          <el-select v-model="formData.concentrationUnit" slot="append" style="width: 80px;">
+            <el-option label="mg/ml" value="mg/ml"></el-option>
+            <el-option label="μg/ml" value="μg/ml"></el-option>
+            <el-option label="ng/ml" value="ng/ml"></el-option>
+            <el-option label="%" value="%"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="包被体积">
+        <el-input v-model="formData.volume" placeholder="请输入体积">
+          <el-select v-model="formData.unit" slot="append" style="width: 80px;">
+            <el-option label="ml" value="ml"></el-option>
+            <el-option label="μl" value="μl"></el-option>
+            <el-option label="l" value="l"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="包被时间">
+        <el-input v-model="formData.time" placeholder="请输入时间">
+          <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;">
+            <el-option label="min" value="min"></el-option>
+            <el-option label="h" value="h"></el-option>
+            <el-option label="d" value="d"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="温度条件">
+        <el-input v-model="formData.temperature" placeholder="请输入温度">
+          <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="pH值">
+        <el-input-number 
+          v-model="formData.pH" 
+          :min="1" 
+          :max="14" 
+          :step="0.1"
+          :precision="1"
+          placeholder="请输入pH值"
+        ></el-input-number>
+      </el-form-item>
+      
+      <el-form-item label="容器类型">
+        <el-select v-model="formData.containerType" placeholder="请选择容器类型">
+          <el-option label="微孔板" value="microplate"></el-option>
+          <el-option label="培养皿" value="petriDish"></el-option>
+          <el-option label="载玻片" value="slide"></el-option>
+          <el-option label="试管" value="testTube"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="包被方法">
+        <el-radio-group v-model="formData.method">
+          <el-radio label="passive">被动吸附</el-radio>
+          <el-radio label="active">共价结合</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      
+      <el-form-item label="洗涤步骤">
+        <el-checkbox-group v-model="formData.washSteps">
+          <el-checkbox label="包被前洗涤">包被前洗涤</el-checkbox>
+          <el-checkbox label="包被后洗涤">包被后洗涤</el-checkbox>
+          <el-checkbox label="封闭前洗涤">封闭前洗涤</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="封闭处理">
+        <el-switch v-model="formData.blocking"></el-switch>
+      </el-form-item>
+      
+      <el-form-item v-if="formData.blocking" label="封闭剂">
+        <el-input v-model="formData.blockingAgent" placeholder="请输入封闭剂名称"></el-input>
+      </el-form-item>
+      
+      <el-form-item v-if="formData.blocking" label="封闭时间">
+        <el-input v-model="formData.blockingTime" placeholder="请输入封闭时间">
+          <el-select v-model="formData.blockingTimeUnit" slot="append" style="width: 80px;">
+            <el-option label="min" value="min"></el-option>
+            <el-option label="h" value="h"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CoatStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        coatMaterial: '',
+        concentration: '',
+        concentrationUnit: 'mg/ml',
+        volume: '',
+        unit: 'ml',
+        time: '',
+        timeUnit: 'h',
+        temperature: '',
+        temperatureUnit: '℃',
+        pH: '',
+        containerType: '',
+        method: 'passive',
+        washSteps: [],
+        blocking: false,
+        blockingAgent: '',
+        blockingTime: '',
+        blockingTimeUnit: 'min',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/ContainerStep.vue b/src/components/Template/StepComponents/ContainerStep.vue
new file mode 100644
index 0000000..8618a62
--- /dev/null
+++ b/src/components/Template/StepComponents/ContainerStep.vue
@@ -0,0 +1,70 @@
+<!-- 容器步骤表单 -->
+<template>
+	<div class="flex items-center">
+		<div>容器选择</div>
+		<HandleFormItem class="w-auto" type="select" :item="fieldConfigs.containerType"
+			@change="onContainerTypeChange"
+			v-model="formData.containerType" />
+	</div>
+</template>
+
+<script>
+import HandleFormItem from '../HandleFormItem.vue'
+
+export default {
+	name: 'ContainerStep',
+	components: {
+		HandleFormItem
+	},
+	props: ['stepData'],
+	data() {
+		return {
+			formData: {
+				containerType: '',
+			},
+			// 字段配置
+			fieldConfigs: {
+				containerType: {
+					label: '容器选择',
+					placeholder: '请选择',
+					options: [
+						{ label: '离心管', value: 'centrifugeTube' },
+						{ label: '试管', value: 'testTube' },
+						{ label: '烧杯', value: 'beaker' },
+						{ label: '容量瓶', value: 'volumetricFlask' },
+						{ label: '培养皿', value: 'petriDish' }
+					]
+				}
+			}
+		}
+	},
+	created() {
+		this.formData = { ...this.formData, ...this.stepData }
+	},
+	watch: {
+		formData: {
+			handler(newVal) {
+				console.log(newVal,"newVal")
+				this.$emit('update', newVal)
+			},
+			deep: true
+		}
+	},
+	methods: {
+		onContainerTypeChange(val) {
+			this.formData.containerType = val
+		}
+	}	
+}
+</script>
+<style lang="scss" scoped>
+.flex {
+	display: flex;
+}
+.items-center {
+	align-items: center;
+}
+.w-auto {
+  width: auto;
+}
+</style>
diff --git a/src/components/Template/StepComponents/FiltrationStep.vue b/src/components/Template/StepComponents/FiltrationStep.vue
new file mode 100644
index 0000000..4dbf33c
--- /dev/null
+++ b/src/components/Template/StepComponents/FiltrationStep.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="filtration-step">
+    <el-form label-width="120px">
+      <el-form-item label="滤膜类型">
+        <el-select v-model="formData.filterType" placeholder="请选择滤膜类型">
+          <el-option label="0.22μm" value="0.22"></el-option>
+          <el-option label="0.45μm" value="0.45"></el-option>
+          <el-option label="0.8μm" value="0.8"></el-option>
+          <el-option label="1.2μm" value="1.2"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="压力">
+        <el-input v-model="formData.pressure" placeholder="请输入压力值">
+          <el-select v-model="formData.pressureUnit" slot="append" style="width: 80px;">
+            <el-option label="kPa" value="kPa"></el-option>
+            <el-option label="bar" value="bar"></el-option>
+            <el-option label="psi" value="psi"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="过滤时间">
+        <el-input v-model="formData.time" placeholder="请输入时间">
+          <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;">
+            <el-option label="min" value="min"></el-option>
+            <el-option label="s" value="s"></el-option>
+            <el-option label="h" value="h"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="温度">
+        <el-input v-model="formData.temperature" placeholder="请输入温度">
+          <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FiltrationStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        filterType: '',
+        pressure: '',
+        pressureUnit: 'kPa',
+        time: '',
+        timeUnit: 'min',
+        temperature: '',
+        temperatureUnit: '℃',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/ManualWeighStep.vue b/src/components/Template/StepComponents/ManualWeighStep.vue
new file mode 100644
index 0000000..cc471a5
--- /dev/null
+++ b/src/components/Template/StepComponents/ManualWeighStep.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="manual-weigh-step">
+    <el-form label-width="120px">
+      <el-form-item label="实际重量(g)">
+        <el-input v-model="formData.actualWeight" placeholder="请输入实际重量"></el-input>
+      </el-form-item>
+      <el-form-item label="目标重量(g)">
+        <el-input v-model="formData.targetWeight" placeholder="请输入目标重量"></el-input>
+      </el-form-item>
+      <el-form-item label="差值(g)">
+        <el-input v-model="formData.difference" placeholder="自动计算"></el-input>
+      </el-form-item>
+      <el-form-item label="样品名称">
+        <el-input v-model="formData.sampleName" placeholder="请输入样品名称"></el-input>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ManualWeighStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        actualWeight: '',
+        targetWeight: '',
+        difference: '',
+        sampleName: '',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/MixStep.vue b/src/components/Template/StepComponents/MixStep.vue
new file mode 100644
index 0000000..305bdb0
--- /dev/null
+++ b/src/components/Template/StepComponents/MixStep.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="mix-step">
+    <el-form label-width="120px">
+      <el-form-item label="混合方式">
+        <el-select v-model="formData.method" placeholder="请选择混合方式">
+          <el-option label="涡旋混匀" value="vortex"></el-option>
+          <el-option label="颠倒混匀" value="invert"></el-option>
+          <el-option label="移液器吹打" value="pipette"></el-option>
+          <el-option label="磁力搅拌" value="magnetic"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="混合时间(s)">
+        <el-input v-model="formData.time" placeholder="请输入混合时间"></el-input>
+      </el-form-item>
+      <el-form-item label="混合速度">
+        <el-select v-model="formData.speed" placeholder="请选择混合速度">
+          <el-option label="低速" value="low"></el-option>
+          <el-option label="中速" value="medium"></el-option>
+          <el-option label="高速" value="high"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="温度(℃)">
+        <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MixStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        method: '',
+        time: '',
+        speed: '',
+        temperature: '',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/PackageStep.vue b/src/components/Template/StepComponents/PackageStep.vue
new file mode 100644
index 0000000..fbf505c
--- /dev/null
+++ b/src/components/Template/StepComponents/PackageStep.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="package-step">
+    <el-form label-width="120px">
+      <el-form-item label="分装容器">
+        <el-select v-model="formData.containerType" placeholder="请选择分装容器">
+          <el-option label="离心管" value="centrifugeTube"></el-option>
+          <el-option label="试管" value="testTube"></el-option>
+          <el-option label="样品瓶" value="vial"></el-option>
+          <el-option label="微孔板" value="microplate"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="分装数量">
+        <el-input-number 
+          v-model="formData.quantity" 
+          :min="1" 
+          :max="100" 
+          :step="1"
+        ></el-input-number>
+      </el-form-item>
+      
+      <el-form-item label="每份体积">
+        <el-input v-model="formData.volume" placeholder="请输入体积">
+          <el-select v-model="formData.unit" slot="append" style="width: 80px;">
+            <el-option label="ml" value="ml"></el-option>
+            <el-option label="μl" value="μl"></el-option>
+            <el-option label="l" value="l"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="分装方式">
+        <el-radio-group v-model="formData.method">
+          <el-radio label="manual">手动分装</el-radio>
+          <el-radio label="auto">自动分装</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      
+      <el-form-item label="温度要求">
+        <el-input v-model="formData.temperature" placeholder="请输入温度">
+          <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PackageStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        containerType: '',
+        quantity: 1,
+        volume: '',
+        unit: 'ml',
+        method: 'manual',
+        temperature: '',
+        temperatureUnit: '℃',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/Seal2Step.vue b/src/components/Template/StepComponents/Seal2Step.vue
new file mode 100644
index 0000000..c7b68f6
--- /dev/null
+++ b/src/components/Template/StepComponents/Seal2Step.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="seal2-step">
+    <el-form label-width="120px">
+      <el-form-item label="封装方式">
+        <el-select v-model="formData.method" placeholder="请选择封装方式">
+          <el-option label="热封" value="heat"></el-option>
+          <el-option label="机械封" value="mechanical"></el-option>
+          <el-option label="封膜" value="membrane"></el-option>
+          <el-option label="盖子封" value="cap"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="密封材料">
+        <el-select v-model="formData.material" placeholder="请选择密封材料">
+          <el-option label="铝箔" value="aluminum"></el-option>
+          <el-option label="塑料膜" value="plastic"></el-option>
+          <el-option label="橡胶塞" value="rubber"></el-option>
+          <el-option label="螺旋盖" value="screwCap"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="压力参数">
+        <el-input v-model="formData.pressure" placeholder="请输入压力值">
+          <el-select v-model="formData.pressureUnit" slot="append" style="width: 80px;">
+            <el-option label="kPa" value="kPa"></el-option>
+            <el-option label="bar" value="bar"></el-option>
+            <el-option label="psi" value="psi"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="温度参数">
+        <el-input v-model="formData.temperature" placeholder="请输入温度">
+          <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="时间参数">
+        <el-input v-model="formData.time" placeholder="请输入时间">
+          <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;">
+            <el-option label="s" value="s"></el-option>
+            <el-option label="min" value="min"></el-option>
+            <el-option label="h" value="h"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="封管数量">
+        <el-input-number 
+          v-model="formData.tubeCount" 
+          :min="2" 
+          :max="2" 
+          :step="1"
+        ></el-input-number>
+      </el-form-item>
+      
+      <el-form-item label="质量检查">
+        <el-checkbox-group v-model="formData.qualityChecks">
+          <el-checkbox label="密封性检查">密封性检查</el-checkbox>
+          <el-checkbox label="外观检查">外观检查</el-checkbox>
+          <el-checkbox label="标识检查">标识检查</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Seal2Step',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        method: '',
+        material: '',
+        pressure: '',
+        pressureUnit: 'kPa',
+        temperature: '',
+        temperatureUnit: '℃',
+        time: '',
+        timeUnit: 's',
+        tubeCount: 2,
+        qualityChecks: [],
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/Seal3Step.vue b/src/components/Template/StepComponents/Seal3Step.vue
new file mode 100644
index 0000000..ebc9cfd
--- /dev/null
+++ b/src/components/Template/StepComponents/Seal3Step.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="seal3-step">
+    <el-form label-width="120px">
+      <el-form-item label="封装方式">
+        <el-select v-model="formData.method" placeholder="请选择封装方式">
+          <el-option label="热封" value="heat"></el-option>
+          <el-option label="机械封" value="mechanical"></el-option>
+          <el-option label="封膜" value="membrane"></el-option>
+          <el-option label="盖子封" value="cap"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="密封材料">
+        <el-select v-model="formData.material" placeholder="请选择密封材料">
+          <el-option label="铝箔" value="aluminum"></el-option>
+          <el-option label="塑料膜" value="plastic"></el-option>
+          <el-option label="橡胶塞" value="rubber"></el-option>
+          <el-option label="螺旋盖" value="screwCap"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="压力参数">
+        <el-input v-model="formData.pressure" placeholder="请输入压力值">
+          <el-select v-model="formData.pressureUnit" slot="append" style="width: 80px;">
+            <el-option label="kPa" value="kPa"></el-option>
+            <el-option label="bar" value="bar"></el-option>
+            <el-option label="psi" value="psi"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="温度参数">
+        <el-input v-model="formData.temperature" placeholder="请输入温度">
+          <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="时间参数">
+        <el-input v-model="formData.time" placeholder="请输入时间">
+          <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;">
+            <el-option label="s" value="s"></el-option>
+            <el-option label="min" value="min"></el-option>
+            <el-option label="h" value="h"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="封管数量">
+        <el-input-number 
+          v-model="formData.tubeCount" 
+          :min="3" 
+          :max="3" 
+          :step="1"
+        ></el-input-number>
+      </el-form-item>
+      
+      <el-form-item label="质量检查">
+        <el-checkbox-group v-model="formData.qualityChecks">
+          <el-checkbox label="密封性检查">密封性检查</el-checkbox>
+          <el-checkbox label="外观检查">外观检查</el-checkbox>
+          <el-checkbox label="标识检查">标识检查</el-checkbox>
+          <el-checkbox label="批次检查">批次检查</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Seal3Step',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        method: '',
+        material: '',
+        pressure: '',
+        pressureUnit: 'kPa',
+        temperature: '',
+        temperatureUnit: '℃',
+        time: '',
+        timeUnit: 's',
+        tubeCount: 3,
+        qualityChecks: [],
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/StaticEndStep.vue b/src/components/Template/StepComponents/StaticEndStep.vue
new file mode 100644
index 0000000..a02c8dd
--- /dev/null
+++ b/src/components/Template/StepComponents/StaticEndStep.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="static-end-step">
+    <el-form label-width="120px">
+      <el-form-item label="实际时间">
+        <el-input v-model="formData.actualDuration" placeholder="请输入实际静置时间">
+          <el-select v-model="formData.actualDurationUnit" slot="append" style="width: 80px;">
+            <el-option label="min" value="min"></el-option>
+            <el-option label="h" value="h"></el-option>
+            <el-option label="d" value="d"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="结束时间">
+        <el-date-picker
+          v-model="formData.endTime"
+          type="datetime"
+          placeholder="请选择结束时间"
+          format="yyyy-MM-dd HH:mm"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+      
+      <el-form-item label="实际温度">
+        <el-input v-model="formData.actualTemperature" placeholder="请输入实际温度">
+          <el-select v-model="formData.actualTemperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="样品状态">
+        <el-select v-model="formData.sampleState" placeholder="请选择样品状态">
+          <el-option label="正常" value="normal"></el-option>
+          <el-option label="异常" value="abnormal"></el-option>
+          <el-option label="有变化" value="changed"></el-option>
+          <el-option label="无变化" value="unchanged"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="观察结果">
+        <el-checkbox-group v-model="formData.observationResults">
+          <el-checkbox label="颜色变化">颜色变化</el-checkbox>
+          <el-checkbox label="沉淀形成">沉淀形成</el-checkbox>
+          <el-checkbox label="相分离">相分离</el-checkbox>
+          <el-checkbox label="结晶">结晶</el-checkbox>
+          <el-checkbox label="无异常">无异常</el-checkbox>
+          <el-checkbox label="其他">其他</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="容器状态">
+        <el-select v-model="formData.finalContainerState" placeholder="请选择最终容器状态">
+          <el-option label="密封" value="sealed"></el-option>
+          <el-option label="半密封" value="semiSealed"></el-option>
+          <el-option label="开放" value="open"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="后续处理">
+        <el-checkbox-group v-model="formData.nextSteps">
+          <el-checkbox label="直接进行下一步">直接进行下一步</el-checkbox>
+          <el-checkbox label="需要预处理">需要预处理</el-checkbox>
+          <el-checkbox label="需要检测">需要检测</el-checkbox>
+          <el-checkbox label="需要储存">需要储存</el-checkbox>
+          <el-checkbox label="需要转移">需要转移</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="处理结果">
+        <el-radio-group v-model="formData.processResult">
+          <el-radio label="success">静置成功</el-radio>
+          <el-radio label="partial">部分成功</el-radio>
+          <el-radio label="failed">静置失败</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      
+      <el-form-item v-if="formData.processResult !== 'success'" label="失败原因">
+        <el-input v-model="formData.failureReason" placeholder="请输入失败原因"></el-input>
+      </el-form-item>
+      
+      <el-form-item label="质量评估">
+        <el-rate v-model="formData.qualityScore" show-text></el-rate>
+      </el-form-item>
+      
+      <el-form-item label="最终观察">
+        <el-input 
+          v-model="formData.finalObservation" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入最终观察结果"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StaticEndStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        actualDuration: '',
+        actualDurationUnit: 'h',
+        endTime: '',
+        actualTemperature: '',
+        actualTemperatureUnit: '℃',
+        sampleState: '',
+        observationResults: [],
+        finalContainerState: '',
+        nextSteps: [],
+        processResult: 'success',
+        failureReason: '',
+        qualityScore: 5,
+        finalObservation: '',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/StaticStartStep.vue b/src/components/Template/StepComponents/StaticStartStep.vue
new file mode 100644
index 0000000..3957a40
--- /dev/null
+++ b/src/components/Template/StepComponents/StaticStartStep.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="static-start-step">
+    <el-form label-width="120px">
+      <el-form-item label="静置目的">
+        <el-input v-model="formData.purpose" placeholder="请输入静置目的"></el-input>
+      </el-form-item>
+      
+      <el-form-item label="预计时间">
+        <el-input v-model="formData.duration" placeholder="请输入预计时间">
+          <el-select v-model="formData.durationUnit" slot="append" style="width: 80px;">
+            <el-option label="min" value="min"></el-option>
+            <el-option label="h" value="h"></el-option>
+            <el-option label="d" value="d"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="温度要求">
+        <el-input v-model="formData.temperature" placeholder="请输入温度">
+          <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="容器状态">
+        <el-select v-model="formData.containerState" placeholder="请选择容器状态">
+          <el-option label="密封" value="sealed"></el-option>
+          <el-option label="半密封" value="semiSealed"></el-option>
+          <el-option label="开放" value="open"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="环境条件">
+        <el-checkbox-group v-model="formData.environmentConditions">
+          <el-checkbox label="避光">避光</el-checkbox>
+          <el-checkbox label="恒温">恒温</el-checkbox>
+          <el-checkbox label="静置">静置</el-checkbox>
+          <el-checkbox label="无震动">无震动</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="静置位置">
+        <el-select v-model="formData.position" placeholder="请选择静置位置">
+          <el-option label="室温" value="roomTemp"></el-option>
+          <el-option label="冷藏" value="refrigerated"></el-option>
+          <el-option label="冷冻" value="frozen"></el-option>
+          <el-option label="恒温箱" value="incubator"></el-option>
+          <el-option label="水浴" value="waterBath"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="容器类型">
+        <el-select v-model="formData.containerType" placeholder="请选择容器类型">
+          <el-option label="离心管" value="centrifugeTube"></el-option>
+          <el-option label="试管" value="testTube"></el-option>
+          <el-option label="烧杯" value="beaker"></el-option>
+          <el-option label="培养皿" value="petriDish"></el-option>
+          <el-option label="容量瓶" value="volumetricFlask"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="体积范围">
+        <el-input v-model="formData.volume" placeholder="请输入体积">
+          <el-select v-model="formData.volumeUnit" slot="append" style="width: 80px;">
+            <el-option label="ml" value="ml"></el-option>
+            <el-option label="μl" value="μl"></el-option>
+            <el-option label="l" value="l"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="开始时间">
+        <el-date-picker
+          v-model="formData.startTime"
+          type="datetime"
+          placeholder="请选择开始时间"
+          format="yyyy-MM-dd HH:mm"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+      
+      <el-form-item label="观察记录">
+        <el-checkbox-group v-model="formData.observationRecords">
+          <el-checkbox label="颜色变化">颜色变化</el-checkbox>
+          <el-checkbox label="沉淀形成">沉淀形成</el-checkbox>
+          <el-checkbox label="相分离">相分离</el-checkbox>
+          <el-checkbox label="结晶">结晶</el-checkbox>
+          <el-checkbox label="其他">其他</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StaticStartStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        purpose: '',
+        duration: '',
+        durationUnit: 'h',
+        temperature: '',
+        temperatureUnit: '℃',
+        containerState: '',
+        environmentConditions: [],
+        position: '',
+        containerType: '',
+        volume: '',
+        volumeUnit: 'ml',
+        startTime: '',
+        observationRecords: [],
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/TakePlateStep.vue b/src/components/Template/StepComponents/TakePlateStep.vue
new file mode 100644
index 0000000..530065b
--- /dev/null
+++ b/src/components/Template/StepComponents/TakePlateStep.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="take-plate-step">
+    <el-form label-width="120px">
+      <el-form-item label="取板目的">
+        <el-input v-model="formData.purpose" placeholder="请输入取板目的"></el-input>
+      </el-form-item>
+      
+      <el-form-item label="微孔板类型">
+        <el-select v-model="formData.plateType" placeholder="请选择微孔板类型">
+          <el-option label="96孔板" value="96well"></el-option>
+          <el-option label="48孔板" value="48well"></el-option>
+          <el-option label="24孔板" value="24well"></el-option>
+          <el-option label="12孔板" value="12well"></el-option>
+          <el-option label="6孔板" value="6well"></el-option>
+          <el-option label="384孔板" value="384well"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="取板位置">
+        <el-select v-model="formData.location" placeholder="请选择取板位置">
+          <el-option label="培养箱" value="incubator"></el-option>
+          <el-option label="冷藏" value="refrigerator"></el-option>
+          <el-option label="室温" value="roomTemp"></el-option>
+          <el-option label="水浴" value="waterBath"></el-option>
+          <el-option label="摇床" value="shaker"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="取板时间">
+        <el-date-picker
+          v-model="formData.takeTime"
+          type="datetime"
+          placeholder="请选择取板时间"
+          format="yyyy-MM-dd HH:mm"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+      
+      <el-form-item label="板子状态">
+        <el-select v-model="formData.plateState" placeholder="请选择板子状态">
+          <el-option label="正常" value="normal"></el-option>
+          <el-option label="有污染" value="contaminated"></el-option>
+          <el-option label="干燥" value="dry"></el-option>
+          <el-option label="湿润" value="wet"></el-option>
+          <el-option label="有沉淀" value="precipitate"></el-option>
+          <el-option label="有结晶" value="crystal"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="处理要求">
+        <el-checkbox-group v-model="formData.processRequirements">
+          <el-checkbox label="立即处理">立即处理</el-checkbox>
+          <el-checkbox label="室温放置">室温放置</el-checkbox>
+          <el-checkbox label="冷藏保存">冷藏保存</el-checkbox>
+          <el-checkbox label="冷冻保存">冷冻保存</el-checkbox>
+          <el-checkbox label="避光保存">避光保存</el-checkbox>
+          <el-checkbox label="需要检测">需要检测</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="取板数量">
+        <el-input-number 
+          v-model="formData.quantity" 
+          :min="1" 
+          :max="10" 
+          :step="1"
+        ></el-input-number>
+      </el-form-item>
+      
+      <el-form-item label="操作者">
+        <el-input v-model="formData.operator" placeholder="请输入操作者姓名"></el-input>
+      </el-form-item>
+      
+      <el-form-item label="后续处理">
+        <el-radio-group v-model="formData.nextAction">
+          <el-radio label="immediate">立即处理</el-radio>
+          <el-radio label="delayed">延迟处理</el-radio>
+          <el-radio label="storage">储存待处理</el-radio>
+          <el-radio label="discard">丢弃</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      
+      <el-form-item label="质量检查">
+        <el-checkbox-group v-model="formData.qualityChecks">
+          <el-checkbox label="外观检查">外观检查</el-checkbox>
+          <el-checkbox label="标识检查">标识检查</el-checkbox>
+          <el-checkbox label="完整性检查">完整性检查</el-checkbox>
+          <el-checkbox label="污染检查">污染检查</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      
+      <el-form-item label="特殊要求">
+        <el-input 
+          v-model="formData.specialRequirements" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入特殊要求或注意事项"
+        ></el-input>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TakePlateStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        purpose: '',
+        plateType: '',
+        location: '',
+        takeTime: '',
+        plateState: '',
+        processRequirements: [],
+        quantity: 1,
+        operator: '',
+        nextAction: 'immediate',
+        qualityChecks: [],
+        specialRequirements: '',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/UltrasoundStep.vue b/src/components/Template/StepComponents/UltrasoundStep.vue
new file mode 100644
index 0000000..08eeece
--- /dev/null
+++ b/src/components/Template/StepComponents/UltrasoundStep.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="ultrasound-step">
+    <el-form label-width="120px">
+      <el-form-item label="功率(%)">
+        <el-input v-model="formData.power" placeholder="请输入功率百分比"></el-input>
+      </el-form-item>
+      <el-form-item label="时间(min)">
+        <el-input v-model="formData.time" placeholder="请输入超声时间"></el-input>
+      </el-form-item>
+      <el-form-item label="温度(℃)">
+        <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input>
+      </el-form-item>
+      <el-form-item label="频率(kHz)">
+        <el-input v-model="formData.frequency" placeholder="请输入频率"></el-input>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="formData.notes" type="textarea" :rows="2"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UltrasoundStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        power: '',
+        time: '',
+        temperature: '',
+        frequency: '',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/Template/StepComponents/VortexStep.vue b/src/components/Template/StepComponents/VortexStep.vue
new file mode 100644
index 0000000..8fe6df6
--- /dev/null
+++ b/src/components/Template/StepComponents/VortexStep.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="vortex-step">
+    <el-form label-width="120px">
+      <el-form-item label="混匀方式">
+        <el-select v-model="formData.method" placeholder="请选择混匀方式">
+          <el-option label="漩涡混匀" value="vortex"></el-option>
+          <el-option label="摇床混匀" value="shaker"></el-option>
+          <el-option label="磁力搅拌" value="magnetic"></el-option>
+          <el-option label="机械搅拌" value="mechanical"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="混匀时间">
+        <el-input v-model="formData.time" placeholder="请输入时间">
+          <el-select v-model="formData.timeUnit" slot="append" style="width: 80px;">
+            <el-option label="s" value="s"></el-option>
+            <el-option label="min" value="min"></el-option>
+            <el-option label="h" value="h"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="转速设置">
+        <el-input v-model="formData.speed" placeholder="请输入转速">
+          <el-select v-model="formData.speedUnit" slot="append" style="width: 80px;">
+            <el-option label="rpm" value="rpm"></el-option>
+            <el-option label="Hz" value="Hz"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="体积范围">
+        <el-input v-model="formData.volume" placeholder="请输入体积">
+          <el-select v-model="formData.unit" slot="append" style="width: 80px;">
+            <el-option label="ml" value="ml"></el-option>
+            <el-option label="μl" value="μl"></el-option>
+            <el-option label="l" value="l"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="温度控制">
+        <el-input v-model="formData.temperature" placeholder="请输入温度">
+          <el-select v-model="formData.temperatureUnit" slot="append" style="width: 60px;">
+            <el-option label="℃" value="℃"></el-option>
+            <el-option label="℉" value="℉"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="容器类型">
+        <el-select v-model="formData.containerType" placeholder="请选择容器类型">
+          <el-option label="离心管" value="centrifugeTube"></el-option>
+          <el-option label="试管" value="testTube"></el-option>
+          <el-option label="烧杯" value="beaker"></el-option>
+          <el-option label="培养皿" value="petriDish"></el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item label="混匀模式">
+        <el-radio-group v-model="formData.mode">
+          <el-radio label="continuous">连续混匀</el-radio>
+          <el-radio label="interval">间歇混匀</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      
+      <el-form-item v-if="formData.mode === 'interval'" label="间歇时间">
+        <el-input v-model="formData.intervalTime" placeholder="请输入间歇时间">
+          <el-select v-model="formData.intervalTimeUnit" slot="append" style="width: 80px;">
+            <el-option label="s" value="s"></el-option>
+            <el-option label="min" value="min"></el-option>
+          </el-select>
+        </el-input>
+      </el-form-item>
+      
+      <el-form-item label="备注">
+        <el-input 
+          v-model="formData.notes" 
+          type="textarea" 
+          :rows="3" 
+          placeholder="请输入备注信息"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VortexStep',
+  props: ['stepData'],
+  data() {
+    return {
+      formData: {
+        method: '',
+        time: '',
+        timeUnit: 's',
+        speed: '',
+        speedUnit: 'rpm',
+        volume: '',
+        unit: 'ml',
+        temperature: '',
+        temperatureUnit: '℃',
+        containerType: '',
+        mode: 'continuous',
+        intervalTime: '',
+        intervalTimeUnit: 's',
+        notes: ''
+      }
+    }
+  },
+  created() {
+    this.formData = { ...this.formData, ...this.stepData }
+  },
+  watch: {
+    formData: {
+      handler(newVal) {
+        this.$emit('update', newVal)
+      },
+      deep: true
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
index e2b5eb1..efff979 100644
--- a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+++ b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
@@ -12,8 +12,9 @@
 					<TableList class="mt-20" :columns = "sysjColumns" :dataSource = "dataSource"/>
 					<LineLabel class="mt-20" label = "仪器使用信息"/>
 					<TableList class="mt-20" :columns = "yqsColumns" :dataSource = "dataSource"/>
-					<LineLabel class="mt-20" label = "存储条件"/>
 					<BaseInfoFormPcakge ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/>
+					<LineLabel class="mt-20" label = "操作步骤"/>
+					<Step ref = "stepRef"></Step>
 				</div>
 			</div>
 			<button @click = "onSave">保存</button>
@@ -24,10 +25,11 @@
 <script>
 import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
 import LineLabel from "@/components/Template/LineLabel";
-import TableList from "@/components/Template/Table"
+import TableList from "@/components/Template/Table";
+import Step from "@/components/Template/Step";
 export default {
 	name: "SWYPFXRYPZB",
-	components: { BaseInfoFormPcakge,LineLabel,TableList },
+	components: { BaseInfoFormPcakge,LineLabel,TableList,Step },
 	props: {
 		value: {
 			type: {},
@@ -67,6 +69,15 @@ export default {
 							label:"存储条件",
 							type:"input",
 						},
+						storageCondition1:{
+							label:"存储条件",
+							type:"select",
+							options:[
+								{label:"正常",value:"1"},
+								{label:"特殊",value:"2"},
+							],
+						},
+						
 					}
 				}
 			],
@@ -87,13 +98,13 @@ export default {
 						methodCode:{
 							label:"方法编号",
 							type:"input",
-							borderType:"blue",
+							fillType:"preFill",
 							copyFrom:"name",//复制哪个字段
 						},
 						versionNum:{
 							label:"版本号",
 							type:"input",
-							borderType:"orange"
+							fillType:"actFill"
 						},
 
 					}
@@ -106,7 +117,7 @@ export default {
 							label:"预填",
 							type:"select",
 							multiple:true,
-							borderType:"blue",
+							fillType:"preFill",
 							options:[
 								{label:"白光",value:"1"},
 								{label:"黄光",value:"3"},
@@ -117,7 +128,7 @@ export default {
 						act:{
 							label:"实际",
 							type:"select",
-							borderType:"orange",
+							fillType:"actFill",
 							otherCode:"other2",
 							multiple:true,
 							options:[
@@ -151,13 +162,14 @@ export default {
 			this.formData = {
 				code:"code1",name:"name1",act:["1","-1"]
 			}
-		},300)
+		},3000)
 	},
 	methods: {
 		async onSave(){
-			const result1 = await this.$refs.baseInfo.getFormData();
-			const result2 = await this.$refs.storageCondition.getFormData();
-			console.log(result1,"reee")
+			// 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")
 		}
 	}
 };

From 67d0140c275831d99f6f58d7e1e43278a5222c99 Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Tue, 30 Dec 2025 22:54:50 +0800
Subject: [PATCH 5/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?=
 =?UTF-8?q?[=E6=A8=A1=E6=9D=BF=E7=BB=84=E4=BB=B6=E6=8F=90=E5=8F=96ing]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                        | 10 ++++
 src/components/Template/BaseInfoFormPcakge.vue     | 65 +++++++++++++++++++++-
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        | 56 +++++++++++++++----
 3 files changed, 120 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5346a74..d64ea38 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/Template/BaseInfoFormPcakge.vue b/src/components/Template/BaseInfoFormPcakge.vue
index 16b057d..e8015ee 100644
--- a/src/components/Template/BaseInfoFormPcakge.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
index efff979..3e82d4d 100644
--- a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+++ b/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")
 		}
 	}
 };

From 25c3cd6ecc6cd410a3f31a013100cbd21ccdcc09 Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Wed, 31 Dec 2025 11:27:27 +0800
Subject: [PATCH 6/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?=
 =?UTF-8?q?[=E7=BB=84=E4=BB=B6=E6=8F=90=E5=8F=96ing]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Template/HandleFormItem.vue         | 44 +++++++++++++++++++---
 src/store/index.js                                 |  4 +-
 src/store/modules/template.js                      | 17 +++++++++
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        |  2 +
 .../comps/template/mixins/templateMixin.js         | 16 ++++++++
 5 files changed, 76 insertions(+), 7 deletions(-)
 create mode 100644 src/store/modules/template.js
 create mode 100644 src/views/business/comps/template/mixins/templateMixin.js

diff --git a/src/components/Template/HandleFormItem.vue b/src/components/Template/HandleFormItem.vue
index b6daccc..ca6e0f2 100644
--- a/src/components/Template/HandleFormItem.vue
+++ b/src/components/Template/HandleFormItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="flex w-100">
         <div class="flex1 flex">
-            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 30" :disabled="item.disabled"
+            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 30" :disabled="getDisabled()"
                 :class="item.fillType | getFillType"
                 :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" 
                 v-model="inputValue" />
@@ -9,6 +9,7 @@
                 :multiple = "item.multiple" 
                 :class="item.fillType | getFillType" 
                 v-model="inputValue"
+                :disabled="getDisabled()"
                 :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)" 
                 @change = "onSelectChange"
                 >
@@ -20,11 +21,13 @@
                     v-else-if="type === 'dateTime'" class="flex1" 
                     :class="item.fillType | getFillType" 
                     v-model="inputValue"
+                    :disabled="getDisabled()"
                     format="yyyy/MM/DD HH:mm:ss" value-format="yyyy/MM/DD HH:mm:ss"
                     :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)">
                 </el-date-picker>
         </div>
-        <div class="handle-row">
+        <!-- qc才能操作 -->
+        <div class="handle-row" v-if="isShowHandle()">
             <i class="el-icon-question"></i>
             <el-checkbox></el-checkbox>
             <span @click="onCopy">复制</span>
@@ -40,10 +43,6 @@ export default {
             type:String,
             default:"input"
         },
-        fillType: {
-            type: String,
-            default: ""
-        },
         item: {
             type: Object,
             default: () => {
@@ -91,6 +90,30 @@ export default {
 
     },
     methods: {
+        //判断是否显示操作按钮
+        isShowHandle(){
+            const {fillType} = this.item;
+            const {templateStatus} = this.$store.state.template;
+            //只有当模板状态是qc和实际填报时，才显示操作按钮
+            return (templateStatus === "qc" || templateStatus === "actFill")&&fillType === "actFill";
+        },
+        //判断是否禁用
+        getDisabled(){
+            const {item} = this;
+            const {fillType} = item;
+            if(item.hasOwnProperty("disabled")){
+                return item.disabled
+            }else{
+                const {templateStatus} = this.$store.state.template;
+                if(fillType === "actFill"){//当模板状态是实际填写时，只有当fillType是actFill时才能填写
+                    return templateStatus !== "actFill"
+                }else if(fillType === "preFill"){//当模板状态是预填写时，只有当fillType是preFill才能填写
+                    return templateStatus !== "preFill"
+                }else{
+                    return true
+                }
+            }
+        },
         onCopy() {
             this.$emit("copy")
         },
@@ -132,6 +155,9 @@ export default {
         &:hover {
             border-color: #f9c588;
         }
+        &:disabled {
+            border-color: #f9c588 !important;
+        }
     }
 
 }
@@ -147,6 +173,9 @@ export default {
         &:hover {
             border-color: green;
         }
+        &:disabled {
+            border-color: green !important;
+        }
     }
 
 }
@@ -162,6 +191,9 @@ export default {
         &:hover {
             border-color: #4ea2ff;
         }
+        &:disabled {
+            border-color: #4ea2ff !important;
+        }
     }
 
 }
diff --git a/src/store/index.js b/src/store/index.js
index 97aaef8..4817bba 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,6 +7,7 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
+import template from './modules/template'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    template
   },
   getters
 })
diff --git a/src/store/modules/template.js b/src/store/modules/template.js
new file mode 100644
index 0000000..889759a
--- /dev/null
+++ b/src/store/modules/template.js
@@ -0,0 +1,17 @@
+const template = {
+  namespaced: true,
+  state: {
+    templateStatus:"",//模板状态 "actFill" 实际填报 "preFill" 预填 ”qc“
+  },
+  mutations: {
+    SET_TEMPLATE_STATUS: (state, status) => {
+      state.templateStatus = status
+    }
+  },
+  actions: {
+    setTemplateStatus({ commit }, status) {
+      commit('SET_TEMPLATE_STATUS', status)
+    }
+  }
+}
+export default template
\ No newline at end of file
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
index 3e82d4d..229796f 100644
--- a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+++ b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
@@ -30,9 +30,11 @@ import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
 import LineLabel from "@/components/Template/LineLabel";
 import TableList from "@/components/Template/Table";
 import Step from "@/components/Template/Step";
+import templateMixin from "../../mixins/templateMixin";
 export default {
 	name: "SWYPFXRYPZB",
 	components: { BaseInfoFormPcakge,LineLabel,TableList,Step },
+	mixins: [templateMixin],
 	props: {
 		value: {
 			type: {},
diff --git a/src/views/business/comps/template/mixins/templateMixin.js b/src/views/business/comps/template/mixins/templateMixin.js
new file mode 100644
index 0000000..e1ad914
--- /dev/null
+++ b/src/views/business/comps/template/mixins/templateMixin.js
@@ -0,0 +1,16 @@
+export default {
+  data() {
+  
+  },
+  mounted() {
+        setTimeout(() => {
+          this.setTemplateStatus("actFill")
+        }, 4000)
+  },
+  methods: {
+    setTemplateStatus(status) {
+      this.$store.commit('template/SET_TEMPLATE_STATUS', status)
+    }
+  },
+
+}

From 3cdb9ab9958721fd5baea195b43fb5a97e639539 Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Wed, 31 Dec 2025 21:55:18 +0800
Subject: [PATCH 7/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?=
 =?UTF-8?q?[=E7=94=9F=E7=89=A9=E6=A0=B7=E5=93=81=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E6=BA=B6=E6=B6=B2=E9=85=8D=E5=88=B6=E8=A1=A8=20]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Template/BaseInfoFormPcakge.vue     |  75 +++---
 src/components/Template/CustomTable.vue            | 163 +++++++++++
 src/components/Template/Step.vue                   |  62 +++--
 .../Template/StepComponents/ContainerStep.vue      |   1 +
 src/store/modules/template.js                      |   2 +-
 .../business/comps/template/TemplateTable.vue      |  24 +-
 .../business/comps/template/comps/sp/Demo.vue      | 297 +++++++++++++++++++++
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        | 152 +++++++----
 .../comps/template/mixins/templateMixin.js         |   6 +-
 src/views/business/template/list.vue               |   2 +-
 10 files changed, 668 insertions(+), 116 deletions(-)
 create mode 100644 src/components/Template/CustomTable.vue
 create mode 100644 src/views/business/comps/template/comps/sp/Demo.vue

diff --git a/src/components/Template/BaseInfoFormPcakge.vue b/src/components/Template/BaseInfoFormPcakge.vue
index e8015ee..3b1b55a 100644
--- a/src/components/Template/BaseInfoFormPcakge.vue
+++ b/src/components/Template/BaseInfoFormPcakge.vue
@@ -67,7 +67,7 @@
                 <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 class="step-form-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)" />
@@ -158,6 +158,7 @@ export default {
             return {
                 label: sItem.label,
                 options: sItem.subOptions || [],
+                fillType: sItem.subFillType || sItem.fillType,
             }
         },
         isShowOther(v = []) {
@@ -183,22 +184,22 @@ export default {
                         let value = formData[key];
                         
                         // 处理多选下拉框的默认值，确保数组类型
-                        if (currentConfig.type === 'select' && currentConfig.multiple) {
-                            if (!Array.isArray(value)) {
-                                // 转换为数组格式，确保兼容性
-                                value = value ? [value] : [];
-                            }
-                        }
+                        // if (currentConfig.type === 'select' && currentConfig.multiple) {
+                        //     if (!Array.isArray(value)) {
+                        //         // 转换为数组格式，确保兼容性
+                        //         value = value ? [value] : [];
+                        //     }
+                        // }
                         
-                        // 处理null/undefined值，保持一致性
-                        if (value === null || value === undefined) {
-                            // 根据类型设置默认值
-                            if (currentConfig.type === 'select' && currentConfig.multiple) {
-                                value = [];
-                            } else {
-                                value = '';
-                            }
-                        }
+                        // // 处理null/undefined值，保持一致性
+                        // if (value === null || value === undefined) {
+                        //     // 根据类型设置默认值
+                        //     if (currentConfig.type === 'select' && currentConfig.multiple) {
+                        //         value = [];
+                        //     } else {
+                        //         value = '';
+                        //     }
+                        // }
                         
                         // 如果formFields中已经有值，保持原值（用户输入或之前设置的值）
                         if (formFields[key] !== null && 
@@ -239,21 +240,27 @@ export default {
         },
         getFormData() {
             const { formFields, allFieldsConfig } = this;
+            const { templateStatus } = this.$store.state.template;
             return new Promise((resolve,reject)=>{
                 for (const key in formFields) {
-                if (!formFields[key]) {
-                    const o = allFieldsConfig[key];
-                    let prefix = "";
-                    if (o.type === "input") {
-                        prefix = "填写"
-                    } else {
-                        prefix = "选择"
+                    console.log(key,formFields[key])
+                    if (!formFields[key]) {
+                        const o = allFieldsConfig[key];
+                        console.log(templateStatus,o.fillType,"fill")
+                        if (o.fillType == templateStatus) {
+                            let prefix = "";
+                            if (o.type === "input") {
+                                prefix = "填写"
+                            } else {
+                                prefix = "选择"
+                            }
+                            this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
+                            reject(`${o.label}还未${prefix}`);
+                            return;
+                        }
+                        
                     }
-                    this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
-                    reject("还未填写完");
-                    return;
                 }
-            }
                 resolve(formFields)
             })
             
@@ -266,14 +273,14 @@ export default {
             // 获取对应的配置
             const currentConfig = this.allFieldsConfig[key];
             
-            // 确保多选下拉框的值是数组类型
-            if (currentConfig && currentConfig.multiple) {
-                // 多选情况，确保值为数组类型
-                this.formFields[key] = Array.isArray(val) ? val : (val ? [val] : []);
-            } else {
+            // // 确保多选下拉框的值是数组类型
+            // if (currentConfig && currentConfig.multiple) {
+            //     // 多选情况，确保值为数组类型
+            //     this.formFields[key] = Array.isArray(val) ? val : (val ? [val] : []);
+            // } else {
                 // 单选情况
                 this.formFields[key] = val;
-            }
+            // }
             
             this.$emit("select", { key, value: val });
         },
@@ -342,7 +349,7 @@ export default {
     font-weight: normal;
     color: #606266;
 }
-.step-title{
+.step-form-title{
     font-size: 14px;
     font-weight: normal;
     color: #606266;
diff --git a/src/components/Template/CustomTable.vue b/src/components/Template/CustomTable.vue
new file mode 100644
index 0000000..99e043d
--- /dev/null
+++ b/src/components/Template/CustomTable.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="custom-table-wrapper">
+    <div class="custom-table-header">
+      <div class="custom-table-row">
+        <div
+          v-for="(col, index) in columns"
+          :key="index"
+          class="custom-table-cell header-cell"
+          :style="{ width: col.width ? col.width + 'px' : 'auto' }"
+        >
+            <div>{{ col.label }}</div>
+          <template v-if="col.showSelect&& col.options">
+            <select v-model="col.selected" @change="onHeaderSelectChange(index, $event)">
+              <option value="" disabled>{{ col.placeholder || '请选择' }}</option>
+              <option
+                v-for="opt in col.options"
+                :key="opt.value"
+                :value="opt.value"
+              >
+                {{ opt.label }}
+              </option>
+            </select>
+          </template>
+          
+        </div>
+      </div>
+    </div>
+
+    <div class="custom-table-body">
+      <div
+        v-for="(row, rowIndex) in dataSource"
+        :key="rowIndex"
+        class="custometable-row"
+      >
+        <div
+          v-for="(col, colIndex) in columns"
+          :key="colIndex"
+          class="custom-table-cell body-cell"
+          :style="{ width: col.width ? col.width + 'px' : 'auto' }"
+        >
+          {{ row[col.prop] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomTable',
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+      // 示例格式：
+      // [
+      //   { label: '姓名', prop: 'name' },
+      //   { label: '状态', prop: 'status', type: 'select', options: [{value:1,label:'启用'},...], selected: null }
+      // ]
+    },
+    dataSource: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    onHeaderSelectChange(colIndex, event) {
+      this.$emit('header-select-change', colIndex, event.target.value);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.custom-table-wrapper {
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  overflow: hidden;
+  font-size: 14px;
+  color: #606266;
+}
+
+/* 表头 */
+.custom-table-header {
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+  white-space: nowrap;
+  display: block;
+}
+
+.custom-table-body {
+  max-height: 300px; /* 可根据需要调整或由父组件控制 */
+}
+
+/* 共同行样式 */
+.custom-table-row {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.custometable-row {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+/* 单元格 */
+.custom-table-cell {
+  display: table-cell;
+  padding: 12px 10px;
+  text-align: left;
+  vertical-align: middle;
+  border-right: 1px solid #ebeef5;
+  box-sizing: border-box;
+}
+
+.custom-table-cell:last-child {
+  border-right: none;
+}
+
+.header-cell {
+  font-weight: bold;
+  color: #909399;
+  background-color: #f5f7fa;
+}
+
+.body-cell {
+  color: #606266;
+  background-color: #fff;
+}
+
+/* select 样式（模仿 Element UI） */
+.header-cell select {
+  width: 100%;
+  padding: 4px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  outline: none;
+  background-color: #fff;
+  font-size: 13px;
+  color: #606266;
+  appearance: none; /* 隐藏默认箭头（可选） */
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 14px;
+  padding-right: 28px;
+}
+
+/* 滚动容器：如果整体宽度超限，显示横向滚动条 */
+.custom-table-wrapper {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%; /* 父容器决定宽度 */
+  overflow-x: auto;
+}
+
+.custom-table-header,
+.custom-table-body {
+  min-width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Template/Step.vue b/src/components/Template/Step.vue
index 52ae962..421571d 100644
--- a/src/components/Template/Step.vue
+++ b/src/components/Template/Step.vue
@@ -1,24 +1,13 @@
 <template>
   <div class="step-container">
-    <div class="step-header">
-      <el-button type="primary" @click="addStep" icon="el-icon-plus">添加步骤</el-button>
-    </div>
-    
+    <el-button v-if = "isShowAddStep()" type="primary" @click="addStep" icon="el-icon-plus">添加步骤</el-button>
     <div class="step-list">
       <div 
         v-for="(step, index) in steps" 
         :key="step.id" 
         class="step-item"
       >
-        <div class="step-header-item">
-          <el-button 
-            type="text" 
-            @click="removeStep(index)" 
-            icon="el-icon-delete"
-            class="delete-btn"
-            :disabled="steps.length === 1"
-          ></el-button>
-        </div>
+        
         
         <div class="step-content">
             <span class="step-title">步骤{{ index + 1 }}</span>
@@ -41,6 +30,14 @@
                     :step-data="step.formData"
                     @update="onFormUpdate(index, $event)">
         </component>
+        <div class="step-header-item">
+          <el-button 
+            type="text" 
+            @click="removeStep(index)" 
+            icon="el-icon-delete"
+            class="delete-btn"
+          ></el-button>
+        </div>
         </div>
       </div>
     </div>
@@ -77,21 +74,21 @@ export default {
     return {
       stepTypes: [
         { label: '容器选择', value: 'container' },
-        { label: '离心', value: 'centrifuge' },
-        { label: '自动称量', value: 'autoWeigh' },
-        { label: '手动称量', value: 'manualWeigh' },
-        { label: '加入溶液', value: 'addSolution' },
-        { label: '混合', value: 'mix' },
-        { label: '超声', value: 'ultrasound' },
-        { label: '抽滤', value: 'filtration' },
-        { label: '分装', value: 'package' },
-        { label: '封装2管', value: 'seal2' },
-        { label: '封装3管', value: 'seal3' },
-        { label: '漩涡混匀', value: 'vortex' },
-        { label: '包被', value: 'coat' },
-        { label: '静置开始', value: 'staticStart' },
-        { label: '静置结束', value: 'staticEnd' },
-        { label: '取板', value: 'takePlate' }
+        // { label: '离心', value: 'centrifuge' },
+        // { label: '自动称量', value: 'autoWeigh' },
+        // { label: '手动称量', value: 'manualWeigh' },
+        // { label: '加入溶液', value: 'addSolution' },
+        // { label: '混合', value: 'mix' },
+        // { label: '超声', value: 'ultrasound' },
+        // { label: '抽滤', value: 'filtration' },
+        // { label: '分装', value: 'package' },
+        // { label: '封装2管', value: 'seal2' },
+        // { label: '封装3管', value: 'seal3' },
+        // { label: '漩涡混匀', value: 'vortex' },
+        // { label: '包被', value: 'coat' },
+        // { label: '静置开始', value: 'staticStart' },
+        // { label: '静置结束', value: 'staticEnd' },
+        // { label: '取板', value: 'takePlate' }
       ],
       steps: [],
       stepId: 1,
@@ -166,6 +163,10 @@ export default {
     }
   },
   methods: {
+    isShowAddStep() {
+      const {templateStatus} = this.$store.state.template
+      return templateStatus === 'preFill';
+    },
     addStep() {
       try {
         this.steps.push({
@@ -309,6 +310,10 @@ export default {
 
 <style lang="scss" scoped>
 .step-container {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    margin-top: 24px;
+    padding: 24px;
+    border-radius: 5px 5px;
   .step-header {
     margin-bottom: 20px;
     padding: 15px;
@@ -319,7 +324,6 @@ export default {
   .step-list {
     .step-item {
       margin-bottom: 20px;
-      border: 1px solid #e4e7ed;
       border-radius: 6px;
       overflow: hidden;
 
diff --git a/src/components/Template/StepComponents/ContainerStep.vue b/src/components/Template/StepComponents/ContainerStep.vue
index 8618a62..83a0ee4 100644
--- a/src/components/Template/StepComponents/ContainerStep.vue
+++ b/src/components/Template/StepComponents/ContainerStep.vue
@@ -27,6 +27,7 @@ export default {
 				containerType: {
 					label: '容器选择',
 					placeholder: '请选择',
+					fillType:"actFill",
 					options: [
 						{ label: '离心管', value: 'centrifugeTube' },
 						{ label: '试管', value: 'testTube' },
diff --git a/src/store/modules/template.js b/src/store/modules/template.js
index 889759a..9258393 100644
--- a/src/store/modules/template.js
+++ b/src/store/modules/template.js
@@ -1,7 +1,7 @@
 const template = {
   namespaced: true,
   state: {
-    templateStatus:"",//模板状态 "actFill" 实际填报 "preFill" 预填 ”qc“
+    templateStatus:"",//模板状态 "actFill"(实际填报)  "preFill"(预填)  ”qc“(qc) "detail"(详情)
   },
   mutations: {
     SET_TEMPLATE_STATUS: (state, status) => {
diff --git a/src/views/business/comps/template/TemplateTable.vue b/src/views/business/comps/template/TemplateTable.vue
index df193e6..c313a20 100644
--- a/src/views/business/comps/template/TemplateTable.vue
+++ b/src/views/business/comps/template/TemplateTable.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="template-table">
-    <SP001 v-if="sn == 'SP0012'" />
-    <SWYPFXRYPZB v-if="sn == 'SP001'" />
+    <!-- <SP001 v-if="sn == 'SP0012'" />
+    <SWYPFXRYPZB v-if="sn == 'SP001'" /> -->
+     <component :is="getTemplateComponent()" :fillType="fillType">
+        </component>
   </div>
 </template>
 
@@ -18,6 +20,21 @@ export default {
     sn: {
       type: String,
       default: '',
+    },
+    fillType: {
+      type: String,
+      default: 'preFill',
+    }
+  },
+  computed: {
+    
+    templateComponentMap() {
+      if (!this.componentMap) {
+        this.componentMap = {
+          'SP001': 'SWYPFXRYPZB',
+        }
+      }
+      return this.componentMap
     }
   },
   watch: {
@@ -35,6 +52,9 @@ export default {
   mounted() {
   },
   methods: {
+    getTemplateComponent() {
+      return this.templateComponentMap[this.sn] 
+    },
   }
 };
 </script>
diff --git a/src/views/business/comps/template/comps/sp/Demo.vue b/src/views/business/comps/template/comps/sp/Demo.vue
new file mode 100644
index 0000000..cabc9d3
--- /dev/null
+++ b/src/views/business/comps/template/comps/sp/Demo.vue
@@ -0,0 +1,297 @@
+<!-- 生物样品分析溶液配制表 -->
+<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">
+					<LineLabel label = "试验基本信息"/>
+					<BaseInfoFormPcakge ref = "baseInfo" :formConfig = "formConfig" :formData = "formData"/>
+					<LineLabel class="mt-20" label = "试验试剂信息"/>
+					<TableList class="mt-20" :columns = "sysjColumns" :dataSource = "dataSource"/>
+					<LineLabel class="mt-20" label = "仪器使用信息"/>
+					<TableList class="mt-20" :columns = "yqsColumns" :dataSource = "dataSource"/>
+					<LineLabel class="mt-20" label = "存储条件"/>
+					<BaseInfoFormPcakge ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/>
+					<LineLabel class="mt-20" label = "操作步骤"/>
+					<div class="template-form-item">
+						<BaseInfoFormPcakge ref = "stepFormPackage" :formConfig = "stepFormConfig" :formData = "formData"/>
+						<!-- <CustomTable class="mt-20" :columns = "stepColumns" :dataSource = "stepDataSource"/> -->
+					</div>
+					<Step ref = "stepRef"></Step>
+				</div>
+			</div>
+			<button @click = "onSave">保存</button>
+		</div>
+	</div>
+</template>
+  
+<script>
+import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
+import LineLabel from "@/components/Template/LineLabel";
+import TableList from "@/components/Template/Table";
+import Step from "@/components/Template/Step";
+import templateMixin from "../../mixins/templateMixin";
+import CustomTable from '@/components/Template/CustomTable.vue'
+export default {
+	name: "SWYPFXRYPZB",
+	components: { BaseInfoFormPcakge,LineLabel,TableList,Step,CustomTable },
+	mixins: [templateMixin],
+	props: {
+		value: {
+			type: {},
+			default: () => { },
+		}
+	},
+	watch: {
+		value: {
+			immediate: true,
+			handler(v) {
+
+			}
+		}
+	},
+	data() {
+		return {
+			dataSource:[{name:"名称1"}],
+			stepDataSource:[{
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code1:"目标溶液编号1",
+				code2:"起始溶液编号1",
+				code3:"预设起始溶液体积1",
+				code4:"实际起始溶液体积1",
+				code5:"预设稀释液体积1",
+				code6:"实际稀释液体积1",
+				code7:"预设目标溶液浓度1",
+				code8:"实际目标溶液浓度1",
+			}],
+			stepColumns:[
+				{label:"目标溶液编号",prop:"code1",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{label:"起始溶液编号",prop:"code2",width: 120},
+				{
+					label:"预设起始溶液体积",prop:"code3",showSelect: true,
+					options: [
+						{ label: 'mg', value: 'mg' },
+						{ label: 'ng', value: 'ng' },
+					]
+				},
+				{
+					label:"实际起始溶液体积",prop:"code4",showSelect: true,width: 180,
+					options: [
+						{ label: 'mg', value: 'mg' },
+						{ label: 'ng', value: 'ng' },
+					]
+				},
+				{
+					label:"预设稀释液体积",prop:"code5",showSelect: true,width: 180,
+					options: [
+						{ label: 'mg', value: 'mg' },
+						{ label: 'ng', value: 'ng' },
+					]
+				},
+				{
+					label:"实际稀释液体积",prop:"code6",showSelect: true,width: 180,
+					options: [
+						{ label: 'mg', value: 'mg' },
+						{ label: 'ng', value: 'ng' },
+					]
+				},
+				{
+					label:"预设目标溶液浓度",prop:"code7",showSelect: true,width: 180,
+					options: [
+						{ label: 'mg', value: 'mg' },
+						{ label: 'ng', value: 'ng' },
+					]
+				},
+				{
+					label:"实际目标溶液浓度",prop:"code8",showSelect: true,width: 180,
+					options: [
+						{ label: 'mg', value: 'mg' },
+						{ label: 'ng', value: 'ng' },
+					]
+				},
+			],
+			sysjColumns:[
+				{label:"试剂名称",prop:"name"},
+				{label:"编号",prop:"name"},
+				{label:"批号",prop:"name"},
+				{label:"浓度/含量/纯度",prop:"name"},
+				{label:"来源",prop:"name"},
+				{label:"失效日",prop:"name"},
+			],
+			yqsColumns:[
+				{label:"仪器名称",prop:"name"},
+				{label:"仪器型号",prop:"name"},
+				{label:"仪器编号",prop:"name"},
+				{label:"下次测试/校准/检定日期",prop:"name"},
+			],
+			storageFormConfig:[
+			{
+					type:"conditionItem",
+					config:{
+						storageCondition1:{
+							label:"存储条件",
+							type:"select",
+							fillType:"preFill",
+							options:[],
+							otherCode:"other1",
+						},
+						
+					}
+				}
+			],
+			formConfig: [
+				{
+					type:"cardItem",
+					config:{
+						name:{
+							label:"试验名称",
+							type:"input",
+							disabled:true,
+						},
+						code:{
+							label:"试验编号",
+							type:"input",
+							disabled:true,
+						},
+						methodCode:{
+							label:"方法编号",
+							type:"input",
+							fillType:"preFill",
+							copyFrom:"name",//复制哪个字段
+						},
+						versionNum:{
+							label:"版本号",
+							type:"input",
+							fillType:"actFill"
+						},
+
+					}
+				},
+				{
+					type:"conditionItem",
+					label:"试验配制条件",
+					config:{
+						pre:{
+							label:"预填",
+							type:"select",
+							multiple:true,
+							fillType:"preFill",
+							options:[
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
+							],
+							otherCode:"other1",
+						},
+						act:{
+							label:"实际",
+							type:"select",
+							fillType:"actFill",
+							otherCode:"other2",
+							multiple:true,
+							options:[
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
+							]
+						}
+					}
+				},
+				{
+					type:"cellItem",
+					label:"配置时间",
+					config:{
+						startDate:{
+							label:"开始时间",
+							type:"dateTime",
+						},
+						endDate:{
+							label:"结束时间",
+							type:"dateTime",
+						},
+					}
+				}
+			],
+			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"],taget1:"mg",targetCode1:"123456",taget1c:"可点击"
+			}
+			
+		},3000)
+		setTimeout(()=>{
+			this.storageFormConfig[0].config.storageCondition1.options = [
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
+							]
+		},4000)
+	},
+	methods: {
+		async onSave(){
+			// const result1 = await this.$refs.baseInfo.getFormData();
+			// const result2 = await this.$refs.storageCondition.getFormData();
+			// const result3 = await this.$refs.stepRef.getFormData();
+			const result = await this.$refs.stepFormPackage.getFormData();
+			console.log(result,"reee")
+		}
+	}
+};
+</script>
+<style rel="stylesheet/scss" lang="scss">
+.mt-20{
+	margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
index 229796f..fa4e049 100644
--- a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+++ b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
@@ -4,6 +4,8 @@
 		<div class="detail-container">
 			<div class="detail-title"><img src="@/assets/images/detail-title.png">生物样品分析溶液配制表<img
 					src="@/assets/images/detail-title.png" /></div>
+			<button @click = "onSave">保存</button>
+
 			<div class="detail-content">
 				<div class="content">
 					<LineLabel label = "试验基本信息"/>
@@ -12,6 +14,7 @@
 					<TableList class="mt-20" :columns = "sysjColumns" :dataSource = "dataSource"/>
 					<LineLabel class="mt-20" label = "仪器使用信息"/>
 					<TableList class="mt-20" :columns = "yqsColumns" :dataSource = "dataSource"/>
+					<LineLabel class="mt-20" label = "存储条件"/>
 					<BaseInfoFormPcakge ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/>
 					<LineLabel class="mt-20" label = "操作步骤"/>
 					<div class="template-form-item">
@@ -20,7 +23,6 @@
 					<Step ref = "stepRef"></Step>
 				</div>
 			</div>
-			<button @click = "onSave">保存</button>
 		</div>
 	</div>
 </template>
@@ -31,15 +33,30 @@ import LineLabel from "@/components/Template/LineLabel";
 import TableList from "@/components/Template/Table";
 import Step from "@/components/Template/Step";
 import templateMixin from "../../mixins/templateMixin";
+import CustomTable from '@/components/Template/CustomTable.vue';
+const mgOptions = [
+	{label:"mg",value:"mg"},
+	{label:"ng",value:"ng"},
+];
+const conditionOptions = [
+	{label:"条件1",value:"1"},
+	{label:"条件2",value:"2"},
+	{label:"条件3",value:"3"},
+	{label:"其他",value:"-1"},
+];
 export default {
 	name: "SWYPFXRYPZB",
-	components: { BaseInfoFormPcakge,LineLabel,TableList,Step },
+	components: { BaseInfoFormPcakge,LineLabel,TableList,Step,CustomTable },
 	mixins: [templateMixin],
 	props: {
 		value: {
 			type: {},
 			default: () => { },
-		}
+		},
+		fillType: {
+			type: String,
+			default: 'preFill',
+		},
 	},
 	watch: {
 		value: {
@@ -53,18 +70,18 @@ export default {
 		return {
 			dataSource:[{name:"名称1"}],
 			sysjColumns:[
-				{label:"试剂名称",prop:"name"},
-				{label:"编号",prop:"name"},
-				{label:"批号",prop:"name"},
-				{label:"浓度/含量/纯度",prop:"name"},
-				{label:"来源",prop:"name"},
-				{label:"失效日",prop:"name"},
+				{label:"试剂名称",prop:"reagentName"},
+				{label:"编号",prop:"reagentCode"},
+				{label:"批号",prop:"reagentNo"},
+				{label:"浓度/含量/纯度",prop:"concentration"},
+				{label:"来源",prop:"source"},
+				{label:"失效日",prop:"expireDate"},
 			],
 			yqsColumns:[
-				{label:"仪器名称",prop:"name"},
-				{label:"仪器型号",prop:"name"},
-				{label:"仪器编号",prop:"name"},
-				{label:"下次测试/校准/检定日期",prop:"name"},
+				{label:"仪器名称",prop:"instrumentName"},
+				{label:"仪器型号",prop:"instrumentModel"},
+				{label:"仪器编号",prop:"instrumentCode"},
+				{label:"下次测试/校准/检定日期",prop:"nextTestDate"},
 			],
 			storageFormConfig:[
 			{
@@ -74,11 +91,7 @@ export default {
 							label:"存储条件",
 							type:"select",
 							fillType:"preFill",
-							options:[
-								{label:"白光",value:"1"},
-								{label:"黄光",value:"3"},
-								{label:"其他",value:"-1"},
-							],
+							options:conditionOptions,
 							otherCode:"other1",
 						},
 						
@@ -122,11 +135,7 @@ export default {
 							type:"select",
 							multiple:true,
 							fillType:"preFill",
-							options:[
-								{label:"白光",value:"1"},
-								{label:"黄光",value:"3"},
-								{label:"其他",value:"-1"},
-							],
+							options:conditionOptions,
 							otherCode:"other1",
 						},
 						act:{
@@ -135,11 +144,7 @@ export default {
 							fillType:"actFill",
 							otherCode:"other2",
 							multiple:true,
-							options:[
-								{label:"白光",value:"1"},
-								{label:"黄光",value:"3"},
-								{label:"其他",value:"-1"},
-							]
+							options:conditionOptions
 						}
 					}
 				},
@@ -149,11 +154,11 @@ export default {
 					config:{
 						startDate:{
 							label:"开始时间",
-							type:"dateTime",
+							type:"input",
 						},
 						endDate:{
 							label:"结束时间",
-							type:"dateTime",
+							type:"input",
 						},
 					}
 				}
@@ -162,31 +167,66 @@ export default {
 				{
 					type:"step",
 					config:{
-						startDate:{
+						targetName:{
 							label:"目标溶液名称",
 							type:"input",
+							fillType:"preFill",
 						},
-						endDate:{
+						targetCode:{
 							label:"目标溶液编号",
 							type:"input",
 							subType:"span",
+							fillType:"preFill",
 							subKey:"targetCode1",
 						},
-						target:{
+						targetPreConcentration:{
 							label:"目标溶液预计浓度",
 							type:"input",
 							subType:"select",
-							subKey:"taget1",
+							subKey:"targetPreConcentrationUnit",
+							fillType:"preFill",
+							subOptions:mgOptions,
+						},
+						targetActConcentration:{
+							label:"目标溶液实际浓度",
+							type:"input",
+							subType:"select",
+							subKey:"targetActConcentrationUnit",
+							fillType:"actFill",
+							subFillType:"preFill",
+							subOptions:mgOptions,
+						},
+						targetPreVolume:{
+							label:"目标溶液预计体积",
+							type:"input",
+							subType:"select",
+							subKey:"targetPreVolumeUnit",
+							subOptions:mgOptions,
+							fillType:"preFill",
+						},
+						targetActVolume:{
+							label:"目标溶液实际体积",
+							type:"input",
+							subType:"select",
+							subKey:"targetActVolumeUnit",
+							fillType:"actFill",
+							subFillType:"preFill",
+							subOptions:mgOptions,
+						},
+						effectivePeriod:{
+							label:"有效周期",
+							type:"input",
+							subType:"select",
+							subKey:"effectivePeriodUnit",
+							fillType:"preFill",
 							subOptions:[
-								{label:"mg",value:"mg"},
-								{label:"ng",value:"ng"},
+								{label:"小时",value:"hour"},
+								{label:"天",value:"day"},
 							],
 						},
-						target:{
-							label:"目标溶液预计浓度",
+						expireDate:{
+							label:"失效日",
 							type:"input",
-							subType:"clickable",
-							subKey:"taget1c",
 						},
 					}
 				}
@@ -197,17 +237,37 @@ export default {
 	mounted() {
 		setTimeout(()=>{
 			this.formData = {
-				code:"code1",name:"name1",act:["1","-1"],taget1:"mg",targetCode1:"123456",taget1c:"可点击"
+				// code:"code1",name:"name1",act:["1","-1"],taget1:"mg",targetCode1:"123456",taget1c:"可点击"
 			}
+			
 		},3000)
+		setTimeout(()=>{
+			this.storageFormConfig[0].config.storageCondition1.options = [
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
+							]
+		},4000)
 	},
 	methods: {
+		getFormData(){
+			const baseData = this.$refs.baseInfo.getFormData();
+			const conditionData = this.$refs.storageCondition.getFormData();
+			const stepData = this.$refs.stepRef.getFormData();
+			const stepFormData = this.$refs.stepFormPackage.getFormData();
+			return {
+				...baseData,
+				...conditionData,
+				...stepData,
+				...stepFormData,
+			}
+		},
 		async onSave(){
-			// const result1 = await this.$refs.baseInfo.getFormData();
-			// const result2 = await this.$refs.storageCondition.getFormData();
-			// const result3 = await this.$refs.stepRef.getFormData();
-			const result = await this.$refs.stepFormPackage.getFormData();
-			console.log(result,"reee")
+			const baseData = await this.$refs.baseInfo.getFormData();
+			const conditionData = await this.$refs.storageCondition.getFormData();
+			const stepData = await this.$refs.stepRef.getFormData();
+			const stepFormData = await this.$refs.stepFormPackage.getFormData();
+			console.log(baseData,conditionData,stepData,stepFormData,"reee")
 		}
 	}
 };
diff --git a/src/views/business/comps/template/mixins/templateMixin.js b/src/views/business/comps/template/mixins/templateMixin.js
index e1ad914..2f9519e 100644
--- a/src/views/business/comps/template/mixins/templateMixin.js
+++ b/src/views/business/comps/template/mixins/templateMixin.js
@@ -3,9 +3,9 @@ export default {
   
   },
   mounted() {
-        setTimeout(() => {
-          this.setTemplateStatus("actFill")
-        }, 4000)
+  
+        this.setTemplateStatus(this.fillType)
+   
   },
   methods: {
     setTemplateStatus(status) {
diff --git a/src/views/business/template/list.vue b/src/views/business/template/list.vue
index 7f89510..ee331a0 100644
--- a/src/views/business/template/list.vue
+++ b/src/views/business/template/list.vue
@@ -79,7 +79,7 @@
     </el-dialog>
     <el-dialog :close-on-click-modal="false" :title="$t('page.system.template.bdpz')" :visible.sync="tableDialog.visible"
       width="90%" append-to-body>
-      <TemplateTable  :sn="tableDialog.sn" />
+      <TemplateTable  :sn="tableDialog.sn" fillType="detail" />
     </el-dialog>
   </div>
 </template>

From fa1812fa32fe444f59859a90c2b91d30940f38de Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Wed, 31 Dec 2025 22:06:42 +0800
Subject: [PATCH 8/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?=
 =?UTF-8?q?[=E7=94=9F=E7=89=A9=E6=A0=B7=E5=93=81=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E6=BA=B6=E6=B6=B2=E9=85=8D=E5=88=B6=E8=A1=A81=20]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/comps/template/TemplateTable.vue      |  7 ++++--
 .../comps/template/comps/sp/SWYPFXRYPZB.vue        | 26 +++++-----------------
 src/views/business/template/list.vue               |  2 +-
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/views/business/comps/template/TemplateTable.vue b/src/views/business/comps/template/TemplateTable.vue
index c313a20..2ecf1f8 100644
--- a/src/views/business/comps/template/TemplateTable.vue
+++ b/src/views/business/comps/template/TemplateTable.vue
@@ -2,8 +2,8 @@
   <div class="template-table">
     <!-- <SP001 v-if="sn == 'SP0012'" />
     <SWYPFXRYPZB v-if="sn == 'SP001'" /> -->
-     <component :is="getTemplateComponent()" :fillType="fillType">
-        </component>
+     <component ref="templateComponent" :is="getTemplateComponent()" :fillType="fillType">
+      </component>
   </div>
 </template>
 
@@ -52,6 +52,9 @@ export default {
   mounted() {
   },
   methods: {
+    async getFormData() {
+      return await this.$refs.templateComponent.getFormData();
+    },
     getTemplateComponent() {
       return this.templateComponentMap[this.sn] 
     },
diff --git a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
index fa4e049..a3387ea 100644
--- a/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
+++ b/src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue
@@ -4,8 +4,6 @@
 		<div class="detail-container">
 			<div class="detail-title"><img src="@/assets/images/detail-title.png">生物样品分析溶液配制表<img
 					src="@/assets/images/detail-title.png" /></div>
-			<button @click = "onSave">保存</button>
-
 			<div class="detail-content">
 				<div class="content">
 					<LineLabel label = "试验基本信息"/>
@@ -241,20 +239,13 @@ export default {
 			}
 			
 		},3000)
-		setTimeout(()=>{
-			this.storageFormConfig[0].config.storageCondition1.options = [
-								{label:"白光",value:"1"},
-								{label:"黄光",value:"3"},
-								{label:"其他",value:"-1"},
-							]
-		},4000)
 	},
 	methods: {
-		getFormData(){
-			const baseData = this.$refs.baseInfo.getFormData();
-			const conditionData = this.$refs.storageCondition.getFormData();
-			const stepData = this.$refs.stepRef.getFormData();
-			const stepFormData = this.$refs.stepFormPackage.getFormData();
+		async getFormData(){
+			const baseData = await this.$refs.baseInfo.getFormData();
+			const conditionData = await this.$refs.storageCondition.getFormData();
+			const stepData = await this.$refs.stepRef.getFormData();
+			const stepFormData = await this.$refs.stepFormPackage.getFormData();
 			return {
 				...baseData,
 				...conditionData,
@@ -262,13 +253,6 @@ export default {
 				...stepFormData,
 			}
 		},
-		async onSave(){
-			const baseData = await this.$refs.baseInfo.getFormData();
-			const conditionData = await this.$refs.storageCondition.getFormData();
-			const stepData = await this.$refs.stepRef.getFormData();
-			const stepFormData = await this.$refs.stepFormPackage.getFormData();
-			console.log(baseData,conditionData,stepData,stepFormData,"reee")
-		}
 	}
 };
 </script>
diff --git a/src/views/business/template/list.vue b/src/views/business/template/list.vue
index ee331a0..6273c28 100644
--- a/src/views/business/template/list.vue
+++ b/src/views/business/template/list.vue
@@ -79,7 +79,7 @@
     </el-dialog>
     <el-dialog :close-on-click-modal="false" :title="$t('page.system.template.bdpz')" :visible.sync="tableDialog.visible"
       width="90%" append-to-body>
-      <TemplateTable  :sn="tableDialog.sn" fillType="detail" />
+      <TemplateTable  :sn="tableDialog.sn" fillType="preFill" />
     </el-dialog>
   </div>
 </template>

From 9824a4873d0b8cc0611915a7595fe1f7a0ac7dfc Mon Sep 17 00:00:00 2001
From: luojie <125330818@qq.com>
Date: Wed, 31 Dec 2025 22:08:12 +0800
Subject: [PATCH 9/9] =?UTF-8?q?feat:[=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86]?=
 =?UTF-8?q?[=E7=94=9F=E7=89=A9=E6=A0=B7=E5=93=81=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E6=BA=B6=E6=B6=B2=E9=85=8D=E5=88=B6=E8=A1=A81=20]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/business/template/list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/business/template/list.vue b/src/views/business/template/list.vue
index 6273c28..950eed4 100644
--- a/src/views/business/template/list.vue
+++ b/src/views/business/template/list.vue
@@ -79,7 +79,7 @@
     </el-dialog>
     <el-dialog :close-on-click-modal="false" :title="$t('page.system.template.bdpz')" :visible.sync="tableDialog.visible"
       width="90%" append-to-body>
-      <TemplateTable  :sn="tableDialog.sn" fillType="preFill" />
+      <TemplateTable ref = "templateTable" :sn="tableDialog.sn" fillType="preFill" />
     </el-dialog>
   </div>
 </template>