修改全文对比得细节问题

jero-web/src/views/documentTool/documentComparison/DocumentDataComparison.vue

@@ -60,10 +60,31 @@
               <div class="detail-content-left-item" @click="detailLeft(index,item)"
                    v-for="(item,index) in resultData.textLeft" :key="index"
                    :class="{'detail-content-item-selected': leftHighlightMenuId === item.menuId,'detail-content-item-saved':item.reviewed + '' === '1'}">
+                <div style="position: relative">
                 <div class="detail-content-item-text" style="margin-bottom: 10px;color: #040B29">
                   {{ item.itemsNum + ' ' + item.itemsName }}
                 </div>
                 <div class="detail-content-item-text" v-html="item.itemsText"></div>
+                  <div @click="addViewRemark(item)" class="addRemarkBtn" v-show="!item.remark && !item.closeBtn">
+                    <a-icon type="plus-circle" class="iconClass" /></div>
+                  <div @click="addViewRemark(item)" class="addRemarkBtn" v-show="item.remark && !item.closeBtn">
+                    <a-icon type="eye"  class="iconClass"/></div>
+                  <div @click="closeView(item)" class="addRemarkBtn" v-show="item.closeBtn">
+                    <a-icon type="close-circle"  class="iconClass"/></div>
+                </div>
+                <div v-if="item.addModalState">
+                  <a-textarea
+                    v-model.trim="item.remark"
+                    :maxlength="500"
+                    placeholder="书写笔记"
+                    :auto-size="{ minRows: 3, maxRows: 5 }"
+                  />
+                  <div style="text-align: right;margin: 10px 0">
+                    <a-button type="primary" @click="modalSave(item)">
+                      提交
+                    </a-button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -122,17 +143,39 @@
               <div class="detail-content-right-item" @click="detailRight(index,item)"
                    v-for="(item,index) in resultData.textRight" :key="index"
                    :class="{'detail-content-item-selected': item.menuId === rightHighlightMenuId, 'detail-content-item-saved':item.reviewed + '' === '1'}">
-                <div class="detail-content-item-text" style="margin-bottom: 10px;color: #040B29">
+                <div style="position: relative">
-                  {{ item.itemsNum + ' ' + item.itemsName }}
+                  <div class="detail-content-item-text" style="margin-bottom: 10px;color: #040B29">
+                    {{ item.itemsNum + ' ' + item.itemsName }}
+                  </div>
+                  <div class="detail-content-item-text" v-html="item.itemsText">
+                  </div>
+                  <div @click="addViewRemark(item)" class="addRemarkBtn" v-show="!item.remark && !item.closeBtn">
+                    <a-icon type="plus-circle" class="iconClass" /></div>
+                  <div @click="addViewRemark(item)" class="addRemarkBtn" v-show="item.remark && !item.closeBtn">
+                    <a-icon type="eye"  class="iconClass"/></div>
+                  <div @click="closeView(item)" class="addRemarkBtn" v-show="item.closeBtn">
+                    <a-icon type="close-circle"  class="iconClass"/></div>
                 </div>
-                <div class="detail-content-item-text" v-html="item.itemsText">
+                <div v-if="item.addModalState">
+                  <a-textarea
+                    v-model.trim="item.remark"
+                    :maxlength="500"
+                    placeholder="书写笔记"
+                    :auto-size="{ minRows: 3, maxRows: 5 }"
+                  />
+                  <div style="text-align: right;margin: 10px 0">
+                    <a-button type="primary" @click="modalSave(item)">
+                      提交
+                    </a-button>
+                  </div>
+                </div>
+
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
   </internal-detail-page>
 </template>
 
@@ -141,6 +184,7 @@
 
 import InternalDetailPage from '../../../components/InternalDetailPage.vue'
 import { getComparisonDetail, clauseComparison } from '../../../api/documentToolApi.js'
