feat: 对接 变更信息接口

src/pages/member/components/MemberChangedInfo/index.tsx

@@ -5,52 +5,87 @@
  * @LastEditTime: 2021-05-21 18:18:11
  * @Description: 会员变更信息
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
 import PolymericTable from '@/components/PolymericTable';
 import { EditableColumns } from '@/components/PolymericTable/interface';
 
-interface IProps extends MellowCardProps {}
+export type ChangeItemType = {
+  /**
+   * 数据id
+   */
+  id: number,
+  /**
+   * 变更时间
+   */
+  createTime: string,
+  /**
+   * 变更项目
+   */
+  fieldLocalName: string,
+  /**
+   * 变更后的内容
+   */
+  fieldValue: string,
+  /**
+   * 变更前的内容
+   */
+  lastValue: string,
+}
 
-const mockData = [
-  {
-    id: 1,
-    index: 1,
-    createTime: '2020-12-08',
-    item: '会员名称',
-    before: '广州市商旅科技有限公司',
-    after: '广州市数商云网络科技有限公司',
-  },
-  {
-    id: 2,
-    index: 2,
-    createTime: '2020-12-08',
-    item: '注册资金',
-    before: '200万',
-    after: '500万',
-  },
-  {
-    id: 3,
-    index: 3,
-    createTime: '2020-12-08',
-    item: '联系人电话',
-    before: '185 2929 6758',
-    after: '185 2929 6758',
-  },
-  {
-    id: 4,
-    index: 4,
-    createTime: '2020-12-08',
-    item: '经营范围',
-    before: '经营全粒面牛皮、修面皮、漆色皮、打腊皮、水腊皮、修面皮、漆色皮、打腊皮、水腊皮、漆色皮、打...',
-    after: '经营全粒面牛皮、修面皮、漆色皮、打腊皮、水腊皮、修面皮、漆色皮、打腊皮、水腊皮、漆色皮、打...',
-  },
-];
+export type FetchParamsType = {
+  pageSize: string,
+  current: string,
+}
+
+export type ReponseType = {
+  data: ChangeItemType[],
+  totalCount: number,
+}
+
+interface IProps extends MellowCardProps {
+  /**
+   * 数据
+   */
+  fetchList: (params: FetchParamsType) => Promise<ReponseType>,
+}
+
+const PAGE_SIZE = 10;
 
 const MemberChangedInfo: React.FC<IProps> = (props: IProps) => {
   const {
+    fetchList,
     ...rest
   } = props;
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(PAGE_SIZE);
+  const [loading, setLoading] = useState(false);
+  const [list, setList] = useState<ReponseType>({
+    totalCount: 0,
+    data: [],
+  });
+
+  const getList = (params?: FetchParamsType) => {
+    if (fetchList) {
+      setLoading(true);
+      const nextPage = params?.current || page;
+      const nextSize = params?.pageSize || size;
+      fetchList({
+        current: `${nextPage}`,
+        pageSize: `${nextSize}`,
+      }).then((res) => {
+        if (res.data) {
+          setList(res);
+        }
+      }).finally(() => {
+        setLoading(false);
+      });
+    }
+  };
+
+  useEffect(() => {
+    getList();
+  }, []);
 
   const columns: EditableColumns[] = [
     {
@@ -63,30 +98,45 @@ const MemberChangedInfo: React.FC<IProps> = (props: IProps) => {
     },
     {
       title: '变更项目',
-      dataIndex: 'item',
+      dataIndex: 'fieldLocalName',
       ellipsis: true,
     },
     {
       title: '变更前内容',
-      dataIndex: 'before',
+      dataIndex: 'fieldValue',
       ellipsis: true,
     },
     {
       title: '变更前内容',
-      dataIndex: 'after',
+      dataIndex: 'lastValue',
       ellipsis: true,
     },
   ];
 
+  const handlePaginationChange = (page: number, size: number) => {
+    setPage(page);
+    setSize(size);
+    getList({
+      current: `${page}`, 
+      pageSize: `${size}`, 
+    });
+  };
+
   return (
     <MellowCard
       title="变更信息"
       {...rest}
     >
       <PolymericTable
-        dataSource={mockData}
+        dataSource={list.data}
         columns={columns}
-        loading={false}
+        loading={loading}
+        pagination={{
+          current: page,
+          pageSize: size,
+          total: list.totalCount,
+        }}
+        onPaginationChange={handlePaginationChange}
       />
     </MellowCard>
   );

src/pages/member/memberMaintain/detailed/changedInfo.tsx

@@ -2,19 +2,41 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-21 18:18:44
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-05-21 18:20:06
+ * @LastEditTime: 2021-06-30 10:49:31
  * @Description: 会员变更信息详情
  */
 import React from 'react';
 import { Row, Col } from 'antd';
-import ChangedInfo from '../../components/MemberChangedInfo';
+import { usePageStatus } from '@/hooks/usePageStatus';
+import { PublicApi } from '@/services/api';
+import ChangedInfo, { FetchParamsType, ReponseType } from '../../components/MemberChangedInfo';
 
 const MemberChangedInfo = () => {
+  const { validateId } = usePageStatus();
+
+  const getInspectList = (params: FetchParamsType): Promise<ReponseType> => {
+    return new Promise((resolve, reject) => {
+      PublicApi.getMemberAbilityMaintenanceDetailDepositHistoryPage({
+        validateId,
+        ...params,
+      })
+        .then((res) => {
+          if (res.code === 1000) {
+            resolve(res.data);
+          }
+          reject(res);
+        })
+        .catch((err) => {
+          reject(err);
+        });
+    });
+  };
+
   return (
     <Row gutter={[16, 16]}>
       {/* 分类信息 */}
       <Col span={24}>
-        <ChangedInfo id="changedInfo" />
+        <ChangedInfo fetchList={getInspectList} id="changedInfo" />
       </Col>
     </Row>
   );