From a5db2c5150e9f3633a6fd76d5dfe4083656654e0 Mon Sep 17 00:00:00 2001
From: asd8510678 <252912381@qq.com>
Date: Thu, 7 Jun 2018 14:28:25 +0800
Subject: [PATCH 1/3] update example

---
 README.md                             | 302 +++++++++++++++++----
 src/components/form/FormDynamic.vue   |  63 +++--
 src/components/form/ImgUpload.vue     |   5 +-
 src/pages/example/FormDynamicPage.vue | 370 +++++++++++++++-----------
 4 files changed, 511 insertions(+), 229 deletions(-)

diff --git a/README.md b/README.md
index 7df5a5c..bf59ab3 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ npm run build
 Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方案,已实现基本的系统管理页面,您可以用其中的组件快速开发属于你的页面。
 已实现页面（整体布局界面，用户管理，角色管理，字典管理，权限菜单，接口测试，系统日志）
 开发中的页面（代码生成）
-演示地址 http://www.ffast.cn/  备用地址http://39.107.104.190/ffast
+演示地址 http://demo.ffast.cn/  备用地址http://39.107.104.190/ffast
 ```
 
 
@@ -210,8 +210,6 @@ Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方
 ```
 
 
-
-
 # 灵活丰富的动态表单组件(FormDynamic)
 
 ## 支持十多种表单组件：
@@ -239,84 +237,288 @@ Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方
 
 > 12.editor(基于vue-quill-editor富文本)
 
