demo30

Former-commit-id: 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 3e1cd03dce2edaf402125f5868808b634bf888ed [formerly 6a92e3f6c836c8b10e9292af2b47390e04980acc [formerly d447b7be1661f25ef123f8ab4c7a1949d6e261ef]]]]]
Former-commit-id: 98904511cff57d5a500acedb2fd895b2be737aed
Former-commit-id: e515e3c9575ccf7ca44e1bac54737a2387af6a9a
Former-commit-id: de69da72de90c7efa5fbecb8273d3aae18c4b8a2 [formerly 5f003bd34524b05ddf0abe1ce1248fe1ff4fb107]
Former-commit-id: aed393341430eb79f8bb4038363415f144b366fa
Former-commit-id: 39e4d50f93e1d84cd21373d83e47fc34105ef1ee
Former-commit-id: 5796dbbf8c06757d46f1c228c6f2c9f50da4051a
Former-commit-id: 7b060dd4b679605d875f28d6b85f8eeb90bdee8b
Former-commit-id: bc0937e1098f7c2115d582d95aeb59854beba1c9

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

@@ -40,6 +40,7 @@ export default {
         { path: `${pre}demo22`, title: '表单校验' },
         { path: `${pre}demo23`, title: '表格内编辑' },
         { path: `${pre}demo25`, title: '表格自定义组件' },
+        { path: `${pre}demo30`, title: '表单事件监听' },
         { path: `${pre}demo26`, title: '表单自定义组件' }
       ]
     }

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

@@ -0,0 +1,134 @@
+export default `<template>
+  <div>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      :rowHandle="rowHandle"
+      :edit-template="editTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"
+      @form-data-change="handleFormDataChange"/>
+  </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
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small'
+        }
+      },
+      editTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        },
+        forbidEdit: {
+          title: '禁用按钮',
+          value: false,
+          component: {
+            show: false
+          }
+        },
+        showEditButton: {
+          title: '显示按钮',
+          value: true,
+          component: {
+            show: false
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleFormDataChange ({key, value}) {
+      console.log(key)
+      console.log(value)
+    },
+    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/demo30/doc.md

@@ -0,0 +1 @@
+通过 `form-data-change` 事件可以监听表单内的数据变化，监听在crud内部是通过change事件触发的（这意味着input类组件失去焦点才会触发事件，单纯输入不会触发），接收一个对象参数 {key, value}，`key` 为改变的字段，`value` 为改变后的值。代码如下：

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

@@ -0,0 +1,151 @@
+<template>
+  <d2-container :filename="filename">
+    <template slot="header">表单事件监听</template>
+    <d2-crud
+      ref="d2Crud"
+      :columns="columns"
+      :data="data"
+      :rowHandle="rowHandle"
+      :edit-template="editTemplate"
+      :form-options="formOptions"
+      @row-edit="handleRowEdit"
+      @dialog-cancel="handleDialogCancel"
+      @form-data-change="handleFormDataChange"/>
+    <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
+        }
+      ],
+      rowHandle: {
+        columnHeader: '编辑表格',
+        edit: {
+          icon: 'el-icon-edit',
+          text: '点我进行编辑',
+          size: 'small'
+        }
+      },
+      editTemplate: {
+        date: {
+          title: '日期',
+          value: ''
+        },
+        name: {
+          title: '姓名',
+          value: ''
+        },
+        address: {
+          title: '地址',
+          value: ''
+        },
+        forbidEdit: {
+          title: '禁用按钮',
+          value: false,
+          component: {
+            show: false
+          }
+        },
+        showEditButton: {
+          title: '显示按钮',
+          value: true,
+          component: {
+            show: false
+          }
+        }
+      },
+      formOptions: {
+        labelWidth: '80px',
+        labelPosition: 'left',
+        saveLoading: false
+      }
+    }
+  },
+  methods: {
+    handleFormDataChange ({key, value}) {
+      console.log(key)
+      console.log(value)
+    },
+    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/modules/d2-crud.js

@@ -38,6 +38,7 @@ export default {
     { path: 'demo26', name: `${pre}demo26`, component: () => import('@/pages/demo/d2-crud/demo26'), meta: { ...meta, title: '表单自定义组件' } },
     { 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: '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: '表单事件监听' } }
   ])('demo-d2-crud-')
 }