2022-08-08 11:01:15 +08:00
|
|
|
|
<template>
|
2022-08-08 16:22:04 +08:00
|
|
|
|
<el-dialog :title="isDetail ? '详情' : !dataForm.id ? '新增' : '修改'" :visible.sync="visible" @close="handleClose"> </el-dialog>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const compareCache = (dataForm, cache) => {
|
|
|
|
|
|
// 一个简单的比对 dataForm 和 cache 的方法，也许需要优化地更精细
|
|
|
|
|
|
// 由于js不保证对象属性的顺序，所以此方法可能在某些情况下失效
|
|
|
|
|
|
// 或者使用 _.isEqual() --- 也不是很完美
|
|
|
|
|
|
return JSON.stringify(dataForm) === JSON.stringify(cache)
|
|
|
|
|
|
}
|
|
|
|
|
|
export default {
|
|
|
|
|
|
name: 'AddOrUpdateDialog',
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
visible: false,
|
|
|
|
|
|
isEdit: false,
|
|
|
|
|
|
isDetail: false,
|
|
|
|
|
|
// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
|
|
|
|
|
|
isUpdated: false
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
updated() {
|
|
|
|
|
|
this.isUpdated = true // 此时如果点击保存就会 emit(refreshDataList)
|
|
|
|
|
|
},
|
|
|
|
|
|
// beforeDestroy() {
|
|
|
|
|
|
// 缓存比较方案：
|
|
|
|
|
|
// 在组件快要销毁时，比较localStorage和dataForm里的值
|
|
|
|
|
|
// 如果有改变则 emit
|
|
|
|
|
|
// 否则直接销毁
|
|
|
|
|
|
// 清除localStorage里的缓存
|
|
|
|
|
|
// if (cached && compareCache(this.dataForm, localStorage...) || !isEdit) {
|
|
|
|
|
|
// // 如果是编辑页面，并且已经更新了内容；或者是新增页面，就emit刷新列表
|
|
|
|
|
|
// clearCache()
|
|
|
|
|
|
// this.$emit('refreshDataList')
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
init() {
|
|
|
|
|
|
this.visible = true
|
|
|
|
|
|
},
|
|
|
|
|
|
handleClose() {
|
|
|
|
|
|
if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
|
|
|
|
|
|
this.visible = false
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
