form

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

 <template>
+  <!--:tableId="tableId"-->
   <div>
     <hm-complex-form :schema="schema['HmUser']"
                      :columns="showUserColumns"
                      :buttons="showUserButtons"
+                     :tableId="tableId"
                      :layout="layout"
-                     :tableId="tableId">
+                     >
     </hm-complex-form>
   </div>
 </template>
@@ -25,17 +27,26 @@
       return {
         // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
         showUserColumns: [
-          { name: '用户名称', codeCamel: 'username', widgetType: 1 },
-          { name: '电子邮件', codeCamel: 'email', widgetType: 5 },
-          { name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
-          { name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
+          { name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true },
+          { name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false },
+          { name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
+            options: [
+              { value: 0, label: '选项1' },
+              { value: 1, label: '选项2' },
+              { value: 2, label: '选项3' },
+              { value: 3, label: '选项4' },
+              { value: 4, label: '选项5' }
+            ]
+          },
+          { name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'] },
           { codeCamel: 'password', widgetType: 4 },
           { name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
-          { name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }
+          { name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
+          { name: '选择头像', codeCamel: 'avatar', widgetType: 8 }
         ],
         // 要显示按钮
         showUserButtons: [
-          { text: '确定', type: 1, method: this.method1 },
+          { text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData },
           { text: '重置', type: 2, method: this.method2 },
           { text: '取消', type: 3, method: this.method3 }
         ],
@@ -54,6 +65,10 @@
       this.tableId = '0e26566e953449a7a7500c34be39fd26'
     },
     methods: {
+      processData(object) {
+        console.log(object)
+        return object
+      },
       method1() {
         console.log('method1')
       },
@@ -62,6 +77,16 @@
       },
       method3() {
         console.log('method3')
+      },
+      usernameValidate() {
+        console.log(1)
+        // if (!value) {
+        //   callback(new Error('请输入用户名'))
+        // } else if ((value.length < 2 || value.length > 10)) {
+        //   callback(new Error('用户名长度在 2 到 10 个字符'))
+        // } else {
+        //   callback()
+        // }
       }
     }
   }