优化网站导航模块

src/views/shop/order/components/search.vue

@@ -1,43 +1,75 @@
 <!-- 搜索表单 -->
 <template>
-  <a-space :size="10" style="flex-wrap: wrap">
-    <SelectMerchantDown
-      :placeholder="`选择店铺`"
-      class="input-item"
-      v-model:value="where.merchantCode"
-      @change="search"
-    />
-    <a-input-search
-      allow-clear
-      v-model:value="where.keywords"
-      placeholder="请输入关键词"
-      @search="search"
-      @pressEnter="search"
-    />
-    <!--    <a-button @click="getCode">生成支付二维码</a-button>-->
-    <a-button @click="reset">重置</a-button>
-  </a-space>
-  <ele-modal
-    :width="500"
-    :visible="showQrcode"
-    :maskClosable="false"
-    title="使用微信扫一扫完成支付"
-    :body-style="{ paddingBottom: '28px' }"
-    @cancel="closeQrcode"
-    @ok="closeQrcode"
-  >
-    <div class="qrcode">
-      <ele-qr-code-svg v-if="text" :value="text" :size="200" />
-      <div class="ele-text-secondary">使用微信扫一扫完成支付</div>
-    </div>
-  </ele-modal>
+  <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 { ref, watch } from 'vue';
   import useSearch from '@/utils/use-search';
-  import { OrderParam } from '@/api/shop/order/model';
-  import { getNativeCode } from '@/api/system/payment';
+  import { ref, watch } from 'vue';
+  import { utils, writeFile } from 'xlsx';
+  import { message } from 'ant-design-vue';
+  import { Merchant } from '@/api/shop/merchant/model';
+  import { listOrder } from '@/api/shop/order';
+  import { Order, OrderParam } from '@/api/shop/order/model';
 
   const props = withDefaults(
     defineProps<{
@@ -51,17 +83,40 @@
     (e: 'search', where?: OrderParam): void;
     (e: 'add'): void;
     (e: 'remove'): void;
-    (e: 'batchMove'): void;
+    (e: 'advanced'): void;
   }>();
 
   // 表单数据
   const { where, resetFields } = useSearch<OrderParam>({
-    keywords: ''
+    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 = () => {
-    emit('search', where);
+    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();
   };
 
   /*  重置 */
@@ -70,19 +125,69 @@
     search();
   };
 
-  // 二维码内容
-  const text = ref('');
-  const showQrcode = ref(false);
-
-  const closeQrcode = () => {
-    showQrcode.value = !showQrcode.value;
-  };
-
-  const getCode = () => {
-    getNativeCode({}).then((data) => {
-      text.value = String(data);
-      showQrcode.value = true;
-    });
+  // 导出
+  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(
@@ -90,13 +195,3 @@
     () => {}
   );
 </script>
-
-<style lang="less" scoped>
-  .qrcode {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    padding: 40px 0;
-  }
-</style>