Files
laws_weilai/jero-web/src/views/documentTools/documentComparison/components/documentDataComparison.vue
T
2022-10-12 13:40:05 +08:00

746 lines
25 KiB
Java

<template>
<div class="doc-detail">
<div class="doc-detail-wrap">
<div class="doc-detail-header" style="position: fixed;top: 0">
<div class="doc-detail-title">
<span style="line-height: 66px;display: inline-block;float: left" @click="Fallback">
<a-icon type="arrow-left" style="margin-right: 6px;"/>
</span>
<span> {{$t('DocumentComparison')}}</span>
</div>
<div class="doc-detail-right">
<div @click="viewTheComparisonResultsClick" class="operator-text-text"
:title="$t('viewTheComparisonResults')">
<a-icon type="eye"/>
{{$t('viewTheComparisonResults')}}
</div>
<div @click="addFullTextCommentClick" class="operator-text-text"
:title="$t('addFullTextComment')">
<a-icon type="message"/>
{{$t('addFullTextComment')}}
</div>
<div @click="turnOffAutomaticMatchingClick" class="operator-text-text"
:title="isMatching ? $t('turnOffAutomaticMatching'):$t('turnOnAutoMatch')">
<a-icon :type="isMatching?'close-circle':'check-circle'"/>
{{isMatching ? $t('turnOffAutomaticMatching'):$t('turnOnAutoMatch')}}
</div>
</div>
</div>
<div style="padding-top: 68px;background: #fff">
<div class="detail-content" style="padding-bottom: 20px">
<div style="width: 100%;height: auto;overflow: hidden">
<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"
:class="{'detail-content-content-right-data-blue':item.reviewed == '1'?true:false}">
<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>
<JLoading :loading="loadingText">{{$t('dataLoading')}}</JLoading>
</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"
:class="{'detail-content-content-right-data-blue-right':item.reviewed == '1'?true:false}">
<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('comparativeComments')">
<span>{{$t('comparativeComments')}}</span>
</div>
<a-form-model-item class="itemModel" prop="comment">
<a-textarea :placeholder="$t('pleaseEnter')+$t('comparativeComments')"
v-model="formInline.comment"
:rows="3"/>
</a-form-model-item>
</div>
</a-form-model>
</div>
<div class="submit-button">
<a-button class="box-button" style="margin-right: 10px"
type="primary" @click="consistentAssessmentClick()">{{$t('consistentAssessment')}}
</a-button>
<a-button class="box-button" type="primary" @click="submit()">{{$t('preservation')}}</a-button>
</div>
</div>
</div>
</div>
<a-modal
:title="$t('fullTextComments')"
:width="600"
:visible="visible"
:confirm-loading="confirmLoading"
:maskClosable="false"
@cancel="visible = false"
>
<template slot="footer">
<!-- <a-button type="primary" @click="fullTextCommentsEdit">-->
<!-- {{$t('edit')}}-->
<!-- </a-button>-->
<a-button type="primary" :loading="confirmLoading" @click="fullTextCommentsSubmit">
{{$t('submit')}}
</a-button>
</template>
<a-form-model :model="formInlineText" class="formAdd" :rules="rulesText" ref="ruleFormText">
<div class="box-title-text-Remarks">
<div class="title-text-Remarks" :title="$t('fullTextComments')">
<span>{{$t('fullTextComments')}}</span>
</div>
<a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="comment">
<a-textarea :placeholder="$t('pleaseEnter')+$t('fullTextComments')"
v-model.trim="formInlineText.comment"
:rows="4"/>
</a-form-model-item>
</div>
</a-form-model>
<JLoading :loading="textDataLoading">{{$t('dataLoading')}}</JLoading>
</a-modal>
<JLoading :loading="loading">{{dataLoadingText}}</JLoading>
</div>
</template>
<script>
import { postAction, putAction, getAction } from '../../../../api/manage'
export default {
name: 'documentDataComparison',
data() {
return {
formInline: {},
formInlineText: {},
dataLoadingText: '',
loadingText: false,
rules: {
comment: [
{
max: 500,
message: this.$t('comparativeComments') + this.$t('cannotExceed') + 500 + this.$t('Characters'),
trigger: 'blur'
}
]
},
rulesText: {
comment: [
{
max: 500,
message: this.$t('fullTextComments') + this.$t('cannotExceed') + 500 + this.$t('Characters'),
trigger: 'blur'
}
]
},
loading: false,
textDataLoading: false,
visible: false,
confirmLoading: false,
fullTextDisabled: false,
resultData: {},
isMatching: true,
dataLeft: {},
dataRight: {}
}
},
mounted() {
this.getData()
document.title = this.$t('DocumentComparison') + ' - ' + this.$t('edit')
},
methods: {
Fallback() {
this.$router.push({
path: '/documentComparison'
})
},
consistentAssessmentClick() {
if (!this.dataLeft.id && !this.dataRight.id) {
this.$message.warning(this.$t('pleaseSelectTheDataCompared'))
return
}
let query = {
itemsIdLeft: this.dataLeft.id,
itemsIdRight: this.dataRight.id,
infoId: this.$route.query.id,
comment: '一致'
}
this.dataLoadingText = this.$t('pleaseWaitWhileRunning')
this.loading = true
postAction('/compare/sarFileCompareItemComment/add', query).then((res) => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'))
this.loading = false
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 }
let detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
if (detailLeftColor && detailLeftColor.length > 0) {
detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
}
let 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.loading = false
}
})
},
submit() {
if (!this.dataLeft.id && !this.dataRight.id) {
this.$message.warning(this.$t('pleaseSelectTheDataCompared'))
return
}
this.$refs.ruleForm.validate(valid => {
if (valid) {
let query = {
itemsIdLeft: this.dataLeft.id,
itemsIdRight: this.dataRight.id,
infoId: this.$route.query.id,
comment: this.formInline.comment
}
this.dataLoadingText = this.$t('pleaseWaitWhileRunning')
this.loading = true
postAction('/compare/sarFileCompareItemComment/add', query).then((res) => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'))
this.loading = false
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 }
let detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
if (detailLeftColor && detailLeftColor.length > 0) {
detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
}
let 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.loading = false
}
})
}
})
},
viewTheComparisonResultsClick() {
let newUrl = this.$router.resolve({
path: '/comparisonResults',
query: {
id: this.$route.query.id,
isDisplay: 2
}
})
window.open(newUrl.href, '_blank')
},
addFullTextCommentClick() {
this.visible = true
let query = {
id: this.$route.query.id
}
this.textDataLoading = true
postAction('/compare/sarFileCompareInfo/getComparisonDetail', query).then((res) => {
if (res.success) {
this.formInlineText.comment = res.result.comments || ''
this.formInlineText = { ...this.formInlineText }
this.textDataLoading = false
} else {
this.textDataLoading = false
}
})
// if (this.formInlineText.comment) {
// this.fullTextDisabled = true
// } else {
// this.fullTextDisabled = false
// }
},
turnOffAutomaticMatchingClick() {
this.isMatching = !this.isMatching
this.$message.success(this.$t('OperationSuccessful'))
},
fullTextCommentsEdit() {
this.fullTextDisabled = false
},
fullTextCommentsSubmit() {
this.$refs.ruleFormText.validate(valid => {
if (valid) {
let formInlineText = JSON.parse(JSON.stringify(this.formInlineText))
this.confirmLoading = true
let query = {
id: this.$route.query.id,
comments: formInlineText.comment
}
putAction('/compare/sarFileCompareInfo/editComments', query).then((res) => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'))
this.confirmLoading = false
this.visible = false
} else {
this.$message.warning(this.$t('operationFailed'))
this.confirmLoading = false
}
})
}
})
},
getData() {
let query = {
id: this.$route.query.id
}
this.dataLoadingText = this.$t('dataLoading')
this.loading = true
postAction('/compare/sarFileCompareInfo/getComparisonDetail', query).then((res) => {
if (res.success) {
this.resultData = res.result || {}
this.formInlineText.comment = res.result.comments || ''
this.formInlineText = { ...this.formInlineText }
this.loading = false
} else {
this.resultData = {}
this.loading = false
}
})
},
detailLeft(num, item) {
let 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
}
let 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) {
let 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) {
let detailContent = document.getElementsByClassName('detail-content-content-right-right-top')
let 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) {
let 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
}
let 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) {
let 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
let detailContent = document.getElementsByClassName('detail-content-content-right-top')
let 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()
// this.resultData = { ...this.resultData }
}
}
},
clauseComparison() {
let 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) {
let node = exports.node.$vnode.data.props.dataRef
let detailLeft = document.getElementsByClassName('detail-content-content-right-data')
let 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) {
let node = exports.node.$vnode.data.props.dataRef
let detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
let 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>
.detail-content-content-left .ant-tree-node-content-wrapper {
display: inline-block !important;
color: #040B29 !important;
width: 130px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.doc-detail {
background: #fff;
height: 100%;
.doc-detail-wrap {
.doc-detail-header {
width: 100%;
z-index: 1000;
height: 68px;
line-height: 68px;
padding: 0 0 0 32px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
border-bottom: 2px #eff1f3 solid;
background: #fff;
.doc-detail-title {
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 20px;
font-weight: 400;
color: #040B29;
line-height: 68px;
}
}
}
}
.detail-content-left {
width: 50%;
float: left;
height: calc(100vh - 210px);
border-right: 2px #EFF1F3 solid;
padding: 24px 32px;
box-sizing: border-box;
border-bottom: 2px #EFF1F3 solid;
}
.detail-content-right {
width: 50%;
height: calc(100vh - 210px);
float: left;
padding: 24px 32px;
box-sizing: border-box;
border-bottom: 2px #EFF1F3 solid;
}
.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;
}
.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 {
display: inline-block;
width: 50%;
margin-top: 20px;
text-align: right;
padding: 0 32px;
box-sizing: border-box;
margin-bottom: 20px;
}
.detail-content-content-left {
width: 180px;
height: 520px;
float: left;
overflow: auto;
}
.detail-content-content-right-top {
height: 520px;
overflow-y: auto;
transition: all 1s;
scroll-behavior: smooth;
}
.detail-content-content-right-right-top {
height: 520px;
overflow-y: auto;
transition: all 1s;
scroll-behavior: smooth;
}
.detail-content-content-right {
width: 100%;
display: inline-block;
}
.detail-content-content-right-right {
width: 100%;
display: inline-block;
}
.detail-content-content-right-data {
padding: 22px 24px;
box-sizing: border-box;
border: 1px solid #EFF1F3;
border-radius: 4px;
margin-bottom: 22px;
cursor: pointer;
}
.detail-content-content-right-data-right {
padding: 22px 24px;
box-sizing: border-box;
border: 1px solid #EFF1F3;
border-radius: 4px;
margin-bottom: 22px;
cursor: pointer;
}
.detail-content-content-right-data:last-child {
margin-bottom: 0;
}
.detail-content-content-right-data-text {
font-size: 16px;
font-weight: 400;
color: #040B29;
word-break: break-word;
}
.detail-content-left-header-text {
width: 100%;
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-left-header-text-right {
text-align: right;
display: inline-block;
width: 200px;
float: right;
}
.doc-detail-right {
width: 600px;
line-height: 68px;
display: flex;
.doc-detail-btn {
margin-left: 10px;
}
}
.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-content-right-data-blue {
border: 1px #21c9cc solid;
}
.detail-content-content-right-data-blue-right {
border: 1px #21c9cc solid;
}
.detail-content-content-right-data-color {
border: 1px red solid;
}
.detail-content-content-right-data-color-right {
border: 1px red solid;
}
::v-deep .delClass {
background: #ff7168;
font-weight: 700;
}
::v-deep .insertClass {
background: rgba(85, 183, 255, .6);
font-weight: 700;
}
</style>