From 9f2322889cb7f2a2d4ac74af090a930b02f912d3 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Wed, 28 May 2025 10:36:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E4=BC=98=E5=8C=96=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=AB=AF=E5=8F=B0=E6=A1=8C=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/tool/table/index.vue | 153 ++++++++++++++-------------------
 src/views/tool/table/status.js |  18 ++--
 2 files changed, 72 insertions(+), 99 deletions(-)

diff --git a/src/views/tool/table/index.vue b/src/views/tool/table/index.vue
index 43cf026..a752154 100644
--- a/src/views/tool/table/index.vue
+++ b/src/views/tool/table/index.vue
@@ -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;
diff --git a/src/views/tool/table/status.js b/src/views/tool/table/status.js
index ecaf8c8..a021708 100644
--- a/src/views/tool/table/status.js
+++ b/src/views/tool/table/status.js
@@ -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" },
+};