czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(admin): 优化管理端台桌信息

Browse Source
This commit is contained in:
gyq
2025-05-28 10:36:08 +08:00
parent 2cde04720d
commit 9f2322889c
2 changed files with 72 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/views/tool/table/index.vue
View File

@@ -2,21 +2,20 @@
<div class="app-container">
<el-tabs v-model="tableArea.tabsSel" type="card" @tab-click="tabClick">
<el-tab-pane label="全部" name="" />
<el-tab-pane
v-for="item in tableArea.tabs"
:key="item.id"
:label="item.name"
:name="`${item.id}`"
>
<el-tab-pane v-for="item in tableArea.tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
<template #label>
<div class="">
<span>
{{ item.name }}
</span>
<el-icon style="margin: 0 10px" @click="addEaraShow(item)"><EditPen /></el-icon>
<el-icon style="margin: 0 10px" @click="addEaraShow(item)">
<EditPen />
</el-icon>
<el-popconfirm title="确定删除吗？" @confirm="delArea(item.id)">
<template #reference>
<el-icon><Delete /></el-icon>
<el-icon>
<Delete />
</el-icon>
</template>
</el-popconfirm>
</div>
@@ -35,12 +34,9 @@
<div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
<div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
<span
class="dot"
:style="{
backgroundColor: status[key] ? status[key].type : '',
}"
/>
<span class="dot" :style="{
backgroundColor: status[key] ? status[key].type : '',
}" />
{{ item.label }}
</div>
</div>
@@ -48,12 +44,8 @@
<!-- 列表 -->
<div class="head-container">
<div v-loading="loading" class="table_list">
<div
v-for="item in tableList"
:key="item.id"
class="item"
:style="{ 'background-color': status[item.status].type }"
>
<div v-for="item in tableList" :key="item.id" class="item"
: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">
@@ -64,7 +56,9 @@
</span>
</div>
<el-dropdown trigger="click" @command="tableComman($event, item)">
<el-icon color="#fff" class="cur-pointer"><More /></el-icon>
<el-icon color="#fff" class="cur-pointer">
<More />
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="edit">
@@ -89,15 +83,9 @@
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=""
/>
<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>
@@ -110,61 +98,41 @@
</div>
<div v-else class="u-font-18 font-600 total-price">
<span
v-if="item.status == 'using'"
class="cur-pointer"
@click="diancanShow(item, 'isAddGoods')"
>
<span v-if="item.status == 'using'" class="cur-pointer" @click="diancanShow(item, 'isAddGoods')">
¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
</span>
<!-- <span v-else class="color-fff">|</span> -->
</div>
<div class="row btn-group" style="margin-top: 10px">
<template v-if="item.status == 'subscribe'">
<el-button
type="success"
:disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, -1)"
>
<el-button type="success" :disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, -1)">
取消预约
</el-button>
</template>
<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 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.tableCode || item.status === 'closed'"
@click="diancanShow(item)"
>
<template v-if="
item.status == 'idle' ||
(item.status == 'subscribe' && item.bookingInfo.status == 10)
">
<el-button type="primary" :disabled="!item.tableCode || item.status === 'closed'"
@click="diancanShow(item)">
点餐
</el-button>
</template>
<template v-else-if="item.status != 'idle' && item.status != 'subscribe'">
<template v-if="item.status == 'using'">
<el-button
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isAddGoods')"
>
<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 type="danger" :disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isPayOrder')">
结账
</el-button>
</template>
@@ -172,14 +140,10 @@
<el-button type="info" disabled>已关台</el-button>
</template>
<template v-else-if="item.status == 'cleaning'">
<el-button
type="info"
:style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}"
@click="cleanTableHandle(item)"
>
<el-button type="info" :style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}" @click="cleanTableHandle(item)">
清台
</el-button>
</template>
@@ -189,26 +153,17 @@
</template>
</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-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=""
/>
<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 v-if="item.status == 'using'" class="u-flex">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/shalou.png"
alt=""
/>
<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">{{ formatTime(item.durationTime) }}</span>
</div>
</div>
@@ -269,7 +224,7 @@ function formatTime(milliseconds) {
return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
}
function downloadTableCpde() {}
function downloadTableCpde() { }
function downloadShopCpde() {
try {
const link = document.createElement("a");
@@ -312,7 +267,7 @@ function tableComman(command, item) {
ElMessage.success("删除成功");
tableInit();
})
.catch(() => {});
.catch(() => { });
return;
}
}
@@ -388,7 +343,7 @@ function init() {
areainit();
tableInit();
}
onMounted(() => {});
onMounted(() => { });
</script>
<style lang="scss" scoped>
@@ -400,21 +355,26 @@ onMounted(() => {});
.cur-pointer {
cursor: pointer;
}
.opacity-0 {
opacity: 0;
}
.icon {
margin-left: 10px;
}
:deep(.btn-group .el-button) {
width: 100%;
}
:deep(.el-dropdown-menu__item) {
line-height: 36px;
padding: 0 20px;
min-width: 60px;
text-align: center;
}
.state {
display: flex;
align-items: center;
@@ -427,6 +387,7 @@ onMounted(() => {});
margin-right: $size;
}
}
.table_list {
display: flex;
flex-wrap: wrap;
@@ -438,6 +399,7 @@ onMounted(() => {});
display: flex;
justify-content: center;
}
.btn-group {
display: flex;
gap: 10px;
@@ -454,25 +416,31 @@ onMounted(() => {});
background-color: #1890ff;
max-width: 210px;
min-width: 190px;
&.using {
background-color: rgb(250, 85, 85);
}
&.closed {
background-color: rgb(221, 221, 221);
filter: grayscale(1);
}
.total-price {
line-height: 35px;
height: 35px;
&:hover {
text-decoration: underline;
}
}
.new-top {
height: 30px;
color: #fff;
padding: 0 12px;
}
.name {
font-size: 16px;
line-height: 30px;
@@ -480,6 +448,7 @@ onMounted(() => {});
overflow: hidden;
text-overflow: ellipsis;
}
.box {
height: 100%;
background-color: #fff;
@@ -488,10 +457,12 @@ onMounted(() => {});
flex-direction: column;
justify-content: flex-end;
}
.bottom {
border-top: 1px solid #f7f7fa;
padding: 6px 15px;
}
.top {
padding: 10px;
background-color: #fff;
@@ -500,6 +471,7 @@ onMounted(() => {});
display: flex;
flex-direction: column;
justify-content: flex-end;
.row {
display: flex;
gap: 10px;
@@ -520,6 +492,7 @@ onMounted(() => {});
background-color: #efefef;
display: flex;
border-radius: 0 0 6px 6px;
.btm_item {
flex: 1;
height: 40px;

18
src/views/tool/table/status.js
View File

@@ -1,10 +1,10 @@
export default {
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)' }
}
unbound: { label: "未绑定", type: "#909090" },
idle: { label: "空闲", type: "#187CAA" },
ordering: { label: "点餐中", type: "#46AEA4" },
unsettled: { label: "未结账", type: "#DD3F41" },
paying: { label: "支付中", type: "#909090" },
settled: { label: "待清台", type: "#FF9500" },
closed: { label: "关台", type: "#DDDDDD" },
subscribe: { label: "预定", type: "#58B22C" },
};