491 lines
14 KiB
Java
491 lines
14 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"
|
|
:title="this.$route.query.serial_number + ' 《'+this.$route.query.title + ' 》'+$t('StandardDetails')">
|
|
<span style="line-height: 66px;display: inline-block;float: left">
|
|
<a-icon type="home" style="margin-right: 6px;"/>
|
|
</span>
|
|
<span>{{this.$route.query.serial_number}}</span>
|
|
<span>《{{this.$route.query.title}}》 </span>
|
|
<span> {{$t('StandardDetails')}}</span>
|
|
</div>
|
|
<div class="doc-detail-right">
|
|
<div @click="UpdateLog" class="operator-text-text" :title="$t('UpdateLog')">
|
|
<a-icon type="reload"/>
|
|
{{$t('UpdateLog')}}
|
|
</div>
|
|
<div @click="DocumentSplitting" class="operator-text-text" :title="$t('DocumentSplitting')">
|
|
<a-icon type="codepen"/>
|
|
{{$t('DocumentSplitting')}}
|
|
</div>
|
|
<div @click="UpdateLog" class="operator-text-text" :title="$t('DocumentTranslation')">
|
|
<a-icon type="file-pdf"/>
|
|
{{$t('DocumentTranslation')}}
|
|
</div>
|
|
<div @click="UpdateLog" class="operator-text-text" :title="$t('DocumentComparison')">
|
|
<a-icon type="wallet"/>
|
|
{{$t('DocumentComparison')}}
|
|
</div>
|
|
<div @click="UpdateLog" class="operator-text-text" :title="$t('KnowledgeDatabase')">
|
|
<a-icon type="folder"/>
|
|
{{$t('KnowledgeDatabase')}}
|
|
</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" 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" :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="TextInformation" v-if="val == $t('textInformation')">
|
|
<div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
|
|
<span class="TextInformationContentLeft">
|
|
<span :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
|
|
</span>
|
|
<span style="margin-top: 2px">
|
|
<span class="TextInformationContentcontent">
|
|
<span style="cursor: pointer" :title="ol.value ? ol.value.fileName:''"
|
|
@click="pdfPreview(ol.value)">
|
|
{{ol.value ? ol.value.fileName : '--'}}
|
|
</span>
|
|
</span>
|
|
<span class="TextInformationContentright">
|
|
<span v-show="ol.value" @click="download(ol.value)">
|
|
<a-icon type="vertical-align-bottom"/>
|
|
{{$t('download')}}
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="TextInformation" v-else-if="val == $t('relatedInformation')">
|
|
<div class="TextInformationContent" v-for="(ol,index1) in item[val]" style="width: 100%">
|
|
<span class="TextInformationContentLeft">
|
|
<span :title="ol.db_field_txt"
|
|
>{{ol.db_field_txt}}</span>
|
|
</span>
|
|
<span class="TextInformationContentcontentButton">
|
|
<span style="cursor: pointer" @click="relatedClick(ol)"
|
|
:title="ol.value">{{ol.value ? ol.value : '--'}}</span>
|
|
</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"
|
|
>
|
|
</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"
|
|
@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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
|
|
|
|
export default {
|
|
name: 'docIndex',
|
|
data() {
|
|
return {
|
|
url: {
|
|
getInfo: 'document/bussDocumentLibraryEO/getInfoById',
|
|
list: 'log/bussLogEO/page'
|
|
},
|
|
columnsRelated: [
|
|
{
|
|
title: '标准名称',
|
|
dataIndex: 'title',
|
|
align: 'center',
|
|
ellipsis: true,
|
|
scopedSlots: { customRender: 'operation' }
|
|
}
|
|
],
|
|
dataSourceRelated: [],
|
|
detailList: [],
|
|
visible: false,
|
|
confirmLoading: false,
|
|
loading: false,
|
|
dataSource: [],
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
visibleRelated: false,
|
|
columns: [
|
|
{
|
|
title: this.$t('ModificationContent'),
|
|
dataIndex: 'content',
|
|
align: 'center',
|
|
ellipsis: true
|
|
},
|
|
{
|
|
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() {
|
|
this.getInfoById()
|
|
},
|
|
methods: {
|
|
getInfoById() {
|
|
getAction(this.url.getInfo, { id: this.$route.query.id }).then((res) => {
|
|
if (res.success) {
|
|
this.detailList = res.result
|
|
} else {
|
|
this.detailList = []
|
|
}
|
|
})
|
|
},
|
|
pdfPreview(fileQuery) {
|
|
console.log(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))
|
|
} else if (fileSuffix == '.docx') {
|
|
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + fileQuery.id)
|
|
window.open(url, '_blank')
|
|
} else if (fileSuffix == '.xlsx' || fileSuffix == '.xls') {
|
|
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + fileQuery.id)
|
|
window.open(url, '_blank')
|
|
} else {
|
|
downloadFile('/sys/common/download', fileQuery.fileName, { id: fileQuery.id })
|
|
}
|
|
},
|
|
download(item) {
|
|
downloadFile('/sys/common/download', item.fileName, { id: item.id })
|
|
},
|
|
UpdateLog() {
|
|
this.visible = true
|
|
this.bussLogList()
|
|
},
|
|
handleOk() {
|
|
this.visible = false
|
|
},
|
|
handleCancel() {
|
|
this.visible = false
|
|
},
|
|
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() {
|
|
this.$router.push({
|
|
path: '/docManage/splite',
|
|
query: {
|
|
serial_number: this.$route.query.serial_number
|
|
}
|
|
})
|
|
},
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<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;
|
|
color: #040B29;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.TextInformation {
|
|
height: auto;
|
|
|
|
.TextInformationContent {
|
|
height: 56px;
|
|
|
|
.TextInformationContentLeft {
|
|
width: 268px;
|
|
height: 56px;
|
|
float: left;
|
|
border-top: 1px #eff1f3 solid;
|
|
border-left: 1px #eff1f3 solid;
|
|
display: inline-block;
|
|
background: #f7f7f8;
|
|
text-align: center;
|
|
color: #040B29;
|
|
line-height: 56px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.TextInformationContentcontent {
|
|
width: calc(100% - 388px);
|
|
float: left;
|
|
height: 56px;
|
|
border-top: 1px #eff1f3 solid;
|
|
border-left: 1px #eff1f3 solid;
|
|
line-height: 56px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
color: #01A0AC;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.TextInformationContentright {
|
|
width: 120px;
|
|
height: 56px;
|
|
cursor: pointer;
|
|
float: left;
|
|
display: inline-block;
|
|
border-right: 1px #eff1f3 solid;
|
|
border-top: 1px #eff1f3 solid;
|
|
line-height: 56px;
|
|
color: #00B3BE;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
padding: 0 20px 0 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.TextInformationContentcontentButton {
|
|
width: calc(100% - 268px);
|
|
border-top: 1px #eff1f3 solid;
|
|
border-left: 1px #eff1f3 solid;
|
|
border-right: 1px #eff1f3 solid;
|
|
line-height: 56px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
color: #00B3BE;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.TextInformationContent:last-child {
|
|
border-bottom: 1px #eff1f3 solid;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 20%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
}
|
|
|
|
.content-box:last-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |