132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<template>
|
|
<page-layout title="房间">
|
|
<a-card>
|
|
<a-row>
|
|
<a-col
|
|
class="item"
|
|
:xs="{ span: 24 }"
|
|
:sm="{ span: 8, offset: 16 }"
|
|
:xl="{ span: 6, offset: 18 }">
|
|
<a-button
|
|
style="width: 100%"
|
|
type="primary"
|
|
icon="plus"
|
|
@click="$router.push({name : 'roomCreate'})">
|
|
新建
|
|
</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col class="item">
|
|
<a-table
|
|
rowKey="id"
|
|
:loading="state.loading"
|
|
:columns="columns"
|
|
:dataSource="roomList"
|
|
:pagination="false">
|
|
<template slot="operation" slot-scope="text, record, index">
|
|
<a-button-group>
|
|
<a-button type="primary" @click="$router.push({name: 'roomEdit', params: {id: record.id.toString()}})">
|
|
编辑
|
|
</a-button>
|
|
<a-button @click="$router.push({name: 'seat', params: {id: record.id.toString()}})">座位管理</a-button>
|
|
<a-button @click="handleDownload(record)">二维码</a-button>
|
|
</a-button-group>
|
|
</template>
|
|
</a-table>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</page-layout>
|
|
</template>
|
|
|
|
<script>
|
|
const columns = [
|
|
{
|
|
title: '编号',
|
|
dataIndex: 'id',
|
|
width: '30%'
|
|
},
|
|
{
|
|
title: '名称',
|
|
dataIndex: 'name',
|
|
width: '10%'
|
|
},
|
|
{
|
|
title: '座位数量',
|
|
dataIndex: 'seat_count',
|
|
width: '10%'
|
|
},
|
|
{
|
|
title: '说明',
|
|
dataIndex: 'description',
|
|
width: '20%'
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'operation',
|
|
scopedSlots: { customRender: 'operation' },
|
|
width: '30%'
|
|
}
|
|
]
|
|
|
|
import api from '../../api/room'
|
|
import PageLayout from '../../components/page/PageLayout'
|
|
import { fetchAPIBase } from '../../utils/fetch'
|
|
import { downloadFile } from '../../utils/util'
|
|
|
|
export default {
|
|
name: 'Room',
|
|
components: {
|
|
PageLayout
|
|
},
|
|
data () {
|
|
return {
|
|
columns,
|
|
state: {
|
|
loading: false,
|
|
},
|
|
roomList: [],
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData () {
|
|
this.state.loading = true
|
|
api.getRoomList()
|
|
.then(data => {
|
|
this.roomList = data
|
|
this.state.loading = false
|
|
})
|
|
.catch(() => {
|
|
this.state.loading = false
|
|
})
|
|
},
|
|
handleDownload (record) {
|
|
const qrcode = {
|
|
type: 'room',
|
|
name: record.name,
|
|
id: record.id
|
|
}
|
|
fetchAPIBase('qrcode/', 'get', null, qrcode)
|
|
.then(res => {
|
|
return res.blob()
|
|
})
|
|
.then(data => {
|
|
downloadFile(data, `房间-${record.name}.png`)
|
|
})
|
|
.catch(error => {
|
|
this.$notification({ message: '下载失败', description: error, key: 'ERROR' })
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.item {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style> |