You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
312 lines
10 KiB
312 lines
10 KiB
<template>
|
|
<el-dialog class="detail-dialog" title="详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose">
|
|
<!-- <span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" /> -->
|
|
<div class="setting-dialog">
|
|
<div class="detail-tab tab-content">
|
|
<!-- tab -->
|
|
<ul class="tab-nav">
|
|
<li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
|
|
<li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">电子原件</li>
|
|
<li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
|
|
</ul>
|
|
<!-- 基本信息 -->
|
|
<div v-if="archivesTabIndex===0" class="base-info item-content">
|
|
<el-row>
|
|
<el-col v-for="(item,index) in archivesDetailsData" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item">
|
|
<span>{{ item.fieldCnName }}：</span>
|
|
<p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<!-- 电子原件 -->
|
|
<div v-if="archivesTabIndex===1" class="item-content">
|
|
<el-table
|
|
ref="table"
|
|
:data="tableData"
|
|
style="min-width: 100%"
|
|
height="calc(100vh - 382px)"
|
|
@row-click="clickRowHandler"
|
|
@selection-change="selectionChangeHandler"
|
|
>
|
|
<el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" align="center" />
|
|
<el-table-column prop="file_type" label="格式" min-width="60" align="center" />
|
|
<el-table-column prop="file_size" label="大小" min-width="85" align="center">
|
|
<template slot-scope="scope">
|
|
{{ getFileSize(scope.row.file_size) }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center">
|
|
<template slot-scope="scope">
|
|
<div v-if="!scope.row.file_dpi || scope.row.file_dpi === 'null'"> - </div>
|
|
<div v-else> {{ scope.row.file_dpi }} </div>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column prop="file_thumbnail" label="缩略图" min-width="60" align="center">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'">
|
|
<i class="fileIcon icon-image" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'xlsx' || scope.row.file_type === 'xls'">
|
|
<i class="fileIcon icon-excel" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'docx' || scope.row.file_type === 'doc'">
|
|
<i class="fileIcon icon-word" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'pdf'">
|
|
<i class="fileIcon icon-pdf" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'ppt' || scope.row.file_type === 'pptx'">
|
|
<i class="fileIcon icon-ppt" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'zip' || scope.row.file_type === 'rar'">
|
|
<i class="fileIcon icon-zip" />
|
|
</div>
|
|
<div v-else-if="scope.row.file_type === 'txt'">
|
|
<i class="fileIcon icon-txt" />
|
|
</div>
|
|
<div v-else>
|
|
<i class="fileIcon icon-other" />
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 元数据 -->
|
|
<div v-if="archivesTabIndex==2" class="metadata-cont item-content">
|
|
<pre v-highlightjs="xml_show">
|
|
<code class="highlight_s">
|
|
{[xml_show]}
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<!-- 点击缩略图看大图 -->
|
|
<el-dialog class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图">
|
|
<span class="dialog-right-top" />
|
|
<span class="dialog-left-bottom" />
|
|
<div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;">
|
|
<img style="max-width:100%; object-fit: contain;" :src="previewSrc" :onerror="defaultImg">
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { form } from '@crud/crud'
|
|
import { FetchArchivesDetails, FetchFileListByDocumentId, FetchArchivesMetadata } from '@/api/prearchiveLibrary/prearchiveLibrary'
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
name: 'PrearchiveLibraryDetail',
|
|
components: { },
|
|
mixins: [
|
|
form({})
|
|
],
|
|
props: {
|
|
selectedDocument: {
|
|
type: Object,
|
|
default: function() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"',
|
|
archivesInfoVisible: false,
|
|
archivesTabIndex: 0,
|
|
archivesDetailsData: [],
|
|
archivesDetailsMetadata: [],
|
|
xml_show: null,
|
|
selections: [],
|
|
tableData: [],
|
|
showCoverVisible: false,
|
|
previewSrc: '' // 查看大图src
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'baseApi'
|
|
])
|
|
},
|
|
created() {
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
getFileSize(fileSize) {
|
|
const fileSizeInKB = (fileSize / 1024).toFixed(2) + 'kB'
|
|
const fileSizeInB = fileSize + 'B'
|
|
return (fileSize / 1024) <= 0.01 ? fileSizeInB : fileSizeInKB
|
|
},
|
|
getDetial(rowId) {
|
|
const params = {
|
|
documentId: this.selectedDocument.id,
|
|
archivesId: rowId
|
|
}
|
|
FetchArchivesDetails(params).then(data => {
|
|
this.archivesDetailsData = data
|
|
})
|
|
FetchFileListByDocumentId(params).then(data => {
|
|
this.tableData = data.returnlist
|
|
})
|
|
FetchArchivesMetadata(params).then(data => {
|
|
this.archivesDetailsMetadata = data
|
|
})
|
|
},
|
|
changeActiveTab(index) {
|
|
this.archivesTabIndex = index
|
|
if (this.archivesTabIndex === 2) {
|
|
this.setXml()
|
|
}
|
|
},
|
|
// table
|
|
clickRowHandler(row) {
|
|
this.$refs.table.toggleRowSelection(row)
|
|
},
|
|
// table
|
|
selectionChangeHandler(val) {
|
|
this.selections = val
|
|
},
|
|
// dialog - close
|
|
handleClose(done) {
|
|
this.showCoverVisible = false
|
|
done()
|
|
},
|
|
// 查看大图
|
|
showCoverPreview(row) {
|
|
this.showCoverVisible = true
|
|
this.previewSrc = this.baseApi + '/downloadFile' + row.file_path
|
|
},
|
|
setXml() {
|
|
const xmlstr = this.archivesDetailsMetadata
|
|
this.xml_show = this.showXml(xmlstr)
|
|
},
|
|
// xml格式化
|
|
showXml(str) {
|
|
var that = this
|
|
var text = str
|
|
// 去掉多余的空格
|
|
text =
|
|
'\n' +
|
|
text
|
|
.replace(/(<\w+)(\s.*?>)/g, function($0, name, props) {
|
|
return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1')
|
|
})
|
|
.replace(/>\s*?</g, '>\n<')
|
|
// 把注释编码
|
|
text = text
|
|
.replace(/\n/g, '\r')
|
|
.replace(/<!--(.+?)-->/g, function($0, text) {
|
|
var ret = '<!--' + escape(text) + '-->'
|
|
return ret
|
|
})
|
|
.replace(/\r/g, '\n')
|
|
|
|
// 调整格式
|
|
var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm
|
|
var nodeStack = []
|
|
var output = text.replace(rgx, function(
|
|
$0,
|
|
all,
|
|
name,
|
|
isBegin,
|
|
isCloseFull1,
|
|
isCloseFull2,
|
|
isFull1,
|
|
isFull2
|
|
) {
|
|
var isClosed =
|
|
isCloseFull1 === '/' ||
|
|
isCloseFull2 === '/' ||
|
|
isFull1 === '/' ||
|
|
isFull2 === '/'
|
|
var prefix = ''
|
|
if (isBegin === '!') {
|
|
prefix = that.getPrefix(nodeStack.length)
|
|
} else {
|
|
if (isBegin !== '/') {
|
|
prefix = that.getPrefix(nodeStack.length)
|
|
if (!isClosed) {
|
|
nodeStack.push(name)
|
|
}
|
|
} else {
|
|
nodeStack.pop()
|
|
prefix = that.getPrefix(nodeStack.length)
|
|
}
|
|
}
|
|
var ret = '\n' + prefix + all
|
|
return ret
|
|
})
|
|
var outputText = output.substring(1)
|
|
// 把注释还原并解码，调格式
|
|
outputText = outputText
|
|
.replace(/\n/g, '\r')
|
|
.replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) {
|
|
if (prefix.charAt(0) === '\r') prefix = prefix.substring(1)
|
|
text = unescape(text).replace(/\r/g, '\n')
|
|
var ret =
|
|
'\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->'
|
|
return ret
|
|
})
|
|
outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n')
|
|
return outputText
|
|
},
|
|
getPrefix(prefixIndex) {
|
|
var span = ' '
|
|
var output = []
|
|
for (var i = 0; i < prefixIndex; ++i) {
|
|
output.push(span)
|
|
}
|
|
return output.join('')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.base-info,
|
|
.metadata-cont{
|
|
background-color: #F6F8FC;
|
|
}
|
|
|
|
// 档案详情
|
|
.base-info{
|
|
padding: 20px 0;
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
.base-info-item{
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 20px;
|
|
color: #545B65;
|
|
span{
|
|
display: block;
|
|
width: 160px;
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
text-align: right;
|
|
color: #0C0E1E;
|
|
}
|
|
}
|
|
}
|
|
|
|
code.hljs {
|
|
font-size: 12px;
|
|
color: #0C0E1E !important;
|
|
height: 530px !important;
|
|
}
|
|
::v-deep .hljs-name{
|
|
color: #0C0E1E !important;
|
|
}
|
|
.base-info .base-info-item span.el-tag{
|
|
width: auto;
|
|
color: #fff;
|
|
}
|
|
|
|
.svg-style{
|
|
width: 60px;
|
|
height: 32px;
|
|
}
|
|
</style>
|