+import { postAction } from '../../../api/manage'
 
 export default {
   name: 'DocumentDataComparison',
@@ -164,6 +208,28 @@ export default {
       rightHighlightMenuId: null, // 右侧高亮数据的menuId
       similarityDegree: '',
       textContent: '',
+      itemLeftIndex: '',
+      itemRightIndex: ''
+    }
+  },
+  watch: {
+    itemRightIndex: {
+      deep: true,
+      handler (newVal, oldVal) {
+        if (oldVal !== '') {
+          this.resultData.textRight[oldVal].addModalState = false
+          this.resultData.textRight[oldVal].closeBtn = false
+        }
+      }
+    },
+    itemLeftIndex: {
+      deep: true,
+      handler (newVal, oldVal) {
+        if (oldVal !== '') {
+          this.resultData.textLeft[oldVal].addModalState = false
+          this.resultData.textLeft[oldVal].closeBtn = false
+        }
+      }
     }
   },
   mounted () {
@@ -191,6 +257,7 @@ export default {
       this.leftTreeSelectedKeys = [item.menuId]
       this.similarityDegree = ''
       this.textContent = ''
+      this.itemLeftIndex = num
       if (item.id === this.dataLeft.id && !this.isMatching) {
         this.dataLeft = {}
         this.leftHighlightMenuId = null
@@ -221,6 +288,7 @@ export default {
       this.rightTreeSelectedKeys = [item.menuId]
       this.similarityDegree = ''
       this.textContent = ''
+      this.itemRightIndex = num
       if (item.id === this.dataRight.id && !this.isMatching) {
         this.dataRight = {}
         this.rightHighlightMenuId = null
@@ -276,6 +344,7 @@ export default {
       const index = this.resultData.textLeft.findIndex(tt => tt.menuId === node.menuId)
       this.dataLeft = this.resultData.textLeft[index]
       this.dataLeft.numIndex = index
+      this.itemLeftIndex = index
       this.leftHighlightMenuId = this.dataLeft.menuId
       this.leftTreeSelectedKeys = [this.dataLeft.menuId]
       this.handleJumpLeftData(index)
@@ -302,6 +371,7 @@ export default {
       const index = this.resultData.textRight.findIndex(tt => tt.menuId === node.menuId)
       this.dataRight = this.resultData.textRight[index]
       this.dataRight.numIndex = index
+      this.itemRightIndex = index
       this.rightHighlightMenuId = this.dataRight.menuId
       this.rightTreeSelectedKeys = [this.dataRight.menuId]
       this.handleJumpRightData(index)
@@ -352,6 +422,45 @@ export default {
     },
     changeRightCatalogueShow () {
       this.rightCatalogueShow = !this.rightCatalogueShow
+    },
+    // 添加笔记
+    addViewRemark (item) {
+      item.addModalState = true
+      item.closeBtn = true
+    },
+    closeView (item) {
+      // if (item.remark !== item.oldRemark) {
+      //   this.$confirm({
+      //     title: '提示',
+      //     content: '<p>笔记内容有修改，是否保存?</p>',
+      //     onOk: () => {
+      //       this.modalSave(item)
+      //       item.closeBtn = false
+      //       item.addModalState = false
+      //     },
+      //     onCancel: () => {
+      //       item.closeBtn = false
+      //       item.addModalState = false
+      //     }
+      //   })
+      // } else {
+      item.closeBtn = false
+      item.addModalState = false
+      // }
+    },
+    modalSave (item) {
+      const query = {
+        remark: item.remark,
+        id: item.id
+      }
+      postAction('/compare/sarFileCompareItem/edit', query).then((res) => {
+        item.oldRemark = item.remark
+        if (res.success) {
+          this.$message.success(res.message)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
     }
   }
 }
@@ -506,6 +615,7 @@ export default {
     border: 1px solid #EFF1F3;
     cursor: pointer;
     background-color: white;
+    position: relative;
   }
 
   .detail-content-right-item {
@@ -514,6 +624,7 @@ export default {
     border: 1px solid #EFF1F3;
     cursor: pointer;
     background-color: white;
+    position: relative;
   }
 
   .detail-content-left-item:last-child {
@@ -681,4 +792,13 @@ export default {
     text-align: right;
     padding-right: 16px;
   }
+  .addRemarkBtn{
+    position: absolute;
+    bottom: 0;
+    right: -10px;
+    /*z-index: 10;*/
+  }
+  .iconClass{
+    font-size: 18px;
+  }
 </style>

jero-web/src/views/documentTool/documentComparison/comparisonTermsView.vue

@@ -14,14 +14,13 @@
           :columns="columns"
           :data-source="dataSource"
           :can-drag="true"
-          :loading="loading"
           :pagination="ipagination"
           :scroll="{x: '100%', y: yScrollHeight}"
           @operationClick="operationClick"
           :operation-list="operationList">
         </j-table>
     </div>
-    <viewDifferenceModal ref="viewDifferenceModalRef"/>
+    <viewDifferenceModal ref="viewDifferenceModalRef" @viewDifferenceModalForm="viewDifferenceModalForm"/>
   </internal-detail-page>
 </template>
 
@@ -113,6 +112,9 @@ export default {
     viewDifferenceClick (item) {
       console.log(item)
       this.$refs.viewDifferenceModalRef.open(item)
+    },
+    viewDifferenceModalForm () {
+      this.loadData()
     }
   }
 }

jero-web/src/views/documentTool/documentComparison/modules/viewDifferenceModal.vue

@@ -6,9 +6,9 @@
     :confirm-loading="confirmLoading"
     :maskClosable="false"
     switchFullscreen
-    @cancel="visible = false">
+    @cancel="cancel">
     <template slot="footer">
-      <a-button @click="visible = false">
+      <a-button @click="cancel">
          关闭
       </a-button>
     </template>
@@ -23,7 +23,28 @@
           <div class="detail-content-left-container">
             <div class="detail-content-left-scroll">
               <div class="detail-content-left-item">
-                <div class="detail-content-item-text" style="margin-bottom: 10px;color: #040B29" v-html="textLeft">
+                <div style="position: relative">
+                  <div class="detail-content-item-text" style="margin-bottom: 10px;color: #040B29" v-html="textLeft">
+                  </div>
+                  <div @click="addViewRemark" class="addRemarkBtn" v-show="!oldRemark && !oldCloseBtn">
+                    <a-icon type="plus-circle" class="iconClass" /></div>
+                  <div @click="addViewRemark" class="addRemarkBtn" v-show="oldRemark && !oldCloseBtn">
+                    <a-icon type="eye"  class="iconClass"/></div>
+                  <div @click="closeView" class="addRemarkBtn" v-show="oldCloseBtn">
+                    <a-icon type="close-circle"  class="iconClass"/></div>
+                </div>
+                <div v-if="oldAddModalState" style="margin-top: 10px">
+                  <a-textarea
+                    v-model.trim="oldRemark"
+                    :maxlength="500"
+                    placeholder="书写笔记"
+                    :auto-size="{ minRows: 3, maxRows: 5 }"
+                  />
+                  <div style="text-align: right;margin: 10px 0">
+                    <a-button type="primary" @click="modalSave('old')">
+                      提交
+                    </a-button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -35,8 +56,29 @@
           <div class="detail-content-right-container">
             <div class="detail-content-right-scroll">
               <div class="detail-content-right-item">
+                <div style="position: relative">
                 <div class="detail-content-item-text" v-html="textRight">
                 </div>
+                  <div @click="newAddViewRemark" class="addRemarkBtn" v-show="!newRemark && !newCloseBtn">
+                    <a-icon type="plus-circle" class="iconClass" /></div>
+                  <div @click="newAddViewRemark" class="addRemarkBtn" v-show="newRemark && !newCloseBtn">
+                    <a-icon type="eye"  class="iconClass"/></div>
+                  <div @click="newCloseView" class="addRemarkBtn" v-show="newCloseBtn">
+                    <a-icon type="close-circle"  class="iconClass"/></div>
+                </div>
+                <div v-if="newAddModalState" style="margin-top: 10px">
+                  <a-textarea
+                    v-model.trim="newRemark"
+                    :maxlength="500"
+                    placeholder="书写笔记"
+                    :auto-size="{ minRows: 3, maxRows: 5 }"
+                  />
+                  <div style="text-align: right;margin: 10px 0">
+                    <a-button type="primary" @click="modalSave('new')">
+                      提交
+                    </a-button>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -47,6 +89,7 @@
 </template>
 
 <script>
+import { postAction } from '@/api/manage'
 export default {
   name: 'viewDifferenceModal',
   data () {
@@ -56,13 +99,31 @@ export default {
       textLeft: '',
       textRight: '',
       similarityDegree: '',
-      textContent: ''
+      textContent: '',
+      oldRemark: '',
+      oldCloseBtn: false,
+      oldAddModalState: false,
+      newCloseBtn: false,
+      newAddModalState: false,
+      newRemark: '',
+      dataId: ''
     }
   },
   methods: {
+    cancel () {
+      this.visible = false
+      this.$emit('viewDifferenceModalForm')
+    },
     open (item) {
       this.textLeft = item.oldItemsText
       this.textRight = item.newItemsText
+      this.oldRemark = item.oldRemark
+      this.newRemark = item.newRemark
+      this.dataId = item.id
+      this.oldCloseBtn = false
+      this.oldAddModalState = false
+      this.newCloseBtn = false
+      this.newAddModalState = false
       this.similarityDegree = item.similarityDegree
       if (parseFloat(item.similarityDegree) < parseFloat('75%')) {
         this.textContent = '不相似'
@@ -72,6 +133,43 @@ export default {
         this.textContent = '相同'
       }
       this.visible = true
+    },
+    addViewRemark () {
+      this.oldCloseBtn = true
+      this.oldAddModalState = true
+    },
+    closeView () {
+      this.oldCloseBtn = false
+      this.oldAddModalState = false
+    },
+    newAddViewRemark () {
+      this.newCloseBtn = true
+      this.newAddModalState = true
+    },
+    newCloseView () {
+      this.newCloseBtn = false
+      this.newAddModalState = false
+    },
+    modalSave (type) {
+      let query = {}
+      if (type === 'old') {
+        query = {
+          id: this.dataId,
+          oldRemark: this.oldRemark
+        }
+      } else {
+        query = {
+          id: this.dataId,
+          newRemark: this.newRemark
+        }
+      }
+      postAction('/compare/sarItemsCompareHis/edit', query).then((res) => {
+        if (res.success) {
+          this.$message.success(res.message)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
     }
   }
 }
@@ -161,6 +259,7 @@ export default {
     border: 1px solid #fff;
     cursor: pointer;
     background-color: white;
+    position: relative;
   }
 
   .detail-content-right-item {
@@ -169,6 +268,7 @@ export default {
     /*border: 1px solid #EFF1F3;*/
     cursor: pointer;
     background-color: white;
+    position: relative;
   }
 
   .detail-content-left-item:last-child {
@@ -200,4 +300,12 @@ export default {
     border-bottom: 2px solid #EFF1F3 ;
     font-size: 16px;
   }
+  .iconClass{
+     font-size: 18px;
+  }
+  .addRemarkBtn{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
 </style>