功能：用户列表

src/api/index.ts

@@ -6,6 +6,7 @@ import { CouponManageAPI } from './modules/couponManage';
 import { CommonAPI } from './modules/common';
 import { MakeManageAPI } from './modules/makeManage';
 import { CategoryManageAPI } from './modules/categoryManage';
+import { SystemManageAPI } from './modules/systemManage';
 
 export {
   PointManageAPI,
@@ -16,4 +17,5 @@ export {
   CouponManageAPI,
   MakeManageAPI,
   CategoryManageAPI,
+  SystemManageAPI,
 };

src/api/interface/systemManageType.ts

+import { InterFunction, InterListFunction } from '~/api/interface';
+// 账号-列表
+export type listBAccountPageType = InterListFunction<
+  {
+    accountStatus?: number;
+    area?: string;
+    cityCode?: number;
+    districtCode?: number;
+    keyword?: string;
+    provinceCode?: number;
+    rcdCompanyId?: number;
+    roleId?: number;
+    userIds?: Array<number>;
+    userType?: number;
+  },
+  {
+    id: number;
+    accountType: number;
+    uid: string;
+    accountNo: string;
+    phoneNum: string;
+    userName: string;
+    nickName: string;
+    userImg: string;
+    userSex: number;
+    email: string;
+    source: number;
+    accountStatus: number;
+    remark: string;
+    portType: number;
+    createTime: string;
+    companyAuthStatus: null;
+    cooperationTagId: null;
+  }
+>;
+// 账号-新增
+export type insertBAccountType = InterFunction<
+  {
+    accountNo: string;
+    accountStatus: number;
+    alertPwd: number;
+    cityCode?: number;
+    districtCode?: number;
+    email?: string;
+    id: number;
+    passWord: number;
+    phoneNum: number;
+    provinceCode?: number;
+    remark?: string;
+    userName: string;
+  },
+  NonNullable<unknown>
+>;
+// 账号-删除
+export type removeBAccountType = InterFunction<
+  {
+    userAccountId: number;
+  },
+  NonNullable<unknown>
+>;
+// 账号-修改
+export type updateBAccountType = InterFunction<
+  {
+    accountNo: string;
+    accountStatus: number;
+    alertPwd: number;
+    cityCode?: number;
+    districtCode?: number;
+    email?: string;
+    id: number;
+    passWord: number;
+    phoneNum: number;
+    provinceCode?: number;
+    remark?: string;
+    userName: string;
+  },
+  NonNullable<unknown>
+>;
+// 账号-修改密码
+export type updatePasswordType = InterFunction<
+  {
+    accountNo: string;
+    accountStatus: number;
+    alertPwd: number;
+    cityCode?: number;
+    districtCode?: number;
+    email?: string;
+    id: number;
+    passWord: number;
+    phoneNum: number;
+    provinceCode?: number;
+    remark?: string;
+    userName: string;
+  },
+  NonNullable<unknown>
+>;

src/api/modules/systemManage.ts

+import {
+  insertBAccountType,
+  listBAccountPageType,
+  removeBAccountType,
+  updateBAccountType,
+  updatePasswordType,
+} from '../interface/systemManageType';
+import axios from '../request';
+
+export class SystemManageAPI {
+  // 账号-列表
+  static listBAccountPage: listBAccountPageType = (params) =>
+    axios.post('/userapp/back-user/listBAccountPage', params);
+
+  // 账号-新增
+  static insertBAccount: insertBAccountType = (params) =>
+    axios.post('/userapp/back-user/insertBAccount', params);
+
+  // 账号-删除
+  static removeBAccount: removeBAccountType = (params) =>
+    axios.post('/userapp/back-user/removeBAccount', params);
+
+  // 账号-修改
+  static updateBAccount: updateBAccountType = (params) =>
+    axios.post('/userapp/back-user/updateBAccount', params);
+
+  // 账号-修改密码
+  static updatePassword: updatePasswordType = (params) =>
+    axios.post('/userapp/back-user/updatePassword', params);
+}

src/api/request.ts

@@ -13,7 +13,8 @@ const service = axios.create({
 });
 service.interceptors.request.use(
   (config: any) => {
-    const token = Cookies.get('SXTB-TOKEN');
+    const token = Cookies.get('SHAREFLY-TOKEN');
+    console.log('token --->', token);
     if (token) {
       config.headers.token = token;
     }

src/assets/style/App.scss

@@ -30,6 +30,11 @@
 .ant-table-row:nth-child(odd) > td {
   background: #fcfcfc;
 }
+.ant-table-cell-fix-right{
+  .ant-btn{
+    padding: 0 8px !important;
+  }
+}
 
 ::-webkit-scrollbar {
   background-color: transparent;

src/components/layout/title/index.tsx

@@ -38,7 +38,7 @@ export function TitleView() {
               content: '退出后未保存数据将会丢失，确定登出吗？',
               onOk: () => {
                 navigate('/login', { replace: true });
-                Cookies.remove('SHAREFLY_TOKEN');
+                Cookies.remove('SHAREFLY-TOKEN');
                 dispatch(REMOVE_MENU());
                 dispatch(REMOVE_MENU_ID());
               },

src/components/search-box/index.tsx

@@ -111,12 +111,12 @@ const Index: React.FC<propsType> = (props) => {
                 <Input
                   placeholder={item.placeholder}
                   allowClear
-                  style={{ width: item.width ? `${item.width}px` : '150px' }}
+                  style={{ width: item.width ? `${item.width}px` : '180px' }}
                   maxLength={50}
                 />
               ) : item.type === 'select' ? (
                 <Select
-                  style={{ width: item.width ? `${item.width}px` : '200px' }}
+                  style={{ width: item.width ? `${item.width}px` : '180px' }}
                   placeholder={item.placeholder}
                   allowClear
                 >
@@ -130,7 +130,7 @@ const Index: React.FC<propsType> = (props) => {
                 </Select>
               ) : item.type === 'Select' ? (
                 <Select
-                  style={{ width: item.width ? `${item.width}px` : '200px' }}
+                  style={{ width: item.width ? `${item.width}px` : '180px' }}
                   placeholder={item.placeholder}
                   allowClear
                   options={item.options}
@@ -145,7 +145,7 @@ const Index: React.FC<propsType> = (props) => {
                   //   ],
                   // }}
                   format='YYYY-MM-DD'
-                  style={{ width: item.width ? `${item.width}px` : '220px' }}
+                  style={{ width: item.width ? `${item.width}px` : '200px' }}
                 />
               ) : item.type === 'DatePicker' ? (
                 <DatePicker

src/pages/common/login/index.tsx

@@ -32,7 +32,7 @@ function LoginView() {
     });
     if (res && res.code === '200') {
       const { token } = res.result;
-      await Cookies.set('SHAREFLY_TOKEN', token);
+      await Cookies.set('SHAREFLY-TOKEN', token);
       // 记住密码
       Cookies.set('password', values?.passWord);
       Cookies.set('username', values?.accountNo);

src/pages/systemManage/accountManage/index.tsx

+import { useEffect, useState } from 'react';
+import { InterListType, InterReqType } from '~/api/interface';
+import { listBAccountPageType } from '~/api/interface/systemManageType';
+import SearchBox from '~/components/search-box';
+import { Button, Table, Tooltip } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { ColumnsType } from 'antd/es/table';
+import { SystemManageAPI } from '~/api';
+
+// 列表的数据类型
+type TableType = InterListType<listBAccountPageType>;
+// 请求数据的类型
+type ReqType = InterReqType<listBAccountPageType>;
+// 搜索表单的数据
+let query: ReqType = {};
+
+function AccountManageView() {
+  // 表格数据
+  const [tableData, setTableData] = useState<TableType>([]);
+  // 表格分页配置
+  const [pagination, setPagination] = useState({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+    totalPage: 0,
+  });
+  // 加载列表
+  const getTableList = async (value = {}) => {
+    // 只需要修改这个地方的接口即可
+    const res = await SystemManageAPI.listBAccountPage({
+      pageNo: pagination.current,
+      pageSize: pagination.pageSize,
+      ...value,
+      ...query,
+    });
+    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 onFinish = (data: ReqType) => {
+    pagination.current = 1;
+    query = data;
+    getTableList(data).then();
+  };
+  // componentDidMount
+  useEffect(() => {
+    query = {};
+    getTableList().then();
+  }, []);
+  // 表格结构
+  const columns: ColumnsType<TableType[0]> = [
+    {
+      title: '账号',
+      dataIndex: 'accountNo',
+      align: 'center',
+      width: '150px',
+      fixed: 'left',
+    },
+    {
+      title: '账号类型',
+      dataIndex: 'accountType',
+      align: 'center',
+      width: '10%',
+      render: (text) => (text === 1 ? '员工' : '合伙人'),
+    },
+    { title: '姓名', dataIndex: 'userName', align: 'center', width: '10%' },
+    {
+      title: '所属单位',
+      align: 'center',
+      width: '10%',
+    },
+    {
+      title: '渠道等级',
+      dataIndex: 'channelLevel',
+      align: 'center',
+      width: '150px',
+    },
+    {
+      title: '角色',
+      align: 'center',
+      width: '10%',
+    },
+    { title: '手机号', dataIndex: 'phoneNum', align: 'center', width: '150px' },
+    { title: '邮箱', align: 'center', width: '12%', dataIndex: 'email' },
+    {
+      title: '备注',
+      align: 'center',
+      width: '10%',
+      dataIndex: 'remark',
+      render: (text) => (
+        <Tooltip placement='top' title={text}>
+          <div className='remark-wrap'>{text}</div>
+        </Tooltip>
+      ),
+    },
+    {
+      title: '账号状态',
+      dataIndex: 'accountStatus',
+      align: 'center',
+      width: '10%',
+      render: (text) => (text === 1 ? '可用' : '停用'),
+    },
+    {
+      title: '企业实名认证',
+      dataIndex: 'companyAuthStatus',
+      align: 'center',
+      width: '10%',
+    },
+    {
+      title: '操作',
+      width: '160px',
+      fixed: 'right',
+      align: 'center',
+      render: (_text, _record) => (
+        <>
+          <Button type='link'>变更</Button>
+          <Button type='link'>修改密码</Button>
+          <Button type='link' danger>
+            删除
+          </Button>
+        </>
+      ),
+    },
+  ];
+  return (
+    <>
+      <SearchBox
+        search={[
+          {
+            label: '账号',
+            name: 'keyword',
+            type: 'input',
+            placeholder: '请输入姓名或账号',
+          },
+          {
+            label: '账号类型',
+            name: 'userType',
+            type: 'Select',
+            placeholder: '请选择账号类型',
+            options: [
+              { value: 1, label: '员工' },
+              { value: 0, label: '合伙人' },
+            ],
+          },
+          {
+            label: '角色',
+            name: 'roleId',
+            type: 'Select',
+            placeholder: '请选择账号角色',
+            options: [],
+          },
+          {
+            label: '状态',
+            name: 'accountStatus',
+            type: 'Select',
+            placeholder: '请选择账号状态',
+            options: [
+              { value: 1, label: '可用' },
+              { value: 0, label: '停用' },
+            ],
+          },
+        ]}
+        child={
+          <>
+            <Button type={'primary'} icon={<PlusOutlined />}>
+              新增账号
+            </Button>
+          </>
+        }
+        searchData={onFinish}
+      />
+      <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 AccountManageView;

src/router/privateRouter.tsx

@@ -11,7 +11,7 @@ function PrivateRouter() {
   const beforeEach = () => {
     // TODO: 判断是否登录 (需要改为实时获取地址栏的路由)
     const path = location.pathname;
-    const token = Cookies.get('SHAREFLY_TOKEN');
+    const token = Cookies.get('SHAREFLY-TOKEN');
     if (!token && path !== '/login') {
       location.replace('/login');
       return;

src/router/router.tsx

@@ -16,6 +16,9 @@ import {
   ReconciliationOutlined,
   SolutionOutlined,
   RedEnvelopeOutlined,
+  SettingOutlined,
+  UserOutlined,
+  SisternodeOutlined,
 } from '@ant-design/icons';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -35,6 +38,7 @@ import DivideRules from '~/pages/pointManage/divideRules';
 import CustomListView from '~/pages/customManage/customList';
 import CustomMoneyView from '~/pages/customManage/customMoney';
 import CustomMoneyDetail from '~/pages/customManage/customMoney/detail';
+import AccountManageView from '~/pages/systemManage/accountManage';
 // 活动
 const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
 
@@ -76,6 +80,7 @@ const CouponDetailed = React.lazy(() => import('src/pages/couponManage/couponDet
 
 // 分类管理
 const CategoryList = React.lazy(() => import('src/pages/categoryManage/index'));
+// 路由列表类型
 export interface RouteObjectType {
   path: AgnosticIndexRouteObject['path'];
   element: any;
@@ -89,7 +94,7 @@ export interface RouteObjectType {
     title: string;
   };
 }
-
+// 加载页面
 const withLoadingComponent = (comp: JSX.Element) => (
   <React.Suspense
     fallback={
@@ -101,6 +106,29 @@ const withLoadingComponent = (comp: JSX.Element) => (
     {comp}
   </React.Suspense>
 );
+// 路由白名单
+export const whiteRouterList: Array<RouteObject & RouteObjectType> = [
+  {
+    path: '/',
+    element: <Navigate to='/orderManage/productOrder' />,
+    meta: {
+      id: 0,
+      title: '销售订单',
+      icon: MacCommandOutlined,
+    },
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: '/login',
+    element: withLoadingComponent(<LoginView />),
+    meta: {
+      id: 0,
+      title: '登录',
+      icon: MacCommandOutlined,
+    },
+    errorElement: <ErrorPage />,
+  },
+];
 
 // 路由数组
 export const routerList: Array<RouteObjectType> = [
@@ -493,32 +521,30 @@ export const routerList: Array<RouteObjectType> = [
         meta: {
           id: 18100,
           title: '分类列表',
-          icon: <GiftOutlined />,
+          icon: <SisternodeOutlined />,
         },
       },
     ],
   },
-];
-// 路由白名单
-export const whiteRouterList: Array<RouteObject & RouteObjectType> = [
   {
-    path: '/',
-    element: <Navigate to='/orderManage/productOrder' />,
-    meta: {
-      id: 0,
-      title: '销售订单',
-      icon: MacCommandOutlined,
-    },
+    path: '/systemManage',
+    element: <LayoutView />,
     errorElement: <ErrorPage />,
-  },
-  {
-    path: '/login',
-    element: withLoadingComponent(<LoginView />),
     meta: {
-      id: 0,
-      title: '登录',
-      icon: MacCommandOutlined,
+      id: 28000,
+      icon: <SettingOutlined />,
+      title: '系统管理',
     },
-    errorElement: <ErrorPage />,
+    children: [
+      {
+        path: '/systemManage/accountManage',
+        element: withLoadingComponent(<AccountManageView />),
+        meta: {
+          id: 28100,
+          title: '账号管理',
+          icon: <UserOutlined />,
+        },
+      },
+    ],
   },
 ];