Merge remote-tracking branch 'origin/develop'

Former-commit-id: 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly 6366f34f3e0b6cbfda6c9c4bd9ca019521df5f22 [formerly d938b73b706677182255e14306d6e0299d0e56ca [formerly 6a97857fdd2dfae76e843112ec86a75cfdfb999f]]]]]
Former-commit-id: 9528ffdc2ac0aba1692467f834bf9f377813beeb
Former-commit-id: 82f85a8fa9d66075e15326ce8f756cbea6f697a4
Former-commit-id: ded2896b6d8d1b315d5845233d958972e48b3c17 [formerly 84f082232d0f827f419680e05aabb6435cf84f00]
Former-commit-id: df49c5e8cec64a6b6727d8008e21a8fea7565d3b
Former-commit-id: a0b99abb96b008bf8f1a394f85bc00dd259ea67a
Former-commit-id: 9ea399bc0617305cda230d33526e316035fe5fa7
Former-commit-id: ba9f5cbbc9656e86aea571421c25fba65793eb36
Former-commit-id: a98d5c2b9f34ee6c539c35d226b96d9ca542beb5
This commit is contained in:
liyang
2018-09-07 15:17:08 +08:00
20 changed files with 902 additions and 24 deletions

View File

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

View File

@@ -35,7 +35,9 @@ export default {
{ path: `${pre}demo20`, title: '表单组件渲染' },
{ path: `${pre}demo21`, title: '表单布局' },
{ path: `${pre}demo22`, title: '表单校验' },
{ path: `${pre}demo23`, title: '表格内编辑' }
{ path: `${pre}demo23`, title: '表格内编辑' },
{ path: `${pre}demo25`, title: '表格自定义组件' },
{ path: `${pre}demo26`, title: '表单自定义组件' }
]
}
])('/demo/d2-crud/')

View File

@@ -34,22 +34,30 @@ export default {
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
],
rowHandle: {
@@ -58,7 +66,18 @@ export default {
icon: 'el-icon-edit',
text: '点我进行编辑',
size: 'small',
fixed: 'right'
show (index, row) {
if (row.showEditButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidEdit) {
return true
}
return false
}
}
},
formTemplate: {

View File

@@ -50,22 +50,30 @@ export default {
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
address: '上海市普陀区金沙江路 1518 弄',
forbidEdit: true,
showEditButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
address: '上海市普陀区金沙江路 1517 弄',
forbidEdit: false,
showEditButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
address: '上海市普陀区金沙江路 1519 弄',
forbidEdit: false,
showEditButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
address: '上海市普陀区金沙江路 1516 弄',
forbidEdit: false,
showEditButton: true
}
],
rowHandle: {
@@ -74,7 +82,18 @@ export default {
icon: 'el-icon-edit',
text: '点我进行编辑',
size: 'small',
fixed: 'right'
show (index, row) {
if (row.showEditButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidEdit) {
return true
}
return false
}
}
},
formTemplate: {

View File

@@ -31,22 +31,30 @@ export default {
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
address: '上海市普陀区金沙江路 1518 弄',
forbidRemove: true,
showRemoveButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
address: '上海市普陀区金沙江路 1517 弄',
forbidRemove: false,
showRemoveButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
address: '上海市普陀区金沙江路 1519 弄',
forbidRemove: false,
showRemoveButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
address: '上海市普陀区金沙江路 1516 弄',
forbidRemove: false,
showRemoveButton: true
}
],
rowHandle: {
@@ -54,7 +62,19 @@ export default {
icon: 'el-icon-delete',
size: 'small',
fixed: 'right',
confirm: true
confirm: true,
show (index, row) {
if (row.showRemoveButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidRemove) {
return true
}
return false
}
}
}
}

View File

@@ -47,22 +47,30 @@ export default {
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
address: '上海市普陀区金沙江路 1518 弄',
forbidRemove: true,
showRemoveButton: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
address: '上海市普陀区金沙江路 1517 弄',
forbidRemove: false,
showRemoveButton: true
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
address: '上海市普陀区金沙江路 1519 弄',
forbidRemove: false,
showRemoveButton: false
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
address: '上海市普陀区金沙江路 1516 弄',
forbidRemove: false,
showRemoveButton: true
}
],
rowHandle: {
@@ -70,7 +78,19 @@ export default {
icon: 'el-icon-delete',
size: 'small',
fixed: 'right',
confirm: true
confirm: true,
show (index, row) {
if (row.showRemoveButton) {
return true
}
return false
},
disabled (index, row) {
if (row.forbidRemove) {
return true
}
return false
}
}
}
}

View File

@@ -0,0 +1,29 @@
<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
return this.value ? '是' : '否'
}
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>

View File

@@ -0,0 +1,29 @@
export default `<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
return this.value ? '是' : '否'
}
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>`

View File

@@ -0,0 +1,72 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
@d2-data-change="handleDataChange"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态(点击可修改)',
key: 'check',
component: {
name: 'my-tag'
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
]
}
},
methods: {
handleDataChange (data) {
console.log(data)
}
}
}
</script>`

View File

@@ -0,0 +1,77 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
@d2-data-change="handleDataChange"/>
</div>
</template>
<script>
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态(点击可修改)',
key: 'check',
component: {
name: MyTag
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
]
}
},
methods: {
handleDataChange (data) {
console.log(data)
}
}
}
</script>`

View File

@@ -0,0 +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)的写法,代码如下:

View File

@@ -0,0 +1,104 @@
<template>
<d2-container>
<template slot="header">表格自定义组件</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
@d2-data-change="handleDataChange"/>
<el-card shadow="never" class="d2-mb">
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>全局注册写法</h4>
<d2-highlight :code="codeOverall"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>局部注册写法</h4>
<d2-highlight :code="codePart"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>自定义组件 MyTag 代码</h4>
<d2-highlight :code="codeComponent"/>
</el-card>
<template slot="footer">
<d2-link-btn title="文档" link="https://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import codeOverall from './codeOverall.js'
import codePart from './codePart.js'
import codeComponent from './codeComponent.js'
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
doc,
codeOverall,
codePart,
codeComponent,
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态(点击可修改)',
key: 'check',
component: {
name: MyTag
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
]
}
},
methods: {
handleDataChange (data) {
console.log(data)
}
}
}
</script>

View File

@@ -0,0 +1,29 @@
<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
return this.value ? '是' : '否'
}
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>

View File

@@ -0,0 +1,29 @@
export default `<template>
<div style="cursor: pointer">
<el-tag :type="type" @click.native="handleClick">{{ text }}</el-tag>
</div>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
require: true
}
},
computed: {
type () {
return this.value ? 'success' : 'danger'
},
text () {
return this.value ? '是' : '否'
}
},
methods: {
handleClick () {
this.$emit('input', !this.value)
}
}
}
</script>`

View File

@@ -0,0 +1,130 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:form-template="formTemplate"
@d2-data-change="handleDataChange"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态(点击可修改)',
key: 'check',
component: {
name: 'my-tag'
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我编辑自定义表单组件',
size: 'small'
}
},
formTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
check: {
title: '检查状态(点击进行修改)',
value: false,
component: {
name: 'my-tag'
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDataChange (data) {
console.log(data)
},
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>`

View File

@@ -0,0 +1,135 @@
export default `<template>
<div>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:form-template="formTemplate"
@d2-data-change="handleDataChange"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
</div>
</template>
<script>
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态(点击可修改)',
key: 'check',
component: {
name: MyTag
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我编辑自定义表单组件',
size: 'small'
}
},
formTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
check: {
title: '检查状态(点击进行修改)',
value: false,
component: {
name: MyTag
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDataChange (data) {
console.log(data)
},
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>`

View File

@@ -0,0 +1 @@
`formTemplate` 中需要渲染自定义组件的 `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)的写法,代码如下:

View File

@@ -0,0 +1,162 @@
<template>
<d2-container>
<template slot="header">表单自定义组件</template>
<d2-crud
ref="d2Crud"
:columns="columns"
:data="data"
:rowHandle="rowHandle"
:form-template="formTemplate"
@d2-data-change="handleDataChange"
@row-edit="handleRowEdit"
@dialog-cancel="handleDialogCancel"/>
<el-card shadow="never" class="d2-mb">
<d2-markdown :source="doc"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>全局注册写法</h4>
<d2-highlight :code="codeOverall"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>局部注册写法</h4>
<d2-highlight :code="codePart"/>
</el-card>
<el-card shadow="never" class="d2-mb">
<h4>自定义组件 MyTag 代码</h4>
<d2-highlight :code="codeComponent"/>
</el-card>
<template slot="footer">
<d2-link-btn title="文档" link="https://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
</template>
</d2-container>
</template>
<script>
import doc from './doc.md'
import codeOverall from './codeOverall.js'
import codePart from './codePart.js'
import codeComponent from './codeComponent.js'
import MyTag from './MyTag'
export default {
components: {
MyTag
},
data () {
return {
doc,
codeOverall,
codePart,
codeComponent,
columns: [
{
title: '日期',
key: 'date',
width: '180'
},
{
title: '姓名',
key: 'name',
width: '180'
},
{
title: '地址',
key: 'address'
},
{
title: '检查状态(点击可修改)',
key: 'check',
component: {
name: MyTag
}
}
],
data: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
check: true
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
check: false
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
check: true
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
check: true
}
],
rowHandle: {
columnHeader: '编辑表格',
edit: {
icon: 'el-icon-edit',
text: '点我编辑自定义表单组件',
size: 'small'
}
},
formTemplate: {
date: {
title: '日期',
value: ''
},
name: {
title: '姓名',
value: ''
},
address: {
title: '地址',
value: ''
},
check: {
title: '检查状态(点击进行修改)',
value: false,
component: {
name: MyTag
}
}
},
formOptions: {
labelWidth: '80px',
labelPosition: 'left',
saveLoading: false
}
}
},
methods: {
handleDataChange (data) {
console.log(data)
},
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>

View File

@@ -1 +1 @@
8f7502120cb1936fb8f1ef83f9462574f64d9d4b
e5f86ceea9da8ed5238a065835a8d86dfa3cf688

View File

@@ -1 +1 @@
ee5cecf1e3ba566cb1ff834db9f3c1f9d910fb26
98d7a73c1fb484dbcca94b8f6a41f916b8a30c20