feat(hotel): 新增酒店管理功能
- 添加房间管理和游客管理模块 - 实现房间和游客的查询、创建、编辑和删除功能 - 优化查询条件和表格展示 - 新增退房功能
This commit is contained in:
parent
78564dda3d
commit
4155f6c381
@ -14,8 +14,8 @@ export default mergeConfig(
|
|||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
// target: 'http://8.134.75.234:8081',
|
// target: 'http://8.134.75.234:8081',
|
||||||
// target: 'http://192.168.3.238:8081',
|
target: 'http://192.168.3.119:8081',
|
||||||
target: 'http://localhost:8081',
|
// target: 'http://localhost:8081',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
39
src/api/guest.ts
Normal file
39
src/api/guest.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export interface GuestRecord {
|
||||||
|
id?: number;
|
||||||
|
name?: string;
|
||||||
|
idCard?: string;
|
||||||
|
phone?: string;
|
||||||
|
roomNumber?: string;
|
||||||
|
checkInTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GuestQueryRecord {
|
||||||
|
size: number;
|
||||||
|
current: number;
|
||||||
|
name?: string;
|
||||||
|
status?: number;
|
||||||
|
roomNumber?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryGuestList(data: GuestQueryRecord){
|
||||||
|
return axios.get('/api/rest/hotel/guest', { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createGuest(data: GuestRecord) {
|
||||||
|
return axios.post('/api/rest/hotel/guest', data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteGuest(id: number) {
|
||||||
|
return axios.delete(`/api/rest/hotel/guest/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateGuest(data: GuestRecord) {
|
||||||
|
return axios.patch(`/api/rest/hotel/guest/${data.id}`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 游客退房
|
||||||
|
export function checkOutGuest(id: any) {
|
||||||
|
return axios.put(`/api/rest/hotel/guest/${id}`);
|
||||||
|
}
|
||||||
38
src/api/hotel.ts
Normal file
38
src/api/hotel.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export interface HotelRecord {
|
||||||
|
id?: number;
|
||||||
|
roomNumber?: string;
|
||||||
|
createTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HotelQueryRecord {
|
||||||
|
size: number;
|
||||||
|
pages: number;
|
||||||
|
status?: number;
|
||||||
|
roomNumber?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreateHotelRecord {
|
||||||
|
roomNumber: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createHotel(data: CreateHotelRecord) {
|
||||||
|
return axios.post('/api/rest/hotel/room', data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function queryHotelList(data: HotelQueryRecord) {
|
||||||
|
return axios.get('/api/rest/hotel/room', { params: data });
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteHotel(id: number) {
|
||||||
|
return axios.delete(`/api/rest/hotel/room/${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateHotel(id:number, data: HotelRecord) {
|
||||||
|
return axios.patch(`/api/rest/hotel/room/${id}`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HotelList(){
|
||||||
|
return axios.get('/api/rest/hotel/room/unoccupied');
|
||||||
|
}
|
||||||
46
src/router/routes/modules/hotel.ts
Normal file
46
src/router/routes/modules/hotel.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { DEFAULT_LAYOUT } from '../base';
|
||||||
|
import { AppRouteRecordRaw } from '../types';
|
||||||
|
|
||||||
|
const HOTEL: AppRouteRecordRaw = {
|
||||||
|
path: '/hotel',
|
||||||
|
name: 'Hotel',
|
||||||
|
component: DEFAULT_LAYOUT,
|
||||||
|
meta: {
|
||||||
|
locale: '酒店管理',
|
||||||
|
title: '酒店管理',
|
||||||
|
icon: 'icon-empty',
|
||||||
|
requiresAuth: true,
|
||||||
|
order: 1,
|
||||||
|
// permissions: ['hotel'],
|
||||||
|
permissions: ['*'],
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'room',
|
||||||
|
name: 'Room',
|
||||||
|
component: () => import('@/views/hotel/room/index.vue'),
|
||||||
|
meta: {
|
||||||
|
locale: '房间管理',
|
||||||
|
title: '房间管理',
|
||||||
|
requiresAuth: true,
|
||||||
|
// permissions: ['hotel:room'],
|
||||||
|
permissions: ['*'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'guest',
|
||||||
|
name: 'Guest',
|
||||||
|
component: () => import('@/views/hotel/guest/index.vue'),
|
||||||
|
meta: {
|
||||||
|
locale: '游客管理',
|
||||||
|
title: '游客管理',
|
||||||
|
requiresAuth: true,
|
||||||
|
// permissions: ['hotel:guest'],
|
||||||
|
permissions: ['*'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HOTEL;
|
||||||
171
src/views/hotel/guest/components/guest-edit.vue
Normal file
171
src/views/hotel/guest/components/guest-edit.vue
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<a-button
|
||||||
|
v-if="props.isCreate"
|
||||||
|
type="primary"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
|
<template #icon><icon-plus /></template>
|
||||||
|
新建
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="!props.isCreate"
|
||||||
|
type="outline"
|
||||||
|
size="small"
|
||||||
|
:style="{ marginRight: '10px', padding: '7px' }"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
|
<template #icon><icon-edit /></template>
|
||||||
|
编辑
|
||||||
|
</a-button>
|
||||||
|
<a-modal
|
||||||
|
width="700px"
|
||||||
|
:visible="visible"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<template #title>{{ modalTitle }}</template>
|
||||||
|
<a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
|
||||||
|
<a-form-item
|
||||||
|
field="name"
|
||||||
|
label="姓名"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
:rules="[{ required: true, message: '姓名不能为空' }]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model="formData.name"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
field="idCard"
|
||||||
|
label="身份证号"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
:rules="[{ required: true, message: '身份证号不能为空' }]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model="formData.idCard"
|
||||||
|
placeholder="请输入身份证号"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
field="phone"
|
||||||
|
label="手机号"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
:rules="[{ required: true, message: '手机号不能为空' }]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model="formData.phone"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
field="roomNumber"
|
||||||
|
label="房间号"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
:rules="[{ required: true, message: '房间号不能为空' }]"
|
||||||
|
>
|
||||||
|
<a-select
|
||||||
|
v-model="formData.roomNumber"
|
||||||
|
placeholder="请选择房间号"
|
||||||
|
:options="roomOptions"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, PropType, ref } from 'vue';
|
||||||
|
import { FormInstance, Message } from '@arco-design/web-vue';
|
||||||
|
import useVisible from '@/hooks/visible';
|
||||||
|
import { GuestRecord, createGuest, updateGuest } from '@/api/guest';
|
||||||
|
import { HotelList } from '@/api/hotel'; // 引入查询房间号的API
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
guest: {
|
||||||
|
type: Object as PropType<GuestRecord>,
|
||||||
|
},
|
||||||
|
isCreate: Boolean,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { visible, setVisible } = useVisible(false);
|
||||||
|
const createEditRef = ref<FormInstance>();
|
||||||
|
|
||||||
|
// 房间号选项列表
|
||||||
|
const roomOptions = ref<{ label: string; value: string }[]>([]);
|
||||||
|
|
||||||
|
// 获取房间号选项
|
||||||
|
const fetchRoomOptions = async () => {
|
||||||
|
try {
|
||||||
|
// const res = await queryHotelList({ size: 100, pages: 1 }); // 查询所有房间号
|
||||||
|
const res = await HotelList();
|
||||||
|
roomOptions.value = res.data.map((room: any) => ({
|
||||||
|
label: room.roomNumber,
|
||||||
|
value: room.roomNumber,
|
||||||
|
}));
|
||||||
|
} catch (error) {
|
||||||
|
Message.error({
|
||||||
|
content: '获取房间号失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = ref<GuestRecord>({
|
||||||
|
name: '',
|
||||||
|
idCard: '',
|
||||||
|
phone: '',
|
||||||
|
roomNumber: '',
|
||||||
|
...props.guest,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['refresh']);
|
||||||
|
|
||||||
|
const modalTitle = computed(() => {
|
||||||
|
return props.isCreate ? '新建游客' : '编辑游客信息';
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件被点击
|
||||||
|
const handleClick = () => {
|
||||||
|
setVisible(true);
|
||||||
|
fetchRoomOptions();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
const valid = await createEditRef.value?.validate();
|
||||||
|
if (!valid) {
|
||||||
|
try {
|
||||||
|
if (props.isCreate) {
|
||||||
|
await createGuest(formData.value);
|
||||||
|
Message.success({
|
||||||
|
content: '新建游客成功',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await updateGuest(formData.value);
|
||||||
|
Message.success({
|
||||||
|
content: '编辑游客成功',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
emit('refresh');
|
||||||
|
setVisible(false);
|
||||||
|
} catch (error) {
|
||||||
|
Message.error({
|
||||||
|
content: '操作失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭
|
||||||
|
const handleCancel = async () => {
|
||||||
|
createEditRef.value?.resetFields();
|
||||||
|
setVisible(false);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
281
src/views/hotel/guest/index.vue
Normal file
281
src/views/hotel/guest/index.vue
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<a-card class="general-card" title="游客管理">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-form
|
||||||
|
:model="formModel"
|
||||||
|
:label-col-props="{ span: 6 }"
|
||||||
|
:wrapper-col-props="{ span: 12 }"
|
||||||
|
label-align="right"
|
||||||
|
>
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="name" label="姓名">
|
||||||
|
<a-input
|
||||||
|
v-model="formModel.name"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="roomNumber" label="房间号">
|
||||||
|
<a-input
|
||||||
|
v-model="formModel.roomNumber"
|
||||||
|
placeholder="请输入房间号"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
<a-divider style="height: 42px" direction="vertical" />
|
||||||
|
<a-col :flex="'46px'" style="text-align: right">
|
||||||
|
<a-space :size="18">
|
||||||
|
<a-button type="primary" @click="search">
|
||||||
|
<template #icon>
|
||||||
|
<icon-search />
|
||||||
|
</template>
|
||||||
|
查询
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="reset">
|
||||||
|
<template #icon>
|
||||||
|
<icon-refresh />
|
||||||
|
</template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-divider style="margin-top: 10px" />
|
||||||
|
<a-row style="margin-bottom: 16px">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-space>
|
||||||
|
<GuestEdit ref="createRef" :is-create="true" @refresh="search" />
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:span="12"
|
||||||
|
style="display: flex; align-items: center; justify-content: end"
|
||||||
|
>
|
||||||
|
<a-tooltip content="刷新">
|
||||||
|
<div class="action-icon" @click="search">
|
||||||
|
<icon-refresh size="18" />
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-table
|
||||||
|
row-key="id"
|
||||||
|
:loading="loading"
|
||||||
|
:columns="columns"
|
||||||
|
:data="renderData"
|
||||||
|
:bordered="false"
|
||||||
|
:size="size"
|
||||||
|
:pagination="false"
|
||||||
|
style="margin-bottom: 40px"
|
||||||
|
>
|
||||||
|
<template #checkInTime="{ record }">
|
||||||
|
{{ dayjs(record.checkInTime).format('YYYY-MM-DD') }}
|
||||||
|
</template>
|
||||||
|
<template #status="{ record }">
|
||||||
|
<a-tag v-if="record.status === 0" color="gray">已退房</a-tag>
|
||||||
|
<a-tag v-else-if="record.status === 1" color="green">入住中</a-tag>
|
||||||
|
</template>
|
||||||
|
<template #operations="{ record }">
|
||||||
|
<GuestEdit
|
||||||
|
ref="editRef"
|
||||||
|
:guest="record"
|
||||||
|
:is-create="false"
|
||||||
|
@refresh="search"
|
||||||
|
/>
|
||||||
|
<a-button
|
||||||
|
v-if="record.status === 1"
|
||||||
|
type="outline"
|
||||||
|
size="small"
|
||||||
|
status="warning"
|
||||||
|
style="padding: 7px;margin-right: 10px"
|
||||||
|
@click="handleCheckOut(record)"
|
||||||
|
>
|
||||||
|
<template #icon><icon-export /></template>
|
||||||
|
退房
|
||||||
|
</a-button>
|
||||||
|
<a-popconfirm
|
||||||
|
content="确认删除此游客？"
|
||||||
|
type="error"
|
||||||
|
@ok="handleDelete(record)"
|
||||||
|
>
|
||||||
|
<a-button
|
||||||
|
type="outline"
|
||||||
|
size="small"
|
||||||
|
status="danger"
|
||||||
|
style="padding: 7px"
|
||||||
|
>
|
||||||
|
<template #icon><icon-delete /></template>
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
<a-pagination
|
||||||
|
style="float: right; position: relative; right: 1px; bottom: 25px"
|
||||||
|
:total="pagination.total"
|
||||||
|
:size="size"
|
||||||
|
show-total
|
||||||
|
show-jumper
|
||||||
|
show-page-size
|
||||||
|
@page-size-change="onSizeChange"
|
||||||
|
@change="onPageChange"
|
||||||
|
/>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
import { Message } from '@arco-design/web-vue';
|
||||||
|
import useLoading from '@/hooks/loading';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { Pagination } from '@/types/global';
|
||||||
|
import { GuestRecord, queryGuestList, deleteGuest, checkOutGuest } from '@/api/guest';
|
||||||
|
import GuestEdit from './components/guest-edit.vue';
|
||||||
|
|
||||||
|
const { loading, setLoading } = useLoading(true);
|
||||||
|
const renderData = ref<GuestRecord[]>([]);
|
||||||
|
const formModel = ref({
|
||||||
|
name: '',
|
||||||
|
roomNumber: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const pagination: Pagination = {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
current: 1,
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格头部
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
title: '姓名',
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '身份证号',
|
||||||
|
dataIndex: 'idCard',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '手机号',
|
||||||
|
dataIndex: 'phone',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '房间号',
|
||||||
|
dataIndex: 'roomNumber',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '入住时间',
|
||||||
|
dataIndex: 'checkInTime',
|
||||||
|
slotName: 'checkInTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '入住状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
slotName: 'status',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'operations',
|
||||||
|
slotName: 'operations',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 获取表格数据
|
||||||
|
const fetchData = async (
|
||||||
|
params: any = { page: 1, size: 10, current: 1 }
|
||||||
|
) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await queryGuestList(params);
|
||||||
|
renderData.value = res.data.records;
|
||||||
|
pagination.page = res.data.page;
|
||||||
|
pagination.current = res.data.current;
|
||||||
|
pagination.total = res.data.total;
|
||||||
|
pagination.size = res.data.size;
|
||||||
|
} catch (err) {
|
||||||
|
Message.error({
|
||||||
|
content: '获取数据失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查询
|
||||||
|
const search = () => {
|
||||||
|
fetchData({
|
||||||
|
...pagination,
|
||||||
|
...formModel.value,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const reset = () => {
|
||||||
|
formModel.value = { name: '', roomNumber: '' };
|
||||||
|
fetchData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const handleDelete = async (record: GuestRecord) => {
|
||||||
|
try {
|
||||||
|
await deleteGuest(record.id!);
|
||||||
|
Message.success({
|
||||||
|
content: '删除游客成功',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
Message.error({
|
||||||
|
content: '删除游客失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCheckOut = async (record: GuestRecord) => {
|
||||||
|
try {
|
||||||
|
await checkOutGuest(record.id);
|
||||||
|
Message.success({
|
||||||
|
content: '退房成功',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
Message.error({
|
||||||
|
content: '退房失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页发生改变
|
||||||
|
const onPageChange = (current: number) => {
|
||||||
|
pagination.page = current;
|
||||||
|
pagination.current = current;
|
||||||
|
search();
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container {
|
||||||
|
padding: 0 20px 20px 20px;
|
||||||
|
}
|
||||||
|
.action-icon {
|
||||||
|
margin-left: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
111
src/views/hotel/room/components/room-edit.vue
Normal file
111
src/views/hotel/room/components/room-edit.vue
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<a-button
|
||||||
|
v-if="props.isCreate"
|
||||||
|
type="primary"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
|
<template #icon><icon-plus /></template>
|
||||||
|
新建
|
||||||
|
</a-button>
|
||||||
|
<a-button
|
||||||
|
v-if="!props.isCreate"
|
||||||
|
type="outline"
|
||||||
|
size="small"
|
||||||
|
:style="{ marginRight: '10px', padding: '7px' }"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
|
<template #icon><icon-edit /></template>
|
||||||
|
编辑
|
||||||
|
</a-button>
|
||||||
|
<a-modal
|
||||||
|
width="700px"
|
||||||
|
:visible="visible"
|
||||||
|
@ok="handleSubmit"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
>
|
||||||
|
<template #title>{{ modalTitle }}</template>
|
||||||
|
<a-form ref="createEditRef" :model="formData" :style="{ width: '650px' }">
|
||||||
|
<a-form-item
|
||||||
|
field="roomNumber"
|
||||||
|
label="房间号"
|
||||||
|
:validate-trigger="['change', 'input']"
|
||||||
|
:rules="[{ required: true, message: '房间号不能为空' }]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model="formData.roomNumber"
|
||||||
|
placeholder="请输入房间号"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, PropType, ref } from 'vue';
|
||||||
|
import { FormInstance, Message } from '@arco-design/web-vue';
|
||||||
|
import useVisible from '@/hooks/visible';
|
||||||
|
import { HotelRecord, createHotel, updateHotel } from '@/api/hotel';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
hotel: {
|
||||||
|
type: Object as PropType<HotelRecord>,
|
||||||
|
},
|
||||||
|
isCreate: Boolean,
|
||||||
|
});
|
||||||
|
|
||||||
|
const { visible, setVisible } = useVisible(false);
|
||||||
|
const createEditRef = ref<FormInstance>();
|
||||||
|
|
||||||
|
const formData = ref<HotelRecord>({
|
||||||
|
roomNumber: '',
|
||||||
|
...props.hotel,
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['refresh']);
|
||||||
|
|
||||||
|
const modalTitle = computed(() => {
|
||||||
|
return props.isCreate ? '新建房间' : '编辑房间信息';
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件被点击
|
||||||
|
const handleClick = () => {
|
||||||
|
setVisible(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
const valid = await createEditRef.value?.validate();
|
||||||
|
if (!valid) {
|
||||||
|
try {
|
||||||
|
if (props.isCreate) {
|
||||||
|
await createHotel(formData.value);
|
||||||
|
Message.success({
|
||||||
|
content: '新建房间成功',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await updateHotel(formData.value.id!, formData.value);
|
||||||
|
Message.success({
|
||||||
|
content: '编辑房间成功',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
emit('refresh');
|
||||||
|
setVisible(false);
|
||||||
|
} catch (error) {
|
||||||
|
Message.error({
|
||||||
|
content: '操作失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 关闭
|
||||||
|
const handleCancel = async () => {
|
||||||
|
createEditRef.value?.resetFields();
|
||||||
|
setVisible(false);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
234
src/views/hotel/room/index.vue
Normal file
234
src/views/hotel/room/index.vue
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<a-card class="general-card" title="酒店管理">
|
||||||
|
<a-row>
|
||||||
|
<a-col :flex="1">
|
||||||
|
<a-form
|
||||||
|
:model="formModel"
|
||||||
|
:label-col-props="{ span: 6 }"
|
||||||
|
:wrapper-col-props="{ span: 12 }"
|
||||||
|
label-align="right"
|
||||||
|
>
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item field="roomNumber" label="房间号">
|
||||||
|
<a-input
|
||||||
|
v-model="formModel.roomNumber"
|
||||||
|
placeholder="请输入房间号"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-col>
|
||||||
|
<a-divider style="height: 42px" direction="vertical" />
|
||||||
|
<a-col :flex="'46px'" style="text-align: right">
|
||||||
|
<a-space :size="18">
|
||||||
|
<a-button type="primary" @click="search">
|
||||||
|
<template #icon>
|
||||||
|
<icon-search />
|
||||||
|
</template>
|
||||||
|
查询
|
||||||
|
</a-button>
|
||||||
|
<a-button @click="reset">
|
||||||
|
<template #icon>
|
||||||
|
<icon-refresh />
|
||||||
|
</template>
|
||||||
|
重置
|
||||||
|
</a-button>
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-divider style="margin-top: 10px" />
|
||||||
|
<a-row style="margin-bottom: 16px">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-space>
|
||||||
|
<RoomEdit ref="createRef" :is-create="true" @refresh="search" />
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:span="12"
|
||||||
|
style="display: flex; align-items: center; justify-content: end"
|
||||||
|
>
|
||||||
|
<a-tooltip content="刷新">
|
||||||
|
<div class="action-icon" @click="search">
|
||||||
|
<icon-refresh size="18" />
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-table
|
||||||
|
row-key="id"
|
||||||
|
:loading="loading"
|
||||||
|
:columns="columns"
|
||||||
|
:data="renderData"
|
||||||
|
:bordered="false"
|
||||||
|
:size="size"
|
||||||
|
:pagination="false"
|
||||||
|
style="margin-bottom: 40px"
|
||||||
|
>
|
||||||
|
<template #createTime="{ record }">
|
||||||
|
{{ dayjs(record.createTime).format('YYYY-MM-DD') }}
|
||||||
|
</template>
|
||||||
|
<template #status="{ record }">
|
||||||
|
<a-tag v-if="record.status === 0" color="gray">空闲中</a-tag>
|
||||||
|
<a-tag v-else-if="record.status === 1" color="green">入住中</a-tag>
|
||||||
|
</template>
|
||||||
|
<template #operations="{ record }">
|
||||||
|
<RoomEdit
|
||||||
|
ref="editRef"
|
||||||
|
:hotel="record"
|
||||||
|
:is-create="false"
|
||||||
|
@refresh="search"
|
||||||
|
/>
|
||||||
|
<a-popconfirm
|
||||||
|
content="确认删除此房间？"
|
||||||
|
type="error"
|
||||||
|
@ok="handleDelete(record)"
|
||||||
|
>
|
||||||
|
<a-button
|
||||||
|
type="outline"
|
||||||
|
size="small"
|
||||||
|
status="danger"
|
||||||
|
style="padding: 7px"
|
||||||
|
>
|
||||||
|
<template #icon><icon-delete /></template>
|
||||||
|
删除
|
||||||
|
</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
<a-pagination
|
||||||
|
style="float: right; position: relative; right: 1px; bottom: 25px"
|
||||||
|
:total="pagination.total"
|
||||||
|
:size="size"
|
||||||
|
show-total
|
||||||
|
show-jumper
|
||||||
|
show-page-size
|
||||||
|
@page-size-change="onSizeChange"
|
||||||
|
@change="onPageChange"
|
||||||
|
/>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
import { Message } from '@arco-design/web-vue';
|
||||||
|
import useLoading from '@/hooks/loading';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { Pagination } from '@/types/global';
|
||||||
|
import { HotelRecord, queryHotelList, deleteHotel } from '@/api/hotel';
|
||||||
|
import RoomEdit from '@/views/hotel/room/components/room-edit.vue';
|
||||||
|
import { UserParams } from '@/api/user';
|
||||||
|
|
||||||
|
const { loading, setLoading } = useLoading(true);
|
||||||
|
const renderData = ref<HotelRecord[]>([]);
|
||||||
|
const formModel = ref({
|
||||||
|
roomNumber: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const pagination: Pagination = {
|
||||||
|
page: 1,
|
||||||
|
size: 10,
|
||||||
|
current: 1,
|
||||||
|
total: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 表格头部
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
title: '房间号',
|
||||||
|
dataIndex: 'roomNumber',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
slotName: 'createTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
slotName: 'status',
|
||||||
|
}
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'operations',
|
||||||
|
slotName: 'operations',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 获取表格数据
|
||||||
|
const fetchData = async (
|
||||||
|
params: any = { page: 1, size: 10, current: 1 }
|
||||||
|
) => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await queryHotelList(params);
|
||||||
|
renderData.value = res.data.records;
|
||||||
|
pagination.page = res.data.page;
|
||||||
|
pagination.current = res.data.current;
|
||||||
|
pagination.total = res.data.total;
|
||||||
|
pagination.size = res.data.size;
|
||||||
|
} catch (err) {
|
||||||
|
Message.error({
|
||||||
|
content: '获取数据失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查询
|
||||||
|
const search = () => {
|
||||||
|
fetchData({
|
||||||
|
...pagination,
|
||||||
|
...formModel.value,
|
||||||
|
} as unknown as UserParams);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const reset = () => {
|
||||||
|
formModel.value = { roomNumber: '' };
|
||||||
|
fetchData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页发生改变
|
||||||
|
const onPageChange = (current: number) => {
|
||||||
|
pagination.page = current;
|
||||||
|
pagination.current = current;
|
||||||
|
search();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const handleDelete = async (record: HotelRecord) => {
|
||||||
|
try {
|
||||||
|
await deleteHotel(record.id!);
|
||||||
|
Message.success({
|
||||||
|
content: '删除房间成功',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
fetchData();
|
||||||
|
} catch (error) {
|
||||||
|
Message.error({
|
||||||
|
content: '删除房间失败，请重试',
|
||||||
|
duration: 5 * 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.container {
|
||||||
|
padding: 0 20px 20px 20px;
|
||||||
|
}
|
||||||
|
.action-icon {
|
||||||
|
margin-left: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user