|
|
@@ -1,11 +1,24 @@
|
|
|
import { RootState } from "@/store";
|
|
|
-import { Input, DatePicker, Table, Button } from "antd";
|
|
|
-import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
|
+import { Input, DatePicker, Table, Button, Select } from "antd";
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
|
|
import styles from "./index.module.scss";
|
|
|
-import { getExchangeListAPI } from "@/store/action/A5Exchange";
|
|
|
+import {
|
|
|
+ getExchangeListAPI,
|
|
|
+ getExchangeListAPIFu,
|
|
|
+ handleCorrectChangeAPI,
|
|
|
+} from "@/store/action/A5Exchange";
|
|
|
import { ExchangeTableType } from "@/types";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import ExportJsonExcel from "js-export-excel";
|
|
|
+import dayjs from "dayjs";
|
|
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
|
|
@@ -14,9 +27,13 @@ function A5Exchange() {
|
|
|
|
|
|
const pageNumRef = useRef(1);
|
|
|
const pagePageRef = useRef(10);
|
|
|
+
|
|
|
+ const results = useSelector((state: RootState) => state.A5Exchange.tableInfo);
|
|
|
+
|
|
|
// 筛选和分页
|
|
|
const [tableSelect, setTableSelect] = useState({
|
|
|
searchKey: "",
|
|
|
+ isSend: '' as any,
|
|
|
pageSize: 10,
|
|
|
pageNum: 1,
|
|
|
startTime: "",
|
|
|
@@ -42,12 +59,76 @@ function A5Exchange() {
|
|
|
setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
|
|
|
};
|
|
|
|
|
|
+ // 点击导出
|
|
|
+ const deriveFu = useCallback(async () => {
|
|
|
+ if (results.list.length === 0) {
|
|
|
+ return MessageFu.warning("当前搜索条件没有数据!");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 全部数据
|
|
|
+ const data = {
|
|
|
+ ...tableSelect,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 99999999,
|
|
|
+ };
|
|
|
+
|
|
|
+ const res = await getExchangeListAPIFu(data);
|
|
|
+
|
|
|
+ if (res.code === 0) {
|
|
|
+ const name = `兑换记录-${dayjs(new Date()).format("YYYYMMDD")}`;
|
|
|
+ const resData: ExchangeTableType[] = res.data.records;
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ fileName: name,
|
|
|
+ datas: [
|
|
|
+ {
|
|
|
+ sheetData: resData.map((v, i) => {
|
|
|
+ return {
|
|
|
+ ...v,
|
|
|
+ index: i + 1,
|
|
|
+ isSend: v.isSend === 1 ? "是" : "否",
|
|
|
+ };
|
|
|
+ }),
|
|
|
+ sheetName: name,
|
|
|
+ sheetFilter: [
|
|
|
+ "index",
|
|
|
+ "creatorName",
|
|
|
+ "createTime",
|
|
|
+ "prizeName",
|
|
|
+ "score",
|
|
|
+ "name",
|
|
|
+ "phone",
|
|
|
+ "description",
|
|
|
+ "isSend"
|
|
|
+ ],
|
|
|
+ sheetHeader: [
|
|
|
+ "序号",
|
|
|
+ "用户名",
|
|
|
+ "兑换日期",
|
|
|
+ "兑换奖品",
|
|
|
+ "积分记录",
|
|
|
+ "称呼",
|
|
|
+ "联系方式",
|
|
|
+ "地址和留言",
|
|
|
+ "是否寄出",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ const toExcel = new ExportJsonExcel(option); //new
|
|
|
+ toExcel.saveExcel(); //保存
|
|
|
+ }
|
|
|
+ }, [results.list.length, tableSelect]);
|
|
|
+
|
|
|
const [inputKey, setInputKey] = useState(1);
|
|
|
// 重置
|
|
|
const resetFu = () => {
|
|
|
setInputKey(Date.now());
|
|
|
+ setSelectKey(null)
|
|
|
setTableSelect({
|
|
|
searchKey: "",
|
|
|
+ isSend: '',
|
|
|
pageSize: 10,
|
|
|
pageNum: 1,
|
|
|
startTime: "",
|
|
|
@@ -55,6 +136,20 @@ function A5Exchange() {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
+ const handleCorrectChange = async (value: ExchangeTableType, id: number) => {
|
|
|
+ const data = {
|
|
|
+ isSend: value,
|
|
|
+ id: id
|
|
|
+ }
|
|
|
+ // 切换是否寄出状态
|
|
|
+ const res: any = await handleCorrectChangeAPI(data);
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success("更新成功!");
|
|
|
+ dispatch(getExchangeListAPI(tableSelect));
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
pageNumRef.current = tableSelect.pageNum;
|
|
|
pagePageRef.current = tableSelect.pageSize;
|
|
|
@@ -70,7 +165,18 @@ function A5Exchange() {
|
|
|
setTableSelect({ ...tableSelect, pageNum, pageSize });
|
|
|
};
|
|
|
|
|
|
- const results = useSelector((state: RootState) => state.A5Exchange.tableInfo);
|
|
|
+ const [selectKey, setSelectKey] = useState(null);
|
|
|
+
|
|
|
+ // 类型选择发生改变
|
|
|
+ const typeChange = useCallback(
|
|
|
+ (value: any) => {
|
|
|
+ setSelectKey(value);
|
|
|
+ // 筛选获得字段
|
|
|
+ // setTableSelect({ ...tableSelect, isEnabled: value, pageNum: 1 });
|
|
|
+ setTableSelect({ ...tableSelect,isSend: value, pageNum: 1 });
|
|
|
+ },
|
|
|
+ [tableSelect]
|
|
|
+ );
|
|
|
|
|
|
const columns = useMemo(() => {
|
|
|
return [
|
|
|
@@ -99,13 +205,21 @@ function A5Exchange() {
|
|
|
{
|
|
|
title: "称呼",
|
|
|
render: (item: ExchangeTableType) => (
|
|
|
- <div>{item.prizeName === "公益合伙人电子证书" || item.name === "" ? "-" : item.name}</div>
|
|
|
+ <div>
|
|
|
+ {item.prizeName === "公益合伙人电子证书" || item.name === ""
|
|
|
+ ? "-"
|
|
|
+ : item.name}
|
|
|
+ </div>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
title: "联系方式",
|
|
|
render: (item: ExchangeTableType) => (
|
|
|
- <div>{item.prizeName === "公益合伙人电子证书" || item.phone === "" ? "-" : item.phone}</div>
|
|
|
+ <div>
|
|
|
+ {item.prizeName === "公益合伙人电子证书" || item.phone === ""
|
|
|
+ ? "-"
|
|
|
+ : item.phone}
|
|
|
+ </div>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
@@ -118,8 +232,27 @@ function A5Exchange() {
|
|
|
</div>
|
|
|
),
|
|
|
},
|
|
|
+ {
|
|
|
+ title: "是否寄出",
|
|
|
+ render: (item: ExchangeTableType) => {
|
|
|
+ return (
|
|
|
+ <Select
|
|
|
+ style={{ width: 100 }}
|
|
|
+ defaultValue={item.isSend}
|
|
|
+ // defaultValue={item.answer.correct ? item.answer.correct : ""}
|
|
|
+ onChange={(value: any) => {
|
|
|
+ handleCorrectChange(value, item.id);
|
|
|
+ }}
|
|
|
+ options={[
|
|
|
+ { value: 1, label: "是" },
|
|
|
+ { value: 0, label: "否" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
];
|
|
|
- }, []);
|
|
|
+ }, [handleCorrectChange]);
|
|
|
|
|
|
return (
|
|
|
<div className={styles.A5Exchange}>
|
|
|
@@ -141,6 +274,19 @@ function A5Exchange() {
|
|
|
<span>日期:</span>
|
|
|
<RangePicker key={inputKey} onChange={timeChange} />
|
|
|
</div>
|
|
|
+ <div className="row">
|
|
|
+ <span>是否寄出:</span>
|
|
|
+ <Select
|
|
|
+ style={{ width: 120 }}
|
|
|
+ value={selectKey}
|
|
|
+ onChange={typeChange}
|
|
|
+ placeholder="请选择"
|
|
|
+ options={[
|
|
|
+ { value: 0, label: "否" },
|
|
|
+ { value: 1, label: "是" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<Button
|
|
|
className="reSetBtn"
|
|
|
size="small"
|
|
|
@@ -151,6 +297,17 @@ function A5Exchange() {
|
|
|
>
|
|
|
重置
|
|
|
</Button>
|
|
|
+ <Button
|
|
|
+ className="reSetBtn"
|
|
|
+ style={{ marginLeft: "10px" }}
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ onClick={() => {
|
|
|
+ deriveFu();
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 导出
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|