功能：用户列表推荐人

src/api/interface/customManageType.ts

@@ -37,6 +37,16 @@ export type listAppUserType = InterListFunction<
       tagName: string;
       tagRequire: string;
     }[];
+    userRcdVO: {
+      createTime: string;
+      id: number;
+      rcdNickname: string;
+      rcdUserId: number;
+      rcdUserName: string;
+      remark: string;
+      userAccountId: number;
+    };
+    inviteCount: number;
   }
 >;
 // 加盟标签列表
@@ -195,3 +205,31 @@ export type editUserApplyTag = InterFunction<
   },
   NonNullable<unknown>
 >;
+// 裂变-邀请列表
+export type listUserRcdType = InterListFunction<
+  {
+    userAccountId: number;
+  },
+  {
+    accountStatus: null;
+    accountType: null;
+    companyAuthStatus: number;
+    companyName: null;
+    cooperationTagVOS: null;
+    createTime: string;
+    deleted: null;
+    email: null;
+    id: number;
+    inviteCount: null;
+    nickName: string;
+    phoneNum: string;
+    portType: null;
+    remark: null;
+    source: null;
+    uid: null;
+    userImg: string;
+    userName: null;
+    userRcdVO: null;
+    userSex: null;
+  }
+>;

src/api/modules/customManage.ts

@@ -11,6 +11,7 @@ import {
   editUserApplyTagDetails,
   listAppUserType,
   listUserApplyTag,
+  listUserRcdType,
   userAccountUpdateType,
 } from '~/api/interface/customManageType';
 
@@ -51,4 +52,7 @@ export class CustomManageAPI {
   // 后台-编辑服务商信息
   static editUserApplyTag: editUserApplyTag = (params) =>
     axios.post('/userapp/cooperation/editUserApplyTag', params);
+  // 裂变-邀请列表
+  static listUserRcd: listUserRcdType = (data) =>
+    axios.post('/userapp/user-account/listUserRcd', data);
 }

src/pages/customManage/customList/detail/index.tsx

+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import qs from 'query-string';
+import SearchBox from '~/components/search-box';
+import { Button, Table } from 'antd';
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { InterListType } from '~/api/interface';
+import { listUserRcdType } from '~/api/interface/customManageType';
+import { CustomManageAPI } from '~/api';
+import { ColumnsType } from 'antd/es/table';
+
+// 表格类型
+type TableType = InterListType<listUserRcdType>;
+
+function CustomListDetail() {
+  // 路由钩子
+  const location = useLocation();
+  // 导航钩子
+  const navigate = useNavigate();
+  // 表格数据
+  const [tableData, setTableData] = useState<TableType>([]);
+  // 表格分页配置
+  const [pagination, setPagination] = useState({
+    total: 0,
+    pageSize: 5,
+    current: 1,
+    totalPage: 0,
+  });
+  // 加载列表
+  const getTableList = async (value = {}) => {
+    // 只需要修改这个地方的接口即可
+    const res = await CustomManageAPI.listUserRcd({
+      userAccountId: Number(qs.parse(location.search).id),
+      pageNo: pagination.current,
+      pageSize: pagination.pageSize,
+      ...value,
+    });
+    if (res && res.code === '200') {
+      const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
+      setPagination({
+        total: totalCount,
+        current: pageNo,
+        pageSize,
+        totalPage,
+      });
+      setTableData(list);
+    }
+  };
+  // 翻页
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    getTableList({ pageNo, pageSize }).then();
+  };
+  // 返回上一页
+  const handleBack = () => {
+    navigate(-1);
+  };
+  // componentDidMount
+  useEffect(() => {
+    getTableList().then();
+  }, []);
+  // 表格结构
+  const columns: ColumnsType<TableType[0]> = [
+    {
+      title: '序号',
+      dataIndex: 'accountNo',
+      align: 'center',
+      width: '50px',
+      render: (_text, _record, index) => (pagination.current - 1) * pagination.pageSize + index + 1,
+    },
+    {
+      title: '用户名称',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (text, record) => text || record.nickName || '游客用户',
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phoneNum',
+      align: 'center',
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      align: 'center',
+    },
+  ];
+  return (
+    <>
+      <SearchBox
+        child={
+          <Button type={'primary'} icon={<ArrowLeftOutlined />} onClick={() => handleBack()}>
+            返回
+          </Button>
+        }
+      />
+      <Table
+        size='small'
+        dataSource={tableData}
+        columns={columns}
+        rowKey='id'
+        // scroll={{ x: 1500 }}
+        bordered
+        pagination={{
+          total: pagination.total,
+          pageSize: pagination.pageSize,
+          current: pagination.current,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+      />
+    </>
+  );
+}
+
+export default CustomListDetail;

src/pages/customManage/customList/index.tsx

@@ -6,6 +6,8 @@ import { ChangeModal } from '~/pages/customManage/customList/comp/changeModal';
 import { InterListType, InterReqType } from '~/api/interface';
 import { listAppUserType } from '~/api/interface/customManageType';
 import { CustomManageAPI, SystemManageAPI } from '~/api';
+import qs from 'query-string';
+import { useNavigate } from 'react-router-dom';
 
 // 表格数据类型
 type TableType = InterListType<listAppUserType>;
@@ -25,6 +27,8 @@ const portTypeList = [
 
 function CustomListView() {
   const { confirm } = Modal;
+  // 路由钩子
+  const navigate = useNavigate();
   // 是否打开变更弹窗
   const [isChangeVisModal, setIsChangeVisModal] = useState<boolean>(false);
   // 表格分页配置
@@ -86,6 +90,13 @@ function CustomListView() {
       },
     });
   };
