update 新旧拆分单对比-发起对比

src/views/documentTool/documentComparison/DocumentDataComparison.vue

@@ -35,7 +35,9 @@
     </template>
     <div class="can-scroll-content">
       <div class="detail-content">
+        <!--左边的文档-->
         <div class="detail-content-left">
+          <!--左边的目录-->
           <div class="standard-catalogue part-common" :class="{'hide-catalogue': !leftCatalogueShow}">
             <div class="catalogue-show" @click="changeLeftCatalogueShow">
               <a-icon :type="leftCatalogueShow ? 'left' : 'right'" />
@@ -69,7 +71,7 @@
             <div class="detail-content-content-right">
               <div class="detail-content-content-right-data" @click="detailLeft(index,item)"
                    v-for="(item,index) in resultData.textLeft" :key="index"
-                   :class="{'detail-content-content-right-data-blue':item.reviewed === '1'}">
+                   :class="{'detail-content-content-right-data-color': leftHighlightMenuId === item.menuId,'detail-content-content-right-data-blue':item.reviewed === '1'}">
                 <div class="detail-content-content-right-data-text" style="margin-bottom: 10px;color: #040B29">
                   {{ item.itemsNum + ' ' + item.itemsName }}
                 </div>
@@ -112,7 +114,7 @@
             <div class="detail-content-content-right-right">
               <div class="detail-content-content-right-data-right" @click="detailRight(index,item)"
                    v-for="(item,index) in resultData.textRight" :key="index"
-                   :class="{'detail-content-content-right-data-blue-right':item.reviewed === '1'}">
+                   :class="{'detail-content-content-right-data-color-right': item.menuId === rightHighlightMenuId, 'detail-content-content-right-data-blue-right':item.reviewed === '1'}">
                 <div class="detail-content-content-right-data-text" style="margin-bottom: 10px;color: #040B29">
                   {{ item.itemsNum + ' ' + item.itemsName }}
                 </div>
@@ -181,7 +183,9 @@ export default {
       leftCatalogueShow: true, // 左侧的标准目录是否展示
       rightCatalogueShow: true, // 右侧的标准目录是否展示
       leftTreeSelectedKeys: [], // 左侧被选中树节点
-      rightTreeSelectedKeys: [] // 右侧被选中树节点
+      rightTreeSelectedKeys: [], // 右侧被选中树节点
+      leftHighlightMenuId: null, // 左侧高亮数据的menuId
+      rightHighlightMenuId: null // 右侧高亮数据的menuId
     }
   },
   mounted () {
@@ -204,31 +208,30 @@ export default {
       this.loading = true
       docComparsionConsistentAndSave(query).then((res) => {
         if (res.success) {
-          this.$message.success(this.$t('operationSuccessful'))
+          this.$message.success(res.message)
           this.formInline = {}
+          // 保存之后会有一个淡蓝色的边框
+          if (this.leftHighlightMenuId === this.dataLeft.menuId) {
+            this.leftHighlightMenuId = null
+          }
+          if (this.rightHighlightMenuId === this.dataRight.menuId) {
+            this.rightHighlightMenuId = null
+          }
           this.resultData.textRight.forEach(val => {
             if (val.id === this.dataRight.id) {
-              val.reviewed = 1
+              val.reviewed = '1'
             }
           })
           this.resultData.textLeft.forEach(val => {
             if (val.id === this.dataLeft.id) {
-              val.reviewed = 1
+              val.reviewed = '1'
             }
           })
           this.resultData = { ...this.resultData }
-          const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
-          if (detailLeftColor && detailLeftColor.length > 0) {
-            detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
-          }
-          const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
-          if (detailRightColor && detailRightColor.length > 0) {
-            detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
-          }
           this.dataLeft = {}
           this.dataRight = {}
         } else {
-          this.$message.warning(this.$t('operationFailed'))
+          this.$message.warning(res.message)
         }
       }).finally(() => {
         this.loading = false
@@ -251,8 +254,15 @@ export default {
           this.loading = true
           docComparsionConsistentAndSave(query).then((res) => {
             if (res.success) {
-              this.$message.success(this.$t('operationSuccessful'))
+              this.$message.success(res.message)
               this.formInline = {}
+              // 保存之后会有一个淡蓝色的边框
+              if (this.leftHighlightMenuId === this.dataLeft.menuId) {
+                this.leftHighlightMenuId = null
+              }
+              if (this.rightHighlightMenuId === this.dataRight.menuId) {
+                this.rightHighlightMenuId = null
+              }
               this.resultData.textRight.forEach(val => {
                 if (val.id === this.dataRight.id) {
                   val.reviewed = 1
@@ -264,21 +274,13 @@ export default {
                 }
               })
               this.resultData = { ...this.resultData }
-              const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
-              if (detailLeftColor && detailLeftColor.length > 0) {
-                detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
-              }
-              const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
-              if (detailRightColor && detailRightColor.length > 0) {
-                detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
-              }
               this.dataLeft = {}
               this.dataRight = {}
               // this.$router.push({
               //   path: '/documentComparison'
               // })
             } else {
-              this.$message.warning(this.$t('operationFailed'))
+              this.$message.warning(res.message)
             }
           }).finally(() => {
             this.loading = false
@@ -331,34 +333,23 @@ export default {
     // 点击左侧文档内容
     detailLeft (num, item) {
       this.leftTreeSelectedKeys = [item.menuId]
-      const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
-      if (detailLeftColor && detailLeftColor.length > 0) {
-        detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
-      }
       if (item.id === this.dataLeft.id && !this.isMatching) {
         this.dataLeft = {}
+        this.leftHighlightMenuId = null
         return
       }
-      const detailLeft = document.getElementsByClassName('detail-content-content-right-data')
-      if (detailLeft && detailLeft.length > 0) {
-        detailLeft[num].classList.add('detail-content-content-right-data-color')
-      }
+      this.leftHighlightMenuId = item.menuId
       this.dataLeft = item
       this.dataLeft.numIndex = num
+      // 自动匹配，右侧数据需要跳转
       if (this.isMatching) {
-        const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
-        if (detailRightColor && detailRightColor.length > 0) {
-          detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
-        }
-        if (item.targetStand > -1) {
-          const detailContent = document.getElementsByClassName('detail-content-content-right-right-top')
-          const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
-          this.dataRight = this.resultData.textRight[item.targetStand]
-          if (detailRight && detailRight.length > 0) {
-            detailRight[item.targetStand].classList.add('detail-content-content-right-data-color-right')
-            detailContent[0].scrollTop = detailRight[item.targetStand].offsetTop - 150
-          }
-          this.dataRight.numIndex = item.targetStand
+        const index = this.dataLeft.targetStand
+        if (index > -1) {
+          this.dataRight = this.resultData.textRight[index]
+          this.dataRight.numIndex = index
+          this.rightHighlightMenuId = this.dataRight.menuId
+          this.rightTreeSelectedKeys = [this.dataRight.menuId]
+          this.handleJumpRightData(index)
           this.clauseComparison()
         }
       }
@@ -366,34 +357,22 @@ export default {
     // 点击右侧文档内容
     detailRight (num, item) {
       this.rightTreeSelectedKeys = [item.menuId]
-      const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
-      if (detailRightColor && detailRightColor.length > 0) {
-        detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
-      }
       if (item.id === this.dataRight.id && !this.isMatching) {
         this.dataRight = {}
+        this.rightHighlightMenuId = null
         return
       }
-      const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
-      if (detailRight && detailRight.length > 0) {
-        detailRight[num].classList.add('detail-content-content-right-data-color-right')
-      }
       this.dataRight = item
       this.dataRight.numIndex = num
+      this.rightHighlightMenuId = item.menuId
       if (this.isMatching) {
-        const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
-        if (detailLeftColor && detailLeftColor.length > 0) {
-          detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
-        }
-        if (item.targetStand > -1) {
-          this.dataLeft = this.resultData.textLeft[item.targetStand]
-          this.dataLeft.numIndex = item.targetStand
-          const detailContent = document.getElementsByClassName('detail-content-content-right-top')
-          const detailLeft = document.getElementsByClassName('detail-content-content-right-data')
-          if (detailLeft && detailLeft.length > 0 && item.targetStand >= 0) {
-            detailLeft[item.targetStand].classList.add('detail-content-content-right-data-color')
-            detailContent[0].scrollTop = detailLeft[item.targetStand].offsetTop - 150
-          }
+        const index = this.dataRight.targetStand
+        if (index > -1) {
+          this.dataLeft = this.resultData.textLeft[index]
+          this.dataLeft.numIndex = index
+          this.leftHighlightMenuId = this.dataLeft.menuId
+          this.leftTreeSelectedKeys = [this.dataLeft.menuId]
+          this.handleJumpLeftData(index)
           this.clauseComparison()
         }
       }
@@ -418,123 +397,66 @@ export default {
     // 左侧树选择
     onSelectLeft (selectedKeys, exports) {
       const node = exports.node.$vnode.data.props.dataRef
-      const detailLeft = document.getElementsByClassName('detail-content-content-right-data')
-      const detailLeftContent = document.getElementsByClassName('detail-content-content-right')[0]
-      let dataItem, num
-      for (let i = 0; i < this.resultData.textLeft.length; i++) {
-        if (node.menuId === this.resultData.textLeft[i].menuId) {
-          dataItem = this.resultData.textLeft[i]
-          num = i
-          detailLeftContent.scrollTop = detailLeft[i].offsetTop - 150
-          break
-        }
-      }
-      // 处理数据框选
-      const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
-      if (detailLeftColor && detailLeftColor.length > 0) {
-        detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
-      }
-      if (dataItem.id === this.dataLeft.id && !this.isMatching) {
-        this.dataLeft = {}
-        return
-      }
-      if (detailLeft && detailLeft.length > 0) {
-        detailLeft[num].classList.add('detail-content-content-right-data-color')
-      }
-      this.dataLeft = dataItem
-      this.dataLeft.numIndex = num
+      const index = this.resultData.textLeft.findIndex(tt => tt.menuId === node.menuId)
+      this.dataLeft = this.resultData.textLeft[index]
+      console.log(this.dataLeft)
+      this.dataLeft.numIndex = index
+      this.leftHighlightMenuId = this.dataLeft.menuId
+      this.leftTreeSelectedKeys = [this.dataLeft.menuId]
+      this.handleJumpLeftData(index)
       // 处理选中右侧树
       if (this.isMatching) {
-        const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
-        const detailRightContent = document.getElementsByClassName('detail-content-content-right-right')[0]
-        let rightDataItem, rightNum
-        for (let i = 0; i < this.resultData.textRight.length; i++) {
-          if (node.menuId === this.resultData.textRight[i].menuId) {
-            rightDataItem = this.resultData.textLeft[i]
-            rightNum = i
-            detailRightContent.scrollTop = detailRight[i].offsetTop - 150
-            break
-          }
+        const indexRight = this.dataLeft.targetStand
+        if (indexRight > -1) {
+          this.dataRight = this.resultData.textRight[indexRight]
+          this.dataRight.numIndex = indexRight
+          this.rightHighlightMenuId = this.dataRight.menuId
+          this.rightTreeSelectedKeys = [this.dataRight.menuId]
+          this.handleJumpRightData(indexRight)
+          this.clauseComparison()
         }
-        // 处理选中右侧数据
-        if (!rightDataItem) {
-          return
-        }
-        const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
-        if (detailRightColor && detailRightColor.length > 0) {
-          detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
-        }
-        if (rightDataItem.id === this.dataRight.id && !this.isMatching) {
-          this.dataRight = {}
-          return
-        }
-        if (detailRight && detailRight.length > 0) {
-          detailRight[rightNum].classList.add('detail-content-content-right-data-color-right')
-        }
-        this.dataRight = rightDataItem
-        this.dataRight.numIndex = rightNum
       }
     },
     // 右侧树选中
     onSelectRight (selectedKeys, exports) {
       const node = exports.node.$vnode.data.props.dataRef
-      const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
-      const detailRightContent = document.getElementsByClassName('detail-content-content-right-right')[0]
-      let rightDataItem, rightNum
-      for (let i = 0; i < this.resultData.textRight.length; i++) {
-        if (node.menuId === this.resultData.textRight[i].menuId) {
-          rightDataItem = this.resultData.textLeft[i]
-          rightNum = i
-          detailRightContent.scrollTop = detailRight[i].offsetTop - 150
-          break
-        }
-      }
-      // 处理选中右侧数据
-      if (!rightDataItem) {
-        return
-      }
-      const detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
-      if (detailRightColor && detailRightColor.length > 0) {
-        detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
-      }
-      if (rightDataItem.id === this.dataRight.id && !this.isMatching) {
-        this.dataRight = {}
-        return
-      }
-      if (detailRight && detailRight.length > 0) {
-        detailRight[rightNum].classList.add('detail-content-content-right-data-color-right')
-      }
-      this.dataRight = rightDataItem
-      this.dataRight.numIndex = rightNum
+      const index = this.resultData.textRight.findIndex(tt => tt.menuId === node.menuId)
+      this.dataRight = this.resultData.textRight[index]
+      this.dataRight.numIndex = index
+      this.rightHighlightMenuId = this.dataRight.menuId
+      this.rightTreeSelectedKeys = [this.dataRight.menuId]
+      this.handleJumpRightData(index)
+      // 处理选中左侧树
       if (this.isMatching) {
-        const detailLeft = document.getElementsByClassName('detail-content-content-right-data')
-        const detailLeftContent = document.getElementsByClassName('detail-content-content-right')[0]
-        let dataItem, num
-        for (let i = 0; i < this.resultData.textLeft.length; i++) {
-          if (node.menuId === this.resultData.textLeft[i].menuId) {
-            dataItem = this.resultData.textLeft[i]
-            num = i
-            detailLeftContent.scrollTop = detailLeft[i].offsetTop - 150
-            break
-          }
+        const indexLeft = this.dataRight.targetStand
+        if (indexLeft > -1) {
+          this.dataLeft = this.resultData.textRight[indexLeft]
+          this.dataLeft.numIndex = indexLeft
+          this.leftHighlightMenuId = this.dataLeft.menuId
+          this.leftTreeSelectedKeys = [this.dataLeft.menuId]
+          this.handleJumpLeftData(indexLeft)
+          this.clauseComparison()
         }
-        // 处理数据框选
-        if (!dataItem) {
-          return
-        }
-        const detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
-        if (detailLeftColor && detailLeftColor.length > 0) {
-          detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
-        }
-        if (dataItem.id === this.dataLeft.id && !this.isMatching) {
-          this.dataLeft = {}
-          return
-        }
-        if (detailLeft && detailLeft.length > 0) {
-          detailLeft[num].classList.add('detail-content-content-right-data-color')
-        }
-        this.dataLeft = dataItem
-        this.dataLeft.numIndex = num
+      }
+    },
+    /**
+     * 左侧数据跳转
+     */
+    handleJumpLeftData (index) {
+      if (index > -1) {
+        const scrollContent = document.getElementsByClassName('detail-content-content-right')
+        const clauseItemDom = document.getElementsByClassName('detail-content-content-right-data')
+        scrollContent[0].scrollTop = clauseItemDom[index].offsetTop - 150
+      }
+    },
+    /**
+     * 右侧数据跳转
+     */
+    handleJumpRightData (index) {
+      if (index > -1) {
+        const detailContent = document.getElementsByClassName('detail-content-content-right-right')
+        const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
+        detailContent[0].scrollTop = detailRight[index].offsetTop - 150
       }
     },
     handleBack () {
@@ -797,11 +719,11 @@ export default {
 }
 
 .detail-content-content-right-data-blue {
-  border: 1px #21c9cc solid;
+  border: 2px #21c9cc solid;
 }
 
 .detail-content-content-right-data-blue-right {
-  border: 1px #21c9cc solid;
+  border: 2px #21c9cc solid;
 }
 
 .detail-content-content-right-data-color {