+> 13.PopupSelect(弹出式选择)
+
 ## 代码样例
 ``` bash
 <template>
-  <FormDynamic ref="dynamic" :data="dynamicData" :label-width="100"></formDynamic>
+  <div class="main-view main-view-full" style="padding-top: 50px">
+    <row>
+      <i-col span="24">
+        <FormDynamic ref="dynamic1" v-model="fromData" :data="dynamic1" :label-width="120">
+        </FormDynamic>
+      </i-col>
+    </row>
+    <PopupEdit ref="popupEdit"
+               :width="1000"
+               :dynamic="dynamic1"
+               @on-success="editSuccess"
+               :label-width="120">
+    </PopupEdit>
+    <PopupSelect ref="popSelect" :content="userPage"></PopupSelect>
+  </div>
 </template>
 <script>
-    dynamicData: [
+  import {FormDynamic, PopupEdit, PopupSelect} from 'components/';
+  let self = null;
+  const dynamic1 = [
+      [
+        {type: 'title', span: 24, text: 'Input'}
+      ],
       [
-        {name: 'id', hidden: true},
         {
-          name: 'name',
+          name: 'numberData',
+          type: 'number',
+          span: 6,
+          // 最小值
+          min:1,
+          // 最大值
+          max:80010
+          label: 'Number'
+        },
+        {
+          name: 'textData',
           type: 'text',
-          span: 12,
-          label: '资源名',
-          // 表单验证
-          rules: {required: true}
+          span: 6,
+          label: 'text',
+          value: 'DefaultValue',
+          rules: {required: true, type: 'string'}
         },
-        {name: 'parentId', type: 'treeSelect', dataFromTree: true, span: 12, label: '父资源'}
-      ],
-      [
-        {name: 'url', type: 'text', span: 24, label: '菜单Url'}
-      ],
-      [
-        {name: 'identity', type: 'text', span: 12, label: '标识符'},
-        {name: 'icon', type: 'text', span: 12, label: '图标'}
-
+        {
+          name: 'passwordData',
+          type: 'text',
+          span: 6,
+          password: true,
+          label: 'PasswordText',
+          rules: {required: true, type: 'string', message: '密码不能为空'}
+        },
+        {
+          name: 'textarea',
+          type: 'text',
+          placeholder: '多行文本输入框',
+          span: 6,
+          label: 'TextareaLabel',
+          textarea: {minRows: 1, maxRows: 6}
+        }
+      ], [
+        {type: 'title', span: 24, text: 'date'}
+      ], [
+        {name: 'date1', type: 'date', span: 6, label: 'DateLabel'},
+        {name: 'date2', type: 'datetime', span: 6, label: 'DateTimeLabel'},
+        {name: 'date3', type: 'datetimerange', span: 6, label: 'Datetimerange'}
       ],
       [
-        {name: 'weight', type: 'text', span: 12, label: '权重'}
+        {type: 'title', span: 24, text: 'DataSelect'}
       ],
       [
         {
-          name: 'status',
-          openText: '显示',
-          closeText: '隐藏',
-          type: 'switch',
-          span: 12,
-          label: '状态',
-          value: 1,
-          trueValue: 1,
-          falseValue: 0
+          name: 'selectData',
+          type: 'select',
+          span: 8,
+          value: 0,
+          label: 'SelectLabel',
+          data: [
+            {label: '选项1', value: 0}, {label: '选项2', value: 1},
+            {label: '选项3', value: 2}, {label: '选项4', value: 3}
+          ],
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
         },
         {
-          name: 'resType',
+          name: 'selectData2',
+          type: 'select',
+          span: 6,
+          value: 0,
+          label: 'URLSelectLabel',
+          // value 字段名
+          valField: 'id',
+          // label 字段名
+          textField: 'name',
+          // 通过设置数据url地址进行获取
+          dataUrl: '/sys/dict/get?type=job',
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'selectData3',
+          type: 'select',
+          span: 6,
+          value: 0,
+          label: 'DictSelectLabel',
+          // 直接取字典数据
+          dict: 'job',
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        }
+      ], [
+        {type: 'title', span: 24, text: 'Title'}
+      ], [
+        {
+          name: 'radioData',
           type: 'radio',
-          span: 12,
-          label: '类型',
-          value: 1,
-          data: [{label: '菜单', value: 1}, {label: '权限', value: 2}],
-          rules: {required: true, type: 'number'}
+          span: 6,
+          value: 0,
+          label: 'RadioLabel',
+          data: [
+            {label: '选项1', value: 0}, {label: '选项2', value: 1},
+            {label: '选项3', value: 2}, {label: '选项4', value: 3}
+          ],
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'checkboxData',
+          type: 'checkbox',
+          span: 8,
+          label: 'CheckboxLabel',
+          data: [
+            {label: '选项1', value: 0}, {label: '选项2', value: 1},
+            {label: '选项3', value: 2}, {label: '选项4', value: 3}
+          ],
+          enableCheckAll: true,
+          checkAllLabel: '全选',
+          checkAll: true,
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'deviceTypeId',
+          type: 'treeSelect',
+          span: 8,
+          label: 'TreeSelectLabel',
+          // 如果是CrudView 支持从左边树绑定数据，select组件同样支持
+          dataFromTree: true,
+          textField: 'name',
+          valField: 'id',
+          dataUrl: '/sys/res/list',
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'popSelectId',
+          span:
+            8,
+          label:
+            'PopupSelectLabel',
+          type:
+            'popText',
+          textField:
+            'popSelectName',
+          onClick(fromData) {
+            self.$refs['popSelect'].open((selection) => {
+              console.log(selection[0].id);
+              self.$set(fromData, 'popSelectId', selection[0].id);
+              self.$set(fromData, 'popSelectName', selection[0].username);
+            })
+          }
         }
       ],
       [
         {
-          name: 'addBaseCrud',
-          type: 'switch',
-          openText: '是',
-          closeText: '否',
-          span: 12,
-          label: '添加基础权限',
-          value: false
+          name: 'imgData',
+          // 最多只能上传2张
+          max: 2,
+          type: 'imgUpload',
+          span: 24,
+          label: 'ImgUploadLabel'
+        },
+        {name: 'editor', type: 'editor', span: 24, label: 'EditorLabel', placeholder: '富文本编辑器'}
+      ],
+      [
+        {
+          name: 'button', type: 'buttons',
+          span: 24,
+          data: [
+            {
+              label: 'SetData',
+              onClick() {
+                // 给表单设置数据
+                self.$refs.dynamic1.setFormData({numberData: 10001, textData: 'SetData'})
+              }
+            },
+            {
+              label: 'GetFormData',
+              onClick() {
+                self.$refs.dynamic1.submit((param) => {
+                  console.log(param);
+                  alert(JSON.stringify(param))
+                }, (res) => {
+                  // 表单验证失败
+                });
+              }
+            },
+            {
+              // 弹出窗口编辑表单
+              label: 'PopupWindow',
+              onClick() {
+                self.$refs.popupEdit.open({
+                  title: 'PopupEditWindow',
+                  // 确认提交url
+                  postUrl: null
+                }, self.fromData);
+              }
+            },
+            {
+              label: 'GotoEditPage',
+              onClick() {
+                self.editOptions.editSuccess = self.editSuccess;
+                let action = {
+                  // 窗口标题
+                  title: 'title',
+                  // 确认提交请求url
+                  postUrl: ''
+                }
+                self.$router.push({
+                  path: self.$router.currentRoute.path + '/edit',
+                  query: {options: self.editOptions, action: action, data: self.fromData}
+                })
+              }
+            }
+          ]
         }
       ]
-    ]
-
-  import FormDynamic from 'components/FormDynamic'
+    ];
+  /**
+   * 弹出式表单参数
+   */
+  const editOptions = {
+    width: 1200,
+    labelWidth: 120,
+    dynamic: dynamic1
+  };
 
   export default {
     data() {
       return {
-        dynamicData,
+        editOptions,
+        dynamic1,
+        fromData: {}
+      }
+    },
+    computed: {
+      // 弹出选择页面
+      userPage() {
+        return import('pages/sys/user');
+      }
+    },
+    methods: {
+      // 编辑成功
+      editSuccess(res) {
+        console.log(res);
       }
     },
-    computed: {},
-    methods: {},
     mounted() {
+      self = this;
     },
-    components: {FormDynamic}
+    components: {
+      FormDynamic, PopupEdit, PopupSelect
+    }
   }
 </script>
 ```
