表单强化

Author: SmallRuralDog

public/0.js

@@ -1,5 +1,10 @@
 <template>
   <div class="form-page">
+    <component
+        v-if="attrs.top"
+        :is="attrs.top.componentName"
+        :attrs="attrs.top"
+      />
     <component
       :is="attrs.attrs.isDialog ? 'div' : 'el-card'"
       shadow="never"
@@ -74,6 +79,7 @@
                         <ItemDiaplsy
                           v-model="formData[item.prop]"
                           :form_item="item"
+                          :form_items="attrs.formItems"
                           :form_data="formData"
                         />
                       </template>
@@ -128,6 +134,11 @@
         </div>
       </el-form>
     </component>
+    <component
+      v-if="attrs.bottom"
+      :is="attrs.bottom.componentName"
+      :attrs="attrs.bottom"
+    />
   </div>
 </template>
 <script>

public/app.js

@@ -1,12 +1,35 @@
 <template>
-  <div v-if="attrs">
+  <div>
     <component
-      :value="value"
-      :is="attrs.componentName"
-      :attrs="attrs"
-      :form_data="form_data"
-      :form_items="form_items"
-      @change="onChange"
+      v-if="form_item.componentTopComponent"
+      :is="form_item.componentTopComponent.componentName"
+      :attrs="form_item.componentTopComponent"
+    />
+    <div class="flex align-center input-view">
+      <component
+        v-if="form_item.componentLeftComponent"
+        :is="form_item.componentLeftComponent.componentName"
+        :attrs="form_item.componentLeftComponent"
+      />
+      <component
+        v-if="attrs"
+        :value="value"
+        :is="attrs.componentName"
+        :attrs="attrs"
+        :form_data="form_data"
+        :form_items="form_items"
+        @change="onChange"
+      />
+      <component
+        v-if="form_item.componentRightComponent"
+        :is="form_item.componentRightComponent.componentName"
+        :attrs="form_item.componentRightComponent"
+      />
+    </div>
+    <component
+      v-if="form_item.componentBottomComponent"
+      :is="form_item.componentBottomComponent.componentName"
+      :attrs="form_item.componentBottomComponent"
     />
   </div>
 </template>
@@ -17,30 +40,52 @@ export default {
   mixins: [BaseComponent],
   props: {
     value: {
-      default: null,
+      default: null
     },
     form_items: Array,
     //fromItem数据
     form_item: Object,
     //当前表单数据
-    form_data: Object,
+    form_data: Object
   },
   data() {
     return {};
   },
   model: {
     prop: "value",
-    event: "change",
+    event: "change"
   },
   computed: {
     attrs() {
       return this.form_item.component;
-    },
+    }
   },
   methods: {
     onChange(value) {
       this.$emit("change", value);
-    },
-  },
+    }
+  }
 };
 </script>
+<style lang="scss" scoped>
+.el-form-item__content{
+  .input-view {
+    min-height: 40px;
+  }
+}
+.el-form-item--medium {
+  .input-view {
+    min-height: 36px;
+  }
+}
+.el-form-item--small {
+  .input-view {
+    min-height: 32px;
+  }
+}
+.el-form-item--mini {
+  .input-view {
+    min-height: 28px;
+  }
+}
+</style>