d2-crud 表单校验

Former-commit-id: fdb0d1333ab90454a80078a692de62d68b528de5 [formerly fdb0d1333ab90454a80078a692de62d68b528de5 [formerly fdb0d1333ab90454a80078a692de62d68b528de5 [formerly fdb0d1333ab90454a80078a692de62d68b528de5 [formerly ad69fa918cb6a7c8be79693dd9d459ff24bd8850 [formerly d44f36c938ac0604b92959028777e5d8edd8b259]]]]]
Former-commit-id: af610347b31ca2bf8277d8fefeb4831899ff8ed3
Former-commit-id: 1e5e4c58322d87756e2fc181607ee89e8a00c323
Former-commit-id: 6fb929e6919d633754f6ed05c1c0dc5fc52b1053 [formerly e009db20b84c2ceb15aad1f1a49e1e034aebcd3f]
Former-commit-id: 9d4cd83c14915b798c77101bfc0e1a75677e054c
Former-commit-id: ae9f646e106466297f17ce2acef5c3b6d40b2a16
Former-commit-id: 483af02ce21d32235ee89fa772aaf8559a13affd
Former-commit-id: 93fff30eff6af98e6cc3f6d2194d187119ba1ef7
Former-commit-id: a557fac7e8617f522e810894526221fce2931c0a

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

@@ -30,3 +30,4 @@
 | 自定义操作列 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo19) |
 | 表单组件渲染 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo20) |
 | 表单布局 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo21) |
+| 表单校验 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo22) |

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

@@ -32,7 +32,8 @@ export default {
         { path: `${pre}demo18`, title: '删除数据' },
         { path: `${pre}demo19`, title: '自定义操作列' },
         { path: `${pre}demo20`, title: '表单组件渲染' },
-        { path: `${pre}demo21`, title: '表单布局' }
+        { path: `${pre}demo21`, title: '表单布局' },
+        { path: `${pre}demo22`, title: '表单校验' }
       ]
     }
   ])('/demo/d2-crud/')

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

@@ -4,7 +4,7 @@ export default `<template>
       :columns="columns"
       :data="data"
       title="D2 CRUD"
-      addMode
+      add-mode
       :addButton="addButton"
       :form-template="formTemplate"
       :form-options="formOptions"

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

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

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

@@ -5,7 +5,7 @@
       :columns="columns"
       :data="data"
       title="D2 CRUD"
-      addMode
+      add-mode
       :addButton="addButton"
       :form-template="formTemplate"
       :form-options="formOptions"

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

@@ -0,0 +1,110 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      title="D2 CRUD"
+      addMode
+      :addButton="addButton"
+      :form-template="formTemplate"
+      :form-options="formOptions"
+      :form-rules="formRules"
+      @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: {
+        text: '点我查看表单校验',
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      },
+      formRules: {
+        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
+        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
+        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
+      }
+    }
+  },
+  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/demo22/doc.md

@@ -0,0 +1 @@
+通过给 `D2 Crud` 传入 `form-rules` 可开启表单校验，校验规则参见：[async-validator](https://github.com/yiminghe/async-validator)。代码如下：

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

@@ -0,0 +1,126 @@
+<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"
+      :form-rules="formRules"
+      @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: {
+        text: '点我查看表单校验',
+        icon: 'el-icon-plus',
+        size: 'small'
+      },
+      formTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      },
+      formRules: {
+        date: [ { required: true, message: '请输入日期', trigger: 'blur' } ],
+        name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
+        address: [ { required: true, message: '请输入地址', trigger: 'blur' } ]
+      }
+    }
+  },
+  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 @@
-34f3401ccfbf14961d3133c729fe297d08339396
+3d1d121640f8087d1c367b04ed44af689d45b9fc