用户管理

config/routes.ts

@@ -14,11 +14,10 @@ export default [
     icon: 'crown',
     access: 'canAdmin',
     routes: [
-      { path: '/admin', redirect: '/admin/sub-page' },
-      { path: '/admin/sub-page', name: '二级管理页', component: './Admin' },
+      { path: '/admin', redirect: 'user-manage' },
+      { path: '/admin/user-manage', name: '用户管理', icon: 'smile', component: './Admin/UserManage' },
     ],
   },
-  { name: '查询表格', icon: 'table', path: '/list', component: './TableList' },
   { path: '/', redirect: '/welcome' },
   { path: '*', layout: false, component: './404' },
 ];

src/access.ts

@@ -1,9 +1,9 @@
 /**
  * @see https://umijs.org/zh-CN/plugins/plugin-access
  * */
-export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
+export default function access(initialState: { currentUser?: API.LoginUserVO } | undefined) {
   const { currentUser } = initialState ?? {};
   return {
-    canAdmin: currentUser && currentUser.access === 'admin',
+    canAdmin: currentUser && currentUser.userRole === 'admin',
   };
 }

src/pages/Admin.tsx

@@ -1,44 +0,0 @@
-import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
-import { PageContainer } from '@ant-design/pro-components';
-import '@umijs/max';
-import { Alert, Card, Typography } from 'antd';
-import React from 'react';
-const Admin: React.FC = () => {
-  return (
-    <PageContainer content={' 这个页面只有 admin 权限才能查看'}>
-      <Card>
-        <Alert
-          message={'更快更强的重型组件，已经发布。'}
-          type="success"
-          showIcon
-          banner
-          style={{
-            margin: -12,
-            marginBottom: 48,
-          }}
-        />
-        <Typography.Title
-          level={2}
-          style={{
-            textAlign: 'center',
-          }}
-        >
-          <SmileTwoTone /> Ans智能BI <HeartTwoTone twoToneColor="#eb2f96" /> You
-        </Typography.Title>
-      </Card>
-      <p
-        style={{
-          textAlign: 'center',
-          marginTop: 24,
-        }}
-      >
-        Want to add more pages? Please refer to{' '}
-        <a href="https://pro.ant.design/docs/block-cn" target="_blank" rel="noopener noreferrer">
-          use block
-        </a>
-        。
-      </p>
-    </PageContainer>
-  );
-};
-export default Admin;

src/pages/Admin/UserManage/index.tsx

@@ -0,0 +1,134 @@
+import { listUserVOByPageUsingPOST } from '@/services/answerbi/userController';
+import type { ActionType, ProColumns } from '@ant-design/pro-components';
+import { ProTable, TableDropdown } from '@ant-design/pro-components';
+import { useRef } from 'react';
+export const waitTimePromise = async (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export const waitTime = async (time: number = 100) => {
+  await waitTimePromise(time);
+};
+
+const columns: ProColumns<API.UserVO>[] = [
+  {
+    dataIndex: 'id',
+    valueType: 'indexBorder',
+    width: 48,
+  },
+  {
+    title: '昵称',
+    dataIndex: 'userName',
+    copyable: true,
+  },
+  {
+    title: '用户账号',
+    dataIndex: 'userAccount',
+    copyable: true,
+  },
+  {
+    title: '头像',
+    dataIndex: 'userAvatar',
+    render: (_, record) => (
+      <div>
+        <Image src={record.userAvatar} width={100} />
+      </div>
+    )
+  },
+  {
+    title: '角色',
+    dataIndex: 'userRole',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createdTime',
+    valueType: 'dateTime',
+  },
+  
+  
+  {
+    title: '操作',
+    valueType: 'option',
+    key: 'option',
+    render: (text, record, _, action) => [
+      <a
+        key="editable"
+        onClick={() => {
+          action?.startEditable?.(record.id);
+        }}
+      >
+        编辑
+      </a>,
+      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
+        查看
+      </a>,
+      <TableDropdown
+        key="actionGroup"
+        onSelect={() => action?.reload()}
+        menus={[
+          { key: 'copy', name: '复制' },
+          { key: 'delete', name: '删除' },
+        ]}
+      />,
+    ],
+  },
+];
+
+export default () => {
+  const actionRef = useRef<ActionType>();
+  return (
+    <ProTable<API.UserVO>
+      columns={columns}
+      actionRef={actionRef}
+      cardBordered
+      request={async (params = {}, sort, filter) => {
+        console.log(sort, filter);
+        const userList = await listUserVOByPageUsingPOST(params);
+        return {
+          data: userList
+        };
+      }}
+      editable={{
+        type: 'multiple',
+      }}
+      columnsState={{
+        persistenceKey: 'pro-table-singe-demos',
+        persistenceType: 'localStorage',
+        onChange(value) {
+          console.log('value: ', value);
+        },
+      }}
+      rowKey="id"
+      search={{
+        labelWidth: 'auto',
+      }}
+      options={{
+        setting: {
+          listsHeight: 400,
+        },
+      }}
+      form={{
+        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
+        syncToUrl: (values, type) => {
+          if (type === 'get') {
+            return {
+              ...values,
+              created_at: [values.startTime, values.endTime],
+            };
+          }
+          return values;
+        },
+      }}
+      pagination={{
+        pageSize: 5,
+        onChange: (page) => console.log(page),
+      }}
+      dateFormatter="string"
+      headerTitle="高级表格"
+    />
+  );
+};

src/services/answerbi/typings.d.ts

@@ -351,6 +351,7 @@ declare namespace API {
     id?: number;
     userAvatar?: string;
     userName?: string;
+    userAccount?: string;
     userProfile?: string;
     userRole?: string;
   };