form

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

@@ -84,8 +84,8 @@
                               :disabled="column.disabled"
                               @change="column.change && column.change($event)"
                               v-model="formModel[column.codeCamel]">
-                <el-radio v-for="(option,key) in column.options"
-                          :key="key" :label="key">{{option}}</el-radio>
+                <el-radio v-for="option in column.options"
+                          :key="option.label" :label="option.label">{{option.value}}</el-radio>
               </el-radio-group>
               <!-- 8 文件 -->
               <el-upload v-else-if="column.widgetType === 8"
@@ -111,7 +111,7 @@
                            @click="resetForm(btn.method)">{{btn.text}}</el-button>
                 <el-button v-if="btn.type === 3"
                            type="primary"
-                           @click="btn.method || ''">{{btn.text}}</el-button>
+                           @click="cancel(btn.method)">{{btn.text}}</el-button>
               </el-col>
             </el-form-item>
           </el-form>
@@ -240,6 +240,31 @@
       layout: {
         type: Object,
         required: false
+      },
+      /**
+       * 用来将本表的外链字段(table_id类似的字段)指向的外链表相关联, 格式为:
+       *  {
+       *    "hm_user": {    //外链表 表名 本表所对应的主键表）
+       *      includes:['user_id'] // 与主表所对应的外键
+       *    }
+       *  }
+       *
+       */
+      includes: {
+        type: Object,
+        required: false
+      },
+      /**
+       * 用来将其他表的外链字段指向本表关联，同时返回数据, 格式为:
+       *  {
+       *    'auth_token': {          //主键id所对应的外键表 表名1 （本表所对应的外键表）
+       *      includes: ['user_id']   //外键表的外键字段
+       *    }
+       *  }
+       */
+      refers: {
+        type: Object,
+        required: false
       }
     },
     data() {
@@ -461,6 +486,21 @@
         console.log(self.columns)
         if (self.columns && self.columns.length) {
           self.showUserColumns = _.cloneDeep(self.columns)
+
+          // 提取v-model绑定的变量
+          _.each(self.showUserColumns, function(item) {
+            if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
+              self.$set(self.formModel, item.codeCamel, [])
+            } else {
+              if (item.widgetType === 6) {
+                item.default && self.$set(self.formModel, item.codeCamel, new Date())
+              } else {
+                item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '')
+              }
+            }
+          })
+          console.log(self.formModel)
+          console.log(self.showUserColumns)
           // 将字符串对象进行替换处理
           _.each(self.showUserColumns, function(column, index) {
             if (typeof column === 'object') {
@@ -481,15 +521,7 @@
               self.$set(self.showUserColumns, index, tmp) // 顺序
             }
           })
-          // console.log(self.showUserColumns)
-          // 提取v-model绑定的变量
-          _.each(self.showUserColumns, function(item) {
-            if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
-              self.$set(self.formModel, item.codeCamel, [])
-            } else {
-              self.$set(self.formModel, item.codeCamel, '')
-            }
-          })
+          console.log(self.showUserColumns)
           if (!request.defaults.baseURL) {
             request.defaults.baseURL = '/org/api'
           }
@@ -595,6 +627,11 @@
         if (typeof (callback) === 'function') {
           callback()
         }
+      },
+      cancel(callback) {
+        if (typeof (callback) === 'function') {
+          callback()
+        }
       }
     }
 

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

@@ -5,7 +5,7 @@
                      :columns="showUserColumns"
                      :buttons="showUserButtons"
                      :layout="layout"
-                     >
+                     :refers="judgeRefers">
     </hm-complex-form>
   </div>
 </template>
@@ -26,10 +26,12 @@
       return {
         // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 8: 文件上传
         showUserColumns: [
-          { name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: false,
+          // 1普通input
+          { name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: false, default: '默认值',
             change: this.inputChange
             // rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
           },
+          // 5富文本
           { name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
             change: this.inputChange
             // rule: [
@@ -37,31 +39,51 @@
             //   { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
             // ]
           },
+          // 2下拉框
           { name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
-            change: this.inputChange,
+            change: this.inputChange, default: 1, // 如果开启多选，默认选中项用数组[1]、[1,2,3]
             options: [
-              { value: 1, label: '企业' },
+              { value: 1, label: '企业' }, // 下拉框的label是选项文字，value是选中值
               { value: 3, label: '代理商' }
             ]
           },
+          // 3多选 不支持默认值
           { name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'], change: this.inputChange },
+          // 4密码
           { codeCamel: 'password', widgetType: 4, change: this.inputChange },
-          { name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange },
-          { name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'], change: this.inputChange },
-          { name: '选择头像', codeCamel: 'avatar', widgetType: 8 } // url是后台接口地址
+          // 6日期
+          { name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime',
+            dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange, default: true },
+          // 7单选
+          { name: '登陆id', codeCamel: 'loginid', widgetType: 7,
+            options: [
+              { label: 1, value: '会员' }, // 单选的value是选项文字，label是选中值
+              { label: 2, value: '访客' }
+            ],
+            change: this.inputChange, default: 1 },
+          // 8文件
+          { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
         ],
         // 要显示按钮
-        //, method: this.method1, beforeSubmit: this.processData
-        // , method: this.method2
-        // , method: this.method3
+        //
+        // ,
+        // , method:
         showUserButtons: [
-          { text: '确定', type: 1 },
-          { text: '重置', type: 2 },
-          { text: '取消', type: 3 }
+          { text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData },
+          { text: '重置', type: 2, method: this.method2 },
+          { text: '取消', type: 3, method: this.method3 }
         ],
         // showUserButtons: []
         // 布局方式
-        layout: { left: 6, middle: 12, right: 6 }
+        layout: { left: 6, middle: 12, right: 6 },
+        // 'cc_option': {
+        //   includes: ['ccSubjectId']
+        // }
+        judgeRefers: { // 主查外
+          'cc_hm_user': {
+            includes: ['applicantId']
+          }
+        }
       }
     },
     computed: {