|
|
|
@ -1,8 +1,16 @@ |
|
|
|
<template> |
|
|
|
<div class="to-lend"> |
|
|
|
<headSlot> |
|
|
|
<el-button icon="el-icon-plus" size="mini" @click="handleRecord">登记</el-button> |
|
|
|
<el-button icon="el-icon-minus" size="mini">移出</el-button> |
|
|
|
<el-button |
|
|
|
icon="el-icon-plus" |
|
|
|
size="mini" |
|
|
|
@click="handleRecord" |
|
|
|
>登记</el-button> |
|
|
|
<el-button |
|
|
|
icon="el-icon-minus" |
|
|
|
size="mini" |
|
|
|
@click="handleRemove" |
|
|
|
>移出</el-button> |
|
|
|
</headSlot> |
|
|
|
|
|
|
|
<!--表格渲染--> |
|
|
|
@ -23,6 +31,94 @@ |
|
|
|
<el-table-column prop="isColumnLength" label="借阅状态" min-width="85" /> |
|
|
|
<el-table-column prop="isColumnLength" label="操作时间" min-width="85" /> |
|
|
|
</el-table> |
|
|
|
<!-- 借阅登记模态框 --> |
|
|
|
<el-dialog |
|
|
|
append-to-body |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="recordFormVisible" |
|
|
|
title="借阅登记" |
|
|
|
> |
|
|
|
<span class="dialog-right-top" /> |
|
|
|
<span class="dialog-left-bottom" /> |
|
|
|
<div class="setting-dialog"> |
|
|
|
<el-form |
|
|
|
ref="form" |
|
|
|
:model="recordForm" |
|
|
|
:rules="rules" |
|
|
|
size="small" |
|
|
|
label-width="80px" |
|
|
|
> |
|
|
|
<el-form-item label="借阅人" prop="borrowerName"> |
|
|
|
<el-input v-model="recordForm.borrowerName" style="width: 420px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="电话号码" prop="tel"> |
|
|
|
<el-input v-model="recordForm.tel" style="width: 420px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="所属部门" prop="department" class="down-select"> |
|
|
|
<el-select |
|
|
|
v-model="recordForm.departmentDatas" |
|
|
|
style="width: 420px" |
|
|
|
multiple |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in recordForm.departmentDatas" |
|
|
|
:key="item.name" |
|
|
|
:disabled="level !== 1 && item.level <= level" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="证件类型" prop="idType" class="down-select"> |
|
|
|
<el-select |
|
|
|
v-model="recordForm.idType" |
|
|
|
style="width: 420px" |
|
|
|
multiple |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in recordForm.idType" |
|
|
|
:key="item.name" |
|
|
|
:disabled="level !== 1 && item.level <= level" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="证件号码" prop="idNumber"> |
|
|
|
<el-input v-model="recordForm.idNumber" style="width: 420px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="借阅时间" prop="lendDate"> |
|
|
|
<date-range-picker style="width: 420px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="借阅目的" prop="borrowGoal" class="down-select"> |
|
|
|
<el-select |
|
|
|
v-model="recordForm.borrowGoal" |
|
|
|
style="width: 420px" |
|
|
|
multiple |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in recordForm.borrowGoal" |
|
|
|
:key="item.name" |
|
|
|
:disabled="level !== 1 && item.level <= level" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="recordFormVisible = false">取消</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
@click="handleRecordConfirm" |
|
|
|
>确认</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
<!-- 分页 --> |
|
|
|
<!-- <el-pagination |
|
|
|
:current-page="currentPage4" |
|
|
|
@ -42,23 +138,71 @@ |
|
|
|
// import crudOperation from '@crud/CRUD.operation' |
|
|
|
// import CRUD, { presenter } from '@crud/crud' |
|
|
|
import headSlot from '../components/headSlot.vue' |
|
|
|
import DateRangePicker from '@/components/DateRangePicker' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { headSlot }, |
|
|
|
components: { headSlot, DateRangePicker }, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [] |
|
|
|
tableData: [], |
|
|
|
recordFormVisible: false, |
|
|
|
recordForm: { |
|
|
|
borrowerName: '', |
|
|
|
tel: '', |
|
|
|
departmentDatas: [], |
|
|
|
idType: [], |
|
|
|
idNumber: '', |
|
|
|
lendDate: '', |
|
|
|
borrowGoal: [] |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
borrowerName: [ |
|
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' } |
|
|
|
], |
|
|
|
tel: [{ required: true, message: '请输入电话号码', trigger: 'blur' }] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleRecord() { |
|
|
|
console.log(111111) |
|
|
|
this.recordFormVisible = true |
|
|
|
}, |
|
|
|
handleRemove() { |
|
|
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}).then(() => { |
|
|
|
this.$message({ |
|
|
|
type: 'success', |
|
|
|
message: '删除成功!' |
|
|
|
}) |
|
|
|
}).catch(() => { |
|
|
|
this.$message({ |
|
|
|
type: 'info', |
|
|
|
message: '已取消删除' |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
selectionChangeHandler() { |
|
|
|
console.log('selectionChangeHandler') |
|
|
|
}, |
|
|
|
clickRowHandler() { |
|
|
|
console.log('clickRowHandler') |
|
|
|
}, |
|
|
|
handleRecordConfirm() { |
|
|
|
console.log(111111) |
|
|
|
this.recordFormVisible = false |
|
|
|
// this.$alert('这是一段内容', '标题名称', { |
|
|
|
// confirmButtonText: '确定', |
|
|
|
// callback: action => { |
|
|
|
// this.$message({ |
|
|
|
// type: 'info', |
|
|
|
// message: `action: ${ action }` |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -66,6 +210,5 @@ export default { |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.to-lend { |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
