增加websocket连接，增加台桌列表页面，增加用户列表页面

.env.development

@@ -13,7 +13,7 @@ VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 正式
 # VITE_APP_API_URL=http://localhost:8989    # 本地
 
 # WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
-VITE_APP_WS_ENDPOINT=
+VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
 
 # 启用 Mock 服务
 VITE_MOCK_DEV_SERVER=false

README.md

@@ -9,6 +9,8 @@
 订单，支付相关：<https://tapi.cashier.sxczgkj.cn/order/>
 商品，耗材相关：<https://tapi.cashier.sxczgkj.cn/product/>
 系统相关：<https://tapi.cashier.sxczgkj.cn/system/>
+购物车websocket
+<https://apifox.com/apidoc/shared-2c47d665-b476-409c-9cb5-0e68a69b0292>
 
 ## 项目特色
 

package.json

@@ -52,6 +52,7 @@
     "path-to-regexp": "^8.2.0",
     "pinia": "^2.3.1",
     "qs": "^6.14.0",
+    "sockjs-client": "^1.6.1",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.13",
     "vue-i18n": "^11.1.0",

src/api/account/activate.ts

@@ -0,0 +1,85 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/activate";
+const API = {
+
+  getList() {
+    return request({
+      url: `${baseURL}`,
+      method: "get",
+    });
+  },
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  },
+  add(data: addRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "post",
+      data: data,
+    });
+  }
+}
+export default API;
+
+export interface addRequest {
+  /**
+   * 充值金额
+   */
+  amount?: number;
+  /**
+   * 优惠卷id
+   */
+  couponId?: number;
+  /**
+   * 赠送金额
+   */
+  giftAmount?: number;
+  /**
+   * 赠送积分
+   */
+  giftPoints?: number;
+  /**
+   * 是否赠送优惠卷 0否 1是
+   */
+  isGiftCoupon?: number;
+  /**
+   * 优惠卷数量
+   */
+  num?: number;
+  [property: string]: any;
+}
+
+export interface editRequest {
+  /**
+   * 充值金额
+   */
+  amount: number;
+  /**
+   * 优惠卷id
+   */
+  couponId?: number;
+  /**
+   * 赠送金额
+   */
+  giftAmount?: number;
+  /**
+   * 赠送积分
+   */
+  giftPoints?: number;
+  id: number;
+  /**
+   * 是否赠送优惠卷 0否 1是
+   */
+  isGiftCoupon?: number;
+  /**
+   * 优惠卷数量
+   */
+  num?: number;
+  shopId?: number;
+  [property: string]: any;
+}

src/api/account/permission.ts

@@ -0,0 +1,22 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin";
+const ShopStaffApi = {
+  // 获取店铺权限列表
+  getshopPermission() {
+    return request<any>({
+      url: `${baseURL}/shopPermission`,
+      method: "get",
+    });
+  },
+  // 获取员工对应的权限id
+  getPermission(id: number | string) {
+    return request<any>({
+      url: `${baseURL}/shopStaff/permission`,
+      method: "get",
+      params: { id }
+    });
+  },
+};
+
+export default ShopStaffApi;

src/api/account/table.ts

@@ -0,0 +1,128 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/shopTable";
+const API = {
+  // 批量生成桌码
+  fasetAdd(num: number) {
+    return request({
+      url: `${baseURL}/code`,
+      method: "post",
+      data: { num },
+    });
+  },
+  getList(data: getListRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "get",
+      params: data
+    });
+  },
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  },
+  add(data: addRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "post",
+      data: data,
+    });
+  },
+  delete(id: number | string) {
+    return request({
+      url: `${baseURL}`,
+      method: "post",
+      data: { id },
+    });
+  }
+}
+export default API;
+/**
+ * ShopTableAddDTO
+ */
+export interface addRequest {
+  /**
+   * 区域id
+   */
+  areaId?: number | null;
+  /**
+   * 是否自动清台
+   */
+  autoClear?: number | null;
+  /**
+   * 客座数
+   */
+  capacity: number | null;
+  /**
+   * 结束数字
+   */
+  end: number | null;
+  /**
+   * 台桌前缀
+   */
+  sign: null | string;
+  /**
+   * 起始数字
+   */
+  start: number | null;
+  [property: string]: any;
+}
+
+/**
+ * ShopTableDTO
+ */
+export interface editRequest {
+  /**
+   * 区域Id
+   */
+  areaId?: number | null;
+  /**
+   * 自动清台 0手动 1自动
+   */
+  autoClear?: number | null;
+  /**
+   * 自增id
+   */
+  id: number | null;
+  /**
+   * 是否接受网络预定
+   */
+  isPredate?: number | null;
+  /**
+   * 客座数,允许的客座数量
+   */
+  maxCapacity?: number | null;
+  name?: null | string;
+  /**
+   * 网络预定台桌支付金额
+   */
+  predateAmount?: number | null;
+  /**
+   * 二维码
+   */
+  qrcode?: null | string;
+  /**
+   * 台桌排序
+   */
+  sort?: number | null;
+  /**
+   * idle-空闲 using-使用中 subscribe预定，closed--关台， opening 开台中，cleaning 台桌清理中
+   */
+  status?: null | string;
+  [property: string]: any;
+}
+
+export interface getListRequest {
+  /**
+   * 区域id
+   */
+  areaId?: number;
+  /**
+   * 桌码
+   */
+  tableCode?: string;
+  [property: string]: any;
+}

src/router/index.ts

