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

Merge branch 'feature/issues_demo' into develop

Browse Source 
Former-commit-id: 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 079aee337ef64cadaa2c1eac9630bb9d136392a0 [formerly 3d22155e64acd9ea43777d6556c3acc7051eb3e0 [formerly ae0c18fb69c1ef99e3ad8157cad6eadeb6d88fe3]]]]]
Former-commit-id: ed558424e7e63c592ea687b33944d1030a6e564c
Former-commit-id: 682f832a0969a4c935a27e17f53064b50d638b0a
Former-commit-id: c0f7ccbcf711c79e5a1299b51c29d4cf96106672 [formerly a04bd44de9515eb0b27dffacd043d76a4ab1870b]
Former-commit-id: 8b9b528e5a19b505cddf1e48a79a58f0ec060cf9
Former-commit-id: f7b074a76d8f649ddad4868ba4c476d494fa425a
Former-commit-id: 6ec2423243ea85f89d88d55645df550b400fc36d
Former-commit-id: eec237ac6de9c57f04caae5dc47feec99e6a69fe
Former-commit-id: fcc45edcbeff474c56a4c6f59bc0d1435ad41d6f
This commit is contained in:
liyang
2018-11-29 10:18:26 +08:00
parent ae08232e67 13a13e3335
commit 6b018528d3
16 changed files with 511 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json.REMOVED.git-id
View File

@@ -1 +1 @@
273bfaa679d4398e12f5270f76df4e1953da170b
14be1e768a4e072ad8ea5ff5bfec5535088a3e4b

1
package.json
View File

@@ -35,6 +35,7 @@
"mockjs": "^1.0.1-beta3",
"nprogress": "^0.2.0",
"papaparse": "^4.3.6",
"qs": "^6.6.0",
"quill": "^1.3.4",
"screenfull": "^3.3.2",
"simplemde": "^1.11.2",

100
public/html/demo.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body, html {
width: 100%;
height: 100%;
margin: 0px;
}
body {
display: flex;
align-items: center;
justify-content: center;
perspective: 900px;
background-color: #FFF;
}
.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
}
.cube:after {
content: '';
width: 100%;
height: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
position: absolute;
transform-origin: bottom;
transform-style: preserve-3d;
transform: rotateX(90deg) translateY(50px) translateZ(-50px);
background-color: rgba(0, 0, 0, 0.1);
}
.cube div {
background-color: rgba(64, 158, 255, 0.7);
position: absolute;
width: 100%;
height: 100%;
border: 1px solid rgb(27, 99, 170);
box-shadow: 0 0 60px rgba(64, 158, 255, 0.7);
}
.cube div:nth-child(1) {
transform: translateZ(-50px);
animation: shade 10s -5s linear infinite;
}
.cube div:nth-child(2) {
transform: translateZ(50px) rotateY(180deg);
animation: shade 10s linear infinite;
}
.cube div:nth-child(3) {
transform-origin: right;
transform: translateZ(50px) rotateY(270deg);
animation: shade 10s -2.5s linear infinite;
}
.cube div:nth-child(4) {
transform-origin: left;
transform: translateZ(50px) rotateY(90deg);
animation: shade 10s -7.5s linear infinite;
}
.cube div:nth-child(5) {
transform-origin: bottom;
transform: translateZ(50px) rotateX(90deg);
background-color: rgba(0, 0, 0, 0.7);
}
.cube div:nth-child(6) {
transform-origin: top;
transform: translateZ(50px) rotateX(270deg);
}
@keyframes rotate {
0% {
transform: rotateX(-15deg) rotateY(0deg);
}
100% {
transform: rotateX(-15deg) rotateY(360deg);
}
}
@keyframes shade {
50% {
background-color: rgba(0, 0, 0, 0.7);
}
}
</style>
<title>demo</title>
</head>
<body>
<div class="cube">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

11
src/api/demo/business/issues/142/index.js Normal file
View File

@@ -0,0 +1,11 @@
import request from '@/plugin/axios'
export function get (id) {
return request({
url: '/demo/business/issues/142',
method: 'get',
params: {
id
}
})
}

7
src/menu/modules/demo-business.js
View File

