vue3.0修改表单 生成修改前后详细日志(对比表单对象修改前后的值 并且展示出修改前和修改后的值)
话不多说 先上效果:
1、定义两个对象 用于保存比较判断修改前后FormState值的变化
//用于保存比较判断修改前后FormState值的变化
const oldFormState = ref<any>({})
const newFormState = ref<any>({})
2、点击修改按钮打开页面获取数据时将获取的数据保存起来
// 获取页面数据
async function getData() {
let res: any = await getJurisdiction({ id: props.propsData.id })
if (res.code === 20000) {
let obj = { ...res?.data }
oldFormState.value = { ...obj } //<-----------------这里
formState.value = obj
} else {
message.error(res.msg)
}
}
3、写个对比修改前后两个对象的方法
// 定义一个比较函数
function compareObjects(obj1: any, obj2: any) {
// 定义一个空数组用于存储不同的属性值
var diff: any = []
for (var key in obj1) {
// 如果属性值不同,则将该属性和obj1和obj2的值存入diff对象
if (obj1[key] !== obj2[key]) {
diff.push({ left: obj1[key], right: obj2[key] })
}
}
return diff
}
4、将提交的数据用newFormState暂停起来
newFormState.value = param //将提交的数据用newFormState暂停起来
let arr = compareObjects(oldFormState.value, newFormState.value) // 执行上面对比两个对象的方法
let content = ''
arr.forEach((item: any) => {
item.left = item.left ? item.left : '空'
item.right = item.right ? item.right : '空'
content += `将 ${item.left} 修改为了 ${item.right},`
})
content = content.substring(0, content.length - 1)//去掉最后一个逗号
console.log(content, 'content')
let res: any = await updateJurisdiction(param)
if (res.code === 20002) {
message.success(res.msg)
handleCancel()
} else {
message.error(res.msg)
}