+  // 跳转详情
+  const handleInvite = (record: TableType[0]) => {
+    const search = {
+      id: record.id,
+    };
+    navigate(`/customManage/customList/detail?${qs.stringify(search)}`);
+  };
   // componentDidMount
   useEffect(() => {
     query = {};
@@ -150,6 +161,7 @@ function CustomListView() {
       title: '加盟身份',
       dataIndex: 'cooperationTagVOS',
       align: 'center',
+      width: '100px',
       render: (_text, record) =>
         record.cooperationTagVOS?.map((i, j) => (
           <Tag color='processing' key={j} style={{ marginBottom: '10px' }}>
@@ -159,15 +171,19 @@ function CustomListView() {
     },
     {
       title: '上级推荐人',
-      dataIndex: 'remark',
       align: 'center',
-      render: (_text) => `--`,
+      render: (_text, record) => record?.userRcdVO?.rcdUserName || record?.userRcdVO?.rcdNickname,
     },
     {
       title: '推荐伙伴',
-      dataIndex: 'remark',
+      dataIndex: 'inviteCount',
       align: 'center',
-      render: (_text) => `--`,
+      render: (text, record) =>
+        !!text && (
+          <Button type={'link'} onClick={() => handleInvite(record)}>
+            {text}
+          </Button>
+        ),
     },
     {
       title: '相关运营',

src/router/index.ts

@@ -7,26 +7,38 @@ import Cookies from 'js-cookie';
 //菜单类型
 type menuType = InterDataType<listMenuInfoType>;
 
+// 缓存路由列表
+let routerListStore: any[] = [];
 // 获取用户权限路由列表
 export const authRouterList = async () => {
   if (localStorage.getItem('roleId') && Cookies.get('SHAREFLY-TOKEN')) {
-    const { result } = await SystemManageAPI.getListRoleMenuInfo({
-      roleId: Number(localStorage.getItem('roleId')),
-    });
-    const ids: number[] = getAllKeys([result]);
-    const getRouteList = (data: RouteObjectType[]) => {
-      return data.reduce((pre: RouteObjectType[], cur) => {
-        const Obj: RouteObjectType = { ...cur };
-        if (ids.includes(Obj.meta.id) || Obj.meta.hidden || Obj.path?.includes('pilotTraining')) {
-          if (Obj.children) {
-            Obj.children = [...getRouteList(Obj.children)];
+    // 如果缓存中没有数据
+    if (routerListStore.length === 0) {
+      // 加载路由数据
+      const { result } = await SystemManageAPI.getListRoleMenuInfo({
+        roleId: Number(localStorage.getItem('roleId')),
+      });
+      const ids: number[] = getAllKeys([result]);
+      const getRouteList = (data: RouteObjectType[]) => {
+        return data.reduce((pre: RouteObjectType[], cur) => {
+          const Obj: RouteObjectType = { ...cur };
+          if (ids.includes(Obj.meta.id) || Obj.meta.hidden || Obj.path?.includes('pilotTraining')) {
+            if (Obj.children) {
+              Obj.children = [...getRouteList(Obj.children)];
+            }
+            pre.push(Obj);
           }
-          pre.push(Obj);
-        }
-        return pre;
-      }, []);
-    };
-    return Promise.resolve([...getRouteList(routerList)]);
+          return pre;
+        }, []);
+      };
+      const arr = [...getRouteList(routerList)];
+      // 将路由数据存到store中
+      routerListStore = arr;
+      // 完成后返回路由数据
+      return Promise.resolve(arr);
+    } else {
+      return Promise.resolve(routerListStore);
+    }
   }
   return Promise.resolve([]);
 };

src/router/router.tsx

@@ -120,7 +120,8 @@ import BusinessCaseManage from '~/pages/resourceManage/businessCaseManage';
 import CustomIdentityView from '~/pages/customManage/customIdentity';
 import CompanyManageView from '~/pages/systemManage/companyManage';
 import AccountLimit from '~/pages/systemManage/limitManage/roleList'; //账号权限
-import LimitInfo from '~/pages/systemManage/limitManage/limitInfo'; //权限信息
+import LimitInfo from '~/pages/systemManage/limitManage/limitInfo';
+import CustomListDetail from '~/pages/customManage/customList/detail'; //权限信息
 
 // const IndustryListView = React.lazy(() => import('~/pages/mallManage/industryManage/industryList')); //行业列表
 // const IndustryDetailView = React.lazy(
@@ -198,6 +199,17 @@ export const routerList: Array<RouteObjectType> = [
         },
       },
       {
+        path: '/customManage/customList/detail',
+        element: withLoadingComponent(<CustomListDetail />),
+        errorElement: <ErrorPage />,
+        meta: {
+          id: 220,
+          title: '邀请列表',
+          icon: <SolutionOutlined />,
+          hidden: true,
+        },
+      },
+      {
         path: '/customManage/customMoney',
         element: withLoadingComponent(<CustomMoneyView />),
         errorElement: <ErrorPage />,