变更情况对比数据处理

@@ -18,16 +18,21 @@
       <div class="xxTableBox rollTable">
         <!-- 固定前三个 -->
         <table class="xxTable">
-          <tr v-for="(item, colindex) in columns" :key="colindex">
+          <tr v-for="(item, colindex) in columnsall" :key="colindex">
             <td>
               {{ item.label }}
             </td>
-            <td v-for="(row, index) in tableData" :key="index">
+            <td v-for="(row, index) in tableData" :key="index" >
+             <div class="setbut" v-if="item.prop == 'bhqk'">
+                 {{ index?"变化前": "变化后"}}
+              </div>
               <div
-                class="setbut"
                 v-if="item.prop == 'cz' && row.sjlx != '系统数据'"
               ></div>
-              <span> {{ row[item.prop] }}</span>
+               <span v-if="item.prop == 'qszt'" :class="item.bt">
+                {{ getQsztName(row[item.prop]) }}
+              </span>
+              <span v-else :class="item.bt"> {{ row[item.prop] }}</span>
             </td>
           </tr>
         </table>
@@ -51,17 +56,18 @@ export default {
     return {
       radio: 1,
       title: "变化情况对比",
+      qsztList: datas.columns().qsztList,
       //列表数据
       tableData: [],
       //空列值个数
       emptycolNum: 1,
       //列名称对象
       columns: [],
+      columnsall:[],
+       columnsum:[]
     };
   },
   created() {
-    console.log("this.formData", this.formData.bsmQlxx);
-    console.log("this.formData", this.formData.dqqllx);
     switch (this.formData.dqqllx) {
       case "JSYDSYQ":
         this.columns = datas.columns().JSYDSYQ;
@@ -91,6 +97,11 @@ export default {
     this.getdata();
   },
   methods: {
+    getArrDifference: function(arr1, arr2){
+  return arr1.concat(arr2).filter(function(value, i, arr){
+    return arr.indexOf(value) === arr.lastIndexOf(value);
+  })
+},
     /**
      * @description: checkChange
      * @author: renchao
@@ -98,12 +109,31 @@ export default {
     getdata() {
       getDjbQlxxDiff(this.formData.bsmQlxx).then((res) => {
         if (res.code === 200) {
-          console.log("res", res);
-          this.tableData = res.result;
+        this.tableData.push(res.result.currentQlxx)
+        this.tableData.push(res.result.ssQlxx)
           this.tableData.map((item) => {
             item.sjlx = getSjlx(item.sjlx);
           });
-          console.log("this.tableData", this.tableData);
+       for (let key in  this.tableData[0]) {
+         this.columnsum=this.columns.filter((item,index) => {
+             if(this.tableData[1][key]!==this.tableData[0][key]&&this.columns[index].prop==key){
+               this.columns[index].bt="red"
+             }
+           return this.columns[index].bt=="red"
+           })
+       }
+          this.columns.unshift({
+            prop: "bhqk",
+            label: "变化情况"
+          })
+          this.columnsum.unshift({
+            prop: "bhqk",
+            label: "变化情况"
+          })
+         this.columnsall= this.columns
+
+
+
         }
       });
     }
@@ -124,7 +154,13 @@ export default {
     },
 
     checkChange() {
-      console.log("ssss", this.radio);
+      if(this.radio==2){
+        this.columnsall=this.columnsum
+
+      }else{
+         this.columnsall=this.columns
+
+      }
     },
   },
 };
@@ -132,4 +168,14 @@ export default {
 
 <style lang="scss" scoped>
 @import "./qlxxCommon.scss";
+.red{
+    color: #ff0202;
+  }
+.black{
+    color: #000000;
+  }
+  .setbut{
+    font-weight: 600;
+    color: #ff0202;
+  }
 </style>