import { postIntegralGroupExchangeRecords } from '@/services/request'; import { ModalForm, ProTable } from '@ant-design/pro-components'; import { Button, DatePicker, Space, Tabs, message } from 'antd'; import dayjs from 'dayjs'; import React, { useState } from 'react'; import '../index.less'; interface PointsExchangeRecordsModalProps { setVisible: (visible: boolean) => void; record: any; } // Define a type for the records data type RecordsDataType = { exchangeRecords: any[]; collectedRecords: any[]; pendingRecords: any[]; }; const PointsExchangeRecordsModal: React.FC<PointsExchangeRecordsModalProps> = ({ setVisible, record, }) => { const [activeTab, setActiveTab] = useState('1'); // Separate date ranges for each tab const [exchangeDateRange, setExchangeDateRange] = useState<any[]>([]); const [collectedDateRange, setCollectedDateRange] = useState<any[]>([]); const [pendingDateRange, setPendingDateRange] = useState<any[]>([]); const [loading, setLoading] = useState(false); const [recordsData, setRecordsData] = useState<RecordsDataType>({ exchangeRecords: [], // 兑换记录 collectedRecords: [], // 已领取积分 pendingRecords: [], // 待领取积分 }); // Function to fetch records data from API with date parameters const fetchRecordsData = async (params: { startTime?: string | null; endTime?: string | null; tabKey: string; }) => { try { setLoading(true); const { startTime, endTime, tabKey } = params; // Prepare API request data const requestDto: any = { id: Number(record.id), }; // Add date range if provided if (startTime) requestDto.startTime = startTime; if (endTime) requestDto.endTime = endTime; console.log(`Fetching data for tab: ${tabKey}`); // Use postIntegralGroupExchangeRecords instead of postIntegralUserExchangeRecords const response = await postIntegralGroupExchangeRecords({ data: requestDto, }); if (response && response.data) { // Update only the data for the active tab setRecordsData((prevData: RecordsDataType) => { const newData = { ...prevData }; switch (tabKey) { case '1': // 兑换记录 newData.exchangeRecords = response.data.exchangeRecords || []; break; case '2': // 已领取积分 newData.collectedRecords = response.data.collectedRecords || []; break; case '3': // 待领取积分 newData.pendingRecords = response.data.pendingRecords || []; break; } return newData; }); } else { message.error('获取积分记录失败'); } } catch (error) { console.error(error); message.error('获取积分记录失败'); } finally { setLoading(false); } }; // Initial data fetch for all tabs React.useEffect(() => { const loadAllTabs = async () => { try { setLoading(true); const requestDto = { id: Number(record.id), }; const response = await postIntegralGroupExchangeRecords({ data: requestDto, }); if (response && response.data) { setRecordsData({ exchangeRecords: response.data.exchangeRecords || [], collectedRecords: response.data.collectedRecords || [], pendingRecords: response.data.pendingRecords || [], }); } else { message.error('获取积分记录失败'); } } catch (error) { console.error(error); message.error('获取积分记录失败'); } finally { setLoading(false); } }; loadAllTabs(); }, [record.id]); const handleTabChange = (key: string) => { setActiveTab(key); }; // Get current date range based on active tab const getCurrentDateRange = () => { switch (activeTab) { case '1': return exchangeDateRange; case '2': return collectedDateRange; case '3': return pendingDateRange; default: return []; } }; // Set date range for current tab const handleDateRangeChange = (dates: any) => { switch (activeTab) { case '1': setExchangeDateRange(dates); break; case '2': setCollectedDateRange(dates); break; case '3': setPendingDateRange(dates); break; } }; const handleSearchClick = () => { const dateRange = getCurrentDateRange(); // Only get the dates that are actually selected const startTime = dateRange?.[0] ? dayjs(dateRange[0]).format('YYYY-MM-DD') : null; const endTime = dateRange?.[1] ? dayjs(dateRange[1]).format('YYYY-MM-DD') : null; fetchRecordsData({ startTime, endTime, tabKey: activeTab, }); }; const handleClearClick = () => { // Clear date range for current tab switch (activeTab) { case '1': setExchangeDateRange([]); break; case '2': setCollectedDateRange([]); break; case '3': setPendingDateRange([]); break; } // Fetch data without date filters fetchRecordsData({ startTime: null, endTime: null, tabKey: activeTab, }); }; // 兑换记录表格列定义 const exchangeColumns = [ { title: '兑换日期', dataIndex: 'createTime', key: 'createTime', width: 30, }, { title: '扣除积分', dataIndex: 'delta', key: 'delta', width: 20, }, { title: '操作人', dataIndex: 'createByName', key: 'createByName', width: 20, }, { title: '积分用途', dataIndex: 'remark', key: 'remark', width: 100, }, ]; // 已领取积分表格列定义 const collectedColumns = [ { title: '订单号', dataIndex: 'sourceId', key: 'sourceId', }, { title: '领取积分', dataIndex: 'delta', key: 'delta', }, { title: '领取日期', dataIndex: 'createTime', key: 'createTime', }, ]; // 待领取积分表格列定义 const pendingColumns = [ { title: '订单号', dataIndex: 'sourceId', key: 'sourceId', }, { title: '领取积分', dataIndex: 'delta', key: 'delta', }, { title: '过期日期', dataIndex: 'createTime', key: 'createTime', }, ]; // Render date picker and search buttons for current tab const renderDateRangePicker = () => { return ( <Space style={{ marginBottom: 16 }}> <DatePicker.RangePicker value={getCurrentDateRange()} onChange={handleDateRangeChange} allowEmpty={[true, true]} /> <Button type="primary" onClick={handleSearchClick}> 搜索 </Button> <Button onClick={handleClearClick}>重置</Button> </Space> ); }; return ( <div className="prepaid-index"> <ModalForm width={1000} open title="积分兑换记录" submitter={false} modalProps={{ destroyOnClose: true, onCancel: () => { setVisible(false); }, }} > <Tabs activeKey={activeTab} onChange={handleTabChange}> <Tabs.TabPane tab="兑换记录" key="1"> {renderDateRangePicker()} <ProTable headerTitle={false} search={false} options={false} pagination={{ pageSize: 10, }} loading={loading && activeTab === '1'} dataSource={recordsData.exchangeRecords} columns={exchangeColumns} rowKey="id" /> </Tabs.TabPane> <Tabs.TabPane tab="已领取积分" key="2"> {renderDateRangePicker()} <ProTable headerTitle={false} search={false} options={false} pagination={{ pageSize: 10, }} loading={loading && activeTab === '2'} dataSource={recordsData.collectedRecords} columns={collectedColumns} rowKey="id" /> </Tabs.TabPane> <Tabs.TabPane tab="待领取积分" key="3"> {renderDateRangePicker()} <ProTable headerTitle={false} search={false} options={false} pagination={{ pageSize: 10, }} loading={loading && activeTab === '3'} dataSource={recordsData.pendingRecords} columns={pendingColumns} rowKey="id" /> </Tabs.TabPane> </Tabs> </ModalForm> </div> ); }; export default PointsExchangeRecordsModal;