添加用户列表管理

config/config.ts

@@ -54,7 +54,7 @@ export default defineConfig({
         {
           path: '/',
           component: '../layouts/BasicLayout',
-          authority: ['admin', 'user'],
+          // authority: ['admin', 'user'],
           routes: [
             {
               path: '/',
@@ -106,6 +106,13 @@ export default defineConfig({
               path: '/setting',
               component: './Setting',
             },
+            {
+              name: 'list.userList',
+              icon: 'smile',
+              path: '/userList',
+              authority: ['1'],
+              component: './UserList',
+            },
             {
               component: './404',
             },

src/locales/zh-CN/menu.ts

@@ -25,6 +25,7 @@ export default {
   'menu.list.memory': '记忆',
   'menu.list.memoryList': '查询',
   'menu.list.setting': '设置',
+  'menu.list.userList': '用户',
   'menu.list.service-list': '服务列表',
   'menu.list.basic-list': '标准列表',
   'menu.list.card-list': '卡片列表',

src/pages/UserList/_mock.ts

@@ -0,0 +1,54 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Request, Response } from 'express';
+import { parse } from 'url';
+import { TableListItem, TableListParams } from './data.d';
+
+// mock tableListDataSource
+const genList = (current: number, pageSize: number) => {
+  const tableListDataSource: TableListItem[] = [];
+
+  for (let i = 0; i < pageSize; i += 1) {
+    const index = (current - 1) * 10 + i;
+    tableListDataSource.push({
+    });
+  }
+  tableListDataSource.reverse();
+  return tableListDataSource;
+};
+
+const tableListDataSource = genList(1, 100);
+
+function getModels(req: Request, res: Response, u: string) {
+  let realUrl = u;
+  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
+    realUrl = req.url;
+  }
+  const { current = 1, pageSize = 10 } = req.query;
+  const params = (parse(realUrl, true).query as unknown) as TableListParams;
+
+  // @ts-ignore
+  const dataSource = [...tableListDataSource].slice((current - 1) * pageSize, current * pageSize);
+
+  const result = {
+    data: dataSource,
+    total: tableListDataSource.length,
+    success: true,
+    pageSize,
+    current: parseInt(`${params.currentPage}`, 10) || 1,
+  };
+
+  return res.json(result);
+}
+
+function success(req: Request, res: Response, u: string) {
+  const result = {
+    data: "ok",
+    success: true,
+  };
+  return res.json(result);
+}
+
+export default {
+  'GET /service/queryList': getModels,
+  'POST /service/forceUpdate': success,
+};

src/pages/UserList/data.d.ts

@@ -0,0 +1,33 @@
+// 表单
+export interface TableListItem {
+  id?: number;
+  userId: number;
+  front: string;
+  back: string;
+  tag: string;
+  period: number;
+  remindTime: Date;
+  updateTime:string;
+}
+// 分页参数
+export interface TableListPagination {
+  total: number;
+  pageSize: number;
+  current: number;
+}
+// 返回的分页数据
+export interface TableListData {
+  list: TableListItem[];
+  pagination: Partial<TableListPagination>;
+}
+// 查询参数
+export interface TableListParams {
+  sorter?: string;
+  status?: string;
+  name?: string;
+  desc?: string;
+  id?: number;
+  pageSize?: number;
+  currentPage?: number;
+}
+

src/pages/UserList/index.less

@@ -0,0 +1,6 @@
+.upload {
+  display: inline;
+}
+.red{
+  color: red;
+}

src/pages/UserList/index.tsx

@@ -0,0 +1,198 @@
+import {Divider, message, Modal, Tooltip} from 'antd';
+import React, {useRef, useState} from 'react';
+import {PageHeaderWrapper} from '@ant-design/pro-layout';
+import ProTable, {ActionType, ProColumns} from '@ant-design/pro-table';
+import {SorterResult} from 'antd/es/table/interface';
+import {TableListItem} from './data.d';
+import service from './service';
+import UpdateForm from "@/pages/Memory/components/UpdateForm";
+import {getTextFromHtml, minuteToDay} from "@/utils/utils";
+import {ExclamationCircleOutlined} from "@ant-design/icons/lib";
+
+
+/**
+ *  删除节点
+ * @param fields
+ */
+const handleRemove = async (fields: TableListItem) => {
+  const hide = message.loading('正在删除');
+  try {
+    await service.delete(fields);
+    hide();
+    message.success('删除成功，即将刷新');
+    return true;
+  } catch (error) {
+    hide();
+    message.error('删除失败，请重试');
+    return false;
+  }
+};
+
+
+
+const TableList: React.FC<{}> = () => {
+  const [sorter, setSorter] = useState<string>('');
+  const [modelVisible, setModalVisible] = useState<boolean>(false);
+  const [formValues, setFormValues] = useState({});
+  const actionRef = useRef<ActionType>();
+
+  const { confirm } = Modal;
+
+  const deleteMemory = async (record:any) => {
+    await handleRemove(record);
+    if (actionRef.current) {
+      actionRef.current.reload();
+    }
+
+  };
+
+  const columns: ProColumns<TableListItem>[] = [
+    {
+      title: '正面',
+      dataIndex: 'front',
+      width: 150,
+      hideInSearch: true,
+      render: (text, row) => {
+        const show = getTextFromHtml(row.front);
+        return (<>
+          <Tooltip title={show}>
+            <span>{show.substring(0, 10)}</span>
+          </Tooltip>
+        </>);
+      }
+    },
+    {
+      title: '背面',
+      dataIndex: 'back',
+      width: 150,
+      hideInSearch: true,
+      render: (text, row) => {
+        const show = getTextFromHtml(row.back);
+        return (<>
+          <Tooltip title={show}>
+            <span>{show.substring(0, 10)}</span>
+          </Tooltip>
+        </>);
+      }
+    },
+    {
+      title: '间隔时间',
+      dataIndex: 'period',
+      width: 100,
+      hideInSearch: true,
+      hideInForm: true,
+      render: (text, row) => {
+        return (<>
+          <span>{minuteToDay(row.period)}</span>
+        </>);
+      }
+    },
+    {
+      title: '提醒时间',
+      dataIndex: 'remindTime',
+      valueType: 'dateTime',
+      width: 150,
+      hideInSearch: true,
+      hideInForm: true,
+      sorter:true
+    },
+    {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+      valueType: 'dateTime',
+      width: 150,
+      hideInSearch: true,
+      hideInForm: true,
+      sorter:true
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      width: 100,
+      valueType: 'option',
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      render: (_, record, index, action) => (
+        <>
+          <a
+            onClick={() => {
+              setFormValues(record);
+              setModalVisible(true);
+            }}
+          >
+            修改
+          </a>
+          <Divider type="vertical"/>
+          <a
+            onClick={async () => {
+              confirm({
+                title: '确定删除吗?',
+                icon: <ExclamationCircleOutlined />,
+                content: '删除后无法恢复',
+                okText: '确定',
+                okType: 'danger',
+                cancelText: '取消',
+                onOk() {
+                  deleteMemory(record);
+                },
+                onCancel() {
+                  console.log('Cancel');
+                },
+              });
+            }}
+          >
+            删除
+          </a>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <PageHeaderWrapper title={false}>
+      <ProTable<TableListItem>
+        search={false}
+        headerTitle="查询表格"
+        actionRef={actionRef}
+        rowKey="id"
+        onChange={(_, _filter, _sorter) => {
+          const sorterResult = _sorter as SorterResult<TableListItem>;
+          if (sorterResult.field) {
+            setSorter(`${sorterResult.field}_${sorterResult.order}`);
+          }
+        }}
+        pagination={{
+          defaultPageSize: 10,
+        }}
+        params={{
+          sorter,
+        }}
+        request={async (params = {}) => {
+          const res = await service.queryList(params);
+          return {
+            data: res.data.list,
+            page: params.current,
+            success: true,
+            total: res.data.total,
+          };
+        }}
+        columns={columns}
+        rowSelection={{}}
+      />
+      {modelVisible ? (
+        <UpdateForm
+          onCancel={(refresh) => {
+            setModalVisible(false);
+            if (refresh && actionRef.current) {
+              actionRef.current.reload();
+            }
+          }}
+          modalVisible={modelVisible}
+          values={formValues}>
+        </UpdateForm>
+      ) : null}
+
+    </PageHeaderWrapper>
+  );
+};
+
+export default TableList;

src/pages/UserList/service.ts

@@ -0,0 +1,7 @@
+import api from '@/utils/api';
+
+export default {
+  queryList: api.get('/api/memory/queryList'),
+  update: api.post('/api/memory/update'),
+  delete: api.post('/api/memory/delete'),
+};