form

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

@@ -22,43 +22,54 @@
                         v-model="formModel[column.codeCamel]"></el-input>-->
 
               <!-- 1 普通input -->
-              <el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
+              <el-input v-if="column.widgetType === 1"
+                        v-model="formModel[column.codeCamel]"
+                        :disabled="column.disabled"
+                        @change="useralidate(formModel[column.codeCamel])"></el-input>
               <!-- 2 日期选择 -->
               <el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
                               v-model="formModel[column.codeCamel]"
                               :type="column.dateType || 'date'"
-                              align="right"
+                              align="right" :disabled="column.disabled"
                               @change="logTimeChange"
                               :value-format="column.dateFormate || 'yyyy-MM-dd'"
                               :picker-options="pickerOptions">
               </el-date-picker>
               <!-- 3 下拉框 -->
-              <el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" clearable>
-                <el-option v-for="(item,key) in column.options"
-                           :key="key"
-                           :label="item"
-                           :value="key">
+              <el-select v-else-if="column.widgetType === 2"
+                         v-model="formModel[column.codeCamel]"
+                         @change="selectChange"
+                         :multiple="column.multiple"
+                         :disabled="column.disabled"
+                         clearable>
+                <el-option v-for="item in column.options"
+                           :key="item.value"
+                           :label="item.label"
+                           :value="item.value">
                 </el-option>
               </el-select>
               <!-- 4 文本域 -->
               <el-input v-else-if="column.widgetType === 4"
                         v-model="formModel[column.codeCamel]"
-                        type="textarea"
+                        type="textarea" :disabled="column.disabled"
                         :autosize="{ minRows: 2, maxRows: 5}"
                         :rows="2">
               </el-input>
               <!-- 5 复选框 -->
               <el-checkbox v-else-if="column.widgetType === 3 && !column.options"
                            v-model="formModel[column.codeCamel]"
+                           :disabled="column.disabled"
                            true-label="1" false-label="0"></el-checkbox>
               <el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
-                                 v-model="formModel[column.codeCamel]">
+                                 v-model="formModel[column.codeCamel]"
+                                 :disabled="column.disabled"
+                                  @change="checkboxsChange">
                 <el-checkbox v-for="option in column.options"
                              :label="option" :key="option">{{option}}</el-checkbox>
               </el-checkbox-group>
               <!-- 6 富文本 -->
               <quill-editor v-else-if="column.widgetType === 5"
-                            ref="textEditor"
+                            ref="textEditor" :disabled="column.disabled"
                             v-model="formModel[column.codeCamel]"
                             :options="editorOption"
                             @blur="onEditorBlur($event)"
@@ -67,17 +78,28 @@
               </quill-editor>
               <!-- 7 单选框 -->
               <el-radio-group v-else-if="column.widgetType === 7"
+                              :disabled="column.disabled"
                               v-model="formModel[column.codeCamel]">
                 <el-radio v-for="(option,key) in column.options"
                           :key="key" :label="key">{{option}}</el-radio>
               </el-radio-group>
+              <!-- 8 文件 -->
+              <el-upload v-else-if="column.widgetType === 8"
+                class="upload-demo"
+                action="/api/upload"
+                :on-remove="handleRemove"
+                multiple
+                :on-exceed="handleExceed">
+                <el-button slot="trigger" size="small" type="primary"
+                           :disabled="column.disabled">选取文件</el-button>
+              </el-upload>
             </el-form-item>
             <!--按钮-->
             <el-form-item v-if="buttons && buttons.length > 0">
               <el-col :span="24/buttons.length" v-for="(btn,key) in buttons" :key="key">
                 <el-button v-if="btn.type === 1"
                            type="primary"
-                           @click="onSubmit(btn.method)">{{btn.text}}</el-button>
+                           @click="onSubmit(btn.method,btn.beforeSubmit)">{{btn.text}}</el-button>
                 <el-button v-if="btn.type === 2"
                            type="primary"
                            @click="resetForm(btn.method)">{{btn.text}}</el-button>
@@ -125,25 +147,37 @@
         required: true
       },
       /**
-       * 必传，指定要显示的表单字段及类型。数组的每个元素包含name、codeCamel和widgetType三个字段，
-       * codeCamel表示要显示的表单字段,
+       * 必传，指定要显示的表单字段及类型。数组的元素为对象类型，对象的属性有name、codeCamel、widgetType、disabled、
+       * options、multiple、dateType等，不同的表单类型需配置的属性不同，
+       * codeCamel必须有，表示要显示的表单字段,
        * name表示自定义的字段名，如果不传，默认为数据库中的字段名，
-       * widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，
+       * widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
        * 取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框)，
        * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
        * 对于复选框，如果只有一个备选项则不必传options,
+       * 若表单类型为下拉框，还可传入multiple字段，取值true/false，表示是否多选，默认false
        * 若表单类型为时间日期，可传入dateType字段，值为date（只显示日期）或datetime（显示日期和时间），如果不传，
        * 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式，
        * 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-dd HH:mm:ss'，如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应
+       * 所有的表单类型都可传入disabled字段，取值true/false，表示是否禁用，默认不禁用
        * 示例：[
-       *        { name: '姓名', codeCamel: 'username', widgetType: 1 },
-       *        { name: '安全级别', codeCamel: 'securityLevel', widgetType: 5 },
-       *        { name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
-       *        { name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
-       *        { name: '部门', codeCamel: 'departmentId', widgetType: 4 },
-       *        { name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
-       *        { name: '登陆地址', codeCamel: 'loginid', widgetType: 7, 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: '选择头像', codeCamel: 'avatar', widgetType: 8 }
+       ]
        */
       columns: {
         type: Array,
@@ -153,13 +187,15 @@
             console.warn(`传入的columns不符合要求，必须是数组`)
             return false
           }
