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

d2-crud 新增数据

Browse Source 
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
This commit is contained in:
孙昊翔
2018-08-28 14:11:54 +08:00
parent 56917fd730
commit d3b69493c9
6 changed files with 238 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/zh/ecosystem-d2-crud/example.md
View File

@@ -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) |

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

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

103
src/pages/demo/d2-crud/demo16/code.js Normal file
View File

@@ -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>`

1
src/pages/demo/d2-crud/demo16/doc.md Normal file
View File

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

119
src/pages/demo/d2-crud/demo16/index.vue Normal file
View File

@@ -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>

2
src/router/routes.js.REMOVED.git-id
View File

@@ -1 +1 @@
4ff3fa0ccc8c0d917bfa056ce7db7f4d9d4fb8c9
0770629125d5b5442d63722105a27eff9dac7365