diff --git a/src/components/form/FormDynamic.vue b/src/components/form/FormDynamic.vue
index 5770c0f..f2d180f 100644
--- a/src/components/form/FormDynamic.vue
+++ b/src/components/form/FormDynamic.vue
@@ -34,7 +34,7 @@
             <!--输入框-->
             <template v-if="item.type==='text'">
               <i-input
-                :type="item.textarea==null?'text':'textarea'"
+                :type="getInputType(item)"
                 v-model="fromData[item.name]"
                 :placeholder="getPlaceholder(item)"
                 :readonly="item.readonly"
@@ -203,7 +203,6 @@
             </template>
             <!--图片上传-->
             <template v-else-if="item.type==='imgUpload'">
-              {{fromData[item.name]}}
               <ImgUpload v-model="fromData[item.name]"
                          :data="item.data"
                          :param="item.param"
@@ -231,7 +230,7 @@
 
             <!--富文本-->
             <template v-else-if="item.type==='editor'">
-              <FormEditor v-model="fromData[item.name]"></FormEditor>
+              <FormEditor v-model="fromData[item.name]" :placeholder="getPlaceholder(item)"></FormEditor>
             </template>
 
 
@@ -270,7 +269,7 @@
       colHeight: {},
       paddingRight: {}
     },
