优化网站导航模块

modules/views/bak/cashier/components/cashier.vue

@@ -0,0 +1,190 @@
+<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>