优化表单组件

src/pages/common/form/index.vue

@@ -9,36 +9,7 @@
             <el-form :model="form" ref="form" label-suffix=":" :label-width="labelWidth">
                 <dg-col v-for="(item, index) in formConfig" :key="index" :span="item.span || 12">
                     <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
-                        <template v-if="item.type == 'input' || !item.type">
-                            <el-input v-model="form[item.prop]" :placeholder="item.placeholder" clearable></el-input>
-                        </template>
-                        <template v-if="item.type == 'select'">
-                            <template v-if="item.code">
-                                <dg-select
-                                    v-model="item.value"
-                                    :placeholder="item.placeholder"
-                                    :code="item.code"
-                                    clearable
-                                ></dg-select>
-                            </template>
-                            <template v-if="item.enum">
-                                <dg-select
-                                    v-model="item.value"
-                                    :placeholder="item.placeholder"
-                                    :enum="item.enum"
-                                    clearable
-                                ></dg-select>
-                            </template>
-                        </template>
-                        <template v-if="item.type == 'textarea'">
-                            <el-input
-                                v-model="item.value"
-                                type="textarea"
-                                rows="3"
-                                :placeholder="item.placeholder"
-                                clearable
-                            ></el-input>
-                        </template>
+                        <component :is="item.component" v-model="form[item.prop]" v-bind="item.attr" clearable />
                     </el-form-item>
                 </dg-col>
             </el-form>
@@ -47,7 +18,7 @@
 </template>
 
 <script>
-import _ from "lodash"
+import _ from "lodash";
 export default {
     props: {
         config: {
@@ -77,7 +48,7 @@ export default {
             const vm = this;
             this.$refs.form.validate((valid) => {
                 if (valid) {
-                    this.$emit("success",  vm.form)
+                    this.$emit("success", vm.form);
                 }
             });
         }
@@ -86,11 +57,6 @@ export default {
         // 编辑，字段回填
         if (Object.keys(this.info).length > 0) {
             this.form = _.cloneDeep(this.info);
-            //  for (let i = 0; i < this.formConfig.length; i++) {
-            //     let { prop } = this.formConfig[i];
-            //     // this.formConfig[i].value = this.info[prop];
-            //     this.form = this.info;
-            // }
         } else {
             for (let j = 0; j < this.formConfig.length; j++) {
                 let { prop, value } = this.formConfig[j];

src/pages/data-auth-module/auth-object-manage/sort-code-manage/DataConfig.js

@@ -7,20 +7,34 @@ export const safeLevelForm = [
     {
         label: "代码",
         prop: "secCode",
+        component: "ElInput",
         value: "",
         rules: [{ required: true, message: "请输入代码", trigger: "change" }],
+        attr: {
+            placeholder: ""
+        },
         span: 24
     },
     {
         label: "数据安全级别",
         prop: "secName",
+        component: "ElInput",
         value: "",
         rules: [{ required: true, message: "请输入数据安全级别", trigger: "change" }],
+        attr: {
+            placeholder: ""
+        },
         span: 24
     },
     {
         label: "说明",
         prop: "remark",
+        component: "ElInput",
+        attr: {
+            type: "textarea",
+            rows: 3,
+            placeholder: ""
+        },
         value: "",
         span: 24
     }