-
           return true
         }
       },
       /**
        * 非必传，指定要显示的按钮及类型，默认不显示。
-       * 类型（type）关系到按钮要执行的方法，type=1，执行组件的提交方法，如果用户传入了method，会作为提交方法的回调函数执行
+       * 类型（type）关系到按钮要执行的方法，type=1，执行组件的提交方法，还可以传入了method字段，值为函数，
+       * 该函数会作为提交方法的回调函数执行,同时还可以传入beforeSubmit字段，值为函数，函数接受一个包含表单数据的Object
+       * 类型参数，该函数可以在提交之前对表单数据进行处理，参数类似{username: 'name', loginid: 'id'},其中键为
+       * 调用者传入的codeCamel
        * type=2，执行组件的重置方法,如果用户传入了method，会作为重置方法的回调函数执行
        * type=3，直接执行用户传入的方法
        * 如果要传入了确定/取消的回调函数，请先传入对应的按钮
@@ -232,8 +268,8 @@
         rules: {
           username: [
             { validator: validateUsername, trigger: 'change' }
-            // { required: true, message: '请输入用户名', trigger: 'blur' },
-            // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
+          // { required: true, message: '请输入用户名', trigger: 'blur' },
+          // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
           ],
           loginid: [
             // { required: true, message: '请输入登陆ID', trigger: 'blur' }
@@ -296,6 +332,25 @@
       console.log(this.buttons)
     },
     methods: {
+      createRule() {
+        _.each()
+      },
+      useralidate(value) {
+        // console.log(event)
+        console.log(value)
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList)
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
+      },
+      checkboxsChange(val) {
+        console.log(val)
+      },
+      selectChange(val) {
+        console.log(val)
+      },
       // 判断是否一个对象的所有属性都为空
       isEmpty(obj) {
         _.forEach(obj, function(val) {
@@ -355,14 +410,6 @@
       },
       init() {
         const self = this
-        // 如果没有传columns，则全部显示
-        // if (!self.columns || !self.columns.length) {
-        //   _.each(self.schema['columns'], function(column) {
-        //     const tmp = JSON.parse(JSON.stringify(column))
-        //     self.$set(tmp, 'code', tmp.code.toLowerCase())
-        //     self.showUserColumns.push(tmp)
-        //   })
-        // } else
         if (self.columns && self.columns.length) {
           self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
           // console.log(self.showUserColumns)
@@ -375,7 +422,10 @@
               // self.$set(tmp, 'code', tmp.code.toLowerCase())
               column.name && self.$set(tmp, 'name', column.name) // 自定义字段名
               self.$set(tmp, 'widgetType', column.widgetType || 1)
-              column.options && self.$set(tmp, 'options', column.options) // 设置下拉框/多选选项
+              // column.validate && self.$set(tmp, 'validate', column.validate)
+              column.disabled && self.$set(tmp, 'disabled', column.disabled) // 设置是否禁用
+              column.options && self.$set(tmp, 'options', column.options) // 设置下拉框或者多选的选项
+              column.multiple && self.$set(tmp, 'multiple', column.multiple) // 设置下拉框是否多选
               column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
               column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
               self.$set(self.showUserColumns, index, tmp) // 顺序
@@ -392,7 +442,9 @@
           })
           if (!request.defaults.baseURL) {
             request.defaults.baseURL = '/org/api'
+            console.log('没有')
           }
+          console.log(request.defaults.baseURL)
           // 加载等待
           if (self.tableId) {
             self.Loading = true
@@ -410,9 +462,11 @@
        * 所有选项输入并验证通过，正确提交
        * 验证失败，禁止提交并给出提示
        */
-      onSubmit(callback) {
+      onSubmit(callback, processData) {
         const self = this
         console.log('点击了提交函数')
+        // console.log(self.formModel)
+        self.formModel = processData ? processData(self.formModel) : self.formModel // 对表单数据进行处理
         console.log(self.formModel)
         // if (self.isEmpty(self.formModel)) return
         self.$refs.form.validate((valid) => {
@@ -458,7 +512,7 @@
                   }
               }).then(resp => {
                 console.log('创建成功')
-                self.resetForm()
+                // self.resetForm()
                 if (typeof (callback) === 'function') {
                   callback()
                 }

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()
+        // }
       }
     }
   }