功能：标签管理

src/pages/resourceManage/tagManage/index.tsx

 import SearchBox, { searchColumns } from '~/components/search-box';
-import { Button, Table } from 'antd';
+import { Button, Table, Image } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/es/table';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import AddOrEditTagModal from './components/addOrEditTagModal';
+import { InterDataType, InterReqType } from '~/api/interface';
+import { cooperationListTag } from '~/api/interface/customManageType';
+import { CustomManageAPI } from '~/api';
+
+// 列表类型
+type TableType = InterDataType<cooperationListTag>;
+// 请求的参数
+type ReqType = InterReqType<cooperationListTag>;
+// 搜索表单的数据
+let query: ReqType = {};
+
 //行业新闻
 const TagManage = () => {
   const searchColumnsData: searchColumns[] = [
@@ -18,31 +29,91 @@ const TagManage = () => {
     {
       title: '序号',
       align: 'center',
+      render: (_text, _record, index) => (pagination.current - 1) * pagination.pageSize + index + 1,
     },
     {
       title: '标签名称',
       align: 'center',
+      dataIndex: 'tagName',
+    },
+    {
+      title: '标签描述',
+      align: 'center',
+      dataIndex: 'tagDescription',
+      width: '250px',
+      ellipsis: true,
     },
     {
-      title: '标签类型',
+      title: '标签需求',
       align: 'center',
+      dataIndex: 'tagRequire',
+      width: '250px',
+      ellipsis: true,
     },
     {
       title: '标签等级图标',
       align: 'center',
+      dataIndex: 'tagImg',
+      render: (text) => <Image src={text} alt={'图标'} style={{ width: '32px', height: '32px' }} />,
     },
     {
       title: '操作',
       align: 'center',
+      fixed: 'right',
+      width: '100px',
       render: () => (
         <>
           <Button type='link'>编辑</Button>
-          <Button type='link'>删除</Button>
+          <Button type='link' danger>
+            删除
+          </Button>
         </>
       ),
     },
   ];
-  const [tableData] = useState<any>([{ id: 1 }]);
+  // 表格数据
+  const [tableData, setTableData] = useState<TableType>([]);
+  // 表格分页配置
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const [pagination, setPagination] = useState({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+    totalPage: 0,
+  });
+  // 加载列表
+  const getTableList = async (value = {}) => {
+    // 只需要修改这个地方的接口即可
+    const res = await CustomManageAPI.cooperationListTag({
+      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(res.result);
+    }
+  };
+  // 翻页
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const paginationChange = (pageNo: number, pageSize: number) => {
+    getTableList({ pageNo, pageSize }).then();
+  };
+  // 表单提交
+  const onFinish = (data: ReqType) => {
+    pagination.current = 1;
+    query = data;
+    getTableList(data).then();
+  };
   const [addOrEditTagModalShow, setAddOrEditTagModalShow] = useState<boolean>(false);
 
   const addOrEditTagClick = () => {
@@ -51,6 +122,9 @@ const TagManage = () => {
   const addOrEditTagModalCancel = () => {
     setAddOrEditTagModalShow(false);
   };
+  useEffect(() => {
+    getTableList().then();
+  }, []);
   return (
     <div className='tag-manage'>
       <SearchBox
@@ -60,8 +134,15 @@ const TagManage = () => {
             新建
           </Button>
         }
+        searchData={onFinish}
       />
-      <Table bordered columns={tableColumns} dataSource={tableData} rowKey='id'></Table>
+      <Table
+        bordered
+        columns={tableColumns}
+        dataSource={tableData}
+        rowKey='id'
+        size={'small'}
+      ></Table>
       <AddOrEditTagModal open={addOrEditTagModalShow} onCancel={addOrEditTagModalCancel} />
     </div>
   );

src/utils/isRoute.ts

 // 过滤路由
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { limitEntity } from '@/api/modules/role';
 
 export const filterRouter = (list: any, routeList: limitEntity[]) => {