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

db update

Browse Source 
Former-commit-id: 227391acd445196d063c7e5424cbf5243ed34fff [formerly 227391acd445196d063c7e5424cbf5243ed34fff [formerly 227391acd445196d063c7e5424cbf5243ed34fff [formerly 227391acd445196d063c7e5424cbf5243ed34fff [formerly 09be4dfe2d27d6b5cae7f5229fd89e107df524d2 [formerly af907a0206a24d385946e44d22e9dc02e65c3d5d]]]]]
Former-commit-id: 8c415cd0ae09c25683be79488e84cf39aa6143a7
Former-commit-id: 7e7392d78cdbd636dc856df3276ee66a2a14b9cb
Former-commit-id: 4417f57b963cce4a8b24e6729c2f914505cfaf16 [formerly 0addaeab1e075b68324da0c7a29fcac878fb938a]
Former-commit-id: 596cd1e5b343e096aa7974e42ff238138b45b65a
Former-commit-id: 87e1da947c638b286f5a7e4d63ec99b063acdbbc
Former-commit-id: f6b6ba6cb2a25ae7fabb657f0903e856058c1647
Former-commit-id: ce0fbdb1493e80b5afd920c95a78f1e919f221e4
Former-commit-id: df86d4b69730e071f71e34511d8fb6cc39664726
This commit is contained in:
liyang
2018-08-10 10:58:08 +08:00
parent 7c97a2ed0d
commit 0453ab7f36
10 changed files with 170 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/demo/playground/db/all/index.vue
View File

@@ -1,29 +0,0 @@
<template>
<d2-container class="page">
<template slot="header">
<el-button type="primary" @click="load">
重新获取本地数据
</el-button>
</template>
<d2-highlight :code="dbData"/>
</d2-container>
</template>
<script>
import db from '@/libs/db.js'
export default {
data () {
return {
dbData: ''
}
},
mounted () {
this.load()
},
methods: {
load () {
this.dbData = JSON.stringify(db.value(), null, 2)
}
}
}
</script>

121
src/pages/demo/playground/db/public/index.vue
View File

@@ -1,121 +0,0 @@
<template>
<d2-container class="page">
<template slot="header">持久化存储公用数据（所有用户共享）</template>
<el-row>
<el-col :span="12">
<p class="d2-mt-0">增加不重复字段</p>
<el-button @click="handleSetRandom">增加</el-button>
<p>增加自定义字段</p>
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
<el-button @click="handleSet">增加</el-button>
<p>删除字段</p>
<el-select
v-model="keyNameToDelete"
placeholder="请选择要删除的 key">
<el-option
v-for="item in keyNameList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<p>清空当前用户数据</p>
<el-button @click="handleClear">清空</el-button>
</el-col>
<el-col :span="12">
<d2-highlight :code="dataDisplay"/>
</el-col>
</el-row>
</d2-container>
</template>
<script>
import day from 'dayjs'
import { mapMutations } from 'vuex'
export default {
data () {
return {
dataDisplay: '',
keyNameToSet: '',
valueToSet: '',
keyNameList: [],
keyNameToDelete: ''
}
},
watch: {
keyNameToDelete (value) {
if (value) {
this.handleDelete(value)
}
}
},
mounted () {
this.load()
},
methods: {
...mapMutations('d2admin', [
'utilDatabase',
'utilDatabaseClear'
]),
/**
* 加载本地数据
*/
load () {
this.utilDatabase(database => {
this.dataDisplay = JSON.stringify(database.value(), null, 2)
this.keyNameList = Object.keys(database.value()).map(k => ({
value: k,
label: k
}))
})
},
/**
* 删除一个字段
*/
handleDelete (name) {
this.utilDatabase(database => {
database
.unset(name)
.write()
})
this.load()
this.keyNameToDelete = ''
},
/**
* 清空当前用户的数据
*/
handleClear () {
this.utilDatabaseClear()
this.load()
},
/**
* 添加一个数据
*/
handleSet () {
if (this.keyNameToSet === '') {
this.$message.error('字段名不能为空')
return
}
this.utilDatabase(database => {
database
.set(this.keyNameToSet, this.valueToSet)
.write()
})
this.load()
},
/**
* 添加一个随机数据
*/
handleSetRandom () {
this.utilDatabase(database => {
const id = day().valueOf()
database
.set(id, Math.round(id * Math.random()))
.write()
})
this.load()
}
}
}
</script>

121
src/pages/demo/playground/db/user/index.vue
View File

