faets

src/App.jsx

   const { antThemeData } = useModel('system');
   const theme = React.useMemo(() => ({token: antThemeData}), [antThemeData]);
 
-  console.log(theme)
-
   return (
     <ConfigProvider locale={locale} theme={theme}>
       <Antd>

src/components/Page/List.jsx

-import React, { useRef, useMemo } from 'react';
+import React from 'react';
 import { Button, Popconfirm, message } from 'antd';
 import { ProTable } from '@ant-design/pro-components';
-import { Link, useNavigate } from "react-router-dom";
-import { queryTable, restful } from '@/utils/request';
+import { queryTable } from '@/utils/request';
 import Page from './index';
 
-export default (props) => {
+export default React.forwardRef((props, ref) => {
   /**
-   * resource 用来确定应该调用哪个接口
-   * rowKey 标识数据每一行的唯一键, 只能是字符串
-   * columns 定义表格每一列, 符合 ProTable 定义
-   * editURL 编辑页路由
+   * request 与 ProTable 定义不同，这个只是普通的接口即可
    */
-  const { resource, rowKey, columns, editURL } = props;
-  const actionRef = useRef();
-  const navigate = useNavigate();
+  const { request, rowKey, columns, onAdd, onDelete, onEdit, toolBarRender, optionRender, ...leftProps } = props;
+  const actionRef = React.useRef();
+  const hideRef = React.useRef();
 
-  // 接口汇总
-  const api = useMemo(() => {
-    // 通过 resource 知道是哪个接口
-    // 通过 restfule 生成 增删改查的接口
-    const apis = restful(resource);
-
-    // 返回两个，一个是列表查询, 一个是删除
-    return {
-      list: apis[0],
-      delete: apis[4],
-    }
-  }, [resource]);
-
-  // 响应 删除 操作
-  const onDelete = (row) => {
-    const hide = message.loading('操作中, 请稍候...');
-    api.delete(row[rowKey]).then(() => {
-      hide();
-      actionRef.current.reload();
-    }).catch(hide);
-  }
+  const api = React.useMemo(() => queryTable(request), [request]);
 
   // 统一实现操作列
-  const cols = [
+  const cols = React.useMemo(() => [
     ...columns,
     {
       title: '操作',
       valueType: 'option',
       key: 'option',
-      ellipsis: true,
+      width: 120,
       render: (_, record) => [
-        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => { navigate(`${editURL}?id=${record[rowKey]}`) }}>
-          编辑
-        </Button>,
-        <Popconfirm
-          key={3}
-          title="您是否确认删除 ?"
-          onConfirm={() => onDelete(record)}
-          okText="确定"
-          cancelText="取消"
-        >
-          <Button style={{ padding: 0 }} type="link">
-            删除
+        (
+          onEdit && 
+          <Button style={{ padding: 0 }} type="link" key={1} onClick={() => onEdit(record) }>
+            编辑
           </Button>
-        </Popconfirm>,
-      ],
+        ),
+        (
+          onDelete &&
+          <Popconfirm
+            key={3}
+            title="您是否确认删除 ?"
+            onConfirm={() => onDelete(record)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button style={{ padding: 0 }} type="link">
+              删除
+            </Button>
+          </Popconfirm>
+        ),
+        ...(optionRender ? optionRender(_, record) : []),
+      ].filter(Boolean),
     },
-  ]
+  ], [columns, onEdit, onDelete]);
+
+  React.useImperativeHandle(ref, () => {
+    const showLoading = msg => (hideRef.current = message.loading(msg || '操作中, 请稍候...'));
+    const hideLoading = () => hideRef.current && hideRef.current();
+    const reload = () => actionRef.current?.reload && actionRef.current.reload();
+
+    return {
+      showLoading,
+      hideLoading,
+      reload,
+      actionRef: actionRef,
+    }
+  }, []);
 
   return (
     <Page>
       <ProTable
         rowKey={rowKey}
         columns={cols}
-        request={queryTable(api.list)}
+        request={api}
         cardBordered
         actionRef={actionRef}
         toolBarRender={() => [
-          <Button
-            key="1"
-            type="primary"
-            onClick={() => {
-              navigate(editURL);
-            }}
-          >
-            新增
-          </Button>,
-        ]}
+          (
+            onAdd && 
+            <Button
+              key="1"
+              type="primary"
+              onClick={onAdd}
+            >
+              新增
+            </Button>
+          ),
+          ...(toolBarRender ? toolBarRender() : []),
+        ].filter(Boolean)}
+        {...leftProps}
       />
     </Page>
   )
-}
+});

