|
|
@@ -1,44 +1,120 @@
|
|
|
<template>
|
|
|
<div class="manageHotel-wrapper">
|
|
|
<a-tabs>
|
|
|
- <a-tab-pane tab="录入客房" key="1">
|
|
|
- <a-form :form="form" style="margin-top: 30px">
|
|
|
-
|
|
|
- </a-form>
|
|
|
+ <a-tab-pane tab="酒店管理" key="1">
|
|
|
+ <div style="width: 100%; text-align: right; margin:20px 0">
|
|
|
+ <a-button type="primary" @click="addHotel"><a-icon type="plus" />添加酒店</a-button>
|
|
|
+ </div>
|
|
|
+ <a-table
|
|
|
+ :columns="columns1"
|
|
|
+ :dataSource="data1"
|
|
|
+ bordered
|
|
|
+ >
|
|
|
+ <span slot="action" slot-scope="record">
|
|
|
+ <a-button type="primary" size="small" @click="addRoom(record)">录入房间</a-button>
|
|
|
+ <a-divider type="vertical"></a-divider>
|
|
|
+ <a-popconfirm
|
|
|
+ title="确定想删除该酒店吗?"
|
|
|
+ @confirm="deleteHotel(record)"
|
|
|
+ okText="确定"
|
|
|
+ cancelText="取消"
|
|
|
+ >
|
|
|
+ <a-button type="danger" size="small">删除酒店</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane tab="订单管理" key="2">
|
|
|
<a-table
|
|
|
- :columns="columns"
|
|
|
- :dataSource="data"
|
|
|
+ :columns="columns2"
|
|
|
+ :dataSource="data2"
|
|
|
bordered
|
|
|
>
|
|
|
+ <span slot="status" slot-scope="status">
|
|
|
+ <a-tag
|
|
|
+ :color="status==='入住中' ? 'green' : 'red' "
|
|
|
+ :key="status"
|
|
|
+ >
|
|
|
+ {{ status }}
|
|
|
+ </a-tag>
|
|
|
+ </span>
|
|
|
<span slot="price" slot-scope="text">
|
|
|
<span>¥{{ text }}</span>
|
|
|
</span>
|
|
|
- <span slot="action" slot-scope="text, record">
|
|
|
- <a-button type="primary" @click="order(record)">订单详情</a-button>
|
|
|
+ <span slot="action" slot-scope="record">
|
|
|
+ <a-button type="primary" size="small">订单详情</a-button>
|
|
|
<a-divider type="vertical"></a-divider>
|
|
|
- <a-button type="danger" @click="order(record)">删除订单</a-button>
|
|
|
+ <a-popconfirm
|
|
|
+ title="确定想删除该订单吗?"
|
|
|
+ @confirm="deleteOrder(record)"
|
|
|
+ okText="确定"
|
|
|
+ cancelText="取消"
|
|
|
+ >
|
|
|
+ <a-button type="danger" size="small">删除订单</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
</span>
|
|
|
</a-table>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
+ <AddHotelModal></AddHotelModal>
|
|
|
+ <AddRoomModal></AddRoomModal>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { mapGetters, mapMutations, mapActions } from 'vuex'
|
|
|
-const columns = [
|
|
|
+import AddHotelModal from './components/addHotelModal'
|
|
|
+import AddRoomModal from './components/addRoomModal'
|
|
|
+const columns1 = [
|
|
|
+ {
|
|
|
+ title: '酒店名',
|
|
|
+ dataIndex: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '商圈',
|
|
|
+ dataIndex: 'BizRegion',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '地址',
|
|
|
+ dataIndex: 'address',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '酒店星级',
|
|
|
+ dataIndex: 'hotelStar'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '评分',
|
|
|
+ dataIndex: 'hotelRate',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '简介',
|
|
|
+ dataIndex: 'description',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ key: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+const columns2 = [
|
|
|
+ {
|
|
|
+ title: '订单号',
|
|
|
+ dataIndex: 'orderId',
|
|
|
+ },
|
|
|
{
|
|
|
title: '酒店名',
|
|
|
dataIndex: 'hotelName',
|
|
|
},
|
|
|
+ {
|
|
|
+ title: '房型',
|
|
|
+ dataIndex: 'roomType',
|
|
|
+ },
|
|
|
{
|
|
|
title: '入住时间',
|
|
|
- dataIndex: 'InDate',
|
|
|
+ dataIndex: 'checkInDate',
|
|
|
},
|
|
|
{
|
|
|
title: '离店时间',
|
|
|
- dataIndex: 'outDate',
|
|
|
+ dataIndex: 'checkOutDate',
|
|
|
},
|
|
|
{
|
|
|
title: '入住人数',
|
|
|
@@ -50,7 +126,8 @@ const columns = [
|
|
|
},
|
|
|
{
|
|
|
title: '状态',
|
|
|
- dataIndex: 'status'
|
|
|
+ dataIndex: 'status',
|
|
|
+ scopedSlots: { customRender: 'status' },
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
@@ -58,65 +135,88 @@ const columns = [
|
|
|
scopedSlots: { customRender: 'action' },
|
|
|
},
|
|
|
];
|
|
|
+ const data1 = [
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ name: '如家酒店(珠江路地铁站店)',
|
|
|
+ BizRegion:'鼓楼',
|
|
|
+ address: '鼓楼区珠江路888号',
|
|
|
+ hotelRate: '4.8',
|
|
|
+ hotelStar: 'Four',
|
|
|
+ description: '酒店描述信息',
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ const data2 = [
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ orderId: '2019123000001',
|
|
|
+ hotelName: '如家酒店(珠江路地铁站店)',
|
|
|
+ roomType: '大床房',
|
|
|
+ checkInDate: '2019-12-30',
|
|
|
+ checkOutDate: '2019-12-31',
|
|
|
+ peopleNum: '2',
|
|
|
+ price: '298',
|
|
|
+ status: '已离店'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ orderId: '2019123000001',
|
|
|
+ hotelName: '如家酒店(珠江路地铁站店)',
|
|
|
+ roomType: '标准间',
|
|
|
+ checkInDate: '2019-12-30',
|
|
|
+ checkOutDate: '2019-12-31',
|
|
|
+ peopleNum: '1',
|
|
|
+ price: '298',
|
|
|
+ status: '入住中'
|
|
|
+ },
|
|
|
+ ];
|
|
|
export default {
|
|
|
name: 'manageHotel',
|
|
|
data(){
|
|
|
return {
|
|
|
formLayout: 'horizontal',
|
|
|
pagination: {},
|
|
|
- columns,
|
|
|
- data: [],
|
|
|
+ columns1,
|
|
|
+ columns2,
|
|
|
+ data1,
|
|
|
+ data2,
|
|
|
form: this.$form.createForm(this, { name: 'manageHotel' }),
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
+ AddHotelModal,
|
|
|
+ AddRoomModal,
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters([
|
|
|
-
|
|
|
+ 'orderList',
|
|
|
+ 'addHotelModalVisible',
|
|
|
+ 'addRoomModalVisible'
|
|
|
])
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...mapMutations([
|
|
|
+ 'set_addHotelModalVisible',
|
|
|
+ 'set_addRoomModalVisible'
|
|
|
+ ]),
|
|
|
...mapActions([
|
|
|
'updateUserInfoById',
|
|
|
]),
|
|
|
- saveModify() {
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
- if (!err) {
|
|
|
- const data = {
|
|
|
- username: this.form.getFieldValue('username'),
|
|
|
- nickname: this.form.getFieldValue('nickname'),
|
|
|
- email: this.form.getFieldValue('email'),
|
|
|
- phoneNumber: this.form.getFieldValue('phoneNumber'),
|
|
|
- gender: this.form.getFieldValue('gender'),
|
|
|
- address: this.form.getFieldValue('address')
|
|
|
- }
|
|
|
- this.updateUserInfoById(data).then(()=>{
|
|
|
- this.modify = false
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
+ addHotel() {
|
|
|
+ this.set_addHotelModalVisible(true)
|
|
|
},
|
|
|
- modifyInfo() {
|
|
|
- setTimeout(() => {
|
|
|
- this.form.setFieldsValue({
|
|
|
- 'username': this.userInfo.username,
|
|
|
- 'nickname': this.userInfo.nickname,
|
|
|
- 'email': this.userInfo.email,
|
|
|
- 'phoneNumber': this.userInfo.phoneNumber,
|
|
|
- 'gender': this.userInfo.gender,
|
|
|
- 'address': this.userInfo.address
|
|
|
- })
|
|
|
- }, 0)
|
|
|
- this.modify = true
|
|
|
+ addRoom(record) {
|
|
|
+ this.set_addRoomModalVisible(true)
|
|
|
+ },
|
|
|
+ deleteHotel(){
|
|
|
+
|
|
|
+ },
|
|
|
+ deleteOrder(){
|
|
|
+
|
|
|
},
|
|
|
- cancelModify() {
|
|
|
- this.modify = false
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -132,7 +232,7 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
- .info-wrapper {
|
|
|
+ .manageHotel-wrapper {
|
|
|
.ant-tabs-bar {
|
|
|
padding-left: 30px
|
|
|
}
|