vue3.0修改表单 生成修改前后详细日志（对比表单对象修改前后的值 并且展示出修改前和修改后的值）

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)
    }