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

代客下单增加台桌切换

Browse Source 
当台桌切换时重新获取取餐码，购物车数据，订单数据，就餐人数
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
Download Patch File Download Diff File Expand all files Collapse all files

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

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