guofu-admin/modules/views/bak/cashier/components/cashier.vue

<template>
  <a-card
    :title="`收银员：${loginUser?.realName}`"
    :bordered="false"
    :body-style="{ minHeight: '60vh', width: '380px', padding: '0' }"
    :head-style="{ className: 'bg-gray-500' }"
  >
    <template #extra>
      <a-button danger @click="removeAll" size="small">整单取消</a-button>
    </template>
    <div class="goods-list overflow-x-hidden px-3 h-[600px]">
      <a-empty v-if="cashier?.totalNums === 0" :image="simpleImage" />
      <a-spin :spinning="spinning">
        <template v-for="(item, index) in cashier?.cashiers" :key="index">
          <div class="goods-item py-4 flex">
            <div class="goods-image" v-if="item.image">
              <a-avatar :src="item.image" shape="square" :size="42" />
            </div>
            <div class="goods-info w-full ml-2">
              <div class="goods-bar flex justify-between">
                <div class="goods-name flex-1">{{ item.name }}</div>
              </div>
              <div class="spec text-gray-400">{{ item.spec }}</div>
              <div class="goods-price flex justify-between items-center">
                <div class="flex">
                  <div class="price text-red-500">￥{{ item.price }}</div>
                  <div class="total-num ml-5 text-gray-400"
                    >x {{ item.cartNum }}</div
                  >
                </div>
                <div class="add flex items-center text-gray-500">
                  <MinusCircleOutlined class="text-xl" @click="subNum(item)" />
                  <div class="block text-center px-3">{{ item.cartNum }}</div>
                  <PlusCircleOutlined class="text-xl" @click="addNum(item)" />
                </div>
              </div>
            </div>
            <div class="total-nums"> </div>
          </div>
          <a-divider dashed />
        </template>
      </a-spin>
    </div>
    <template #actions>
      <div class="flex flex-col">
        <div class="text-left pb-4 pl-4 text-gray-500"
          >共计 {{ cashier.totalNums }} 件，已优惠：￥0.00
        </div>
        <div class="flex justify-between px-2">
          <a-button size="large" class="w-full mx-1" @click="getListByGroup"
            >取单</a-button
          >
          <a-button size="large" class="w-full mx-1" @click="onPack"
            >挂单</a-button
          >
          <a-button
            type="primary"
            class="w-full mx-1"
            size="large"
            @click="onPay"
            >收款￥{{ formatNumber(cashier.totalPrice) }}
          </a-button>
        </div>
      </div>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
  import {
    DeleteOutlined,
    PlusCircleOutlined,
    MinusCircleOutlined,
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import { ref, watch, createVNode } from 'vue';
  import { Cashier, CashierVo } from '@/api/shop/cashier/model';
  import { User } from '@/api/system/user/model';
  import { formatNumber } from 'ele-admin-pro/es';
  import {
    subCartNum,
    addCartNum,
    removeBatchCashier,
    removeCashier,
    packCashier
  } from '@/api/shop/cashier';
  import { Empty, Modal, message } from 'ant-design-vue';
  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  const props = withDefaults(
    defineProps<{
      value?: string;
      placeholder?: string;
      loginUser?: User;
      cashier?: CashierVo;
      count?: number;
      spinning?: boolean;
    }>(),
    {
      placeholder: undefined
    }
  );

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'reload'): void;
    (e: 'group'): void;
    (e: 'pay'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  const cashiers = ref<Cashier[]>([]);

  /* 打开编辑弹窗 */
  const onPay = () => {
    emit('pay');
  };

  const subNum = (row: Cashier) => {
    if (row.cartNum === 1) {
      Modal.confirm({
        title: '提示',
        content: '确定要删除该商品吗?',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        onOk: () => {
          const hide = message.loading('请求中..', 0);
          removeCashier(row?.id)
            .then((msg) => {
              hide();
              message.success(msg);
              emit('reload');
            })
            .catch((e) => {
              hide();
              message.error(e.message);
            });
        }
      });
      return false;
    }
    subCartNum(row).then(() => {
      emit('reload');
    });
  };

  const addNum = (row: Cashier) => {
    addCartNum(row).then(() => {
      emit('reload');
    });
  };

  const removeAll = () => {
    const ids = props.cashier?.cashiers?.map((d) => d.id);
    if (ids) {
      removeBatchCashier(ids)
        .then(() => {})
        .finally(() => {
          emit('reload');
        });
    }
  };

  // 取单
  const getListByGroup = () => {
    emit('group');
  };

  // 挂单
  const onPack = () => {
    cashiers.value =
      props.cashier?.cashiers?.map((d) => {
        return {
          id: d.id,
          groupId: Number(d.groupId) + 1
        };
      }) || [];
    if (cashiers.value.length === 0) {
      return false;
    }
    packCashier(cashiers.value).then((res) => {
      emit('reload');
    });
  };

  watch(
    () => props.count,
    () => {}
  );
</script>