From bce36a4e16647b1ed8273aa847d0dde6b443e3a1 Mon Sep 17 00:00:00 2001
From: GaoHao <1210693421@qq.com>
Date: Thu, 12 Dec 2024 11:02:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=87=E7=BA=A7=E7=89=88=E6=9C=AC=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E4=BF=AE=E6=94=B9=EF=BC=8C=E5=8F=B0=E6=A1=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=A2=84=E7=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/version/components/add-version.vue |   6 +-
 .../system/version/components/upload-file.vue |  14 +-
 src/views/table/components/subscribe.vue      | 135 ++++
 src/views/table/table_list copy.vue           | 638 ++++++++++++++++++
 src/views/table/table_list.vue                | 421 +++++++-----
 5 files changed, 1024 insertions(+), 190 deletions(-)
 create mode 100644 src/views/table/components/subscribe.vue
 create mode 100644 src/views/table/table_list copy.vue

diff --git a/src/views/system/version/components/add-version.vue b/src/views/system/version/components/add-version.vue
index 68e141e..6a76001 100644
--- a/src/views/system/version/components/add-version.vue
+++ b/src/views/system/version/components/add-version.vue
@@ -94,6 +94,8 @@ export default {
       sources: [
         { label: "PC", value: "PC" },
         { label: "APP", value: "APP" },
+        { label: "点餐宝", value: "点餐宝" },
+        { label: "电话机", value: "电话机" },
       ],
       title: "",
       dialogVisible: false,
@@ -153,20 +155,18 @@ export default {
             const { version } = this.form;
             let fileRes = "";
             const file = this.$refs.uploadFile.getFileList();
-            console.log(file);
             if (Object.prototype.toString.call(file)=== '[object File]') {
               this.loadingText = "文件上传中，请耐心等待...";
               this.loading = true;
               // fileRes = await $uploadVersionFile(file, { name: version });
               fileRes = await this.ossClient.partUpload(
-                `/version/${version}.exe`,
+                `/version/${version}${file.name.replace('.apk', '')}`,
                 file,
                 (p) => {
                   this.progress = Math.floor(p * 100);
                   // 这里可以根据进度做相应的处理，例如更新UI等
                 }
               );
-              console.log(fileRes);
               if (!fileRes) {
                 this.loading = false;
                  this.progress = 0;
diff --git a/src/views/system/version/components/upload-file.vue b/src/views/system/version/components/upload-file.vue
index d2327c0..75068df 100644
--- a/src/views/system/version/components/upload-file.vue
+++ b/src/views/system/version/components/upload-file.vue
@@ -56,9 +56,11 @@ export default {
   },
   methods: {
     beforeUpload(file) {
+      console.log(1)
       const isExe = file.name.endsWith(".exe");
-      if (!isExe) {
-        this.$message.error("只允许上传.exe文件！");
+      const isApk = file.name.endsWith(".apk");
+      if (!isExe&&!isApk) {
+        this.$message.error("只允许上传.exe或者.apk文件！");
         return false; // 阻止上传
       }
       return true; // 允许上传
@@ -99,10 +101,12 @@ export default {
       this.dialogVisible = true;
     },
     onExceed(files ) {
+      console.log(2)
+
       const file=files[0];
-      const isExe = file.name.endsWith(".exe");
-      if (!isExe) {
-        this.$message.error("只允许上传.exe文件！");
+      const isApk = file.name.endsWith(".apk");
+      if (!isExe&&!isApk) {
+        this.$message.error("只允许上传.exe或者.apk文件！");
         return false; // 阻止上传
       }
       console.log(files);
diff --git a/src/views/table/components/subscribe.vue b/src/views/table/components/subscribe.vue
new file mode 100644
index 0000000..20caa03
--- /dev/null
+++ b/src/views/table/components/subscribe.vue
@@ -0,0 +1,135 @@
+<template>
+  <el-dialog
+    title="预约"
+    :visible.sync="dialogVisible"
+    width="400px"
+    @open="tbShopAreaGet"
+    @close="reset"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="left"
+    >
+
+      <el-form-item label="就餐人数" prop="number">
+        <el-input-number v-model="form.number" :min="1" controls-position="right" />
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="form.phone" oninput="value= value.replace(/[^0-9]/g, '')" maxlength="11" placeholder="请输入联系电话" />
+      </el-form-item>
+      <el-form-item label="联系人" prop="name">
+        <el-input v-model="form.name" placeholder="请输入联系人姓名" />
+      </el-form-item>
+      <el-form-item label="就餐时间" prop="time">
+        <el-time-picker v-model="form.time" value-format="HH:mm:ss" placeholder="选择时间" style="width: 100%;" />
+      </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 { $fastCreateTable } from '@/api/table'
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      resetForm: '',
+      loading: false,
+      form: {
+        id: '',
+        number: 1,
+        name: '',
+        phone: '',
+        time: ''
+      },
+      rules: {
+        number: [
+          {
+            required: true,
+            message: '请选择就餐人数',
+            trigger: ['blur']
+          }
+        ],
+        phone: [
+          {
+            required: true,
+            message: '请输入联系方式',
+            trigger: ['blur']
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: '请输入联系人姓名',
+            trigger: ['blur']
+          }
+        ],
+        time: [
+          {
+            required: true,
+            message: '请选择时间',
+            trigger: ['change']
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.resetForm = { ...this.form }
+  },
+  methods: {
+    onSubmitHandle() {
+      this.$refs.form.validate(async(valid) => {
+        if (valid) {
+          this.loading = true
+          try {
+            const 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: `预约成功`,
+              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 }
+    }
+
+  }
+}
+</script>
diff --git a/src/views/table/table_list copy.vue b/src/views/table/table_list copy.vue
new file mode 100644
index 0000000..82abe96
--- /dev/null
+++ b/src/views/table/table_list copy.vue	
@@ -0,0 +1,638 @@
+<template>
+  <div class="app-container">
+    <el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
+      <el-tab-pane label="全部" name=""></el-tab-pane>
+      <el-tab-pane
+        v-for="item in tabs"
+        :key="item.id"
+        :label="item.name"
+        :name="`${item.id}`"
+      >
+        <div slot="label">
+          {{ item.name }}
+          <i
+            class="icon el-icon-edit"
+            @click.stop="$refs.addEara.show(item)"
+          ></i>
+          <el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
+            <i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
+          </el-popconfirm>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="head-container">
+      <div class="filter_wrap">
+        <el-button icon="el-icon-plus" @click="$refs.addEara.show()"
+          >添加区域</el-button
+        >
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          @click="$refs.addTable.show()"
+          >添加台桌</el-button
+        >
+        <el-button
+          type="primary"
+          icon="el-icon-download"
+          @click="$refs.downloadTableCode.show()"
+        >
+          下载台桌码
+        </el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-download"
+          @click="downloadShopCode"
+          >下载店铺码</el-button
+        >
+      </div>
+    </div>
+    <div class="u-flex u-p-b-15 u-font-14">
+      <div class="state u-m-r-24" v-for="(item, key) in status" :key="key">
+        <span
+          class="dot"
+          :style="{
+            backgroundColor: status[key] ? status[key].type : '',
+          }"
+        ></span>
+        {{ item.label }}
+      </div>
+    </div>
+    <div class="head-container">
+      <div class="table_list" v-loading="loading">
+        <div
+          class="item"
+          v-for="item in tableList"
+          :key="item.id"
+          :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">
+                {{ item.name }}</span
+              >
+              <span class="u-font-14 u-line-1"
+                >丨{{ areaMap[item.areaId] || "" }}</span
+              >
+            </div>
+            <el-dropdown trigger="click" @command="tableComman($event, item)">
+              <i class="el-icon-more cur-pointer color-fff"></i>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="edit">
+                  <i class="i el-icon-edit"></i>
+                  <span>编辑</span>
+                </el-dropdown-item>
+                <el-dropdown-item command="del">
+                  <i class="i el-icon-delete"></i>
+                  <span>删除</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <div class="box">
+            <div class="top">
+              <!-- <div class="row row1">
+              <span>{{ item.name }}</span>
+              <div class="state">
+                <span
+                  class="dot"
+                  :style="{
+                    backgroundColor: status[item.status]
+                      ? status[item.status].type
+                      : '',
+                  }"
+                ></span>
+                {{ status[item.status] ? status[item.status].label : "" }}
+              </div>
+            </div> -->
+
+              <!-- <div class="row">
+              <el-tag type="warning" size="mini">{{
+                item.type == 0 ? "低消" : "计时"
+              }}</el-tag>
+              <el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
+                item.isPredate == 1 ? "可预约" : "不可预约"
+              }}</el-tag>
+            </div> -->
+
+              <!-- <div class="row">
+              <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
+            </div> -->
+              <div class="u-font-18 font-600 total-price">
+                <span
+                  class="cur-pointer"
+                  v-if="item.status == 'using'"
+                  @click="diancanShow(item, 'isAddGoods')"
+                >
+                  ¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
+                </span>
+                <span class="color-fff" v-else>|</span>
+              </div>
+              <div class="row btn-group">
+                <template v-if="item.status == 'idle'">
+                  <el-button
+                    type="primary"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                    @click="diancanShow(item)"
+                    >点餐</el-button
+                  >
+                </template>
+                <template v-else>
+                  <template v-if="item.status == 'using'">
+                    <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
+                    >
+                  </template>
+                  <template v-else-if="item.status == 'closed'">
+                    <el-button type="info" disabled>已关台</el-button>
+                  </template>
+                  <template v-else-if="item.status == 'cleaning'">
+                    <el-button
+                      type="info"
+                      @click="cleanTableHandle(item)"
+                      :style="{
+                        backgroundColor: status[item.status].type,
+                        borderColor: status[item.status].type,
+                      }"
+                      >清台</el-button
+                    >
+                  </template>
+                  <template v-else>
+                    <el-button type="info" disabled>点餐</el-button>
+                  </template>
+                </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-center">
+                <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 class="u-flex" v-if="item.status == 'using'">
+                <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">{{
+                  item.durationTime | formatTime
+                }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="empty_wrap">
+          <el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
+        </div>
+      </div>
+    </div>
+    <addEara ref="addEara" @success="tbShopAreaGet" />
+    <!-- 批量添加台桌 -->
+    <addTable ref="addTable" @success="tbShopTableGet" />
+    <!-- 编辑台桌 -->
+    <table-edit ref="editTable" @success="tbShopTableGet"></table-edit>
+    <downloadTableCode :total="total" ref="downloadTableCode" />
+
+    <!-- 点餐 -->
+    <!-- <table-diancan ref="diancan" @close="onDiancanClose"></table-diancan> -->
+    <!-- 选择人数 -->
+    <choose-diners-number
+      ref="refChooseDinersNumber"
+      :max="selTable.maxCapacity"
+      @confirm="chooseDinersNumberConfirm"
+    ></choose-diners-number>
+  </div>
+</template>
+
+<script>
+import addEara from "./components/addEara";
+import addTable from "./components/addTable";
+import tableEdit from './components/table-edit';
+import downloadTableCode from "./components/downloadTableCode";
+import tableDiancan from "./components/table-diancan.vue";
+import $status from "./status.js";
+import chooseDinersNumber from "./components/table-diancan-components/choose-diners-number.vue";
+import { tbShopInfo } from "@/api/user";
+import { hasPermission } from "@/utils/limits.js";
+
+import {
+  tbShopTableGet,
+  tbShopAreaGet,
+  tbShopAreaDelete,
+  tbShopTableDelete,
+  tbShopTable,
+} from "@/api/table";
+import dayjs from "dayjs";
+import { downloadFile } from "@/utils/index";
+
+export default {
+  components: {
+    addEara,
+    addTable,
+    downloadTableCode,
+    tableDiancan,
+    chooseDinersNumber,
+    tableEdit,
+  },
+  data() {
+    return {
+      tabVlaue: "",
+      tabs: [],
+      loading: false,
+      total: 0,
+      tableList: [],
+      status: $status,
+      selTable: "", //当前选中的桌台
+      areaMap: {},
+      shopInfo: {},
+      timer: null,
+    };
+  },
+  beforeDestroy() {
+    this.clearTimer();
+    console.log("beforeDestroy");
+  },
+  mounted() {
+    this.clearTimer();
+    this.setTimter(60);
+    this.tbShopAreaGet();
+    this.getShopInfo();
+  },
+  filters: {
+    formatTime(milliseconds) {
+      console.log(milliseconds);
+      if (!milliseconds) {
+        return "";
+      }
+      const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
+      const hours = Math.floor(
+        (milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      );
+      const minutes = Math.floor(
+        (milliseconds % (1000 * 60 * 60)) / (1000 * 60)
+      );
+      return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${
+        minutes + "分"
+      }`;
+    },
+  },
+  methods: {
+    async downloadShopCode() {
+      try {
+        const link = document.createElement("a");
+        link.href = this.shopInfo.smallQrcode;
+        const fileName = this.shopInfo.shopName +"店铺码"+ ".png";
+        console.log(fileName)
+        link.setAttribute("download", fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        this.$message.success("下载成功");
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    clearTimer() {
+      console.log("clearTimer");
+      clearInterval(this.timer);
+      this.timer = null;
+    },
+    setTimter(time = 60) {
+      this.timer = setInterval(() => {
+        const showloading = false;
+        this.tbShopTableGet(showloading);
+      }, time * 1000);
+    },
+    //获取店铺信息
+    async getShopInfo() {
+      try {
+        const shopId = localStorage.getItem("shopId");
+        const res = await tbShopInfo(shopId);
+        this.shopInfo = res;
+        console.log(res);
+      } catch (error) {}
+    },
+    // 清台
+    cleanTableHandle(item) {
+      this.$confirm("确定要清台：" + item.name, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        tbShopTable(
+          {
+            ...item,
+            status: "idle",
+            qrcode: item.tableId,
+            shopId: localStorage.getItem("shopId"),
+          },
+          "put"
+        ).then((res) => {
+          this.tbShopTableGet();
+        });
+      });
+    },
+    tableComman(command, item) {
+      if (command == "edit") {
+        return this.$refs.editTable.show(item);
+      }
+      if (command == "del") {
+        return this.delPop(item);
+      }
+    },
+    delPop(item) {
+      this.$confirm("是否删除" + item.name + "台桌", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.delTableHandle([item.id]);
+        })
+        .catch(() => {});
+    },
+    onDiancanClose() {
+      this.tbShopTableGet();
+    },
+    async diancanShow(item, key) {
+      if(key=='isPayOrder'){
+        const canShoukuan=await hasPermission('允许收款')
+      if(!canShoukuan){
+        return 
+      }
+      }
+      const canXiadan=await hasPermission('允许下单')
+      if(!canXiadan){
+        return 
+      }
+
+      //key isAddGoods 加菜
+      //key isPayOrder 结账
+      this.selTable = item;
+      if (this.shopInfo.isTableFee) {
+        //免餐位费
+        this.toInstead({ num: 0, key });
+        // this.$refs.diancan.open(item, key, '');
+        return;
+      }
+      const num = item.useNum || 0;
+      if (item.useNum <= 0) {
+        return this.$refs.refChooseDinersNumber.open();
+      }
+      this.toInstead({ num: num, key });
+      // this.$refs.diancan.open(item, key, num);
+    },
+    toInstead(query) {
+      this.$router.push({
+        path: "/tool/Instead/index",
+        query: {
+          table_name: this.selTable.name,
+          tableId: this.selTable.tableId,
+          useType: this.selTable.useType,
+          maxCapacity: this.selTable.maxCapacity,
+          masterId: this.selTable.masterId,
+          orderId: this.selTable.orderId,
+          ...query,
+        },
+      });
+    },
+    chooseDinersNumberConfirm(num) {
+      this.toInstead({ num: num });
+      // this.$refs.diancan.open(this.selTable, undefined, num);
+    },
+    tabClick() {
+      this.tbShopTableGet();
+    },
+    // 删除桌台
+    async delTableHandle(ids) {
+      try {
+        await tbShopTableDelete(ids);
+        this.tbShopTableGet();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 删除区域
+    async delHandle(ids) {
+      try {
+        await tbShopAreaDelete(ids);
+        this.tabVlaue = "";
+        this.tbShopAreaGet();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 台桌列表
+    async tbShopTableGet(showloading = true) {
+      this.loading = showloading;
+      try {
+        const { content, total } = await tbShopTableGet({
+          shopId: localStorage.getItem("shopId"),
+          areaId: this.tabVlaue,
+        });
+        this.tableList = content;
+        // this.tableList = content.sort((a,b)=>{
+        //   if(a.status=='idle'&&b.status!='idle'){
+        //     return 1
+        //   }else if(a.status!='idle'&&b.status=='idle'){
+        //     return -1
+        //   }
+        // });
+        this.total = total;
+        setTimeout(() => {
+          this.loading = false;
+        }, 300);
+      } catch (error) {
+        this.loading = false;
+        console.log(error);
+      }
+    },
+    // 获取区域
+    async tbShopAreaGet() {
+      try {
+        const { content } = await tbShopAreaGet({
+          shopId: localStorage.getItem("shopId"),
+        });
+        this.tabs = content;
+        this.areaMap = content.reduce((prve, cur) => {
+          prve[cur.id] = cur.name;
+          return prve;
+        }, {});
+        this.tbShopTableGet();
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.el-tabs {
+  margin-bottom: 0;
+}
+</style>
+<style scoped lang="scss">
+.cur-pointer {
+  cursor: pointer;
+}
+.opacity-0 {
+  opacity: 0;
+}
+.icon {
+  margin-left: 10px;
+}
+::v-deep .btn-group .el-button {
+  width: 100%;
+}
+::v-deep .el-dropdown-menu__item {
+  line-height: 36px;
+  padding: 0 20px;
+  min-width: 60px;
+  text-align: center;
+}
+.state {
+  display: flex;
+  align-items: center;
+
+  .dot {
+    $size: 8px;
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+    margin-right: $size;
+  }
+}
+.table_list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  min-height: 150px;
+
+  .empty_wrap {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+  .btn-group {
+    display: flex;
+    gap: 10px;
+  }
+
+  .item {
+    padding: 1px;
+    overflow: hidden;
+    border: 1px solid #ddd;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border-radius: 6px;
+    background-color: #1890ff;
+    max-width: 172px;
+    min-width: 160px;
+    &.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;
+      margin-right: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .box {
+      background-color: #fff;
+      border-radius: 3px 3px 6px 6px;
+    }
+    .bottom {
+      border-top: 1px solid #f7f7fa;
+      padding: 6px 15px;
+    }
+    .top {
+      padding: 10px;
+      background-color: #fff;
+      flex: 1;
+      border-radius: 3px 3px 0 0;
+      .row {
+        display: flex;
+        gap: 10px;
+
+        .tips {
+          font-size: 12px;
+        }
+
+        &.row1 {
+          justify-content: space-between;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .btm {
+      border-top: 1px solid #ddd;
+      background-color: #efefef;
+      display: flex;
+      border-radius: 0 0 6px 6px;
+      .btm_item {
+        flex: 1;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &:nth-child(1) {
+          &::before {
+            content: "";
+            height: 50%;
+            border-right: 1px solid #ddd;
+            position: absolute;
+            top: 25%;
+            right: 0;
+          }
+        }
+
+        .i {
+          color: #666;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/table/table_list.vue b/src/views/table/table_list.vue
index 48b46e6..8d79d82 100644
--- a/src/views/table/table_list.vue
+++ b/src/views/table/table_list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
-      <el-tab-pane label="全部" name=""></el-tab-pane>
+      <el-tab-pane label="全部" name="" />
       <el-tab-pane
         v-for="item in tabs"
         :key="item.id"
@@ -13,24 +13,24 @@
           <i
             class="icon el-icon-edit"
             @click.stop="$refs.addEara.show(item)"
-          ></i>
+          />
           <el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
-            <i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
+            <i slot="reference" class="icon el-icon-delete" @click.stop="" />
           </el-popconfirm>
         </div>
       </el-tab-pane>
     </el-tabs>
     <div class="head-container">
       <div class="filter_wrap">
-        <el-button icon="el-icon-plus" @click="$refs.addEara.show()"
-          >添加区域</el-button
-        >
+        <el-button
+          icon="el-icon-plus"
+          @click="$refs.addEara.show()"
+        >添加区域</el-button>
         <el-button
           type="primary"
           icon="el-icon-plus"
           @click="$refs.addTable.show()"
-          >添加台桌</el-button
-        >
+        >添加台桌</el-button>
         <el-button
           type="primary"
           icon="el-icon-download"
@@ -42,47 +42,45 @@
           type="primary"
           icon="el-icon-download"
           @click="downloadShopCode"
-          >下载店铺码</el-button
-        >
+        >下载店铺码</el-button>
       </div>
     </div>
     <div class="u-flex u-p-b-15 u-font-14">
-      <div class="state u-m-r-24" v-for="(item, key) in status" :key="key">
+      <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>
+        />
         {{ item.label }}
       </div>
     </div>
     <div class="head-container">
-      <div class="table_list" v-loading="loading">
+      <div v-loading="loading" class="table_list">
         <div
-          class="item"
           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">
-                {{ item.name }}</span
-              >
-              <span class="u-font-14 u-line-1"
-                >丨{{ areaMap[item.areaId] || "" }}</span
-              >
+                {{ item.name }}</span>
+              <span
+                class="u-font-14 u-line-1"
+              >丨{{ areaMap[item.areaId] || "" }}</span>
             </div>
             <el-dropdown trigger="click" @command="tableComman($event, item)">
-              <i class="el-icon-more cur-pointer color-fff"></i>
+              <i class="el-icon-more cur-pointer color-fff" />
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="edit">
-                  <i class="i el-icon-edit"></i>
+                  <i class="i el-icon-edit" />
                   <span>编辑</span>
                 </el-dropdown-item>
                 <el-dropdown-item command="del">
-                  <i class="i el-icon-delete"></i>
+                  <i class="i el-icon-delete" />
                   <span>删除</span>
                 </el-dropdown-item>
               </el-dropdown-menu>
@@ -119,36 +117,46 @@
             </div> -->
               <div class="u-font-18 font-600 total-price">
                 <span
-                  class="cur-pointer"
                   v-if="item.status == 'using'"
+                  class="cur-pointer"
                   @click="diancanShow(item, 'isAddGoods')"
                 >
                   ¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
                 </span>
-                <span class="color-fff" v-else>|</span>
+                <span v-else class="color-fff">|</span>
               </div>
               <div class="row btn-group">
                 <template v-if="item.status == 'idle'">
+                  <el-button
+                    type="primary"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                    @click="diancanShow(item, 'subscribe')"
+                  >预约</el-button>
+                </template>
+                <template v-if="item.status == 'subscribe'">
+                  <el-button
+                    type="primary"
+                    :disabled="!item.tableId || item.status === 'closed'"
+                  >已预约</el-button>
+                </template>
+                <template v-if="item.status == 'idle' || item.status == 'subscribe'">
                   <el-button
                     type="primary"
                     :disabled="!item.tableId || item.status === 'closed'"
                     @click="diancanShow(item)"
-                    >点餐</el-button
-                  >
+                  >点餐</el-button>
                 </template>
                 <template v-else>
                   <template v-if="item.status == 'using'">
                     <el-button
                       :disabled="!item.tableId || item.status === 'closed'"
                       @click="diancanShow(item, 'isAddGoods')"
-                      >加菜</el-button
-                    >
+                    >加菜</el-button>
                     <el-button
                       type="danger"
                       :disabled="!item.tableId || item.status === 'closed'"
                       @click="diancanShow(item, 'isPayOrder')"
-                      >结账</el-button
-                    >
+                    >结账</el-button>
                   </template>
                   <template v-else-if="item.status == 'closed'">
                     <el-button type="info" disabled>已关台</el-button>
@@ -156,13 +164,12 @@
                   <template v-else-if="item.status == 'cleaning'">
                     <el-button
                       type="info"
-                      @click="cleanTableHandle(item)"
                       :style="{
                         backgroundColor: status[item.status].type,
                         borderColor: status[item.status].type,
                       }"
-                      >清台</el-button
-                    >
+                      @click="cleanTableHandle(item)"
+                    >清台</el-button>
                   </template>
                   <template v-else>
                     <el-button type="info" disabled>点餐</el-button>
@@ -179,17 +186,17 @@
                   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
                 >
+                <span
+                  class="u-m-t-4 u-font-12 u-m-l-2"
+                >{{ item.useNum || 0 }}/{{ item.maxCapacity }}</span>
               </div>
-              <div class="u-flex" v-if="item.status == 'using'">
+              <div v-if="item.status == 'using'" class="u-flex">
                 <img
                   style="width: 16px; height: 16px; filter: contrast(0.5)"
                   src="@/assets/images/shalou.png"
                   alt=""
-                />
+                >
                 <span class="u-m-t-4 u-font-12">{{
                   item.durationTime | formatTime
                 }}</span>
@@ -198,7 +205,7 @@
           </div>
         </div>
         <div class="empty_wrap">
-          <el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
+          <el-empty v-if="!tableList.length" description="空空如也~" />
         </div>
       </div>
     </div>
@@ -206,9 +213,10 @@
     <!-- 批量添加台桌 -->
     <addTable ref="addTable" @success="tbShopTableGet" />
     <!-- 编辑台桌 -->
-    <table-edit ref="editTable" @success="tbShopTableGet"></table-edit>
-    <downloadTableCode :total="total" ref="downloadTableCode" />
-
+    <table-edit ref="editTable" @success="tbShopTableGet" />
+    <downloadTableCode ref="downloadTableCode" :total="total" />
+    <!-- 预约 -->
+    <subscribe ref="subscribe" @success="tbShopSubscribe" />
     <!-- 点餐 -->
     <!-- <table-diancan ref="diancan" @close="onDiancanClose"></table-diancan> -->
     <!-- 选择人数 -->
@@ -216,191 +224,234 @@
       ref="refChooseDinersNumber"
       :max="selTable.maxCapacity"
       @confirm="chooseDinersNumberConfirm"
-    ></choose-diners-number>
+    />
   </div>
 </template>
 
 <script>
-import addEara from "./components/addEara";
-import addTable from "./components/addTable";
-import tableEdit from "./components/table-edit";
-import downloadTableCode from "./components/downloadTableCode";
-import tableDiancan from "./components/table-diancan.vue";
-import $status from "./status.js";
-import chooseDinersNumber from "./components/table-diancan-components/choose-diners-number.vue";
-import { tbShopInfo } from "@/api/user";
-import { hasPermission } from "@/utils/limits.js";
+import addEara from './components/addEara'
+import addTable from './components/addTable'
+import subscribe from './components/subscribe'
+import tableEdit from './components/table-edit'
+import downloadTableCode from './components/downloadTableCode'
+// import tableDiancan from './components/table-diancan.vue'
+import chooseDinersNumber from './components/table-diancan-components/choose-diners-number.vue'
+import { tbShopInfo } from '@/api/user'
+import { hasPermission } from '@/utils/limits.js'
 
 import {
   tbShopTableGet,
   tbShopAreaGet,
   tbShopAreaDelete,
   tbShopTableDelete,
-  tbShopTable,
-} from "@/api/table";
-import dayjs from "dayjs";
-import { downloadFile } from "@/utils/index";
+  tbShopTable
+} from '@/api/table'
 
 export default {
   components: {
     addEara,
     addTable,
+    subscribe,
     downloadTableCode,
-    tableDiancan,
+    // tableDiancan,
     chooseDinersNumber,
-    tableEdit,
+    tableEdit
+  },
+  filters: {
+    formatTime(milliseconds) {
+      console.log(milliseconds)
+      if (!milliseconds) {
+        return ''
+      }
+      const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24))
+      const hours = Math.floor(
+        (milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+      )
+      const minutes = Math.floor(
+        (milliseconds % (1000 * 60 * 60)) / (1000 * 60)
+      )
+      return `${days ? days + '天' : ''} ${hours ? hours + '时' : ''} ${
+        minutes + '分'
+      }`
+    }
   },
   data() {
     return {
-      tabVlaue: "",
+      tabVlaue: '',
       tabs: [],
       loading: false,
       total: 0,
       tableList: [],
-      status: $status,
-      selTable: "", //当前选中的桌台
+      status: {
+        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)' }
+
+      },
+      selTable: '', // 当前选中的桌台
       areaMap: {},
       shopInfo: {},
-      timer: null,
-    };
+      timer: null
+    }
   },
   beforeDestroy() {
-    this.clearTimer();
-    console.log("beforeDestroy");
+    this.clearTimer()
+    console.log('beforeDestroy')
   },
   mounted() {
-    this.clearTimer();
-    this.setTimter(60);
-    this.tbShopAreaGet();
-    this.getShopInfo();
-  },
-  filters: {
-    formatTime(milliseconds) {
-      console.log(milliseconds);
-      if (!milliseconds) {
-        return "";
-      }
-      const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
-      const hours = Math.floor(
-        (milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
-      );
-      const minutes = Math.floor(
-        (milliseconds % (1000 * 60 * 60)) / (1000 * 60)
-      );
-      return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${
-        minutes + "分"
-      }`;
-    },
+    this.clearTimer()
+    this.setTimter(60)
+    this.tbShopAreaGet()
+    this.getShopInfo()
   },
   methods: {
+    /**
+     * 下载店铺码
+     */
     async downloadShopCode() {
       try {
-        const link = document.createElement("a");
-        link.href = this.shopInfo.smallQrcode;
-        const fileName = this.shopInfo.shopName +"店铺码"+ ".png";
+        const link = document.createElement('a')
+        link.href = this.shopInfo.smallQrcode
+        const fileName = this.shopInfo.shopName + '店铺码' + '.png'
         console.log(fileName)
-        link.setAttribute("download", fileName);
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        this.$message.success("下载成功");
+        link.setAttribute('download', fileName)
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        this.$message.success('下载成功')
       } catch (error) {
-        console.log(error);
+        console.log(error)
       }
     },
+    /**
+     * 清除定时器
+     */
     clearTimer() {
-      console.log("clearTimer");
-      clearInterval(this.timer);
-      this.timer = null;
+      console.log('clearTimer')
+      clearInterval(this.timer)
+      this.timer = null
     },
+    /**
+     * 设置定时器
+     * @param time
+     */
     setTimter(time = 60) {
       this.timer = setInterval(() => {
-        const showloading = false;
-        this.tbShopTableGet(showloading);
-      }, time * 1000);
+        const showloading = false
+        this.tbShopTableGet(showloading)
+      }, time * 1000)
     },
-    //获取店铺信息
+    /**
+     * 获取店铺信息
+     */
     async getShopInfo() {
       try {
-        const shopId = localStorage.getItem("shopId");
-        const res = await tbShopInfo(shopId);
-        this.shopInfo = res;
-        console.log(res);
+        const shopId = localStorage.getItem('shopId')
+        const res = await tbShopInfo(shopId)
+        this.shopInfo = res
+        console.log(res)
+      // eslint-disable-next-line no-empty
       } catch (error) {}
     },
-    // 清台
+    /**
+     * 清台
+     * @param item
+     */
     cleanTableHandle(item) {
-      this.$confirm("确定要清台：" + item.name, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      this.$confirm('确定要清台：' + item.name, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       }).then(() => {
         tbShopTable(
           {
             ...item,
-            status: "idle",
+            status: 'idle',
             qrcode: item.tableId,
-            shopId: localStorage.getItem("shopId"),
+            shopId: localStorage.getItem('shopId')
           },
-          "put"
+          'put'
         ).then((res) => {
-          this.tbShopTableGet();
-        });
-      });
+          this.tbShopTableGet()
+        })
+      })
     },
+
+    /**
+     * 编辑/删除
+     * @param command
+     * @param item
+     */
     tableComman(command, item) {
-      if (command == "edit") {
-        return this.$refs.editTable.show(item);
+      if (command === 'edit') {
+        return this.$refs.editTable.show(item)
       }
-      if (command == "del") {
-        return this.delPop(item);
+      if (command === 'del') {
+        return this.delPop(item)
       }
     },
+    /**
+     * 删除
+     * @param item
+     */
     delPop(item) {
-      this.$confirm("是否删除" + item.name + "台桌", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      this.$confirm('是否删除' + item.name + '台桌', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
         .then(() => {
-          this.delTableHandle([item.id]);
+          this.delTableHandle([item.id])
         })
-        .catch(() => {});
+        .catch(() => {})
     },
+
     onDiancanClose() {
-      this.tbShopTableGet();
+      this.tbShopTableGet()
     },
     async diancanShow(item, key) {
-      if(key=='isPayOrder'){
-        const canShoukuan=await hasPermission('允许收款')
-      if(!canShoukuan){
-        return 
+      if (key === 'isPayOrder') {
+        const canShoukuan = await hasPermission('允许收款')
+        if (!canShoukuan) {
+          return
+        }
       }
+      const canXiadan = await hasPermission('允许下单')
+      if (!canXiadan) {
+        return
       }
-      const canXiadan=await hasPermission('允许下单')
-      if(!canXiadan){
-        return 
+      if (key === 'subscribe') {
+        this.$refs.subscribe.show()
+        return
       }
-
-      //key isAddGoods 加菜
-      //key isPayOrder 结账
-      this.selTable = item;
+      // key isAddGoods 加菜
+      // key isPayOrder 结账
+      this.selTable = item
       if (this.shopInfo.isTableFee) {
-        //免餐位费
-        this.toInstead({ num: 0, key });
+        // 免餐位费
+        this.toInstead({ num: 0, key })
         // this.$refs.diancan.open(item, key, '');
-        return;
+        return
       }
-      const num = item.useNum || 0;
+      const num = item.useNum || 0
       if (item.useNum <= 0) {
-        return this.$refs.refChooseDinersNumber.open();
+        return this.$refs.refChooseDinersNumber.open()
       }
-      this.toInstead({ num: num, key });
+      this.toInstead({ num: num, key })
       // this.$refs.diancan.open(item, key, num);
     },
     toInstead(query) {
       this.$router.push({
-        path: "/tool/Instead/index",
+        path: '/tool/Instead/index',
         query: {
           table_name: this.selTable.name,
           tableId: this.selTable.tableId,
@@ -408,45 +459,51 @@ export default {
           maxCapacity: this.selTable.maxCapacity,
           masterId: this.selTable.masterId,
           orderId: this.selTable.orderId,
-          ...query,
-        },
-      });
+          ...query
+        }
+      })
     },
     chooseDinersNumberConfirm(num) {
-      this.toInstead({ num: num });
+      this.toInstead({ num: num })
       // this.$refs.diancan.open(this.selTable, undefined, num);
     },
     tabClick() {
-      this.tbShopTableGet();
+      this.tbShopTableGet()
     },
-    // 删除桌台
+    /**
+     * 删除桌台
+     * @param ids
+     */
     async delTableHandle(ids) {
       try {
-        await tbShopTableDelete(ids);
-        this.tbShopTableGet();
+        await tbShopTableDelete(ids)
+        this.tbShopTableGet()
       } catch (error) {
-        console.log(error);
+        console.log(error)
       }
     },
-    // 删除区域
+    /**
+     * 删除区域
+     * @param ids
+     */
     async delHandle(ids) {
       try {
-        await tbShopAreaDelete(ids);
-        this.tabVlaue = "";
-        this.tbShopAreaGet();
+        await tbShopAreaDelete(ids)
+        this.tabVlaue = ''
+        this.tbShopAreaGet()
       } catch (error) {
-        console.log(error);
+        console.log(error)
       }
     },
     // 台桌列表
     async tbShopTableGet(showloading = true) {
-      this.loading = showloading;
+      this.loading = showloading
       try {
         const { content, total } = await tbShopTableGet({
-          shopId: localStorage.getItem("shopId"),
-          areaId: this.tabVlaue,
-        });
-        this.tableList = content;
+          shopId: localStorage.getItem('shopId'),
+          areaId: this.tabVlaue
+        })
+        this.tableList = content
         // this.tableList = content.sort((a,b)=>{
         //   if(a.status=='idle'&&b.status!='idle'){
         //     return 1
@@ -454,33 +511,33 @@ export default {
         //     return -1
         //   }
         // });
-        this.total = total;
+        this.total = total
         setTimeout(() => {
-          this.loading = false;
-        }, 300);
+          this.loading = false
+        }, 300)
       } catch (error) {
-        this.loading = false;
-        console.log(error);
+        this.loading = false
+        console.log(error)
       }
     },
     // 获取区域
     async tbShopAreaGet() {
       try {
         const { content } = await tbShopAreaGet({
-          shopId: localStorage.getItem("shopId"),
-        });
-        this.tabs = content;
+          shopId: localStorage.getItem('shopId')
+        })
+        this.tabs = content
         this.areaMap = content.reduce((prve, cur) => {
-          prve[cur.id] = cur.name;
-          return prve;
-        }, {});
-        this.tbShopTableGet();
+          prve[cur.id] = cur.name
+          return prve
+        }, {})
+        this.tbShopTableGet()
       } catch (error) {
-        console.log(error);
+        console.log(error)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style>