cashier-web/src/views/tool/Instead/components/control.vue

<template>
  <div class="controls">
    <div class="input-number" :class="{ disabled: canEdit }">
      <div class="reduce" @click="changeCartNumber(-1)">
        <el-icon><Minus /></el-icon>
      </div>
      <span class="text">{{ carts.selCart.number || 1 }}</span>
      <div class="add" @click="changeCartNumber(1)">
        <el-icon><Plus /></el-icon>
      </div>
    </div>

    <el-button
      v-for="(item, index) in controls"
      :key="index"
      size="large"
      :disabled="btnDisabled(item)"
      @click="controlsClick(item)"
    >
      {{ returnLabel(item) }}
    </el-button>
  </div>
</template>

<script setup>
const number = ref(1);
import { useCartsStore } from "@/store/modules/carts";
const carts = useCartsStore();

const controls = ref([
  // { label: "规格", key: "", disabled: false, per: "sku" },
  { label: "赠送", key: "is_gift", disabled: false, per: "gift" },
  { label: "打包", key: "is_pack", disabled: false, per: "pack" },
  { label: "删除", key: "del", disabled: false, per: "del" },
  { label: "转桌", key: "rottable", disabled: false, per: "rottable" },
  // { label: "存单", key: "", disabled: false, per: "save" },
  // { label: "取单", key: "", disabled: false },
  { label: "单品备注", key: "one-note", disabled: false, per: "one-note" },
  { label: "整单备注", key: "all-note", disabled: false, per: "all-note" },
  { label: "退菜", key: "return", disabled: false, per: "return" },
  { label: "免厨打", key: "is_print", disabled: false, per: "print" },
  { label: "单品改价", key: "changePriceClick", disabled: false, per: "cart" },
  { label: "等叫", key: "is_wait_call", disabled: false, per: "cart" },
  // { label: "整单等叫", key: "", disabled: false, per: "all-wating" },
]);

const emits = defineEmits(["noteClick", "changePriceClick", "packClick", "return", "rottable"]);
function controlsClick(item) {
  switch (item.key) {
    case "is_gift":
      carts.updateTag("is_gift", carts.selCart.is_gift ? 0 : 1);
      break;
    case "is_pack":
      if (carts.selCart.number * 1 == 1) {
        carts.updateTag("pack_number", carts.selCart.pack_number * 1 == 1 ? 0 : 1);
        return;
      }
      emits("packClick", carts.selCart.pack_number, carts.selCart.number);
      break;
    case "is_print":
      carts.updateTag("is_print", carts.selCart.is_print ? 0 : 1);
      break;
    case "del":
      carts.del(carts.selCart);
      break;
    case "changePriceClick":
      emits("changePriceClick", carts.selCart);
      break;
    case "one-note":
      emits("noteClick", true);
      break;
    case "rottable":
      emits("rottable", carts.selCart);
      break;
    case "all-note":
      emits("noteClick", false);
      break;
    case "is_wait_call":
      carts.updateTag("is_wait_call", carts.selCart.is_wait_call ? 0 : 1);
      break;
    case "all-wating":
      carts.allWating();
    case "return":
      emits("return", carts.selCart);
      break;
  }
}
const perList = computed(() => {
  // if (!carts.oldOrder.id) {
  //   return ["all-wating", "all-note", "rottable"];
  // }
  let arr = [];
  if (!carts.selCart.id) {
    arr = ["all-wating", "all-note"];
  }
  if (carts.isCanSelectGroup) {
    arr = ["all-wating", "all-note", "del", "pack", "gift", "print", "one-note"];
  }
  if (carts.selCart.id) {
    if (carts.isOldOrder) {
      arr = ["return"];
    }
    arr = ["cart", "del", "pack", "gift", "save", "one-note", "print", "all-note", "all-wating"];
  }
  if (carts.oldOrder.id) {
    arr.push("rottable");
  }
  return arr;
});
const canEdit = computed(() => {
  return !perList.value.includes("cart");
});

function btnDisabled(item) {
  const canClick = perList.value.includes(item.per);
  if (item.key == "return") {
    return !canClick || carts.selCart.returnNum >= carts.selCart.number;
  } else {
    return !canClick;
  }
}
function returnLabel(item) {
  if (item.key == "is_gift") {
    return carts.selCart.is_gift ? "取消赠送" : "赠送";
  }
  if (item.key == "is_pack") {
    return carts.selCart.pack_number * 1 > 0 ? "取消打包" : "打包";
  }
  if (item.key == "is_print") {
    return carts.selCart.is_print ? "免厨打" : "打印";
  }
  if (item.key == "is_wait_call") {
    return carts.selCart.is_wait_call ? "取消等叫" : "等叫";
  }
  return item.label;
}
function changeCartNumber(step) {
  if (perList.value.includes("cart")) {
    carts.changeNumber(step, carts.selCart);
  }
}
</script>

<style scoped lang="scss">
$gap: 10px;
.controls {
  display: flex;
  height: 100%;
  flex-direction: column;
  width: 106px;
  padding: 14px 10px;
  background-color: #f7f7fa;
}
.el-button + .el-button {
  margin-top: $gap;
  margin-left: 0;
}
.input-number {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  margin-bottom: $gap;
  cursor: pointer;
  .reduce,
  .text,
  .add {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
  }
  .text {
    height: 48px;
    font-size: 30px;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
  }
  .reduce {
  }
  .add {
  }
}
.disabled {
  cursor: not-allowed;
}
</style>