实现内容:
顾客添加、查询、结账、删除、导出
1、设置路由
2、添加、查询、结账、删除、导出
guest.js
import { $post, $get } from "../utils/request";
import { $msg_e, $msg_s, $confirm } from "../utils/msg";
//查询顾客信息
export let list = async (params) => {
let ret = await $get('GuestRecord/List', params)
return ret
}
//添加顾客信息的方法
export let add = async (params) => {
if (!checkInput(params)) return false
let { success, message } = await $post('GuestRecord/Add', params)
if (success) {
$msg_s(message)
} else {
$msg_e(message)
}
return success
}
//修改顾客信息的方法
export let update = async (params) => {
if (!checkInput(params)) return false
let { success, message } = await $post('GuestRecord/Update', params)
if (success) {
$msg_s(message)
} else {
$msg_e(message)
}
return success
}
//删除房间信息
export let del = async (params) => {
await $confirm('是否确认删除')
let { success, massage } = $post('GuestRecord/Delete', params)
if (success) {
$msg_s(massage)
} else {
$msg_e(massage)
}
return success
}
//结账
export let checkout = async (params) => {
let { totalMoney } = await $post('GuestRecord/Checkout', params)
$msg_e('结账成功,需要支付' + totalMoney + '元')
}
//验证输入方法
let checkInput = (params) => {
if (!params.identityId) {
$msg_e('请输入身份证号')
} else if (!params.guestName) {
$msg_e('请输入顾客姓名')
} else if (!params.phone) {
$msg_e('请输入电话')
} else if (params.roomId === '0') {
$msg_e('请选择房间')
} else if (!params.resideDate) {
$msg_e('请选择入住日期')
} else if (!params.deposit) {
$msg_e('请输入押金')
} else if (!params.guestNum) {
$msg_e('请输入入住人数')
} else if (params.roomStateId == 0) {
$msg_e('请选择房间状态')
} else {
return true
}
return false
}
Guest.vue
<template>
<div class="search">
<span>顾客姓名:</span>
<div style="width: 200px;">
<el-input size="small" v-model="guestName" placeholder="请输入顾客姓名" />
</div>
<span>结账状态:</span>
<el-select v-model="resideStateId" size="small">
<el-option v-for="item in resideStateList" :key="item.resideStateId" :label="item.resideTStateName"
:value="item.resideStateId" />
</el-select>
<el-button size="small" type="success" @click="loadTable">查询</el-button>
<!-- <el-button size="small" type="info" @click="toExcel">导出</el-button> -->
<el-button size="small" type="primary" @click="openDrawer = true">添加</el-button>
</div>
<el-table size="" :data="tableData" style="width: 100%">
<el-table-column prop="guestId" label="编号" width="40" />
<el-table-column prop="guestName" label="姓名" width="70" />
<el-table-column prop="identitiId" label="身份证" width="160" />
<el-table-column prop="photo" label="电话" width="100" />
<el-table-column prop="roomId" label="房间号" width="80" />
<el-table-column prop="room.roomType.roomTypeName" label="房间类型" width="100" />
<el-table-column prop="resideDate" label="入住日期" width="140" />
<el-table-column prop="leaveDate" label="离开日期" width="140" />
<el-table-column prop="deposit" label="押金" width="80" />
<el-table-column prop="totalMoney" label="消费金额" width="80" />
<el-table-column label="结账状态" width="100">
<template #default="scope">
<el-tag size="mini" v-if="scope.row.resideState.resideStateId == 2"
type="success">{{ scope.row.resideState.resideStateName }}</el-tag>
<el-tag size="mini" v-if="scope.row.resideState.resideStateId == 1"
type="warning">{{ scope.row.resideState.resideStateName }}</el-tag>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="240">
<template #default="scope">
<el-button v-if="scope.row.resideState.resideStateId == 1" size="small" type="warning"
@click="handleEdit(scope.row)">编辑</el-button>
<el-button v-if="scope.row.resideState.resideStateId == 2" size="small" type="danger"
@click="handleDelete(scope.row)">删除</el-button>
<el-button v-if="scope.row.resideState.resideStateId == 1" size="small" type="primary"
@click="handleCheckout(scope.row)">结账</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
v-model:current-page="pageIndex" />
</div>
<el-drawer v-model="openDrawer" :title="isAdd ? '添加顾客' : '修改顾客'" size="40%" direction="rtl" :before-close="drawerClose">
<div class="edititem">
<span>顾客姓名:</span>
<div>
<el-input v-model="formData.guestName" placeholder="请输入顾客姓名" />
</div>
</div>
<div class="edititem">
<span>身份证号:</span>
<div>
<el-input v-model="formData.identityId" placeholder="请输入身份证号" />
</div>
</div>
<div class="edititem">
<span>手机号:</span>
<div>
<el-input v-model="formData.phone" placeholder="请输入手机号" />
</div>
</div>
<div class="edititem">
<span>房间类型:</span>
<div>
<el-select v-model="formData.roomTypeId" size="small">
<el-option v-for="item in roomTypeList" :key="item.roomTypeId" :label="item.roomTypeName"
:value="item.roomTypeId" placeholder="请选择房间类型" />
</el-select>
</div>]
</div>
<div class="edititem">
<span>房间:</span>
<div>
<el-select v-model="formData.roomId" size="small">
<el-option v-for="item in roomList" :key="item.roomId" :label="item.roomName" :value="item.roomId"
placeholder="请选择房间" />
</el-select>
</div>
</div>
<div class="edititem">
<span>入住日期:</span>
<div>
<el-date-picker size="small" v-model="formData.resideDate" type="datetime" placeholder="请选择入住日期" />
</div>
</div>
<div class="edititem">
<span>押金:</span>
<div>
<el-input v-model.number="formData.resideDate" placeholder="请输入押金" />
</div>
</div>
<div class="edititem">
<span>入住人数:</span>
<div>
<el-input v-model.number="formData.guestNum" placeholder="请输入入住人数" />
</div>
</div>
<div class="edititem">
<span></span>
<div>
<el-button size="small" type="primary" @click="editForm">{{ isAdd ? '添加' : '修改' }}</el-button>
<el-button size="small" type="default" @click="clearFormData">取消</el-button>
</div>
</div>
</el-drawer>
<el-dialog v-model="dialogVisible" title="房间照片" width="60%">
<el-upload v-model:file-list="fileList" :action="room_upload_url" list-type="picture-card" :file-list="imgList"
:limit="9" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<el-dialog v-model="dialogVisible2" width="50%">
<img style="width:100%" :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
</el-dialog>
</template>
<script>
import { list, add, update, del, checkout } from '../../api/guest'
import { reactive, toRefs, watch, nextTick } from 'vue'
//导入操作房间类型的API
import { list as roomTypeList } from '../../api/roomType'
//房间状态API
import { list as resideStateList } from '../../api/resideState'
import { list as roomList } from '../../api/room'
import { $msg_e } from '../../utils/msg'
export default {
name: 'Guest',
setup() {
let data = reactive({
//表格数据
tableData: [],
guestName: '',
resideStateId: 0,
//页码
pageIndex: 1,
//每页条数
pageSize: 3,
total: 5,
resideStateList: [],
//房间类型数组
roomTypeList: [],
//房间数组
roomList: [],
//是否打开抽屉
openDrawer: false,
//是否是添加操作
isAdd: true,
//表单数据
formData: {
guestId: 0,
identityId: '',
guestName: '',
phone: '',
roomTypeId: 0,
roomId: '请选择房间',
resideDate: '',
deposit: '',
guestNum: ''
}
})
data.tableData = [
{ 'guestId': '1', 'guestName': '迪丽热巴', 'identitiId': '12345678901234567', 'photo': '12345678999', 'roomId': '102', "room": "{'roomType':'{'roomTypeName':'标准间'}'}", 'resideDate': '2023-10-12', 'leaveDate': '2023-10-24', 'deposit': '20000', 'totalMoney': '5000', 'resideState': "{'resideStateId':'2','resideStateName':'已结账'}" },
{ 'guestId': '2', 'guestName': '小清', 'identitiId': '12345678901234567', 'photo': '12345678999', 'roomId': '102', "room": "{'roomType':'{'roomTypeName':'标准间'}'}", 'resideDate': '2023-10-22', 'leaveDate': '2023-10-24', 'deposit': '23000', 'totalMoney': '5300', 'resideState': "{'resideStateId':'2','resideStateName':'已结账'}" },
{ 'guestId': '3', 'guestName': '小凤', 'identitiId': '12345678901234567', 'photo': '12345678999', 'roomId': '102', 'room': "{'roomType':'{'roomTypeName':'标准间'}'}", 'resideDate': '2023-10-22', 'leaveDate': '2023-10-24', 'deposit': '23000', 'totalMoney': '5300', 'resideState': "{'resideStateId':'2','resideStateName':'已结账'}" }
]
//监听roomTypeId的值有没有发生变化
watch(() => data.formData.roomTypeId, (val) => {
//清空
data.formData.roomId = '请选择房间'
if (val > 0) {
//加载房间
loadRoomList(val)
} else {
data.roomList = []
}
})
//加载房间的方法
let loadRoomList = async (roomTypeId) => {
let { data: ret } = await roomList({ roomTypeId, roomStateId: 1, pageSize: 100, guestId: data.formData.guestId })
ret.unshift({ roomId: '请选择房间' })
data.roomList = ret
}
//加载房间类型的方法
let loadRoomTypeList = async () => {
let ret = await roomTypeList()
ret.unshift({ roomTypeId: 0, roomTypeName: '请选择输入房间类型' })
data.roomTypeList = ret
}
//调用查询房间类型的方法
loadRoomTypeList()
//加载结账状态
let loadResideStateList = async () => {
let ret = await resideStateList()
ret.unshift({ resideStateId: 0, resideStateName: '请选择结账状态' })
data.resideStateList = ret
}
//调用结账状态的方法
loadResideStateList()
//加载数据表方法
let loadTable = async () => {
let params = {
pageIndex: data.pageIndex,
pageSize: data.pageSize,
guestName: data.guestName,
residesStateId: data.resideStateId
}
//获取查询结果
// let {data:guestData,count} = await list(params)
// data.tableData = guestData
// data.total = count
}
//执行加载表格数据的方法
loadTable()
//监听当前页码是否发生变化
watch(() => data.pageIndex, () => {
//执行加载表格数据的方法
loadTable()
})
//编辑表单
let editForm = async () => {
let r = false
//判断是执行添加还是修改
if (data.isAdd) {
r = await add(data.formData)
if (r) {
clearFormData()
}
} else {
r = await update(data.formData)
}
if (r) {
loadTable();
}
}
//关闭抽屉
let drawerClose = () => {
data.openDrawer = false
add.isAdd = true
clearFormData()
}
//执行修改
let handleEdit = (row) => {
//当前客房信息
data.formData = { ...row }
// 给表单数据添加客房类型编号
data.formData.roomTypeId = row.room.roomTypeId
//DOM更新完毕后,执行
nextTick(() => {
data.formData.roomId = row.room.roomId
})
data.isAdd = false
data.openDrawer = true
}
//执行删除
let handleDelete = async (row) => {
//获取房间编号
let { guestId } = row
let r = await del({ guestId })
//删除成功,刷新页面
if (r) {
loadTable
}
}
//清空表单数据
let clearFormData = () => {
data.formData = {
guestId: 0,
identityId: '',
guestName: '',
phone: '',
roomTypeId: 0,
roomId: '请选择房间',
resideDate: '',
deposit: '',
guestNum: ''
}
}
//加载房间状态
let loadRoomStateList = async () => {
let ret = await roomStateList()
ret.unshift({ roomStateId: 0, roomStateName: '请选择房间状态' })
data.roomStateList = ret
}
//结账
let handleCheckout = async (row) => {
let { guestId } = row
if (new Date(resideDate) < Date.now()) {
let totalMoney = await checkout(guestId)
loadTable()
} else {
$msg_e('未到结账时间')
}
}
watch(() => data.dialogVisible, (val) => {
//监听到关闭对话框
if (!val) {
data.imgList = []
}
})
return {
...toRefs(data),
loadTable,
editForm,
drawerClose,
handleEdit,
handleDelete,
clearFormData,
}
}
}
</script>
<style scoped lang="scss"></style>