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