Merge tag '2.0.0' into develop

no message

Author: sunhaoxiang

README.md

@@ -6,7 +6,7 @@
 
 
 ## 介绍
-[D2-Crud](https://github.com/d2-projects/d2-crud)是一套基于[Vue.js 2.2.0+](https://cn.vuejs.org/)和[Element UI 2.0.0+](http://element-cn.eleme.io/#/zh-CN)的表格组件。`D2-Crud` 将 `Element` 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 `json` 实现，在实现并扩展了 `Elememt` 表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。
+[D2-Crud](https://github.com/d2-projects/d2-crud)是一套基于[Vue.js 2.2.0+](https://cn.vuejs.org/)和[Element UI 2.0.0+](http://element-cn.eleme.io/#/zh-CN)的表格组件。`D2-Crud` 将 `Element` 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 `json` 实现，在实现并扩展了 `Element` 表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。
 
 
 ## 文档和示例

dist/d2-crud.js

@@ -1,7 +1,7 @@
 {
   "name": "@d2-projects/d2-crud",
   "description": "A d2-projects project",
-  "version": "1.3.5",
+  "version": "2.0.3",
   "author": "孙昊翔 <673686754@qq.com>",
   "license": "MIT",
   "private": false,
@@ -25,7 +25,7 @@
     "lodash.foreach": "^4.5.0",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
-    "vue": "^2.5.11"
+    "vue": "^2.5.19"
   },
   "browserslist": [
     "> 1%",
@@ -43,7 +43,7 @@
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
     "vue-loader": "^13.0.5",
-    "vue-template-compiler": "^2.4.4",
+    "vue-template-compiler": "^2.5.19",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.9.1"
   }

dist/d2-crud.js.map

@@ -2,32 +2,25 @@ import _forEach from 'lodash.foreach'
 import _clonedeep from 'lodash.clonedeep'
 
 export default {
-  props: {
-    /**
-     * @description 是否显示新增按钮
-     */
-    addMode: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * @description 新增按钮配置
-     */
-    addButton: {
-      type: Object,
-      default: null
-    }
-  },
   methods: {
     /**
      * @description 新增行数据
      */
-    handleAdd () {
+    handleAdd (templage = null) {
       this.formMode = 'add'
-      this.showDialog = true
-      this.formData = this.formTemplate ? _clonedeep(this.formTemplate) : {}
+      this.$emit('dialog-open', {
+        mode: 'add'
+      })
+      this.isDialogShow = true
+      if (templage) {
+        this.formData = _clonedeep(templage)
+        this.addTemplateStorage = _clonedeep(templage)
+      } else {
+        this.formData = this.addTemplate ? _clonedeep(this.addTemplate) : {}
+        this.addTemplateStorage = this.addTemplate ? _clonedeep(this.addTemplate) : {}
+      }
       _forEach(this.formData, (value, key) => {
-        this.formData[key] = this.formTemplate[key].value
+        this.formData[key] = this.addTemplateStorage[key].value
       })
     }
   }

package.json

@@ -1,11 +1,5 @@
 export default {
   props: {
-    /**
-     * @description 表格标题
-     */
-    title: {
-      default: ''
-    },
     /**
      * @description 表头数据
      */

src/d2-crud.vue

@@ -17,34 +17,17 @@ export default {
       /**
        * @description 表格内部数据
        */
-      d2Data: [],
-      /**
-       * @description 表格当前分页数据
-       */
-      d2PaginationData: [],
-      /**
-       * @description 编辑暂存数据，用于储存不在formTemplate中的数据
-       */
-      editDataStorage: {}
+      d2CrudData: []
     }
   },
   computed: {
-    d2DataLength () {
-      return this.d2Data.length
+    d2CrudDataLength () {
+      return this.d2CrudData.length
     }
   },
   watch: {
     data () {
       this.handleDataChange()
-    },
-    d2Data: {
-      handler (val) {
-        if (this.pagination) {
-          this.d2PaginationData = this.d2Data.slice(this.paginationDataStart, this.paginationDataEnd)
-        }
-        this.$emit('d2-data-change', val)
-      },
-      deep: true
     }
   },
   mounted () {
@@ -60,30 +43,19 @@ export default {
      */
     _set,
     /**
-     * @description 同步外部表格数据到d2Data内部
+     * @description 同步外部表格数据到d2CrudData内部
      */
     handleDataChange () {
-      if (this.d2Data !== this.data) {
-        this.d2Data = _clonedeep(this.data)
-        if (this.pagination) {
-          this.d2PaginationData = this.d2Data.slice(this.paginationDataStart, this.paginationDataEnd)
-        }
+      if (this.d2CrudData !== this.data) {
+        this.d2CrudData = _clonedeep(this.data)
       }
     },
     /**
      * @description 排序时数据变化
      */
     handleSortDataChange () {
       this.$nextTick(() => {
-        if (this.pagination) {
-          let j = 0
-          for (let i = this.paginationDataStart; i < this.paginationDataEnd; i++) {
-            this.d2Data[i] = this.$refs.elTable.store.states.data[j]
-            j += 1
-          }
-        } else {
-          this.d2Data = this.$refs.elTable.store.states.data
-        }
+        this.d2CrudData = this.$refs.elTable.store.states.data
       })
     },
     /**
@@ -98,12 +70,8 @@ export default {
      * @param {Number} index 表格数据索引
      * @param {Object} row 更新的表格行数据
      */
-    updateRow (index, row) {
-      if (this.pagination) {
-        this.$set(this.d2Data, index + this.paginationDataStart, row)
-      } else {
-        this.$set(this.d2Data, index, row)
-      }
+    handleUpdateRow (index, row) {
+      this.$set(this.d2CrudData, index, row)
       if (this.defaultSort) {
         this.handleSortDataChange()
       }
@@ -112,8 +80,8 @@ export default {
      * @description 新增行数据
      * @param {Object} row 新增的表格行数据
      */
-    addRow (row) {
-      this.$set(this.d2Data, this.d2Data.length, row)
+    handleAddRow (row) {
+      this.$set(this.d2CrudData, this.d2CrudData.length, row)
       if (this.defaultSort) {
         this.handleSortDataChange()
       }
@@ -122,12 +90,8 @@ export default {
      * @description 删除行
      * @param {Object} index 被删除行索引
      */
-    removeRow (index) {
-      if (this.pagination) {
-        this.$delete(this.d2Data, index + this.paginationDataStart)
-      } else {
-        this.$delete(this.d2Data, index)
-      }
+    handleRemoveRow (index) {
+      this.$delete(this.d2CrudData, index)
       if (this.defaultSort) {
         this.handleSortDataChange()
       }

src/mixin/add.js

@@ -11,16 +11,44 @@ export default {
       default: null
     },
     /**
-     * @description 表单模板
+     * @description dialog新增标题
      */
-    formTemplate: {
+    addTitle: {
+      type: String,
+      default: '添加'
+    },
+    /**
+     * @description dialog修改标题
+     */
+    editTitle: {
+      type: String,
+      default: '编辑'
+    },
+    /**
+     * @description 新增表单模板
+     */
+    addTemplate: {
+      type: Object,
+      default: null
+    },
+    /**
+     * @description 修改表单模板
+     */
+    editTemplate: {
       type: Object,
       default: null
     },
     /**
-     * @description 表单校验规则
+     * @description 新增表单校验规则
      */
-    formRules: {
+    addRules: {
+      type: Object,
+      default: null
+    },
+    /**
+     * @description 编辑表单校验规则
+     */
+    editRules: {
       type: Object,
       default: null
     }
@@ -30,15 +58,27 @@ export default {
       /**
        * @description dialog显示与隐藏
        */
-      showDialog: false,
+      isDialogShow: false,
       /**
        * @description 表单数据
        */
       formData: {},
       /**
        * @description 表单模式
        */
-      formMode: 'edit'
+      formMode: 'edit',
+      /**
+       * @description 编辑暂存数据，用于储存不在editTemplate中的数据
+       */
+      editDataStorage: {},
+      /**
+       * @description 新增表单模板暂存
+       */
+      addTemplateStorage: {},
+      /**
+       * @description 修改表单模板暂存
+       */
+      editTemplateStorage: {}
     }
   },
   methods: {
@@ -61,7 +101,7 @@ export default {
             row: rowData
           }, (param = null) => {
             if (param === false) {
-              this.closeDialog()
+              this.handleCloseDialog()
               return
             }
             this.handleDialogSaveDone({
@@ -75,7 +115,7 @@ export default {
           })
           this.$emit('row-add', rowData, (param = null) => {
             if (param === false) {
-              this.closeDialog()
+              this.handleCloseDialog()
               return
             }
             this.handleDialogSaveDone({
@@ -97,18 +137,18 @@ export default {
      */
     handleDialogSaveDone (rowData) {
       if (this.formMode === 'edit') {
-        this.updateRow(this.editIndex, rowData)
+        this.handleUpdateRow(this.editIndex, rowData)
         this.editDataStorage = {}
       } else if (this.formMode === 'add') {
-        this.addRow(rowData)
+        this.handleAddRow(rowData)
       }
-      this.closeDialog()
+      this.handleCloseDialog()
     },
     /**
      * @description 关闭模态框
      */
-    closeDialog () {
-      this.showDialog = false
+    handleCloseDialog () {
+      this.isDialogShow = false
     }
   }
 }

src/mixin/base.js

@@ -16,12 +16,22 @@ export default {
      * @param {Number} index 行所在索引
      * @param {Object} row 行数据
      */
-    handleEdit (index, row) {
+    handleEdit (index, row, templage = null) {
       this.formMode = 'edit'
       this.editDataStorage = _clonedeep(row)
-      this.showDialog = true
+      this.isDialogShow = true
+      this.$emit('dialog-open', {
+        mode: 'edit',
+        row
+      })
       this.editIndex = index
-      this.formData = this.formTemplate ? _clonedeep(this.formTemplate) : {}
+      if (templage) {
+        this.formData = _clonedeep(templage)
+        this.editTemplateStorage = _clonedeep(templage)
+      } else {
+        this.formData = this.editTemplate ? _clonedeep(this.editTemplate) : {}
+        this.editTemplateStorage = this.editTemplate ? _clonedeep(this.editTemplate) : {}
+      }
       _forEach(this.formData, (value, key) => {
         this.formData[key] = row.hasOwnProperty(key) ? row[key] : ''
       })