You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
11 KiB
361 lines
11 KiB
<template>
|
|
<el-dialog :title="title" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="lendFormVisible" :before-close="handleCloseDialog" @opened="opened">
|
|
<div class="setting-dialog">
|
|
<el-form ref="form" :model="form" :rules="rules" inline label-width="100px">
|
|
<el-form-item label="利用人" prop="applicant">
|
|
<el-input v-model="form.applicant" style="width: 280px;" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="利用流程" prop="title">
|
|
<el-input v-model="form.title" style="width: 280px;" />
|
|
</el-form-item>
|
|
<el-form-item label="开始时间" prop="giveStartTime">
|
|
<el-date-picker
|
|
v-model="form.giveStartTime"
|
|
:picker-options="pickerStartTime"
|
|
type="datetime"
|
|
align="right"
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
placeholder="选择日期时间"
|
|
style="width: 280px;"
|
|
disabled
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="结束时间" prop="giveEndTime">
|
|
<el-date-picker
|
|
v-model="form.giveEndTime"
|
|
:picker-options="pickerEndTime"
|
|
type="datetime"
|
|
align="right"
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
placeholder="选择日期时间"
|
|
style="width: 280px;"
|
|
/>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-form-item label="利用事由" prop="borrowReason">
|
|
<el-input v-model="form.borrowReason" type="textarea" :rows="3" style="width: 703px;" />
|
|
</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="maintitle" label="档案文件" show-overflow-tooltip>
|
|
<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="checkedId" label="利用方式" width="340">
|
|
<template slot-scope="scope">
|
|
<!-- <el-checkbox v-for="item in scope.row.childMenu" :key="item.value" v-model="item.checked" :label="item.value" :data-a="responsive" @change="changeChecked(item)">{{ item.label }}</el-checkbox> -->
|
|
<el-checkbox-group v-model="scope.row.checkedId" :min="1" class="checkbox-style" @change="changeChecked">
|
|
<el-checkbox v-for="item in scope.row.childMenu" :key="item.value" :label="item.value" :data-a="responsive">{{ item.label }}</el-checkbox>
|
|
</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 @click.native="handleCloseDialog">取消</el-button>
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchFondsDetail } from '@/api/system/fonds'
|
|
import { FetchIntoFlowBusiness } from '@/api/archivesManage/library'
|
|
import { FetchBusinessFlowTitle } from '@/api/collect/collect'
|
|
import { mapGetters } from 'vuex'
|
|
import { getCurrentTime } from '@/utils/index'
|
|
export default {
|
|
name: 'LendForm',
|
|
components: { },
|
|
data() {
|
|
return {
|
|
title: '利用详情',
|
|
lendFormVisible: false,
|
|
form: {
|
|
applicant: null,
|
|
title: null,
|
|
giveStartTime: null,
|
|
giveEndTime: null,
|
|
borrowReason: null,
|
|
fondsNo: null
|
|
},
|
|
checkedEquipments: [],
|
|
detailArcData: [],
|
|
responsive: true,
|
|
uselist: [
|
|
{
|
|
value: 1,
|
|
label: '电子查看'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '下载'
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '打印'
|
|
},
|
|
{
|
|
value: 4,
|
|
label: '实体借阅'
|
|
}
|
|
],
|
|
rules: {
|
|
title: [
|
|
{ required: true, message: '标题不可为空', trigger: 'blur' }
|
|
],
|
|
giveStartTime: [
|
|
{ required: true, message: '开始时间不可为空', trigger: 'blur' }
|
|
],
|
|
giveEndTime: [
|
|
{ required: true, message: '结束时间不可为空', trigger: 'blur' }
|
|
],
|
|
borrowReason: [
|
|
{ required: true, message: '利用事由不可为空', trigger: 'blur' }
|
|
]
|
|
},
|
|
checkedArr: []
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user',
|
|
'baseApi'
|
|
]),
|
|
pickerStartTime() {
|
|
const _this = this
|
|
return {
|
|
disabledDate: time => {
|
|
if (_this.form.giveEndTime) {
|
|
const giveEndTime = _this.form.giveEndTime.replace(/-/g, '/')
|
|
return time.getTime() > new Date(giveEndTime)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
pickerEndTime() {
|
|
const _this = this
|
|
return {
|
|
disabledDate: time => {
|
|
if (_this.form.giveStartTime) {
|
|
const giveStartTime = _this.form.giveStartTime.replace(/-/g, '/')
|
|
return time.getTime() < new Date(giveStartTime)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
opened() {
|
|
this.form.applicant = this.user.username
|
|
this.form.giveStartTime = getCurrentTime()
|
|
this.getFondsDetail()
|
|
// this.$refs.archivesListModule.getViewTable()
|
|
console.log(this.detailArcData)
|
|
},
|
|
// changeChecked(item) {
|
|
// console.log('item', item)
|
|
// this.responsive = !this.responsive
|
|
// },
|
|
changeChecked() {
|
|
this.responsive = !this.responsive
|
|
this.checkedArr = []
|
|
this.detailArcData.forEach((item) => {
|
|
for (let i = 0; i < item.checkedId.length; i++) {
|
|
for (let j = 0; j < item.childMenu.length; j++) {
|
|
if (item.checkedId[i] === item.childMenu[j].value) {
|
|
this.checkedArr.push(item.childMenu[j].value)
|
|
}
|
|
}
|
|
}
|
|
console.log(this.checkedArr) // 输出当前选中的所有checkbox的value值
|
|
})
|
|
},
|
|
getFondsDetail() {
|
|
FetchFondsDetail({ id: this.user.fonds.id }).then((res) => {
|
|
this.form.fondsNo = res.fondsNo
|
|
if (res.fondsNo) {
|
|
this.getBusinessFlowTitle()
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
getBusinessFlowTitle() {
|
|
const params = {
|
|
'username': this.user.username,
|
|
'fondsNo': this.form.fondsNo,
|
|
'businessType': 5
|
|
}
|
|
FetchBusinessFlowTitle(params).then((res) => {
|
|
if (res.code !== 500) {
|
|
console.log(res)
|
|
this.form.title = res
|
|
} else {
|
|
this.$message({ message: '失败', type: 'error', offset: 8 })
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
submitForm() {
|
|
console.log(this.form.checkedId)
|
|
this.$refs['form'].validate((valid) => {
|
|
if (valid) {
|
|
const archivesIds = this.detailArcData.map(val => val.archivesId)
|
|
const utilizeDTO = this.detailArcData.map(item => {
|
|
const json = {
|
|
'archivesId': item.archivesId,
|
|
'categoryId': item.categoryPid,
|
|
'categoryLevel': item.categoryLevel,
|
|
'utilizeType': item.checkedId.join(',')
|
|
}
|
|
return json
|
|
})
|
|
const params = {
|
|
'title': this.form.title, // 流程名称
|
|
'applicant': this.user.username, // 申请人
|
|
'businessType': 5,
|
|
'borrowReason': this.form.borrowReason,
|
|
'giveStartTime': this.form.giveStartTime, // 赋权开始时间
|
|
'giveEndTime': this.form.giveEndTime, // 赋权结束时间
|
|
'fondsNo': this.form.fondsNo, // 原始全宗
|
|
'archivesIds': archivesIds,
|
|
'utilizeDTO': utilizeDTO
|
|
}
|
|
FetchIntoFlowBusiness(params).then((res) => {
|
|
if (res.code !== 5001 && res.code !== 500) {
|
|
this.$message({ message: '操作提交成功', type: 'success', offset: 8 })
|
|
this.$emit('close-dialog')
|
|
} else {
|
|
// const message = JSON.parse(res.message)
|
|
// this.$message.error(message.fail.join(',') + '操作提交失败')
|
|
this.$message({ message: res.message, type: 'error', offset: 8 })
|
|
}
|
|
this.handleCloseDialog()
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
} else {
|
|
console.log('error submit!!')
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
tableDoubleClick(row) {
|
|
this.lendDetail = true
|
|
},
|
|
handleCloseDialog(done) {
|
|
this.form.title = ''
|
|
this.form.reason = ''
|
|
this.form.giveStartTime = null
|
|
this.form.giveEndTime = null
|
|
this.$refs['form'].resetFields()
|
|
this.lendFormVisible = 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>
|