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: dffabbae052e82d011c49a482e2c6579b510131c [formerly dffabbae052e82d011c49a482e2c6579b510131c [formerly dffabbae052e82d011c49a482e2c6579b510131c [formerly dffabbae052e82d011c49a482e2c6579b510131c [formerly 393c14f4ef07c4f7920adb79d9784961826f909d [formerly fa929764dd324849a7d1032aa98cab34600f4d85]]]]]
Former-commit-id: 8f9e71375a306a4f71e9688e302327acfd1ccd6f
Former-commit-id: 5c4bc13c8c115282d98b5de8f56fa46cc523c2d6
Former-commit-id: 5c59b4084b8f86ce00488020787a1d8361c099c1 [formerly 818a62a1c53edf8827226e96a16ef7b38414a5a4]
Former-commit-id: eeb546c951042a284a8553cd4c4fe4f18804ff8b
Former-commit-id: 17fa37ebac025b07a355da563dc490aa39507877
Former-commit-id: d0f5a02d0af43ab33e8b59b22335182ef2527cf0
Former-commit-id: 8115efda42fdb71b1df18e56a7336df8117bd5c7
Former-commit-id: 9be41ad5cd1dbf6f772e64c0381e26b0a8eceb91
This commit is contained in:
孙昊翔
2018-08-28 16:01:48 +08:00
parent 36258586a0
commit 2d264eb09c
9 changed files with 540 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,3 +28,5 @@
| 修改数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo17) |
| 删除数据 | [点我查看](https://fairyever.gitee.io/d2-admin-preview/#/demo/d2-crud/demo18) |
| 自定义操作列 | [点我查看](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) |

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

@@ -30,7 +30,9 @@ export default {
{ path: `${pre}demo16`, title: '新增数据' },
{ path: `${pre}demo17`, title: '修改数据' },
{ path: `${pre}demo18`, title: '删除数据' },
{ path: `${pre}demo19`, title: '自定义操作列' }
{ path: `${pre}demo19`, title: '自定义操作列' },
{ path: `${pre}demo20`, title: '表单组件渲染' },
{ path: `${pre}demo21`, title: '表单布局' }
]
}
])('/demo/d2-crud/')

133
src/pages/demo/d2-crud/demo20/code.js Normal file
View File

@@ -0,0 +1,133 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
title="D2 CRUD"
:rowHandle="rowHandle"
:form-template="formTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单组件渲染',
size: 'small',
fixed: 'right'
}
},
formTemplate: {
date: {
title: '日期',
value: '',
component: {
name: 'el-date-picker',
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
name: 'el-select',
options: [
{
value: '王小虎',
label: '王小虎'
},
{
value: '王中虎',
label: '王中虎'
},
{
value: '王老虎',
label: '王老虎'
}
],
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
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>`

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

@@ -0,0 +1 @@
向 `form-template` 的 `component` 对象传入 `name` 属性来控制渲染的组件，默认为 `el-input` ，支持的组件有 `el-input-number` `el-radio` `el-checkbox` `el-select` `el-cascader` `el-switch` `el-slider` `el-time-select` `el-time-picker` `el-date-picker` `el-rate` `el-color-picker` 以及使用 `render函数` 自己渲染。代码如下：

149
src/pages/demo/d2-crud/demo20/index.vue Normal file
View File

@@ -0,0 +1,149 @@
<template>
<d2-container>
<template slot="header">表单组件渲染</template>
<d2-crud
:columns="columns"
:data="data"
title="D2 CRUD"
:rowHandle="rowHandle"
:form-template="formTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单组件渲染',
size: 'small',
fixed: 'right'
}
},
formTemplate: {
date: {
title: '日期',
value: '',
component: {
name: 'el-date-picker',
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
name: 'el-select',
options: [
{
value: '王小虎',
label: '王小虎'
},
{
value: '王中虎',
label: '王中虎'
},
{
value: '王老虎',
label: '王老虎'
}
],
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
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>

117
src/pages/demo/d2-crud/demo21/code.js Normal file
View File

@@ -0,0 +1,117 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
title="D2 CRUD"
:rowHandle="rowHandle"
:form-template="formTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单布局',
size: 'small',
fixed: 'right'
}
},
formTemplate: {
date: {
title: '日期',
value: '',
component: {
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
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>`

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

@@ -0,0 +1 @@
向 `form-options` 中传入 `gutter` 属性来控制栅格间隔，向 `form-template` 的 `component` 对象传入 `span` 属性来控制栅格占据的列数。代码如下：

133
src/pages/demo/d2-crud/demo21/index.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<d2-container>
<template slot="header">表单布局</template>
<d2-crud
:columns="columns"
:data="data"
title="D2 CRUD"
:rowHandle="rowHandle"
:form-template="formTemplate"
:form-options="formOptions"
@row-edit="handleRowEdit"
@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 弄'
}
],
rowHandle: {
edit: {
icon: 'el-icon-edit',
text: '点我查看表单布局',
size: 'small',
fixed: 'right'
}
},
formTemplate: {
date: {
title: '日期',
value: '',
component: {
span: 12
}
},
name: {
title: '姓名',
value: '',
component: {
span: 12
}
},
address: {
title: '地址',
value: '',
component: {
span: 18
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false,
gutter: 20
}
}
},
methods: {
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>

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

@@ -1 +1 @@
26b368ef188e9a3e98907e503a2e01368c4ad328
34f3401ccfbf14961d3133c729fe297d08339396