361 lines
11 KiB
Vue
361 lines
11 KiB
Vue
<template>
|
||
<page-layout title="预约">
|
||
<a-card>
|
||
<a-row>
|
||
<a-input-group class="tool">
|
||
<a-row :gutter="6">
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout1">
|
||
<a-range-picker
|
||
style="width: 100%;"
|
||
:defaultValue="getDateRangeDefaultValue()"
|
||
:value="state.dateRange"
|
||
@change="hangdleDateRangeChange">
|
||
</a-range-picker>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout1">
|
||
<a-time-picker
|
||
style="width: 100%;"
|
||
placeholder="选择开始时间"
|
||
:minuteStep="30"
|
||
:secondStep="60"
|
||
:disabledHours="getDisabledHours"
|
||
:disabledMinutes="getDisabledMinutes"
|
||
:hideDisabledOptions="true"
|
||
:inputReadOnly="true"
|
||
v-model="state.startTime"
|
||
@change="handleStartTimeChange">
|
||
</a-time-picker>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout1">
|
||
<a-time-picker
|
||
style="width: 100%;"
|
||
placeholder="选择结束时间"
|
||
:minuteStep="30"
|
||
:secondStep="60"
|
||
:disabledHours="getDisabledHours"
|
||
:disabledMinutes="getDisabledMinutes"
|
||
:hideDisabledOptions="true"
|
||
:inputReadOnly="true"
|
||
v-model="state.endTime"
|
||
@change="handleEndTimeChange">
|
||
</a-time-picker>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="6">
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout1">
|
||
<a-select
|
||
v-model="params.room"
|
||
style="width: 100%;"
|
||
@change="getData">
|
||
<a-select-option value="">房间筛选</a-select-option>
|
||
<a-select-option :value="item.id" v-for="item in roomList">{{item.name}}</a-select-option>
|
||
</a-select>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout1">
|
||
<a-select
|
||
v-model="params.status"
|
||
style="width: 100%;"
|
||
@change="getData">
|
||
<a-select-option value="">状态筛选</a-select-option>
|
||
<a-select-option :value="item.id" v-for="item in statusList">{{item.name}}</a-select-option>
|
||
</a-select>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout1">
|
||
<a-select
|
||
v-model="params.ordering"
|
||
style="width: 100%;"
|
||
@change="getData">
|
||
<a-select-option value="">排序</a-select-option>
|
||
<a-select-option value="id">ID正排序</a-select-option>
|
||
<a-select-option value="-id">ID倒排序</a-select-option>
|
||
<a-select-option value="date">日期正排序</a-select-option>
|
||
<a-select-option value="-date">日期倒排序</a-select-option>
|
||
<a-select-option value="start_time">开始时间正排序</a-select-option>
|
||
<a-select-option value="-start_time">开始时间倒排序</a-select-option>
|
||
<a-select-option value="end_time">结束时间正排序</a-select-option>
|
||
<a-select-option value="-end_time">结束时间倒排序</a-select-option>
|
||
</a-select>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout2">
|
||
<a-input
|
||
v-model="params.search"
|
||
style="width: 100%;"
|
||
placeholder="ID，用户，房间，日期"
|
||
@keypress.enter="getData">
|
||
</a-input>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout2">
|
||
<a-button
|
||
style="width: 100%;"
|
||
icon="search"
|
||
@click="getData">
|
||
搜索
|
||
</a-button>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout2">
|
||
<a-button
|
||
style="width: 100%;"
|
||
icon="delete"
|
||
@click="handleClearParams">
|
||
重置
|
||
</a-button>
|
||
</a-col>
|
||
<a-col
|
||
class="item"
|
||
v-bind="layout2">
|
||
<a-button
|
||
type="primary"
|
||
icon="plus"
|
||
style="width: 100%;"
|
||
@click="$router.push({name: 'dashboard'})">
|
||
新建
|
||
</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</a-input-group>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col class="item">
|
||
<a-table
|
||
rowKey="id"
|
||
:loading="state.loading"
|
||
:columns="columns"
|
||
:dataSource="bookingList"
|
||
:pagination="false">
|
||
<template slot="status" slot-scope="text, record, index">
|
||
{{statusList.find(item=>item.id === text).name}}
|
||
</template>
|
||
<template slot="operation" slot-scope="text, record, index">
|
||
<a-button @click="$router.push({name: 'bookingEdit', params: {id: record.id}})">编辑</a-button>
|
||
</template>
|
||
</a-table>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col class="item">
|
||
<span style="vertical-align: -5px">共 {{count}} 条</span>
|
||
<a-pagination
|
||
v-model="params.page"
|
||
@change="handelePage"
|
||
style="float: right"
|
||
:total="count">
|
||
</a-pagination>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</page-layout>
|
||
</template>
|
||
|
||
<script>
|
||
const columns = [
|
||
{
|
||
title: '编号',
|
||
dataIndex: 'id',
|
||
width: '8%'
|
||
},
|
||
{
|
||
title: '房间',
|
||
dataIndex: 'room.name',
|
||
width: '14%'
|
||
},
|
||
{
|
||
title: '日期',
|
||
dataIndex: 'date',
|
||
width: '12%'
|
||
},
|
||
{
|
||
title: '开始时间',
|
||
dataIndex: 'start_time',
|
||
width: '12%'
|
||
},
|
||
{
|
||
title: '结束时间',
|
||
dataIndex: 'end_time',
|
||
width: '12%'
|
||
},
|
||
{
|
||
title: '用户',
|
||
dataIndex: 'user.username',
|
||
width: '14%'
|
||
},
|
||
{
|
||
title: '状态',
|
||
dataIndex: 'status',
|
||
width: '14%',
|
||
scopedSlots: { customRender: 'status' }
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'operation',
|
||
scopedSlots: { customRender: 'operation' }
|
||
}
|
||
]
|
||
import moment from 'moment'
|
||
import bookingAPI from '../../api/booking'
|
||
import roomAPI from '../../api/room'
|
||
import settingAPI from '../../api/setting'
|
||
import PageLayout from '../../components/page/PageLayout'
|
||
|
||
export default {
|
||
name: 'Booking',
|
||
components: {
|
||
PageLayout
|
||
},
|
||
data () {
|
||
return {
|
||
columns,
|
||
layout1: {
|
||
xs: { span: 24 },
|
||
sm: { span: 8 },
|
||
xl: { span: 8 },
|
||
},
|
||
layout2: {
|
||
xs: { span: 12 },
|
||
sm: { span: 8 },
|
||
xl: { span: 6 },
|
||
},
|
||
params: {
|
||
search: '',
|
||
page: 1,
|
||
ordering: 'date',
|
||
room: '',
|
||
status: '',
|
||
min_date: this.getDateRangeDefaultValue()[0].format('YYYY-MM-DD'),
|
||
max_date: this.getDateRangeDefaultValue()[1].format('YYYY-MM-DD'),
|
||
min_time: '',
|
||
max_time: ''
|
||
},
|
||
state: {
|
||
loading: false,
|
||
dateRange: this.getDateRangeDefaultValue(),
|
||
startTime: new moment(),
|
||
endTime: new moment()
|
||
},
|
||
roomList: [],
|
||
count: 0,
|
||
bookingList: [],
|
||
statusList: [],
|
||
setting: {}
|
||
}
|
||
},
|
||
mounted () {
|
||
roomAPI.getRoomList(null)
|
||
.then(data => {
|
||
this.roomList = data
|
||
})
|
||
settingAPI.getSettingDetail()
|
||
.then(data => {
|
||
this.params.min_time = data.start_time
|
||
this.params.max_time = data.end_time
|
||
data.start_time = new moment(data.start_time, 'HH:mm:ss')
|
||
this.state.startTime = data.start_time
|
||
data.end_time = new moment(data.end_time, 'HH:mm:ss')
|
||
this.state.endTime = data.end_time
|
||
this.setting = data
|
||
})
|
||
bookingAPI.getStatusList()
|
||
.then(data=>{
|
||
this.statusList = data
|
||
})
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
getData () {
|
||
this.state.loading = true
|
||
bookingAPI.getBookingList(this.params)
|
||
.then(data => {
|
||
this.bookingList = data.results
|
||
this.count = data.count
|
||
this.state.loading = false
|
||
})
|
||
.catch(() => {
|
||
this.state.loading = false
|
||
})
|
||
},
|
||
handleClearParams () {
|
||
this.params = {
|
||
search: '',
|
||
page: 1,
|
||
ordering: 'date',
|
||
room: '',
|
||
status: '',
|
||
min_date: this.getDateRangeDefaultValue()[0].format('YYYY-MM-DD'),
|
||
max_date: this.getDateRangeDefaultValue()[1].format('YYYY-MM-DD'),
|
||
min_time: this.setting.start_time.format('HH:mm:ss'),
|
||
max_time: this.setting.end_time.format('HH:mm:ss')
|
||
}
|
||
this.state = {
|
||
loading: false,
|
||
dateRange: this.getDateRangeDefaultValue(),
|
||
startTime: this.setting.start_time,
|
||
endTime: this.setting.end_time
|
||
}
|
||
this.getData()
|
||
},
|
||
handelePage (page) {
|
||
this.params.page = page
|
||
this.getData()
|
||
},
|
||
hangdleDateRangeChange (dates, dateStrings) {
|
||
this.params.min_date = dateStrings[0]
|
||
this.params.max_date = dateStrings[1]
|
||
this.getData()
|
||
},
|
||
handleStartTimeChange (time, timeString) {
|
||
this.params.min_time = timeString
|
||
this.getData()
|
||
},
|
||
handleEndTimeChange (time, timeString) {
|
||
this.params.max_time = timeString
|
||
this.getData()
|
||
},
|
||
getDateRangeDefaultValue () {
|
||
let now = new moment()
|
||
let aWeekLater = (new moment()).add(7, 'days')
|
||
return [now, aWeekLater]
|
||
},
|
||
getDisabledHours () {
|
||
let ret = []
|
||
let start_hour = this.setting.start_time.hour()
|
||
let end_hour = this.setting.end_time.hour()
|
||
for (let i = 0; i < 24; i++) {
|
||
if (i < start_hour || i > end_hour) {
|
||
ret.push(i)
|
||
}
|
||
}
|
||
return ret
|
||
},
|
||
getDisabledMinutes (selectedHour) {
|
||
let ret = []
|
||
if (selectedHour === this.setting.end_time.hour()) {
|
||
ret.push(30)
|
||
}
|
||
return ret
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.item {
|
||
margin: 8px 0;
|
||
}
|
||
</style> |