-    data () {
+    data() {
       return {
         keys: null,
         fromData: {},
@@ -278,26 +277,29 @@
       };
     },
     computed: {
-      colStyle () {
+      colStyle() {
         return {
           height: this.colHeight + 'px',
           paddingRight: this.paddingRight + 'px'
         }
       }
     },
-    created () {
+    created() {
       this.initForm(this.data);
     },
-    mounted () {
+    mounted() {
     },
     methods: {
-      initForm (data) {
+      getInputType(item) {
+        return item.textarea == null ? item.password === true ? 'password' : 'text' : 'textarea';
+      },
+      initForm(data) {
         for (let i in data) {
           for (let j in data[i]) {
             let obj = data[i][j];
             if (obj.rules != null) {
               if (obj.rules.message == null) {
-                obj.rules.message = obj.label + "不能为空";
+                obj.rules.message = obj.label + '不能为空';
               }
               if (obj.rules.trigger == null) {
                 obj.rules.trigger = 'blur';
@@ -310,26 +312,29 @@
         }
         this.reset();
       },
-      getPlaceholder (item) {
+      getPlaceholder(item) {
         if (this.placeholderLabel) {
           return item.label;
         }
-
         let result;
-        switch (item.type) {
-          case 'text':
-            result = item.disabled || item.readonly ? '' : '请输入...';
-            break;
-          case 'popText':
-            result = item.disabled || item.readonly ? '' : '请选择...';
-            break;
-          default:
-            result = '';
-            break;
+        if (item.placeholder == null) {
+          switch (item.type) {
+            case 'text':
+              result = item.disabled || item.readonly ? '' : '请输入...';
+              break;
+            case 'popText':
+              result = item.disabled || item.readonly ? '' : '请选择...';
+              break;
+            default:
+              result = '';
+              break;
+          }
+        } else {
+          result = item.placeholder;
         }
         return result;
       },
-      checkAll (data, name) {
+      checkAll(data, name) {
         let checkArr = [];
         for (let i = 0; i < data.length; i++) {
           checkArr.push(data[i].value);
@@ -337,7 +342,7 @@
         this.$set(this.fromData, name, checkArr);
         this.$set(this.mData[name], 'checkAll', true);
       },
-      handleCheckAll (item) {
+      handleCheckAll(item) {
         let checkAll = this.mData[item.name].checkAll;
         if (checkAll) {
           this.$set(this.fromData, item.name, []);
@@ -348,7 +353,7 @@
         }
         item.onChange(item, this.mData, this.fromData);
       },
-      checkGroupChange (event, item) {
+      checkGroupChange(event, item) {
         let selected = event.length;
         let orign = this.mData[item.name].data.length;
         if (selected === orign) {
@@ -364,7 +369,7 @@
       /**
        * 重置
        */
-      reset () {
+      reset() {
         this.keys = [];
         // 设置初始默认值
         for (var name in this.mData) {
@@ -392,7 +397,7 @@
        * @param success
        * @param error
        */
-      submit (success, error) {
+      submit(success, error) {
         this.$refs.fromData.validate((valid) => {
           let data = this.fromData;
           if (valid) {
@@ -434,14 +439,14 @@
           }
         })
       },
-      getData () {
+      getData() {
         return this.fromData;
       },
       /**
        * 设置表单数据
        * @param fromData
        */
-      setFormData (fromData) {
+      setFormData(fromData) {
         this.reset();
         // 设置表单传进来的值
         for (let name in fromData) {
@@ -466,7 +471,7 @@
       }
     },
     watch: {
-      data (newVal, oldVal) {
+      data(newVal, oldVal) {
         this.initForm(newVal);
       }
     },
diff --git a/src/components/form/ImgUpload.vue b/src/components/form/ImgUpload.vue
index 38e19a8..15e4981 100644
--- a/src/components/form/ImgUpload.vue
+++ b/src/components/form/ImgUpload.vue
@@ -85,6 +85,7 @@
       multiple
       with-credentials
       type="drag"
+      :headers="postHeaders"
       :action="uploadUrl"
       style="display: inline-block;width:48px;">
       <div style="width: 48px;height:48px;line-height: 58px;">
@@ -119,7 +120,8 @@
         imagesValue: [],
         photoViewerImg: null,
         photoViewerVisible: false,
-        curIndex: 0
+        curIndex: 0,
+        postHeaders: {}
       }
     },
     methods: {
@@ -160,6 +162,7 @@
         });
       },
       handleBeforeUpload() {
+        this.postHeaders.Authorization = OperatorUtils.getToken();
         const check = this.uploadList.length < this.max;
         if (!check) {
           this.$Message.warning('最多只能上传 ' + this.max + ' 张图片。');
diff --git a/src/pages/example/FormDynamicPage.vue b/src/pages/example/FormDynamicPage.vue
index 83c0e33..c6bd251 100644
--- a/src/pages/example/FormDynamicPage.vue
+++ b/src/pages/example/FormDynamicPage.vue
@@ -6,8 +6,6 @@
         </FormDynamic>
       </i-col>
     </row>
-
-
     <PopupEdit ref="popupEdit"
                :width="1000"
                :dynamic="dynamic1"
@@ -17,156 +15,232 @@
     <PopupSelect ref="popSelect" :content="userPage"></PopupSelect>
   </div>
 </template>
-
 <script>
   import {FormDynamic, PopupEdit, PopupSelect} from 'components/';
 
   let self = null;
-
   const dynamic1 = [
-    [
-      {type: 'title', span: 24, text: 'title'}
-    ],
-    [
-      {
-        name: 'numberData',
-        type: 'number',
-        span: 8,
-        label: 'number'
-      },
-      {
-        name: 'textData',
-        type: 'text',
-        span: 8,
-        label: 'text',
-        value: 'DefaultValue',
-        rules: {required: true, type: 'string'}
-      }
-    ], [
-      {type: 'title', span: 24, text: 'date'}
-    ], [
-      {name: 'date1', type: 'date', span: 6, label: 'DateLabel'},
-      {name: 'date2', type: 'datetime', span: 6, label: 'DateTimeLabel'},
-      {name: 'date3', type: 'datetimerange', span: 6, label: 'DatetimerangeLabel'}
-    ], [
-      {type: 'title', span: 24, text: 'Title'}
-    ], [
-      {name: 'imgData', max: 10, type: 'imgUpload', span: 24, label: '设备图片'},
-      {
-        name: 'selectData',
-        type: 'select',
-        span: 8,
-        value: 0,
-        label: 'SelectLabel',
-        data: [
-          {label: '选项1', value: 0}, {label: '选项2', value: 1},
-          {label: '选项3', value: 2}, {label: '选项4', value: 3},
-        ],
-        onChange: (val, from, data) => {
-          alert('onChange');
-        }
-      },
-      {
-        name: 'radioData',
-        type: 'radio',
-        span: 8,
-        value: 0,
-        label: 'RadioLabel',
-        data: [
-          {label: '选项1', value: 0}, {label: '选项2', value: 1},
-          {label: '选项3', value: 2}, {label: '选项4', value: 3},
-        ],
-        onChange: (val, from, data) => {
-          alert('onChange');
-        }
-      },
-      {
-        name: 'checkboxData',
-        type: 'checkbox',
-        span: 8,
-        label: 'CheckboxLabel',
-        data: [
-          {label: '选项1', value: 0}, {label: '选项2', value: 1},
-          {label: '选项3', value: 2}, {label: '选项4', value: 3}
-        ],
-        enableCheckAll: true,
-        checkAllLabel: '全选',
-        checkAll: true,
-        onChange: (val, from, data) => {
-          alert('onChange');
+      [
+        {type: 'title', span: 24, text: 'Input'}
+      ],
+      [
+        {
+          name: 'numberData',
+          type: 'number',
+          span: 6,
+          label: 'Number',
+          min: 1,
+          max: 88888
+        },
+        {
+          name: 'textData',
+          type: 'text',
+          span: 6,
+          label: 'text',
+          value: 'DefaultValue',
+          rules: {required: true, type: 'string'}
+        },
+        {
+          name: 'passwordData',
+          type: 'text',
+          span: 6,
+          password: true,
+          label: 'PasswordText',
+          rules: {required: true, type: 'string', message: '密码不能为空'}
+        },
+        {
+          name: 'textarea',
+          type: 'text',
+          placeholder: '多行文本输入框',
+          span: 6,
+          label: 'TextareaLabel',
+          textarea: {minRows: 1, maxRows: 6}
         }
-      },
-      {
-        name: 'deviceTypeId',
-        type: 'treeSelect',
-        span: 8,
-        label: 'TreeSelectLabel',
-        // 如果是CrudView 支持从左边树绑定数据，select组件同样支持
-        dataFromTree: true,
-        textField: 'name',
-        valField: 'id',
-        onChange: (val, from, data) => {
-          alert('onChange');
+      ], [
+        {type: 'title', span: 24, text: 'date'}
+      ], [
+        {name: 'date1', type: 'date', span: 6, label: 'DateLabel'},
+        {name: 'date2', type: 'datetime', span: 6, label: 'DateTimeLabel'},
+        {name: 'date3', type: 'datetimerange', span: 6, label: 'Datetimerange'}
+      ],
+      [
+        {type: 'title', span: 24, text: 'DataSelect'}
+      ],
+      [
+        {
+          name: 'selectData',
+          type: 'select',
+          span: 8,
+          value: 0,
+          label: 'SelectLabel',
+          data: [
+            {label: '选项1', value: 0}, {label: '选项2', value: 1},
+            {label: '选项3', value: 2}, {label: '选项4', value: 3}
+          ],
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'selectData2',
+          type: 'select',
+          span: 6,
+          value: 0,
+          label: 'URLSelectLabel',
+          // value 字段名
+          valField: 'id',
+          // label 字段名
+          textField: 'name',
+          // 通过设置数据url地址进行获取
+          dataUrl: '/sys/dict/get?type=job',
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'selectData3',
+          type: 'select',
+          span: 6,
+          value: 0,
+          label: 'DictSelectLabel',
+          // 直接取字典数据
+          dict: 'job',
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
         }
-      },
-      {
-        name: 'popSelectId',
-        span: 8,
-        label: 'PopupSelectLabel',
-        type: 'popText',
-        textField: 'popSelectName',
-        onClick (fromData) {
-          self.$refs['popSelect'].open((selection) => {
-            console.log(selection[0].id);
-            self.$set(fromData, 'popSelectId', selection[0].id);
-            self.$set(fromData, 'popSelectName', selection[0].username);
-          })
+      ], [
+        {type: 'title', span: 24, text: 'Title'}
+      ], [
+        {
+          name: 'radioData',
+          type: 'radio',
+          span: 6,
+          value: 0,
+          label: 'RadioLabel',
+          data: [
+            {label: '选项1', value: 0}, {label: '选项2', value: 1},
+            {label: '选项3', value: 2}, {label: '选项4', value: 3}
+          ],
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'checkboxData',
+          type: 'checkbox',
+          span: 8,
+          label: 'CheckboxLabel',
+          data: [
+            {label: '选项1', value: 0}, {label: '选项2', value: 1},
+            {label: '选项3', value: 2}, {label: '选项4', value: 3}
+          ],
+          enableCheckAll: true,
+          checkAllLabel: '全选',
+          checkAll: true,
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'deviceTypeId',
+          type: 'treeSelect',
+          span: 8,
+          label: 'TreeSelectLabel',
+          // 如果是CrudView 支持从左边树绑定数据，select组件同样支持
+          dataFromTree: true,
+          textField: 'name',
+          valField: 'id',
+          dataUrl: '/sys/res/list',
+          onChange: (val, from, data) => {
+            alert('onChange');
+          }
+        },
+        {
+          name: 'popSelectId',
+          span:
+            8,
+          label:
+            'PopupSelectLabel',
+          type:
+            'popText',
+          textField:
+            'popSelectName',
+          onClick(fromData) {
+            self.$refs['popSelect'].open((selection) => {
+              console.log(selection[0].id);
+              self.$set(fromData, 'popSelectId', selection[0].id);
+              self.$set(fromData, 'popSelectName', selection[0].username);
+            })
+          }
         }
-      }
-    ], [
-      {name: 'textarea', type: 'text', span: 24, label: 'TextareaLabel', textarea: {minRows: 3, maxRows: 8}}
-    ], [
-      {
-        name: 'Button', type: 'buttons', span: 24,
-        data: [
-          {
-            label: 'GetFormData',
-            onClick () {
-              self.$refs.dynamic1.submit((param) => {
-                console.log(param);
-                alert(JSON.stringify(param))
-              }, (res) => {
-                // 表单验证失败
-              });
-            }
-          },
-          {
-            label: 'PopupWindow',
-            onClick () {
-              self.$refs.popupEdit.open({
-                title: 'PopupEditWindow',
-                postUrl: null
-              }, self.fromData);
-            }
-          },
-          {
-            label: 'GotoEditPage',
-            onClick () {
-              self.editOptions.editSuccess = self.editSuccess;
-              let action = {
-                title: 'title',
-                postUrl: ''
+      ],
+      [
+        {
+          name: 'imgData',
+          // 最多只能上传2张
+          max: 2,
+          type: 'imgUpload',
+          span: 24,
+          label: 'ImgUploadLabel'
+        },
+        {name: 'editor', type: 'editor', span: 24, label: 'EditorLabel', placeholder: '富文本编辑器'}
+      ],
+      [
+        {
+          name: 'button', type: 'buttons',
+          span: 24,
+          data: [
+            {
+              label: 'SetData',
+              onClick() {
+                // 给表单设置数据
+                self.$refs.dynamic1.setFormData({numberData: 10001, textData: 'SetData', editor: '<h1>Fffast-FE</h1>'});
+              }
+            },
+            {
+              label: 'GetFormData',
+              onClick() {
+                self.$refs.dynamic1.submit((param) => {
+                  console.log(param);
+                  alert(JSON.stringify(param))
+                }, (res) => {
+                  // 表单验证失败
+                });
+              }
+            },
+            {
+              // 弹出窗口编辑表单
+              label: 'PopupWindow',
+              onClick() {
+                self.$refs.popupEdit.open({
+                  title: 'PopupEditWindow',
+                  // 确认提交url
+                  postUrl: null
+                }, self.fromData);
+              }
+            },
+            {
+              label: 'GotoEditPage',
+              onClick() {
+                self.editOptions.editSuccess = self.editSuccess;
+                let action = {
+                  // 窗口标题
+                  title: 'title',
+                  // 确认提交请求url
+                  postUrl: ''
+                }
+                self.$router.push({
+                  path: self.$router.currentRoute.path + '/edit',
+                  query: {options: self.editOptions, action: action, data: self.fromData}
+                });
               }
-              self.$router.push({
-                path: self.$router.currentRoute.path + '/edit',
-                query: {options: self.editOptions, action: action, data: self.fromData}
-              })
             }
-          }
-        ]
-      }
+          ]
+        }
+      ]
     ]
-  ];
+  ;
 
   /**
    * 弹出式表单参数
@@ -178,7 +252,7 @@
   };
 
   export default {
-    data () {
+    data() {
       return {
         editOptions,
         dynamic1,
@@ -186,16 +260,18 @@
       }
     },
     computed: {
-      userPage () {
+      // 弹出选择页面
+      userPage() {
         return import('pages/sys/user');
       }
     },
     methods: {
-      editSuccess (res) {
+      // 编辑成功
+      editSuccess(res) {
         console.log(res);
       }
     },
-    mounted () {
+    mounted() {
       self = this;
     },
     components: {
@@ -203,7 +279,3 @@
     }
   }
 </script>
-
-<style scoped>
-
-</style>

From eeebaff4474986172d0e2f24aaafa8bea11f3849 Mon Sep 17 00:00:00 2001
From: asd8510678 <252912381@qq.com>
Date: Thu, 7 Jun 2018 17:14:43 +0800
Subject: [PATCH 2/3] update readme

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index bf59ab3..168b373 100644
--- a/README.md
+++ b/README.md
@@ -575,4 +575,4 @@ CrudView -> CrudTable -> DataTable  -> IView Table
                       -> Edit       -> FormDynamic
 ```
 # 后端解决方案
-> （Ffast java）文档整理中...
+>  https://github.com/ZhiYiDai/Ffast-Java （Ffast java）文档整理中...

From 43b56cf7b83b94eb75ef727dcf299838114392d8 Mon Sep 17 00:00:00 2001
From: asd8510678 <252912381@qq.com>
Date: Fri, 8 Jun 2018 16:57:52 +0800
Subject: [PATCH 3/3] fix bug

---
 README.md                          |  5 +++-
 src/components/table/CrudTable.vue | 43 ++++++++++++++++--------------
 src/components/table/DataTable.vue | 39 +++++++++++++--------------
 src/config.js                      |  1 +
 4 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/README.md b/README.md
index 168b373..f4e0f97 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ npm run build
 
 ```
 
-# Ffast-FE 是什么
+# 简介
 ``` bash
 Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方案,已实现基本的系统管理页面,您可以用其中的组件快速开发属于你的页面。
 已实现页面（整体布局界面，用户管理，角色管理，字典管理，权限菜单，接口测试，系统日志）
@@ -239,6 +239,8 @@ Ffast-FE 是一套基于vue iview后台管理系统前端快速开发解决方
 
 > 13.PopupSelect(弹出式选择)
 
+> 14.Switch(开关选择)
+
 ## 代码样例
 ``` bash
 <template>
@@ -562,6 +564,7 @@ rules: {
 
 > PermsValid(权限验证)
 
+
 ...
 
 # 引用关系
diff --git a/src/components/table/CrudTable.vue b/src/components/table/CrudTable.vue
index fb2d408..a3991aa 100644
--- a/src/components/table/CrudTable.vue
+++ b/src/components/table/CrudTable.vue
@@ -115,22 +115,22 @@
       }
     },
     computed: {
-      isSingle () {
+      isSingle() {
         return !(this.tableOptions.selection !== null && this.tableOptions.selection.length === 1);
       },
-      isMultiple () {
+      isMultiple() {
         return !(this.tableOptions.selection != null && this.tableOptions.selection.length > 0);
       },
-      createPerms () {
+      createPerms() {
         return this.tableOptions.permsPrefix == null ? null : this.tableOptions.permsPrefix + ':create';
       },
-      updatePerms () {
+      updatePerms() {
         return this.tableOptions.permsPrefix == null ? null : this.tableOptions.permsPrefix + ':update';
       },
-      deletePerms () {
+      deletePerms() {
         return this.tableOptions.permsPrefix == null ? null : this.tableOptions.permsPrefix + ':delete';
       },
-      isPopupEdit () {
+      isPopupEdit() {
         return this.tableOptions.editOptions && !this.tableOptions.editOptions.editPage;
       }
     },
@@ -141,7 +141,7 @@
         }
         return false;
       },
-      refreshTable (type) {
+      refreshTable(type) {
         this.tableOptions.selection = [];
         this.$refs.table.queryData();
         let tree = this.tableOptions.treeView;
@@ -150,25 +150,28 @@
           tree.$refs['tree'].queryData();
         }
       },
-      opened (from, data) {
+      opened(from, data) {
         if (this.tableOptions.editOptions.opened) {
           this.tableOptions.editOptions.opened(from, data);
         }
       },
-      setFromAfter (from, data) {
+      setFromAfter(from, data) {
         if (this.tableOptions.editOptions.setFromAfter) {
           this.tableOptions.editOptions.setFromAfter(from, data);
         }
       },
-      search () {
+      search() {
         this.$refs.searchFrom.submit((data) => {
           for (let i in data) {
-            let val = data[i] === '' ? null : data[i];
-            this.$set(this.tableOptions.param, i, val);
+            if (data[i] === null || data[i] === '') {
+              this.$delete(this.tableOptions.param, i);
+            } else {
+              this.$set(this.tableOptions.param, i, data[i]);
+            }
           }
         });
       },
-      getSelection () {
+      getSelection() {
         if (this.tableOptions.selection.length <= 0) {
           this.$Message.error('未选择操作项！');
           return null;
@@ -176,20 +179,20 @@
           return this.tableOptions.selection;
         }
       },
-      editSuccess (res) {
+      editSuccess(res) {
         this.refreshTable();
       },
       /**
        * 表格复选框选中事件
        */
-      selectionChange (selection) {
+      selectionChange(selection) {
         this.tableOptions.selection = selection;
         this.$emit('on-selection-change', selection);
       },
       /**
        * 双击表格行
        */
-      rowDblclick (data) {
+      rowDblclick(data) {
         if (this.tableOptions.updateUrl && this.tableOptions.editOptions) {
           this.$refs.popupEdit.open({
             title: '编辑' + this.tableOptions.title,
@@ -200,12 +203,12 @@
       /**
        * 单击表格行
        */
-      rowClick (data) {
+      rowClick(data) {
       },
       /**
        * 添加表格数据
        */
-      showEdit (postUrl, title, data) {
+      showEdit(postUrl, title, data) {
         let action = {
           title: title,
           postUrl: postUrl
@@ -220,7 +223,7 @@
           this.$refs.popupEdit.open(action, data);
         }
       },
-      tableAddData () {
+      tableAddData() {
         let data = {}
         if (this.tableOptions != null) {
           data[this.categoryField] = this.tableOptions.param[this.categoryField];
@@ -266,7 +269,7 @@
       /**
        * 表格字段绑定数据
        */
-      columnRenderData () {
+      columnRenderData() {
         if (this.tableOptions.columns != null) {
           for (let i = 0; i < this.tableOptions.columns.length; i++) {
             let col = this.tableOptions.columns[i];
diff --git a/src/components/table/DataTable.vue b/src/components/table/DataTable.vue
index 199547f..feaf438 100644
--- a/src/components/table/DataTable.vue
+++ b/src/components/table/DataTable.vue
@@ -175,41 +175,41 @@
        */
       queryData () {
         this.selection = null;
-        this.$emit('on-selection-change', null)
-        if (this.dataUrl == null || this.loading == true) {
-          return
+        this.$emit('on-selection-change', null);
+        if (this.dataUrl == null || this.loading === true) {
+          return;
         }
-        this.loading = true
-        let param = Object.assign(this.pageParam, this.param)
+        this.loading = true;
+        let param = Object.assign(JSON.parse(JSON.stringify(this.pageParam)), this.param);
         this.$http.apiPost(this.dataUrl, param).then((res) => {
-          this.loading = false
+          this.loading = false;
           if (!res.success) {
-            this.$http.handleError(res)
+            this.$http.handleError(res);
           } else {
-            this.total = res.data.total
-            this.tableData = res.data.rows
+            this.total = res.data.total;
+            this.tableData = res.data.rows;
           }
-        })
+        });
       },
       changePage (page) {
-        this.pageParam.page = page
-        this.queryData()
+        this.pageParam.page = page;
+        this.queryData();
       },
       changePageSize (pageSize) {
-        this.pageParam.pageSize = pageSize
-        this.queryData()
+        this.pageParam.pageSize = pageSize;
+        this.queryData();
       },
       selectionChange (selection) {
         this.selection = selection;
-        this.$emit('on-selection-change', this.selection)
+        this.$emit('on-selection-change', this.selection);
       },
       rowDblclick (data, index) {
-        this.$emit('on-row-dblclick', data, index)
+        this.$emit('on-row-dblclick', data, index);
       },
       rowClick (data, index) {
-        this.$refs.table.selectAll(false)
-        this.$refs.table.toggleSelect(index)
-        this.$emit('on-row-click', data, index)
+        this.$refs.table.selectAll(false);
+        this.$refs.table.toggleSelect(index);
+        this.$emit('on-row-click', data, index);
       },
       clearCurrentRow () {
         this.$refs['table'].clearCurrentRow();
@@ -250,7 +250,6 @@
                 return null;
               };
             }
-            //
             else {
 
             }
diff --git a/src/config.js b/src/config.js
index 0c119c4..fcc595f 100644
--- a/src/config.js
+++ b/src/config.js
@@ -6,6 +6,7 @@ module.exports = {
   iconFontUrl: '',
   whiteList: ['/login', '/reset'],
   apiPrefix: '/api',
+  // devHost: 'http://127.0.0.1:8080',
   devHost: 'http://39.107.104.190:6060',
   pubHost: 'http://39.107.104.190:6060',
   captchaEnable: true,