快照对比用户操作记录功能实现

src/components/DatePicker.vue

 <template>
-  <el-date-picker :id="id" :class="{'highlight': highlight}" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable" :value-format="valueFormat" :format="format"></el-date-picker>
+  <el-date-picker  v-storeModify :id="id" :class="{'highlight': highlight}" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable" :value-format="valueFormat" :format="format"></el-date-picker>
 </template>
 
 <script>
 export default {
+  inject: ["root"],
+  directives:{
+    storeModify:{
+      bind(el,bind,vnode){
+        let target = el.querySelector('.el-input__inner')
+        target.onfocus = (...args)=>{
+           let _this = vnode.context
+          let key = vnode.parent.data.model.expression
+          let keyArray = key.split('.')
+          let curKey =  keyArray.pop()
+          let resultKey = keyArray.join(".")
+          let deepData = _this.getProperty(resultKey,_this.root)
+          if(deepData.modify){
+            if(Array.isArray(deepData.modify)){
+                if(deepData.modify.includes(curKey)){
+                   return 
+                }
+                deepData.modify.push(curKey)
+            }
+          } else {
+            deepData.modify = [curKey]
+          }
+        }
+      }
+    }
+  },
   props: {
     value: {
       default: ''
@@ -53,6 +79,17 @@ export default {
       }
       return this.$attrs
     }
+  },
+  methods:{
+    getProperty(str, value) {
+      let keys = str?.split('.')
+      for (let key of keys) {
+        if (value) {
+          value = value[key]
+        }
+      }
+      return value
+    }
   }
 }
 </script>

src/components/Input.vue

 <template>
-  <el-input :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable">
+  <el-input   v-storeModify :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable">
     <template v-slot:suffix>
       <slot name="suffix"></slot>
     </template>
@@ -8,6 +8,7 @@
 
 <script>
 export default {
+  inject: ["root"],
   props: {
     value: {
       type: [String, Number],
@@ -22,6 +23,30 @@ export default {
       default: undefined
     }
   },
+  directives:{
+    storeModify:{
+      bind(el,bind,vnode){
+        el.onchange = (...args)=>{
+          let _this = vnode.context
+          let key = vnode.parent.data.model.expression
+          let keyArray = key.split('.')
+          let curKey =  keyArray.pop()
+          let resultKey = keyArray.join(".")
+          let deepData = _this.getProperty(resultKey,_this.root)
+          if(deepData.modify){
+            if(Array.isArray(deepData.modify)){
+                if(deepData.modify.includes(curKey)){
+                   return 
+                } 
+                deepData.modify.push(curKey)
+            }
+          } else {
+            deepData.modify = [curKey]
+          }
+        }
+      }
+    }
+  },
   computed: {
     model: {
       get () {
@@ -53,6 +78,17 @@ export default {
       }
       return this.$attrs
     }
+  },
+  methods:{
+    getProperty(str, value) {
+      let keys = str?.split('.')
+      for (let key of keys) {
+        if (value) {
+          value = value[key]
+        }
+      }
+      return value
+    }
   }
 }
 </script>

src/components/Select.vue

 <template>
   <el-select
     :id="id"
+    v-storeModify
     v-model="model"
     v-bind="$attrs"
     v-on="$listeners"
@@ -34,6 +35,33 @@
 import { getCodetable } from "~/service/business/codeTable"
 
 export default {
+  inject: ["root"],
+  directives:{
+    storeModify:{
+      bind(el,bind,vnode){
+        let target = el.querySelector('.el-input')
+        // 绑定不上change事件，只能绑定上click、sroll,用户点击了下拉框就会记录改该操作
+        target.addEventListener("click",()=>{
+          let _this = vnode.context
+          let key = vnode.parent.data.model.expression
+          let keyArray = key.split('.')
+          let curKey =  keyArray.pop()
+          let resultKey = keyArray.join(".")
+          let deepData = _this.getProperty(resultKey,_this.root)
+          if(deepData.modify){
+            if(Array.isArray(deepData.modify)){
+                if(deepData.modify.includes(curKey)){
+                   return 
+                } 
+                deepData.modify.push(curKey)
+            }
+          } else {
+            deepData.modify = [curKey]
+          }
+        })
+      }
+    }
+  },
   props: {
     value: {
       type: [String, Array, Number],
@@ -138,6 +166,15 @@ export default {
           this.dbCodeList=rtnmsg.data
         }
       })
+    },
+    getProperty(str, value) {
+      let keys = str?.split('.')
+      for (let key of keys) {
+        if (value) {
+          value = value[key]
+        }
+      }
+      return value
     }
   },
   mounted(){