feat:[模板管理][组件抽离ing]

src/components/Template/BaseInfoFormPcakge.vue

@@ -3,13 +3,12 @@
         <div v-for="(item, index) in formConfig" :key="index">
             <template v-if="item.type === 'cardItem'">
                 <div class="grid-container">
-                    <div v-for="(sItem, sIndex) in item.config" class="form-item"
-                        :class="sItem.span == 1 ? 'full-row' : ''" :key="sIndex">
+                    <div v-for="(sItem, key) in item.config" class="form-item" :class="sItem.span == 1 ? 'full-row' : ''"
+                        :key="key">
                         <template v-if="sItem.type === 'input'">
                             <div class="form-title">{{ sItem.label }}</div>
-                            <Input :maxlength="sItem.maxlength || 30" :disabled="sItem.disabled"
-                                v-model="formFields[sIndex]" :class="sItem.borderType | getBorderType"
-                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)" />
+                            <HandleFormItem :item="sItem" :value="formFields[key]" @input="onInput(key, $event)"
+                                @copy="onCopy(sItem, key)" />
                         </template>
                     </div>
                 </div>
@@ -17,24 +16,24 @@
             <template v-else-if="item.type === 'conditionItem'">
                 <div class="form-item ">
                     <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
-                    <div v-for="(sItem, sIndex) in item.config" class="c-Item flex">
-                        <div class="flex1 mr-24">
+                    <div v-for="(sItem, key) in item.config" class="c-Item  grid-container">
+                        <div class="p-r-20">
                             <div class="form-title">{{ sItem.label }}</div>
-                            <div class="flex">
-                                <el-select class="flex1" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
-                                    <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
-                                        :value="op.value">
-                                    </el-option>
-                                </el-select>
+                            <div class="flex ">
+                                <HandleFormItem type="select" :item="sItem" :value="formFields[key]"
+                                    @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" />
 
                             </div>
                         </div>
-                        <div class="flex1" v-show="isShowOther(formFields[sIndex])">
-                            <div class="form-title">其他</div>
-                            <div class="flex">
-                                <el-input v-model="formFields[sItem.otherCode]"
-                                    :class="sItem.borderType | getBorderType"></el-input>
+                        <div  class="p-r-20">
+                            <div v-show="isShowOther(formFields[key])">
+                                <div class="form-title">其他</div>
+                                <div class="flex">
+                                    <el-input v-model="formFields[sItem.otherCode]"
+                                        :class="sItem.borderType | getBorderType"></el-input>
+                                </div>
                             </div>
+
                         </div>
 
                     </div>
@@ -44,27 +43,26 @@
                 <div class="form-item ">
                     <div class="form-title fs-16" v-if="item.label">{{ item.label }}</div>
                     <div class="grid-container">
-                        <div v-for="(sItem, sIndex) in item.config" class="c-Item " :class="sItem.span == 1 ? 'full-row' : ''" :key = "sIndex">
-                            <div class="form-title" v-if = "sItem.label">{{ sItem.label }}</div>
-                            <div v-if = "sItem.type === 'dateTime'">
-                                <el-date-picker
-                                v-model="formFields[sIndex]" 
-                                type="datetime"
-                                class="w-100"
-                                format = "yyyy/MM/DD HH:mm:ss"
-                                value-format = "yyyy/MM/DD HH:mm:ss"
-                                :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
+                        <div v-for="(sItem, key) in item.config" class="c-Item " :class="sItem.span == 1 ? 'full-row' : ''"
+                            :key="key">
+                            <div class="form-title" v-if="sItem.label">{{ sItem.label }}</div>
+                            <div v-if="sItem.type === 'dateTime'">
+                                <el-date-picker v-model="formFields[key]" type="datetime" class="w-100"
+                                    format="yyyy/MM/DD HH:mm:ss" value-format="yyyy/MM/DD HH:mm:ss"
+                                    :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
                                 </el-date-picker>
                             </div>
