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] 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