@@ -1,121 +0,0 @@
<template>
<d2-container class="page">
<template slot="header">持久化存储用户数据（用户区分存储）</template>
<el-row>
<el-col :span="12">
<p class="d2-mt-0">增加不重复字段</p>
<el-button @click="handleSetRandom">增加</el-button>
<p>增加自定义字段</p>
<el-input v-model="keyNameToSet" placeholder="字段名" class="d2-mr-5" style="width: 100px;"/>
<el-input v-model="valueToSet" placeholder="值" class="d2-mr-5" style="width: 100px;"/>
<el-button @click="handleSet">增加</el-button>
<p>删除字段</p>
<el-select
v-model="keyNameToDelete"
placeholder="请选择要删除的 key">
<el-option
v-for="item in keyNameList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<p>清空当前用户数据</p>
<el-button @click="handleClear">清空</el-button>
</el-col>
<el-col :span="12">
<d2-highlight :code="dataDisplay"/>
</el-col>
</el-row>
</d2-container>
</template>
<script>
import day from 'dayjs'
import { mapMutations } from 'vuex'
export default {
data () {
return {
dataDisplay: '',
keyNameToSet: '',
valueToSet: '',
keyNameList: [],
keyNameToDelete: ''
}
},
watch: {
keyNameToDelete (value) {
if (value) {
this.handleDelete(value)
}
}
},
mounted () {
this.load()
},
methods: {
...mapMutations('d2admin', [
'utilDatabaseUser',
'utilDatabaseUserClear'
]),
/**
* 加载本地数据
*/
load () {
this.utilDatabaseUser(database => {
this.dataDisplay = JSON.stringify(database.value(), null, 2)
this.keyNameList = Object.keys(database.value()).map(k => ({
value: k,
label: k
}))
})
},
/**
* 删除一个字段
*/
handleDelete (name) {
this.utilDatabaseUser(database => {
database
.unset(name)
.write()
})
this.load()
this.keyNameToDelete = ''
},
/**
* 清空当前用户的数据
*/
handleClear () {
this.utilDatabaseUserClear()
this.load()
},
/**
* 添加一个数据
*/
handleSet () {
if (this.keyNameToSet === '') {
this.$message.error('字段名不能为空')
return
}
this.utilDatabaseUser(database => {
database
.set(this.keyNameToSet, this.valueToSet)
.write()
})
this.load()
},
/**
* 添加一个随机数据
*/
handleSetRandom () {
this.utilDatabaseUser(database => {
const id = day().valueOf()
database
.set(id, Math.round(id * Math.random()))
.write()
})
this.load()
}
}
}
</script>

116
src/pages/demo/playground/db/util/index.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<d2-container>
<template slot="header">header</template>
<el-alert
:title="alertTitle"
type="success"
:closable="false"
class="d2-mb"/>
<el-row :gutter="10">
<el-col :span="12">
<el-row :gutter="10">
<el-col :span="12">
<p class="d2-mt-0">dbName</p>
<el-input v-model="dbName" placeholder="dbName" disabled/>
</el-col>
<el-col :span="12">
<p class="d2-mt-0">path</p>
<el-input v-model="path" placeholder="path" disabled/>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<p>key</p>
<el-input v-model="key" placeholder="key"/>
</el-col>
<el-col :span="12">
<p>value</p>
<el-input v-model="value" placeholder="value"/>
</el-col>
</el-row>
<p>存储</p>
<el-button @click="handleSet" class="d2-mb-10">保存 {{key}} = "{{value}}"</el-button>
<br>
<el-button @click="handleSetByUser">保存 {{key}} = "{{value}}" 当前用户</el-button>
<p>取值</p>
<el-button @click="handleGet" class="d2-mb-10">取值 {{key}}</el-button>
<br>
<el-button @click="handleGetByUser">取值 {{key}} 当前用户</el-button>
</el-col>
<el-col :span="12">
<el-card shadow="never">
<template slot="header">db.get('{{dbName}}').value()</template>
<div style="height: 400px; overflow: auto;">
<d2-highlight :code="dbData"/>
</div>
</el-card>
</el-col>
</el-row>
</d2-container>
</template>
<script>
import { mapMutations, mapActions } from 'vuex'
import db from '@/libs/db.js'
export default {
data () {
return {
dbName: 'db',
path: 'sandbox.demo-playground-db-util',
key: 'demo',
value: 'demo text',
dbData: ''
}
},
mounted () {
this.load()
},
computed: {
alertTitle () {
return `数据将会在 "${this.dbName}" 数据库下的 "${this.path}.${this.key}" 路径下更新，请在右侧数据中查看`
}
},
methods: {
...mapMutations('d2admin/db', [
'set',
'setByUser'
]),
...mapActions('d2admin/db', [
'get',
'getByUser'
]),
load () {
this.dbData = JSON.stringify(db.get(this.dbName).value(), null, 2)
},
handleSet () {
this.set({
dbName: this.dbName,
path: `${this.path}.${this.key}`,
value: this.value
})
this.load()
},
handleSetByUser () {
this.setByUser({
dbName: this.dbName,
path: `${this.path}.${this.key}`,
value: this.value
})
this.load()
},
async handleGet () {
const value = await this.get({
dbName: this.dbName,
path: `${this.path}.${this.key}`
})
this.$alert(`value: ${value}`, `${this.dbName}.${this.path}.${this.key}`)
},
async handleGetByUser () {
const value = await this.getByUser({
dbName: this.dbName,
path: `${this.path}.${this.key}`
})
this.$alert(`value: ${value}`, `${this.dbName}.${this.path}.${this.key}`)
}
}
}
</script>