d2-crud 修改数据

Former-commit-id: 33b78eff73ded5f37e63625cba773140bdcb1160 [formerly 33b78eff73ded5f37e63625cba773140bdcb1160 [formerly 33b78eff73ded5f37e63625cba773140bdcb1160 [formerly 33b78eff73ded5f37e63625cba773140bdcb1160 [formerly ec11f841676b26c24a382cde36b13ad26b6079b2 [formerly ac9073f448ef5e8c50351bbe3542aeda745afee4]]]]]
Former-commit-id: 53b90c5f87c7c3260568721a63264a1c09949fd8
Former-commit-id: b8e27380091427969a613d0d211f9834250a9740
Former-commit-id: 4f57987fe76d14a144228bc84f9c2c0a5a964c31 [formerly 419b150851ece64259038ca9873e2e22298ff639]
Former-commit-id: 5880285fcf0a30f101dc2405d61f681e14f0dc9a
Former-commit-id: a6a0503ba6e4d90e40aaf7d53221b9dd0f42d80a
Former-commit-id: ae0cae44274a1cc0d868c1f61b591c1ecb9417de
Former-commit-id: 752bbb601fdac2f47ca300668d4ea0723e92f1b6
Former-commit-id: c670834cd4fa851ae54c6ac9766ab0850787cc4a

docs/zh/ecosystem-d2-crud/example.md

@@ -25,3 +25,4 @@
 | 示例 | 代码与演示 |
 | --- | --- |
 | 新增数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo16) |
+| 修改数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo17) |

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

@@ -27,7 +27,8 @@ export default {
     {
       title: '数据操作',
       children: [
-        { path: `${pre}demo16`, title: '新增数据' }
+        { path: `${pre}demo16`, title: '新增数据' },
+        { path: `${pre}demo17`, title: '修改数据' }
       ]
     }
   ])('/demo/d2-crud/')

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

@@ -0,0 +1,108 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"/>
+  </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 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>`

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

@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `rowHandle` 可开启表格操作列，传入 `columnHeader` 可以自定义操作列的表头，传入 `edit` 对象可以开启编辑模式，需要传入 `form-template` 来为编辑添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-edit` 事件控制数据编辑，参数： `index` 是当前编辑行的索引， `row` 是当前编辑行的数据， `done` 用于控制编辑成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：

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

@@ -0,0 +1,124 @@
+<template>
+  <d2-container>
+    <template slot="header">修改数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      :rowHandle="rowHandle"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel">
+    </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="D2 CRUD" link="https://github.com/d2-projects/d2-crud"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small',
+          fixed: 'right'
+        }
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowEdit ({index, row}, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        console.log(index)
+        console.log(row)
+        this.$message({
+          message: '编辑成功',
+          type: 'success'
+        })
+        done()
+        this.formOptions.saveLoading = false
+      }, 300)
+    },
+    handleDialogCancel (done) {
+      this.$message({
+        message: '取消编辑',
+        type: 'warning'
+      })
+      done()
+    }
+  }
+}
+</script>

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-0770629125d5b5442d63722105a27eff9dac7365
+3bf22d5f8e04524c6e8b3a3e5dc97fb66ea3f51d