yxe-admin/src/views/baocan/export/components/search.vue

<!-- 搜索表单 -->
<template>
  <div class="search">
    <a-space :size="10" style="flex-wrap: wrap">
      <SelectOrganization
        :placeholder="`请选择部门`"
        v-model:value="organizationName"
        @done="chooseOrganization"
      />
      <!--      <a-date-picker-->
      <!--        placeholder="预定日期"-->
      <!--        value-format="YYYY-MM-DD"-->
      <!--        v-model:value="where.deliveryTime"-->
      <!--        @change="search"-->
      <!--      />-->
      <a-range-picker
        v-model:value="dateRange"
        @change="search"
        value-format="YYYY-MM-DD"
        class="ele-fluid"
      />
      <a-button type="primary" @click="reset">统计</a-button>
      <a-button type="primary" class="ele-btn-icon" @click="handleExport">
        <template #icon>
          <download-outlined />
        </template>
        <span>导出</span>
      </a-button>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
  import {
    PlusOutlined,
    DeleteOutlined,
    DownloadOutlined
  } from '@ant-design/icons-vue';
  import useSearch from '@/utils/use-search';
  import { ref, watch } from 'vue';
  import { Organization } from '@/api/system/organization/model';
  import { BcExportParam } from '@/api/apps/bc/export/model';
  import { toDateString } from 'ele-admin-pro';
  import ExcelJS from 'exceljs';

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

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

  // 表单数据
  const { where, resetFields } = useSearch<BcExportParam>({
    exportId: undefined,
    keywords: undefined,
    organizationId: undefined
  });
  // 下来选项
  // const categoryId = ref<number>(0);
  const post = ref<number>(0);
  const sign = ref<number>(0);
  const noSign = ref<number>(0);
  const organizationName = ref<string>();
  const exportTitle = `贵港资源报餐人员统计`;
  // 请求状态
  // const loading = ref(true);
  // const deliveryStatus = ref<number>(0);
  // const gear = ref<number>(0);
  // 预定日期
  // const deliveryTime = ref<Dayjs>();
  // 日期范围选择
  const dateRange = ref<[string, string]>([
    toDateString(new Date(), 'YYYY-MM-dd 00:00:00'),
    toDateString(new Date(), 'YYYY-MM-dd 00:00:00')
  ]);

  /* 搜索 */
  const search = () => {
    const [d1, d2] = dateRange.value ?? [];
    where.deliveryTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
    where.deliveryTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
    // where.deliveryTime = where.deliveryTime
    //   ? where.deliveryTime + ' 00:00:00'
    //   : undefined;
    emit('search', {
      ...where
    });
  };

  const chooseOrganization = (data: Organization) => {
    organizationName.value = data.organizationName;
    where.organizationId = data.organizationId;
    // 查询全部
    if (data.organizationId == 52) {
      where.organizationId = undefined;
    }
    search();
  };

  /*  重置 */
  const reset = () => {
    resetFields();
    post.value = 0;
    sign.value = 0;
    noSign.value = 0;
    search();
  };

  // 导出
  const handleExport = async () => {
    if (!props.selection?.length) {
      emit('done');
      return;
    }
    // 创建工作簿
    const workbook = new ExcelJS.Workbook();
    // 添加工作表
    const sheet = workbook.addWorksheet(exportTitle, {
      headerFooter: { firstHeader: 'Hello Exceljs' }
    });
    const style: ExcelJS.Style = {
      alignment: { horizontal: 'center' }
    };
    sheet.columns = [
      { header: '部门', key: 'organizationName', style, width: 30 },
      { header: '编号', key: 'userId', style, width: 20 },
      { header: '姓名', key: 'nickname', style, width: 20 },
      { header: '早餐报餐次数', key: 'breakfastPost', style, width: 20 },
      { header: '早餐签到次数', key: 'breakfastSign', style, width: 20 },
      { header: '午餐报餐次数', key: 'lunchPost', style, width: 20 },
      { header: '午餐签到次数', key: 'lunchSign', style, width: 20 },
      { header: '晚餐报餐次数', key: 'dinnerPost', style, width: 20 },
      { header: '晚餐签到次数', key: 'dinnerSign', style, width: 20 },
      { header: '消费金额', key: 'expendMoney', style, width: 20 }
    ];
    sheet.addRows(props.selection);
    sheet.insertRow(1, [
      `贵港资源${toDateString(
        dateRange.value[0],
        'yyyy-MM-dd'
      )} 至 ${toDateString(dateRange.value[1], 'yyyy-MM-dd')}报餐人员统计`
    ]);
    const a1 = sheet.getCell(1, 1);

    a1.style = {
      alignment: { horizontal: 'center' },
      font: {
        bold: true,
        size: 20
      }
    };
    sheet.mergeCells('A1:J1');
    // sheet.getRow(2).fill = {
    //   type: 'pattern',
    //   pattern: 'solid',
    //   fgColor: { argb: '92d050' },
    //   bgColor: { argb: '92d050' }
    // };
    // 写入 buffer
    const buffer = await workbook.xlsx.writeBuffer();
    let blob = new Blob([buffer]);
    var aEle = document.createElement('a'); // 创建a标签
    aEle.download = exportTitle + '.xlsx'; // 设置下载文件的文件名
    aEle.href = URL.createObjectURL(blob);
    aEle.click(); // 设置点击事件
  };

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

  // count();
</script>