|
|
|
@ -8,38 +8,16 @@ |
|
|
|
<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" v-show="index<archivesDetailsData.length-5" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item"> |
|
|
|
<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> |
|
|
|
<el-row v-if="isDetailsInfo"> |
|
|
|
<el-col v-for="(item,index) in archivesDetailsData.slice(archivesDetailsData.length-5,archivesDetailsData.length)" :key="'last'+index" :span=" 12" class="base-info-item"> |
|
|
|
<span>{{ item.fieldCnName }}：</span> |
|
|
|
<div v-if="item.fieldName === 'folder_location' && item.context" :style="{ width: item.editLength+'px', marginTop:'-6px'}"> |
|
|
|
<div v-if="item.context.indexOf(',')"> |
|
|
|
<el-tag |
|
|
|
v-for="(val,key) in item.context.split(',')" |
|
|
|
:key="key" |
|
|
|
:type="val" |
|
|
|
effect="dark" |
|
|
|
> |
|
|
|
{{ val }} |
|
|
|
</el-tag> |
|
|
|
</div> |
|
|
|
<div v-else-if="!item.context.indexOf(',')"> |
|
|
|
<el-tag effect="dark">{{ item.context }}</el-tag> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else :style="{ width: item.editLength+'px'}" :class="[ (item.fieldName === 'borrow_type') ? 'row-state row-lending' : '' ]"> |
|
|
|
{{ item.context }} |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<!-- 电子原件 --> |
|
|
|
<div v-if="archivesTabIndex===1" class="item-content"> |
|
|
|
@ -62,7 +40,7 @@ |
|
|
|
<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'"> |
|
|
|
<img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' +scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)"> |
|
|
|
<img width="60px" height="32px" class="screenshot" :src="baseApi+ '/downloadFile' + scope.row.file_path" :onerror="defaultImg" @click="showCoverPreview(scope.row)"> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<svg-icon icon-class="fujian" class-name="svg-style" /> |
|
|
|
@ -71,6 +49,22 @@ |
|
|
|
</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> |
|
|
|
@ -78,9 +72,8 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import { form } from '@crud/crud' |
|
|
|
import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
|
|
|
// import detailData from './data.json' |
|
|
|
// import metaData from './metadata.json' |
|
|
|
import { FetchArchivesDetails, FetchFileListByDocumentId, FetchArchivesMetadata } from '@/api/prearchiveLibrary/prearchiveLibrary' |
|
|
|
import { mapGetters } from 'vuex' |
|
|
|
export default { |
|
|
|
name: 'PrearchiveLibraryDetail', |
|
|
|
components: { }, |
|
|
|
@ -88,64 +81,47 @@ export default { |
|
|
|
form({}) |
|
|
|
], |
|
|
|
props: { |
|
|
|
categoryId: { |
|
|
|
type: String, |
|
|
|
selectedDocument: { |
|
|
|
type: Object, |
|
|
|
default: function() { |
|
|
|
return '' |
|
|
|
} |
|
|
|
}, |
|
|
|
arcId: { |
|
|
|
type: String, |
|
|
|
default: function() { |
|
|
|
return '' |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"', |
|
|
|
archivesInfoVisible: false, |
|
|
|
archivesTabIndex: 0, |
|
|
|
archivesDetailsData: [], |
|
|
|
archivesDetailsMetadata: [] |
|
|
|
archivesDetailsMetadata: [], |
|
|
|
xml_show: null, |
|
|
|
selections: [], |
|
|
|
tableData: [], |
|
|
|
showCoverVisible: false, |
|
|
|
previewSrc: '' // 查看大图src |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'baseApi' |
|
|
|
]) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.archivesDetailsData = [] |
|
|
|
this.archivesDetailsMetadata = [] |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getDetial(rowId) { |
|
|
|
const params = { |
|
|
|
categoryId: this.categoryId, |
|
|
|
documentId: this.selectedDocument.id, |
|
|
|
archivesId: rowId |
|
|
|
} |
|
|
|
FetchArchivesDetails(params).then(data => { |
|
|
|
this.archivesDetailsData = data |
|
|
|
// 案卷 / 文件的借阅状态 |
|
|
|
this.archivesDetailsData.forEach(item => { |
|
|
|
if (item.fieldName === 'borrow_type') { |
|
|
|
if (item.context === 1) { |
|
|
|
item.context = '待登记' |
|
|
|
} else if (item.context === 2) { |
|
|
|
item.context = '待借阅' |
|
|
|
} else if (item.context === 3) { |
|
|
|
item.context = '待归还' |
|
|
|
} else if (item.context === 4 || item.context === '' || item.context === null) { |
|
|
|
item.context = '-' |
|
|
|
} else if (item.context === -1) { |
|
|
|
item.context = '在库' |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
// 如果是卷内 - 不显示‘tid’/'借阅状态' |
|
|
|
if (!this.isTidOrBorrow) { |
|
|
|
const indexBorrow = this.archivesDetailsData.findIndex(item => item.fieldName === 'borrow_type') |
|
|
|
const indexTid = this.archivesDetailsData.findIndex(item => item.fieldName === 'tid') |
|
|
|
this.archivesDetailsData.splice(indexBorrow, 1) |
|
|
|
this.archivesDetailsData.splice(indexTid, 1) |
|
|
|
} |
|
|
|
FetchFileListByDocumentId(params).then(data => { |
|
|
|
this.tableData = data.returnlist |
|
|
|
}) |
|
|
|
FetchArchivesMetadata(params).then(data => { |
|
|
|
this.archivesDetailsMetadata = data |
|
|
|
@ -153,11 +129,109 @@ export default { |
|
|
|
}, |
|
|
|
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.archivesInfoVisible = false |
|
|
|
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('') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -168,9 +242,12 @@ export default { |
|
|
|
.metadata-cont{ |
|
|
|
background-color: #F6F8FC; |
|
|
|
} |
|
|
|
|
|
|
|
// 档案详情 |
|
|
|
.base-info{ |
|
|
|
padding: 20px 0; |
|
|
|
overflow: hidden; |
|
|
|
overflow-y: scroll; |
|
|
|
.base-info-item{ |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
@ -178,11 +255,30 @@ export default { |
|
|
|
color: #545B65; |
|
|
|
span{ |
|
|
|
display: block; |
|
|
|
width: 120px; |
|
|
|
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> |
