|
|
|
@ -3,7 +3,7 @@ |
|
|
|
<div class="head-container"> |
|
|
|
<div class="head-search"> |
|
|
|
<el-input |
|
|
|
v-model="keyWord" |
|
|
|
v-model="typeValue" |
|
|
|
size="small" |
|
|
|
clearable |
|
|
|
placeholder="请输入关键词" |
|
|
|
@ -11,8 +11,9 @@ |
|
|
|
class="input-prepend filter-item" |
|
|
|
@clear="crud.toQuery" |
|
|
|
@keyup.enter.native="crud.toQuery" |
|
|
|
@input="typeInput" |
|
|
|
> |
|
|
|
<el-select slot="prepend" v-model="optionVal" style="width: 92px"> |
|
|
|
<el-select slot="prepend" v-model="inputSelect" style="width: 92px" @change="clearInputValue"> |
|
|
|
<el-option |
|
|
|
v-for="item in options" |
|
|
|
:key="item.value" |
|
|
|
@ -21,20 +22,14 @@ |
|
|
|
/> |
|
|
|
</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> |
|
|
|
<date-range-picker v-model="blurryTime" 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> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
v-loading="crud.loading" |
|
|
|
:data="crud.data" |
|
|
|
style="width: 100%;" |
|
|
|
height="calc(100% - 100px)" |
|
|
|
@ -53,32 +48,30 @@ |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="nickName" label="利用人" align="center" width="120" /> |
|
|
|
<el-table-column prop="borrowReason" label="利用事由" /> |
|
|
|
<el-table-column prop="browser" label="包含实体借阅" align="center" width="110"> |
|
|
|
<template> |
|
|
|
<el-table-column prop="isEntityBorrow" label="包含实体借阅" align="center" width="110"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
<span class="iconfont icon-fou" /> |
|
|
|
<span class="iconfont icon-shi" /> |
|
|
|
<span class="iconfont icon-dengdai" /> |
|
|
|
<span class="iconfont icon-cuowu1" /> |
|
|
|
<span v-if="scope.row.isEntityBorrow === 0" class="iconfont icon-fou" /> |
|
|
|
<span v-else class="iconfont icon-shi" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="browser" label="是否已归还" align="center" width="110"> |
|
|
|
<template> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
<span class="iconfont icon-fou" /> |
|
|
|
<span class="iconfont icon-shi" /> |
|
|
|
<span class="iconfont icon-dengdai" /> |
|
|
|
<span class="iconfont icon-cuowu1" /> |
|
|
|
<span v-if="scope.row.isEntityBorrow === 0" class="iconfont icon-fou" /> |
|
|
|
<span v-if="scope.row.isEntityBorrow > 0 && scope.row.isLend === 0" class="iconfont icon-shi" /> |
|
|
|
<!-- <span class="iconfont icon-dengdai" /> --> |
|
|
|
<span v-if="scope.row.isEntityBorrow > 0 && scope.row.isLend > 0" class="iconfont icon-cuowu1" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="createTime" label="状态" align="center" width="110"> |
|
|
|
<template> |
|
|
|
<el-table-column prop="borrowType" label="状态" align="center" width="110"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
<span class="row-state soon-state">即将到期</span> |
|
|
|
<!-- <span class="row-state end-state">利用中</span> |
|
|
|
<span class="row-state cancel-state">已过期</span> --> |
|
|
|
<span v-if="scope.row.borrowType==='即将到期'" class="row-state soon-state">{{ scope.row.borrowType }}</span> |
|
|
|
<span v-if="scope.row.borrowType==='利用中'" class="row-state end-state">{{ scope.row.borrowType }}</span> |
|
|
|
<span v-if="scope.row.borrowType==='已到期'" class="row-state cancel-state">{{ scope.row.borrowType }}</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
@ -87,32 +80,22 @@ |
|
|
|
|
|
|
|
<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> |
|
|
|
<ul class="hitch-info"> |
|
|
|
<li><span>标题：</span>{{ rowCurrent && rowCurrent.title }}</li> |
|
|
|
<li><span>申请时间：</span>{{ rowCurrent && rowCurrent.createTime }}</li> |
|
|
|
<li><span>利用人：</span>{{ rowCurrent && rowCurrent.applicant }}</li> |
|
|
|
<li><span>申请部门：</span>{{ rowCurrent && rowCurrent.deptsName }}</li> |
|
|
|
<li><span>申请理由：</span>{{ rowCurrent && rowCurrent.reason }}</li> |
|
|
|
<li><span>开始时间：</span>{{ rowCurrent && rowCurrent.giveStartTime | parseTime }}</li> |
|
|
|
<li><span>结束时间：</span>{{ rowCurrent && rowCurrent.giveEndTime | parseTime }}</li> |
|
|
|
<li><span>审批意见：</span>{{ rowCurrent && rowCurrent.opinion }}</li> |
|
|
|
<li class="state-list"> |
|
|
|
<span v-if="rowCurrent && rowCurrent.status === 1" class="row-state ing-state">进行中</span> |
|
|
|
<span v-if="rowCurrent && rowCurrent.status === 2" class="row-state case-cancel">已取消</span> |
|
|
|
<span v-if="rowCurrent && rowCurrent.status === 3" class="row-state end-state">已完成</span> |
|
|
|
<span v-if="rowCurrent && rowCurrent.status === 4" class="row-state cancel-state">不通过</span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<el-table |
|
|
|
ref="table" |
|
|
|
:data="detailArcData" |
|
|
|
@ -121,26 +104,26 @@ |
|
|
|
> |
|
|
|
<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 slot-scope="scope"> |
|
|
|
<div class="title-style"><span>文件</span>【{{ scope.row.archiveNo }}】{{ scope.row.maintitle }}</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-table-column prop="utilizeType" label="利用方式" width="340"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-checkbox-group v-model="scope.row.utilizeType" class="checkbox-style"> |
|
|
|
<el-checkbox v-for="item in uselist" :key="item.value" :label="item.value" disabled>{{ item.label }}</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="createTime" label="实体借阅状态" align="center" width="110"> |
|
|
|
<template> |
|
|
|
<el-table-column prop="utilizeState" label="实体借阅状态" align="center" width="110"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div> |
|
|
|
<span class="row-state soon-state">即将到期</span> |
|
|
|
<!-- <span class="row-state end-state">利用中</span> |
|
|
|
<span class="row-state cancel-state">已过期</span> --> |
|
|
|
<!-- 实体利用状态 -1.未确认流程(未审批) 0.无需借阅 1.同意借阅 2.不允许借阅 3.已归还 --> |
|
|
|
<span v-if="scope.row.utilizeState === -1" class="row-state soon-state">审批中</span> |
|
|
|
<span v-if="scope.row.utilizeState === 0" class="row-state end-state">无需借阅</span> |
|
|
|
<span v-if="scope.row.utilizeState === 1" class="row-state end-state">同意借阅</span> |
|
|
|
<span v-if="scope.row.utilizeState === 2" class="row-state cancel-state">不允许借阅</span> |
|
|
|
<span v-if="scope.row.utilizeState === 3" class="row-state end-state">已归还</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
@ -157,6 +140,7 @@ |
|
|
|
import CRUD, { presenter, crud } from '@crud/crud' |
|
|
|
import pagination from '@crud/Pagination' |
|
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
import { FetchBusinessFlowDetails } from '@/api/archivesManage/library' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'RecordList', |
|
|
|
@ -184,25 +168,34 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
selections: [], |
|
|
|
keyWord: null, |
|
|
|
typeValue: null, |
|
|
|
options: [ |
|
|
|
{ value: 'createBy', label: '利用人' }, |
|
|
|
{ value: 'borrowReason', label: '利用事由' } |
|
|
|
], |
|
|
|
optionVal: '', |
|
|
|
startTime: null, |
|
|
|
endTime: null, |
|
|
|
inputSelect: '', |
|
|
|
blurryTime: null, |
|
|
|
lendDetail: false, |
|
|
|
form: { |
|
|
|
user: '张三', |
|
|
|
process: '档案借阅流程-张三-2023-01-01', |
|
|
|
startDate: '2016-09-21 08:50:08', |
|
|
|
endDate: '2016-10-21 08:50:08', |
|
|
|
remark: '利用事由' |
|
|
|
}, |
|
|
|
rowCurrent: null, |
|
|
|
detailArcData: [], |
|
|
|
checkList: ['电子查看', '实体借阅'] |
|
|
|
uselist: [ |
|
|
|
{ |
|
|
|
value: 1, |
|
|
|
label: '电子查看' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 2, |
|
|
|
label: '下载' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 3, |
|
|
|
label: '打印' |
|
|
|
}, |
|
|
|
{ |
|
|
|
value: 4, |
|
|
|
label: '实体借阅' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -215,32 +208,100 @@ export default { |
|
|
|
this.crud.toQuery() |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 初始化带select的输入框的 - 搜索 |
|
|
|
this.inputSelect = this.options[0].value |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
typeInput(e) { |
|
|
|
this.typeInputkey = this.getDescByValue( |
|
|
|
this.inputSelect, |
|
|
|
this.options, |
|
|
|
'value', |
|
|
|
'value' |
|
|
|
) |
|
|
|
this.crud.query[this.typeInputkey] = e |
|
|
|
}, |
|
|
|
clearInputValue(val) { |
|
|
|
this.inputSelect = val |
|
|
|
this.typeValue = '' |
|
|
|
// 避免向后端传递多余参数,切换和重置时，若有typeInputkey则去掉form中对应参数 |
|
|
|
if (this.typeInputkey) { |
|
|
|
delete this.crud.query[this.typeInputkey] |
|
|
|
} |
|
|
|
}, |
|
|
|
getDescByValue(inputValue, data, inputKey = 'value', outputKey = 'value') { |
|
|
|
let outputValue = '' |
|
|
|
if (data && data.length > 0) { |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
const item = data[i] |
|
|
|
const itemValue = item[inputKey] |
|
|
|
if (inputValue + '' === itemValue + '') { |
|
|
|
outputValue = item[outputKey] |
|
|
|
break |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
return outputValue |
|
|
|
}, |
|
|
|
[CRUD.HOOK.beforeRefresh]() { |
|
|
|
if (this.activeIndex === 0) { |
|
|
|
this.crud.query.isExpire = 2 |
|
|
|
} else { |
|
|
|
this.crud.query.isExpire = 1 |
|
|
|
} |
|
|
|
if (this.blurryTime) { |
|
|
|
this.crud.query.startTime = this.blurryTime[0] |
|
|
|
this.crud.query.endTime = this.blurryTime[1] |
|
|
|
} else { |
|
|
|
this.crud.query.startTime = null |
|
|
|
this.crud.query.endTime = null |
|
|
|
} |
|
|
|
}, |
|
|
|
resetQuery() { |
|
|
|
|
|
|
|
this.clearInputValue() |
|
|
|
this.inputSelect = this.options[0].value |
|
|
|
this.blurryTime = [] |
|
|
|
this.crud.query.startTime = null |
|
|
|
this.crud.query.endTime = null |
|
|
|
this.crud.toQuery() |
|
|
|
}, |
|
|
|
getBusinessFlowDetails(row) { |
|
|
|
const params = { |
|
|
|
'businessId': row.businessFlowId |
|
|
|
} |
|
|
|
FetchBusinessFlowDetails(params).then((res) => { |
|
|
|
if (res.code !== 500) { |
|
|
|
console.log(res) |
|
|
|
this.rowCurrent = res.businessFlow |
|
|
|
res.details.forEach(item => { |
|
|
|
item.utilizeType = item.utilizeType.split(',').map(Number) |
|
|
|
}) |
|
|
|
this.detailArcData = res.details |
|
|
|
console.log(this.detailArcData) |
|
|
|
} else { |
|
|
|
this.$message({ message: '获取数据失败', type: 'error', offset: 8 }) |
|
|
|
} |
|
|
|
}).catch(err => { |
|
|
|
console.log(err) |
|
|
|
}) |
|
|
|
}, |
|
|
|
tableDoubleClick(row) { |
|
|
|
this.getBusinessFlowDetails(row) |
|
|
|
this.lendDetail = true |
|
|
|
}, |
|
|
|
handleCloseDialog(done) { |
|
|
|
this.lendDetail = false |
|
|
|
// 关闭弹框 |
|
|
|
// done() |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@import "~@/assets/styles/collect-reorganizi.scss"; |
|
|
|
|
|
|
|
.recordList-main{ |
|
|
|
height: calc(100vh - 236px); |
|
|
|
.start-date, |
|
|
|
@ -311,4 +372,9 @@ export default { |
|
|
|
::v-deep .input-prepend .el-input__inner{ |
|
|
|
padding-left: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.row-state{ |
|
|
|
font-style: normal; |
|
|
|
padding: 0 8px; |
|
|
|
} |
|
|
|
</style> |
