sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

demo31

Browse Source 
Former-commit-id: f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly f3591905bf88c7d95047cb6651f9cdc77fc58cbd [formerly 3dd6a8182394b5e228415fdb74cafa540ff637ce [formerly 2357e57aaa8e9446e37a6bddb38974e1925bf55d]]]]]
Former-commit-id: fbac67443f4b103cc40afdac42189d6030c02374
Former-commit-id: 113f699cf579ea681f97a17a90783909e817c754
Former-commit-id: 342be87ea820c21a99677f4bf367cf86208ac805 [formerly 5d23eec7280ba7a52e1b1622cb2b27f95172e8ff]
Former-commit-id: 785cbd080e51be48484fbd7c41e931a796922de8
Former-commit-id: 52b5723a9e77044a86c63b4fe239945b74ce89a0
Former-commit-id: 073b10060b38e82221b4c3ce14e96a50c8155d12
Former-commit-id: 3120c8c429a6986b53bdc34e401965d181cadb41
Former-commit-id: bc38d66f3039940a24fc8958a11050e1058ae37e
This commit is contained in:
孙昊翔
2018-12-25 13:59:37 +08:00
parent 4251845f88
commit 976313bffb
8 changed files with 214 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/menu/modules/demo-d2-crud.js
View File

@@ -41,7 +41,8 @@ export default {
{ path: `${pre}demo23`, title: '表格内编辑' },
{ path: `${pre}demo25`, title: '表格自定义组件' },
{ path: `${pre}demo30`, title: '表单事件监听' },
{ path: `${pre}demo26`, title: '表单自定义组件' }
{ path: `${pre}demo26`, title: '表单自定义组件' },
{ path: `${pre}demo31`, title: 'Crud事件' }
]
}
])('/demo/d2-crud/')

2
src/pages/demo/d2-crud/demo16/doc.md
View File

@@ -1 +1 @@
通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增。代码如下：
通过 `ref` 调用 `D2 Crud` 的 `showDialog` 方法，并传入 `mode: 'add'`属性，可开启新增模式，需要定义 `add-template` 来为新增的表单添加模板，也可以向 `showDialog` 中传入 `template`对象来灵活定义新的模板，向`form-options` 中传入 `labelWidth` 和 `labelPosition` 来控制表单中label的显示, `saveLoading` 则控制保存按钮的loading状态， `row-add` 事件控制数据新增，接收两个参数： `row` 是当前新增行的数据， `done` 用于控制保存成功，可以在 `done()` 之前加入自己的逻辑代码，`done()`可以传入包含表单字段的对象来覆盖提交的数据，`done(false)` 可以取消新增，通过 `ref` 调用 `D2 Crud` 的 `closeDialog` 方法可以关闭模态框。代码如下：

2
src/pages/demo/d2-crud/demo17/doc.md
View File

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

1
src/pages/demo/d2-crud/demo30/index.vue
View File

@@ -26,7 +26,6 @@
<script>
import doc from './doc.md'
import code from './code.js'
import { BusinessTable1List } from '@api/demo.business.table.1'
export default {
data () {

88
src/pages/demo/d2-crud/demo31/code.js Normal file
View File

@@ -0,0 +1,88 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data">
<el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
</d2-crud>
</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
}
]
}
},
methods: {
updateCell () {
this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
},
updateRow () {
this.$refs.d2Crud.updateRow(2, {
date: '2018-01-01',
name: '王小小',
address: '上海市普陀区金沙江路 2333 弄'
})
},
addRow () {
this.$refs.d2Crud.addRow({
date: '2018-01-01',
name: '王小二',
address: '上海市普陀区金沙江路 7777 弄'
})
},
removeRow () {
this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
}
}
}
</script>`

15
src/pages/demo/d2-crud/demo31/doc.md Normal file
View File

@@ -0,0 +1,15 @@
`D2 Crud` 向外部暴露了一些方法，除了之前介绍过的 `showDialog` 和 `closeDialog` 方法，还有以下几个常用方法：
- updateCell
* 更新单元格
* 参数：rowIndex, key, value
- updateRow
* 更新行
* 参数：index, row
- addRow
* 新增一行
* 参数：row
- removeRow
* 删除一行
* 参数：index
代码如下：

105
src/pages/demo/d2-crud/demo31/index.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<d2-container :filename="filename">
<template slot="header">Crud事件</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data">
<el-button slot="header" style="margin-bottom: 5px" @click="updateCell">更新第二行日期</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="updateRow">更新第三行所有数据</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="addRow">新增一行</el-button>
<el-button slot="header" style="margin-bottom: 5px" @click="removeRow">删除最后一行</el-button>
</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="文档" 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
}
]
}
},
methods: {
updateCell () {
this.$refs.d2Crud.updateCell(1, 'date', '2018-01-01')
},
updateRow () {
this.$refs.d2Crud.updateRow(2, {
date: '2018-01-01',
name: '王小小',
address: '上海市普陀区金沙江路 2333 弄'
})
},
addRow () {
this.$refs.d2Crud.addRow({
date: '2018-01-01',
name: '王小二',
address: '上海市普陀区金沙江路 7777 弄'
})
},
removeRow () {
this.$refs.d2Crud.removeRow(this.$refs.d2Crud.d2CrudData.length - 1)
}
}
}
</script>

3
src/router/modules/d2-crud.js
View File

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