d2-crud 新增数据

Former-commit-id: b2a7ca90c75271d2368a759e265d1807dcfc85b7 [formerly b2a7ca90c75271d2368a759e265d1807dcfc85b7 [formerly b2a7ca90c75271d2368a759e265d1807dcfc85b7 [formerly b2a7ca90c75271d2368a759e265d1807dcfc85b7 [formerly c2eba24eed16298a504833fa000cd2e424ced688 [formerly 14318fbe903cfc32e92981ee5a50b0e24c23db8c]]]]]
Former-commit-id: 5b4c4349cd880205b495ba2a8075b35734f8010e
Former-commit-id: be5b6ad6e0456822b02dae0d45b7d1dac7ea3bff
Former-commit-id: 2df9d50db37b8589da8afb3199c6743d6f05c78c [formerly 74c6bbfea013df936facd2210421975d1c34253e]
Former-commit-id: 7625e4b8de390d6982db80c7e593c10a3ae5fa03
Former-commit-id: fcd38a9efda1d40bf895a3bb19f13d3369955805
Former-commit-id: 40e9a9f6a730af2cbdc30c97db7b7c75518edd47
Former-commit-id: feb0bff56853765a41060fdcc45b2d593e46500a
Former-commit-id: c463b5f0ce4abd07bcc7a75bead49f379509b0af

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

@@ -1,5 +1,7 @@
 # 示例
 
+## 基础功能
+
 | 示例 | 代码与演示 |
 | --- | --- |
 | 基础表格 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo1) |
@@ -17,3 +19,9 @@
 | 表尾合计行 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo13) |
 | 合并行 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo14) |
 | 合并列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo15) |
+
+## 数据操作
+
+| 示例 | 代码与演示 |
+| --- | --- |
+| 新增数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo16) |

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

@@ -23,6 +23,12 @@ export default {
         { path: `${pre}demo14`, title: '合并行' },
         { path: `${pre}demo15`, title: '合并列' }
       ]
+    },
+    {
+      title: '数据操作',
+      children: [
+        { path: `${pre}demo16`, title: '新增数据' }
+      ]
     }
   ])('/demo/d2-crud/')
 }

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

@@ -0,0 +1,103 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      addMode
+      :addButton="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-add="handleRowAdd"
+      @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 弄'
+          }
+      ],
+      addButton: {
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '2016-05-05'
+        },
+        name: {
+          title: '姓名',
+          value: '王小虎'
+        },
+        address: {
+          title: '地址',
+          value: '上海市普陀区金沙江路 1520 弄'
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        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/demo16/doc.md

@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `addMode` 可开启新增模式，需要传入 `form-template` 来为新增的表单添加模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态，`addButton` 可以控制表格顶部新增按钮的样式， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码。代码如下：

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

@@ -0,0 +1,119 @@
+<template>
+  <d2-container>
+    <template slot="header">新增数据</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      addMode
+      :addButton="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      @row-add="handleRowAdd"
+      @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 弄'
+        }
+      ],
+      addButton: {
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: '2016-05-05'
+        },
+        name: {
+          title: '姓名',
+          value: '王小虎'
+        },
+        address: {
+          title: '地址',
+          value: '上海市普陀区金沙江路 1520 弄'
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleRowAdd (row, done) {
+      this.formOptions.saveLoading = true
+      setTimeout(() => {
+        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 @@
-4ff3fa0ccc8c0d917bfa056ce7db7f4d9d4fb8c9
+0770629125d5b5442d63722105a27eff9dac7365