add: 优化

This commit is contained in:
gyq 2025-10-09 09:20:44 +08:00
parent 5cd5265ffb
commit e69e0e7aa0
2 changed files with 469 additions and 395 deletions

View File

@ -7,14 +7,14 @@ VITE_APP_BASE_API=/dev-api
# 接口地址
# VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 测试
# VITE_APP_API_URL=https://cashier.sxczgkj.com/ # 正式
VITE_APP_API_URL=http://192.168.1.42/ # 本地
VITE_APP_API_URL=https://cashier.sxczgkj.com/ # 正式
# VITE_APP_API_URL=http://192.168.1.42/ # 本地
# WebSocket 端点(不配置则关闭),线上 ws://api.youlai.tech/ws ,本地 ws://localhost:8989/ws
# VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
# VITE_APP_WS_ENDPOINT=wss://czgeatws.sxczgkj.com/wss # 正式
VITE_APP_WS_ENDPOINT=ws://192.168.1.42:2348 # 本地
VITE_APP_WS_ENDPOINT=wss://czgeatws.sxczgkj.com/wss # 正式
# VITE_APP_WS_ENDPOINT=ws://192.168.1.42:2348 # 本地
# 启用 Mock 服务

View File

@ -2,7 +2,12 @@
<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>
@ -29,14 +34,19 @@
<el-button type="primary" icon="download" @click="showDownloadTableCode">
下载桌台码
</el-button>
<el-button type="primary" icon="download" @click="downloadShopCpde">下载店铺码</el-button>
<el-button type="primary" icon="download" @click="downloadShopCpde">
下载店铺码
</el-button>
</div>
<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="{
<span
class="dot"
:style="{
backgroundColor: status[key] ? status[key].type : '',
}" />
}"
/>
{{ item.label }}
</div>
</div>
@ -44,8 +54,14 @@
<!-- 列表 -->
<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] ? status[item.status].type : '' }">
<div
v-for="item in tableList"
:key="item.id"
class="item"
:style="{
'background-color': status[item.status] ? 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 +80,10 @@
<el-dropdown-item command="edit">
<span>编辑</span>
</el-dropdown-item>
<el-dropdown-item command="bindTableCode" v-if="envName !== 'production'">
<el-dropdown-item
command="bindTableCode"
v-if="envName !== 'production'"
>
<span>绑定桌码</span>
</el-dropdown-item>
<el-dropdown-item command="del">
@ -76,16 +95,27 @@
</div>
<div class="box">
<div class="top">
<div v-if="item.status == 'subscribe'">
<div v-if="item.status == 'subscribe' && item.bookingInfo">
<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 ? "先生" : "女士"
}}
{{ 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="" />
<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>
@ -98,41 +128,71 @@
</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)">
<template
v-if="
item.status == 'subscribe' &&
item.bookingInfo &&
item.bookingInfo.status == 20
"
>
<el-button
type="success"
:disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, 10)"
>
到店
</el-button>
</template>
<template v-if="
<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)">
(item.status == 'subscribe' &&
item.bookingInfo &&
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-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>
@ -140,10 +200,13 @@
<el-button type="info" disabled>已关台</el-button>
</template>
<template v-else-if="item.status == 'cleaning'">
<el-button type="info" :style="{
<el-button
type="info"
:style="{
backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}">
}"
>
清理中
</el-button>
</template>
@ -153,18 +216,29 @@
</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="" />
<span class="u-m-t-4 u-font-12">{{ formatTime(item.durationTime) }}</span>
<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>
</div>
@ -224,7 +298,7 @@ function formatTime(milliseconds) {
return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
}
function downloadTableCpde() { }
function downloadTableCpde() {}
function downloadShopCpde() {
try {
const link = document.createElement("a");
@ -267,7 +341,7 @@ function tableComman(command, item) {
ElMessage.success("删除成功");
tableInit();
})
.catch(() => { });
.catch(() => {});
return;
}
}
@ -343,7 +417,7 @@ function init() {
areainit();
tableInit();
}
onMounted(() => { });
onMounted(() => {});
</script>
<style lang="scss" scoped>