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] =?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=E4=B8=AD?=
 =?UTF-8?q?]?=
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")
 		}
 	}
 };