7 changed files with 337 additions and 49 deletions
-
20src/api/prearchiveLibrary/prearchiveLibrary.js
-
10src/api/system/category/category.js
-
96src/views/components/category/PreviewForm.vue
-
50src/views/prearchiveLibrary/index.vue
-
188src/views/prearchiveLibrary/module/detail.vue
-
10src/views/prearchiveLibrary/module/moveFile.vue
-
6src/views/system/notifyManage/module/selectObj.vue
@ -0,0 +1,188 @@ |
|||||
|
<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> |
||||
|
</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"> |
||||
|
<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"> |
||||
|
<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"> |
||||
|
{{ (scope.row.file_size / 1024).toFixed(2) + 'kB' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center" /> |
||||
|
<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)"> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<svg-icon icon-class="fujian" class-name="svg-style" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { form } from '@crud/crud' |
||||
|
import { FetchArchivesDetails, FetchArchivesMetadata } from '@/api/archivesManage/archivesList' |
||||
|
// import detailData from './data.json' |
||||
|
// import metaData from './metadata.json' |
||||
|
export default { |
||||
|
name: 'PrearchiveLibraryDetail', |
||||
|
components: { }, |
||||
|
mixins: [ |
||||
|
form({}) |
||||
|
], |
||||
|
props: { |
||||
|
categoryId: { |
||||
|
type: String, |
||||
|
default: function() { |
||||
|
return '' |
||||
|
} |
||||
|
}, |
||||
|
arcId: { |
||||
|
type: String, |
||||
|
default: function() { |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
archivesInfoVisible: false, |
||||
|
archivesTabIndex: 0, |
||||
|
archivesDetailsData: [], |
||||
|
archivesDetailsMetadata: [] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.archivesDetailsData = [] |
||||
|
this.archivesDetailsMetadata = [] |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
getDetial(rowId) { |
||||
|
const params = { |
||||
|
categoryId: this.categoryId, |
||||
|
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) |
||||
|
} |
||||
|
}) |
||||
|
FetchArchivesMetadata(params).then(data => { |
||||
|
this.archivesDetailsMetadata = data |
||||
|
}) |
||||
|
}, |
||||
|
changeActiveTab(index) { |
||||
|
this.archivesTabIndex = index |
||||
|
}, |
||||
|
// 删除 - 关闭 |
||||
|
handleClose(done) { |
||||
|
this.archivesInfoVisible = false |
||||
|
done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.base-info, |
||||
|
.metadata-cont{ |
||||
|
background-color: #F6F8FC; |
||||
|
} |
||||
|
// 档案详情 |
||||
|
.base-info{ |
||||
|
padding: 20px 0; |
||||
|
.base-info-item{ |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
margin-bottom: 20px; |
||||
|
color: #545B65; |
||||
|
span{ |
||||
|
display: block; |
||||
|
width: 120px; |
||||
|
margin-right: 5px; |
||||
|
text-align: right; |
||||
|
color: #0C0E1E; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue