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.
250 lines
8.0 KiB
250 lines
8.0 KiB
<template>
|
|
<div class="to-lend">
|
|
<headSlot>
|
|
<el-button size="mini" @click="handleRecord">
|
|
<svg-icon icon-class="dengji-fanbai" class-name="svg-style" />登记</el-button>
|
|
<el-button size="mini" @click="handleRemove">
|
|
<svg-icon icon-class="yichu-fanbai" class-name="svg-style" />移出</el-button>
|
|
<!-- <button @click="getTableData">测试按钮</button> -->
|
|
</headSlot>
|
|
|
|
<!--表格渲染-->
|
|
<el-table
|
|
ref="table"
|
|
style="min-width: 100%"
|
|
height="calc(100vh - 355px)"
|
|
:data="tableData"
|
|
:default-sort="{ prop: 'isOperationTime', order: 'descending' }"
|
|
@selection-change="selectionChangeHandler"
|
|
@row-click="clickRowHandler"
|
|
@row-dblclick="handleDbClick"
|
|
>
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column type="index" label="序号" align="center" width="55" />
|
|
<el-table-column prop="isCategoryName" label="所属门类" align="center" min-width="85" />
|
|
<el-table-column prop="isArchivesID" label="档号" align="center" min-width="120" />
|
|
<el-table-column prop="isTitleName" align="center" label="题名" min-width="120" />
|
|
<el-table-column prop="isFieldName" align="center" label="盒名称" min-width="85" />
|
|
<el-table-column prop="isStoragePath" align="center" label="存放位置" min-width="120" />
|
|
<el-table-column prop="isLendStatus" align="center" label="借阅状态" min-width="60">
|
|
<template slot-scope="scope">
|
|
<!-- 待登记 -->
|
|
<span class="cell-lend">{{ scope.row.isLendStatus }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="isOperationTime" align="center" 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 v-model="lendDates" style="width: 420px" />
|
|
<!-- <el-date-picker v-model="lendDates" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" 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>
|
|
<!-- 移出确认弹框 -->
|
|
<delConfirm ref="delConfirmDom" :list-name="listName" />
|
|
<!-- 档案详情 -->
|
|
<archiveDetail ref="archiveDetailDom" />
|
|
<!-- 分页 -->
|
|
<pagination />
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import crudUser from '@/api/system/user'
|
|
|
|
import pagination from '@crud/Pagination'
|
|
// import crudOperation from '@crud/CRUD.operation'
|
|
import headSlot from '../components/headSlot.vue'
|
|
import DateRangePicker from '@/components/DateRangePicker'
|
|
import CRUD, { presenter, crud } from '@crud/crud'
|
|
import delConfirm from '../components/delConfirm.vue'
|
|
import archiveDetail from './module/archiveDetail.vue'
|
|
import data2 from '../data2.json'
|
|
export default {
|
|
components: { headSlot, pagination, delConfirm, archiveDetail, DateRangePicker },
|
|
mixins: [presenter(), crud()],
|
|
cruds() {
|
|
return CRUD({
|
|
// title: '岗位',
|
|
// url: 'api/job',
|
|
// crudMethod: { ...crudUser },
|
|
optShow: {
|
|
add: false,
|
|
edit: false,
|
|
del: false,
|
|
download: false,
|
|
group: false
|
|
}
|
|
})
|
|
},
|
|
data() {
|
|
return {
|
|
lendDates: '',
|
|
tableData: [],
|
|
selections: [],
|
|
listName: '借出列表',
|
|
recordFormVisible: false,
|
|
recordForm: {
|
|
borrowerName: '',
|
|
tel: '',
|
|
departmentDatas: [],
|
|
idType: [],
|
|
idNumber: '',
|
|
lendDate: '',
|
|
borrowGoal: []
|
|
},
|
|
rules: {
|
|
borrowerName: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' }
|
|
],
|
|
tel: [{ required: true, message: '请输入电话号码', trigger: 'blur' }]
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
// 获取数据
|
|
getData() {
|
|
this.tableData = data2.rows
|
|
},
|
|
handleRecord() {
|
|
this.recordFormVisible = true
|
|
},
|
|
// 移出
|
|
handleRemove() {
|
|
this.$refs.delConfirmDom.deleteVisible = true
|
|
},
|
|
// 档案详情
|
|
handleDbClick(row) {
|
|
this.$refs.table.clearSelection()
|
|
this.$refs.archiveDetailDom.detailVisible = true
|
|
this.$refs.archiveDetailDom.rowData = row
|
|
},
|
|
selectionChangeHandler(val) {
|
|
this.selections = val
|
|
},
|
|
clickRowHandler(row) {
|
|
this.$refs.table.toggleRowSelection(row)
|
|
},
|
|
handleRecordConfirm() {
|
|
this.recordFormVisible = false
|
|
console.log(this.lendDates)
|
|
}
|
|
// cell({ row, columnIndex }) {
|
|
// if (row.isLendStatus === '待借' && columnIndex === 7) {
|
|
// return 'no-lend'
|
|
// } else if (row.isLendStatus === '已借' && columnIndex === 7) {
|
|
// return 'have-lend'
|
|
// } else if (row.isLendStatus === '' && columnIndex === 7) {
|
|
// return 'other-lend'
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// @import '~@/assets/styles/lend-manage.scss';
|
|
.cell-lend{
|
|
display: inline-block;
|
|
text-align: center;
|
|
width: 76px;
|
|
height: 26px;
|
|
line-height: 26px;
|
|
color: #F65163;
|
|
border: 1px solid #F65163;
|
|
border-radius:13px ;
|
|
}
|
|
::v-deep .el-range-separator{
|
|
color: #fff;
|
|
padding-top:2px ;
|
|
}
|
|
.svg-style{
|
|
margin-right: 5px;
|
|
}
|
|
</style>
|