@@ -10,6 +10,13 @@ export default {
children: [
{ path: `${pre}table/1`, title: '表格 1' }
]
},
{
title: 'ISSUES',
icon: 'github',
children: [
{ path: `${pre}issues/142`, title: '#142' }
]
}
])('/demo/business/')
}

3
src/menu/modules/demo-frame.js
View File

@@ -3,6 +3,7 @@ export default {
title: '内嵌网页',
icon: 'globe',
children: (pre => [
{ path: `${pre}d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' }
{ path: `${pre}d2-doc`, title: 'D2Admin 中文文档', iconSvg: 'd2-admin' },
{ path: `${pre}html`, title: '静态 HTML', icon: 'code' }
])('/demo/frame/')
}

26
src/mock/api/demo/business/issues/142/index.js Normal file
View File

@@ -0,0 +1,26 @@
import Mock from 'mockjs'
import qs from 'qs'
const db = [
{ id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' },
{ id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' },
{ id: '3', name: '王小虎3', address: '上海市普陀区金沙江路 1519 弄' },
{ id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' }
]
Mock.mock(RegExp('/api/demo/business/issues/142' + '.*'), 'get', ({ url, type, body }) => {
// 解析
const options = {
params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''),
body: qs.parse(body),
url: qs.parse(url.split('?')[0])
}
// 返回数据
return Mock.mock(
{
code: 0,
msg: '获取数据成功',
data: db.find(e => e.id === options.params.id)
}
)
})

98
src/pages/demo/business/issues/142/edit-cache-db.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<d2-container
type="card"
class="page">
<el-form
ref="form"
:model="form"
label-width="80px"
class="page--form">
<el-form-item label="姓名">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="form.address"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">修改</el-button>
</el-form-item>
</el-form>
</d2-container>
</template>
<script>
import { mapActions } from 'vuex'
import base from './mixins/index'
export default {
mixins: [
base
],
// 第一次进入或从其他组件对应路由进入时触发
beforeRouteEnter (to, from, next) {
const id = to.params.id
if (id) {
next(async vm => {
if (from.name === 'demo-business-issues-142') {
await vm.getFormData(id)
vm.saveDataToDb()
} else {
vm.loadDataFromDb(to)
}
})
}
},
// 在同一组件对应的多个路由间切换时触发
beforeRouteUpdate (to, from, next) {
const id = to.params.id
if (id) {
this.loadDataFromDb(to)
next()
}
},
watch: {
// 表单变化的时候更新持久化
form: {
handler () {
this.saveDataToDb()
},
deep: true
}
},
methods: {
...mapActions('d2admin/db', [
'pageSet',
'pageGet',
'pageClear'
]),
// 将页面数据同步到持久化存储
saveDataToDb () {
this.pageSet({ vm: this, user: true })
},
// 从持久化存储恢复数据到页面
async loadDataFromDb (to) {
const vm = {
$route: {
fullPath: to.fullPath
},
$data: {}
}
const data = await this.pageGet({
vm,
user: true
})
for (const key in data) {
if (data.hasOwnProperty(key)) this[key] = data[key]
}
this.$message.success('loadDataFromDb')
}
}
}
</script>
<style lang="scss">
.page {
.page--form {
max-width: 460px;
}
}
</style>

62
src/pages/demo/business/issues/142/edit.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<d2-container
type="card"
class="page">
<el-form
ref="form"
:model="form"
label-width="80px"
class="page--form">
<el-form-item label="姓名">
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item label="地址">
<el-input type="textarea" v-model="form.address"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSubmit">修改</el-button>
</el-form-item>
</el-form>
</d2-container>
</template>
<script>
import base from './mixins/index'
export default {
mixins: [
base
],
// 第一次进入或从其他组件对应路由进入时触发
beforeRouteEnter (to, from, next) {
const id = to.params.id
if (id) {
next(vm => {
vm.resetFormData()
vm.getFormData(id)
})
}
else {
next(new Error('未指定ID'))
}
},
// 在同一组件对应的多个路由间切换时触发
beforeRouteUpdate (to, from, next) {
const id = to.params.id
if (id) {
this.resetFormData()
this.getFormData(id)
next()
} else {
next(new Error('未指定ID'))
}
}
}
</script>
<style lang="scss">
.page {
.page--form {
max-width: 460px;
}
}
</style>

64
src/pages/demo/business/issues/142/index.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<d2-container type="card">
<d2-crud
v-bind="crud"
@edit="({ index, row }) => goToEditPage('demo-business-issues-142-edit', row.id)"
@edit-cache-db="({ index, row }) => goToEditPage('demo-business-issues-142-edit-cache-db', row.id)"
style="margin: -15px 0;"/>
<template slot="footer">
<d2-link-btn
title="issue #142"
link="https://github.com/d2-projects/d2-admin/issues/142"/>
</template>
</d2-container>
</template>
<script>
export default {
data () {
return {
crud: {
columns: [
{ title: '姓名', key: 'name' },
{ title: '地址', key: 'address' }
],
data: [
{ id: '1', name: '王小虎1', address: '上海市普陀区金沙江路 1518 弄' },
{ id: '2', name: '王小虎2', address: '上海市普陀区金沙江路 1517 弄' },
{ id: '3', name: '王小虎3', address: '上海市普陀区金沙江路 1519 弄' },
{ id: '4', name: '王小虎4', address: '上海市普陀区金沙江路 1516 弄' }
],
options: {
border: true,
size: 'mini'
},
rowHandle: {
align: 'center',
custom: [
{
text: '无缓存编辑',
size: 'mini',
emit: 'edit'
},
{
text: '带缓存编辑 DB',
size: 'mini',
emit: 'edit-cache-db'
}
]
}
}
}
},
methods: {
goToEditPage (name, id) {
this.$router.push({
name,
params: {
id
}
})
}
}
}
</script>

54
src/pages/demo/business/issues/142/mixins/index.js Normal file
View File

@@ -0,0 +1,54 @@
import { get } from '@/api/demo/business/issues/142'
export default {
props: {
id: {
type: String,
required: true
}
},
data () {
return {
form: {
name: '',
address: ''
}
}
},
methods: {
// [业务逻辑] 重置表单
resetFormData () {
this.form = {
name: '',
address: ''
}
},
// [业务逻辑] 根据 id 获取数据
getFormData (id) {
return new Promise((resolve, reject) => {
// 重置表单
this.resetFormData()
// 请求数据
get(id)
.then(res => {
const { name, address } = res
this.form = { name, address }
this.$message.success('getFormData')
resolve()
})
.catch(err => {
console.log('err', err)
reject(err)
})
})
},
// [业务逻辑] 提交
handleSubmit () {
this.$notify({
title: 'Submit',
message: '提交了表单',
type: 'info'
})
}
}
}

13
src/pages/demo/frame/html/index.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<d2-container-frame :filename="filename" :src="`${$baseUrl}html/demo.html`"/>
</template>
<script>
export default {
data () {
return {
filename: __filename
}
}
}
</script>

10
src/pages/demo/playground/store/page/index.vue
View File

@@ -61,28 +61,28 @@ export default {
// 关闭当前
handleCloseCurrent () {
this.close({
tagName: this.$route.name,
tagName: this.$route.fullPath,
vm: this
})
},
// 关闭左侧
handleCloseLeft () {
this.closeLeft({
tagName: this.$route.name,
tagName: this.$route.fullPath,
vm: this
})
},
// 关闭右侧
handleCloseRight () {
this.closeRight({
tagName: this.$route.name,
tagName: this.$route.fullPath,
vm: this
})
},
// 关闭其他
handleCloseOther () {
this.closeOther({
tagName: this.$route.name,
tagName: this.$route.fullPath,
vm: this
})
},
@@ -92,7 +92,7 @@ export default {
},
// 清空当前页缓存并刷新此页面
handleCleanCacheAndRefreshCurrent () {
this.keepAliveRemove(this.$route.name)
this.keepAliveRemove(this.$route.fullPath)
this.$nextTick(this.$router.replace('/refresh'))
},
// 清空所有的缓存并刷新此页面

49
src/router/modules/business.js
View File

@@ -9,7 +9,52 @@ export default {
redirect: { name: 'demo-business-index' },
component: layoutHeaderAside,
children: (pre => [
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/business/index'), meta: { ...meta, title: '示例首页' } },
{ path: 'table/1', name: `${pre}table-1`, component: () => import('@/pages/demo/business/table/1'), meta: { ...meta, title: '表格 1' } }
{
path: 'index',
name: `${pre}index`,
component: () => import('@/pages/demo/business/index'),
meta: {
...meta,
title: '示例首页'
}
},
{
path: 'table/1',
name: `${pre}table-1`,
component: () => import('@/pages/demo/business/table/1'),
meta: {
...meta,
title: '表格 1'
}
},
{
path: 'issues/142',
name: `${pre}issues-142`,
component: () => import('@/pages/demo/business/issues/142'),
meta: {
...meta,
title: 'issue #142'
}
},
{
path: 'issues/142/edit/:id',
name: `${pre}issues-142-edit`,
component: () => import('@/pages/demo/business/issues/142/edit'),
props: true,
meta: {
...meta,
title: '无缓存编辑'
}
},
{
path: 'issues/142/edit-cache-db/:id',
name: `${pre}issues-142-edit-cache-db`,
component: () => import('@/pages/demo/business/issues/142/edit-cache-db'),
props: true,
meta: {
...meta,
title: '带缓存编辑 DB'
}
}
])('demo-business-')
}

1
src/router/modules/frame.js
View File

@@ -9,6 +9,7 @@ export default {
redirect: { name: 'demo-frame-index' },
component: layoutHeaderAside,
children: (pre => [
{ path: 'html', name: `${pre}html`, component: () => import('@/pages/demo/frame/html'), meta: { ...meta, title: '静态 HTML' } },
{ path: 'd2-doc', name: `${pre}d2-doc`, component: () => import('@/pages/demo/frame/d2-doc'), meta: { ...meta, title: 'D2Admin 中文文档' } }
])('demo-frame-')
}

30
src/store/modules/d2admin/modules/db.js
View File

@@ -1,5 +1,6 @@
import db from '@/libs/db.js'
import util from '@/libs/util.js'
import { cloneDeep } from 'lodash'
/**
* @description 检查路径是否存在 不存在的话初始化
@@ -20,6 +21,13 @@ function pathInit ({
const uuid = util.cookies.get('uuid') || 'ghost-uuid'
const currentPath = `${dbName}.${user ? `user.${uuid}` : 'public'}${path ? `.${path}` : ''}`
const value = db.get(currentPath).value()
console.group('pathInit')
console.log('dbName', dbName)
console.log('path', path)
console.log('user', user)
console.log('defaultValue', defaultValue)
console.log('value', value)
console.groupEnd()
if (!(value !== undefined && validator(value))) {
db
.set(currentPath, defaultValue)
@@ -66,12 +74,12 @@ export default {
user = false
}) {
return new Promise(resolve => {
resolve(db.get(pathInit({
resolve(cloneDeep(db.get(pathInit({
dbName,
path,
user,
defaultValue
})).value())
})).value()))
})
},
/**
@@ -118,7 +126,7 @@ export default {
*/
databasePage (context, {
vm,
basis = 'name',
basis = 'fullPath',
user = false
} = {}) {
return new Promise(resolve => {
@@ -139,7 +147,7 @@ export default {
*/
databasePageClear (context, {
vm,
basis = 'name',
basis = 'fullPath',
user = false
} = {}) {
return new Promise(resolve => {
@@ -161,7 +169,7 @@ export default {
*/
pageSet (context, {
vm,
basis = 'name',
basis = 'fullPath',
user = false
}) {
return new Promise(resolve => {
@@ -170,7 +178,7 @@ export default {
path: `$page.${vm.$route[basis]}.$data`,
user,
validator: () => false,
defaultValue: vm.$data
defaultValue: cloneDeep(vm.$data)
})))
})
},
@@ -183,16 +191,16 @@ export default {
*/
pageGet (context, {
vm,
basis = 'name',
basis = 'fullPath',
user = false
}) {
return new Promise(resolve => {
resolve(db.get(pathInit({
resolve(cloneDeep(db.get(pathInit({
dbName: 'database',
path: `$page.${vm.$route[basis]}.$data`,
user,
defaultValue: vm.$data
})).value())
defaultValue: cloneDeep(vm.$data)
})).value()))
})
},
/**
@@ -204,7 +212,7 @@ export default {
*/
pageClear (context, {
vm,
basis = 'name',
basis = 'fullPath',
user = false
}) {
return new Promise(resolve => {