优化网站导航模块

modules/views/bak/export/components/search.vue

@@ -0,0 +1,198 @@
+<!-- 搜索表单 -->
+<template>
+  <div class="search">
+    <a-space class="flex items-center" :size="10" style="flex-wrap: wrap">
+      <span class="text-gray-400">付款状态</span>
+      <a-radio-group v-model:value="where.payStatus" @change="search">
+        <a-radio-button :value="0">未付款</a-radio-button>
+        <a-radio-button :value="1">已付款</a-radio-button>
+      </a-radio-group>
+      <span class="text-gray-400">付款方式</span>
+      <a-radio-group v-model:value="where.payType" @change="search">
+        <a-radio-button :value="4">现金</a-radio-button>
+        <a-radio-button :value="0">余额支付</a-radio-button>
+        <a-radio-button :value="1">微信支付</a-radio-button>
+        <a-radio-button :value="2">会员卡</a-radio-button>
+      </a-radio-group>
+      <span class="text-gray-400">订单状态</span>
+      <a-radio-group v-model:value="where.orderStatus" @change="search">
+        <a-radio-button :value="0">未使用</a-radio-button>
+        <a-radio-button :value="1">已完成</a-radio-button>
+        <a-radio-button :value="2">已取消</a-radio-button>
+        <a-radio-button :value="4">退款中</a-radio-button>
+        <a-radio-button :value="5">退款被拒</a-radio-button>
+        <a-radio-button :value="6">退款成功</a-radio-button>
+      </a-radio-group>
+      <span class="text-gray-400">开票状态</span>
+      <a-radio-group v-model:value="where.isInvoice" @change="search">
+        <a-radio-button :value="0">未开票</a-radio-button>
+        <a-radio-button :value="1">已开票</a-radio-button>
+        <a-radio-button :value="2">不能开票</a-radio-button>
+      </a-radio-group>
+    </a-space>
+    <a-space :size="10" class="mt-5" style="flex-wrap: wrap">
+      <SelectMerchant
+        :placeholder="`选择场馆`"
+        class="input-item"
+        v-model:value="where.merchantName"
+        @done="chooseMerchantId"
+      />
+      <a-range-picker
+        v-model:value="dateRange"
+        @change="search"
+        value-format="YYYY-MM-DD"
+        class="ele-fluid"
+      />
+      <a-input-search
+        allow-clear
+        placeholder="请输入订单号|编号|手机号"
+        v-model:value="where.keywords"
+        @pressEnter="search"
+        @search="search"
+        style="width: 380px"
+      />
+      <a-button @click="reset">重置</a-button>
+      <a-button class="ele-btn-icon" :disabled="loading" @click="handleExport">
+        <template #icon>
+          <download-outlined />
+        </template>
+        <span>导出订单</span>
+      </a-button>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import useSearch from '@/utils/use-search';
+  import { ref, watch } from 'vue';
+  import { OrderGoodsParam } from '@/api/order/goods/model';
+  import { utils, writeFile } from 'xlsx';
+  import { message } from 'ant-design-vue';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { listOrder } from '@/api/booking/order';
+  import { Order, OrderParam } from '@/api/shop/order/model';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: OrderGoodsParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'advanced'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<OrderParam>({
+    type: 1,
+    createTimeStart: undefined,
+    createTimeEnd: undefined,
+    categoryId: undefined,
+    week: undefined,
+    keywords: undefined
+  });
+  // 请求状态
+  const loading = ref(false);
+  // 日期范围选择
+  const dateRange = ref<[string, string]>(['', '']);
+  const orders = ref<Order[] | any[]>();
+  const xlsFileName = ref<string>();
+
+  /* 搜索 */
+  const search = () => {
+    const [d1, d2] = dateRange.value ?? [];
+    xlsFileName.value = `${d1}至${d2}`;
+    where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
+    where.createTimeEnd = d2 ? d2 + ' 00:00:00' : undefined;
+    emit('search', {
+      ...where
+    });
+  };
+
+  const chooseMerchantId = (data: Merchant) => {
+    where.merchantId = data.merchantId;
+    where.merchantName = data.merchantName;
+    search();
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  // 导出
+  const handleExport = async () => {
+    loading.value = true;
+    const array: (string | number)[][] = [
+      [
+        '订单号',
+        '订单编号',
+        '姓名',
+        '电话号码',
+        '订单信息',
+        '消费金额',
+        '实付金额',
+        '下单日期'
+      ]
+    ];
+    await listOrder(where)
+      .then((list) => {
+        orders.value = list;
+        orders.value?.forEach((d: Order) => {
+          array.push([
+            `${d.orderId}`,
+            `${d.orderNo}`,
+            `${d.realName}`,
+            `${d.phone}`,
+            `${d.comments}`,
+            `${d.totalPrice}`,
+            `${d.payPrice}`,
+            `${d.createTime}`
+          ]);
+        });
+        const sheetName = `订单数据导出`;
+        const workbook = {
+          SheetNames: [sheetName],
+          Sheets: {}
+        };
+        const sheet = utils.aoa_to_sheet(array);
+        workbook.Sheets[sheetName] = sheet;
+        // 设置列宽
+        sheet['!cols'] = [
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 10 },
+          { wch: 20 },
+          { wch: 40 },
+          { wch: 10 }
+        ];
+        message.loading('正在导出...');
+        setTimeout(() => {
+          writeFile(
+            workbook,
+            `${
+              where.createTimeEnd ? xlsFileName.value + '_' : ''
+            }${sheetName}.xlsx`
+          );
+          loading.value = false;
+        }, 2000);
+      })
+      .catch((msg) => {
+        message.error(msg);
+        loading.value = false;
+      })
+      .finally(() => {});
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>