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

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

@@ -1,10 +1,10 @@
export default { export default {
pending: { label: '挂单中', type: '#E6A23C' }, unbound: { label: "未绑定", type: "#909090" },
cleaning: { label: '待清台', type: '#FAAD14' }, idle: { label: "空闲", type: "#187CAA" },
using: { label: '开台中', type: '#FF4D4F' }, ordering: { label: "点餐中", type: "#46AEA4" },
idle: { label: '空闲', type: '#3F9EFF' }, unsettled: { label: "未结账", type: "#DD3F41" },
paying: { label: '结算中', type: '#E6A23C' }, paying: { label: "支付中", type: "#909090" },
closed: { label: '关台', type: '#DDDDDD' }, settled: { label: "待清台", type: "#FF9500" },
subscribe: { label: '预约', type: '#52C41A ' }, closed: { label: "关台", type: "#DDDDDD" },
unbind: { label: '未绑定', type: 'rgb(221,221,221)' } subscribe: { label: "预定", type: "#58B22C" },
} };