-                            <div v-else-if = "sItem.type === 'select'">
-                                <el-select class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)" >
+                            <div v-else-if="sItem.type === 'select'">
+                                <el-select class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[key]"
+                                    multiple :placeholder="sItem.placeholder ? sItem.placeholder : ('请选择' + sItem.label)">
                                     <el-option v-for="op in sItem.options" :key="op.value" :label="op.label"
                                         :value="op.value">
                                     </el-option>
                                 </el-select>
                             </div>
-                            <div v-else-if = "sItem.type === 'input'">
-                                <el-input class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[sIndex]" :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)"></el-input>
+                            <div v-else-if="sItem.type === 'input'">
+                                <el-input class="w-100" :class="sItem.borderType | getBorderType" v-model="formFields[key]"
+                                    :placeholder="sItem.placeholder ? sItem.placeholder : ('请输入' + sItem.label)"></el-input>
                             </div>
                         </div>
                     </div>
@@ -76,10 +74,10 @@
 </template>
 
 <script>
-import Input from "./Input.vue";
+import HandleFormItem from "./HandleFormItem.vue"
 export default {
     components: {
-        Input
+        HandleFormItem
     },
     props: {
         formConfig: {
@@ -121,7 +119,8 @@ export default {
     },
     methods: {
         isShowOther(v = []) {
-            return v.includes(-1);
+            console.log(v, "vvv")
+            return v.includes("-1");
         },
         //根据formConifg回填form表单数据
         handleFormField() {
@@ -153,7 +152,8 @@ export default {
         },
         getFormData() {
             const { formFields, allFieldsConfig } = this;
-            for (const key in formFields) {
+            return new Promise((resolve,reject)=>{
+                for (const key in formFields) {
                 if (!formFields[key]) {
                     const o = allFieldsConfig[key];
                     let prefix = "";
@@ -163,11 +163,29 @@ export default {
                         prefix = "选择"
                     }
                     this.$message.error(`${o.label}还未${prefix}请${prefix}后再提交`);
+                    reject("还未填写完");
                     return;
                 }
             }
-            return formFields;
-        }
+                resolve(formFields)
+            })
+            
+        },
+        onInput(key, val) {
+            this.formFields[key] = val;
+            this.$emit("input", { key, value: val });
+        },
+        onSelectChange(key, val) {
+            this.formFields[key] = val;
+            this.$emit("select", { key, value: val });
+        },
+        //复制
+        onCopy(config, key) {
+            const { formFields } = this;
+            if (config.copyFrom) {
+                formFields[key] = formFields[config.copyFrom]
+            }
+        },
     },
 }
 </script>
@@ -179,9 +197,11 @@ export default {
     /* 默认2列 */
     gap: 0 24px;
 }
-.w-100{
+
+.w-100 {
     width: 100% !important;
 }
+
 .form-item {
     background: #fff;
     padding: 20px;
@@ -197,18 +217,22 @@ export default {
 .full-row {
     grid-column: span 2;
 }
-.c-Item{
-    &:not(:last-child){
+
+.c-Item {
+    &:not(:last-child) {
         margin-bottom: 16px;
     }
 }
+
 .form-title {
     margin-bottom: 12px;
     font-size: 14px;
     font-weight: normal;
     color: #606266;
 }
-
+.p-r-20{
+    padding-right: 20px;
+}
 .orange-border {
     input {
         border-color: #f9c588;

src/components/Template/HandleFormItem.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="flex w-100">
+        <div class="flex1 flex">
+            <el-input v-if="type === 'input'" :maxlength="item.maxlength || 30" :disabled="item.disabled"
+                :class="item.borderType | getBorderType"
+                :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" :value="value" @input="onInput" />
+            <el-select v-else-if="type === 'select'" class="flex1" 
+                :multiple = "item.multiple" 
+                :class="item.borderType | getBorderType" 
+                :value = "value"
+                :placeholder="item.placeholder ? item.placeholder : ('请选择' + item.label)" 
+                @change = "onSelectChange"
+                >
+                <el-option v-for="op in item.options" :key="op.value" :label="op.label"
+                    :value="op.value">
+                </el-option>
+            </el-select>
+        </div>
+        <div class="handle-row">
+            <i class="el-icon-question"></i>
+            <span @click="onCopy">复制</span>
+            <span>稽查轨迹</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        type: {//form类型  input/select等
+            type:String,
+            default:"input"
+        },
+        borderType: {
+            type: String,
+            default: ""
+        },
+        item: {
+            type: Object,
+            default: () => {
+                return {
+                    placeholder: "",
+                    maxlength: 30,
+                    label: "",
+                    disabled: false,
+                }
+            }
+        },
+        value: {
+            type: String,
+            value: "",
+        }
+    },
+    data() {
+        return {}
+    },
+    watch:{
+        value:{
+            immediate: true,
+            handler(val){
+                console.log(val,"watch")
+            }
+        }
+    },
+    filters: {
+        getBorderType(type) {
+            const typeObj = {
+                orange: "orange-border",
+                green: "green-border",
+                blue: "blue-border",
+            }
+            return typeObj[type] || ""
+        },
+
+    },
+    methods: {
+        onCopy() {
+            this.$emit("copy")
+        },
+        onInput(val){
+            this.$emit("input",val)
+        },
+        onSelectChange(val){
+            this.$emit("change",val)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.flex {
+    display: flex;
+    align-items: center;
+}
+
+.flex1 {
+    flex: 1;
+}
+
+.handle-row {
+    margin-left: 10px;
+}
+.w-100{
+    width: 100%;
+}
+</style>

src/components/Template/Input.vue

@@ -1,13 +1,42 @@
 <template>
-    <el-input v-bind="$attrs" v-on = "$listeners" :maxlength = "$attrs.maxlength || 30" v-model = "inputValue" :class="$attrs.borderType | getBorderType" />
+    <HandleWrapper v-on="$listeners">
+        <el-input
+            :maxlength="item.maxlength || 30" 
+            :disabled="item.disabled"
+            :class="item.borderType | getBorderType"
+            :placeholder="item.placeholder ? item.placeholder : ('请输入' + item.label)" 
+            :value = "value"
+            @input = "onInput"
+        />
+    </HandleWrapper>
+    
 </template>
 
 <script>
+import HandleWrapper from './HandleFormItem.vue'
 export default {
+    components:{
+        HandleWrapper
+    },
     props:{
         borderType: {
             type: String,
             default: ""
+        },
+        item:{
+            type:Object,
+            default:()=>{
+                return{
+                    placeholder:"",
+                    maxlength:30,
+                    label:"",
+                    disabled:false,
+                }
+            }
+        },
+        value:{
+            type:String,
+            value:"",
         }
     },
     data(){
@@ -27,7 +56,9 @@ export default {
 
     },
     methods:{
-        
+        onInput(val){
+            this.$emit("input",val)
+        },
     }
 }
 </script>

src/components/Template/LineLabel.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="content-title">
+        <div class="line"></div>
+        <div class="subtitle"> {{$attrs.label}}</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        
+    }
+</script>
+
+<style lang="scss" scoped>
+ .content-title {
+      width: 100%;
+      background: #f9f9ff;
+      font-size: 0.96rem;
+      font-weight: bold;
+      padding-left: 10px;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      justify-content: flex-start;
+      text-align: left;
+
+      .line {
+        width: 2px;
+        float: left;
+        height: 16px;
+        margin-top: 12px;
+        margin-right: 8px;
+        border-left: #3178ff 3px solid;
+      }
+
+      .subtitle {
+        height: 40px;
+        line-height: 40px;
+        color: #464647 !important;
+      }
+
+    }
+</style>

src/components/Template/Table.vue

@@ -0,0 +1,33 @@
+<template>
+    <el-table
+    :data="dataSource"
+    >
+    <el-table-column
+        v-for="(item) in columns"
+        :prop="item.prop"
+        :key = "item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
+</template>
+
+<script>
+    export default {
+        props:{
+            //[{label:"名称",prop:"name"}]
+            columns:{
+                type:Array,
+                default:[],
+            },
+            dataSource:{
+                type:Array,
+                default:[],
+            }
+        }
+        
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -6,11 +6,14 @@
 					src="@/assets/images/detail-title.png" /></div>
 			<div class="detail-content">
 				<div class="content">
-					<div class="content-title">
-						<div class="line"></div>
-						<div class="subtitle"> 试验基本信息</div>
-					</div>
+					<LineLabel label = "试验基本信息"/>
 					<BaseInfoFormPcakge ref = "baseInfo" :formConfig = "formConfig" :formData = "formData"/>
+					<LineLabel class="mt-20" label = "试验试剂信息"/>
+					<TableList class="mt-20" :columns = "sysjColumns" :dataSource = "dataSource"/>
+					<LineLabel class="mt-20" label = "仪器使用信息"/>
+					<TableList class="mt-20" :columns = "yqsColumns" :dataSource = "dataSource"/>
+					<LineLabel class="mt-20" label = "存储条件"/>
+					<BaseInfoFormPcakge ref = "storageCondition" :formConfig = "storageFormConfig" :formData = "formData"/>
 				</div>
 			</div>
 			<button @click = "onSave">保存</button>
@@ -19,10 +22,12 @@
 </template>
   
 <script>
-import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge"
+import BaseInfoFormPcakge from "@/components/Template/BaseInfoFormPcakge";
+import LineLabel from "@/components/Template/LineLabel";
+import TableList from "@/components/Template/Table"
 export default {
 	name: "SWYPFXRYPZB",
-	components: { BaseInfoFormPcakge },
+	components: { BaseInfoFormPcakge,LineLabel,TableList },
 	props: {
 		value: {
 			type: {},
@@ -39,6 +44,32 @@ export default {
 	},
 	data() {
 		return {
+			dataSource:[{name:"名称1"}],
+			sysjColumns:[
+				{label:"试剂名称",prop:"name"},
+				{label:"编号",prop:"name"},
+				{label:"批号",prop:"name"},
+				{label:"浓度/含量/纯度",prop:"name"},
+				{label:"来源",prop:"name"},
+				{label:"失效日",prop:"name"},
+			],
+			yqsColumns:[
+				{label:"仪器名称",prop:"name"},
+				{label:"仪器型号",prop:"name"},
+				{label:"仪器编号",prop:"name"},
+				{label:"下次测试/校准/检定日期",prop:"name"},
+			],
+			storageFormConfig:[
+			{
+					type:"cellItem",
+					config:{
+						storageCondition:{
+							label:"存储条件",
+							type:"input",
+						},
+					}
+				}
+			],
 			formConfig: [
 				{
 					type:"cardItem",
@@ -56,7 +87,8 @@ export default {
 						methodCode:{
 							label:"方法编号",
 							type:"input",
-							borderType:"blue"
+							borderType:"blue",
+							copyFrom:"name",//复制哪个字段
 						},
 						versionNum:{
 							label:"版本号",
@@ -73,11 +105,12 @@ export default {
 						pre:{
 							label:"预填",
 							type:"select",
+							multiple:true,
 							borderType:"blue",
 							options:[
-								{label:"白光",value:1},
-								{label:"黄光",value:3},
-								{label:"其他",value:-1},
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
 							],
 							otherCode:"other1",
 						},
@@ -86,10 +119,11 @@ export default {
 							type:"select",
 							borderType:"orange",
 							otherCode:"other2",
+							multiple:true,
 							options:[
-								{label:"白光",value:1},
-								{label:"黄光",value:3},
-								{label:"其他",value:-1},
+								{label:"白光",value:"1"},
+								{label:"黄光",value:"3"},
+								{label:"其他",value:"-1"},
 							]
 						}
 					}
@@ -115,23 +149,21 @@ export default {
 	mounted() {
 		setTimeout(()=>{
 			this.formData = {
-				code:"code1",name:"name1"
+				code:"code1",name:"name1",act:["1","-1"]
 			}
-		},3000)
+		},300)
 	},
 	methods: {
-		onSave(){
-			const result = this.$refs.baseInfo.getFormData();
-			console.log(result,"reee")
+		async onSave(){
+			const result1 = await this.$refs.baseInfo.getFormData();
+			const result2 = await this.$refs.storageCondition.getFormData();
+			console.log(result1,"reee")
 		}
 	}
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
-.b1 {
-	input {
-		border-color: aquamarine;
-
-	}
+.mt-20{
+	margin-top: 20px;
 }
 </style>