From 976313bffb9baca81432c9f97a25636f84aa6fa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E6=98=8A=E7=BF=94?= <673686754@qq.com>
Date: Tue, 25 Dec 2018 13:59:37 +0800
Subject: [PATCH] demo31

Former-commit-id: f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly 3dd6a8182394b5e228415fdb74cafa540ff637ce [formerly 2357e57aaa8e9446e37a6bddb38974e1925bf55d]]]]]
Former-commit-id: fbac67443f4b103cc40afdac42189d6030c02374
Former-commit-id: 113f699cf579ea681f97a17a90783909e817c754
Former-commit-id: 342be87ea820c21a99677f4bf367cf86208ac805 [formerly 5d23eec7280ba7a52e1b1622cb2b27f95172e8ff]
Former-commit-id: 785cbd080e51be48484fbd7c41e931a796922de8
Former-commit-id: 52b5723a9e77044a86c63b4fe239945b74ce89a0
Former-commit-id: 073b10060b38e82221b4c3ce14e96a50c8155d12
Former-commit-id: 3120c8c429a6986b53bdc34e401965d181cadb41
Former-commit-id: bc38d66f3039940a24fc8958a11050e1058ae37e
---
 src/menu/modules/demo-d2-crud.js        |   3 +-
 src/pages/demo/d2-crud/demo16/doc.md    |   2 +-
 src/pages/demo/d2-crud/demo17/doc.md    |   2 +-
 src/pages/demo/d2-crud/demo30/index.vue |   1 -
 src/pages/demo/d2-crud/demo31/code.js   |  88 ++++++++++++++++++++
 src/pages/demo/d2-crud/demo31/doc.md    |  15 ++++
 src/pages/demo/d2-crud/demo31/index.vue | 105 ++++++++++++++++++++++++
 src/router/modules/d2-crud.js           |   3 +-
 8 files changed, 214 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/demo/d2-crud/demo31/code.js
 create mode 100644 src/pages/demo/d2-crud/demo31/doc.md
 create mode 100644 src/pages/demo/d2-crud/demo31/index.vue

diff --git a/src/menu/modules/demo-d2-crud.js b/src/menu/modules/demo-d2-crud.js
index b0d61458..944929f9 100644
--- a/src/menu/modules/demo-d2-crud.js
+++ b/src/menu/modules/demo-d2-crud.js
@@ -41,7 +41,8 @@ export default {
         { path: `${pre}demo23`, title: '表格内编辑' },
         { path: `${pre}demo25`, title: '表格自定义组件' },
         { path: `${pre}demo30`, title: '表单事件监听' },
-        { path: `${pre}demo26`, title: '表单自定义组件' }
+        { path: `${pre}demo26`, title: '表单自定义组件' },
+        { path: `${pre}demo31`, title: 'Crud事件' }
       ]
     }
   ])('/demo/d2-crud/')