src/pages/issue/index.jsx

+import React from 'react';
+import List from '@/components/Page/List';
+import { getTaIssue } from '@/service/taissue';
+import { getTdLocType } from '@/service/tdloctype';
+import { getSysOrg } from '@/service/sysorg';
+import { queryDict } from '@/utils/request';
+import { Button } from 'antd';
+
+const queryOrg = queryDict(getSysOrg, { labelKey: 'name', valueKey: 'orgId' });
+const queryLocType = queryDict(getTdLocType, { labelKey: 'name', valueKey: 'typeId' })
+
+export default (props) => {
+
+  const columns = [
+    {
+      title: "上报日期",
+      dataIndex: "createDate",
+      valueType: 'date',
+      hideInSearch: true,
+    },
+    {
+      title: "点位",
+      dataIndex: "locId",
+      valueType: 'select',
+      request: queryLocType,
+    },
+    {
+      title: "位置",
+      dataIndex: "addr",
+      hideInSearch: true,
+    },
+    {
+      title: "问题详情",
+      dataIndex: "content",
+      hideInSearch: true,
+      ellipsis: true,
+    },
+    {
+      title: "责任单位",
+      dataIndex: "orgId",
+      valueType: 'select',
+      request: queryOrg,
+    },
+    {
+      title: "流程状态",
+      dataIndex: "processNode",
+      valueEnum: {
+        start: {
+          text: "待交办",
+          status: "Default",
+        },
+        assigned: {
+          text: "已交办",
+          status: "Processing",
+        },
+        end: {
+          text: "已办结",
+          status: "Success",
+        },
+      },
+    },
+    {
+      title: "截止日期",
+      dataIndex: "expireDate",
+      hideInSearch: true,
+    }
+  ];
+
+  return (
+    <List
+      rowKey="issueId"
+      request={getTaIssue}
+      columns={columns}
+      optionRender={(_, row) => [
+        <Button key="detail" type="link">详情</Button>
+      ]}
+    />
+  )
+}

src/pages/issueType/list/index.jsx

   };
 
   const columns = [
-    {
-      title: "分类ID",
-      dataIndex: "typeId",
-    },
     {
       title: "分类名称",
       dataIndex: "name",

src/routes/menus.jsx

 
     return Object.assign(
       {
-        key: path,
+        key: route.path ? path : `fake-${Math.random().toString(36).substring(2)}`,
         label: title,
         icon,
         type: menuType,

src/routes/routes.jsx

 import IssueTypeList from "@/pages/issueType/list";
 import IssueTypeEdit from "@/pages/issueType/edit";
 import QuestionList from "@/pages/question/list";
+import IssueList from '@/pages/issue';
 
 /**
  * meta 用来扩展自定义数据数据
 
 export const authRoutes = [
   {
-    path: "check",
-    element: <CheckList />,
+    path: "",
+    element: <Outlet />,
     meta: {
-      title: '模拟测评',
-      icon: <ProjectOutlined />,
-    }
+      title: '业务管理',
+      menuType: 'group',
+    },
+    children: [
+      {
+        path: "issue",
+        element: <IssueList />,
+        meta: {
+          title: '问 题 单',
+          icon: <ProjectOutlined />,
+        }
+      },
+      {
+        path: "check",
+        element: <CheckList />,
+        meta: {
+          title: '模拟测评',
+          icon: <ProjectOutlined />,
+        }
+      },
+    ],
   },
   {
-    path: "comm",
+    path: "",
     element: <Outlet />,
     meta: {
       title: '基础字典',

src/utils/request.js

   };
 }
 
-export function queryDict (apiRequest, {labelKey = 'name', valueKey = 'id'}) {
+export function queryDict (apiRequest, {labelKey = 'name', valueKey = 'id'} = {}) {
   return function (params) {
     const { current, pageSize, ...leftParams } = params || {};
     return apiRequest({