mp-vue/src/views/shop/shopDealerOrder2/components/search.vue

<!-- 搜索表单 -->
<template>
  <a-space :size="10" style="flex-wrap: wrap">
    <a-input-search
      allow-clear
      placeholder="客户名称|订单编号"
      style="width: 240px"
      v-model:value="where.keywords"
      @search="reload"
    />
    <a-button type="dashed" @click="handleExport">导出xls</a-button>
  </a-space>
</template>

<script lang="ts" setup>
  import type { GradeParam } from '@/api/user/grade/model';
  import { ref, watch } from 'vue';
  import { utils, writeFile } from 'xlsx';
  import { message } from 'ant-design-vue';
  import { ShopDealerCapital } from '@/api/shop/shopDealerCapital/model';
  import { getTenantId } from '@/utils/domain';
  import useSearch from '@/utils/use-search';
  import {
    ShopDealerOrder,
    ShopDealerOrderParam
  } from '@/api/sdy/sdyDealerOrder/model';
  import { pageShopDealerOrder } from '@/api/shop/shopDealerOrder';

  const props = withDefaults(
    defineProps<{
      // 选中的角色
      selection?: [];
    }>(),
    {}
  );

  const emit = defineEmits<{
    (e: 'search', where?: GradeParam): void;
    (e: 'add'): void;
    (e: 'remove'): void;
    (e: 'batchMove'): void;
  }>();

  const reload = () => {
    emit('search', where);
  };

  // 表单数据
  const { where } = useSearch<ShopDealerOrderParam>({
    keywords: '',
    userId: undefined,
    orderNo: undefined,
    limit: 5000
  });

  const list = ref<ShopDealerCapital[]>([]);

  // 导出
  const handleExport = async () => {
    const array: (string | number)[][] = [
      [
        '客户名称',
        '业务员',
        '订单编号',
        '结算电量',
        '换算成度',
        '结算单价',
        '结算金额',
        '税费',
        '实发金额',
        '一级佣金30%',
        '一级佣金收益',
        '二级佣金10%',
        '二级佣金收益',
        '三级佣金60%',
        '三级佣金收益',
        '月份',
        '创建时间',
        '结算时间',
        '租户ID'
      ]
    ];

    // 按搜索结果导出
    await pageShopDealerOrder(where)
      .then((data) => {
        list.value = data?.list || [];
        list.value?.forEach((d: ShopDealerOrder) => {
          array.push([
            `${d.title}`,
            `${d.nickname}(${d.userId})`,
            `${d.orderNo}`,
            `${d.orderPrice}`,
            `${d.degreePrice}`,
            `${d.price}`,
            `${d.settledPrice}`,
            `${d.rate}`,
            `${d.payPrice}`,
            `${d.firstNickname}(${d.firstUserId})`,
            `${d.firstMoney}`,
            `${d.secondNickname}(${d.secondUserId})`,
            `${d.secondMoney}`,
            `${d.thirdNickname}(${d.thirdUserId})`,
            `${d.thirdMoney}`,
            `${d.month}`,
            `${d.createTime}`,
            `${d.settleTime}`,
            `${d.tenantId}`
          ]);
        });
        const sheetName = `bak_shop_dealer_order_${getTenantId()}`;
        const workbook = {
          SheetNames: [sheetName],
          Sheets: {}
        };
        const sheet = utils.aoa_to_sheet(array);
        workbook.Sheets[sheetName] = sheet;
        // 设置列宽
        sheet['!cols'] = [
          { wch: 10 },
          { wch: 20 },
          { wch: 20 },
          { wch: 15 },
          { wch: 10 },
          { wch: 10 },
          { wch: 20 }
        ];
        message.loading('正在导出...');
        setTimeout(() => {
          writeFile(workbook, `${sheetName}.xlsx`);
        }, 1000);
      })
      .catch((msg) => {
        message.error(msg);
      })
      .finally(() => {});
  };

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