Merge branch 'hotfix/crud_2.0'

package.json

@@ -13,7 +13,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@d2-projects/d2-crud": "^1.3.4",
+    "@d2-projects/d2-crud": "^2.0.3",
     "@d2-projects/vue-filters-date": "^1.0.2",
     "@d2-projects/vue-table-export": "^1.0.1",
     "@d2-projects/vue-table-import": "^1.0.0",

src/menu/modules/demo-d2-crud.js

@@ -40,7 +40,9 @@ export default {
         { path: `${pre}demo22`, title: '表单校验' },
         { path: `${pre}demo23`, title: '表格内编辑' },
         { path: `${pre}demo25`, title: '表格自定义组件' },
-        { path: `${pre}demo26`, title: '表单自定义组件' }
+        { path: `${pre}demo30`, title: '表单事件监听' },
+        { path: `${pre}demo26`, title: '表单自定义组件' },
+        { path: `${pre}demo31`, title: 'CRUD事件' }
       ]
     }
   ])('/demo/d2-crud/')

src/pages/demo/d2-crud/demo1/code.js

@@ -52,7 +52,7 @@ export default {
     }
   },
   mounted () {
-    console.log(this.$refs.d2Crud.d2Data)
+    console.log(this.$refs.d2Crud.d2CrudData)
   }
 }
 </script>`

src/pages/demo/d2-crud/demo1/doc.md

@@ -1 +1 @@
-在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2Data` 拿到变化后的表格数据。代码如下：
+在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，`columns` 中的 `key` 需要与 `data` 中对象的key严格对照，可以在 `columns` 对象中传入 `width` 属性来控制列宽。当表格中的数据通过操作变化时，可以通过 `this.$refs.d2Crud.d2CrudData` 拿到变化后的表格数据。代码如下：

src/pages/demo/d2-crud/demo1/index.vue

@@ -68,7 +68,7 @@ export default {
     }
   },
   mounted () {
-    console.log(this.$refs.d2Crud.d2Data)
+    console.log(this.$refs.d2Crud.d2CrudData)
   }
 }
 </script>

src/pages/demo/d2-crud/demo16/code.js

@@ -1,15 +1,18 @@
 export default `<template>
   <div>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
-      add-mode
-      :add-button="addButton"
+      add-title="我的新增"
       :form-template="formTemplate"
       :form-options="formOptions"
+      @dialog-open="handleDialogOpen"
       @row-add="handleRowAdd"
-      @dialog-cancel="handleDialogCancel"/>
+      @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
+    </d2-crud>
   </div>
 </template>
 
@@ -53,11 +56,7 @@ export default {
             address: '上海市普陀区金沙江路 1516 弄'
           }
       ],
-      addButton: {
-        icon: 'el-icon-plus',
-        size: 'small'
-      },
-      formTemplate: {
+      addTemplate: {
         date: {
           title: '日期',
           value: '2016-05-05'
@@ -79,6 +78,38 @@ export default {
     }
   },
   methods: {
+    handleDialogOpen ({mode}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    // 普通的新增
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
+    // 传入自定义模板的新增
+    addRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add',
+        template: {
+          name: {
+            title: '姓名',
+            value: ''
+          },
+          value1: {
+            title: '新属性1',
+            value: ''
+          },
+          value2: {
+            title: '新属性2',
+            value: ''
+          }
+        }
+      })
+    },
     handleRowAdd (row, done) {
       this.formOptions.saveLoading = true
       setTimeout(() => {
@@ -93,7 +124,7 @@ export default {
           address: '我是通过done事件传入的数据！'
         })
         this.formOptions.saveLoading = false
-      }, 300);
+      }, 300)
     },
     handleDialogCancel (done) {
       this.$message({

src/pages/demo/d2-crud/demo16/doc.md

@@ -1 +1 @@
-通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增。代码如下：
+通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，定义 `add-title` 来修改新增模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：

src/pages/demo/d2-crud/demo16/index.vue

@@ -2,15 +2,17 @@
   <d2-container :filename="filename">
     <template slot="header">新增数据</template>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
-      add-mode
-      :add-button="addButton"
-      :form-template="formTemplate"
+      add-title="我的新增"
+      :add-template="addTemplate"
       :form-options="formOptions"
+      @dialog-open="handleDialogOpen"
       @row-add="handleRowAdd"
       @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRowWithNewTemplate">使用自定义模板新增</el-button>
     </d2-crud>
     <el-card shadow="never" class="d2-mb">
       <d2-markdown :source="doc"/>
@@ -70,11 +72,7 @@ export default {
           address: '上海市普陀区金沙江路 1516 弄'
         }
       ],
-      addButton: {
-        icon: 'el-icon-plus',
-        size: 'small'
-      },
-      formTemplate: {
+      addTemplate: {
         date: {
           title: '日期',
           value: '2016-05-05'
@@ -96,6 +94,36 @@ export default {
     }
   },
   methods: {
+    handleDialogOpen ({mode}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    addRow () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add'
+      })
+    },
+    addRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'add',
+        template: {
+          name: {
+            title: '姓名',
+            value: ''
+          },
+          value1: {
+            title: '新属性1',
+            value: ''
+          },
+          value2: {
+            title: '新属性2',
+            value: ''
+          }
+        }
+      })
+    },
     handleRowAdd (row, done) {
       this.formOptions.saveLoading = true
       setTimeout(() => {

src/pages/demo/d2-crud/demo17/code.js

@@ -1,16 +1,18 @@
 export default `<template>
   <div>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
