form 上传文件类型限制

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

 <template>
-  <div class="app-container documentation-container">
+  <!--class="app-container documentation-container"-->
+  <div>
     <!--v-loading="Loading"-->
-    <el-row type="flex" class="hm-form" style="margin-top: 20px" >
-      <el-col :span="layout ? layout.left : 6">
+    <el-row type="flex" class="hm-form" style="margin-top: 12px" >
+      <el-col :span="layout ? layout.left : 1">
         <div></div>
       </el-col>
-      <el-col :span="layout ? layout.middle : 12">
-        <div>
+      <el-col :span="layout ? layout.middle : 23">
         <!--表单部分-->
         <el-form ref="form"
                  :label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'"
                  element-loading-text="加载中"
-                   :label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '170px'"
+                 :label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '163px'"
                  :model="formModel"
                  :rules="rules"
-                   :style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'80%',margin:'0 auto'}">
+                 :style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'100%'}">
           <el-form-item v-for="column in showUserColumns"
                         v-show="!column.hide"
                         :key="column.id"
@@ -27,7 +27,7 @@
             <!-- -->
             <el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
                             v-model="formModel[column.codeCamel]"
-                              :style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '65%'}"
+                            :style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '70%'}"
                             :ref="column.ref || ''"
                             :readonly="column.readonly"
                             :type="column.dateType || 'date'"
@@ -41,7 +41,7 @@
                        :ref="column.ref || ''"
                        v-model="formModel[column.codeCamel]"
                        @change="column.change && column.change($event)"
-                         :style="formStyle && formStyle.select && formStyle.select.style || {width: '65%'}"
+                       :style="formStyle && formStyle.select && formStyle.select.style || {width: '70%'}"
                        :multiple="column.multiple"
                        :disabled="column.disabled"
                        style="width: 50%"
@@ -56,7 +56,7 @@
             <el-input v-else-if="column.widgetType === 4"
                       :ref="column.ref || ''"
                       :readonly="column.readonly"
-                        :style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '65%'}"
+                      :style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '70%'}"
                       v-model="formModel[column.codeCamel]"
                       type="textarea" :disabled="column.disabled"
                       :resize="formStyle && formStyle.textarea && formStyle.textarea.resize || 'vertical'"
@@ -80,13 +80,13 @@
             </el-checkbox-group>
             <!-- 6 富文本 -->
             <quill-editor v-else-if="column.widgetType === 5"
-                            :ref="column.ref || 'textEditor'" :disabled="column.disabled"
+                          :ref="column.ref || ''" :disabled="column.disabled"
                           v-model="formModel[column.codeCamel]"
-                            :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'65%'}"
+                          :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'70%'}"
                           :options="editorOption"
                           @blur="onEditorBlur($event)"
                           @focus="onEditorFocus($event)"
-                            @change="(column.change && column.change($event)) || onEditorChange"
+                          @change="column.change && column.change($event)"
                           @ready="onEditorReady($event)">
             </quill-editor>
             <!-- 7 单选框 -->
@@ -99,20 +99,21 @@
             </el-radio-group>
             <!-- 8 文件 -->
             <el-upload v-else-if="column.widgetType === 8"
-                         name="picture"
+                       :accept="column.accept || '*/*'"
+                       :name="column.param || 'picture'"
                        :action=" column.url || '/api/upload'"
                        :on-remove="handleRemove"
                        :on-change="column.change || handleChange"
                        :file-list="fileList"
                        :multiple="column.multiple"
-                         :ref="column.ref || ''"
+                       ref="upload"
                        :on-success="uploadSuccess">
               <el-button slot="trigger" size="small" type="primary"
                          :disabled="column.disabled">选取文件</el-button>
             </el-upload>
-              <!-- 1 普通input -->
+            <!-- 1 普通input  || {width:'65%'}-->
             <el-input v-else
