【前端】智能库房综合管理系统前端项目
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.
 
 
 
 
 

132 lines
4.4 KiB

<template>
<div class="to-lend">
<div class="head-container">
<el-button size="mini" class="iconfont icon-dengji-fanbai" :disabled="!selections.length" @click="handleRecord">登记</el-button>
<el-button size="mini" class="iconfont icon-yichu-fanbai" :disabled="!selections.length" @click="handleRemove">移出</el-button>
</div>
<!--表格渲染-->
<el-table
ref="table"
v-loading="crud.loading"
style="min-width: 100%"
height="calc(100vh - 355px)"
:data="crud.data"
@selection-change="selectionChangeHandler"
@row-click="clickRowHandler"
@row-dblclick="handleLendDbClick"
>
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" align="center" width="55" />
<el-table-column prop="categoryName" label="门类名称" align="center" min-width="85" />
<el-table-column prop="archiveNo" label="档号" align="center" min-width="120" />
<el-table-column prop="maintitle" align="center" label="题名" min-width="120" />
<el-table-column prop="caseName" align="center" label="盒名称" min-width="85" />
<el-table-column prop="folderLocationDetails" align="center" label="存放位置" min-width="160">
<template slot-scope="scope">
<div v-if="scope.row.folderLocationDetails && scope.row.folderLocationDetails.includes(',')">
<el-tag
v-for="(item,index) in scope.row.folderLocationDetails.split(',')"
:key="index"
:type="item"
effect="dark"
>
{{ item }}
</el-tag>
</div>
<div v-else>
<el-tag v-if="scope.row.folderLocationDetails" effect="dark">{{ scope.row.folderLocationDetails }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="borrowType" align="center" label="借阅状态" min-width="60">
<template slot-scope="scope">
<span class="cell-lend no-lend" style="width:80px">{{ scope.row.borrowType | borrowStatus }}
</span>
</template>
</el-table-column>
<el-table-column prop="createTime" align="center" label="操作时间" min-width="120">
<template slot-scope="scope">
<div>{{ scope.row.createTime | parseTime }}</div>
</template>
</el-table-column>
</el-table>
<!-- 借阅登记模态框 -->
<lend-record ref="lendRecordDom" />
<!-- 移出确认弹框 -->
<delConfirm ref="delConfirmDom" :list-name="listName" :is-list-type="isListType" />
<!-- 档案详情 -->
<archiveDetail ref="archiveDetailDom" />
<!-- 分页 -->
<pagination />
</div>
</template>
<script>
import CRUD, { presenter } from '@crud/crud'
import { lendingCrud } from '../mixins/lending'
import pagination from '@crud/Pagination'
import lendRecord from './module/lendRecord.vue'
import delConfirm from '../components/delConfirm.vue'
import archiveDetail from './module/archiveDetail.vue'
export default {
name: 'ToLend',
components: { pagination, delConfirm, archiveDetail, lendRecord },
mixins: [presenter(), lendingCrud],
cruds() {
return CRUD({
url: 'api/borrow/initWaitRegisterList',
title: '待借档案',
optShow: {
add: false,
edit: false,
del: false,
download: false,
group: false
}
})
},
data() {
return {
selections: [],
listName: '待借列表',
isListType: 1 // 移出框类型判断 待借1 / 借阅2
}
},
created() {
},
methods: {
// 登记借出
handleRecord() {
this.$refs.lendRecordDom.recordFormVisible = true
this.$refs.lendRecordDom.recordSelections = this.selections
},
// 移出
handleRemove() {
if (this.selections.length > 0) {
this.$refs.delConfirmDom.deleteVisible = true
this.$refs.delConfirmDom.deltSelections = this.selections
}
},
// 档案详情
handleLendDbClick(row) {
// this.$refs.table.clearSelection()
this.$nextTick(() => {
this.$refs.archiveDetailDom.detailVisible = true
this.$refs.archiveDetailDom.rowData = row
})
},
clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row) // 单击选中
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
::v-deep .el-range-separator{
color: #fff;
padding-top:2px ;
}
</style>