update 文档比对

2023-09-18 15:05:46 +08:00
parent b9d19e081b
commit e9c563383f
6 changed files with 218 additions and 300 deletions
@@ -0,0 +1,523 @@
+<template>
+  <internal-detail-page :title="$t('docTool.comparison.documentComparison')" :content-padding="0" :loading="loading">
+    <template v-slot:titleRightCustom>
+      <a-button class="header-btn" type="primary" icon="eye" ghost @click="viewTheComparisonResultsClick">
+        {{ $t('docTool.comparison.viewTheComparisonResults') }}
+      </a-button>
+      <a-button class="header-btn" type="primary" icon="message" ghost @click="addFullTextCommentClick">
+        {{ $t('docTool.comparison.addFullTextComment') }}
+      </a-button>
+      <a-button class="header-btn" type="primary" :icon="isMatching?'close-circle':'check-circle'" ghost @click="turnOffAutomaticMatchingClick">
+        {{ isMatching ? $t('docTool.comparison.turnOffAutomaticMatching') : $t('docTool.comparison.turnOnAutoMatch') }}
+      </a-button>
+    </template>
+    <div class="can-scroll-content">
+      <div class="detail-content">
+        <div class="detail-content-left">
+          <div class="detail-content-left-header"
+               :title="resultData.serialNumberLeft + resultData.fileNameLeft">
+            {{ this.resultData.serialNumberLeft }}&nbsp;
+            {{ this.resultData.fileNameLeft }}
+          </div>
+          <div class="detail-content-content-left">
+            <a-tree
+              class="draggable-tree"
+              @select="onSelectLeft"
+              :tree-data="resultData.menuLeft"
+            />
+          </div>
+          <div class="detail-content-content-right-top">
+            <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'}">
+                <div class="detail-content-content-right-data-text" style="margin-bottom: 10px;color: #040B29">
+                  {{ item.itemsNum + ' ' + item.itemsName }}
+                </div>
+                <div class="detail-content-content-right-data-text" v-html="item.itemsText"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-content-right">
+          <div class="detail-content-left-header">
+                <span class="detail-content-left-header-text"
+                      :title="resultData.serialNumberRight + resultData.fileNameRight">
+                   {{ this.resultData.serialNumberRight }}&nbsp;
+                   {{ this.resultData.fileNameRight }}
+                </span>
+            <!--                <span class="detail-content-left-header-text-right">-->
+            <!--                    <span style="color: #9B9DA9">相似度:</span>-->
+            <!--                    <span style="color: #E83030">98%</span>-->
+            <!--                 </span>-->
+          </div>
+          <div class="detail-content-content-left">
+            <a-tree
+              class="draggable-tree"
+              @select="onSelectRight"
+              :tree-data="resultData.menuRight"
+            />
+          </div>
+          <div class="detail-content-content-right-right-top">
+            <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'}">
+                <div class="detail-content-content-right-data-text" style="margin-bottom: 10px;color: #040B29">
+                  {{ item.itemsNum + ' ' + item.itemsName }}
+                </div>
+                <div class="detail-content-content-right-data-text" v-html="item.itemsText">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="remarks">
+        <a-form-model :model="formInline"
+                      class="formAdd" :rules="rules"
+                      ref="ruleForm">
+          <div class="box-title-text-remarks">
+            <div class="title-text-remarks" :title="$t('docTool.comparison.comparisonOfArticles')" style="width: 84px">
+              <span>{{ $t('docTool.comparison.comparisonOfArticles') }}</span>
+            </div>
+            <a-form-model-item class="item-model" prop="comment">
+              <a-textarea :placeholder="$t('pleaseEnter')+$t('docTool.comparison.comparisonOfArticles')"
+                          v-model="formInline.comment"
+                          :maxLength="500"
+                          :rows="3" />
+            </a-form-model-item>
+          </div>
+        </a-form-model>
+      </div>
+    </div>
+
+    <div class="submit-button">
+      <a-button style="margin-right: 10px" type="primary" @click="consistentAssessmentClick()">{{ $t('docTool.comparison.consistentAssessment') }}
+      </a-button>
+      <a-button type="primary" @click="submit()">{{ $t('preservation') }}</a-button>
+    </div>
+
+    <comparison-add-full-comment ref="comparisonAddFullComment"></comparison-add-full-comment>
+  </internal-detail-page>
+</template>
+
+<script>
+import { postAction, getAction } from '../../../api/manage.js'
+// 添加全文评论弹框
+import ComparisonAddFullComment from '../modules/ComparisonAddFullComment.vue'
+import InternalDetailPage from '../../../components/InternalDetailPage.vue'
+
+export default {
+  name: 'DocumentDataComparison',
+  components: { ComparisonAddFullComment, InternalDetailPage },
+  data () {
+    return {
+      formInline: {},
+      loadingText: false,
+      rules: {},
+      loading: false,
+      resultData: {},
+      isMatching: true, // 自动匹配是否开启
+      dataLeft: {},
+      dataRight: {}
+    }
+  },
+  mounted () {
+    this.getData()
+    document.title = this.$t('docTool.comparison.documentComparison') + ' - ' + this.$t('edit')
+  },
+  methods: {
+    goBack () {
+      this.$router.push({
+        path: '/documentTool/documentComparison'
+      })
+    },
+    // 文档对比的一致按钮点击
+    consistentAssessmentClick () {
+      if (!this.dataLeft.id && !this.dataRight.id) {
+        this.$message.warning(this.$t('docTool.comparison.pleaseSelectTheDataCompared'))
+        return
+      }
+      const query = {
+        itemsIdLeft: this.dataLeft.id,
+        itemsIdRight: this.dataRight.id,
+        infoId: this.$route.query.id,
+        comment: '一致'
+      }
+      this.loading = true
+      postAction('/compare/sarFileCompareItemComment/add', query).then((res) => {
+        if (res.success) {
+          this.$message.success(this.$t('operationSuccessful'))
+          this.formInline = {}
+          this.resultData.textRight.forEach(val => {
+            if (val.id === this.dataRight.id) {
+              val.reviewed = 1
+            }
+          })
+          this.resultData.textLeft.forEach(val => {
+            if (val.id === this.dataLeft.id) {
+              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'))
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 文档对比的保存按钮点击
+    submit () {
+      if (!this.dataLeft.id && !this.dataRight.id) {
+        this.$message.warning(this.$t('docTool.comparison.pleaseSelectTheDataCompared'))
+        return
+      }
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const query = {
+            itemsIdLeft: this.dataLeft.id,
+            itemsIdRight: this.dataRight.id,
+            infoId: this.$route.query.id,
+            comment: this.formInline.comment
+          }
+          this.loading = true
+          postAction('/compare/sarFileCompareItemComment/add', query).then((res) => {
+            if (res.success) {
+              this.$message.success(this.$t('operationSuccessful'))
+              this.formInline = {}
+              this.resultData.textRight.forEach(val => {
+                if (val.id === this.dataRight.id) {
+                  val.reviewed = 1
+                }
+              })
+              this.resultData.textLeft.forEach(val => {
+                if (val.id === this.dataLeft.id) {
+                  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 = {}
+              // this.$router.push({
+              //   path: '/documentComparison'
+              // })
+            } else {
+              this.$message.warning(this.$t('operationFailed'))
+            }
+          }).finally(() => {
+            this.loading = false
+          })
+        }
+      })
+    },
+    // 查看对比结果按钮点击
+    viewTheComparisonResultsClick () {
+      const newUrl = this.$router.resolve({
+        path: '/comparisonResults',
+        query: {
+          id: this.$route.query.id,
+          isDisplay: 2
+        }
+      })
+      window.open(newUrl.href, '_blank')
+    },
+    // 添加全文评论按钮点击
+    addFullTextCommentClick () {
+      const query = {
+        id: this.$route.query.id
+      }
+      postAction('/compare/sarFileCompareInfo/getComparisonDetail', query).then((res) => {
+        if (res.success) {
+          this.$refs.comparisonAddFullComment.open(res.result.comments || '')
+        }
+      })
+    },
+    // 关闭自动匹配、开启自动匹配
+    turnOffAutomaticMatchingClick () {
+      this.isMatching = !this.isMatching
+      this.$message.success(this.$t('operationSuccessful'))
+    },
+    // 获取文件对比详情
+    getData () {
+      const query = {
+        id: this.$route.query.id
+      }
+      this.loading = true
+      postAction('/compare/sarFileCompareInfo/getComparisonDetail', query).then((res) => {
+        if (res.success) {
+          this.resultData = res.result || {}
+        } else {
+          this.resultData = {}
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 点击左侧文档内容
+    detailLeft (num, item) {
+      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 = {}
+        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.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
+          this.clauseComparison()
+        }
+      }
+    },
+    // 点击右侧文档内容
+    detailRight (num, item) {
+      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 = {}
+        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
+      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
+          }
+          this.clauseComparison()
+        }
+      }
+    },
+    // 自动匹配
+    clauseComparison () {
+      const query = {
+        leftId: this.dataLeft.id,
+        rightId: this.dataRight.id
+      }
+      this.loadingText = true
+      getAction('/compare/sarFileCompareItem/clauseComparison', query).then((res) => {
+        if (res.success) {
+          this.loadingText = false
+          this.resultData.textLeft[this.dataLeft.numIndex].itemsText = res.result[0]
+          this.resultData.textRight[this.dataRight.numIndex].itemsText = res.result[1]
+        } else {
+          this.loadingText = false
+        }
+      })
+    },
+    // 左侧树选择
+    onSelectLeft (selectedKeys, exports) {
+      const node = exports.node.$vnode.data.props.dataRef
+      const detailLeft = document.getElementsByClassName('detail-content-content-right-data')
+      const detailContent = document.getElementsByClassName('detail-content-content-right-top')
+      if (!node.parentId) {
+        detailContent[0].scrollTop = 0
+        return
+      }
+      for (let i = 0; i < this.resultData.textLeft.length; i++) {
+        if (node.parentId && node.menuId === this.resultData.textLeft[i].menuId) {
+          detailContent[0].scrollTop = detailLeft[i].offsetTop - 150
+          return
+        }
+      }
+    },
+    // 右侧树选中
+    onSelectRight (selectedKeys, exports) {
+      const node = exports.node.$vnode.data.props.dataRef
+      const detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
+      const detailContent = document.getElementsByClassName('detail-content-content-right-right-top')
+      if (!node.parentId) {
+        detailContent[0].scrollTop = 0
+        return
+      }
+      for (let i = 0; i < this.resultData.textRight.length; i++) {
+        if (node.parentId && node.menuId === this.resultData.textRight[i].menuId) {
+          detailContent[0].scrollTop = detailRight[i].offsetTop - 150
+          return
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.header-btn {
+  margin-left: 12px;
+}
+
+.header-btn:first-child {
+  margin-left: 0;
+}
+
+.can-scroll-content {
+  height: calc(100% - 52px);
+  overflow: auto;
+}
+
+.doc-detail-right {
+  width: 600px;
+  line-height: 68px;
+  display: flex;
+
+  .operator-text-text {
+    cursor: pointer;
+    margin-right: 53px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    display: inline-block;
+    width: 33.3%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: right;
+  }
+}
+
+.detail-content {
+  height: calc(100% - 131px);
+  display: flex;
+
+  &-left {
+    width: 50%;
+    height: 100%;
+    border-right: 2px #EFF1F3 solid;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    border-bottom: 2px #EFF1F3 solid;
+  }
+
+  &-right {
+    width: 50%;
+    height: 100%;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    border-bottom: 2px #EFF1F3 solid;
+  }
+
+  &-left-header {
+    margin-bottom: 24px;
+  }
+
+  &-left-header-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    font-size: 16px;
+    font-family: Blue Sky Noto;
+    font-weight: 400;
+    color: #040B29;
+  }
+}
+
+.detail-content-content-left {
+  width: 180px;
+  height: 520px;
+  float: left;
+  overflow: auto;
+
+  /deep/ .ant-tree-node-content-wrapper {
+    display: inline-block !important;
+    color: #040B29 !important;
+    width: 130px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.remarks {
+  margin-top: 20px;
+  width: 50%;
+  display: inline-block;
+  padding: 0 32px;
+  box-sizing: border-box;
+}
+
+.box-title-text-remarks {
+  line-height: 1.4;
+  display: flex;
+  /*align-items: center;*/
+  margin-bottom: 10px;
+}
+
+.title-text-remarks {
+  width: 68px;
+  color: #000F16;
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  margin-right: 16px;
+  margin-top: 6px;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-model {
+  width: calc(100% - 232px);
+}
+
+.submit-button {
+  height: 52px;
+  text-align: right;
+  padding: 10px 24px;
+}
+</style>