czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

桌台预约调试

This commit is contained in:
GaoHao 2024-12-16 15:24:14 +08:00
parent 316fce4cfc
commit 185749701b
4 changed files with 398 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/api/table.js
View File

@ -1,10 +1,10 @@
// 桌台管理
import request from "@/utils/request";
//就餐形式，默认堂食后付费
const useType='dine-in-after'
function getUseType(){
const type=localStorage.getItem("useType")
return type?type:useType
import request from '@/utils/request'
// 就餐形式，默认堂食后付费
const useType = 'dine-in-after'
function getUseType() {
const type = localStorage.getItem('useType')
return type || useType
}
/**
* 台桌列表
@ -13,12 +13,51 @@ function getUseType(){
export function tbShopTableGet(params) {
return request({
url: `/api/tbShopTable`,
method: "get",
params:{
shopId: localStorage.getItem("shopId"),
method: 'get',
params: {
shopId: localStorage.getItem('shopId'),
...params
}
});
})
}
/**
* 获取预约台桌列表
* @returns
*/
export function getShopTableList(params) {
return request({
url: `/api/booking/shop-table/list`,
method: 'get',
params: {
shopId: localStorage.getItem('shopId'),
...params
}
})
}
/**
* 预约
* @returns
*/
export function makeShopTable(data) {
return request({
url: `/api/booking/shop-table`,
method: 'post',
data
})
}
/**
* 标记预约状态
* @returns
*/
export function markStatus(data) {
return request({
url: `/api/booking/shop-table/mark-status`,
method: 'post',
data
})
}
/**
@ -28,7 +67,7 @@ export function tbShopTableGet(params) {
export function tbShopAreaGet(params) {
return request({
url: `/api/tbShopArea`,
method: "get",
method: 'get',
params
});
}

196
src/views/table/components/subscribe.vue
View File

@ -2,8 +2,7 @@
<el-dialog
title="预约"
:visible.sync="dialogVisible"
width="400px"
@open="tbShopAreaGet"
width="500px"
@close="reset"
>
<el-form
@ -14,17 +13,67 @@
label-position="left"
>
<el-form-item label="就餐人数" prop="number">
<el-input-number v-model="form.number" :min="1" controls-position="right" />
<el-form-item label="预约日期" prop="bookingDate">
<!-- <el-date-picker
v-model="form.bookingDate"
type="date"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
placeholder="选择预约日期"
style="width: 200px;margin-right: 10px;"
@change="getShopTableList"
/> -->
<el-radio-group
v-model="form.bookingDate"
class="date"
@change="getShopTableList"
>
<el-radio-button
v-for="(item) in dateList"
:key="item.date"
:label="item.date"
>
<div style="font-size: 12px;margin-bottom: 4px;">{{ item.label }} / {{ item.date.substring(8,10) }}</div>
<div style="font-size: 12px;"> {{ item.day }}</div>
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
<el-form-item label="预约类型" prop="bookingType">
<el-radio-group v-model="form.bookingType" @change="getShopTableList">
<el-radio-button label="lunch">午餐</el-radio-button>
<el-radio-button label="dinner">晚餐</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="联系人" prop="name">
<el-input v-model="form.name" placeholder="请输入联系人姓名" />
<el-form-item label="就餐时间" prop="bookingTime">
<el-time-picker
v-model="form.bookingTime"
value-format="HH:mm:ss"
placeholder="选择时间"
style="width: 100%;"
/>
</el-form-item>
<el-form-item label="就餐时间" prop="time">
<el-time-picker v-model="form.time" value-format="HH:mm:ss" placeholder="选择时间" style="width: 100%;" />
<el-form-item label="预约桌台" prop="shopTableId">
<el-select v-model="form.shopTableId" placeholder="请选择" style="width: 100%;">
<el-option
v-for="item in shopTableList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="用餐人数" prop="dinerNum">
<el-input-number v-model="form.dinerNum" :min="1" controls-position="right" style="width: 100%;"/>
</el-form-item>
<el-form-item label="订餐人" prop="bookingPerson">
<el-input v-model="form.bookingPerson" style="width: 200px;margin-right: 10px;" placeholder="请输入联系人姓名" />
<el-radio-group v-model="form.gender">
<el-radio-button label="1">先生</el-radio-button>
<el-radio-button label="2">女士</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="联系电话" prop="phoneNumber">
<el-input v-model="form.phoneNumber" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
@ -39,46 +88,73 @@
</template>
<script>
import { $fastCreateTable } from '@/api/table'
import { getShopTableList, makeShopTable } from '@/api/table'
import dayjs from 'dayjs'
export default {
data() {
return {
dialogVisible: false,
resetForm: '',
loading: false,
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7 // 如果今天之前的日期都不可选，减去8.64e7是1天的毫秒数
}
},
dateList: [
{ label: '今', day: '', date: '' },
{ label: '明', day: '', date: '' },
{ label: '后', day: '', date: '' }
],
shopTableList: [],
form: {
id: '',
number: 1,
name: '',
phone: '',
time: ''
bookingDate: '',
bookingType: 'lunch',
shopTableId: null,
dinerNum: 1,
bookingPerson: '',
phoneNumber: '',
gender: '1',
bookingTime: '',
diningType: '普通用餐',
focus: '0',
receiveMarketingSms: '0'
},
rules: {
number: [
shopTableId: [
{
required: true,
message: '请选择就餐人数',
message: '请选择预约桌台',
trigger: ['blur']
}
],
phone: [
dinerNum: [
{
required: true,
message: '请选择用餐人数',
trigger: ['blur']
}
],
phoneNumber: [
{
required: true,
message: '请输入联系方式',
trigger: ['blur']
}
],
name: [
bookingPerson: [
{
required: true,
message: '请输入联系人姓名',
message: '请输入订餐人姓名',
trigger: ['blur']
}
],
time: [
bookingTime: [
{
required: true,
message: '请选择时间',
message: '请选择用餐时间',
trigger: ['change']
}
]
@ -89,19 +165,59 @@ export default {
this.resetForm = { ...this.form }
},
methods: {
getWeekdays() {
const today = new Date()
const tomorrow = new Date(today)
const dayAfterTomorrow = new Date(today)
// 设置时间为今天
tomorrow.setDate(today.getDate() + 1)
dayAfterTomorrow.setDate(today.getDate() + 2)
// 获取星期几的方法
const getDayOfWeek = (date) => {
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
return days[date.getDay()]
}
// 获取今天、明天和后天的星期几
const todayWeekday = getDayOfWeek(today)
const tomorrowWeekday = getDayOfWeek(tomorrow)
const dayAfterTomorrowWeekday = getDayOfWeek(dayAfterTomorrow)
this.dateList[0].day = todayWeekday
this.dateList[1].day = tomorrowWeekday
this.dateList[2].day = dayAfterTomorrowWeekday
this.dateList[0].date = dayjs(today).format('YYYY-MM-DD')
this.dateList[1].date = dayjs(tomorrow).format('YYYY-MM-DD')
this.dateList[2].date = dayjs(dayAfterTomorrow).format('YYYY-MM-DD')
this.form.bookingDate = this.dateList[0].date
},
/**
* 获取桌台数据
*/
async getShopTableList() {
this.form.shopTableId = null
const params = {
bookingDate: this.form.bookingDate,
bookingType: this.form.bookingType
}
const res = await getShopTableList(params)
this.shopTableList = res
console.log(res)
},
onSubmitHandle() {
this.$refs.form.validate(async(valid) => {
if (valid) {
this.loading = true
try {
const res = await $fastCreateTable(
{
...this.form,
qrcode: this.form.tableId,
shopId: localStorage.getItem('shopId')
},
this.form.id ? 'put' : 'post'
)
const bookingTime = this.form.bookingDate + ' ' + this.form.bookingTime
const params = {
...this.form,
shopId: localStorage.getItem('shopId')
}
params.bookingTime = bookingTime
const res = await makeShopTable(params)
this.$emit('success', res)
this.close()
this.$notify({
@ -122,6 +238,8 @@ export default {
if (obj && obj.id) {
this.form = JSON.parse(JSON.stringify(obj))
}
this.getShopTableList()
this.getWeekdays()
},
close() {
this.dialogVisible = false
@ -133,3 +251,19 @@ export default {
}
}
</script>
<style scoped lang="scss">
.date{
::v-deep .el-form-item__content{
// height: 36px;
// display: flex;
// justify-content: space-between;
}
::v-deep .el-radio-button{
height: 100%;
}
::v-deep .el-radio-button__inner{
padding: 4px 20px;
height: 100%;
}
}
</style>

46
src/views/table/status.js
View File

@ -1,38 +1,10 @@
export default {
pending: {
label: "挂单中",
type: "#E6A23C",
},
using: {
label: "开台中",
type: "#fa5555",
},
paying: {
label: "结算中",
type: "#E6A23C",
},
idle: {
label: "空闲",
type: "#3F9EFF",
},
subscribe: {
label: "预定",
type: "rgb(34, 191, 100)",
},
closed: {
label: "关台",
type: "rgb(221,221,221)",
},
// opening: {
// label: "开台中",
// type: "#67C23A",
// },
cleaning: {
label: "待清台",
type: "#FAAD14",
},
unbind: {
label: "未绑定",
type: "rgb(221,221,221)",
}
}
pending: { label: '挂单中', type: '#E6A23C' },
cleaning: { label: '待清台', type: '#FAAD14' },
using: { label: '开台中', type: '#FF4D4F' },
idle: { label: '空闲', type: '#3F9EFF' },
paying: { label: '结算中', type: '#E6A23C' },
closed: { label: '关台', type: '#DDDDDD' },
subscribe: { label: '预约', type: '#52C41A ' },
unbind: { label: '未绑定', type: 'rgb(221,221,221)' }
}

228
src/views/table/table_list.vue
View File

@ -22,6 +22,27 @@
</el-tabs>
<div class="head-container">
<div class="filter_wrap">
<el-radio-group
v-model="query.bookingDate"
class="date"
@change="tbShopTableGet"
>
<el-radio-button
v-for="(item) in dateList"
:key="item.date"
:label="item.date"
>
<div>{{ item.label }}
<!-- / {{ item.date.substring(8,10) }} -->
</div>
<!-- <div style="font-size: 12px;"> {{ item.day }}</div> -->
</el-radio-button>
</el-radio-group>
<el-radio-group v-model="query.bookingType" @change="tbShopTableGet">
<el-radio-button label="lunch">午餐</el-radio-button>
<el-radio-button label="dinner">晚餐</el-radio-button>
</el-radio-group>
<el-button
icon="el-icon-plus"
@click="$refs.addEara.show()"
@ -43,6 +64,11 @@
icon="el-icon-download"
@click="downloadShopCode"
>下载店铺码</el-button>
<el-button
type="primary"
icon="el-icon-plus"
@click="$refs.subscribe.show()"
>预约</el-button>
</div>
</div>
<div class="u-flex u-p-b-15 u-font-14">
@ -89,33 +115,51 @@
<div class="box">
<div class="top">
<!-- <div class="row row1">
<span>{{ item.name }}</span>
<div class="state">
<span
class="dot"
:style="{
backgroundColor: status[item.status]
? status[item.status].type
: '',
}"
></span>
{{ status[item.status] ? status[item.status].label : "" }}
<span>{{ item.name }}</span>
<div class="state">
<span
class="dot"
:style="{
backgroundColor: status[item.status]
? status[item.status].type
: '',
}"
/>
{{ status[item.status] ? status[item.status].label : "" }}
</div>
</div> -->
<!-- <div class="row">
<el-tag type="warning" size="mini">{{
item.type == 0 ? "低消" : "计时"
}}</el-tag>
<el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
item.isPredate == 1 ? "可预约" : "不可预约"
}}</el-tag>
</div> -->
<!-- <div class="row">
<span class="tips">客座次数：{{ item.maxCapacity }}人</span>
</div> -->
<div v-if="item.status == 'subscribe'">
<div class="row row1" style="align-items: flex-start;">
<span style="font-size: 14px;color: #333;">{{ item.bookingInfo.createUserName }}订{{ item.bookingInfo.bookingPerson }}「{{ item.bookingInfo.gender==1?'先生':'女士' }}」</span>
<div class="state" style="font-size: 12px;color: #666;display: flex;align-items: center;">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/perpole.png"
alt=""
>
{{ item.bookingInfo.bookingTime.substring(11,19) }}
</div>
</div>
<div class="row">
<span style="font-size: 14px;color: #333;margin-top: 5px;">{{ item.bookingInfo.phoneNumber }}</span>
</div>
</div>
</div> -->
<!-- <div class="row">
<el-tag type="warning" size="mini">{{
item.type == 0 ? "低消" : "计时"
}}</el-tag>
<el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
item.isPredate == 1 ? "可预约" : "不可预约"
}}</el-tag>
</div> -->
<!-- <div class="row">
<span class="tips">客座次数：{{ item.maxCapacity }}人</span>
</div> -->
<div class="u-font-18 font-600 total-price">
<div v-else class="u-font-18 font-600 total-price">
<span
v-if="item.status == 'using'"
class="cur-pointer"
@ -123,30 +167,31 @@
>
¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
</span>
<span v-else class="color-fff">|</span>
<!-- <span v-else class="color-fff">|</span> -->
</div>
<div class="row btn-group">
<template v-if="item.status == 'idle'">
<el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'subscribe')"
>预约</el-button>
</template>
<div class="row btn-group" style="margin-top: 10px;">
<template v-if="item.status == 'subscribe'">
<el-button
type="primary"
type="success"
:disabled="!item.tableId || item.status === 'closed'"
>已预约</el-button>
@click="markStatus(item,-1)"
>取消预约</el-button>
</template>
<template v-if="item.status == 'idle' || item.status == 'subscribe'">
<template v-if="item.status == 'subscribe'&&(item.bookingInfo.status==20)">
<el-button
type="success"
:disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item,10)"
>到店</el-button>
</template>
<template v-if="item.status == 'idle'||(item.status == 'subscribe'&&(item.bookingInfo.status==10))">
<el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item)"
>点餐</el-button>
</template>
<template v-else>
<template v-else-if="item.status != 'idle' && item.status != 'subscribe'">
<template v-if="item.status == 'using'">
<el-button
:disabled="!item.tableId || item.status === 'closed'"
@ -238,9 +283,12 @@ import downloadTableCode from './components/downloadTableCode'
import chooseDinersNumber from './components/table-diancan-components/choose-diners-number.vue'
import { tbShopInfo } from '@/api/user'
import { hasPermission } from '@/utils/limits.js'
import $status from './status.js'
import dayjs from 'dayjs'
import {
tbShopTableGet,
markStatus,
tbShopAreaGet,
tbShopAreaDelete,
tbShopTableDelete,
@ -277,29 +325,40 @@ export default {
},
data() {
return {
dateList: [
{ label: '今天', day: '', date: '' },
{ label: '明天', day: '', date: '' },
{ label: '后天', day: '', date: '' }
],
query: {
bookingDate: '',
bookingType: 'lunch'
},
tabVlaue: '',
tabs: [],
loading: false,
total: 0,
tableList: [],
status: {
pending: { label: '挂单中', type: '#E6A23C' },
status: $status,
// status: {
// pending: { label: '挂单中', type: '#E6A23C' },
cleaning: { label: '待清台', type: '#FAAD14' },
using: { label: '开台中', type: '#FF4D4F' },
idle: { label: '空闲', type: '#3F9EFF' },
// cleaning: { label: '待清台', type: '#FAAD14' },
// using: { label: '开台中', type: '#FF4D4F' },
// idle: { label: '空闲', type: '#3F9EFF' },
paying: { label: '结算中', type: '#E6A23C' },
// paying: { label: '结算中', type: '#E6A23C' },
closed: { label: '关台', type: '#DDDDDD' },
subscribe: { label: '预定', type: '#52C41A ' },
// closed: { label: '关台', type: '#DDDDDD' },
// subscribe: { label: '预定', type: '#52C41A ' },
unbind: { label: '未绑定', type: 'rgb(221,221,221)' }
// unbind: { label: '未绑定', type: 'rgb(221,221,221)' }
},
// },
selTable: '', // 当前选中的桌台
areaMap: {},
shopInfo: {},
bookingDate: '',
timer: null
}
},
@ -312,8 +371,53 @@ export default {
this.setTimter(60)
this.tbShopAreaGet()
this.getShopInfo()
this.getWeekdays()
},
methods: {
/**
* 设置日期
*/
getWeekdays() {
const today = new Date()
const tomorrow = new Date(today)
const dayAfterTomorrow = new Date(today)
// 设置时间为今天
tomorrow.setDate(today.getDate() + 1)
dayAfterTomorrow.setDate(today.getDate() + 2)
// 获取星期几的方法
const getDayOfWeek = (date) => {
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
return days[date.getDay()]
}
// 获取今天、明天和后天的星期几
const todayWeekday = getDayOfWeek(today)
const tomorrowWeekday = getDayOfWeek(tomorrow)
const dayAfterTomorrowWeekday = getDayOfWeek(dayAfterTomorrow)
this.dateList[0].day = todayWeekday
this.dateList[1].day = tomorrowWeekday
this.dateList[2].day = dayAfterTomorrowWeekday
this.dateList[0].date = dayjs(today).format('YYYY-MM-DD')
this.dateList[1].date = dayjs(tomorrow).format('YYYY-MM-DD')
this.dateList[2].date = dayjs(dayAfterTomorrow).format('YYYY-MM-DD')
this.query.bookingDate = this.dateList[0].date
},
/**
* 修改预约状态
*/
async markStatus(item, type) {
console.log(item)
const params = {
id: item.bookingInfo.id,
status: type
}
const res = await markStatus(params)
this.tbShopTableGet()
console.log(res)
},
/**
* 下载店铺码
*/
@ -332,6 +436,9 @@ export default {
console.log(error)
}
},
tbShopSubscribe() {
this.tbShopTableGet()
},
/**
* 清除定时器
*/
@ -499,11 +606,17 @@ export default {
async tbShopTableGet(showloading = true) {
this.loading = showloading
try {
const { content, total } = await tbShopTableGet({
const res = await tbShopTableGet({
shopId: localStorage.getItem('shopId'),
areaId: this.tabVlaue
areaId: this.tabVlaue === '0' ? '' : this.tabVlaue,
...this.query
})
this.tableList = content
res.content.map(item => {
if (item.status === 'subscribe' && !item.bookingInfo) {
item.status = 'idle'
}
})
this.tableList = res.content
// this.tableList = content.sort((a,b)=>{
// if(a.status=='idle'&&b.status!='idle'){
// return 1
@ -511,7 +624,7 @@ export default {
// return -1
// }
// });
this.total = total
this.total = res.total
setTimeout(() => {
this.loading = false
}, 300)
@ -601,8 +714,8 @@ export default {
justify-content: space-between;
border-radius: 6px;
background-color: #1890ff;
max-width: 172px;
min-width: 160px;
max-width: 210px;
min-width: 190px;
&.using {
background-color: rgb(250, 85, 85);
}
@ -630,8 +743,12 @@ export default {
text-overflow: ellipsis;
}
.box {
height: 100%;
background-color: #fff;
border-radius: 3px 3px 6px 6px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.bottom {
border-top: 1px solid #f7f7fa;
@ -642,6 +759,9 @@ export default {
background-color: #fff;
flex: 1;
border-radius: 3px 3px 0 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
.row {
display: flex;
gap: 10px;