布局条款比对

jero-web/src/common/lang/en-us.js

@@ -479,6 +479,8 @@ module.exports = {
       selectedStandard: 'Selected Standard',
       noComparisonDocumentSelected: 'No comparison document selected',
       remarkInfo: 'Remarks Info',
+      comparisonOfTerms: 'Comparison Of Terms',
+      comparison: 'Comparison',
       initiateDocumentComparison: 'Initiate Document Comparison',
       documentComparison: 'Doc Comparison',
       viewTheComparisonResults: 'View Results',

jero-web/src/common/lang/zh-cn.js

@@ -491,6 +491,8 @@ module.exports = {
       selectedStandard: '所选标准',
       noComparisonDocumentSelected: '未选择对比文档',
       remarkInfo: '备注信息',
+      comparisonOfTerms: '条款对比',
+      comparison: '比对',
       initiateDocumentComparison: '发起文档对比',
       documentComparison: '文档对比',
       viewTheComparisonResults: '查看对比结果',

jero-web/src/config/router.config.js

@@ -28,15 +28,6 @@ export const constantRouterMap = [
       //   name: 'documentTool-documentSplit',
       //   component: () => import(/* webpackChunkName: "user" */ '@/views/documentTool/documentSplit/DocumentSplit')
       // },
-      // 标准分解单
-      {
-        path: '/documentTool/StandardSplitSheet',
-        name: 'documentTool-StandardSplitSheet',
-        meta: {
-          title: '标准分解单'
-        },
-        component: () => import(/* webpackChunkName: "user" */ '@/views/documentTool/documentSplit/StandardSplitSheet')
-      },
       // 新旧拆分单对比
       // {
       //   path: '/documentTool/documentComparison',
@@ -61,6 +52,15 @@ export const constantRouterMap = [
         },
         component: () => import(/* webpackChunkName: "user" */ '@/views/documentTool/documentComparison/DocumentDataComparison')
       },
+      // 新旧拆分单对比-条款对比
+      {
+        path: '/documentTool/comparisonOfTerms',
+        name: 'documentTool-comparisonOfTerms',
+        meta: {
+          title: '新旧拆分单对比-条款对比'
+        },
+        component: () => import(/* webpackChunkName: "user" */ '@/views/documentTool/documentComparison/comparisonOfTerms')
+      },
       // 新旧拆分单对比-对比结果
       {
         path: '/documentTool/ComparisonResults',
@@ -81,6 +81,15 @@ export const constantRouterMap = [
       }
     ]
   },
+  // 标准分解单
+  {
+    path: '/documentTool/StandardSplitSheet',
+    name: 'documentTool-StandardSplitSheet',
+    meta: {
+      title: '标准分解单'
+    },
+    component: () => import(/* webpackChunkName: "user" */ '@/views/documentTool/documentSplit/StandardSplitSheet')
+  },
   // {
   //   path: '/user',
   //   component: UserLayout,

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

@@ -130,8 +130,12 @@
     </div>
 
     <div class="box-button">
+      <!--发起条款对比-->
+      <a-button type="primary" @click="submit('comparisonOfTerms')" style="margin-right: 8px">
+        {{ $t('docTool.comparison.comparisonOfTerms') }}
+      </a-button>
       <!--发起文档对比-->
-      <a-button type="primary" @click="submit">
+      <a-button type="primary" @click="submit('initiateDocumentComparison')">
         {{ $t('docTool.comparison.initiateDocumentComparison') }}
       </a-button>
     </div>
@@ -337,7 +341,7 @@ export default {
       this.ipaginationRight = pagination
       this.getListRight()
     },
-    submit () {
+    submit (type) {
       if (!this.selectedRowsRight[0] || !this.selectedRowsLeft[0]) {
         this.$message.warning(this.$t('docTool.comparison.pleaseSelectTheDataCompared'))
         return
@@ -350,22 +354,27 @@ export default {
             rightStandard: this.selectedRowsRight[0].id,
             remark: this.formInline.remark
           }
-          submitInitComparsion(query).then((res) => {
+          if (type === 'comparisonOfTerms') {
-            if (res.success) {
+            this.$router.push({
-              console.log(res)
+              path: '/documentTool/comparisonOfTerms'
-              this.loading = false
+            })
-              this.$message.success(this.$t('operationSuccessful'))
+          } else {
-              this.$router.push({
+            submitInitComparsion(query).then((res) => {
-                path: '/documentTool/DocumentDataComparison',
+              if (res.success) {
-                query: {
+                this.loading = false
-                  id: res.result
+                this.$message.success(this.$t('operationSuccessful'))
-                }
+                this.$router.push({
-              })
+                  path: '/documentTool/DocumentDataComparison',
-            } else {
+                  query: {
-              this.loading = false
+                    id: res.result
-              this.$message.warning(res.message)
+                  }
-            }
+                })
-          })
+              } else {
+                this.loading = false
+                this.$message.warning(res.message)
+              }
+            })
+          }
         }
       })
     },

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

@@ -0,0 +1,471 @@
+<template>
+  <internal-detail-page :title="$t('docTool.comparison.comparisonOfTerms')"
+                        :content-padding="0"
+                        :loading="loading"
+                        need-custom-back-func
+                        @back="handleBack">
+    <div class="can-scroll-content">
+      <div class="detail-content">
+        <!--左边的文档-->
+        <div class="detail-content-left">
+          <!--左边的标准标题-->
+          <div class="detail-content-left-title">
+            的撒范德萨范德萨但是
+          </div>
+          <!--左边的目录-->
+          <div class="standard-catalogue part-common">
+            <div class="has-title-part-content">
+              <a-tree
+                class="draggable-tree"
+                :selected-keys="leftTreeSelectedKeys"
+                :replace-fields="{key: 'menuId'}"
+                @select="onSelectLeft"
+                :tree-data="resultData.menuLeft">
+                <a-icon slot="switcherIcon" type="down" :style="{ fontSize: '12px', color: '#103770' }" />
+                <template slot="title" slot-scope="{title}">
+                  <!-- 目录前三个和有子集的标题加粗 -->
+                  <span :style="title.indexOf('.')===-1?'font-weight: 600;':''">{{ title }}</span>
+                </template>
+              </a-tree>
+            </div>
+          </div>
+          <!--左侧标准信息-->
+          <div class="detail-content-left-container">
+            <!--标准名称-->
+            <div class="standard-name">
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ resultData.serialNumberLeft }} {{ resultData.fileNameLeft }}
+                </template>
+                <span>{{ resultData.serialNumberLeft }} {{ resultData.fileNameLeft }}</span>
+              </a-tooltip>
+            </div>
+            <div class="detail-content-left-scroll">
+              <div class="detail-content-left-item"
+                   v-for="(item,index) in 1" :key="index">
+                <div class="detail-content-item-text" style="margin-bottom: 10px;color: #040B29">
+                  条款内容：</br>
+                 但是看见官方电话就是官方的话就十分大师傅df ghdfgkj定时联发科和司法会计的是疯狂的事哈佛导师反馈但是反馈的身
+                  份和但是开发的是否和的课时费和上课积分都十分考究的释放的空间是犯得上看见发大师傅但是豆腐干豆腐干豆腐干的
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!--右侧文档-->
+        <div class="detail-content-right">
+          <!--左边的标准标题-->
+          <div class="detail-content-right-title">
+            的撒范德萨范德萨但是
+          </div>
+          <!--右侧目录-->
+          <div class="standard-catalogue part-common">
+            <div class="has-title-part-content">
+              <a-tree
+                class="draggable-tree"
+                :selected-keys="rightTreeSelectedKeys"
+                :replace-fields="{key: 'menuId'}"
+                @select="onSelectRight"
+                :tree-data="resultData.menuRight">
+                <a-icon slot="switcherIcon" type="down" :style="{ fontSize: '12px', color: '#103770' }" />
+                <template slot="title" slot-scope="{title}">
+                  <!-- 目录前三个和有子集的标题加粗 -->
+                  <span :style="title.indexOf('.')===-1?'font-weight: 600;':''">{{ title }}</span>
+                </template>
+              </a-tree>
+            </div>
+          </div>
+          <!--右侧标准信息-->
+          <div class="detail-content-right-container">
+            <!--标准名称-->
+            <div class="standard-name">
+              <a-tooltip placement="topLeft">
+                <template #title>
+                  {{ resultData.serialNumberRight }} {{ resultData.fileNameRight }}
+                </template>
+                <span>{{ resultData.serialNumberRight }} {{ resultData.fileNameRight }}</span>
+              </a-tooltip>
+            </div>
+            <div class="detail-content-right-scroll">
+              <div class="detail-content-right-item" @click="detailRight(index,item)"
+                   v-for="(item,index) in resultData.textRight" :key="index">
+                <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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="detail-content-button">
+      <a-button class="header-btn"
+                type="primary"
+                ghost>
+        {{ $t('docTool.comparison.comparison') }}
+      </a-button>
+    </div>
+  </internal-detail-page>
+</template>
+
+<script>
+import InternalDetailPage from '../../../components/InternalDetailPage.vue'
+
+export default {
+  name: 'comparisonOfTerms',
+  components: { InternalDetailPage },
+  data () {
+    return {
+      loading: false,
+      leftTreeSelectedKeys: [],
+      resultData: {},
+      rightTreeSelectedKeys: [],
+    }
+  },
+  methods: {
+    handleBack () {
+
+    },
+    // 左侧树选择
+    onSelectLeft (selectedKeys, exports) {
+      const node = exports.node.$vnode.data.props.dataRef
+      const index = this.resultData.textLeft.findIndex(tt => tt.menuId === node.menuId)
+    },
+    // 右侧树选择
+    onSelectRight () {
+
+    },
+    detailRight () {
+
+    }
+  }
+}
+</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;
+  }
+
+  .detail-content {
+    height: calc(100% - 12px);
+    background-color: #eff1f4;
+  }
+
+  .detail-content-left {
+    width: 50%;
+    float: left;
+    height: 100%;
+    border-right: 2px #EFF1F3 solid;
+    box-sizing: border-box;
+    border-bottom: 2px #EFF1F3 solid;
+    /*display: flex;*/
+  }
+
+  .detail-content-right {
+    width: 50%;
+    height: 100%;
+    float: left;
+    box-sizing: border-box;
+    border-bottom: 2px #EFF1F3 solid;
+    /*display: flex;*/
+  }
+
+  .detail-content-left-header {
+    width: 100%;
+    font-size: 16px;
+    font-family: Blue Sky Noto;
+    font-weight: 400;
+    color: #040B29;
+    margin-bottom: 24px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-title-text-remarks {
+    line-height: 1.4;
+    display: flex;
+    /*align-items: center;*/
+    margin-bottom: 10px;
+  }
+
+  .item-model {
+    width: calc(100% - 232px);
+  }
+
+  .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;
+  }
+
+  .box-button {
+    height: 38px;
+    /*margin-top: 2px;*/
+  }
+
+  .remarks {
+    margin-top: 20px;
+    width: 50%;
+    display: inline-block;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+
+  .itemModel {
+    width: calc(100% - 232px);
+  }
+
+  .submit-button {
+    height: 52px;
+    text-align: right;
+    padding: 10px 24px;
+  }
+
+  .detail-content-left-container {
+    height: calc(100% - 55px);
+    width: calc(100% - 201px);
+    display: inline-block;
+    overflow-y: auto;
+    transition: all 1s;
+    border-radius: 4px;
+    scroll-behavior: smooth;
+    flex: 1;
+  }
+
+  .detail-content-right-container {
+    height: calc(100% - 55px);
+    width: calc(100% - 201px);
+    overflow-y: auto;
+    display: inline-block;
+    transition: all 1s;
+    scroll-behavior: smooth;
+    flex: 1;
+
+    .standard-name {
+      margin-right: 0;
+    }
+  }
+
+  .detail-content-left-scroll {
+    height: calc(100% - 25px - 40px);
+    width: calc(100% - 20px);
+    display: inline-block;
+    margin: 0 10px 0 10px;
+    overflow: auto;
+    background-color: white;
+    border-radius: 7px;
+  }
+
+  .detail-content-right-scroll {
+    height: calc(100% - 25px - 40px);
+    width: calc(100% - 10px);
+    display: inline-block;
+    margin-left: 10px;
+    overflow: auto;
+    border-radius: 7px;
+    background-color: white;
+  }
+
+  .detail-content-left-item {
+    padding: 16px 20px;
+    box-sizing: border-box;
+    border: 1px solid #fff;
+    cursor: pointer;
+    background-color: white;
+  }
+
+  .detail-content-right-item {
+    padding: 16px 20px;
+    box-sizing: border-box;
+    border: 1px solid #EFF1F3;
+    cursor: pointer;
+    background-color: white;
+  }
+
+  .detail-content-left-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .detail-content-item-text {
+    font-size: 16px;
+    font-weight: 400;
+    color: #040B29;
+    word-break: break-word;
+
+    /deep/ table {
+      width: 100%;
+    }
+
+    /deep/ img {
+      max-width: 100%;
+    }
+  }
+
+  .detail-content-item-selected {
+    border: 2px red solid !important;
+  }
+
+  .detail-content-item-saved {
+    border: 2px #21c9cc solid;
+  }
+
+
+  ::v-deep .delClass {
+    color: #ff7168;
+  }
+
+  ::v-deep .insertClass {
+    color: green;
+  }
+
+  /deep/ .ant-tree li span.ant-tree-switcher {
+    float: right;
+  }
+
+  ::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  .part-common {
+    border-radius: 8px;
+    background: #FFFFFF;
+  }
+
+  .standard-catalogue {
+    height: calc(100% - 74px);
+    width: 200px;
+    overflow: auto;
+    display: inline-block;
+    margin: 10px 0 10px 0;
+    position: relative;
+    transition: width .2s linear;
+
+    /deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
+      background-color: transparent !important;
+      color: @primary-color;
+    }
+
+    .catalogue-show {
+      position: absolute;
+      width: 12px;
+      height: 24px;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: @primary-color;
+      border-radius: 0 12px 12px 0;
+      cursor: pointer;
+      color: white;
+
+      .anticon {
+        left: -2px;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  .hide-catalogue {
+    width: 0;
+    min-width: 0;
+  }
+
+  .part-title {
+    height: 40px;
+    background: rgba(213, 44, 38, 0.12);
+    border-radius: 8px 8px 0 0;
+    line-height: 40px;
+    padding: 0 24px;
+    font-size: 16px;
+    font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .has-title-part-content {
+    height: calc(100% - 40px);
+    overflow: auto;
+    padding: 0 20px;
+  }
+
+  .standard-name {
+    margin: 10px 10px 5px 10px;
+    height: 40px;
+    background: #FFFFFF;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 24px;
+  }
+
+  .standard-name > span {
+    font-size: 16px;
+    font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+    flex: 1;
+    width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+
+  .detail-content-left-title {
+    height: 50px;
+    width: calc(100% - 12px);
+    background: #fff;
+    margin-top: 8px;
+    border-radius: 4px;
+    line-height: 50px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+  }
+  .detail-content-right-title{
+    height: 50px;
+    width: calc(100% - 2px);
+    background: #fff;
+    margin-top: 8px;
+    border-radius: 4px;
+    line-height: 50px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    font-size: 14px;
+    font-family: PingFang SC-Semibold, PingFang SC, sans-serif;
+    font-weight: 600;
+    color: #1D2129;
+  }
+  .detail-content-button{
+    text-align: right;
+    padding-right: 16px;
+  }
+</style>