-      add-mode
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      edit-title="我的修改"
+      :edit-template="editTemplate"
       :form-options="formOptions"
-      @row-add="handleRowAdd"
+      @dialog-open="handleDialogOpen"
       @row-edit="handleRowEdit"
-      @dialog-cancel="handleDialogCancel"/>
+      @dialog-cancel="handleDialogCancel">
+        <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
+      </d2-crud>
   </div>
 </template>
 
@@ -82,7 +84,7 @@ export default {
           }
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -118,17 +120,27 @@ export default {
     }
   },
   methods: {
-    handleRowAdd (row, done) {
-      this.formOptions.saveLoading = true
-      setTimeout(() => {
-        console.log(row)
-        this.$message({
-          message: '保存成功',
-          type: 'success'
-        })
-        done()
-        this.formOptions.saveLoading = false
-      }, 300)
+    handleDialogOpen ({mode, row}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: "edit",
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
     },
     handleRowEdit ({index, row}, done) {
       this.formOptions.saveLoading = true

src/pages/demo/d2-crud/demo17/doc.md

@@ -1 +1 @@
-通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑。代码如下：
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `edit-template` 来为编辑添加模板，通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'edit'` 、`rowIndex` 属性和 `template`对象，可使用自定义模板编辑指定行，定义 `edit-title` 来修改编辑模态框的标题，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：

src/pages/demo/d2-crud/demo17/index.vue

@@ -2,16 +2,17 @@
   <d2-container :filename="filename">
     <template slot="header">修改数据</template>
     <d2-crud
+      ref="d2Crud"
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
-      add-mode
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      edit-title="我的修改"
+      :edit-template="editTemplate"
       :form-options="formOptions"
-      @row-add="handleRowAdd"
+      @dialog-open="handleDialogOpen"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel">
+      <el-button slot="header" style="margin-bottom: 5px" @click="editRowWithNewTemplate">使用自定义模板编辑第三行</el-button>
     </d2-crud>
     <el-card shadow="never" class="d2-mb">
       <d2-markdown :source="doc"/>
@@ -99,7 +100,7 @@ export default {
           }
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: ''
@@ -135,17 +136,27 @@ export default {
     }
   },
   methods: {
-    handleRowAdd (row, done) {
-      this.formOptions.saveLoading = true
-      setTimeout(() => {
-        console.log(row)
-        this.$message({
-          message: '保存成功',
-          type: 'success'
-        })
-        done()
-        this.formOptions.saveLoading = false
-      }, 300)
+    handleDialogOpen ({mode, row}) {
+      this.$message({
+        message: '打开模态框，模式为：' + mode,
+        type: 'success'
+      })
+    },
+    editRowWithNewTemplate () {
+      this.$refs.d2Crud.showDialog({
+        mode: 'edit',
+        rowIndex: 2,
+        template: {
+          date: {
+            title: '日期',
+            value: ''
+          },
+          name: {
+            title: '姓名',
+            value: ''
+          }
+        }
+      })
     },
     handleRowEdit ({ index, row }, done) {
       this.formOptions.saveLoading = true

src/pages/demo/d2-crud/demo18/code.js

@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @row-remove="handleRowRemove"/>
   </div>

src/pages/demo/d2-crud/demo18/index.vue

@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @row-remove="handleRowRemove">
     </d2-crud>

src/pages/demo/d2-crud/demo19/code.js

@@ -3,7 +3,6 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @custom-emit-1="handleCustomEvent"/>
   </div>

src/pages/demo/d2-crud/demo19/index.vue

@@ -4,7 +4,6 @@
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
       @custom-emit-1="handleCustomEvent">
     </d2-crud>

src/pages/demo/d2-crud/demo20/code.js

@@ -3,9 +3,8 @@ export default `<template>
     <d2-crud
       :columns="columns"
       :data="data"
-      title="D2 CRUD"
       :rowHandle="rowHandle"
-      :form-template="formTemplate"
+      :edit-template="editTemplate"
       :form-options="formOptions"
       @row-edit="handleRowEdit"
       @dialog-cancel="handleDialogCancel"/>
@@ -60,7 +59,7 @@ export default {
           fixed: 'right'
         }
       },
-      formTemplate: {
+      editTemplate: {
         date: {
           title: '日期',
           value: '',

src/pages/demo/d2-crud/demo20/doc.md

@@ -1 +1 @@
-向 `form-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：
+向 `add-template` 或 `edit-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` ，也可以使用 `render函数` 自己渲染组件，只需在 `component` 中传入 `renderFuntion` ，接收一个参数 `h`，[render函数使用方法](https://cn.vuejs.org/v2/guide/render-function.html)。代码如下：