management/src/views/table/components/table-diancan-components/choose-table-master.vue

<template>
  <div class="select_desk">
    <el-dialog width="410px" title="桌台号/取餐号" :visible.sync="show">
      <div class="select_desk_dialog u-p-t-20 u-p-b-20">
        <div class="nav">
          <div
            class="li"
            :class="type === 0 ? 'lion' : ''"
            @click="changeType(0)"
          >
            桌台号
          </div>
          <div
            class="li"
            :class="type === 1 ? 'lion' : ''"
            @click="changeType(1)"
          >
            自定义取餐号
          </div>
        </div>
        <template v-if="type === 0">
          <el-select
            class="inputs"
            v-model="selTableId"
            placeholder="请选择桌位"
          >
            <el-option
              v-for="item in tableList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <div class="u-flex u-row-between ">
                <span>{{ item.name }}</span>
                <span :class="['tags',item.status]">
                {{ status[item.status] ? status[item.status].label : "" }}

                </span>
              </div>
            </el-option>
          </el-select>
        </template>
        <template v-else>
          <key-board isCanEmpty v-model="masterId"></key-board>
        </template>

        <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 { tbShopTableGet } from "@/api/table";
import keyBoard from "../keyboard.vue";
import $status from "../../status.js";

export default {
  components: { keyBoard },
  data() {
    return {
      masterId: "",
      //0 台桌 ,1 取餐号
      type: 0,
      show: false,
      hasOpen: false,
      total: 0,
      loading: false,
      tableList: [],
      selTableId: "",
      status:$status

    };
  },
  methods: {
    confirm() {
      const item = this.tableList.find((v) => v.id == this.selTableId);
      this.$emit("confirm", item);
      this.close();
    },
    // 台桌列表
    async tbShopTableGet() {
      this.loading = true;
      try {
        const { content, total } = await tbShopTableGet({
          shopId: localStorage.getItem("shopId"),
          areaId: this.tabVlaue,
        });
        this.tableList = content.filter((v) => v.tableId);
        this.total = total;
        this.hasOpen = true;
        setTimeout(() => {
          this.loading = false;
        }, 300);
      } catch (error) {
        this.loading = false;
        console.log(error);
      }
    },
    changeType(type) {
      this.type = type;
    },
    open() {
      this.show = true;
      if (!this.hasOpen) {
        this.tbShopTableGet();
      }
    },
    close() {
      this.show = false;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep.el-button {
  padding: 12px 20px;
}
::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>