feat(hotel): 新增酒店管理功能
- 添加房间管理和游客管理模块 - 实现房间和游客的查询、创建、编辑和删除功能 - 优化查询条件和表格展示 - 新增退房功能
This commit is contained in:
parent
78564dda3d
commit
4155f6c381
@ -14,8 +14,8 @@ export default mergeConfig(
|
||||
proxy: {
|
||||
'/api': {
|
||||
// target: 'http://8.134.75.234:8081',
|
||||
// target: 'http://192.168.3.238:8081',
|
||||
target: 'http://localhost:8081',
|
||||
target: 'http://192.168.3.119:8081',
|
||||
// target: 'http://localhost:8081',
|
||||
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