312 lines
8.4 KiB
Vue
312 lines
8.4 KiB
Vue
<template>
|
||
<j-modal
|
||
title="比对结果"
|
||
width="80%"
|
||
:visible="visible"
|
||
:confirm-loading="confirmLoading"
|
||
:maskClosable="false"
|
||
switchFullscreen
|
||
@cancel="cancel">
|
||
<template slot="footer">
|
||
<a-button @click="cancel">
|
||
关闭
|
||
</a-button>
|
||
</template>
|
||
<div class="can-scroll-content">
|
||
<div class="detail-content-top">
|
||
相似度：<span style="color: red">{{similarityDegree}}</span> <span>（{{textContent}}）</span>
|
||
</div>
|
||
<div class="detail-content">
|
||
<!--左边的文档-->
|
||
<div class="detail-content-left">
|
||
<!--左侧标准信息-->
|
||
<div class="detail-content-left-container">
|
||
<div class="detail-content-left-scroll">
|
||
<div class="detail-content-left-item">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<!--右侧文档-->
|
||
<div class="detail-content-right">
|
||
<!--右侧标准信息-->
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</j-modal>
|
||
</template>
|
||
|
||
<script>
|
||
import { postAction } from '@/api/manage'
|
||
export default {
|
||
name: 'viewDifferenceModal',
|
||
data () {
|
||
return {
|
||
confirmLoading: false,
|
||
visible: false,
|
||
textLeft: '',
|
||
textRight: '',
|
||
similarityDegree: '',
|
||
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 = '不相似'
|
||
} else if (parseFloat(item.similarityDegree) >= parseFloat('75%') && parseFloat(item.similarityDegree) !== parseFloat('100%')) {
|
||
this.textContent = '相似'
|
||
} else if (parseFloat(item.similarityDegree) === parseFloat('100%')) {
|
||
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)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.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;*/
|
||
}
|
||
|
||
.item-model {
|
||
width: calc(100% - 232px);
|
||
}
|
||
.detail-content-left-container {
|
||
height: calc(100vh - 300px);
|
||
width: 100%;
|
||
display: inline-block;
|
||
overflow-y: auto;
|
||
transition: all 1s;
|
||
border-radius: 4px;
|
||
scroll-behavior: smooth;
|
||
flex: 1;
|
||
}
|
||
|
||
.detail-content-right-container {
|
||
height: calc(100vh - 300px);
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
display: inline-block;
|
||
transition: all 1s;
|
||
scroll-behavior: smooth;
|
||
flex: 1;
|
||
|
||
.standard-name {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.detail-content-left-scroll {
|
||
width: calc(100% - 20px);
|
||
display: inline-block;
|
||
height: calc(100% - 10px);
|
||
margin: 0 10px 0 10px;
|
||
overflow: auto;
|
||
background-color: white;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.detail-content-right-scroll {
|
||
width: calc(100% - 10px);
|
||
display: inline-block;
|
||
height: calc(100% - 10px);
|
||
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;
|
||
position: relative;
|
||
}
|
||
|
||
.detail-content-right-item {
|
||
padding: 16px 20px;
|
||
box-sizing: border-box;
|
||
/*border: 1px solid #EFF1F3;*/
|
||
cursor: pointer;
|
||
background-color: white;
|
||
position: relative;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 3px;
|
||
}
|
||
|
||
.detail-content-top {
|
||
padding: 12px 24px;
|
||
box-sizing: border-box;
|
||
border-bottom: 2px solid #EFF1F3 ;
|
||
font-size: 16px;
|
||
}
|
||
.iconClass{
|
||
font-size: 18px;
|
||
}
|
||
.addRemarkBtn{
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
</style>
|