576 lines
14 KiB
Vue
576 lines
14 KiB
Vue
<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">
|
||
{{ $route.query.infoNumberLeft }} {{ $route.query.infoNameLeft }}
|
||
</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="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>
|
||
{{ leftData.title }}
|
||
</template>
|
||
<span>{{ leftData.title }}</span>
|
||
</a-tooltip>
|
||
</div>
|
||
<div class="detail-content-left-scroll">
|
||
<div class="detail-content-left-item">
|
||
<div class="detail-content-item-text" v-if="textLeft"
|
||
style="margin-bottom: 10px;color: #040B29;font-weight: bold;">
|
||
条款内容：
|
||
</div>
|
||
<div class="detail-content-item-text" style="margin-bottom: 10px;color: #040B29" v-html="textLeft">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--右侧文档-->
|
||
<div class="detail-content-right">
|
||
<!--左边的标准标题-->
|
||
<div class="detail-content-right-title">
|
||
{{ $route.query.infoNumberRight }} {{ $route.query.infoNameRight }}
|
||
</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="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>
|
||
{{ rightData.title }}
|
||
</template>
|
||
<span>{{ rightData.title }}</span>
|
||
</a-tooltip>
|
||
</div>
|
||
<div class="detail-content-right-scroll">
|
||
<div class="detail-content-right-item">
|
||
<div v-if="textRight" class="detail-content-item-text"
|
||
style="margin-bottom: 10px;color: #040B29;font-weight: bold;">
|
||
条款内容：
|
||
</div>
|
||
<div class="detail-content-item-text" v-html="textRight">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-content-button">
|
||
<a-button class="header-btn"
|
||
type="primary"
|
||
@click="comparisonClick"
|
||
ghost>
|
||
{{ $t('docTool.comparison.comparison') }}
|
||
</a-button>
|
||
</div>
|
||
|
||
</internal-detail-page>
|
||
</template>
|
||
|
||
<script>
|
||
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
|
||
import { getSplitMenusByInfo, documentSplitView, clauseComparisonEvent } from '../../../api/documentToolApi.js'
|
||
|
||
export default {
|
||
name: 'comparisonOfTerms',
|
||
components: { InternalDetailPage },
|
||
data () {
|
||
return {
|
||
loading: false,
|
||
leftTreeSelectedKeys: [],
|
||
resultData: {},
|
||
rightTreeSelectedKeys: [],
|
||
menuRight: [],
|
||
menuLeft: [],
|
||
leftData: {},
|
||
rightData: {},
|
||
textRight: '',
|
||
textLeft: ''
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getMenuLeft()
|
||
this.getMenuRight()
|
||
},
|
||
methods: {
|
||
handleBack () {
|
||
|
||
},
|
||
// 左侧树选择
|
||
onSelectLeft (selectedKeys, exports) {
|
||
const node = exports.node.$vnode.data.props.dataRef
|
||
if (!node.pid) {
|
||
return
|
||
}
|
||
this.leftData = node
|
||
this.getLeftDocumentSplitView()
|
||
},
|
||
getLeftDocumentSplitView () {
|
||
const query = {
|
||
menu_id: this.leftData.id,
|
||
info_id: this.$route.query.infoIdLeft,
|
||
pageNo: 1,
|
||
pageSize: 9999,
|
||
order: 'desc'
|
||
}
|
||
this.loading = true
|
||
documentSplitView(query).then((res) => {
|
||
if (res.success) {
|
||
if (res.result.records && res.result.records.length > 0){
|
||
this.textLeft = res.result.records[0].item_content
|
||
} else {
|
||
this.textLeft = ''
|
||
}
|
||
} else {
|
||
this.textLeft = ''
|
||
}
|
||
this.loading = false
|
||
})
|
||
},
|
||
// 右侧树选择
|
||
onSelectRight (selectedKeys, exports) {
|
||
const node = exports.node.$vnode.data.props.dataRef
|
||
if (!node.pid) {
|
||
return
|
||
}
|
||
this.rightData = node
|
||
this.getRightDocumentSplitView()
|
||
},
|
||
|
||
getRightDocumentSplitView () {
|
||
const query = {
|
||
menu_id: this.rightData.id,
|
||
info_id: this.$route.query.infoIdRight,
|
||
pageNo: 1,
|
||
pageSize: 9999,
|
||
order: 'desc'
|
||
}
|
||
this.loading = true
|
||
documentSplitView(query).then((res) => {
|
||
if (res.success) {
|
||
if (res.result.records && res.result.records.length > 0){
|
||
this.textRight = res.result.records[0].item_content
|
||
} else {
|
||
this.textRight = ''
|
||
}
|
||
} else {
|
||
this.textRight = ''
|
||
}
|
||
this.loading = false
|
||
})
|
||
},
|
||
|
||
detailRight () {
|
||
|
||
},
|
||
getMenuLeft () {
|
||
getSplitMenusByInfo({ infoId: this.$route.query.infoIdLeft }).then((res) => {
|
||
if (res.success) {
|
||
this.menuLeft = res.result || []
|
||
} else {
|
||
this.menuLeft = []
|
||
}
|
||
})
|
||
},
|
||
getMenuRight () {
|
||
getSplitMenusByInfo({ infoId: this.$route.query.infoIdRight }).then((res) => {
|
||
if (res.success) {
|
||
this.menuRight = res.result || []
|
||
} else {
|
||
this.menuRight = []
|
||
}
|
||
})
|
||
},
|
||
comparisonClick () {
|
||
if (!this.leftData.id) {
|
||
this.$message.warning('请选择左侧条款')
|
||
} else if (!this.rightData.id) {
|
||
this.$message.warning('请选择右侧条款')
|
||
} else {
|
||
const query = {
|
||
oldItemId: this.leftData.id,
|
||
newItemId: this.rightData.id,
|
||
standHisId: this.$route.query.id
|
||
}
|
||
clauseComparisonEvent(query).then((res) => {
|
||
if (res.success) {
|
||
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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>
|