fix: 修改积分兑换弹窗样式

boyang
1 parent 379c80fa
Showing 8 changed files with 908 additions and 55 deletions
src/pages/Prepaid/components/PointsExchangeModal.tsx
src/pages/Prepaid/components/PointsExchangeRecordsModal.tsx
src/pages/ResearchGroup/components/PointsExchangeModal.tsx
src/pages/ResearchGroup/components/PointsExchangeRecordsModal.tsx
src/pages/ResearchGroup/constant.tsx
src/pages/ResearchGroup/index.tsx
src/services/definition.ts
src/services/request.ts
@@ -5,7 +5,7 @@ import {
   ProFormTextArea,
 } from '@ant-design/pro-components';
 import { Form, Input, message } from 'antd';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import '../index.less';
  
 interface PointsExchangeModalProps {
@@ -28,6 +28,28 @@ const PointsExchangeModal: React.FC&lt;PointsExchangeModalProps&gt; = ({
   const formRef = useRef<ProFormInstance>();
   const uid = userInfoObj?.uid;
   const userName = userInfoObj?.nickname || userInfoObj?.realName || '';
+  const [accountPoints, setAccountPoints] = useState<number>(0);
+
+  useEffect(() => {
+    if (userInfoObj && userInfoObj.delta) {
+      setAccountPoints(Number(userInfoObj.delta) || 0);
+    }
+  }, [userInfoObj]);
+
+  // Validate that delta is not greater than available points
+  const validateDelta = (rule: any, value: string) => {
+    const deltaValue = Number(value);
+    if (isNaN(deltaValue)) {
+      return Promise.reject('请输入有效的积分数值');
+    }
+    if (deltaValue <= 0) {
+      return Promise.reject('兑换积分必须大于0');
+    }
+    if (deltaValue > accountPoints) {
+      return Promise.reject('兑换积分不能大于账户积分');
+    }
+    return Promise.resolve();
+  };
  
   return (
     <div className="prepaid-index">
@@ -61,6 +83,7 @@ const PointsExchangeModal: React.FC&lt;PointsExchangeModalProps&gt; = ({
                 id: Number(uid), // 使用用户的uid作为id参数
                 delta: values.delta, // 将delta设为负数
                 remark: values.remark, // 兑换说明
+                relationEntityType: 'USER', // 关联实体类型
                 createByName: userName, // 使用昵称或真实姓名作为createByName
               },
             });
@@ -79,7 +102,10 @@ const PointsExchangeModal: React.FC&lt;PointsExchangeModalProps&gt; = ({
         <Form.Item
           label="兑换积分"
           name="delta"
-          rules={[{ required: true, message: '请输入兑换积分' }]}
+          rules={[
+            { required: true, message: '请输入兑换积分' },
+            { validator: validateDelta },
+          ]}
         >
           <Input style={{ height: '30px' }} placeholder="请输入兑换积分数量" />
         </Form.Item>
 import { postIntegralUserExchangeRecords } from '@/services';
 import { formatDateTime } from '@/utils';
-import { Empty, Modal, Table, Tabs } from 'antd';
+import { Button, DatePicker, Empty, Modal, Space, Table, Tabs } from 'antd';
 import React, { useEffect, useState } from 'react';
 import '../index.less';
  
@@ -43,26 +43,71 @@ const PointsExchangeRecordsModal: React.FC&lt;PointsExchangeRecordsModalProps&gt; = ({
     pendingRecords: [],
   });
  
+  // Add date range state for each tab
+  const [exchangeStartTime, setExchangeStartTime] = useState<string | null>(
+    null,
+  );
+  const [exchangeEndTime, setExchangeEndTime] = useState<string | null>(null);
+  const [collectedStartTime, setCollectedStartTime] = useState<string | null>(
+    null,
+  );
+  const [collectedEndTime, setCollectedEndTime] = useState<string | null>(null);
+  const [pendingStartTime, setPendingStartTime] = useState<string | null>(null);
+  const [pendingEndTime, setPendingEndTime] = useState<string | null>(null);
+
   const uid = userInfoObj?.uid;
   const phone = userInfoObj?.phone;
  
-  // Function to fetch records data from API
-  const fetchRecordsData = async () => {
+  // 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 requestData: any = {
+        id: Number(uid),
+        phone: phone,
+      };
+
+      // Add date range if provided
+      if (startTime) requestData.startTime = startTime;
+      if (endTime) requestData.endTime = endTime;
+
       const response = await postIntegralUserExchangeRecords({
-        data: {
-          id: Number(uid),
-          phone: phone,
-        },
+        data: requestData,
       });
  
       if (response && response.data) {
-        setRecordsData({
-          exchangeRecords: response.data.exchangeRecords || [],
-          collectedRecords: response.data.collectedRecords || [],
-          pendingRecords: response.data.pendingRecords || [],
-        });
+        // Update only the data for the active tab if tabKey is provided
+        if (tabKey) {
+          setRecordsData((prevData) => {
+            const newData = { ...prevData };
+
+            if (tabKey === '1') {
+              newData.exchangeRecords = response.data.exchangeRecords || [];
+            } else if (tabKey === '2') {
+              newData.collectedRecords = response.data.collectedRecords || [];
+            } else if (tabKey === '3') {
+              newData.pendingRecords = response.data.pendingRecords || [];
+            }
+
+            return newData;
+          });
+        } else {
+          // Update all data if no specific tab is targeted
+          setRecordsData({
+            exchangeRecords: response.data.exchangeRecords || [],
+            collectedRecords: response.data.collectedRecords || [],
+            pendingRecords: response.data.pendingRecords || [],
+          });
+        }
       }
     } catch (error) {
       console.error('Failed to fetch exchange records:', error);
@@ -77,26 +122,30 @@ const PointsExchangeRecordsModal: React.FC&lt;PointsExchangeRecordsModalProps&gt; = ({
       fetchRecordsData();
     }
   }, [uid, phone]);
+
   // Exchange records columns
   const exchangeRecordsColumns = [
     {
       title: '兑换日期',
       dataIndex: 'createTime',
       key: 'createTime',
+      width: 160,
       render: (text: string) => formatDateTime(text),
     },
     {
       title: '扣除积分',
       dataIndex: 'delta',
       key: 'delta',
+      width: 100,
       render: (delta: number) => (
-        <span style={{ color: delta < 0 ? 'red' : 'green' }}>{delta}</span>
+        <span style={{ color: delta < 0 ? 'green' : 'red' }}>{delta}</span>
       ),
     },
     {
       title: '操作人',
       dataIndex: 'createByName',
       key: 'createByName',
+      width: 100,
       render: (text: string | null) => text || '-',
     },
     {
@@ -161,54 +210,151 @@ const PointsExchangeRecordsModal: React.FC&lt;PointsExchangeRecordsModalProps&gt; = ({
       key: '1',
       label: '兑换记录',
       children: (
-        <Table
-          columns={exchangeRecordsColumns}
-          dataSource={recordsData.exchangeRecords.map((item, index) => ({
-            ...item,
-            key: `exchange-${index}`,
-          }))}
-          pagination={{ pageSize: 5 }}
-          loading={loading && activeTab === '1'}
-          locale={{
-            emptyText: <Empty description="暂无兑换记录" />,
-          }}
-        />
+        <>
+          <div
+            style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}
+          >
+            <span>兑换日期：</span>
+            <Space>
+              <DatePicker
+                placeholder="开始日期"
+                onChange={(date, dateString) =>
+                  setExchangeStartTime(dateString)
+                }
+                style={{ width: 150 }}
+              />
+              <DatePicker
+                placeholder="结束日期"
+                onChange={(date, dateString) => setExchangeEndTime(dateString)}
+                style={{ width: 150 }}
+              />
+              <Button
+                type="primary"
+                onClick={() =>
+                  fetchRecordsData({
+                    startTime: exchangeStartTime,
+                    endTime: exchangeEndTime,
+                    tabKey: '1',
+                  })
+                }
+              >
+                查询
+              </Button>
+            </Space>
+          </div>
+          <Table
+            columns={exchangeRecordsColumns}
+            dataSource={recordsData.exchangeRecords.map((item, index) => ({
+              ...item,
+              key: `exchange-${index}`,
+            }))}
+            pagination={{ pageSize: 5 }}
+            loading={loading && activeTab === '1'}
+            locale={{
+              emptyText: <Empty description="暂无兑换记录" />,
+            }}
+          />
+        </>
       ),
     },
     {
       key: '2',
       label: '已领取积分',
       children: (
-        <Table
-          columns={collectedRecordsColumns}
-          dataSource={recordsData.collectedRecords.map((item, index) => ({
-            ...item,
-            key: `collected-${index}`,
-          }))}
-          pagination={{ pageSize: 5 }}
-          loading={loading && activeTab === '2'}
-          locale={{
-            emptyText: <Empty description="暂无已领取积分记录" />,
-          }}
-        />
+        <>
+          <div
+            style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}
+          >
+            <span>领取日期：</span>
+            <Space>
+              <DatePicker
+                placeholder="开始日期"
+                onChange={(date, dateString) =>
+                  setCollectedStartTime(dateString)
+                }
+                style={{ width: 150 }}
+              />
+              <DatePicker
+                placeholder="结束日期"
+                onChange={(date, dateString) => setCollectedEndTime(dateString)}
+                style={{ width: 150 }}
+              />
+              <Button
+                type="primary"
+                onClick={() =>
+                  fetchRecordsData({
+                    startTime: collectedStartTime,
+                    endTime: collectedEndTime,
+                    tabKey: '2',
+                  })
+                }
+              >
+                查询
+              </Button>
+            </Space>
+          </div>
+          <Table
+            columns={collectedRecordsColumns}
+            dataSource={recordsData.collectedRecords.map((item, index) => ({
+              ...item,
+              key: `collected-${index}`,
+            }))}
+            pagination={{ pageSize: 5 }}
+            loading={loading && activeTab === '2'}
+            locale={{
+              emptyText: <Empty description="暂无已领取积分记录" />,
+            }}
+          />
+        </>
       ),
     },
     {
       key: '3',
       label: '待领取积分',
       children: (
-        <Table
-          columns={pendingRecordsColumns}
-          dataSource={recordsData.pendingRecords.map((item, index) => ({
-            ...item,
-            key: `pending-${index}`,
-          }))}
-          pagination={{ pageSize: 5 }}
-          loading={loading && activeTab === '3'}
-          locale={{
-            emptyText: <Empty description="暂无待领取积分记录" />,
-          }}
-        />
+        <>
+          <div
+            style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}
+          >
+            <span>过期日期：</span>
+            <Space>
+              <DatePicker
+                placeholder="开始日期"
+                onChange={(date, dateString) => setPendingStartTime(dateString)}
+                style={{ width: 150 }}
+              />
+              <DatePicker
+                placeholder="结束日期"
+                onChange={(date, dateString) => setPendingEndTime(dateString)}
+                style={{ width: 150 }}
+              />
+              <Button
+                type="primary"
+                onClick={() =>
+                  fetchRecordsData({
+                    startTime: pendingStartTime,
+                    endTime: pendingEndTime,
+                    tabKey: '3',
+                  })
+                }
+              >
+                查询
+              </Button>
+            </Space>
+          </div>
+          <Table
+            columns={pendingRecordsColumns}
+            dataSource={recordsData.pendingRecords.map((item, index) => ({
+              ...item,
+              key: `pending-${index}`,
+            }))}
+            pagination={{ pageSize: 5 }}
+            loading={loading && activeTab === '3'}
+            locale={{
+              emptyText: <Empty description="暂无待领取积分记录" />,
+            }}
+          />
+        </>
       ),
     },
   ];
@@ -217,7 +363,7 @@ const PointsExchangeRecordsModal: React.FC&lt;PointsExchangeRecordsModalProps&gt; = ({
     <Modal
       open={true}
       title="积分兑换记录"
-      width={800}
+      width={1000}
       onCancel={() => {
         setVisible(false);
         onClose();
+import { postIntegralExchangeIntegral } from '@/services/request';
+import { getUserInfo } from '@/utils';
+import {
+  ModalForm,
+  ProFormInstance,
+  ProFormTextArea,
+} from '@ant-design/pro-components';
+import { Form, Input, message } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import '../index.less';
+
+interface PointsExchangeModalProps {
+  setVisible: (visible: boolean) => void;
+  record: any;
+  onClose: () => void;
+}
+const userInfo = getUserInfo();
+const PointsExchangeModal: React.FC<PointsExchangeModalProps> = ({
+  setVisible,
+  record,
+  onClose,
+}) => {
+  const [form] = Form.useForm<{ delta: string; remark: string }>();
+  const formRef = useRef<ProFormInstance>();
+  const [accountPoints, setAccountPoints] = useState<number>(0);
+
+  // Get account points from record
+  useEffect(() => {
+    if (record && record.delta) {
+      setAccountPoints(Number(record.delta) || 0);
+    }
+  }, [record]);
+
+  // Validate that delta is not greater than available points
+  const validateDelta = (rule: any, value: string) => {
+    const deltaValue = Number(value);
+    if (isNaN(deltaValue)) {
+      return Promise.reject('请输入有效的积分数值');
+    }
+    if (deltaValue <= 0) {
+      return Promise.reject('兑换积分必须大于0');
+    }
+    if (deltaValue > accountPoints) {
+      return Promise.reject('兑换积分不能大于账户积分');
+    }
+    return Promise.resolve();
+  };
+
+  return (
+    <div className="prepaid-index">
+      <ModalForm<{
+        delta: string;
+        remark: string;
+      }>
+        width={600}
+        open
+        title="确认兑换"
+        form={form}
+        formRef={formRef}
+        autoFocusFirstInput
+        submitter={{
+          searchConfig: {
+            submitText: '确认兑换',
+            resetText: '取消',
+          },
+        }}
+        modalProps={{
+          destroyOnClose: true,
+          onCancel: () => {
+            setVisible(false);
+          },
+        }}
+        onFinish={async (values) => {
+          try {
+            // 调用积分兑换API
+            await postIntegralExchangeIntegral({
+              data: {
+                id: Number(record.id),
+                delta: Number(values.delta),
+                remark: values.remark,
+                relationEntityType: 'RESEARCH_GROUP',
+                createByName: userInfo?.username,
+              },
+            });
+
+            message.success('积分兑换成功');
+            setVisible(false);
+            onClose();
+            return true;
+          } catch (error) {
+            console.error(error);
+            return false;
+          }
+        }}
+        onOpenChange={setVisible}
+      >
+        <Form.Item
+          label="兑换积分"
+          name="delta"
+          rules={[
+            { required: true, message: '请输入兑换积分' },
+            { validator: validateDelta },
+          ]}
+        >
+          <Input style={{ height: '30px' }} placeholder="请输入兑换积分数量" />
+        </Form.Item>
+
+        <Form.Item
+          label="兑换说明"
+          name="remark"
+          rules={[{ required: true, message: '请输入兑换说明' }]}
+        >
+          <ProFormTextArea
+            style={{ height: '100px' }}
+            placeholder="请输入兑换说明"
+          />
+        </Form.Item>
+      </ModalForm>
+    </div>
+  );
+};
+
+export default PointsExchangeModal;
+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;
@@ -55,6 +55,27 @@ export const RESEARCH_GROUP_COLUMNS = [
     hideInSearch: true,
   },
   {
+    title: '账户积分',
+    dataIndex: 'delta',
+    key: 'delta',
+    valueType: 'number',
+    hideInSearch: true,
+  },
+  {
+    title: '待领取积分',
+    dataIndex: 'pendingDelta',
+    key: 'pendingDelta',
+    valueType: 'number',
+    hideInSearch: true,
+  },
+  {
+    title: '已扣除积分',
+    dataIndex: 'deleteDelta',
+    key: 'deleteDelta',
+    valueType: 'number',
+    hideInSearch: true,
+  },
+  {
     title: '状态',
     dataIndex: 'statusText',
     key: 'statusText',
@@ -224,11 +245,11 @@ export const RESEARCH_GROUP_MEMBER_REQUEST_COLUMNS = [
     valueEnum: {
       ADD_MEMBER: {
         text: '新增成员',
-        status: 'ADD_MEMBER'
+        status: 'ADD_MEMBER',
       },
       ADD_ACCOUNT: {
         text: '新增课题组',
-        status: 'ADD_ACCOUNT'
+        status: 'ADD_ACCOUNT',
       },
     },
     hideInTable: true,
@@ -29,6 +29,8 @@ import {
 import React, { useRef, useState } from 'react';
 import AuditModal from './components/AuditModal';
 import ImportModal from './components/ImportModal';
+import PointsExchangeModal from './components/PointsExchangeModal';
+import PointsExchangeRecordsModal from './components/PointsExchangeRecordsModal';
 import ResearchGroupAddModal from './components/ResearchGroupAddModal';
 import ResearchGroupMemberRequestAddModal from './components/ResearchGroupMemberRequestAddModal';
 import {
@@ -60,6 +62,13 @@ const PrepaidPage = () =&gt; {
   const [accountInfoLoading, setAccountInfoLoading] = useState(false);
   const [perms, setPerms] = useState<string[]>([]);
   const [optRecordId, setOptRecordId] = useState<any>(null);
+  const [pointsExchangeModalVisible, setPointsExchangeModalVisible] =
+    useState<boolean>(false);
+  const [
+    pointsExchangeRecordsModalVisible,
+    setPointsExchangeRecordsModalVisible,
+  ] = useState<boolean>(false);
+  const [currentRecord, setCurrentRecord] = useState<any>(null);
  
   const reloadResearchGroupTable = () => {
     researchGroupActionRef.current?.reload();
@@ -306,9 +315,39 @@ const PrepaidPage = () =&gt; {
       valueType: 'option',
       key: 'option',
       fixed: 'right',
-      width: 120,
+      width: 240,
       render: (text, record) => {
         let btns = [];
+
+        // Add Points Exchange button if there are accounts
+        btns.push(
+          <Button
+            className="p-0"
+            key="points-exchange"
+            type="link"
+            onClick={() => {
+              setCurrentRecord(record);
+              setPointsExchangeModalVisible(true);
+            }}
+          >
+            积分兑换
+          </Button>,
+        );
+
+        btns.push(
+          <Button
+            className="p-0"
+            key="points-records"
+            type="link"
+            onClick={() => {
+              setCurrentRecord(record);
+              setPointsExchangeRecordsModalVisible(true);
+            }}
+          >
+            积分兑换记录
+          </Button>,
+        );
+
         if (perms?.includes('modify')) {
           btns.push(
             <Button
@@ -814,6 +853,24 @@ const PrepaidPage = () =&gt; {
           }}
         />
       )}
+
+      {pointsExchangeModalVisible && currentRecord && (
+        <PointsExchangeModal
+          setVisible={setPointsExchangeModalVisible}
+          record={currentRecord}
+          onClose={() => {
+            reloadResearchGroupTable();
+          }}
+        />
+      )}
+
+      {pointsExchangeRecordsModalVisible && currentRecord && (
+        <PointsExchangeRecordsModal
+          setVisible={setPointsExchangeRecordsModalVisible}
+          record={currentRecord}
+          onClose={() => {}}
+        />
+      )}
     </div>
   );
 };
@@ -1526,6 +1526,7 @@ export interface ExchangeIntegralDto {
   delta?: number;
   /** @format int64 */
   id?: number;
+  relationEntityType?: string;
   remark?: string;
 }
  
@@ -1540,6 +1541,8 @@ export interface ExchangeRecordsRequestDto {
   current?: number;
   /** @format int32 */
   end?: number;
+  /** @format date-time */
+  endTime?: string;
   /** @format int32 */
   id?: number;
   /** @format int32 */
@@ -1547,6 +1550,8 @@ export interface ExchangeRecordsRequestDto {
   phone?: string;
   /** @format int32 */
   start?: number;
+  /** @format date-time */
+  startTime?: string;
   /** @format int32 */
   total?: number;
 }
@@ -1555,6 +1560,31 @@ export interface FilePathDto {
   url?: string;
 }
  
+export interface GroupExchangeRecordsRequestDto {
+  createByName?: string;
+  createByNameLike?: string;
+  /** @format date-time */
+  createTimeGe?: string;
+  /** @format date-time */
+  createTimeLe?: string;
+  /** @format int32 */
+  current?: number;
+  /** @format int32 */
+  end?: number;
+  /** @format date-time */
+  endTime?: string;
+  /** @format int64 */
+  id?: number;
+  /** @format int32 */
+  pageSize?: number;
+  /** @format int32 */
+  start?: number;
+  /** @format date-time */
+  startTime?: string;
+  /** @format int32 */
+  total?: number;
+}
+
 export type InputStream = any;
  
 export interface InventoryMaterialStockReq {
@@ -3731,6 +3761,16 @@ export interface ResearchGroupEditRequest {
   createTime?: string;
   /**
    * @description
+   *   已扣除积分
+   */
+  deleteDelta?: number;
+  /**
+   * @description
+   *   账户积分
+   */
+  delta?: number;
+  /**
+   * @description
    *   课题组名称
    */
   groupName?: string;
@@ -3748,6 +3788,11 @@ export interface ResearchGroupEditRequest {
   logicDelete?: boolean;
   members?: Array<ResearchGroupMembers>;
   paths?: Array<string>;
+  /**
+   * @description
+   *   待领取积分
+   */
+  pendingDelta?: number;
   requestStatus?: string;
   /**
    * @description
@@ -4066,6 +4111,16 @@ export interface ResearchGroupsDTO {
   createTime?: string;
   /**
    * @description
+   *   已扣除积分
+   */
+  deleteDelta?: number;
+  /**
+   * @description
+   *   账户积分
+   */
+  delta?: number;
+  /**
+   * @description
    *   课题组名称
    */
   groupName?: string;
@@ -4083,6 +4138,11 @@ export interface ResearchGroupsDTO {
   logicDelete?: boolean;
   members?: Array<ResearchGroupMembers>;
   paths?: Array<string>;
+  /**
+   * @description
+   *   待领取积分
+   */
+  pendingDelta?: number;
   requestStatus?: string;
   /**
    * @description
@@ -59,6 +59,7 @@ import type {
   ExchangeIntegralDto,
   ExchangeRecordsRequestDto,
   FeedbackRegistrationDTO,
+  GroupExchangeRecordsRequestDto,
   InventoryMaterialStockReq,
   InvoiceBatchDownloadDto,
   InvoiceDto,
@@ -4378,6 +4379,77 @@ export const postIntegralGetIntegralRecordTypes = /* #__PURE__ */ (() =&gt; {
   return request;
 })();
  
+/** @description request parameter type for postIntegralGroupExchangeRecords */
+export interface PostIntegralGroupExchangeRecordsOption {
+  /**
+   * @description
+   *   dto
+   */
+  body: {
+    /**
+        @description
+          dto */
+    dto: GroupExchangeRecordsRequestDto;
+  };
+}
+
+/** @description response type for postIntegralGroupExchangeRecords */
+export interface PostIntegralGroupExchangeRecordsResponse {
+  /**
+   * @description
+   *   OK
+   */
+  200: ServerResult;
+  /**
+   * @description
+   *   Created
+   */
+  201: any;
+  /**
+   * @description
+   *   Unauthorized
+   */
+  401: any;
+  /**
+   * @description
+   *   Forbidden
+   */
+  403: any;
+  /**
+   * @description
+   *   Not Found
+   */
+  404: any;
+}
+
+export type PostIntegralGroupExchangeRecordsResponseSuccess =
+  PostIntegralGroupExchangeRecordsResponse[200];
+/**
+ * @description
+ *   课题组积分兑换记录
+ * @tags 积分接口
+ * @produces *
+ * @consumes application/json
+ */
+export const postIntegralGroupExchangeRecords = /* #__PURE__ */ (() => {
+  const method = 'post';
+  const url = '/integral/groupExchangeRecords';
+  function request(
+    option: PostIntegralGroupExchangeRecordsOption,
+  ): Promise<PostIntegralGroupExchangeRecordsResponseSuccess> {
+    return requester(request.url, {
+      method: request.method,
+      ...option,
+    }) as unknown as Promise<PostIntegralGroupExchangeRecordsResponseSuccess>;
+  }
+
+  /** http method */
+  request.method = method;
+  /** request url */
+  request.url = url;
+  return request;
+})();
+
 /** @description request parameter type for postIntegralMergeUserIntegralToGroup */
 export interface PostIntegralMergeUserIntegralToGroupOption {
   /**