7 changed files with 370 additions and 36 deletions
-
13.env.development
-
21src/assets/styles/archives-manage.scss
-
7src/views/archiveUtilize/archiveEditing/index.vue
-
147src/views/archiveUtilize/archiveEditing/module/detail.vue
-
196src/views/archiveUtilize/archiveEditing/module/material.vue
-
0src/views/archiveUtilize/archiveEditing/module/onlineEditing.vue
-
22src/views/system/processManage/runningProcess/module/detail.vue
@ -0,0 +1,147 @@ |
|||||
|
<template> |
||||
|
<el-dialog class="detail-dialog" title="编研详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="editingDetailVisible" :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="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看详情</span></div> |
||||
|
<!-- 基本信息 --> |
||||
|
<div v-if="archivesTabIndex === 0" class="base-info item-content"> |
||||
|
<el-row> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>专题名称：</span> |
||||
|
<p>编研专题1</p> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>编研类型：</span> |
||||
|
<p>汇编</p> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>主编人：</span> |
||||
|
<p>张三、李四</p> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>编研人员：</span> |
||||
|
<p>王五、赵六</p> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>开始时间：</span> |
||||
|
<p>2016-09-21</p> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>结束时间：</span> |
||||
|
<p>2016-09-30</p> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>备注：</span> |
||||
|
<p>备注123</p> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row style="margin-top: 160px;"> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>收集材料：</span> |
||||
|
<p>3个</p> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="base-info-item"> |
||||
|
<span>在线编研：</span> |
||||
|
<p>草稿 1 篇、发布 1 篇</p> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<!-- 素材收集 --> |
||||
|
<div v-if="archivesTabIndex===1" class="item-content"> |
||||
|
<Material /> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 在线编研 --> |
||||
|
<div v-if="archivesTabIndex===2"> |
||||
|
在线编研 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click.native="handleClose">确定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Material from './material.vue' |
||||
|
export default { |
||||
|
name: 'ArchiveEditingDetail', |
||||
|
components: { Material }, |
||||
|
props: { |
||||
|
// selectedCategory: { |
||||
|
// type: Object, |
||||
|
// default: function() { |
||||
|
// return {} |
||||
|
// } |
||||
|
// }, |
||||
|
// arcId: { |
||||
|
// type: String, |
||||
|
// default: function() { |
||||
|
// return '' |
||||
|
// } |
||||
|
// } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
editingDetailVisible: false, |
||||
|
archivesTabIndex: 0, |
||||
|
archivesDetailsData: [] |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
changeActiveTab(index) { |
||||
|
this.archivesTabIndex = index |
||||
|
}, |
||||
|
// 删除 - 关闭 |
||||
|
handleClose(done) { |
||||
|
this.editingDetailVisible = false |
||||
|
done() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.base-info{ |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog{ |
||||
|
.dialog-footer{ |
||||
|
margin-top: 15px !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,196 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="head-container"> |
||||
|
<el-button size="mini" @click="crud.toAdd"> |
||||
|
<i class="iconfont icon-xinzeng" /> |
||||
|
新增 |
||||
|
</el-button> |
||||
|
<el-button slot="reference" size="mini" :loading="crud.delAllLoading" @click="toDelete(crud.selections)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
<el-button :loading="crud.downloadLoading" size="mini" @click="doExport(crud.selections)"> |
||||
|
<i class="iconfont icon-daochu" /> |
||||
|
导出 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<el-table |
||||
|
ref="table" |
||||
|
:data="crud.data" |
||||
|
style="width: 100%;" |
||||
|
height="calc(100vh - 485px)" |
||||
|
@cell-dblclick="tableDoubleClick" |
||||
|
@selection-change="crud.selectionChangeHandler" |
||||
|
> |
||||
|
|
||||
|
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" /> |
||||
|
<el-table-column type="index" label="序号" width="55" align="center" /> |
||||
|
<el-table-column prop="username" label="档号" align="center" /> |
||||
|
<el-table-column prop="description" label="题名" /> |
||||
|
<el-table-column prop="browser" 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> |
||||
|
<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' |
||||
|
|
||||
|
export default { |
||||
|
name: 'RecordList', |
||||
|
components: { pagination }, |
||||
|
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> |
||||
|
|
||||
|
::v-deep .el-checkbox-group{ |
||||
|
.el-checkbox{ |
||||
|
margin-right: 10px !important; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-pagination{ |
||||
|
margin: 24px 0 10px 0 !important |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue