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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.development
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://tapi.cashier.sxczgkj.cn/ # 测试
# VITE_APP_API_URL=https://cashier.sxczgkj.com/ # 正式 VITE_APP_API_URL=https://cashier.sxczgkj.com/ # 正式
VITE_APP_API_URL=http://192.168.1.42/ # 本地 # VITE_APP_API_URL=http://192.168.1.42/ # 本地
# WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws # WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
# VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss # VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
# VITE_APP_WS_ENDPOINT=wss://czgeatws.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=ws://192.168.1.42:2348 # 本地
# 启用 Mock 服务 # 启用 Mock 服务

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

@ -2,7 +2,12 @@
<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 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> <template #label>
<div class=""> <div class="">
<span> <span>
@ -29,14 +34,19 @@
<el-button type="primary" icon="download" @click="showDownloadTableCode"> <el-button type="primary" icon="download" @click="showDownloadTableCode">
下载桌台码 下载桌台码
</el-button> </el-button>
<el-button type="primary" icon="download" @click="downloadShopCpde">下载店铺码</el-button> <el-button type="primary" icon="download" @click="downloadShopCpde">
下载店铺码
</el-button>
</div> </div>
<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 class="dot" :style="{ <span
class="dot"
:style="{
backgroundColor: status[key] ? status[key].type : '', backgroundColor: status[key] ? status[key].type : '',
}" /> }"
/>
{{ item.label }} {{ item.label }}
</div> </div>
</div> </div>
@ -44,8 +54,14 @@
<!-- 列表 --> <!-- 列表 -->
<div class="head-container"> <div class="head-container">
<div v-loading="loading" class="table_list"> <div v-loading="loading" class="table_list">
<div v-for="item in tableList" :key="item.id" class="item" <div
:style="{ 'background-color': status[item.status] ? status[item.status].type : '' }"> 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="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 +80,10 @@
<el-dropdown-item command="edit"> <el-dropdown-item command="edit">
<span>编辑</span> <span>编辑</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="bindTableCode" v-if="envName !== 'production'"> <el-dropdown-item
command="bindTableCode"
v-if="envName !== 'production'"
>
<span>绑定桌码</span> <span>绑定桌码</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="del"> <el-dropdown-item command="del">
@ -76,16 +95,27 @@
</div> </div>
<div class="box"> <div class="box">
<div class="top"> <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"> <div class="row row1" style="align-items: flex-start">
<span style="font-size: 14px; color: #333"> <span style="font-size: 14px; color: #333">
{{ item.bookingInfo.createUserName }}订{{ item.bookingInfo.bookingPerson }}「{{ {{ item.bookingInfo.createUserName }}订{{
item.bookingInfo.gender == 1 ? "先生" : "女士" item.bookingInfo.bookingPerson
}}」 }}「{{ item.bookingInfo.gender == 1 ? "先生" : "女士" }}」
</span> </span>
<div class="state" style="font-size: 12px; color: #666; display: flex; align-items: center"> <div
<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/perpole.png" class="state"
alt="" /> 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) }} {{ item.bookingInfo.bookingTime.substring(11, 19) }}
</div> </div>
@ -98,41 +128,71 @@
</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 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 }}件」 ¥{{ 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 type="success" :disabled="!item.tableId || item.status === 'closed'" <el-button
@click="markStatus(item, -1)"> type="success"
: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
<el-button type="success" :disabled="!item.tableId || item.status === 'closed'" v-if="
@click="markStatus(item, 10)"> 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> </el-button>
</template> </template>
<template v-if=" <template
v-if="
item.status == 'idle' || item.status == 'idle' ||
(item.status == 'subscribe' && item.bookingInfo.status == 10) (item.status == 'subscribe' &&
"> item.bookingInfo &&
<el-button type="primary" :disabled="!item.tableCode || item.status === 'closed'" item.bookingInfo.status == 10)
@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 :disabled="!item.tableId || item.status === 'closed'" <el-button
@click="diancanShow(item, 'isAddGoods')"> :disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isAddGoods')"
>
加菜 加菜
</el-button> </el-button>
<el-button type="danger" :disabled="!item.tableId || item.status === 'closed'" <el-button
@click="diancanShow(item, 'isPayOrder')"> type="danger"
:disabled="!item.tableId || item.status === 'closed'"
@click="diancanShow(item, 'isPayOrder')"
>
结账 结账
</el-button> </el-button>
</template> </template>
@ -140,10 +200,13 @@
<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 type="info" :style="{ <el-button
type="info"
:style="{
backgroundColor: status[item.status].type, backgroundColor: status[item.status].type,
borderColor: status[item.status].type, borderColor: status[item.status].type,
}"> }"
>
清理中 清理中
</el-button> </el-button>
</template> </template>
@ -153,18 +216,29 @@
</template> </template>
</div> </div>
</div> </div>
<div class="u-flex u-col-bottom bottom u-row-between color-666" <div
:class="{ 'opacity-0': item.status == 'closed' }"> 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"> <div class="u-flex u-col-center">
<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/perpole.png" <img
alt="" /> 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"> <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 style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/shalou.png" alt="" /> <img
<span class="u-m-t-4 u-font-12">{{ formatTime(item.durationTime) }}</span> 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> </div>
</div> </div>
@ -224,7 +298,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");
@ -267,7 +341,7 @@ function tableComman(command, item) {
ElMessage.success("删除成功"); ElMessage.success("删除成功");
tableInit(); tableInit();
}) })
.catch(() => { }); .catch(() => {});
return; return;
} }
} }
@ -343,7 +417,7 @@ function init() {
areainit(); areainit();
tableInit(); tableInit();
} }
onMounted(() => { }); onMounted(() => {});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>