@@ -321,7 +321,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "table",
-        component: () => import("@/views/tool/table.vue"),
+        component: () => import("@/views/tool/table/index.vue"),
         name: "table",
         meta: {
           title: "台桌管理",
@@ -473,7 +473,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "active",
-        component: () => import("@/views/user/active.vue"),
+        component: () => import("@/views/user/active/index.vue"),
         name: "userActive",
         meta: {
           title: "活动管理",

src/utils/websocket copy.ts

@@ -0,0 +1,93 @@
+import { Client } from "@stomp/stompjs";
+import { getToken } from "@/utils/auth";
+
+class WebSocketManager {
+  private client: Client | null = null;
+  private messageHandlers: Map<string, ((message: string) => void)[]> = new Map();
+  private reconnectAttempts = 0;
+  private maxReconnectAttempts = 3; // 自定义最大重试次数
+  private reconnectDelay = 5000; // 重试延迟（单位：毫秒）
+
+  // 初始化 WebSocket 客户端
+  setupWebSocket() {
+    const endpoint = import.meta.env.VITE_APP_WS_ENDPOINT;
+
+    // 如果没有配置 WebSocket 端点或显式关闭，直接返回
+    if (!endpoint) {
+      console.log("WebSocket 已被禁用，如需打开请在配置文件中配置 VITE_APP_WS_ENDPOINT");
+      return;
+    }
+
+    if (this.client && this.client.connected) {
+      console.log("客户端已存在并且连接正常");
+      return this.client;
+    }
+
+    this.client = new Client({
+      brokerURL: endpoint,
+      connectHeaders: {
+        Authorization: getToken(),
+      },
+      heartbeatIncoming: 30000,
+      heartbeatOutgoing: 30000,
+      reconnectDelay: 0, // 设置为 0 禁用重连
+      onConnect: () => {
+        console.log(`连接到 WebSocket 服务器: ${endpoint}`);
+        this.reconnectAttempts = 0; // 重置重连计数
+        this.messageHandlers.forEach((handlers, topic) => {
+          handlers.forEach((handler) => {
+            this.subscribeToTopic(topic, handler);
+          });
+        });
+      },
+      onStompError: (frame) => {
+        console.error(`连接错误: ${frame.headers["message"]}`);
+        console.error(`错误详情: ${frame.body}`);
+      },
+      onDisconnect: () => {
+        console.log(`WebSocket 连接已断开: ${endpoint}`);
+        this.reconnectAttempts++;
+        if (this.reconnectAttempts < this.maxReconnectAttempts) {
+          console.log(`正在尝试重连... 尝试次数: ${this.reconnectAttempts}`);
+        } else {
+          console.log("重连次数已达上限，停止重连");
+          this.client?.deactivate();
+        }
+      },
+    });
+
+    this.client.activate();
+  }
+
+  // 订阅主题
+  public subscribeToTopic(topic: string, onMessage: (message: string) => void) {
+    console.log(`正在订阅主题: ${topic}`);
+    if (!this.client || !this.client.connected) {
+      this.setupWebSocket();
+    }
+
+    if (this.messageHandlers.has(topic)) {
+      this.messageHandlers.get(topic)?.push(onMessage);
+    } else {
+      this.messageHandlers.set(topic, [onMessage]);
+    }
+
+    if (this.client?.connected) {
+      this.client.subscribe(topic, (message) => {
+        const handlers = this.messageHandlers.get(topic);
+        handlers?.forEach((handler) => handler(message.body));
+      });
+    }
+  }
+
+  // 断开 WebSocket 连接
+  public disconnect() {
+    if (this.client) {
+      console.log("断开 WebSocket 连接");
+      this.client.deactivate();
+      this.client = null;
+    }
+  }
+}
+
+export default new WebSocketManager();

src/utils/websocket.ts

@@ -1,9 +1,10 @@
-import { Client } from "@stomp/stompjs";
-import { getToken } from "@/utils/auth";
 
 class WebSocketManager {
-  private client: Client | null = null;
+  private client: WebSocket | null = null;
+  private connected: boolean = false;
+  private onMessage: (message: any) => void = function () { };
   private messageHandlers: Map<string, ((message: string) => void)[]> = new Map();
+  private type: string = 'manage';
   private reconnectAttempts = 0;
   private maxReconnectAttempts = 3; // 自定义最大重试次数
   private reconnectDelay = 5000; // 重试延迟（单位：毫秒）
@@ -18,73 +19,52 @@ class WebSocketManager {
       return;
     }
 
-    if (this.client && this.client.connected) {
+    if (this.client && this.connected) {
       console.log("客户端已存在并且连接正常");
       return this.client;
     }
-
+    this.client = new WebSocket(endpoint)
-    this.client = new Client({
+    this.client.onopen = () => {
-      brokerURL: endpoint,
+      this.connected = true;
-      connectHeaders: {
+      console.log("WebSocket 连接已建立");
-        Authorization: getToken(),
+      this.sendMessage('test')
-      },
+    };
-      heartbeatIncoming: 30000,
+    this.client.onclose = () => {
-      heartbeatOutgoing: 30000,
+      this.connected = false;
-      reconnectDelay: 0, // 设置为 0 禁用重连
+      console.log("WebSocket 连接已断开");
-      onConnect: () => {
+    };
-        console.log(`连接到 WebSocket 服务器: ${endpoint}`);
+    this.client.onerror = (error) => {
-        this.reconnectAttempts = 0; // 重置重连计数
+      console.error("WebSocket 发生错误:", error);
-        this.messageHandlers.forEach((handlers, topic) => {
+    };
-          handlers.forEach((handler) => {
+    this.client.onmessage = (event) => {
-            this.subscribeToTopic(topic, handler);
+      const message = event.data;
-          });
+      this.getMessage(message)
-        });
+    };
-      },
+  }
-      onStompError: (frame) => {
+  private getMessage(message: any) {
-        console.error(`连接错误: ${frame.headers["message"]}`);
+    console.log("收到消息:", message);
-        console.error(`错误详情: ${frame.body}`);
-      },
-      onDisconnect: () => {
-        console.log(`WebSocket 连接已断开: ${endpoint}`);
-        this.reconnectAttempts++;
-        if (this.reconnectAttempts < this.maxReconnectAttempts) {
-          console.log(`正在尝试重连... 尝试次数: ${this.reconnectAttempts}`);
-        } else {
-          console.log("重连次数已达上限，停止重连");
-          this.client?.deactivate();
-        }
-      },
-    });
-
-    this.client.activate();
   }
 
   // 订阅主题
   public subscribeToTopic(topic: string, onMessage: (message: string) => void) {
     console.log(`正在订阅主题: ${topic}`);
-    if (!this.client || !this.client.connected) {
+    if (!this.client || !this.connected) {
       this.setupWebSocket();
     }
-
+    if (this.connected) {
-    if (this.messageHandlers.has(topic)) {
+      this.onMessage = onMessage;
-      this.messageHandlers.get(topic)?.push(onMessage);
+    }
-    } else {
+  }
-      this.messageHandlers.set(topic, [onMessage]);
+  public sendMessage(message: any) {
-    }
+    if (this.client) {
-
+      this.client.send(message);
-    if (this.client?.connected) {
-      this.client.subscribe(topic, (message) => {
-        const handlers = this.messageHandlers.get(topic);
-        handlers?.forEach((handler) => handler(message.body));
-      });
     }
   }
-
   // 断开 WebSocket 连接
   public disconnect() {
     if (this.client) {
       console.log("断开 WebSocket 连接");
-      this.client.deactivate();
+      this.client.close();
       this.client = null;
     }
   }

src/views/shop/staff/components/select-permission.vue

@@ -0,0 +1 @@
+<template>11</template>

src/views/shop/staff/index.vue

@@ -43,9 +43,8 @@
 
     <!-- 新增 -->
     <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
-      <template #url="scope">
+      <template #permission="scope">
-        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <selectPermission></selectPermission>
-        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
       </template>
     </page-modal>
 
@@ -55,9 +54,8 @@
       :modal-config="editModalConfig"
       @submit-click="handleSubmitClick"
     >
-      <template #url="scope">
+      <template #permission="scope">
-        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <selectPermission></selectPermission>
-        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
       </template>
     </page-modal>
   </div>
@@ -73,7 +71,9 @@ import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
 import RoleApi, { type SysRole } from "@/api/account/role";
 import ShopStaffApi from "@/api/account/shopStaff";
-
+import permissionApi from "@/api/account/permission";
+import selectPermission from "./components/select-permission.vue";
+permissionApi.getshopPermission();
 const {
   searchRef,
   contentRef,

src/views/tool/table.vue

@@ -1,3 +0,0 @@
-<template>
-  <div class="app-container">11</div>
-</template>

src/views/tool/table/components/addEara.vue

@@ -0,0 +1,73 @@
+<template>
+    <el-dialog :title="form.id ? '编辑区域' : '添加区域'" :visible.sync="dialogVisible" @close="reset">
+        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+            <el-form-item label="区域名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入区域名称"></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="onSubmitHandle">确 定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { tbShopArea } from '@/api/table'
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            form: {
+                id: '',
+                name: ''
+            },
+            rules: {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入区域名称',
+                        trigger: 'blur'
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        onSubmitHandle() {
+            this.$refs.form.validate(async valid => {
+                if (valid) {
+                    try {
+                        let res = await tbShopArea({
+                            ...this.form,
+                            shopId: localStorage.getItem('shopId')
+                        }, this.form.id ? 'put' : 'post')
+                        this.$emit('success', res)
+                        this.close()
+                        this.$notify({
+                            title: '成功',
+                            message: `${this.form.id ? '编辑' : '添加'}成功`,
+                            type: 'success'
+                        });
+                    } catch (error) {
+                        console.log(error)
+                    }
+                }
+            })
+        },
+        show(obj) {
+            this.dialogVisible = true
+            if (obj && obj.id) {
+                this.form = JSON.parse(JSON.stringify(obj))
+            }
+        },
+        close() {
+            this.dialogVisible = false
+        },
+        reset() {
+            this.form.id = ''
+            this.form.name = ''
+        }
+    }
+}
+</script>

src/views/tool/table/components/addTable.vue

@@ -0,0 +1,235 @@
+<template>
+  <el-dialog
+    :title="form.id ? '编辑台桌' : '添加台桌'"
+    :visible.sync="dialogVisible"
+    @open="tbShopAreaGet"
+    @close="reset"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="left"
+    >
+      <el-form-item label="选择区域" prop="areaId">
+        <el-select v-model="form.areaId" placeholder="请选择区域"
+        @change="selectChange($event, 'form' , 'areaId')"
+        >
+          <el-option
+            :label="item.name"
+            :value="item.id"
+            v-for="item in areaList"
+            :key="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="台桌状态" prop="status" v-if="form.id">
+        <el-select v-model="form.status" placeholder="请选择台桌状态">
+          <el-option
+            :label="item.name"
+            :value="item.value"
+            v-for="item in status"
+            :key="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="台桌标识"  prop="sign">
+        <div class="u-flex">
+            <div class="u-flex" style="width: 57px;">
+                  <el-input
+              v-model="form.sign"
+              placeholder="A"
+            ></el-input>
+            </div>
+      
+          <div class="u-flex u-m-l-30" >
+            <div class="u-flex">
+                <div class="u-m-r-4">起始</div>
+                <el-input v-model="form.start" style="width: 57px;" placeholder="请输入起始值" >
+          </el-input>
+
+            </div>
+           
+          <div
+            style="
+              background-color: #D9D9D9;
+              height: 1px;
+              width: 32px;
+              border-radius: 1px;
+            "
+            class="u-m-l-16 u-m-r-16"
+          ></div>
+          <div class="u-flex">
+            <span class="u-m-r-4">结束</span>
+            <el-input v-model="form.end" style="width: 57px;" placeholder="请输入结束值">
+                
+          </el-input>
+          </div>
+       
+          </div>
+       
+        </div>
+      </el-form-item>
+      <el-form-item label="客座数">
+        <el-input-number
+          v-model="form.capacity"
+          :min="0"
+          controls-position="right"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="清台管理">
+        <el-radio-group v-model="form.autoClear">
+          <el-radio-button :label="0">手动清台</el-radio-button>
+          <el-radio-button :label="1">自动清台</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="网络预定开关">
+        <el-switch
+          v-model="form.isPredate"
+          :active-value="1"
+          :inactive-value="2"
+        ></el-switch>
+      </el-form-item>
+      <el-form-item label="类型">
+        <el-radio-group v-model="form.type">
+          <el-radio-button :label="0">低消</el-radio-button>
+          <el-radio-button :label="2">计时</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="最低消费" v-if="form.type == 0">
+        <el-input-number
+          v-model="form.amount"
+          :min="0"
+          controls-position="right"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="每小时收费" v-if="form.type == 2">
+        <el-input-number
+          v-model="form.perhour"
+          :min="0"
+          controls-position="right"
+        ></el-input-number>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="onSubmitHandle"
+        >确 定</el-button
+      >
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { tbShopTable, tbShopAreaGet ,$fastCreateTable} from "@/api/table";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      resetForm: "",
+      loading: false,
+      status: [
+        { value: "pending", name: "挂单中" },
+        { value: "using", name: "开台中" },
+        { value: "paying", name: "结算中" },
+        { value: "idle", name: "空闲" },
+        { value: "subscribe", name: "预定" },
+        { value: "closed", name: "关台" },
+        // {value:'opening',name:'开台中'},
+        { value: "cleaning", name: "台桌清理中" },
+      ],
+      form: {
+        id: "",
+        areaId: "",
+        sign:'',
+        start:1,
+        end:10,
+        capacity: 0,
+        isPredate: 1,
+        type: 2,
+        perhour: 0,
+        amount: 0,
+        autoClear: 1,
+      },
+      rules: {
+        areaId: [
+          {
+            required: true,
+            message: "请选择区域",
+            trigger: ["blur","change"],
+          },
+        ],
+        sign: [
+          {
+            required: true,
+            message: "请输入台桌标识",
+            trigger: ["blur","change"],
+          },
+        ],
+      },
+      areaList: [],
+    };
+  },
+  mounted() {
+    this.resetForm = { ...this.form };
+  },
+  methods: {
+    //解决selectc值改变后未验证问题
+    selectChange($event, ref, type) {
+      this.$refs[ref][0].validateField(type)
+    },
+    onSubmitHandle() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          this.loading = true;
+          try {
+            let res = await $fastCreateTable(
+              {
+                ...this.form,
+                qrcode: this.form.tableId,
+                shopId: localStorage.getItem("shopId"),
+              },
+              this.form.id ? "put" : "post"
+            );
+            this.$emit("success", res);
+            this.close();
+            this.$notify({
+              title: "成功",
+              message: `${this.form.id ? "编辑" : "添加"}成功`,
+              type: "success",
+            });
+            this.loading = false;
+          } catch (error) {
+            this.loading = false;
+            console.log(error);
+          }
+        }
+      });
+    },
+    show(obj) {
+      this.dialogVisible = true;
+      if (obj && obj.id) {
+        this.form = JSON.parse(JSON.stringify(obj));
+      }
+    },
+    close() {
+      this.dialogVisible = false;
+    },
+    reset() {
+      this.form = { ...this.resetForm };
+    },
+    // 获取区域
+    async tbShopAreaGet() {
+      try {
+        const { content } = await tbShopAreaGet({
+          shopId: localStorage.getItem("shopId"),
+        });
+        this.areaList = content;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>

src/views/tool/table/components/choose-diners-number.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="select_desk">
+    <el-dialog width="410px" title="就餐人数" :visible.sync="show">
+      <div class="select_desk_dialog u-p-b-20">
+        <key-board
+          isCanEmpty
+          v-model="number"
+          @clear="clear"
+          :max="max"
+          :maxTips=" '最多'+max+'位'"
+        >
+          <div slot="clear">清空</div>
+          <div slot="input" class="u-p-l-20 u-p-r-20 u-flex w-full">
+            <el-input
+              placeholder="请输入就餐人数"
+              v-model="number"
+              @input="inputNumber"
+              @change="inputChange"
+              type="number"
+            >
+              <template slot="append">位</template>
+            </el-input>
+          </div>
+        </key-board>
+        <div class="confirm_btns">
+          <el-button size="medium" @click="close">取消</el-button>
+          <el-button  type="primary" size="medium" @click="confirm"
+            >确定</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script>
+import keyBoard from "../keyboard.vue";
+export default {
+  components: { keyBoard },
+  props:{
+    max:{
+      type:Number,
+      default:99
+    }
+  },
+  data() {
+    return {
+      number: "",
+      show: false,
+      hasOpen: false,
+      loading: false,
+    };
+  },
+  watch: {
+    number(newval) {
+      if (newval >this.max) {
+        this.number = this.max;
+        this.$message("最多只能选择"+this.max+"位就餐人数");
+      }
+      // 使用正则表达式匹配正整数
+      const regex = /^[1-9]\d*$/;
+      // 如果输入的值不是正整数，则将其设置为上一个有效值
+      if (!regex.test(newval)) {
+        this.number = newval.substring(0, newval.length - 1);
+      }
+    },
+  },
+  methods: {
+    inputNumber(e) {},
+    inputChange(e) {},
+    clear(e) {
+      console.log(e);
+      this.number = "";
+    },
+    confirm() {
+      if (this.number >this.max) {
+        return this.$message("最多只能选择"+this.max+"位就餐人数");
+      }
+      if (!this.number) {
+        return this.$message("请选择就餐人数");
+      }
+      console.log(this.number)
+      this.$emit("confirm", this.number);
+      this.close();
+    },
+    open(number) {
+      this.number = number || "";
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+      this.number = "";
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep.el-button {
+  padding: 12px 20px;
+}
+::v-deep .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-button--success {
+  border-color: #22bf64;
+  background-color: #22bf64;
+}
+.select_desk .btn {
+  height: 34px;
+}
+.tags {
+  font-size: 16px;
+  &.using {
+    color: rgb(234, 64, 37);
+  }
+  &.wait {
+    color: rgb(252, 236, 79);
+  }
+  &.idle {
+    color: rgb(137, 234, 71);
+  }
+  &.closed {
+    color: rgb(221, 221, 221);
+    filter: grayscale(1);
+  }
+}
+::v-deep .inputs .el-input__inner {
+  border-color: transparent !important;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  font-size: 20px;
+}
+.select_desk .select_desk_dialog {
+  display: flex;
+
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.select_desk .select_desk_dialog .nav {
+  width: 286px;
+  height: 38px;
+  background: #dcf0e8;
+
+  justify-content: space-around;
+}
+
+.select_desk .select_desk_dialog .nav .li,
+.select_desk .select_desk_dialog .nav {
+  border-radius: 4px;
+
+  display: flex;
+
+  align-items: center;
+}
+
+.select_desk .select_desk_dialog .nav .li {
+  width: 140px;
+  height: 34px;
+  color: #0fc161;
+
+  justify-content: center;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.select_desk .select_desk_dialog .nav .lion {
+  background: #0fc161;
+  color: #fff;
+}
+
+.select_desk .select_desk_dialog .inputs {
+  width: 370px;
+  line-height: 54px;
+  margin-top: 24px;
+  height: 54px;
+  margin-bottom: 20px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  text-align: center;
+  font-size: 20px;
+  position: relative;
+}
+
+.select_desk .select_desk_dialog .inputs .close {
+  color: #aaa;
+  position: absolute;
+  right: 10px;
+  height: 30px;
+  width: 30px;
+  line-height: 30px;
+  top: 50%;
+  margin-top: -15px;
+  cursor: pointer;
+}
+
+.select_desk .select_desk_dialog .keyboard {
+  display: flex;
+
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border-right: 1px solid #dcdfe6;
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.select_desk .select_desk_dialog .keyboard .li {
+  height: 60px;
+  width: 33.333%;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+  font-size: 24px;
+  color: #212121;
+  cursor: pointer;
+
+  user-select: none;
+  border-left: 1px solid #dcdfe6;
+  border-top: 1px solid #dcdfe6;
+
+  transition: all 0.1s;
+}
+
+.select_desk .select_desk_dialog .keyboard .li:hover {
+  background: #dcdfe6;
+}
+
+.select_desk .select_desk_dialog .keyboard .li .icon {
+  font-size: 1.3em;
+}
+
+.select_desk .select_desk_dialog .keyboard .confirm {
+  height: 140px;
+  background: #ff9f2e;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-right: none;
+}
+
+.select_desk .select_desk_dialog .keyboard .confirm:hover {
+  background: #f88502;
+}
+
+.confirm_btns {
+  display: flex;
+
+  justify-content: space-between;
+  width: 100%;
+}
+
+.confirm_btns .el-button {
+  width: 175px;
+}
+</style>

src/views/tool/table/components/choose-user.vue

@@ -0,0 +1,289 @@
+<template>
+  <el-dialog title="选择用户" width="850px" :visible.sync="show">
+    <div class="app-container">
+      <div class="head-container">
+        <el-form :model="query" inline>
+          <el-form-item label="">
+            <el-input
+              v-model="query.name"
+              placeholder="请输入昵称或手机号"
+            ></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="是否为会员">
+            <el-select v-model="query.isVip" placeholder="是否是会员">
+              <el-option value="" label="全部"></el-option>
+              <el-option :value="1" label="是"></el-option>
+              <el-option :value="0" label="否"></el-option>
+            </el-select>
+          </el-form-item> -->
+          <el-form-item>
+            <div class="flex gap-20">
+              <el-button  type="primary" @click="getTableData" size="medium"
+                >搜索</el-button
+              >
+              <!-- <el-button @click="resetHandle" size="medium">重置</el-button> -->
+              <el-button @click="noChooseUser" size="medium"
+                >不选择用户</el-button
+              >
+              <!-- <el-button @click="resetHandle" size="medium">新建用户</el-button> -->
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- <div class="head-container">
+              <el-button type="primary" icon="el-icon-plus" @click="$refs.addActive.show()">
+                  添加活动
+              </el-button>
+          </div> -->
+
+      <div class="head-container">
+        <el-table :data="tableData.data" v-loading="tableData.loading" @cell-click="cellClick">
+          <el-table-column label="ID" prop="id"></el-table-column>
+          <el-table-column label="用户" prop="headImg" width="200px">
+            <template v-slot="scope">
+              <div class="user_info">
+                <el-image
+                  :src="scope.row.headImg"
+                  style="width: 40px; height: 40px; flex-shrink: 0"
+                >
+                  <div slot="error" class="image-slot">
+                    <i class="el-icon-user"></i>
+                  </div>
+                </el-image>
+                <span class="name">{{ scope.row.nickName }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="手机号"
+            prop="telephone"
+            width="160"
+          ></el-table-column>
+          <!-- <el-table-column label="性别" prop="sex">
+            <template v-slot="scope">
+              <el-tag type="priamry">{{ scope.row.sex || "未知" }}</el-tag>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="会员" prop="isVip">
+            <template v-slot="scope">
+              <el-tag type="warning" v-if="scope.row.isVip"
+                >会员等级{{ scope.row.isVip }}</el-tag
+              >
+              <span v-else>否</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="余额" prop="amount"></el-table-column>
+          <el-table-column label="积分" prop="totalScore"></el-table-column>
+
+          <el-table-column label="操作" width="90" fixed="right">
+            <template v-slot="scope">
+              <el-button  type="primary" size="mini" @click="choose(scope.row)">选择</el-button>
+              <!-- <el-button type="text" @click="charge(scope.row)">充值</el-button> -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="head-container">
+        <el-pagination
+          :total="tableData.total"
+          :current-page="tableData.page + 1"
+          :page-size="tableData.size"
+          @size-change="sizeChange"
+          @current-change="paginationChange"
+          layout="total, sizes, prev, pager, next, jumper"
+        ></el-pagination>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+  
+  <script>
+import { queryAllShopUser, queryAllShopInfo } from "@/api/shop";
+import dayjs from "dayjs";
+let cacheData = {};
+export default {
+  data() {
+    return {
+      show: false,
+      query: {
+        name: "",
+      },
+      shopInfo: {
+        balanceTotal: 0,
+        userTotal: 0,
+        chageTotal: 0,
+      },
+      tableData: {
+        data: [],
+        page: 0,
+        size: 10,
+        loading: false,
+        total: 0,
+      },
+    };
+  },
+  filters: {
+    timeFilter(s) {
+      return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
+    },
+  },
+  mounted() {
+    // this.getTableData();
+  },
+  methods: {
+    cellClick(user){
+      console.log(user)
+      this.$emit("chooseUser",user)
+      this.close()
+    },
+    noChooseUser(){
+        this.$emit("chooseUser",null)
+      this.close()
+
+    },
+    choose(user) {
+      this.$emit("chooseUser",user)
+      this.close()
+
+    },
+    charge(user) {
+      console.log(user);
+    },
+    close(){
+        this.show = false;
+    },
+    open() {
+      this.getTableData();
+      this.show = true;
+    },
+    toPage(type) {
+      const pages = {
+        charge: "charge_list",
+        cost: "cost_list",
+      };
+      this.$router.push({
+        name: pages[type],
+      });
+      console.log(pages[type]);
+    },
+    // 获取商家用户概述信息
+    async getShopInfo() {
+      try {
+        const res = await queryAllShopInfo(this.query);
+        this.shopInfo = res;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    sizeChange() {
+      this.tableData.page = 0;
+      this.getTableData();
+    },
+    // 切换状态
+    async statusChange(e, row) {
+      try {
+        this.tableData.loading = true;
+        const data = { ...row };
+        data.status = e;
+        await modityActivate(data);
+        this.getTableData();
+      } catch (error) {
+        console.log(error);
+        this.tableData.loading = false;
+      }
+    },
+    // 重置查询
+    resetHandle() {
+      this.query.name = "";
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e - 1;
+      this.getTableData();
+    },
+    // 获取商品列表
+    async getTableData() {
+      this.tableData.loading = true;
+      try {
+        const res = await queryAllShopUser({
+          ...this.query,
+          size: this.tableData.size,
+          page: this.tableData.page + 1,
+        });
+        this.tableData.loading = false;
+        this.tableData.data = res.content;
+        this.tableData.total = res.totalElements;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+  
+  <style scoped lang="scss">
+.user_info {
+  display: flex;
+  align-items: center;
+
+  .name {
+    margin-left: 10px;
+  }
+}
+::v-deep .el-input--small .el-input__inner{
+    height: 36px;
+    line-height: 36px;
+}
+
+::v-deep .image-slot {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #efefef;
+  font-size: 20px;
+  color: #999;
+}
+
+.card {
+  background-color: #f5f5f5;
+  padding: 0 14px;
+
+  .title {
+    font-size: 22px;
+    padding-top: 14px;
+  }
+
+  .row {
+    display: flex;
+    padding: 20px 0;
+
+    .item {
+      flex: 1;
+
+      .t {
+        text-align: center;
+        color: #555;
+      }
+
+      .n {
+        color: #000;
+        font-size: 20px;
+        font-weight: bold;
+        padding-top: 6px;
+        text-align: center;
+      }
+    }
+  }
+}
+.flex{
+    display: flex;
+    align-items: center;
+}
+.gap-20{
+    gap: 20px;
+}
+</style>
+  

src/views/tool/table/components/downloadTableCode.vue

@@ -0,0 +1,69 @@
+<template>
+    <el-dialog title="下载桌码" width="400px" :visible.sync="dialogVisible" @open="reset">
+        <el-form ref="form" :model="form" label-position="left">
+            <el-form-item label="下载数量">
+                <el-input-number v-model="form.number" :min="1" :max="500"></el-input-number>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" :loading="loading" @click="onSubmitHandle">下 载</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script>
+import { downloadFile } from "@/utils/index";
+import { downloadTableCode } from '@/api/table'
+export default {
+    props: {
+        total: {
+            type: [Number, String],
+            default: 1
+        }
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            loading: false,
+            form: {
+                number: 1
+            },
+            resetForm: ''
+        }
+    },
+    mounted() {
+        this.resetForm = { ...this.form }
+    },
+    methods: {
+        async onSubmitHandle() {
+            try {
+                this.loading = true
+                const file = await downloadTableCode({
+                    count: this.form.number,
+                    shopId: localStorage.getItem('shopId')
+                })
+                this.loading = false
+                this.dialogVisible = false
+                this.$message.success('下载成功')
+                downloadFile(file, "桌码", "zip");
+            } catch (error) {
+                this.loading = false
+                console.log(error);
+            }
+        },
+        show(obj) {
+            this.dialogVisible = true
+            // if (obj && obj.id) {
+            //     this.form = JSON.parse(JSON.stringify(obj))
+            // }
+        },
+        close() {
+            this.dialogVisible = false
+        },
+        reset() {
+            this.form = { ...this.resetForm }
+        }
+    }
+}
+</script>

src/views/tool/table/components/keyboard.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="simple-Keyboard-number">
+    <div class="carts">
+      <div class="box_status">
+        <slot name="input">
+          <span> {{ number }}</span>
+        </slot>
+      </div>
+      <div class="number_list_box">
+        <div class="yd-keyboard">
+          <div class="mini-number-box1">
+            <div class="mini-number">
+              <div class="key-line">
+                <div class="key" @click="keyboradAdd('1')">1</div>
+                <div class="key" @click="keyboradAdd('2')">2</div>
+                <div class="key" @click="keyboradAdd('3')">3</div>
+              </div>
+              <div class="key-line">
+                <div class="key" @click="keyboradAdd('4')">4</div>
+                <div class="key" @click="keyboradAdd('5')">5</div>
+                <div class="key" @click="keyboradAdd('6')">6</div>
+              </div>
+              <div class="key-line">
+                <div class="key" @click="keyboradAdd('7')">7</div>
+                <div class="key" @click="keyboradAdd('8')">8</div>
+                <div class="key" @click="keyboradAdd('9')">9</div>
+              </div>
+              <div class="key-line">
+                <div class="key" @click="clearFunction">
+                  <slot name="clear"> </slot>
+                </div>
+                <div class="key" @click="keyboradAdd('0')">0</div>
+                <div
+                  class="key"
+                  style="font-size: 31px"
+                  @click="keyboradReduce"
+                >
+                  <svg
+                    t="1723453480343"
+                    class="icon"
+                    viewBox="0 0 1664 1024"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    p-id="1467"
+                    width="32"
+                    height="32"
+                  >
+                    <path
+                      d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
+                      fill="#333333"
+                      p-id="1468"
+                    ></path>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <template v-if="showConfirm">
+        <div class="submit" @click="keyboradConfirm">确认</div>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isCanEmpty: {
+      type: Boolean,
+      default: false,
+    },
+    maxTips: {
+      type: String,
+      default: "输入值超范围",
+    },
+    showConfirm: {
+      type: Boolean,
+      default: false,
+    },
+    max: {
+      type: Number,
+      default: Infinity,
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      number: 0,
+    };
+  },
+  watch: {
+    value(newval) {
+      this.number = newval;
+    },
+    number(newval) {
+      this.$emit("input", newval);
+    },
+  },
+  methods: {
+    clearFunction() {
+      this.$emit("clear", this.number);
+    },
+    keyboradAdd(n) {
+      if (Number(this.number) == 0) {
+        return (this.number = n);
+      }
+      const newval = this.number + n;
+      if (newval > this.max) {
+        return this.$message( this.maxTips);
+      }
+      this.number = newval;
+    },
+    keyboradReduce() {
+      if (this.number.length <= 1) {
+        return (this.number = this.isCanEmpty ? "" : "0");
+      }
+      this.number = `${this.number}`.substring(0, this.number.length - 1);
+    },
+    keyboradConfirm() {
+      this.$emit("confirm", this.number);
+    },
+  },
+  mounted() {
+    this.number = `${this.value}`;
+  },
+};
+</script>
+
+<style  lang="scss" scoped>
+.yd-keyboard {
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.mini-number-box1 .mini-number,
+.yd-keyboard {
+  display: flex;
+
+  flex-direction: column;
+}
+
+.mini-number-box1 .mini-number {
+  border: 1px solid #dcdfe6;
+}
+
+.mini-number-box1 .mini-number .key-line {
+  margin-top: 0;
+}
+
+.mini-number-box1 .mini-number .key {
+  width: 122px;
+  height: 60px;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  margin-left: 0;
+}
+.mini-number-box1 .mini-number .key:hover {
+  background-color: #dcdfe6;
+}
+.mini-number-box1 .mini-number .key:not(:last-child) {
+  border-right: 1px solid #dcdfe6;
+}
+
+.mini-number-box1 .mini-number .key-line:not(:last-child) {
+  border-bottom: 1px solid #dcdfe6;
+}
+
+.mini-number-box2 {
+  display: flex;
+
+  justify-content: center;
+}
+
+.mini-number-box2 .key {
+  width: 80px;
+  height: 70px;
+}
+
+.mini-number-box2 .function-button {
+  display: flex;
+
+  flex-direction: column;
+}
+
+.mini-number-box2 .function-button .key {
+  margin-top: 8px;
+}
+
+.key-line {
+  margin-top: 8px;
+}
+
+.key,
+.key-line {
+  display: flex;
+
+  justify-content: center;
+}
+
+.key {
+  width: 64px;
+  height: 64px;
+  background: #fff;
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
+  border-radius: 4px;
+
+  align-items: center;
+  margin-left: 8px;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.8);
+  text-align: center;
+  line-height: 34px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10196078431372549);
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.simple-Keyboard-number,
+.simple-Keyboard-weight {
+  min-width: 410px;
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.submit {
+  width: 366px;
+  height: 44px;
+  background: #22bf64;
+  border-radius: 2px;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
+.disabled-box {
+  position: absolute;
+  inset: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.carts {
+  flex-direction: column;
+  background: #fff;
+  height: 100%;
+}
+
+.carts .title,
+.carts {
+  display: flex;
+
+  align-items: center;
+  width: 100%;
+}
+
+.carts .title {
+  justify-content: space-between;
+  height: 64px;
+  border-bottom: 1px solid #ebebeb;
+  padding: 20px;
+  padding-top: 30px;
+}
+
+.carts .title .left {
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  font-size: 18px;
+  color: #000;
+}
+
+.carts .title .right {
+  font-size: 14.4px;
+  cursor: pointer;
+}
+
+.carts .box_status {
+  margin-bottom: 20px;
+  width: 370px;
+  height: 58px;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+
+  display: flex;
+
+  justify-content: center;
+
+  align-items: center;
+  margin-top: 20px;
+  font-family: MicrosoftYaHei;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  text-align: center;
+}
+
+.carts .box_status span {
+  padding: 0 5px;
+}
+</style>

src/views/tool/table/components/money-keyboard.vue

@@ -0,0 +1,339 @@
+<template>
+  <el-dialog width="330px" :title="title" :visible.sync="show">
+    <div class="simple-Keyboard-number">
+      <div class="carts">
+        <div class="pad-14">
+          <div class="box_status">
+            <span class="sym">￥</span>
+            <el-input v-model="number" type="text" @input="numberInput"></el-input>
+            <!-- <span class="inputs" :contenteditable="true" @input="numberInput" type="text" >{{ number }}</span> -->
+          </div>
+        </div>
+        <div class="number_list_box">
+          <div class="yd-keyboard">
+            <div class="mini-number-box1">
+              <div class="mini-number">
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('1')">1</div>
+                  <div class="key" @click="keyboradAdd('2')">2</div>
+                  <div class="key" @click="keyboradAdd('3')">3</div>
+                  <div
+                    class="key"
+                    style="font-size: 31px"
+                    @click="keyboradReduce"
+                  >
+                    <svg
+                      t="1723453480343"
+                      class="icon"
+                      viewBox="0 0 1664 1024"
+                      version="1.1"
+                      xmlns="http://www.w3.org/2000/svg"
+                      p-id="1467"
+                      width="32"
+                      height="32"
+                    >
+                      <path
+                        d="M1526.08 1.6H459.84L41.28 416c-53.76 53.248-53.76 139.52 0 192.64l418.624 414.592v-0.064h1066.176a136.96 136.96 0 0 0 137.6-136.256V137.792a136.96 136.96 0 0 0-137.6-136.192z m-331.392 631.168c26.816 26.624 26.816 69.76 0 96.384-26.88 26.56-70.4 26.56-97.28 0l-121.28-120.128-123.328 122.112a69.76 69.76 0 0 1-97.92 0 68.096 68.096 0 0 1 0-96.96L878.208 512l-121.28-120.064a67.648 67.648 0 0 1 0-96.32c26.88-26.624 70.4-26.624 97.28 0l121.216 120.064 122.24-120.96a69.696 69.696 0 0 1 97.92 0 68.032 68.032 0 0 1 0 96.96l-122.24 120.96 121.344 120.064z"
+                        fill="#333333"
+                        p-id="1468"
+                      ></path>
+                    </svg>
+                  </div>
+                </div>
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('4')">4</div>
+                  <div class="key" @click="keyboradAdd('5')">5</div>
+                  <div class="key" @click="keyboradAdd('6')">6</div>
+                  <div class="key" @click="keyboradAdd('clear')">清空</div>
+                </div>
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('7')">7</div>
+                  <div class="key" @click="keyboradAdd('8')">8</div>
+                  <div class="key" @click="keyboradAdd('9')">9</div>
+                  <div class="key"></div>
+                </div>
+                <div class="key-line">
+                  <div class="key" @click="keyboradAdd('.')">.</div>
+                  <div class="key" @click="keyboradAdd('0')">0</div>
+                  <div class="key" @click="keyboradAdd('00')">00</div>
+                  <div class="key"></div>
+                </div>
+                <div class="confirm key" @click="confirm">确认</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="submit" @click="keyboradConfirm">确认</div> -->
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "支付",
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      number: '0',
+      show:false
+    };
+  },
+  watch: {
+    number(newval) {
+      this.$emit("input", newval);
+    },
+  },
+  methods: {
+    confirm(){
+
+    },
+    open(){
+      this.show=true
+    },
+    close(){
+      this.show=false
+    },
+    numberInput(val){
+      console.log(val)
+      this.number=`${Number(val)}` 
+    },
+    keyboradAdd(n) {
+      if (n === "clear") {
+        return (this.number = '0');
+      }
+      if(n==='.'){
+        return this.number += this.number.includes('.')?'' : '.'
+      }
+      if (`${this.number}`.length<=1&&Number(this.number)===0) {
+        return (this.number = n);
+      }
+      this.number += n;
+    },
+    keyboradReduce() {
+      if (this.number.length <= 1) {
+        return (this.number = this.isCanEmpty ? "" : "0");
+      }
+      this.number = this.number.substring(0, this.number.length - 1);
+    },
+    keyboradConfirm() {
+      this.$emit("confirm", this.number);
+    },
+  },
+  mounted() {
+    this.number = `${this.value}`;
+  },
+};
+</script>
+
+<style  lang="scss" scoped>
+.pad-14 {
+  padding: 14px;
+  width: 100%;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+::v-deep .el-input__inner::-webkit-outer-spin-button{
+  -webkit-appearance: none;  
+  margin: 0;  
+}  
+::v-deep .el-input__inner::-webkit-inner-spin-button {  
+  -webkit-appearance: none;  
+  margin: 0;  
+}  
+  
+/* Firefox */  
+::v-deep .el-input__inner {  
+  -moz-appearance: textfield;  
+}
+.number_list_box,
+.yd-keyboard,
+.mini-number,
+.mini-number-box1,
+.key-line {
+  width: 100%;
+}
+.yd-keyboard {
+  justify-content: center;
+}
+
+.mini-number-box1 .mini-number,
+.yd-keyboard {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+}
+
+.mini-number-box1 .mini-number {
+  border-top: 1px solid #dcdfe6;
+}
+
+.mini-number-box2 {
+  display: flex;
+
+  justify-content: center;
+}
+
+.mini-number-box2 .function-button {
+  display: flex;
+  flex-direction: column;
+}
+
+.key,
+.key-line {
+  display: flex;
+  justify-content: center;
+}
+
+.key {
+  width: 25%;
+  height: 70px;
+  box-sizing: border-box;
+  background: #fff;
+  align-items: center;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 24px;
+  color: #212121;
+  text-align: center;
+  line-height: 34px;
+  cursor: pointer;
+  user-select: none;
+}
+.key:hover {
+  background-color: #dcdfe6;
+}
+.key:not(:last-child) {
+  border-right: 1px solid #dcdfe6;
+}
+
+.key-line:not(:last-child) {
+  border-bottom: 1px solid #dcdfe6;
+}
+.confirm {
+  height: 142px;
+  width: 25%;
+  background: #22bf64;
+  color: #fff;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-right: none;
+}
+.confirm:hover {
+  background: rgba(34, 191, 100, 0.8666666666666667);
+}
+.simple-Keyboard-number,
+.simple-Keyboard-weight {
+  background: #fff;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.submit {
+  width: 366px;
+  height: 44px;
+  background: #22bf64;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
+.disabled-box {
+  position: absolute;
+  inset: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.carts {
+  flex-direction: column;
+  background: #fff;
+  height: 100%;
+}
+
+.carts .title,
+.carts {
+  display: flex;
+
+  align-items: center;
+  width: 100%;
+}
+
+.carts .title {
+  justify-content: space-between;
+  height: 64px;
+  border-bottom: 1px solid #ebebeb;
+  padding: 20px;
+  padding-top: 30px;
+}
+
+.carts .title .left {
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  font-size: 18px;
+  color: #000;
+}
+
+.carts .title .right {
+  font-size: 14.4px;
+  cursor: pointer;
+}
+
+.box_status {
+  box-sizing: border-box;
+  width: 100%;
+  background: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  padding: 14px;
+  align-items: flex-end;
+  font-family: MicrosoftYaHei;
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.8);
+  letter-spacing: 1.25px;
+  .sym {
+    font-size: 24px;
+    color: #212121;
+    width: 30px;
+    margin-bottom: 3px;
+  }
+  .inputs {
+    font-size: 28px;
+    color: #212121;
+    outline: none;
+    line-height: 37px;
+    border: none;
+    max-width: 250px;
+  }
+}
+::v-deep .el-input--small .el-input__inner{
+  font-size: 28px;
+    color: #212121;
+    outline: none;
+    line-height: 37px;
+    border: none;
+    max-width: 250px;
+    padding-left: 0;
+}
+
+.carts .box_status span {
+  padding: 0 5px;
+}
+</style>

src/views/tool/table/components/order-btn.js

@@ -0,0 +1,62 @@
+export const orderBtns=[
+    {
+        text: "删除",
+        disabled: false,
+      },
+      {
+        text: "规格",
+        disabled: true,
+      },
+      {
+        text: "菜品打折",
+        disabled: false,
+      },
+      {
+        text: "赠菜",
+        disabled: false,
+      },
+      {
+        text: "赠菜",
+        disabled: false,
+      },
+      {
+        text: "打包",
+        disabled: false,
+      },
+      {
+        text: "等叫",
+        disabled: false,
+      },
+      {
+        text: "整单等叫",
+        disabled: false,
+      },
+      {
+        text: "单品备注",
+        disabled: false,
+      },
+      {
+        text: "退菜",
+        disabled: false,
+      },
+      {
+        text: "附加费",
+        disabled: false,
+      },
+      {
+        text: "存单",
+        disabled: false,
+      },
+      {
+        text: "取单",
+        disabled: false,
+      },
+      {
+        text: "修改价格",
+        disabled: false,
+      },
+      {
+        text: "撤单",
+        disabled: false,
+      }
+]

src/views/tool/table/components/pay-type.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title">选择支付方式</div>
+    <div class="btn_group">
+      <div class="price_select">
+        <div class="pay_btns">
+          <el-button
+            size="medium"
+            @click="changeSel(item)"
+            v-for="(item, index) in list"
+            :key="index"
+            :type="sel === item.payType ? 'primary' : ''"
+          >
+            {{ item.payName }}
+          </el-button>
+          <!-- <el-button size="medium"> 余额支付 </el-button>
+          <el-button size="medium"> 现金支付 </el-button>
+          <el-button size="medium"> 挂账 </el-button> -->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { $getPayType } from "@/api/table";
+export default {
+  props: {
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+  },
+  data() {
+    return {
+      list: [],
+      sel: "",
+    };
+  },
+  watch: {
+    sel(newval) {
+      console.log(newval);
+      this.$emit("input", newval);
+    },
+  },
+  methods: {
+    changeSel(item) {
+      this.sel = item.payType;
+      this.$emit("itemClick", item);
+    },
+    async init() {
+      const res = await $getPayType();
+      this.list = res.filter(v=>v.isDisplay);
+      console.log(res[0]);
+      this.sel = this.sel ? this.sel : res[0].payType;
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 18px;
+  color: #000;
+  font-weight: 600;
+  padding: 20px 0;
+}
+.pay_btns .el-button {
+  margin-left: 0;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>

src/views/tool/table/components/subscribe.vue

@@ -0,0 +1,269 @@
+<template>
+  <el-dialog
+    title="预约"
+    :visible.sync="dialogVisible"
+    width="500px"
+    @close="reset"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="left"
+    >
+
+      <el-form-item label="预约日期" prop="bookingDate">
+        <!-- <el-date-picker
+          v-model="form.bookingDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+          placeholder="选择预约日期"
+          style="width: 200px;margin-right: 10px;"
+          @change="getShopTableList"
+        /> -->
+        <el-radio-group
+          v-model="form.bookingDate"
+          class="date"
+          @change="getShopTableList"
+        >
+          <el-radio-button
+            v-for="(item) in dateList"
+            :key="item.date"
+            :label="item.date"
+          >
+            <div style="font-size: 12px;margin-bottom: 4px;">{{ item.label }} / {{ item.date.substring(8,10) }}</div>
+            <div style="font-size: 12px;"> {{ item.day }}</div>
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="预约类型" prop="bookingType">
+        <el-radio-group v-model="form.bookingType" @change="getShopTableList">
+          <el-radio-button label="lunch">午餐</el-radio-button>
+          <el-radio-button label="dinner">晚餐</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="就餐时间" prop="bookingTime">
+        <el-time-picker
+          v-model="form.bookingTime"
+          value-format="HH:mm:ss"
+          placeholder="选择时间"
+          style="width: 100%;"
+        />
+      </el-form-item>
+      <el-form-item label="预约桌台" prop="shopTableId">
+        <el-select v-model="form.shopTableId" placeholder="请选择" style="width: 100%;">
+          <el-option
+            v-for="item in shopTableList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用餐人数" prop="dinerNum">
+        <el-input-number v-model="form.dinerNum" :min="1" controls-position="right" style="width: 100%;"/>
+      </el-form-item>
+      <el-form-item label="订餐人" prop="bookingPerson">
+        <el-input v-model="form.bookingPerson" style="width: 200px;margin-right: 10px;" placeholder="请输入联系人姓名" />
+        <el-radio-group v-model="form.gender">
+          <el-radio-button label="1">先生</el-radio-button>
+          <el-radio-button label="2">女士</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phoneNumber">
+        <el-input v-model="form.phoneNumber" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button
+        type="primary"
+        :loading="loading"
+        @click="onSubmitHandle"
+      >确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getShopTableList, makeShopTable } from '@/api/table'
+import dayjs from 'dayjs'
+
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      resetForm: '',
+      loading: false,
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() < Date.now() - 8.64e7 // 如果今天之前的日期都不可选，减去8.64e7是1天的毫秒数
+        }
+      },
+      dateList: [
+        { label: '今', day: '', date: '' },
+        { label: '明', day: '', date: '' },
+        { label: '后', day: '', date: '' }
+      ],
+      shopTableList: [],
+      form: {
+        bookingDate: '',
+        bookingType: 'lunch',
+        shopTableId: null,
+        dinerNum: 1,
+        bookingPerson: '',
+        phoneNumber: '',
+        gender: '1',
+        bookingTime: '',
+        diningType: '普通用餐',
+        focus: '0',
+        receiveMarketingSms: '0'
+
+      },
+      rules: {
+        shopTableId: [
+          {
+            required: true,
+            message: '请选择预约桌台',
+            trigger: ['blur']
+          }
+        ],
+        dinerNum: [
+          {
+            required: true,
+            message: '请选择用餐人数',
+            trigger: ['blur']
+          }
+        ],
+        phoneNumber: [
+          {
+            required: true,
+            message: '请输入联系方式',
+            trigger: ['blur']
+          }
+        ],
+        bookingPerson: [
+          {
+            required: true,
+            message: '请输入订餐人姓名',
+            trigger: ['blur']
+          }
+        ],
+        bookingTime: [
+          {
+            required: true,
+            message: '请选择用餐时间',
+            trigger: ['change']
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.resetForm = { ...this.form }
+  },
+  methods: {
+    getWeekdays() {
+      const today = new Date()
+      const tomorrow = new Date(today)
+      const dayAfterTomorrow = new Date(today)
+
+      // 设置时间为今天
+      tomorrow.setDate(today.getDate() + 1)
+      dayAfterTomorrow.setDate(today.getDate() + 2)
+
+      // 获取星期几的方法
+      const getDayOfWeek = (date) => {
+        const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+        return days[date.getDay()]
+      }
+
+      // 获取今天、明天和后天的星期几
+      const todayWeekday = getDayOfWeek(today)
+      const tomorrowWeekday = getDayOfWeek(tomorrow)
+      const dayAfterTomorrowWeekday = getDayOfWeek(dayAfterTomorrow)
+      this.dateList[0].day = todayWeekday
+      this.dateList[1].day = tomorrowWeekday
+      this.dateList[2].day = dayAfterTomorrowWeekday
+      this.dateList[0].date = dayjs(today).format('YYYY-MM-DD')
+      this.dateList[1].date = dayjs(tomorrow).format('YYYY-MM-DD')
+      this.dateList[2].date = dayjs(dayAfterTomorrow).format('YYYY-MM-DD')
+
+      this.form.bookingDate = this.dateList[0].date
+    },
+    /**
+     * 获取桌台数据
+     */
+    async getShopTableList() {
+      this.form.shopTableId = null
+      const params = {
+        bookingDate: this.form.bookingDate,
+        bookingType: this.form.bookingType
+      }
+      const res = await getShopTableList(params)
+      this.shopTableList = res
+      console.log(res)
+    },
+    onSubmitHandle() {
+      this.$refs.form.validate(async(valid) => {
+        if (valid) {
+          this.loading = true
+          try {
+            const bookingTime = this.form.bookingDate + ' ' + this.form.bookingTime
+            const params = {
+              ...this.form,
+              shopId: localStorage.getItem('shopId')
+            }
+            params.bookingTime = bookingTime
+            const res = await makeShopTable(params)
+            this.$emit('success', res)
+            this.close()
+            this.$notify({
+              title: '成功',
+              message: `预约成功`,
+              type: 'success'
+            })
+            this.loading = false
+          } catch (error) {
+            this.loading = false
+            console.log(error)
+          }
+        }
+      })
+    },
+    show(obj) {
+      this.dialogVisible = true
+      if (obj && obj.id) {
+        this.form = JSON.parse(JSON.stringify(obj))
+      }
+      this.getShopTableList()
+      this.getWeekdays()
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    reset() {
+      this.form = { ...this.resetForm }
+    }
+
+  }
+}
+</script>
+<style scoped lang="scss">
+.date{
+  ::v-deep .el-form-item__content{
+    // height: 36px;
+    // display: flex;
+    // justify-content: space-between;
+  }
+  ::v-deep .el-radio-button{
+    height: 100%;
+  }
+  ::v-deep .el-radio-button__inner{
+    padding: 4px 20px;
+    height: 100%;
+  }
+}
+</style>

src/views/tool/table/components/table-edit.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-dialog :title="form.id ? '编辑台桌' : '添加台桌'" :visible.sync="dialogVisible" @open="tbShopAreaGet" @close="reset">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+          <el-form-item label="选择区域" prop="areaId">
+              <el-select v-model="form.areaId" placeholder="请选择区域">
+                  <el-option :label="item.name" :value="item.id" v-for="item in areaList" :key="item.id"></el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item label="台桌状态" prop="status" v-if="form.id">
+              <el-select v-model="form.status" placeholder="请选择台桌状态">
+                  <el-option :label="item.label" :value="item.value" v-for="item in status" :key="item.value"></el-option>
+              </el-select>
+          </el-form-item>
+          <el-form-item label="台桌名称">
+              <el-input v-model="form.name" placeholder="请输入台桌名称"></el-input>
+          </el-form-item>
+          <el-form-item label="客座数">
+              <el-input-number v-model="form.maxCapacity" :min="0" controls-position="right"></el-input-number>
+          </el-form-item>
+          <el-form-item label="清台管理">
+        <el-radio-group v-model="form.autoClear">
+          <el-radio-button :label="0">手动清台</el-radio-button>
+          <el-radio-button :label="1">自动清台</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+          <el-form-item label="网络预定开关">
+              <el-switch v-model="form.isPredate" :active-value="1" :inactive-value="2"></el-switch>
+          </el-form-item>
+          <el-form-item label="类型">
+              <el-radio-group v-model="form.type">
+                  <el-radio-button :label="0">低消</el-radio-button>
+                  <el-radio-button :label="2">计时</el-radio-button>
+              </el-radio-group>
+          </el-form-item>
+          <el-form-item label="最低消费" v-if="form.type == 0">
+              <el-input-number v-model="form.amount" :min="0" controls-position="right"></el-input-number>
+          </el-form-item>
+          <el-form-item label="每小时收费" v-if="form.type == 2">
+              <el-input-number v-model="form.perhour" :min="0" controls-position="right"></el-input-number>
+          </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
+      </span>
+  </el-dialog>
+</template>
+
+<script>
+import { tbShopTable, tbShopAreaGet } from '@/api/table'
+import $status from "../status.js";
+
+export default {
+  data() {
+      return {
+          dialogVisible: false,
+          resetForm: '',
+          loading: false,
+          status:[],
+          form: {
+              id: '',
+              name: '',
+              areaId: '',
+              maxCapacity: 0,
+              isPredate: 1,
+              type: 2,
+              perhour: 0,
+              amount: 0,
+        autoClear: 1,
+
+          },
+          rules: {
+              areaId: [
+                  {
+                      required: true,
+                      message: '请选择区域',
+                      trigger: 'blur'
+                  }
+              ]
+          },
+          areaList: []
+      }
+  },
+  mounted() {
+      this.resetForm = { ...this.form }
+      this.status = Object.keys($status).map(key =>{
+        return  {...$status[key],value:key}
+      }); 
+  },
+  methods: {
+      onSubmitHandle() {
+          this.$refs.form.validate(async valid => {
+              if (valid) {
+                  this.loading = true
+                  try {
+                      let res = await tbShopTable({
+                          ...this.form,
+                          qrcode:this.form.tableId,
+                          shopId: localStorage.getItem('shopId')
+                      }, this.form.id ? 'put' : 'post')
+                      this.$emit('success', res)
+                      this.close()
+                      this.$notify({
+                          title: '成功',
+                          message: `${this.form.id ? '编辑' : '添加'}成功`,
+                          type: 'success'
+                      });
+                      this.loading = false
+                  } catch (error) {
+                      this.loading = false
+                      console.log(error)
+                  }
+              }
+          })
+      },
+      show(obj) {
+          this.dialogVisible = true
+          if (obj && obj.id) {
+              this.form = JSON.parse(JSON.stringify(obj))
+          }
+      },
+      close() {
+          this.dialogVisible = false
+      },
+      reset() {
+          this.form = { ...this.resetForm }
+      },
+      // 获取区域
+      async tbShopAreaGet() {
+          try {
+              const { content } = await tbShopAreaGet({
+                  shopId: localStorage.getItem('shopId')
+              })
+              this.areaList = content
+          } catch (error) {
+              console.log(error);
+          }
+      }
+  }
+}
+</script>

src/views/tool/table/components/util.js

@@ -0,0 +1,47 @@
+//判断商品是否可以下单
+export function isCanBuy(goods,isStock) {
+    return goods.isGrounding && goods.isPauseSale == 0 && (isStock?goods.stockNumber > 0:true) ;
+}
+
+// 一个数组是否包含另外一个数组全部元素
+export function arrayContainsAll(arr1, arr2) {
+    for (let i = 0; i < arr2.length; i++) {
+        if (!arr1.includes(arr2[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+//n项 n-1项组合，生成全部结果
+export function generateCombinations(arr, k) {
+    let result = [];
+
+    function helper(index, current) {
+        if (current.length === k) {
+            result.push(current.slice()); // 使用slice()来避免直接修改原始数组
+        } else {
+            for (let i = index; i < arr.length; i++) {
+                current.push(arr[i]); // 将当前元素添加到组合中
+                helper(i + 1, current); // 递归调用，索引增加以避免重复选择相同的元素
+                current.pop(); // 回溯，移除当前元素以便尝试其他组合
+            }
+        }
+    }
+
+    helper(0, []); // 从索引0开始，初始空数组作为起点
+    return result;
+}
+
+export function returnReverseVal(val, isReturnString = true) {
+    const isBol = typeof val === "boolean";
+    const isString = typeof val === "string";
+    let reverseNewval = "";
+    if (isBol) {
+        reverseNewval = !val;
+    }
+    if (isString) {
+        reverseNewval = val === "true" ? "false" : "true";
+    }
+    return reverseNewval;
+}

src/views/tool/table/status.js

@@ -0,0 +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)' }
+}

src/views/user/active/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <!-- 搜索 -->
+    <page-search
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+    <!-- 列表 -->
+    <page-content
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleAddClick"
+      @edit-click="handleEditClick"
+      @export-click="handleExportClick"
+      @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
+    >
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
+      </template>
+      <template #options="scope">
+        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+      </template>
+      <template #bol="scope">
+        {{ scope.row[scope.prop] ? "是" : "否" }}
+      </template>
+      <template #gender="scope">
+        <el-tag
+          :type="
+            scope.row[scope.prop] == null
+              ? 'info'
+              : scope.row[scope.prop] == 1
+              ? 'success'
+              : 'warning'
+          "
+        >
+          {{ scope.row[scope.prop] === null ? "未知" : scope.row[scope.prop] == 1 ? "男" : "女" }}
+        </el-tag>
+      </template>
+      <template #user="scope">
+        <div class="flex align-center">
+          <el-avatar :src="scope.row.headImg" />
+          <el-tag>{{ scope.row.nickName }}</el-tag>
+        </div>
+      </template>
+      <template #link="scope">
+        <el-link>{{ scope.row[scope.prop] }}</el-link>
+      </template>
+      <template #mobile="scope">
+        <el-text>{{ scope.row[scope.prop] }}</el-text>
+        <copy-button
+          v-if="scope.row[scope.prop]"
+          :text="scope.row[scope.prop]"
+          style="margin-left: 2px"
+        />
+      </template>
+    </page-content>
+
+    <!-- 新增 -->
+    <page-modal
+      ref="addModalRef"
+      :modal-config="addModalConfig"
+      @submit-click="handleSubmitClick"
+      @formDataChange="formDataChange"
+    ></page-modal>
+
+    <!-- 编辑 -->
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+      @formDataChange="formDataChange"
+    ></page-modal>
+  </div>
+</template>
+
+<script setup >
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";
+const editMoneyModalRef = ref(null);
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 修改金额表单类型
+function formDataChange(type, val) {
+  console.log(type, val);
+}
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+}
+// 获取优惠券
+async function getCouponList() {}
+// 编辑
+async function handleEditClick(row) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  // const data = await VersionApi.getFormData(row.id);
+  editModalRef.value?.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
+}
+
+// 其他工具栏
+function handleToolbarClick(name) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+
+// 其他操作列
+async function handleOperatClick(data) {
+  const row = data.row;
+  if (data.name == "more") {
+    if (data.command === "change-money") {
+      editMoneyModalRef.value.setModalVisible();
+      editMoneyModalRef.value.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
+      return;
+    }
+    return;
+  }
+}
+
+// 切换示例
+const isA = ref(true);
+</script>
+<style scoped>
+.align-center {
+  align-items: center;
+}
+</style>