crud示例更新

Former-commit-id: edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly edfd3c726f0db903bfc48436a2fc61d069543ac0 [formerly ea643b9406f1edfb699e8ea4d3cec1d4de963172 [formerly 7313e2789230e920c4842b112bb531e2e08af6e2]]]]]
Former-commit-id: 3379376f08f0541791cf2e8cf68dd852a1485b0b
Former-commit-id: 2d4545644d977c8e518cc18ba4a5dc9ac6a98d81
Former-commit-id: 5db5367172b07787b067ba45ffe4d9e6b2bf9a9e [formerly 6581dbb6e8b1269aecadbc003ab54db112730de5]
Former-commit-id: d5ac5d687634f6095254a15c29d4f213dcd09ed1
Former-commit-id: db16049ca534a57db01116e51c288a66b38872d2
Former-commit-id: 62918ec08f888275e07636eb6479cb358a260e47
Former-commit-id: 268a7c555d680386d179ad88ba76d7ea2499515d
Former-commit-id: 775c28900bae4adebcf8e376b19c9fbf099cc042

package.json

@@ -13,7 +13,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@d2-projects/d2-crud": "^1.2.0",
+    "@d2-projects/d2-crud": "^1.3.4",
     "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
     "better-scroll": "^1.12.1",

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

@@ -87,7 +87,11 @@ export default {
           message: '保存成功',
           type: 'success'
         });
-        done()
+
+        // done可以传入一个对象来修改提交的某个字段
+        done({
+          address: '我是通过done事件传入的数据！'
+        })
         this.formOptions.saveLoading = false
       }, 300);
     },

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

@@ -1 +1 @@
-通过给 `D2 Crud` 传入 `add-mode` 可开启新增模式，需要传入 `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()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据。代码如下：

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

@@ -104,7 +104,9 @@ export default {
           message: '保存成功',
           type: 'success'
         })
-        done()
+        done({
+          address: '我是通过done事件传入的数据！'
+        })
         this.formOptions.saveLoading = false
       }, 300)
     },

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

@@ -139,7 +139,11 @@ export default {
           message: '编辑成功',
           type: 'success'
         })
-        done()
+
+        // done可以传入一个对象来修改提交的某个字段
+        done({
+          address: '我是通过done事件传入的数据！'
+        })
         this.formOptions.saveLoading = false
       }, 300)
     },

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

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

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

@@ -156,7 +156,9 @@ export default {
           message: '编辑成功',
           type: 'success'
         })
-        done()
+        done({
+          address: '我是通过done事件传入的数据！'
+        })
         this.formOptions.saveLoading = false
       }, 300)
     },

src/pages/demo/d2-crud/demo25/MyTag.vue

@@ -10,6 +10,12 @@ export default {
     value: {
       type: Boolean,
       require: true
+    },
+    scope: {
+      default: null
+    },
+    myProps: {
+      default: null
     }
   },
   computed: {
@@ -20,6 +26,10 @@ export default {
       return this.value ? '是' : '否'
     }
   },
+  mounted () {
+    console.log(this.scope)
+    console.log(this.myProps)
+  },
   methods: {
     handleClick () {
       this.$emit('input', !this.value)

src/pages/demo/d2-crud/demo25/codeComponent.js

@@ -10,6 +10,16 @@ export default {
     value: {
       type: Boolean,
       require: true
+    },
+
+    // 本行的所有数据，此字段不需要额外配置
+    scope: {
+      default: null
+    },
+
+    // 通过 component 中 props 字段传过来的数据，此字段需要先在 component 中配置
+    myProps: {
+      default: null
     }
   },
   computed: {
@@ -20,6 +30,10 @@ export default {
       return this.value ? '是' : '否'
     }
   },
+  mounted () {
+    console.log(this.scope)
+    console.log(this.myProps)
+  },
   methods: {
     handleClick () {
       this.$emit('input', !this.value)

src/pages/demo/d2-crud/demo25/codeOverall.js

@@ -31,7 +31,10 @@ export default {
           title: '检查状态（点击可修改）',
           key: 'check',
           component: {
-            name: 'my-tag'
+            name: 'my-tag',
+            props: {
+              myProps: '我是通过props传过来的数据！'
+            }
           }
         }
       ],

src/pages/demo/d2-crud/demo25/codePart.js

@@ -36,7 +36,10 @@ export default {
           title: '检查状态（点击可修改）',
           key: 'check',
           component: {
-            name: MyTag
+            name: MyTag,
+            props: {
+              myProps: '我是通过props传过来的数据！'
+            }
           }
         }
       ],

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

@@ -1 +1 @@
-向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，代码如下：
+向 `columns` 的 `component` 对象的 `name` 传入自定义组件来进行渲染，如果是[全局注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)的自定义组件，只需传入组件名即可；如果是[局部注册](https://cn.vuejs.org/v2/guide/components-registration.html#%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C)的组件，则需要传入`import` 的那个组件对象。自定义组件的写法需要符合[自定义组件使用v-model](https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model)的写法，可以在 `component` 中传入 `props` 字段，传入的字段可以在自定义组件中通过 `props` 接收，自定义组件还可以通过在 `props` 中定义 `scope` 字段来拿到当前行的所有数据，代码如下：

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

@@ -64,7 +64,10 @@ export default {
           title: '检查状态（点击可修改）',
           key: 'check',
           component: {
-            name: MyTag
+            name: MyTag,
+            props: {
+              myProps: '我是通过props传过来的数据！'
+            }
           }
         }
       ],