import cache from '@/plugins/cache'
|
import useUserStore from '@/store/modules/user'
|
|
// 弹窗编辑草稿自动保存/恢复：
|
// 打开弹窗时注册唯一业务 key，表单有改动时防抖写入 localStorage，
|
// 关闭/切页/刷新后再次打开同一弹窗时自动恢复未保存的内容；保存成功后草稿清除。
|
export default {
|
data() {
|
return {
|
draftStates: {}
|
}
|
},
|
created() {
|
this.draftBeforeUnload = () => {
|
this.draftFlushAll()
|
}
|
window.addEventListener('beforeunload', this.draftBeforeUnload)
|
},
|
beforeUnmount() {
|
this.draftFlushAll()
|
window.removeEventListener('beforeunload', this.draftBeforeUnload)
|
},
|
methods: {
|
// 打开弹窗、表单填好后调用；有未保存草稿则自动恢复
|
// bizKey：全局唯一业务名；formField：表单字段名(如 'form')；recordId：编辑传记录id、新增传上下文；visibleField：弹窗显隐字段(如 'dialogVisible')
|
draftRestore(bizKey, formField, recordId, visibleField) {
|
const old = this.draftStates[bizKey]
|
if (old) {
|
this.draftTeardown(old)
|
}
|
let uid = ''
|
try {
|
uid = useUserStore().id || ''
|
} catch (e) {
|
}
|
const rid = (recordId === null || recordId === undefined || recordId === '') ? 'new' : recordId
|
const state = {
|
key: `limsDraft_${uid}_${bizKey}_${rid}`,
|
formField,
|
visibleField,
|
active: true,
|
timer: null,
|
baseline: ''
|
}
|
state.unwatchForm = this.$watch(formField, () => this.draftSchedule(state), { deep: true })
|
if (visibleField) {
|
state.unwatchVisible = this.$watch(visibleField, (val) => {
|
if (!val) {
|
this.draftStop(bizKey)
|
}
|
})
|
}
|
state.baseline = this.draftSnapshot(state)
|
this.draftStates[bizKey] = state
|
const raw = cache.local.get(state.key)
|
if (raw) {
|
try {
|
const draft = JSON.parse(raw)
|
const target = this[formField]
|
if (Array.isArray(target) && Array.isArray(draft)) {
|
target.splice(0, target.length, ...draft)
|
} else if (target && typeof target === 'object') {
|
Object.assign(target, draft)
|
} else {
|
this[formField] = draft
|
}
|
this.$message({ type: 'info', message: '已恢复上次未保存的编辑内容' })
|
} catch (e) {
|
cache.local.remove(state.key)
|
}
|
}
|
},
|
draftSnapshot(state) {
|
try {
|
return JSON.stringify(this[state.formField])
|
} catch (e) {
|
return ''
|
}
|
},
|
draftSchedule(state) {
|
if (!state.active) {
|
return
|
}
|
if (state.timer) {
|
clearTimeout(state.timer)
|
}
|
state.timer = setTimeout(() => {
|
state.timer = null
|
this.draftWrite(state, true)
|
}, 300)
|
},
|
draftWrite(state, checkVisible) {
|
if (!state.active) {
|
return
|
}
|
if (checkVisible && state.visibleField && !this[state.visibleField]) {
|
return
|
}
|
const json = this.draftSnapshot(state)
|
if (json === '' || json === state.baseline) {
|
cache.local.remove(state.key)
|
} else {
|
cache.local.set(state.key, json)
|
}
|
},
|
// 用户取消/关闭弹窗时调用(必须在清空表单之前)
|
draftStop(bizKey) {
|
const state = this.draftStates[bizKey]
|
if (!state || !state.active) {
|
return
|
}
|
if (state.timer) {
|
clearTimeout(state.timer)
|
state.timer = null
|
}
|
this.draftWrite(state, false)
|
this.draftTeardown(state)
|
},
|
// 保存成功后调用
|
draftClear(bizKey) {
|
const state = this.draftStates[bizKey]
|
if (!state) {
|
return
|
}
|
if (state.timer) {
|
clearTimeout(state.timer)
|
state.timer = null
|
}
|
cache.local.remove(state.key)
|
this.draftTeardown(state)
|
},
|
draftTeardown(state) {
|
state.active = false
|
if (state.unwatchForm) {
|
state.unwatchForm()
|
state.unwatchForm = null
|
}
|
if (state.unwatchVisible) {
|
state.unwatchVisible()
|
state.unwatchVisible = null
|
}
|
},
|
draftFlushAll() {
|
Object.keys(this.draftStates).forEach((k) => {
|
const state = this.draftStates[k]
|
if (state && state.active) {
|
if (state.timer) {
|
clearTimeout(state.timer)
|
state.timer = null
|
}
|
this.draftWrite(state, true)
|
this.draftTeardown(state)
|
}
|
})
|
}
|
}
|
}
|
