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

144 lines
4.8 KiB

<template>
<div>
<div class="head-container">
<el-button size="mini" class="iconfont icon-jiechu-fanbai" :disabled="!selections.length" @click="handleLendBtn">借出</el-button>
<el-button size="mini" class="iconfont icon-dengji-fanbai" :disabled="!selections.length" @click="handelReRecord">重新登记</el-button>
<el-button size="mini" class="iconfont icon-yichu-fanbai" :disabled="!selections.length" @click="handleRemove">移出</el-button>
<el-button :disabled="selections.length !== 1" :loading="crud.downloadLoading" size="mini" icon="el-icon-download">导出</el-button>
</div>
<!--表格渲染-->
<el-table
ref="table"
:data="tableData"
style="min-width: 100%"
height="calc(100vh - 355px)"
:cell-class-name="cell"
:default-sort="{ prop: 'operationTime', 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="docNum" align="center" label="单据号" min-width="85" />
<el-table-column prop="archiveNum" align="center" label="数量" min-width="50" />
<el-table-column prop="borrowerName" align="center" label="借阅人" min-width="60" />
<el-table-column prop="borrowerDepartment" align="center" label="所属部门" min-width="85" />
<el-table-column prop="borrowerIdType" align="center" label="证件类型" min-width="85" />
<el-table-column prop="borrowerIdNum" align="center" label="证件号码" min-width="120" />
<el-table-column prop="borrowerTel" align="center" label="电话号码" min-width="85" />
<el-table-column prop="borrowDays" align="center" label="借阅时间" min-width="150" />
<el-table-column prop="borrowGoal" align="center" label="借阅目的" min-width="70" />
<el-table-column prop="noLendStatus" align="center" label="借阅状态" min-width="70">
<template slot-scope="scope">
<!-- 待借阅 -->
<span class="cell-lend" style="width:76px">{{ scope.row.noLendStatus }}</span>
</template>
</el-table-column>
<el-table-column sortable prop="operationTime" align="center" label="操作时间" min-width="120" />
</el-table>
<!--借出弹框-->
<lendDialog ref="lendDialogDom" />
<!-- 移出确认弹框 -->
<delConfirm ref="delConfirmDom" :list-name="listName" />
<!-- 档案详情 -->
<archiveDetail ref="archiveDetailDom" />
<!-- 分页 -->
<pagination />
</div>
</template>
<script>
import pagination from '@crud/Pagination'
import CRUD, { presenter } from '@crud/crud'
// import crudOperation from '@crud/CRUD.operation'
import delConfirm from '../components/delConfirm.vue'
import archiveDetail from './module/archiveDetail.vue'
import lendDialog from './module/lendDialog.vue'
import data1 from '../data1.json'
export default {
components: { pagination, archiveDetail, delConfirm, lendDialog },
mixins: [presenter()],
cruds() {
return CRUD({
url: 'api/case/initCaseList',
// crudMethod: caseCrudMethod,
title: '档案盒',
optShow: {
add: false,
edit: false,
del: false,
download: true,
group: false
}
})
},
data() {
return {
tableData: [],
selections: [],
lendForm: {},
listName: '借出确认'
}
},
created() {
this.getData()
},
methods: {
getData() {
this.tableData = data1.rows
},
selectionChangeHandler(val) {
this.selections = val
},
// 档案详情
handleDbClick(row) {
// this.$refs.table.clearSelection()
const archiveDetailDom = this.$refs.archiveDetailDom
archiveDetailDom.detailVisible = true
const arr = data1.rows.filter(item => item.docNum === row.docNum)
archiveDetailDom.rowData = row
archiveDetailDom.tableData = arr
console.log(arr)
},
clickRowHandler(row) {
this.$refs.table.toggleRowSelection(row)
},
// 重新登记返回上一级
handelReRecord() {
console.log(11)
this.$emit('callBack', { index: 0 })
},
// 移出
handleRemove() {
if (this.selections.length > 0) {
this.$refs.delConfirmDom.deleteVisible = true
}
},
cell({ row, columnIndex }) {
if (columnIndex === 11) {
return 'no-lend'
}
},
handleLendBtn() {
if (this.selections.length > 0) {
this.$refs.lendDialogDom.table = this.selections
this.$refs.lendDialogDom.lendFormVisible = true
}
}
}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/lend-manage.scss';
::v-deep .el-dialog__footer {
background-color: #031435;
}
.el-dialog .dialog-footer {
padding: 0;
margin: 0;
}
</style>