Files
laws_weilai/jero-web/src/views/documentManage/library/docDetail/index.vue
T
2022-11-04 13:45:27 +08:00

813 lines
27 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">-->
<!-- <a-icon type="home" style="margin-right: 6px;"/>-->
<!-- </span>-->
<a-tooltip placement="topLeft">
<template slot="title">
<span
v-html="serial_number"></span>
</template>
<span v-html="serial_number"></span>
<span> {{$t('StandardDetails')}}</span>
</a-tooltip>
</div>
<div class="doc-detail-right">
<div @click="UpdateLog" v-has="'bussLog:page'" class="operator-text-text" :title="$t('UpdateLog')">
<a-icon type="reload"/>
{{$t('UpdateLog')}}
</div>
<div @click="DocumentSplitting" v-has="'bussLog:splitting'" class="operator-text-text"
:title="$t('DocumentSplitting')">
<a-icon type="codepen"/>
{{$t('DocumentSplitting')}}
</div>
<!-- <div @click="DocumentTranslationClick" v-has="'bussLog:translation'" class="operator-text-text"-->
<!-- :title="$t('DocumentTranslation')">-->
<!-- <a-icon type="file-pdf"/>-->
<!-- {{$t('DocumentTranslation')}}-->
<!-- </div>-->
<div @click="DocumentComparisonClick" v-has="'bussLog:comparison'" class="operator-text-text"
:title="$t('DocumentComparison')">
<a-icon type="wallet"/>
{{$t('DocumentComparison')}}
</div>
<div @click="KnowledgeDatabaseClick" v-has="'bussLog:database'" class="operator-text-text"
:title="$t('problemKnowledgeBase')">
<a-icon type="folder"/>
{{$t('problemKnowledgeBase')}}
</div>
</div>
</div>
<div style="margin-top: 68px;background: #fff">
<div class="detail-content">
<div v-for="(item,index) in detailList" class="content-box">
<div v-for="val in Object.keys(item)" class="content">
<div class="header-text">
{{val}}
</div>
<div class="content-text" v-if="val == $t('essentialInformation')">
<div class="text-field" :class="{'text-content-button-one':ol.field_show_type == 8 ? true :false}"
v-for="(ol,index1) in item[val]">
<span class="text-field-left" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
<span class="text-field-right text-field-right-color" v-if="ol.urlClick" @click="urlClick(ol)"
:title="ol.value">{{ol.value ? ol.value : '--'}}</span>
<span class="text-field-right" v-else-if="ol.field_show_type == 7">
<a-button type="primary" class="button-text"
v-if="ol.value && ol.value.length > 0"
@click="clickButtonToUpload(ol.value)">
{{$t('viewUploadedFiles')}}
</a-button>
<span v-else>--</span>
</span>
<span @click="relatedClick(ol)" class="text-field-right text-field-right-color"
v-else-if="ol.field_show_type == 10" :title="ol.value">
{{ol.value ? ol.value : '--'}}
</span>
<span class="text-field-right" v-else :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
</div>
</div>
<div class="TextInformation" v-else-if="val == $t('textInformation')">
<table class="tableInformation">
<tr v-for="(ol,index1) in item[val]" class="trInformation">
<td class="tdInformation LeftTdInformation" :rowspan="ol.count"
v-if=" index1 == 0 || (index1 > 0 && ol.db_field_txt != item[val][index1 - 1].db_field_txt)">
{{ol.db_field_txt}}
</td>
<td class="tdInformation conteTdInformation" v-if="ol.field_show_type==='7'">
<span class="leftconteTdInformation" style="cursor: pointer"
:title="ol.value ? ol.value.fileName:''"
@click="pdfPreview(ol.value)">
{{ol.value ? ol.value.fileName : '--'}}
</span>
<span class="Standard-breakdown" v-if="ol.splitFlag == 1" @click="breakdown(ol)">{{$t('StandardBreakdown')}}</span>
<span class="rightTdInformation" v-if="ol.field_show_type==='7'" v-show="ol.value"
@click="download(ol.value)">
<a-icon type="vertical-align-bottom"/>
{{$t('download')}}
</span>
</td>
<td class="tdInformation TextInformationContentcontentButton" v-else-if="ol.field_show_type==='10'">
<span style="cursor: pointer" @click="relatedClick(ol)" v-if="ol.value"
:title="ol.value">{{ol.value}}</span>
<span style="cursor: pointer" v-else>--</span>
</td>
<td class="tdInformation TextInformationContentcontent" v-else>
<span v-if="ol.urlClick" @click="urlClick(ol)"
class="text-field-right-color"
:title="ol.value">{{ol.value ? ol.value : '--'}}</span>
<span :title="ol.value" v-else>{{ol.value ? ol.value:'--'}}</span>
</td>
</tr>
</table>
</div>
<div class="TextInformation" v-else-if="val == $t('relatedInformation')">
<table class="tableInformation">
<tr v-for="(ol,index1) in item[val]" class="trInformation">
<td class="tdInformation LeftTdInformation" :rowspan="ol.count"
v-if=" index1 == 0 || (index1 > 0 && ol.db_field_txt != item[val][index1 - 1].db_field_txt)">
{{ol.db_field_txt}}
</td>
<td class="tdInformation conteTdInformation" v-if="ol.field_show_type==='7'">
<span class="leftconteTdInformation" style="cursor: pointer"
:title="ol.value ? ol.value.fileName:''"
@click="pdfPreview(ol.value)">
{{ol.value ? ol.value.fileName : '--'}}
</span>
<span class="Standard-breakdown" v-if="ol.splitFlag == 1" @click="breakdown(ol)">{{$t('StandardBreakdown')}}</span>
<span class="rightTdInformation" v-if="ol.field_show_type==='7'" v-show="ol.value"
@click="download(ol.value)">
<a-icon type="vertical-align-bottom"/>
{{$t('download')}}
</span>
</td>
<td class="tdInformation TextInformationContentcontentButton" v-else-if="ol.field_show_type==='10'">
<span style="cursor: pointer" @click="relatedClick(ol)" v-if="ol.value"
:title="ol.value">{{ol.value}}</span>
<span style="cursor: pointer" v-else>--</span>
</td>
<td class="tdInformation TextInformationContentcontent" v-else>
<span v-if="ol.urlClick" @click="urlClick(ol)"
class="text-field-right-color"
:title="ol.value">{{ol.value ? ol.value : '--'}}</span>
<span :title="ol.value" v-else>{{ol.value ? ol.value:'--'}}</span>
</td>
</tr>
</table>
</div>
<div class="content-text" v-else>
<div class="text-field" :class="{'text-content-button-one':ol.field_show_type == 8 ? true :false}"
v-for="(ol,index1) in item[val]">
<span class="text-field-left" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
<span class="text-field-right text-field-right-color" v-if="ol.urlClick" @click="urlClick(ol)"
:title="ol.value">{{ol.value ? ol.value : '--'}}</span>
<span class="text-field-right" v-else-if="ol.field_show_type == 7">
<a-button type="primary" class="button-text"
v-if="ol.value && ol.value.length > 0"
@click="clickButtonToUpload(ol.value)">
{{$t('viewUploadedFiles')}}
</a-button>
<span v-else>--</span>
</span>
<span @click="relatedClick(ol)" class="text-field-right text-field-right-color"
v-else-if="ol.field_show_type == 10" :title="ol.value">
{{ol.value ? ol.value : '--'}}
</span>
<span class="text-field-right" v-else :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a-modal
:title="$t('UpdateLog')"
:width="900"
:visible="visible"
:confirm-loading="confirmLoading"
:maskClosable="false"
@ok="handleOk"
@cancel="handleCancel"
>
<a-table
class="table"
:columns="columns"
:pagination="false"
:scroll="{y: 400}"
:data-source="dataSource"
:loading="loading"
>
<span slot="content" slot-scope="text,record">
<a-tooltip placement="topLeft">
<template slot="title">
<span v-html="text"></span>
</template>
<span v-html="text"></span>
</a-tooltip>
</span>
</a-table>
<div class="page" v-if="dataSource.length > 0">
<a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize "
:total="total"
:current="pageNo"
@change="onChange"
@showSizeChange="SizeChange"
/>
</div>
</a-modal>
<a-modal
:title="'标准'"
:width="600"
:visible="visibleRelated"
:maskClosable="false"
@ok="visibleRelated = false"
@cancel="visibleRelated = false"
>
<a-table
class="table"
:columns="columnsRelated"
:pagination="false"
:scroll="{y: 400}"
:data-source="dataSourceRelated"
:loading="loading"
>
<span slot="operation" slot-scope="text,record">
<a class="text" :title="text" @click="detailClick(record)">
{{text && text.length > 18?text.slice(0,17)+'...':text}}
</a>
</span>
</a-table>
</a-modal>
<a-modal
:title="'查看文件'"
:width="600"
:visible="visibleFile"
:maskClosable="false"
@cancel="visibleFile = false"
>
<template slot="footer">
<a-button key="back" @click="visibleFile = false">
{{$t('cancel')}}
</a-button>
</template>
<a-table
class="table"
:columns="columnsFile"
:pagination="false"
:scroll="{x:500,y: 400}"
:data-source="dataSourceFile"
:loading="loading"
>
<span slot="fileOperation" slot-scope="record">
<a class="text" @click="pdfPreview(record)"
:disabled="record.fileSuffix == '.pdf' || record.fileSuffix == '.docx' || record.fileSuffix == '.doc'
|| record.fileSuffix == '.jpg' || record.fileSuffix == '.png' || record.fileSuffix == '.gif'|| record.fileSuffix == '.jpeg'
|| record.fileSuffix == '.xlsx' || record.fileSuffix == '.xls' ? false : true">
{{$t('See')}}
</a>
<a class="text" @click="download(record)">
{{$t('download')}}
</a>
<a class="text" @click="breakdown(record)" v-if="record.splitFlag == 1">
{{$t('StandardBreakdown')}}
</a>
</span>
</a-table>
</a-modal>
<JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
<uploadFile ref="uploadFile" :isUploadFile="true" :disabled="true"></uploadFile>
</div>
</template>
<script>
import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
import { Base64 } from 'js-base64'
import uploadFile from '@/components/uploadFile/file'
import { mapGetters } from 'vuex'
export default {
name: 'docIndex',
components: {
uploadFile
},
data() {
return {
url: {
getInfo: 'document/bussDocumentLibraryEO/getInfoById',
list: 'log/bussLogEO/page',
getTitle: '/document/bussDocumentLibraryEO/getTitle'
},
titleHeader: '',
visibleFile: false,
loading: false,
columnsRelated: [
{
title: this.$t('standardName'),
dataIndex: 'title',
align: 'center',
ellipsis: true,
scopedSlots: { customRender: 'operation' }
}
],
columnsFile: [
{
title: this.$t('fileName'),
dataIndex: 'fileName',
align: 'center',
width: 260,
ellipsis: true
},
{
title: this.$t('operation'),
align: 'center',
width: 130,
scopedSlots: { customRender: 'fileOperation' }
}
],
dataSourceRelated: [],
detailList: [],
visible: false,
serial_number: '',
confirmLoading: false,
downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
downLoadImgUrl: window._CONFIG['domianWebImgURL'] + '/sys/common/download',
loading: false,
dataSource: [],
pageNo: 1,
pageSize: 10,
total: 0,
visibleRelated: false,
dataSourceFile: [],
columns: [
{
title: this.$t('ModificationContent'),
dataIndex: 'content',
align: 'center',
ellipsis: true,
scopedSlots: { customRender: 'content' }
},
{
title: this.$t('ModificationTime'),
dataIndex: 'createTime',
align: 'center',
ellipsis: true,
width: 180
},
{
title: this.$t('personnel'),
dataIndex: 'createBy',
align: 'center',
ellipsis: true,
width: 180
}
]
}
},
created() {
let _this = this
this.loading = true
document.title = this.$t('documentLibraryDetails')
this.getTitle(function() {
_this.getInfoById()
})
},
methods: {
...mapGetters(['userInfo']),
DocumentTranslationClick() {
let serial_number = ''
if (this.detailList.length > 0) {
this.detailList[0][this.$t('essentialInformation')].forEach(res => {
if (res.db_field_name == 'serial_number') {
serial_number = res.value
}
})
}
let newUrl = this.$router.resolve({
path: '/documentTranslation',
query: {
serial_number: serial_number
}
})
window.open(newUrl.href, '_blank')
},
DocumentComparisonClick() {
let serial_number = ''
if (this.detailList.length > 0) {
this.detailList[0][this.$t('essentialInformation')].forEach(res => {
if (res.db_field_name == 'serial_number') {
serial_number = res.value
}
})
}
let newUrl = this.$router.resolve({
path: '/documentComparison',
query: {
serial_number: serial_number
}
})
window.open(newUrl.href, '_blank')
},
KnowledgeDatabaseClick() {
let serial_number = ''
if (this.detailList.length > 0) {
this.detailList[0][this.$t('essentialInformation')].forEach(res => {
if (res.db_field_name == 'serial_number') {
serial_number = res.value
}
})
}
// localStorage.setItem('serial_number',serial_number)
let newUrl = this.$router.resolve({
path: '/problemknowledgeBase',
query: {
serial_number: serial_number
}
})
window.open(newUrl.href, '_blank')
},
getTitle(callback) {
let _id = this.$route.query.documentId === undefined ? this.$route.query.id : this.$route.query.documentId
getAction(this.url.getTitle, { id: _id }).then((res) => {
if (res.success) {
this.serial_number = res.result
callback && callback()
} else {
this.serial_number = ''
}
})
},
getInfoById() {
let _id = this.$route.query.documentId === undefined ? this.$route.query.id : this.$route.query.documentId
getAction(this.url.getInfo, { id: _id }).then((res) => {
if (res.success) {
this.detailList = res.result
this.loading = false
} else {
this.detailList = []
}
})
},
clickButtonToUpload(item) {
this.loading = true
this.visibleFile = true
getAction('document/bussDocumentLibraryEO/getFileInfos', { id: item.join(',') }).then((res) => {
if (res.success) {
this.dataSourceFile = res.result
this.dataSourceFile.forEach((val) => {
let fileName = val.fileName
let index1 = fileName.lastIndexOf('.')
let index2 = fileName.length
let fileSuffix = fileName.substring(index1, index2)
val.fileSuffix = fileSuffix
})
this.loading = false
} else {
this.dataSourceFile = []
this.loading = false
}
})
},
pdfPreview(fileQuery) {
let fileName = fileQuery.fileName
let index1 = fileName.lastIndexOf('.')
let index2 = fileName.length
let fileSuffix = fileName.substring(index1, index2)
if (fileSuffix == '.pdf') {
window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id + '&userName=' + this.userInfo().username))
} else if (fileSuffix == '.docx' || fileSuffix == '.doc') {
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
window.open(url, '_blank')
} else if (fileSuffix == '.xlsx' || fileSuffix == '.xls') {
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
window.open(url, '_blank')
} else if (fileSuffix == '.png' || fileSuffix == '.jpeg' || fileSuffix == '.gif' || fileSuffix == '.jpg') {
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadImgUrl + '/' + fileQuery.id + fileSuffix)
window.open(url, '_blank')
} else {
downloadFile('/sys/common/downLoadFile', fileQuery.fileName, { id: fileQuery.id })
}
},
download(item) {
downloadFile('/sys/common/downLoadFile', item.fileName, { id: item.id, userName: this.userInfo().username })
},
UpdateLog() {
this.visible = true
this.bussLogList()
},
handleOk() {
this.visible = false
},
handleCancel() {
this.visible = false
},
urlClick(item) {
window.open(item.value)
},
bussLogList() {
let query = {
pageNo: this.pageNo,
pageSize: this.pageSize,
documentId: this.$route.query.id
}
this.loading = true
getAction(this.url.list, query).then((res) => {
if (res.success) {
this.dataSource = res.result.records
this.total = res.result.total
this.loading = false
} else {
this.loading = false
}
})
},
onChange(page, pageSize) {
this.pageNo = page
this.bussLogList()
},
SizeChange(page, pageSize) {
this.pageNo = 1
this.pageSize = pageSize
this.bussLogList()
},
DocumentSplitting() {
let serial_number = ''
if (this.detailList.length > 0) {
this.detailList[0][this.$t('essentialInformation')].forEach(res => {
if (res.db_field_name == 'serial_number') {
serial_number = res.value
}
})
}
let newUrl = this.$router.resolve({
path: '/docManage/splite',
query: {
serial_number: serial_number
}
})
window.open(newUrl.href, '_blank')
},
detailClick(val) {
let newUrl = this.$router.resolve({
path: '/docManage/library/detail',
query: val
})
this.visibleRelated = false
window.open(newUrl.href, '_blank')
},
relatedClick(val) {
if (val.list && val.list.length == 1) {
let newUrl = this.$router.resolve({
path: '/docManage/library/detail',
query: val.list[0]
})
window.open(newUrl.href, '_blank')
} else {
this.visibleRelated = true
this.dataSourceRelated = val.list
}
},
breakdown(item) {
let newUrl = this.$router.resolve({
path: '/docManage/splitting/splitDetail',
query: {
infoId: item.splitInfoId
}
})
window.open(newUrl.href, '_blank')
}
}
}
</script>
<style>
.highlight-class {
color: #00B3BE;
}
.uploadFile .ant-upload {
display: none !important;
}
</style>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.doc-detail {
background: #fff;
height: 100%;
.doc-detail-wrap {
.doc-detail-header {
width: 100%;
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;
}
.doc-detail-right {
/*width: 800px;*/
line-height: 68px;
display: flex;
.doc-detail-btn {
margin-left: 10px;
}
}
}
.content-box {
padding: 0 32px;
box-sizing: border-box;
}
.header-text {
font-size: 16px;
font-weight: 400;
height: 80px;
color: #000F16;
line-height: 80px;
}
.content-text {
width: 100%;
display: flex;
flex-wrap: wrap;
.text-field {
width: 33%;
margin-bottom: 8px;
.text-field-left {
width: 124px;
display: inline-block;
font-size: 14px;
font-weight: 400;
color: #6F7385;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 24px;
}
.text-field-right {
width: calc(100% - 200px);
display: inline-block;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-break: break-word;
color: #040B29;
font-weight: 400;
}
}
.text-content-button-one {
width: 100%;
.text-field-left {
width: 124px;
display: inline-block;
font-size: 14px;
font-weight: 400;
color: #6F7385;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 24px;
float: left;
margin-top: 3px;
}
.text-field-right {
width: calc(100% - 200px);
display: inline-block;
font-size: 16px;
text-overflow: ellipsis;
white-space: pre-wrap;
word-break: break-word;
overflow: visible;
float: left;
color: #040B29;
font-weight: 400;
}
}
}
}
}
.page {
text-align: right;
margin-top: 20px;
}
.operator-text-text {
cursor: pointer;
margin-right: 53px;
font-size: 14px;
font-weight: 400;
color: #040B29;
display: inline-block;
width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: right;
}
.content-box:last-child {
margin-bottom: 20px;
}
.tableInformation {
width: 100%;
height: auto;
}
.trInformation {
height: 56px;
}
.tdInformation {
border: 1px #eff1f3 solid;
text-align: center;
}
.LeftTdInformation {
width: 268px;
background: #f7f7f8;
color: #040B29;
font-weight: bold;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.conteTdInformation {
color: #01A0AC;
font-size: 14px;
font-weight: 400;
}
.leftconteTdInformation {
width: calc(100% - 388px);
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.rightTdInformation {
width: 120px;
cursor: pointer;
color: #00B3BE;
font-size: 14px;
font-weight: 400;
text-align: right;
padding: 0 20px 0 0;
box-sizing: border-box;
display: inline-block;
position: absolute;
right: 30px;
}
.Standard-breakdown {
display: inline-block;
position: absolute;
right: 153px;
margin-top: 1px;
cursor: pointer;
}
.TextInformationContentcontentButton {
width: calc(100% - 268px);
text-align: center;
color: #01A0AC;
font-size: 14px;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.TextInformationContentcontent {
width: calc(100% - 268px);
text-align: center;
color: #040B29;
font-size: 14px;
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.text-field-right-color {
color: #00B3BE !important;
cursor: pointer;
}
</style>