-                        :style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}"
+                      :style="formStyle && formStyle.input && formStyle.input.style || {width:'70%'}"
                       v-model="formModel[column.codeCamel]"
                       :disabled="column.disabled"
                       :readonly="column.readonly"
@@ -137,9 +138,8 @@
             </el-col>
           </el-form-item>
         </el-form>
-        </div>
       </el-col>
-      <el-col :span="layout ? layout.left : 6">
+      <el-col :span="layout ? layout.right : 0">
         <div></div>
       </el-col>
     </el-row>
@@ -183,6 +183,8 @@
        * default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue
        * hide属性可选，设置该表单字段是否显示,值为boolean
        * ref属性可选，用来获取当前表单dom节点
+       * param属性可选，当表单类型为文件类型时，可传入param字段，值为后台规定必传参数，默认值为picture
+       * accept属性可选,当表单类型为文件类型时，可传入accept字段，限制限制上传文件类型，取值规范参考w3c
        * widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
        * 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)，
        * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
@@ -533,12 +535,12 @@
       // textareaChange(val) {
       //   console.log(val)
       // },
-      onEditorChange({ quill, html, text }) {
-        console.log(quill)
-        console.log(html)
-        console.log(text)
-        // this.content = html
-      },
+      // onEditorChange({ quill, html, text }) {
+      //   console.log(quill)
+      //   console.log(html)
+      //   console.log(text)
+      //   // this.content = html
+      // },
       onEditorBlur(val) {
         // console.log(val)
       },
@@ -893,9 +895,9 @@
                 //     self.partPropModel[key] = value.join('')
                 //   }
                 // })
-                console.log('本表', self.nativeFormModel)
-                console.log('外表', self.foreignFormModel)
-                console.log('部分属性', self.partPropModel)
+                // console.log('本表', self.nativeFormModel)
+                // console.log('外表', self.foreignFormModel)
+                // console.log('部分属性', self.partPropModel)
               }
               // 发送新建请求
               console.log('请求之前', self.formModel)
@@ -913,8 +915,6 @@
                   }
               }).then(resp => {
                 console.log('创建成功', resp.data)
-                // 设置中间表与本表(主表)对应字段
-                // if (!self.relates || !self.relates.length) return
                 // 创建中间表数据
                 if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) {
                   self.$set(self.relateData, self.relates[1].relateKeys[0], resp.data.id)
@@ -953,7 +953,7 @@
                     }
                   })
                 }
-                console.log('外表公共属性partProp', self.partPropModel)
+                // console.log('外表公共属性partProp', self.partPropModel)
                 // 把外表公共属性partProp的值写入foreignArray的每条数据对象
                 if (self.foreignArray.length > 0) {
                   _.each(self.foreignArray, function(item, key) {
@@ -980,7 +980,7 @@
                     }
                     item = Object.assign(item, tem)
                   })
-                  console.log('外表数据', self.foreignArray)
+                  // console.log('外表数据', self.foreignArray)
                   // 批量创建信息
                   const url = _.keys(self.refers)[0] + 's' + '/create/batch'
                   // const string = self.transformRequest(self.foreignArray)
@@ -1059,6 +1059,17 @@
 
   }
 </script>
-<style scoped>
-
+<style>
+  .hm-form .el-form-item__content{
+    margin-left: 173px !important;
+  }
+  .hm-form .ql-toolbar.ql-snow .ql-formats{
+    margin-right: 3px;
+  }
+  .hm-form .ql-toolbar.ql-snow + .ql-container.ql-snow {
+    height: 150px;
+  }
+  .hm-form .ql-toolbar.ql-snow{
+    padding: 7px;
+  }
 </style>

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

@@ -75,7 +75,7 @@
             ], // default: 1
             change: this.inputChange },
           // 8文件 change: this.uploadChange
-          { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload', param: 'picture' } // url是后台接口地址
+          { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload', param: 'picture', accept: 'image/*' } // url是后台接口地址
         ],
         // CcSubject示例
         showUserColumns2: [