diff --git a/src/pages/demo/d2-crud/demo16/doc.md b/src/pages/demo/d2-crud/demo16/doc.md
index d2bc3ee5..af53fbfa 100644
--- a/src/pages/demo/d2-crud/demo16/doc.md
+++ b/src/pages/demo/d2-crud/demo16/doc.md
@@ -1 +1 @@
-通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增。代码如下：
+通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
diff --git a/src/pages/demo/d2-crud/demo17/doc.md b/src/pages/demo/d2-crud/demo17/doc.md
index 5943668f..f67024ef 100644
--- a/src/pages/demo/d2-crud/demo17/doc.md
+++ b/src/pages/demo/d2-crud/demo17/doc.md
@@ -1 +1 @@
-通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `edit-template` 来为编辑添加模板，通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'edit'` 、`rowIndex` 属性和 `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`对象，可使用自定义模板编辑指定行，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消编辑，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：
diff --git a/src/pages/demo/d2-crud/demo30/index.vue b/src/pages/demo/d2-crud/demo30/index.vue
index c69e6eef..37181a1c 100644
--- a/src/pages/demo/d2-crud/demo30/index.vue
+++ b/src/pages/demo/d2-crud/demo30/index.vue
@@ -26,7 +26,6 @@
 <script>
 import doc from './doc.md'
 import code from './code.js'
-import { BusinessTable1List } from '@api/demo.business.table.1'
 
 export default {
   data () {
diff --git a/src/pages/demo/d2-crud/demo31/code.js b/src/pages/demo/d2-crud/demo31/code.js
new file mode 100644
index 00000000..9757f35f
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo31/code.js
@@ -0,0 +1,88 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data">
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
+    </d2-crud>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidEdit: true,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
+        }
+      ]
+    }
+  },
+  methods: {
+    updateCell () {
+      this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
+    },
+    updateRow () {
+      this.$refs.d2Crud.updateRow(2, {
+        date: '2018-01-01',
+        name: '王小小',
+        address: '上海市普陀区金沙江路 2333 弄'
+      })
+    },
+    addRow () {
+      this.$refs.d2Crud.addRow({
+        date: '2018-01-01',
+        name: '王小二',
+        address: '上海市普陀区金沙江路 7777 弄'
+      })
+    },
+    removeRow () {
+      this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
+    }
+  }
+}
+</script>`
diff --git a/src/pages/demo/d2-crud/demo31/doc.md b/src/pages/demo/d2-crud/demo31/doc.md
new file mode 100644
index 00000000..8775547b
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo31/doc.md
@@ -0,0 +1,15 @@
+`D2 Crud` 向外部暴露了一些方法，除了之前介绍过的 `showDialog` 和 `closeDialog` 方法，还有以下几个常用方法：
+- updateCell
+  * 更新单元格
+  * 参数：rowIndex, key, value
+- updateRow
+  * 更新行
+  * 参数：index, row
+- addRow
+  * 新增一行
+  * 参数：row
+- removeRow
+  * 删除一行
+  * 参数：index   
+
+代码如下：
diff --git a/src/pages/demo/d2-crud/demo31/index.vue b/src/pages/demo/d2-crud/demo31/index.vue
new file mode 100644
index 00000000..30e60916
--- /dev/null
+++ b/src/pages/demo/d2-crud/demo31/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">Crud事件</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data">
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
+      <el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
+    </d2-crud>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="https://doc.d2admin.fairyever.com/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+import { BusinessTable1List } from '@api/demo.business.table.1'
+
+export default {
+  data () {
+    return {
+      filename: __filename,
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄',
+          forbidEdit: true,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄',
+          forbidEdit: false,
+          showEditButton: true
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄',
+          forbidEdit: false,
+          showEditButton: false
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄',
+          forbidEdit: false,
+          showEditButton: true
+        }
+      ]
+    }
+  },
+  methods: {
+    updateCell () {
+      this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
+    },
+    updateRow () {
+      this.$refs.d2Crud.updateRow(2, {
+        date: '2018-01-01',
+        name: '王小小',
+        address: '上海市普陀区金沙江路 2333 弄'
+      })
+    },
+    addRow () {
+      this.$refs.d2Crud.addRow({
+        date: '2018-01-01',
+        name: '王小二',
+        address: '上海市普陀区金沙江路 7777 弄'
+      })
+    },
+    removeRow () {
+      this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
+    }
+  }
+}
+</script>
diff --git a/src/router/modules/d2-crud.js b/src/router/modules/d2-crud.js
index b23e9e10..14d67c16 100644
--- a/src/router/modules/d2-crud.js
+++ b/src/router/modules/d2-crud.js
@@ -39,6 +39,7 @@ export default {
     { path: 'demo27', name: `${pre}demo27`, component: () => import('@/pages/demo/d2-crud/demo27'), meta: { ...meta, title: '加载状态' } },
     { path: 'demo28', name: `${pre}demo28`, component: () => import('@/pages/demo/d2-crud/demo28'), meta: { ...meta, title: '自定义加载状态' } },
     { path: 'demo29', name: `${pre}demo29`, component: () => import('@/pages/demo/d2-crud/demo29'), meta: { ...meta, title: '分页' } },
-    { path: 'demo30', name: `${pre}demo30`, component: () => import('@/pages/demo/d2-crud/demo30'), meta: { ...meta, title: '表单事件监听' } }
+    { path: 'demo30', name: `${pre}demo30`, component: () => import('@/pages/demo/d2-crud/demo30'), meta: { ...meta, title: '表单事件监听' } },
+    { path: 'demo31', name: `${pre}demo31`, component: () => import('@/pages/demo/d2-crud/demo31'), meta: { ...meta, title: 'Crud事件' } }
   ])('demo-d2-crud-')
 }