表单页面修改

package.json

@@ -39,6 +39,7 @@
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-multiselect": "2.0.8",
+    "vue-quill-editor": "^3.0.5",
     "vue-router": "3.0.1",
     "vue-splitpane": "1.0.2",
     "vuedraggable": "2.15.0",
@@ -46,7 +47,9 @@
     "xlsx": "^0.11.16"
   },
   "pre-commit": {
-    "run": ["lint"]
+    "run": [
+      "lint"
+    ]
   },
   "devDependencies": {
     "autoprefixer": "7.2.3",

src/main.js

 import Vue from 'vue'
+import VueQuillEditor from 'vue-quill-editor' // 富文本插件
 
 import 'normalize.css/normalize.css'// A modern alternative to CSS resets
 
@@ -17,12 +18,16 @@ import './errorLog'// error log
 import './permission' // permission control
 import './mock' // simulation data
 
+import 'quill/dist/quill.core.css' // 富文本CSS
+import 'quill/dist/quill.snow.css' // 富文本CSS
+
 import * as filters from './filters' // global filters
 
 import Icon from 'vue-awesome/components/Icon'
 
 Vue.component('icon', Icon)
 
+Vue.use(VueQuillEditor) // 富文本
 Vue.use(Element, {
   size: 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

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

 ### 基本使用
 
 ```jsx
-    <hm-complex-form      :columns="['username', 'loginid', 'password', 'mobile', 'email']" 
+    <hm-complex-form      :tableId="tableId"
+                          :columns="['username', 'loginid', 'password', 'mobile', 'email']" 
                           :schema="{
                                    'model': 'HmUser',
                                    'modelPlural': 'HmUsers',
@@ -204,7 +205,9 @@
 ```vue
 <template>
   <div>
-    <hm-complex-form  :schema="schema['HmUser']" 
+    <hm-complex-form  
+                      :tableId="tableId"
+                      :schema="schema['HmUser']" 
                       :columns="showUserColumns">
     </hm-complex-form>
   </div>
@@ -418,6 +421,7 @@
     },
     created() {
       this.schema = schema
+      this.tableId = '0e26566e953449a7a7500c34be39fd26'
     }
   }
 </script>

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

@@ -9,10 +9,18 @@
         <el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
                  style="width:80%;margin:0 auto">
           <el-form-item v-for="(column,index) in showUserColumns" :key="index" :label="column.name" :prop="column.codeCamel">
-            <el-input v-if="column.codeCamel==='password'" type="password" :placeholder="column.name"
-                      v-model="formModel[column.codeCamel]"></el-input>
-            <el-input v-if="column.codeCamel!=='password'" :placeholder="column.name"
-                      v-model="formModel[column.codeCamel]"></el-input>
+            <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
+                      v-model="formModel[column.codeCamel]"></el-input>-->
+            <el-input v-if="column.codeCamel!=='securityLevel'" v-model="formModel[column.codeCamel]"></el-input>
+            <!-- quill-editor -->
+            <quill-editor v-if="column.codeCamel==='securityLevel'" class="editor-example bubble"
+                          ref="textEditor"
+                          v-model="formModel[column.codeCamel]"
+                          :options="editorOption"
+                          @blur="onEditorBlur($event)"
+                          @focus="onEditorFocus($event)"
+                          @ready="onEditorReady($event)">
+            </quill-editor>
           </el-form-item>
           <el-form-item>
             <el-col :span="12">
@@ -36,7 +44,10 @@
   import request from '@/utils/request'
 
   /**
-   * 表单页面。
+   * 毫末科技的表单组件.
+   *
+   *   demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/forms
+   * @author 王康
    */
   export default {
     name: 'HmComplexForm',
@@ -69,6 +80,13 @@
 
           return true
         }
+      },
+      /**
+       * 传入用户的id用来修改用户信息
+       */
+      tableId: {
+        type: String,
+        required: false
       }
     },
     data() {
@@ -99,8 +117,8 @@
             { required: true, message: '请输入登陆ID', trigger: 'blur' }
           ],
           password: [
-            { required: true, message: '请输入密码', trigger: 'blur' },
-            { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
+            { required: true, message: '请输入密码', trigger: 'blur' }
+            // { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
           ],
           mobile: [
             { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码或手机号', trigger: 'blur&change' }
@@ -108,15 +126,34 @@
           email: [
             { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur&change' }
           ]
+        },
+        editorOption: {
+          placeholder: '',
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike'],
+              [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+              [{ 'color': [] }, { 'background': [] }],
+              ['image']
+            ]
+          }
         }
       }
     },
-
     created() {
       this.init()
       // console.log(this.schema)
     },
     methods: {
+      onEditorBlur(editor) {
+        console.log('editor blur!')
+      },
+      onEditorFocus(editor) {
+        console.log('editor focus!')
+      },
+      onEditorReady(editor) {
+        console.log('editor ready!')
+      },
       init() {
         const self = this
         // 如果没有传columns，则全部显示
@@ -168,22 +205,46 @@
         self.$refs.form.validate((valid) => {
           if (valid) {
             console.log('提交成功!')
-            request(self.schema.modelUnderscorePlural + '/new', {
-              method: 'post',
-              headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
-              data: self.formModel,
-              transformRequest:
-                function(obj) {
-                  var str = []
-                  for (var p in obj) {
-                    str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
+            // 存在tableId 则修改信息
+            if (self.tableId) {
+              request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', {
+                method: 'post',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+                data: self.formModel,
+                transformRequest:
+                  function(obj) {
+                    var str = []
+                    // 删除空值的属性
+                    obj = _.omitBy(obj, function(value) {
+                      return !value
+                    })
+                    for (var p in obj) {
+                      str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
+                    }
+                    return str.join('&')
                   }
-                  return str.join('&')
-                }
-            }).then(resp => {
-              console.log(resp.data)
-              self.resetForm()
-            })
+              }).then(resp => {
+                console.log('修改成功')
+                self.resetForm()
+              })
+            } else { // 不存在tableId 则创建一条数据
+              request(self.schema.modelUnderscorePlural + '/new', {
+                method: 'post',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
+                data: self.formModel,
+                transformRequest:
+                  function(obj) {
+                    var str = []
+                    for (var p in obj) {
+                      str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
+                    }
+                    return str.join('&')
+                  }
+              }).then(resp => {
+                console.log('创建成功')
+                self.resetForm()
+              })
+            }
           } else {
             console.log('提交失败!!')
             return false

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

 <template>
   <div>
-    <hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns">
+    <hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :tableId="tableId">
     </hm-complex-form>
   </div>
 </template>
@@ -19,7 +19,8 @@
     },
     data() {
       return {
-        showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email']
+        // showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email']
+        showUserColumns: []
       }
     },
     computed: {
@@ -28,6 +29,7 @@
     },
     created() {
       this.schema = schema
+      this.tableId = '0e26566e953449a7a7500c34be39fd26'
     },
     methods: {}
   }