045c3142fd
Former-commit-id: 1e171a8b29b540b586d28a2e6ff605878c17ef29 [formerly 1e171a8b29b540b586d28a2e6ff605878c17ef29 [formerly 1e171a8b29b540b586d28a2e6ff605878c17ef29 [formerly 1e171a8b29b540b586d28a2e6ff605878c17ef29 [formerly 3663194764875940e0342d24188b03ef360d9ed1 [formerly f672359c16416eea0a517bf8b5597508c8ee82dd]]]]] Former-commit-id: 8ca1db31ab1730fa4ab55777a92fed9021074bae Former-commit-id: e98c933667c600b2090111fcb2dc40265b9465ea Former-commit-id: a6f88887401104a6f9f781622f5384af269e1c88 [formerly 914065cdee57a595ca938f6fc263cc67ce403c30] Former-commit-id: 611088d289ae5649c8ffd5309d59f1de1d8174ca Former-commit-id: 72049e5b5b5207b93c770fad6df9327584cfa0d6 Former-commit-id: ef3d1d5ac840fcf1ea06a117d98c9309e6db36bb Former-commit-id: fa5b7a0121413f864a3a8a510844232e9bc33aeb Former-commit-id: ba5aaa5445fbbb317354de2374bdfdb2778e7109
122 lines
2.9 KiB
Vue
122 lines
2.9 KiB
Vue
<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([
|
||
'd2adminUtilDatabase',
|
||
'd2adminUtilDatabaseClear'
|
||
]),
|
||
/**
|
||
* 加载本地数据
|
||
*/
|
||
load () {
|
||
this.d2adminUtilDatabase(database => {
|
||
this.dataDisplay = JSON.stringify(database.value(), null, 2)
|
||
this.keyNameList = Object.keys(database.value()).map(k => ({
|
||
value: k,
|
||
label: k
|
||
}))
|
||
})
|
||
},
|
||
/**
|
||
* 删除一个字段
|
||
*/
|
||
handleDelete (name) {
|
||
this.d2adminUtilDatabase(database => {
|
||
database
|
||
.unset(name)
|
||
.write()
|
||
})
|
||
this.load()
|
||
this.keyNameToDelete = ''
|
||
},
|
||
/**
|
||
* 清空当前用户的数据
|
||
*/
|
||
handleClear () {
|
||
this.d2adminUtilDatabaseClear()
|
||
this.load()
|
||
},
|
||
/**
|
||
* 添加一个数据
|
||
*/
|
||
handleSet () {
|
||
if (this.keyNameToSet === '') {
|
||
this.$message.error('字段名不能为空')
|
||
return
|
||
}
|
||
this.d2adminUtilDatabase(database => {
|
||
database
|
||
.set(this.keyNameToSet, this.valueToSet)
|
||
.write()
|
||
})
|
||
this.load()
|
||
},
|
||
/**
|
||
* 添加一个随机数据
|
||
*/
|
||
handleSetRandom () {
|
||
this.d2adminUtilDatabase(database => {
|
||
const id = day().valueOf()
|
||
database
|
||
.set(id, Math.round(id * Math.random()))
|
||
.write()
|
||
})
|
||
this.load()
|
||
}
|
||
}
|
||
}
|
||
</script>
|