12 changed files with 1339 additions and 31 deletions
-
26src/assets/styles/mixin.scss
-
6src/assets/styles/yxk-admin.scss
-
2src/layout/components/Navbar.vue
-
101src/views/archiveUtilize/archiveEditing/index.vue
-
7src/views/archiveUtilize/archiveSearch/index.vue
-
274src/views/archiveUtilize/archiveSearch/module/resultList.vue
-
35src/views/archiveUtilize/utillizeRecord/index.vue
-
307src/views/archiveUtilize/utillizeRecord/recordList.vue
-
2src/views/components/archivesDetail/anjuan.vue
-
248src/views/components/archivesDetail/detail.vue
-
350src/views/components/archivesDetail/uploadFile/index.vue
-
8src/views/system/processManage/index.vue
@ -1,20 +1,115 @@ |
|||||
<template> |
<template> |
||||
<div>档案编研</div> |
|
||||
|
<div class="app-container tab-container"> |
||||
|
<div class="head-container" style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;"> |
||||
|
<div class="head-search" style="margin-bottom: 0;"> |
||||
|
<el-input |
||||
|
v-model="keyWord" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="输入关键字可模糊检索" |
||||
|
style="width: 245px;" |
||||
|
class="filter-item" |
||||
|
@clear="crud.toQuery" |
||||
|
@keyup.enter.native="crud.toQuery" |
||||
|
/> |
||||
|
<date-range-picker v-model="burryTime" class="date-item" /> |
||||
|
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
||||
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> |
||||
|
<el-checkbox v-model="myEditing" style="line-height: 32px; padding-left: 10px;">我参与得编研</el-checkbox> |
||||
|
</div> |
||||
|
<crudOperation /> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="crud.data" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 330px)" |
||||
|
@row-click="clickRowHandler" |
||||
|
@cell-dblclick="tableDoubleClick" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
> |
||||
|
|
||||
|
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" /> |
||||
|
<el-table-column prop="username" label="编研主题" /> |
||||
|
<el-table-column prop="username" label="编研类型" align="center" /> |
||||
|
<el-table-column prop="username" label="主编人" align="center" /> |
||||
|
<el-table-column prop="username" label="其他编研人员" align="center" /> |
||||
|
<el-table-column prop="createTime" label="开始时间" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="结束时间" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<pagination v-if="crud.data.length !== 0" /> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script > |
|
||||
|
<script> |
||||
|
import CRUD, { presenter, crud } from '@crud/crud' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
import crudOperation from '@crud/CRUD.operation' |
||||
|
|
||||
export default { |
export default { |
||||
name: 'ArchiveEditing', |
name: 'ArchiveEditing', |
||||
|
components: { pagination, DateRangePicker, crudOperation }, |
||||
|
mixins: [presenter(), crud()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/log/initLog', |
||||
|
title: '借阅记录', |
||||
|
optShow: { |
||||
|
add: true, |
||||
|
edit: true, |
||||
|
del: true, |
||||
|
download: false, |
||||
|
reset: false, |
||||
|
group: false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
props: { |
||||
|
activeIndex: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
keyWord: null, |
||||
|
options: [ |
||||
|
{ value: 'username', label: '利用人' }, |
||||
|
{ value: 'account', label: '利用事由' } |
||||
|
], |
||||
|
optionVal: '', |
||||
|
burryTime: null, |
||||
|
myEditing: false |
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
mounted() { |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
}, |
||||
|
resetQuery() { |
||||
|
|
||||
|
}, |
||||
|
clickRowHandler(row) { |
||||
|
// this.$refs.table.clearSelection() |
||||
|
this.$refs.table.toggleRowSelection(row) |
||||
|
}, |
||||
|
tableDoubleClick(row) { |
||||
|
}, |
||||
|
handleCloseDialog(done) { |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
|
<style lang="scss" scoped> |
||||
</style> |
</style> |
||||
@ -1,20 +1,45 @@ |
|||||
<template> |
<template> |
||||
<div>借阅记录</div> |
|
||||
|
<div class="app-container tab-container"> |
||||
|
<div class="tab-content"> |
||||
|
<span class="right-top-line" /> |
||||
|
<span class="left-bottom-line" /> |
||||
|
<span class="right-bottom-line" /> |
||||
|
<ul class="tab-nav"> |
||||
|
<li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">利用中<i /></li> |
||||
|
<li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">已到期<i /></li> |
||||
|
<!-- 最右侧装饰img --> |
||||
|
<span class="tab-right-img" /> |
||||
|
</ul> |
||||
|
<RecordList :active-index="activeIndex" @handleTab="getRecordId" /> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script > |
|
||||
|
<script> |
||||
|
import RecordList from './recordList' |
||||
|
|
||||
export default { |
export default { |
||||
name: 'UtillizeRecord', |
name: 'UtillizeRecord', |
||||
|
components: { |
||||
|
RecordList |
||||
|
}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
activeIndex: 0, |
||||
|
currentRecordId: null |
||||
} |
} |
||||
}, |
}, |
||||
mounted() { |
|
||||
}, |
|
||||
methods: { |
methods: { |
||||
|
getRecordId(index, id) { |
||||
|
this.changeActiveTab(index) |
||||
|
this.currentRecordId = id |
||||
|
}, |
||||
|
changeActiveTab(data) { |
||||
|
this.activeIndex = data |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
|
<style lang="scss" scoped> |
||||
</style> |
</style> |
||||
@ -0,0 +1,307 @@ |
|||||
|
<template> |
||||
|
<div class="recordList-main"> |
||||
|
<div class="head-container"> |
||||
|
<div class="head-search"> |
||||
|
<el-input |
||||
|
v-model="keyWord" |
||||
|
size="small" |
||||
|
clearable |
||||
|
placeholder="请输入关键词" |
||||
|
style="width: 300px;" |
||||
|
class="input-prepend filter-item" |
||||
|
@clear="crud.toQuery" |
||||
|
@keyup.enter.native="crud.toQuery" |
||||
|
> |
||||
|
<el-select slot="prepend" v-model="optionVal" style="width: 92px"> |
||||
|
<el-option |
||||
|
v-for="item in options" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-input> |
||||
|
<div class="start-date"> |
||||
|
<span>开始时间</span> |
||||
|
<date-range-picker v-model="startTime" class="date-item" /> |
||||
|
</div> |
||||
|
<div class="end-date"> |
||||
|
<span>结束时间</span> |
||||
|
<date-range-picker v-model="endTime" class="date-item" /> |
||||
|
</div> |
||||
|
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button> |
||||
|
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="crud.data" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100% - 100px)" |
||||
|
@cell-dblclick="tableDoubleClick" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column prop="createTime" label="利用开始时间" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="利用结束时间" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div>{{ scope.row.createTime | parseTime }}</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="username" label="利用人" align="center" width="120" /> |
||||
|
<el-table-column prop="description" label="利用事由" /> |
||||
|
<el-table-column prop="browser" label="包含实体借阅" align="center" width="110"> |
||||
|
<template> |
||||
|
<div> |
||||
|
<span class="iconfont icon-fou" /> |
||||
|
<span class="iconfont icon-shi" /> |
||||
|
<span class="iconfont icon-dengdai" /> |
||||
|
<span class="iconfont icon-cuowu1" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="browser" label="是否已归还" align="center" width="110"> |
||||
|
<template> |
||||
|
<div> |
||||
|
<span class="iconfont icon-fou" /> |
||||
|
<span class="iconfont icon-shi" /> |
||||
|
<span class="iconfont icon-dengdai" /> |
||||
|
<span class="iconfont icon-cuowu1" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="状态" align="center" width="110"> |
||||
|
<template> |
||||
|
<div> |
||||
|
<span class="row-state soon-state">即将到期</span> |
||||
|
<!-- <span class="row-state end-state">利用中</span> |
||||
|
<span class="row-state cancel-state">已过期</span> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<pagination v-if="crud.data.length !== 0" /> |
||||
|
|
||||
|
<el-dialog title="利用详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="lendDetail" :before-close="handleCloseDialog"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :model="form" inline label-width="100px"> |
||||
|
<el-form-item label="利用人" prop="user"> |
||||
|
<el-input v-model="form.user" style="width: 280px;" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="利用流程" prop="process"> |
||||
|
<el-input v-model="form.process" style="width: 280px;" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="开始时间" prop="startDate"> |
||||
|
<el-input v-model="form.startDate" style="width: 280px;" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="endDate"> |
||||
|
<el-input v-model="form.endDate" style="width: 280px;" disabled /> |
||||
|
</el-form-item> |
||||
|
<el-row> |
||||
|
<el-form-item label="利用事由" prop="remark"> |
||||
|
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 703px;" disabled /> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-form-item label="状态" prop="status"> |
||||
|
<span class="row-state soon-state">即将到期</span> |
||||
|
<span class="row-state end-state">利用中</span> |
||||
|
<span class="row-state cancel-state">已过期</span> |
||||
|
</el-form-item> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="detailArcData" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 560px)" |
||||
|
> |
||||
|
<el-table-column type="index" label="序号" align="center" width="55" /> |
||||
|
<el-table-column prop="title" label="档案文件"> |
||||
|
<template> |
||||
|
<div class="title-style"><span>文件</span>【档号】题名</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="description" label="利用方式" width="340"> |
||||
|
<template> |
||||
|
<el-checkbox-group v-model="checkList" class="checkbox-style"> |
||||
|
<el-checkbox label="电子查看" disabled /> |
||||
|
<el-checkbox label="下载" disabled /> |
||||
|
<el-checkbox label="打印" disabled /> |
||||
|
<el-checkbox label="实体借阅" disabled /> |
||||
|
</el-checkbox-group> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="createTime" label="实体借阅状态" align="center" width="110"> |
||||
|
<template> |
||||
|
<div> |
||||
|
<span class="row-state soon-state">即将到期</span> |
||||
|
<!-- <span class="row-state end-state">利用中</span> |
||||
|
<span class="row-state cancel-state">已过期</span> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleCloseDialog">关闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CRUD, { presenter, crud } from '@crud/crud' |
||||
|
import pagination from '@crud/Pagination' |
||||
|
import DateRangePicker from '@/components/DateRangePicker' |
||||
|
|
||||
|
export default { |
||||
|
name: 'RecordList', |
||||
|
components: { pagination, DateRangePicker }, |
||||
|
mixins: [presenter(), crud()], |
||||
|
cruds() { |
||||
|
return CRUD({ |
||||
|
url: 'api/log/initLog', |
||||
|
title: '借阅记录', |
||||
|
optShow: { |
||||
|
add: false, |
||||
|
edit: false, |
||||
|
del: false, |
||||
|
download: false, |
||||
|
reset: false, |
||||
|
group: false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
props: { |
||||
|
activeIndex: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
selections: [], |
||||
|
keyWord: null, |
||||
|
options: [ |
||||
|
{ value: 'username', label: '利用人' }, |
||||
|
{ value: 'account', label: '利用事由' } |
||||
|
], |
||||
|
optionVal: '', |
||||
|
startTime: null, |
||||
|
endTime: null, |
||||
|
lendDetail: false, |
||||
|
form: { |
||||
|
user: '张三', |
||||
|
process: '档案借阅流程-张三-2023-01-01', |
||||
|
startDate: '2016-09-21 08:50:08', |
||||
|
endDate: '2016-10-21 08:50:08', |
||||
|
remark: '利用事由' |
||||
|
}, |
||||
|
detailArcData: [], |
||||
|
checkList: ['电子查看', '实体借阅'] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
activeIndex: function(newValue, oldValue) { |
||||
|
console.log('newValue', newValue) |
||||
|
this.crud.query.isType = newValue |
||||
|
this.crud.toQuery() |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
[CRUD.HOOK.beforeRefresh]() { |
||||
|
this.crud.query.isType = this.activeIndex |
||||
|
}, |
||||
|
resetQuery() { |
||||
|
|
||||
|
}, |
||||
|
tableDoubleClick(row) { |
||||
|
this.lendDetail = true |
||||
|
}, |
||||
|
handleCloseDialog(done) { |
||||
|
this.lendDetail = false |
||||
|
// 关闭弹框 |
||||
|
// done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.recordList-main{ |
||||
|
height: calc(100vh - 236px); |
||||
|
.start-date, |
||||
|
.end-date{ |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
padding-left: 8px; |
||||
|
font-size: 14px; |
||||
|
line-height: 30px; |
||||
|
color: #0C0E1E; |
||||
|
span{ |
||||
|
display: block; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
.iconfont{ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.icon-fou{ |
||||
|
color: #A6ADB6; |
||||
|
} |
||||
|
.icon-shi{ |
||||
|
color: #12C37A; |
||||
|
} |
||||
|
.icon-dengdai{ |
||||
|
color: #FF8329; |
||||
|
} |
||||
|
.icon-cuowu1{ |
||||
|
color: #ED4A41; |
||||
|
} |
||||
|
.row-state{ |
||||
|
width: 56px; |
||||
|
padding: 0; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.title-style{ |
||||
|
span{ |
||||
|
display: inline-block; |
||||
|
width: 42px; |
||||
|
height: 22px; |
||||
|
line-height: 22px; |
||||
|
text-align: center; |
||||
|
font-size: 12px; |
||||
|
color: #0348F3; |
||||
|
background-color: #CAE1FF; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-dialog{ |
||||
|
width: 860px !important; |
||||
|
.el-form-item .el-form-item__content{ |
||||
|
width: 280px; |
||||
|
} |
||||
|
.dialog-footer{ |
||||
|
margin-top: 15px !important; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-checkbox-group{ |
||||
|
.el-checkbox{ |
||||
|
margin-right: 10px !important; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-pagination{ |
||||
|
margin: 24px 0 10px 0 !important |
||||
|
} |
||||
|
|
||||
|
::v-deep .input-prepend .el-input__inner{ |
||||
|
padding-left: 100px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,248 @@ |
|||||
|
<template> |
||||
|
<el-dialog class="detail-dialog" :title="detailTitle" :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 v-if="isHasFile" :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> |
||||
|
<!-- 附件 --> |
||||
|
<UploadFile v-if="archivesTabIndex==1" ref="uploadFile" class="item-content" :is-upload-detail="false" :selected-category="selectedCategory" :arc-id="arcId" /> |
||||
|
<!-- 元数据 --> |
||||
|
<div v-if="archivesTabIndex==2" class="metadata-cont item-content"> |
||||
|
<pre v-highlightjs="xml_show"> |
||||
|
<code class="highlight_s"> |
||||
|
{[xml_show]} |
||||
|
</code> |
||||
|
</pre> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchDetailsById, FetchArchivesMetadata } from '@/api/collect/collect' |
||||
|
import UploadFile from './uploadFile/index' |
||||
|
export default { |
||||
|
name: 'ArchivesInfo', |
||||
|
components: { UploadFile }, |
||||
|
props: { |
||||
|
selectedCategory: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
arcId: { |
||||
|
type: String, |
||||
|
default: function() { |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
detailTitle: '', |
||||
|
isHasFile: false, // 卷内/文件才有附件 |
||||
|
isDetailsInfo: false, // 项目不显示最下面5行基本信息 |
||||
|
archivesInfoVisible: false, |
||||
|
archivesTabIndex: 0, |
||||
|
archivesDetailsData: [], |
||||
|
archivesDetailsMetadata: [], |
||||
|
xml_show: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
getDetial(collectLevel, rowId) { |
||||
|
console.log(this.arcId) |
||||
|
const params = { |
||||
|
'categoryId': this.selectedCategory.id, |
||||
|
'categoryLevel': collectLevel, |
||||
|
'id': rowId |
||||
|
} |
||||
|
console.log(params) |
||||
|
FetchDetailsById(params).then(data => { |
||||
|
this.archivesDetailsData = data.showFiled |
||||
|
.filter(field => field.fieldName in data.echo) |
||||
|
.map(field => ({ |
||||
|
editLength: field.editLength, |
||||
|
isLine: field.isLine, |
||||
|
fieldCnName: field.fieldCnName, |
||||
|
fieldName: field.fieldName, |
||||
|
context: data.echo[field.fieldName] |
||||
|
})) |
||||
|
}) |
||||
|
const metaDataParams = { |
||||
|
'categoryId': this.selectedCategory.id, |
||||
|
'categoryLevel': collectLevel, |
||||
|
'archivesId': rowId |
||||
|
} |
||||
|
console.log('metaData', metaDataParams) |
||||
|
FetchArchivesMetadata(metaDataParams).then(data => { |
||||
|
this.archivesDetailsMetadata = data |
||||
|
}) |
||||
|
}, |
||||
|
setXml() { |
||||
|
const xmlstr = this.archivesDetailsMetadata |
||||
|
// console.log('xmlstr:', xmlstr) |
||||
|
// console.log('xml转json:', this.$x2js.xml2js(xmlstr)) |
||||
|
// console.log('json转xml:', this.$x2js.js2xml(this.$x2js.xml2js(xmlstr))) |
||||
|
// this.xml_show = vkbeautify.xml(xmlstr) |
||||
|
this.xml_show = this.showXml(xmlstr) |
||||
|
}, |
||||
|
changeActiveTab(index) { |
||||
|
this.archivesTabIndex = index |
||||
|
if (this.archivesTabIndex === 2) { |
||||
|
this.setXml() |
||||
|
} |
||||
|
this.$nextTick(() => { |
||||
|
if (this.$refs.uploadFile) { |
||||
|
this.$refs.uploadFile.tableData = [] |
||||
|
this.$refs.uploadFile.getFileList() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 删除 - 关闭 |
||||
|
handleClose(done) { |
||||
|
this.archivesInfoVisible = false |
||||
|
done() |
||||
|
}, |
||||
|
// 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: 120px; |
||||
|
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; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,350 @@ |
|||||
|
<template> |
||||
|
<div class="upload-file"> |
||||
|
<!-- 上传附件curd --> |
||||
|
<div v-if="isUploadDetail" class="upload-curd"> |
||||
|
<div class="upload-btn"> |
||||
|
<el-button icon="el-icon-plus" size="small" type="primary">添加</el-button> |
||||
|
<input id="upFile" type="file" name="upFile" @change="changeFile($event)"> |
||||
|
</div> |
||||
|
<el-button icon="el-icon-delete" :disabled="selections.length === 0" @click="toDelete(selections)">删除</el-button> |
||||
|
<el-button icon="el-icon-sort" @click="showSort">排序</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<!--表格渲染--> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="tableData" |
||||
|
style="min-width: 100%" |
||||
|
height="calc(100vh - 382px)" |
||||
|
@row-click="clickRowHandler" |
||||
|
@selection-change="selectionChangeHandler" |
||||
|
> |
||||
|
<el-table-column v-if="isUploadDetail" type="selection" width="55" align="center" /> |
||||
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
||||
|
<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-column prop="create_time" label="创建时间" min-width="110" align="center" /> |
||||
|
<!-- && !recycleMain.isRecycle --> |
||||
|
<el-table-column v-if="!isUploadDetail " label="操作" min-width="100" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button class="file-down iconfont icon-weibiaoti-2" @click="downloadFile(scope.row)">下载</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 点击缩略图看大图 --> |
||||
|
<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> |
||||
|
|
||||
|
<!-- 排序 --> |
||||
|
<el-dialog :close-on-click-modal="false" :append-to-body="true" title="排序" :visible.sync="sortVisible" @opened="opened"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<i class="drag-tip">提示：请通过拖动鼠标来调整当前顺序</i> |
||||
|
<el-table :data="sortTableData" class="file-sort" style="width: 100%;max-height: 70vh;" row-key="id"> |
||||
|
<el-table-column type="index" label="序号" width="100" align="center" /> |
||||
|
<el-table-column prop="file_name" label="文件名称" /> |
||||
|
</el-table> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleSort">保存</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 删除附件 --> |
||||
|
<el-dialog title="删除附件" :append-to-body="true" :close-on-click-modal="false" :visible.sync="deleteVisible" :before-close="handleClose"> |
||||
|
<span class="dialog-right-top" /> |
||||
|
<span class="dialog-left-bottom" /> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="dialog-delt"> |
||||
|
<p><span>确定删除已选择的附件吗？</span></p> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleDeltConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import { FetchInitArchiveFilesView, FetchEditFile, FetchDeleteFile, FetchFileSort } from '@/api/archivesManage/archivesList' |
||||
|
import { FetchInitFileCategoryView } from '@/api/collect/collect' |
||||
|
import { archivesUpload } from '@/utils/upload' |
||||
|
import { downloadFile, getCurrentTime } from '@/utils/index' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { form } from '@crud/crud' |
||||
|
import Sortable from 'sortablejs' |
||||
|
export default { |
||||
|
name: 'UploadFile', |
||||
|
components: {}, |
||||
|
mixins: [ |
||||
|
form({}) |
||||
|
], |
||||
|
// inject: ['recycleMain'], |
||||
|
props: { |
||||
|
isUploadDetail: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
selectedCategory: { |
||||
|
type: Object, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
arcId: { |
||||
|
type: String, |
||||
|
default: function() { |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"', |
||||
|
tableData: [], // 附件list |
||||
|
selections: [], // table - 选中的 |
||||
|
showCoverVisible: false, // 查看大图dialog |
||||
|
sortTableData: [], // 排序data |
||||
|
sortVisible: false, // 排序dialog |
||||
|
deleteVisible: false, // 删除附件 dialog |
||||
|
deleteData: [], // 删除选中的data |
||||
|
file: null, // 附件 change |
||||
|
fileNames: '', // 附件 - name |
||||
|
formatType: '', // 附件 - type |
||||
|
postfix: '', // 附件 - 文件后缀 |
||||
|
fileSize: '', // 附件 - 大小 |
||||
|
filePath: '', // 附件 - path |
||||
|
px: '', // 附件 - 分辨率 |
||||
|
nowDate: '', // 当前时间 |
||||
|
previewSrc: '' // 查看大图src |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
watch: { |
||||
|
arcId: function(newValue, oldValue) { |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 选择附件 |
||||
|
async changeFile(e) { |
||||
|
this.file = e.target.files[0] |
||||
|
this.fileSize = this.file.size |
||||
|
this.formatType = this.file.type.substring(0, this.file.type.indexOf('/')) |
||||
|
this.fileNames = this.file.name |
||||
|
this.postfix = this.file.name.substring( |
||||
|
this.fileNames.lastIndexOf('.') + 1, |
||||
|
this.fileNames.length |
||||
|
) |
||||
|
if (this.formatType === 'image') { |
||||
|
const fileBase64 = await this.getBase64(this.file) |
||||
|
const res = await this.getImgPx(fileBase64) |
||||
|
this.px = res.width + 'px*' + res.height + 'px' |
||||
|
} else { |
||||
|
this.px = '' |
||||
|
} |
||||
|
// 上传附件 |
||||
|
archivesUpload(this.baseApi + '/api/archives/uploadFile', this.file, this.categoryId).then(res => { |
||||
|
if (res.data.code === 200) { |
||||
|
this.filePath = res.data.data |
||||
|
this.uploadSave() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 上传附件 - 选择上传即保存 |
||||
|
uploadSave() { |
||||
|
this.nowDate = getCurrentTime() |
||||
|
const json = { |
||||
|
'file_name': this.fileNames, |
||||
|
'file_size': this.fileSize, |
||||
|
'file_type': this.postfix, |
||||
|
'file_path': this.filePath, |
||||
|
'sequence': null, |
||||
|
'archive_id': this.arcId, |
||||
|
'file_dpi': this.px, |
||||
|
'file_thumbnail': '', |
||||
|
'create_time': this.nowDate, |
||||
|
'id': null |
||||
|
} |
||||
|
const arrayUpload = [] |
||||
|
arrayUpload.push(json) |
||||
|
const params = { |
||||
|
'categoryId': this.categoryId, |
||||
|
'jsonString': JSON.stringify(arrayUpload) |
||||
|
} |
||||
|
console.log(params) |
||||
|
// FetchEditFile(params).then(data => { |
||||
|
// this.$message.success('上传附件成功!') |
||||
|
// this.crud.refresh() |
||||
|
// this.getFileList() |
||||
|
// }) |
||||
|
}, |
||||
|
// 将上传的图片转为base64 |
||||
|
getBase64(file) { |
||||
|
const reader = new FileReader() |
||||
|
reader.readAsDataURL(file) |
||||
|
return new Promise((resolve) => { |
||||
|
reader.onload = () => { |
||||
|
resolve(reader.result) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取图片的分辨率 |
||||
|
getImgPx(img) { |
||||
|
const image = new Image() |
||||
|
image.src = img |
||||
|
return new Promise((resolve) => { |
||||
|
image.onload = () => { |
||||
|
const width = image.width |
||||
|
const height = image.height |
||||
|
resolve({ width, height }) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 上传list |
||||
|
getFileList() { |
||||
|
const params = { |
||||
|
'categoryId': this.selectedCategory.id, |
||||
|
'archivesId': this.arcId, |
||||
|
'page': 0, |
||||
|
'size': 10 |
||||
|
} |
||||
|
console.log(params) |
||||
|
FetchInitFileCategoryView(params).then(data => { |
||||
|
console.log('darta', data) |
||||
|
this.tableData = data.returnlist |
||||
|
}) |
||||
|
}, |
||||
|
// 下载附件 |
||||
|
downloadFile(row) { |
||||
|
const url = this.baseApi + '/downloadFile' + row.file_path |
||||
|
fetch(url).then(res => res.blob()).then(blob => { |
||||
|
downloadFile(blob, row.file_name.split('.')[0], row.file_type) |
||||
|
}).catch(() => { |
||||
|
this.$message.error('下载文件失败!') |
||||
|
}) |
||||
|
}, |
||||
|
// 选择删除 |
||||
|
toDelete(data) { |
||||
|
this.deleteData = data |
||||
|
this.deleteVisible = true |
||||
|
}, |
||||
|
// 确认删除 |
||||
|
handleDeltConfirm() { |
||||
|
this.deleteVisible = false |
||||
|
const ids = [] |
||||
|
this.deleteData.forEach(val => { |
||||
|
ids.push(val.id) |
||||
|
}) |
||||
|
const params = { |
||||
|
'ids': ids, |
||||
|
'categoryId': this.categoryId |
||||
|
} |
||||
|
console.log(params) |
||||
|
// 删除fetch |
||||
|
// FetchDeleteFile(params).then(res => { |
||||
|
// this.crud.delAllLoading = false |
||||
|
// this.$message.success('删除成功!') |
||||
|
// this.crud.refresh() |
||||
|
// this.getFileList() |
||||
|
// }) |
||||
|
}, |
||||
|
// 排序 - 行拖拽 |
||||
|
rowDrop(className, targetName) { |
||||
|
// 此时找到的元素是要拖拽元素的父容器 |
||||
|
const tbody = document.querySelector('.' + className + ' .el-table__body-wrapper tbody') |
||||
|
const that = this |
||||
|
Sortable.create(tbody, { |
||||
|
// 指定父元素下可被拖拽的子元素 |
||||
|
draggable: '.el-table__row', |
||||
|
onEnd({ newIndex, oldIndex }) { |
||||
|
if (newIndex === oldIndex) return |
||||
|
that[targetName].splice(newIndex, 0, that[targetName].splice(oldIndex, 1)[0]) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 排序 |
||||
|
opened() { |
||||
|
this.rowDrop('file-sort', 'sortTableData') |
||||
|
}, |
||||
|
showSort() { |
||||
|
this.sortVisible = true |
||||
|
this.sortTableData = JSON.parse(JSON.stringify(this.tableData)) |
||||
|
}, |
||||
|
// 排序 - 保存 |
||||
|
handleSort() { |
||||
|
const ids = [] |
||||
|
const sequences = [] |
||||
|
this.sortTableData.map((value, index) => { |
||||
|
ids.push(value.id) |
||||
|
sequences.push(index + 1) |
||||
|
}) |
||||
|
const params = { |
||||
|
'categoryId': this.categoryId, |
||||
|
'ids': ids, |
||||
|
'sequences': sequences |
||||
|
} |
||||
|
console.log(params) |
||||
|
// FetchFileSort(params).then((res) => { |
||||
|
// this.sortVisible = false |
||||
|
// this.$message.success('附件排序成功!') |
||||
|
// this.crud.refresh() |
||||
|
// this.getFileList() |
||||
|
// }) |
||||
|
}, |
||||
|
// 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 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.svg-style{ |
||||
|
width: 60px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue