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

Merge branch 'feature/d2_crud_example' into develop

Browse Source 
Former-commit-id: 977e785d408f84fe7b5c940aa12c10c0a669c13e [formerly 977e785d408f84fe7b5c940aa12c10c0a669c13e [formerly 977e785d408f84fe7b5c940aa12c10c0a669c13e [formerly 977e785d408f84fe7b5c940aa12c10c0a669c13e [formerly 7308348c3f5d7fc8e64bdc4d4bca076e129aa46a [formerly b1a8d2d276cb41ff7fc0b7c9561689d80ee36b25]]]]]
Former-commit-id: 8c38123e3ef88f2a46e8cce8bc10b14b4a7f7465
Former-commit-id: 48149c49f02448adee31e176aa90302f2503a07b
Former-commit-id: 1c0173808f005ad151d23efdcc6d09d80df9d270 [formerly 7ced170c5722087a323f660780317f6efc6f1ab1]
Former-commit-id: 912e3c1e4bf31df040c09c609f392d45fba20dac
Former-commit-id: aa5cb5b39542e25c3313b1d8fdd11b706f919814
Former-commit-id: 03ac260e6ce673fe953f9584fbc0e558f487a39e
Former-commit-id: 2f4b4a7cea4f39d83bb12debcd2de488af142642
Former-commit-id: e20912e851011e9262093804d1f50e9d9ff844b4
This commit is contained in:
孙昊翔
2018-09-19 10:59:38 +08:00
parent 12b0120380 4aaab112c6
commit 8e193be379
13 changed files with 522 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

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

@@ -8,6 +8,8 @@ export default {
title: '基础功能',
children: [
{ path: `${pre}demo1`, title: '基础表格' },
{ path: `${pre}demo27`, title: '加载状态' },
{ path: `${pre}demo28`, title: '自定义加载状态' },
{ path: `${pre}demo2`, title: '带斑马纹表格' },
{ path: `${pre}demo3`, title: '带边框表格' },
{ path: `${pre}demo4`, title: '带状态表格' },
@@ -28,6 +30,7 @@ export default {
{
title: '数据操作',
children: [
{ path: `${pre}demo29`, title: '分页' },
{ path: `${pre}demo16`, title: '新增数据' },
{ path: `${pre}demo17`, title: '修改数据' },
{ path: `${pre}demo18`, title: '删除数据' },

54
src/pages/demo/d2-crud/demo27/code.js Normal file
View File

@@ -0,0 +1,54 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:loading="loading"/>
</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 弄'
}
],
loading: true
}
}
}
</script>`

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

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `loading` ，即可控制表格加载状态，`loading` 的可选值为 `true` 和 `false`。代码如下：

76
src/pages/demo/d2-crud/demo27/index.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<d2-container>
<template slot="header">加载状态</template>
<el-button @click="handleLoading">点我切换加载状态</el-button>
<d2-crud
style="margin-top: 10px"
:columns="columns"
:data="data"
:loading="loading"/>
<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://d2-projects.github.io/d2-admin-doc/zh/ecosystem-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 弄'
}
],
loading: true
}
},
methods: {
handleLoading () {
this.loading = !this.loading
}
}
}
</script>

60
src/pages/demo/d2-crud/demo28/code.js Normal file
View File

@@ -0,0 +1,60 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:loading="loading"
:loading-options="loadingOptions"/>
</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 弄'
}
],
loading: true,
loadingOptions: {
text: '拼命加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)'
}
}
}
}
</script>`

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

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `loading-options` ，即可自定义表格加载状态。代码如下：

82
src/pages/demo/d2-crud/demo28/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<d2-container>
<template slot="header">自定义加载状态</template>
<el-button @click="handleLoading">点我切换加载状态</el-button>
<d2-crud
style="margin-top: 10px"
:columns="columns"
:data="data"
:loading="loading"
:loading-options="loadingOptions"/>
<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://d2-projects.github.io/d2-admin-doc/zh/ecosystem-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 弄'
}
],
loading: true,
loadingOptions: {
text: '拼命加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.8)'
}
}
},
methods: {
handleLoading () {
this.loading = !this.loading
}
}
}
</script>

113
src/pages/demo/d2-crud/demo29/code.js Normal file
View File

@@ -0,0 +1,113 @@
export default `<template>
<div>
<d2-crud
:columns="columns"
:data="data"
:pagination="pagination"/>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 5,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 6,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 7,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 8,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 9,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 10,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 11,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 12,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
pagination: {
pageSize: 5,
layout: 'prev, pager, next, total'
}
}
}
}
</script>`

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

@@ -0,0 +1 @@
在 `D2 Crud` 组件中传入 `pagination` 对象，即可开启分页。代码如下：

128
src/pages/demo/d2-crud/demo29/index.vue Normal file
View File

@@ -0,0 +1,128 @@
<template>
<d2-container>
<template slot="header">分页</template>
<d2-crud
:columns="columns"
:data="data"
:pagination="pagination"/>
<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://d2-projects.github.io/d2-admin-doc/zh/ecosystem-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: 'ID',
key: 'id'
},
{
title: '日期',
key: 'date'
},
{
title: '姓名',
key: 'name'
},
{
title: '地址',
key: 'address'
}
],
data: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 5,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 6,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 7,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 8,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},
{
id: 9,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 10,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 11,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 12,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
pagination: {
pageSize: 5,
layout: 'prev, pager, next, total'
}
}
}
}
</script>

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

@@ -1 +1 @@
c62802e4146a602e5c498cdb99205b56768d4047
b2bf5f06d7bc6fbdb1464a1eea0e2eae737ea6af

2
yarn.lock.REMOVED.git-id
View File

@@ -1 +1 @@
98d7a73c1fb484dbcca94b8f6a41f916b8a30c20
9f0de1b1283741f3ab3b7a925f9b96808cfb51e5