287 lines
8.4 KiB
Vue
287 lines
8.4 KiB
Vue
<template>
|
|
<page-layout :title="isEdit ? '编辑预约' : '新建预约'">
|
|
<a-card>
|
|
<a-col
|
|
:xs="{span: 24}"
|
|
:sm="{span: 20}"
|
|
:xl="{span: 18}">
|
|
<a-divider v-if="isEdit">预约信息</a-divider>
|
|
<a-form>
|
|
<a-form-item
|
|
label="ID"
|
|
v-if="isEdit"
|
|
v-bind="layout">
|
|
{{bookingEdit.id}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="房间"
|
|
v-bind="layout">
|
|
<router-link
|
|
:to="{ name: 'roomEdit', params: { id: bookingEdit.room.id} }">
|
|
{{isEdit ? bookingEdit.room.name : bookingCreate.room.name}}
|
|
</router-link>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="日期"
|
|
v-bind="layout">
|
|
{{isEdit ? bookingEdit.date : bookingCreate.date}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="开始时间"
|
|
v-bind="layout">
|
|
{{isEdit ? bookingEdit.start_time : bookingCreate.start_time}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="结束时间"
|
|
v-bind="layout">
|
|
{{isEdit ? bookingEdit.end_time : bookingCreate.end_time}}
|
|
</a-form-item>
|
|
<div v-if="bookingEdit">
|
|
<a-form-item
|
|
v-for="(item, index) in bookingEdit.seats" :key="index"
|
|
:label="'座位' + (index + 1).toString()"
|
|
v-bind="layout">
|
|
<div>{{item.name}}</div>
|
|
</a-form-item>
|
|
</div>
|
|
<div v-if="bookingCreate">
|
|
<a-form-item
|
|
v-for="(item, index) in bookingCreate.seats" :key="index"
|
|
:label="'座位' + (index + 1).toString()"
|
|
v-bind="layout">
|
|
<div>{{item.name}}</div>
|
|
</a-form-item>
|
|
</div>
|
|
<a-form-item
|
|
label="用户"
|
|
v-bind="layout">
|
|
<a-select
|
|
showSearch
|
|
placeholder="搜索用户名邮箱"
|
|
:showArrow="false"
|
|
:filterOption="false"
|
|
:notFoundContent="null"
|
|
@search="handleSearch"
|
|
v-if="!isEdit"
|
|
v-model="createBookingForm.user">
|
|
<a-select-option v-for="item in userList" :value="item.id">{{item.username}} {{item.email}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<router-link
|
|
:to="{ name: 'accountEdit', params: { id: bookingEdit.user.id} }"
|
|
v-else>
|
|
{{bookingEdit.user.username}} {{bookingEdit.user.email}}
|
|
</router-link>
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="申请时间"
|
|
v-if="isEdit"
|
|
v-bind="layout">
|
|
{{bookingEdit.created_datetime}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="到达时间"
|
|
v-if="isEdit"
|
|
v-bind="layout">
|
|
{{bookingEdit.arrive_time || '未签到'}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="离开时间"
|
|
v-if="isEdit"
|
|
v-bind="layout">
|
|
{{bookingEdit.leave_time || '未签离'}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="状态"
|
|
v-if="isEdit"
|
|
v-bind="layout">
|
|
{{statusName}}
|
|
</a-form-item>
|
|
<a-form-item v-if="!isEdit">
|
|
<a-button type="primary" @click="handleCreateSubmit" style="float: right">
|
|
提交申请
|
|
</a-button>
|
|
<a-button @click="$router.go(-1)" style="float: right; margin-right: 8px">
|
|
取消
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
<a-divider v-if="isEdit">取消预约</a-divider>
|
|
<a-form
|
|
v-if="isEdit"
|
|
:form="cancelBookingForm">
|
|
<a-form-item
|
|
label="取消人"
|
|
v-bind="layout">
|
|
{{bookingEdit.cancel_by ? bookingEdit.cancel_by.username : ''}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="取消时间"
|
|
v-bind="layout">
|
|
{{bookingEdit.cancel_datetime}}
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="取消原因"
|
|
v-bind="layout">
|
|
<a-textarea
|
|
:rows="4"
|
|
v-decorator="[
|
|
'cancel_reason',
|
|
{rules: [
|
|
{max: 512, message: '最多512个字符'},
|
|
], validateTrigger: 'blur',
|
|
initialValue: bookingEdit.cancel_reason}
|
|
]">
|
|
</a-textarea>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-popconfirm
|
|
v-if="bookingEdit.status === 'SUCCESS'"
|
|
style="float: right"
|
|
title="取消预约不可逆"
|
|
@confirm="handleCancelSubmit"
|
|
okText="确定"
|
|
cancelText="关闭">
|
|
<a-button
|
|
type="primary">
|
|
取消预约
|
|
</a-button>
|
|
</a-popconfirm>
|
|
<a-button
|
|
v-else
|
|
style="float: right"
|
|
:disabled="true">取消预约
|
|
</a-button>
|
|
<a-button @click="$router.go(-1)" style="float: right; margin-right: 8px">
|
|
返回
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-col>
|
|
</a-card>
|
|
</page-layout>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import PageLayout from '../../components/page/PageLayout'
|
|
import accountAPI from '../../api/account'
|
|
import bookingAPI from '../../api/booking'
|
|
|
|
export default {
|
|
name: 'BookingDetail',
|
|
components: {
|
|
PageLayout
|
|
},
|
|
props: {
|
|
id: Number,
|
|
bookingCreate: Object
|
|
},
|
|
data () {
|
|
return {
|
|
layout: {
|
|
'label-col': { span: 6 },
|
|
'wrapper-col': { span: 18 }
|
|
},
|
|
userList: [],
|
|
bookingEdit: {
|
|
room: {
|
|
id: '0',
|
|
name: ''
|
|
},
|
|
user: {
|
|
id: 0,
|
|
name: '',
|
|
email: ''
|
|
}
|
|
},
|
|
createBookingForm: {
|
|
user: this.$store.getters.userid,
|
|
},
|
|
cancelBookingForm: this.$form.createForm(this),
|
|
params: {
|
|
search: ''
|
|
},
|
|
statusList: []
|
|
}
|
|
},
|
|
beforeRouteEnter (to, from, next) {
|
|
if (from.path !== '/') {
|
|
next()
|
|
} else {
|
|
next({ name: 'dashboard' })
|
|
}
|
|
},
|
|
mounted () {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData () {
|
|
if (this.isEdit) {
|
|
bookingAPI.getBooking(this.id)
|
|
.then(data => {
|
|
this.bookingEdit = data
|
|
})
|
|
bookingAPI.getStatusList()
|
|
.then(data => {
|
|
this.statusList = data
|
|
})
|
|
} else {
|
|
accountAPI.getUserList(this.params)
|
|
.then(data => {
|
|
this.userList = data.results
|
|
})
|
|
}
|
|
},
|
|
handleCreateSubmit () {
|
|
let form = {
|
|
user: this.createBookingForm.user,
|
|
room: this.bookingCreate.room.id,
|
|
seats: this.bookingCreate.seats.map((item) => {
|
|
return item.id
|
|
}),
|
|
date: this.bookingCreate.date,
|
|
start_time: this.bookingCreate.start_time,
|
|
end_time: this.bookingCreate.end_time
|
|
}
|
|
bookingAPI.createBooking(form)
|
|
.then(data => {
|
|
this.$notification.success({ message: '成功', description: '提交申请成功', key: 'SUCCESS' })
|
|
this.$router.push({ name: 'dashboard' })
|
|
})
|
|
},
|
|
handleCancelSubmit () {
|
|
this.cancelBookingForm.validateFields((error, data) => {
|
|
if (!error) {
|
|
bookingAPI.cancelBooking(this.bookingEdit.id, data)
|
|
.then(data => {
|
|
this.$notification.success({ message: '成功', description: '取消预约成功', key: 'SUCCESS' })
|
|
this.getData()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
handleSearch (value) {
|
|
this.params.search = value
|
|
this.getData()
|
|
}
|
|
},
|
|
computed: {
|
|
isEdit () {
|
|
return this.$route.path.split('/').pop() === 'edit'
|
|
},
|
|
statusName () {
|
|
let ret = ''
|
|
let result = this.statusList.find(item => item.id === this.bookingEdit.status)
|
|
if (result) {
|
|
ret = result.name
|
|
}
|
|
return ret
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |