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

代客下单增加台桌切换 

当台桌切换时重新获取取餐码，购物车数据，订单数据，就餐人数
This commit is contained in:
YeMingfei666 2024-09-13 15:05:59 +08:00
parent cf36010926
commit f767d12f4a
7 changed files with 227 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/table.js
View File

@ -9,7 +9,10 @@ export function tbShopTableGet(params) {
return request({ return request({
url: `/api/tbShopTable`, url: `/api/tbShopTable`,
method: "get", method: "get",
params params:{
shopId: localStorage.getItem("shopId"),
...params
}
}); });
} }

2
src/views/table/components/keyboard.vue
View File

@ -119,7 +119,7 @@ export default {
if (this.number.length <= 1) { if (this.number.length <= 1) {
return (this.number = this.isCanEmpty ? "" : "0"); return (this.number = this.isCanEmpty ? "" : "0");
} }
this.number = this.number.substring(0, this.number.length - 1); this.number = `${this.number}`.substring(0, this.number.length - 1);
}, },
keyboradConfirm() { keyboradConfirm() {
this.$emit("confirm", this.number); this.$emit("confirm", this.number);

23
src/views/table/components/table-diancan-components/choose-diners-number.vue
View File

@ -6,8 +6,8 @@
isCanEmpty isCanEmpty
v-model="number" v-model="number"
@clear="clear" @clear="clear"
:max="99" :max="max"
maxTips="最多99位" :maxTips=" '最多'+max+'位'"
> >
<div slot="clear">清空</div> <div slot="clear">清空</div>
<div slot="input" class="u-p-l-20 u-p-r-20 u-flex w-full"> <div slot="input" class="u-p-l-20 u-p-r-20 u-flex w-full">
@ -37,6 +37,12 @@
import keyBoard from "../keyboard.vue"; import keyBoard from "../keyboard.vue";
export default { export default {
components: { keyBoard }, components: { keyBoard },
props:{
max:{
type:Number,
default:99
}
},
data() { data() {
return { return {
number: "", number: "",
@ -47,9 +53,11 @@ export default {
}, },
watch: { watch: {
number(newval) { number(newval) {
if (newval >= 99) { console.log(newval)
this.number = 99; console.log(this.max)
this.$message("最多只能选择99位就餐人数"); if (newval >this.max) {
this.number = this.max;
this.$message("最多只能选择"+this.max+"位就餐人数");
} }
console.log(newval); console.log(newval);
// 使用正则表达式匹配正整数 // 使用正则表达式匹配正整数
@ -68,6 +76,11 @@ export default {
this.number = ""; this.number = "";
}, },
confirm() { confirm() {
console.log(this.number)
console.log(this.max)
if (this.number >this.max) {
return this.$message("最多只能选择"+this.max+"位就餐人数");
}
if (!this.number) { if (!this.number) {
return this.$message("请选择就餐人数"); return this.$message("请选择就餐人数");
} }

94
src/views/table/components/table-diancan.vue
View File

@ -281,21 +281,19 @@
</div> </div>
</template> </template>
<!-- 餐位费 --> <!-- 餐位费 -->
<template v-if="order.seatFee&&order.seatFee.totalAmount>0"> <template v-if="order.seatFee && order.seatFee.totalAmount > 0">
<div class="carts_list_title"> <div class="carts_list_title">餐位费</div>
餐位费 <cart-item
</div> @itemClick="changeOrderOldSel"
<cart-item :canChangeNumber="false"
@itemClick="changeOrderOldSel" key="seatFee"
:canChangeNumber="false" :index="0"
key="seatFee" :item="order.seatFee"
:index="0" isSeatFee
:item="order.seatFee" :selIndex="order.old.selIndex"
isSeatFee :placeNum="-1"
:selIndex="order.old.selIndex" :selPlaceNum="order.selPlaceNum"
:placeNum="-1" ></cart-item>
:selPlaceNum="order.selPlaceNum"
></cart-item>
</template> </template>
<div class="order_remark" v-if="note.content"> <div class="order_remark" v-if="note.content">
订单备注： {{ note.content }} 订单备注： {{ note.content }}
@ -759,7 +757,9 @@
</div> </div>
<div class="detail_form_item"> <div class="detail_form_item">
<div class="left">餐位费/附加费</div> <div class="left">餐位费/附加费</div>
<div class="right">￥{{order.seatFee.totalAmount|to2}}</div> <div class="right">
￥{{ order.seatFee.totalAmount | to2 }}
</div>
</div> </div>
<div class="detail_form_item"> <div class="detail_form_item">
<div class="left">总价</div> <div class="left">总价</div>
@ -1048,6 +1048,7 @@
<choose-diners-number <choose-diners-number
ref="refChooseDinersNumber" ref="refChooseDinersNumber"
@confirm="chooseDinersNumberConfirm" @confirm="chooseDinersNumberConfirm"
:max="table.maxCapacity || 99"
></choose-diners-number> ></choose-diners-number>
<return-cart <return-cart
@ -1089,6 +1090,7 @@ import {
$choseCount, $choseCount,
$returnCart, $returnCart,
$printOrder, $printOrder,
tbShopTableGet
} from "@/api/table"; } from "@/api/table";
import { tbShopCategoryGet } from "@/api/shop"; import { tbShopCategoryGet } from "@/api/shop";
import { import {
@ -1098,7 +1100,6 @@ import {
returnReverseVal, returnReverseVal,
} from "./util.js"; } from "./util.js";
import $status from "../status.js"; import $status from "../status.js";
import { tbShopTableGet } from "@/api/table";
export default { export default {
components: { components: {
returnCart, returnCart,
@ -1340,9 +1341,6 @@ export default {
const cartNumber = this.order.list.reduce((a, b) => { const cartNumber = this.order.list.reduce((a, b) => {
return a + b.number * 1; return a + b.number * 1;
}, 0); }, 0);
console.log(oldNumber);
console.log(cartNumber);
return oldNumber + cartNumber; return oldNumber + cartNumber;
}, },
selGoodsHide() { selGoodsHide() {
@ -1377,7 +1375,7 @@ export default {
}, },
watch: { watch: {
perpole(newval) { perpole(newval) {
if (newval) { if (newval&&this.table.tableId) {
$choseCount({ $choseCount({
masterId: this.masterId, masterId: this.masterId,
tableId: this.table.tableId, tableId: this.table.tableId,
@ -1388,14 +1386,17 @@ export default {
} }
}, },
table(oldval, newval) { table(oldval, newval) {
if (oldval && newval) { if(oldval&&newval) {
console.log(oldval, newval); this.onTableChange()
$choseTable({ }
orderId: 4462, // if (oldval && newval) {
oldTableId: oldval.tableId, // console.log(oldval, newval);
newTableId: newval.tableId, // $choseTable({
}); // orderId: 4462,
} // oldTableId: oldval.tableId,
// newTableId: newval.tableId,
// });
// }
}, },
masterId: function (val) { masterId: function (val) {
console.log(val); console.log(val);
@ -1531,6 +1532,22 @@ export default {
// this.refToggle("refDiscount", true); // this.refToggle("refDiscount", true);
}, },
methods: { methods: {
//台桌变化时重新获取取餐号、购物车数据，如果是正在结账状态，创建订单到待支付页面
async onTableChange() {
const res = await this.getMasterId();
this.masterId = res.masterId;
this.getCart();
if (this.isCreateOrder) {
this.toCreateOrder(true);
}
},
// 获取台桌详情
async getTableDetail(){
const res=await tbShopTableGet({
qrcode:this.table.tableId
})
console.log(res)
},
//打印制作单 //打印制作单
printOrder() { printOrder() {
this.$confirm("是否打印当前台桌菜品", "提示", { this.$confirm("是否打印当前台桌菜品", "提示", {
@ -1566,7 +1583,7 @@ export default {
const { content, total } = await tbShopTableGet({ const { content, total } = await tbShopTableGet({
shopId: localStorage.getItem("shopId"), shopId: localStorage.getItem("shopId"),
}); });
this.tableList = content; this.tableList = content.filter(v=>v.status!='closed');
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
@ -2429,21 +2446,18 @@ export default {
}, },
//获取购物车数据 //获取购物车数据
async getCart() { async getCart() {
this.order.list = []; console.log(this.table)
this.order.old.list = [];
const res = await getCart({ const res = await getCart({
...this.order.query, ...this.order.query,
masterId: this.masterId, masterId: this.masterId,
tableId: this.table.tableId, tableId: this.table.tableId,
}); });
this.order.seatFee=res.seatFee; this.order.seatFee=res.seatFee?res.seatFee:this.order.seatFee;
for (let i in res.records) { this.perpole=res.seatFee?res.seatFee.totalNumber:1;
if (res.records[i].placeNum == 0) { const nowCart=res.records.find((v) => v.placeNum == 0);
this.order.list = res.records[i].info; this.order.list=nowCart?nowCart.info:[];
} else { const oldCart=res.records.filter((v) => v.placeNum != 0);
this.order.old.list.push(res.records[i]); this.order.old.list=oldCart?oldCart:[];
}
}
// if (this.key|| res.records.length) { // if (this.key|| res.records.length) {
// this.order.old.list = res.records; // this.order.old.list = res.records;
// } else { // } else {

10
src/views/table/components/table-edit.vue
View File

@ -17,6 +17,12 @@
<el-form-item label="客座数"> <el-form-item label="客座数">
<el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number> <el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="清台管理">
<el-radio-group v-model="form.autoClear">
<el-radio-button :label="0">手动清台</el-radio-button>
<el-radio-button :label="1">自动清台</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="网络预定开关"> <el-form-item label="网络预定开关">
<el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch> <el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
</el-form-item> </el-form-item>
@ -66,7 +72,9 @@ export default {
isPredate: 1, isPredate: 1,
type: 2, type: 2,
perhour: 0, perhour: 0,
amount: 0 amount: 0,
autoClear: 1,
}, },
rules: { rules: {
areaId: [ areaId: [

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

@ -27,12 +27,8 @@ export default {
// label: "开台中", // label: "开台中",
// type: "#67C23A", // type: "#67C23A",
// }, // },
wait:{
label: "待清台",
type: "rgb(250,202,14)",
},
cleaning: { cleaning: {
label: "台桌清理中", label: "待清台",
type: "#909399", type: "#FAAD14",
} }
} }

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

@ -42,18 +42,15 @@
</div> </div>
</div> </div>
<div class="u-flex u-p-b-15 u-font-14"> <div class="u-flex u-p-b-15 u-font-14">
<div class="state u-m-r-24" v-for="(item,key) in status" :key="key"> <div class="state u-m-r-24" v-for="(item, key) in status" :key="key">
<span <span
class="dot" class="dot"
:style="{ :style="{
backgroundColor: status[key] backgroundColor: status[key] ? status[key].type : '',
? status[key].type }"
: '', ></span>
}" {{ item.label }}
></span> </div>
{{ item.label }}
</div>
</div> </div>
<div class="head-container"> <div class="head-container">
<div class="table_list" v-loading="loading"> <div class="table_list" v-loading="loading">
@ -61,12 +58,16 @@
class="item" class="item"
v-for="item in tableList" v-for="item in tableList"
:key="item.id" :key="item.id"
:class="[item.status]" :style="{ 'background-color': status[item.status].type }"
> >
<div class="new-top flex u-row-between"> <div class="new-top flex u-row-between">
<div class="u-flex u-flex-1 u-p-r-10"> <div class="u-flex u-flex-1 u-p-r-10">
<span class="name u-line-1 " style="max-width: 50px;"> {{ item.name }}</span> <span class="name u-line-1" style="max-width: 50px">
<span class="u-font-14 u-line-1">丨{{areaMap[item.areaId]||''}}</span> {{ item.name }}</span
>
<span class="u-font-14 u-line-1"
>丨{{ areaMap[item.areaId] || "" }}</span
>
</div> </div>
<el-dropdown trigger="click" @command="tableComman($event, item)"> <el-dropdown trigger="click" @command="tableComman($event, item)">
<i class="el-icon-more cur-pointer color-fff"></i> <i class="el-icon-more cur-pointer color-fff"></i>
@ -83,8 +84,8 @@
</el-dropdown> </el-dropdown>
</div> </div>
<div class="box"> <div class="box">
<div class="top"> <div class="top">
<!-- <div class="row row1"> <!-- <div class="row row1">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<div class="state"> <div class="state">
<span <span
@ -99,7 +100,7 @@
</div> </div>
</div> --> </div> -->
<!-- <div class="row"> <!-- <div class="row">
<el-tag type="warning" size="mini">{{ <el-tag type="warning" size="mini">{{
item.type == 0 ? "低消" : "计时" item.type == 0 ? "低消" : "计时"
}}</el-tag> }}</el-tag>
@ -108,58 +109,83 @@
}}</el-tag> }}</el-tag>
</div> --> </div> -->
<!-- <div class="row"> <!-- <div class="row">
<span class="tips">客座次数：{{ item.maxCapacity }}人</span> <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
</div> --> </div> -->
<div class="u-font-18 font-600 total-price" > <div class="u-font-18 font-600 total-price">
<span class="color-fff" v-if="item.status != 'using'">|</span> <span class="color-fff" v-if="item.status != 'using'">|</span>
<span v-else> <span v-else>
¥{{item.totalAmount||0}}「{{item.productNum}}件」 ¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
</span> </span>
</div> </div>
<div class="row btn-group"> <div class="row btn-group">
<template v-if="item.status == 'idle'"> <template v-if="item.status == 'idle'">
<el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item)"
>点餐</el-button
>
</template>
<template v-else>
<template v-if="item.status == 'using'">
<el-button <el-button
type="primary"
:disabled="!item.tableId || item.status === 'closed'" :disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isAddGoods')" @click="diancanShow(item)"
>加菜</el-button >点餐</el-button
> >
<el-button
type="danger"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isPayOrder')"
>结账</el-button
>
</template>
<template v-else-if="item.status == 'closed'">
<el-button type="info" disabled>已关台</el-button>
</template> </template>
<template v-else> <template v-else>
<el-button type="info" disabled>点餐</el-button> <template v-if="item.status == 'using'">
<el-button
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isAddGoods')"
>加菜</el-button
>
<el-button
type="danger"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isPayOrder')"
>结账</el-button
>
</template>
<template v-else-if="item.status == 'closed'">
<el-button type="info" disabled>已关台</el-button>
</template>
<template v-else-if="item.status == 'cleaning'">
<el-button
type="info"
@click="cleanTableHandle(item)"
:style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}"
>清台</el-button
>
</template>
<template v-else>
<el-button type="info" disabled>点餐</el-button>
</template>
</template> </template>
</template> </div>
</div> </div>
<div
</div> class="u-flex u-col-bottom bottom u-row-between color-666"
<div class="u-flex u-col-bottom bottom u-row-between color-666" :class="{'opacity-0':item.status == 'closed'}" > :class="{ 'opacity-0': item.status == 'closed' }"
<div class="u-flex u-col-center"> >
<img style="width: 16px;height: 16px;filter: contrast(0.5);" src="@/assets/images/perpole.png" alt=""> <div class="u-flex u-col-center">
<span class="u-m-t-4 u-font-12 u-m-l-2">{{item.useNum||0}}/{{ item.maxCapacity }}</span> <img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/perpole.png"
alt=""
/>
<span class="u-m-t-4 u-font-12 u-m-l-2"
>{{ item.useNum || 0 }}/{{ item.maxCapacity }}</span
>
</div>
<div class="u-flex" v-if="item.status == 'using'">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/shalou.png"
alt=""
/>
<span class="u-m-t-4 u-font-12">{{
item.durationTime | formatTime
}}</span>
</div>
</div> </div>
<div class="u-flex" v-if="item.status == 'using'">
<img style="width: 16px;height: 16px;filter: contrast(0.5);" src="@/assets/images/shalou.png" alt="">
<span class="u-m-t-4 u-font-12 ">{{item.durationTime|formatTime}}</span>
</div>
</div>
</div> </div>
</div> </div>
<div class="empty_wrap"> <div class="empty_wrap">
@ -198,6 +224,7 @@ import {
tbShopAreaGet, tbShopAreaGet,
tbShopAreaDelete, tbShopAreaDelete,
tbShopTableDelete, tbShopTableDelete,
tbShopTable,
} from "@/api/table"; } from "@/api/table";
import dayjs from "dayjs"; import dayjs from "dayjs";
export default { export default {
@ -205,7 +232,9 @@ export default {
addEara, addEara,
addTable, addTable,
downloadTableCode, downloadTableCode,
tableDiancan,chooseDinersNumber,tableEdit tableDiancan,
chooseDinersNumber,
tableEdit,
}, },
data() { data() {
return { return {
@ -215,19 +244,29 @@ export default {
total: 0, total: 0,
tableList: [], tableList: [],
status: $status, status: $status,
selTable:'',//当前选中的桌台 selTable: "", //当前选中的桌台
areaMap:{} areaMap: {},
}; };
}, },
mounted() { mounted() {
this.tbShopAreaGet(); this.tbShopAreaGet();
}, },
filters:{ filters: {
formatTime(time){ formatTime(time) {
return dayjs(time).format('HH小时mm分'); return dayjs(time).format("HH小时mm分");
} },
}, },
methods: { methods: {
// 清台
async cleanTableHandle(item) {
const res = await tbShopTable({
...item,
status:'idle',
qrcode: item.tableId,
shopId: localStorage.getItem("shopId"),
},'put');
this.tbShopTableGet();
},
tableComman(command, item) { tableComman(command, item) {
if (command == "edit") { if (command == "edit") {
return this.$refs.editTable.show(item); return this.$refs.editTable.show(item);
@ -253,18 +292,17 @@ export default {
diancanShow(item, key) { diancanShow(item, key) {
//key isAddGoods 加菜 //key isAddGoods 加菜
//key isPayOrder结账 //key isPayOrder结账
console.log(item) this.selTable = item;
this.selTable=item const num = item.useNum || 0;
const num=item.useNum||0 if (item.useNum <= 0) {
if(item.useNum<=0){ return this.$refs.refChooseDinersNumber.open();
return this.$refs.refChooseDinersNumber.open()
} }
this.$refs.diancan.open(item, key,num); this.$refs.diancan.open(item, key, num);
}, },
chooseDinersNumberConfirm(num){ chooseDinersNumberConfirm(num) {
//就餐人数 //就餐人数
console.log(num) console.log(num);
this.$refs.diancan.open( this.selTable, undefined,num); this.$refs.diancan.open(this.selTable, undefined, num);
}, },
tabClick() { tabClick() {
this.tbShopTableGet(); this.tbShopTableGet();
@ -320,10 +358,10 @@ export default {
shopId: localStorage.getItem("shopId"), shopId: localStorage.getItem("shopId"),
}); });
this.tabs = content; this.tabs = content;
this.areaMap=content.reduce((prve,cur)=>{ this.areaMap = content.reduce((prve, cur) => {
prve[cur.id]=cur.name prve[cur.id] = cur.name;
return prve return prve;
},{}) }, {});
this.tbShopTableGet(); this.tbShopTableGet();
} catch (error) { } catch (error) {
console.log(error); console.log(error);
@ -339,9 +377,9 @@ export default {
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
.opacity-0{ .opacity-0 {
opacity: 0; opacity: 0;
} }
.icon { .icon {
margin-left: 10px; margin-left: 10px;
} }
@ -354,18 +392,18 @@ export default {
min-width: 60px; min-width: 60px;
text-align: center; text-align: center;
} }
.state { .state {
display: flex; display: flex;
align-items: center; align-items: center;
.dot { .dot {
$size: 8px; $size: 8px;
width: $size; width: $size;
height: $size; height: $size;
border-radius: 50%; border-radius: 50%;
margin-right: $size; margin-right: $size;
} }
} }
.table_list { .table_list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -383,7 +421,7 @@ export default {
} }
.item { .item {
padding: 1px ; padding: 1px;
overflow: hidden; overflow: hidden;
border: 1px solid #ddd; border: 1px solid #ddd;
display: flex; display: flex;
@ -392,7 +430,7 @@ export default {
border-radius: 6px; border-radius: 6px;
background-color: #1890ff; background-color: #1890ff;
max-width: 172px; max-width: 172px;
min-width: 160px; min-width: 160px;
&.using { &.using {
background-color: rgb(250, 85, 85); background-color: rgb(250, 85, 85);
} }
@ -400,7 +438,7 @@ export default {
background-color: rgb(221, 221, 221); background-color: rgb(221, 221, 221);
filter: grayscale(1); filter: grayscale(1);
} }
.total-price{ .total-price {
line-height: 35px; line-height: 35px;
height: 35px; height: 35px;
} }
@ -416,12 +454,12 @@ export default {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.box{ .box {
background-color: #fff; background-color: #fff;
border-radius:3px 3px 6px 6px; border-radius: 3px 3px 6px 6px;
} }
.bottom{ .bottom {
border-top: 1px solid #F7F7FA;; border-top: 1px solid #f7f7fa;
padding: 6px 15px; padding: 6px 15px;
} }
.top { .top {
@ -437,12 +475,9 @@ export default {
font-size: 12px; font-size: 12px;
} }
&.row1 { &.row1 {
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
} }
} }
} }