30aeb5b3c0
Former-commit-id: a837bc696f6375f9e16fe4841cb9abb257f31b78 [formerly 7d01c644068c3fdc3b67fd82c04807e6693b1986] [formerly a837bc696f6375f9e16fe4841cb9abb257f31b78 [formerly 7d01c644068c3fdc3b67fd82c04807e6693b1986] [formerly a837bc696f6375f9e16fe4841cb9abb257f31b78 [formerly 7d01c644068c3fdc3b67fd82c04807e6693b1986] [formerly 7d01c644068c3fdc3b67fd82c04807e6693b1986 [formerly e56c8a77e4bd3535427d82a0a18b973c62f7e4b2 [formerly 2df942e137264d8adf7fd1445bf31b111674ec5c]]]]] Former-commit-id: b1516af5b237f99782835b65cd39684763eddee0 Former-commit-id: 4693907e76bde35e318f7c9316ce39baee7e23c0 Former-commit-id: 3d7a9f2a0093ee77d9e591c3ca06fa513fa1c92d [formerly 36c01f7a346633e2bc7d75156882e61e9b6c7697] Former-commit-id: 1724330f1249c50ff5f14f259881f2e0b1ee93c0 Former-commit-id: bae7daa8303dd92ad7569d18ad879ecbca5ac025 Former-commit-id: b80589241689ae786f1054358aa42fe0f407e260 Former-commit-id: 1de740d464fa48e4f9af48c8d52bf6729c1d628b Former-commit-id: 30f34a4df1ff706c890f177370f159698ac912d5
105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
|
<d2-container
|
|
:filename="filename"
|
|
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
|
|
],
|
|
data () {
|
|
return {
|
|
filename: __filename
|
|
}
|
|
},
|
|
// 第一次进入或从其他组件对应路由进入时触发
|
|
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>
|