重新整理仓库

src/views/bszx/bszxPay/components/search.vue

@@ -0,0 +1,235 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-radio-group v-model:value="branchId" @change="onBranchId">
+      <a-radio-button :value="1">初中部</a-radio-button>
+      <a-radio-button :value="2">高中部</a-radio-button>
+    </a-radio-group>
+    <a-select
+      v-if="branchId"
+      show-search
+      v-model:value="where.gradeName"
+      style="width: 240px"
+      placeholder="选择年级"
+      :options="gradeList"
+      @change="onGrade"
+    ></a-select>
+    <a-select
+      v-if="where.gradeName"
+      show-search
+      v-model:value="where.className"
+      style="width: 240px"
+      placeholder="选择年级"
+      :options="classList"
+      @change="onClass"
+    ></a-select>
+    <a-input-search
+      allow-clear
+      placeholder="请输入关键词"
+      style="width: 220px"
+      v-model:value="where.keywords"
+      @search="reload"
+    />
+    <a-range-picker
+      v-model:value="dateRange"
+      @change="search"
+      value-format="YYYY-MM-DD"
+    />
+    <a-button @click="handleExport">导出</a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from 'vue';
+import {utils, writeFile} from 'xlsx';
+import dayjs from 'dayjs';
+import {message} from 'ant-design-vue';
+import useSearch from "@/utils/use-search";
+import {BszxPayParam} from "@/api/bszx/bszxPay/model";
+import {BszxBm} from "@/api/bszx/bszxBm/model";
+import {listBszxPay} from "@/api/bszx/bszxPay";
+import {BszxClassParam} from "@/api/bszx/bszxClass/model";
+import {listBszxGrade} from "@/api/bszx/bszxGrade";
+import {listBszxClass} from "@/api/bszx/bszxClass";
+
+const props = withDefaults(
+  defineProps<{
+    // 选中的角色
+    selection?: [];
+  }>(),
+  {}
+);
+
+const emit = defineEmits<{
+  (e: 'search', where?: BszxPayParam): void;
+  (e: 'add'): void;
+  (e: 'remove'): void;
+  (e: 'batchMove'): void;
+}>();
+
+// 表单数据
+const {where} = useSearch<BszxPayParam>({
+  id: undefined,
+  keywords: '',
+  gradeName: undefined,
+  className: undefined,
+  createTimeStart: undefined,
+  createTimeEnd: undefined,
+  userId: undefined
+});
+
+const reload = () => {
+  emit('search', where);
+};
+
+/* 搜索 */
+const search = () => {
+  const [d1, d2] = dateRange.value ?? [];
+  where.createTimeStart = d1 ? d1 + ' 00:00:00' : undefined;
+  where.createTimeEnd = d2 ? d2 + ' 23:59:59' : undefined;
+  emit('search', {
+    ...where
+  });
+};
+
+
+const dateRange = ref<[string, string]>(['', '']);
+// 变量
+const loading = ref(false);
+const bmList = ref<BszxBm[]>([])
+const xlsFileName = ref<string>();
+const branchId = ref<number>();
+const gradeId = ref<number>();
+const gradeList = ref<BszxClassParam[]>([]);
+const classList = ref<BszxClassParam[]>([]);
+
+
+const getGradeList = () => {
+  listBszxGrade({branch: branchId.value}).then(res => {
+    gradeList.value = res.map(d => {
+      d.value = Number(d.id);
+      d.label = d.name;
+      return d;
+    });
+  })
+};
+
+const getClassList = () => {
+  listBszxClass({gradeId: gradeId.value}).then(res => {
+    classList.value = res.map(d => {
+      d.value = Number(d.id);
+      d.label = d.name;
+      return d;
+    });
+  })
+}
+
+const onGrade = (gradeName: number, item: any) => {
+  where.gradeName = item.name;
+  if (gradeName) {
+    console.log(item)
+    gradeId.value = item.id;
+    getClassList();
+  }
+  emit('search', where);
+}
+
+const onBranchId = () => {
+  getGradeList();
+}
+
+const onClass = (classId, item) => {
+  console.log(classId);
+  where.className = item.name;
+  reload();
+}
+
+// 导出
+const handleExport = async () => {
+  loading.value = true;
+  const array: (string | number)[][] = [
+    [
+      '订单编号',
+      '姓名',
+      '手机号码',
+      '捐款金额',
+      '性别',
+      '年级',
+      '班级',
+      '居住地址',
+      '工作单位',
+      '职务',
+      '捐款时间'
+    ]
+  ];
+
+  // 按搜索结果导出
+  where.sceneType = 'Content';
+  await listBszxPay(where)
+    .then((list) => {
+      bmList.value = list;
+      list?.forEach((d: BszxBm) => {
+        array.push([
+          `${d.orderNo}`,
+          `${d.name}`,
+          `${d.mobile}`,
+          `${d.price}`,
+          `${d.sex == 1 ? '男' : ''}${d.sex == 2 ? '女' : '-'}`,
+          `${d.gradeName ? d.gradeName : '-'}`,
+          `${d.className ? d.className : '-'}`,
+          `${d.address ? d.address : '-'}`,
+          `${d.workUnit ? d.workUnit : '-'}`,
+          `${d.position ? d.position : '-'}`,
+          `${d.createTime}`
+        ]);
+      });
+      const sheetName = `导出捐款记录${dayjs(new Date()).format('YYYYMMDD')}`;
+      const workbook = {
+        SheetNames: [sheetName],
+        Sheets: {}
+      };
+      const sheet = utils.aoa_to_sheet(array);
+      workbook.Sheets[sheetName] = sheet;
+      // 设置列宽
+      sheet['!cols'] = [
+        {wch: 10},
+        {wch: 40},
+        {wch: 20},
+        {wch: 20},
+        {wch: 60},
+        {wch: 15},
+        {wch: 10},
+        {wch: 10},
+        {wch: 20},
+        {wch: 10},
+        {wch: 20}
+      ];
+      message.loading('正在导出...');
+      setTimeout(() => {
+        writeFile(
+          workbook,
+          `${
+            where.createTimeEnd ? xlsFileName.value + '_' : ''
+          }${sheetName}.xlsx`
+        );
+        loading.value = false;
+      }, 1000);
+    })
+    .catch((msg) => {
+      message.error(msg);
+      loading.value = false;
+    })
+    .finally(() => {
+    });
+
+};
+
+getGradeList();
+
+watch(
+  () => props.totalPriceAmount,
+  (totalPriceAmount) => {
+    console.log(totalPriceAmount, 'totalPriceAmount')
+  }
+);
+</script>