form

src/views/haomo/components/forms/HmComplexForm.vue

 <template>
   <div class="app-container documentation-container">
-    <el-row type="flex" class="hm-form" style="margin-top: 50px">
-      <el-col :span="6">
+    <!---->
+    <el-row type="flex" class="hm-form" style="margin-top: 20px" v-loading="Loading">
+      <el-col :span="layout.left">
         <div></div>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="layout.middle">
         <div>
           <!--表单部分-->
           <el-form ref="form"
+                   element-loading-text="加载中"
                    :model="formModel"
                    :rules="rules"
                    label-width="110px"
@@ -75,7 +77,7 @@
           </el-form>
         </div>
       </el-col>
-      <el-col :span="6">
+      <el-col :span="layout.right">
         <div></div>
       </el-col>
     </el-row>
@@ -171,6 +173,15 @@
       cancelFunction: {
         type: Function,
         required: false
+      },
+      /**
+       * 非必传，布局方式，form组件布局分三栏，左右为留白，中间是form，
+       * 通过传参可以控制各部分所占份数，遵循elementUi24分栏，默认居中布局(left：6，middle：12，right：6)
+       * 示例：{ left: 0, middle: 12, right: 12 }
+       */
+      layout: {
+        type: Object,
+        required: false
       }
     },
     data() {
@@ -208,6 +219,7 @@
       //   }
       // }
       return {
+        Loading: true,
         form: null,
         formModel: {}, // 双向绑定的数据变量
         showUserColumns: [], // 要显示的字段
@@ -274,6 +286,7 @@
     created() {
       // this.validate()
       this.init()
+      this.getList()
       console.log(this.buttons)
     },
     methods: {
@@ -316,6 +329,24 @@
       onEditorReady(editor) {
         // console.log('editor ready!')
       },
+      // 存在tableId，修改数据前先获取数据
+      getList() {
+        const self = this
+
+        // 获取数据
+        request(self.schema.modelUnderscorePlural + '/' + self.tableId).then(resp => {
+          // 数据库字段转化显示
+          /* if (self.options.changeValue) {
+            resp.data = self.changeValue(resp.data)
+          } */
+          self.Loading = false
+          // console.log(self.formModel)
+          var formArray = _.keys(self.formModel)
+          // console.log(formArray)
+          self.formModel = _.pick(resp.data, formArray)
+          // console.log(self.formModel)
+        })
+      },
       init() {
         const self = this
         // 如果没有传columns，则全部显示
@@ -340,9 +371,9 @@
               self.$set(tmp, 'widgetType', column.widgetType || 1)
               column.options && self.$set(tmp, 'options', column.options)
               self.$set(self.showUserColumns, index, tmp) // 顺序
-              // console.log(self.showUserColumns)
             }
           })
+          console.log(self.showUserColumns)
           // 提取v-model绑定的变量
           _.each(self.showUserColumns, function(item) {
             if (item.widgetType === 3 && item.options && item.options.length > 0) {
@@ -351,10 +382,15 @@
               self.$set(self.formModel, item.codeCamel, '')
             }
           })
-          console.log(self.formModel)
           if (!request.defaults.baseURL) {
             request.defaults.baseURL = '/org/api'
           }
+          // 加载等待
+          if (self.tableId) {
+            self.Loading = true
+          } else {
+            self.Loading = false
+          }
         } else {
           console.log('columns为必传字段!!')
         }

src/views/haomo/components/forms/index.vue

@@ -5,6 +5,7 @@
                      :buttons="showUserButtons"
                      :confirmFunction="confirm"
                      :cancelFunction="cancel"
+                     :layout="layout"
                      :tableId="tableId">
     </hm-complex-form>
   </div>
@@ -27,16 +28,17 @@
         // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
         showUserColumns: [
           { name: '姓名', codeCamel: 'username', widgetType: 1 },
-          { name: '安全级别', codeCamel: 'securityLevel', widgetType: 5 },
+          { name: '邮箱', codeCamel: 'email', widgetType: 5 },
           { name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
           { name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
-          { name: '部门', codeCamel: 'departmentId', widgetType: 4 },
+          { codeCamel: 'password', widgetType: 4 },
           { name: '新建时间', codeCamel: 'createTime', widgetType: 6 },
-          { name: '登陆地址', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }
+          { name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }
         ],
         // 要显示按钮 暂只支持确定、保存、取消、提交、重置
-        showUserButtons: ['确定', '取消']
+        showUserButtons: ['确定', '取消'],
         // showUserButtons: []
+        layout: { left: 0, middle: 12, right: 12 }
       }
     },
     computed: {