Pārlūkot izejas kodu

封装一波表格

shaogen1995 1 gadu atpakaļ
vecāks
revīzija
2367aac457

+ 10 - 1
src/components/MyTable/index.module.scss

@@ -1,5 +1,14 @@
 .MyTable{
   :global{
-    
+    .ant-table-body {
+      overflow-y: auto !important;
+      overflow-y: overlay !important;
+
+      .ant-table-row {
+        .ant-table-cell {
+          padding: 10px;
+        }
+      }
+    }
   }
 }

+ 103 - 16
src/components/MyTable/index.tsx

@@ -1,32 +1,119 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import styles from "./index.module.scss";
 import { Table } from "antd";
+import ImageLazy from "../ImageLazy";
 
 type Props = {
   yHeight: number;
   list: any;
-  total: number;
   columnsTemp: any;
-  paging?: boolean; //开启分页,默认true
+  total?: number;
+  pageNum?: number;
+  pageSize?: number;
+  pagingInfo?: any | boolean;
+  onChange?: (pageNum: number, pageSize: number) => void;
+  lastBtn?: any;
 };
 
-function MyTable({ yHeight, list, total, columnsTemp, paging = true }: Props) {
+function MyTable({
+  yHeight,
+  list,
+  columnsTemp,
+  total,
+  pageNum,
+  pageSize,
+  pagingInfo = {
+    showQuickJumper: true,
+    position: ["bottomCenter"],
+    showSizeChanger: true,
+  },
+  onChange,
+  lastBtn = [],
+}: Props) {
+  useEffect(() => {
+    const dom = document.querySelector(
+      "#MyTable .ant-table-body"
+    ) as HTMLDivElement;
+    if (dom) dom.style.height = yHeight + "px";
+  }, [yHeight]);
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      if (onChange) {
+        onChange(pageNum, pageSize);
+      }
+    },
+    [onChange]
+  );
+
+  const dataChangeFu = useCallback(
+    (v: any) => {
+      /**
+       * index:序号
+       * txt:正常数据
+       * img:图片
+       * txtChange:判断显示不同字段
+       * text:文字比较多的情况
+       */
+
+      const obj = {
+        index: (_: any, __: any, index: number) =>
+          index + 1 + (pageNum! - 1) * pageSize!,
+        txt: (item: any) => item[v[2]] || "(空)",
+        img: (item: any) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={60} height={60} src={item.thumb} />
+          </div>
+        ),
+        txtChange: (item: any) => Reflect.get(v[3], item[v[2]]) || "(空)",
+        text: (item: any) =>
+          item[v[2]] ? (
+            item[v[2]].length >= v[3] ? (
+              <span style={{ cursor: "pointer" }} title={item[v[2]]}>
+                {item[v[2]].substring(0, v[3]) + "..."}
+              </span>
+            ) : (
+              item[v[2]]
+            )
+          ) : (
+            "(空)"
+          ),
+      };
+
+      return Reflect.get(obj, v[0]);
+    },
+    [pageNum, pageSize]
+  );
+
+  const columns = useMemo(() => {
+    const arr: any = columnsTemp.map((v: any) => ({
+      title: v[1],
+      render: dataChangeFu(v),
+    }));
+
+    return arr;
+  }, [columnsTemp, dataChangeFu]);
+
   return (
     <Table
+      id="MyTable"
       className={styles.MyTable}
-      scroll={{ y: 625 }}
-      dataSource={tableInfo.list}
-      columns={columns}
+      scroll={{ y: yHeight }}
+      dataSource={list}
+      columns={[...columns, ...lastBtn]}
       rowKey="id"
-      pagination={{
-        showQuickJumper: true,
-        position: ["bottomCenter"],
-        showSizeChanger: true,
-        current: fromData.pageNum,
-        pageSize: fromData.pageSize,
-        total: tableInfo.total,
-        onChange: paginationChange(),
-      }}
+      pagination={
+        pagingInfo
+          ? {
+              ...pagingInfo,
+              current: pageNum,
+              pageSize: pageSize,
+              total: total,
+              onChange: paginationChange(),
+            }
+          : false
+      }
     />
   );
 }

+ 0 - 12
src/pages/A1video/A1main/index.module.scss

@@ -12,18 +12,6 @@
       overflow: hidden;
       margin-top: 18px;
       height: calc(100% - 50px);
-
-      .ant-table-body {
-        height: 680px;
-        overflow-y: auto !important;
-        overflow-y: overlay !important;
-
-        .ant-table-row {
-          .ant-table-cell {
-            padding: 10px;
-          }
-        }
-      }
     }
   }
 }

+ 11 - 30
src/pages/A1video/A1main/index.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Popconfirm, Table } from "antd";
+import { Button, Popconfirm } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { A1_APIdel, A1_APIgetList, A1_APIsort } from "@/store/action/A1video";
 import { RootState } from "@/store";
 import { A1TableType } from "@/types";
-import ImageLazy from "@/components/ImageLazy";
 import { MessageFu } from "@/utils/message";
 import A1add from "../A1add";
+import MyTable from "@/components/MyTable";
+import { A1tableC } from "@/utils/tableData";
 
 type Props = {
   type: "video" | "poster";
@@ -51,29 +52,9 @@ function A1main({ type }: Props) {
     [getListFu]
   );
 
-  const columns = useMemo(() => {
+  const tableLastBtn = useMemo(() => {
     return [
       {
-        title: "标题",
-        dataIndex: "name",
-      },
-      {
-        title: type === "video" ? "视频封面" : "海报",
-        render: (item: A1TableType) => (
-          <div className="tableImgAuto">
-            <ImageLazy width={60} height={60} src={item.thumb} />
-          </div>
-        ),
-      },
-      {
-        title: "自动播放",
-        render: (item: A1TableType) => (item.display ? "是" : "否"),
-      },
-      {
-        title: "创建日期",
-        dataIndex: "createTime",
-      },
-      {
         title: "操作",
         render: (item: A1TableType, _: any, index: number) => (
           <>
@@ -111,7 +92,7 @@ function A1main({ type }: Props) {
         ),
       },
     ];
-  }, [delTableFu, moveTableFu, tableList, type]);
+  }, [delTableFu, moveTableFu, tableList]);
 
   // 点击新增和编辑
   const [addId, setAddId] = useState(0);
@@ -136,12 +117,12 @@ function A1main({ type }: Props) {
       </div>
       {/* 表格 */}
       <div className="A1main">
-        <Table
-          scroll={{ y: 680 }}
-          dataSource={tableList}
-          columns={columns}
-          rowKey="id"
-          pagination={false}
+        <MyTable
+          yHeight={680}
+          list={tableList}
+          columnsTemp={A1tableC(type)}
+          pagingInfo={false}
+          lastBtn={tableLastBtn}
         />
       </div>
       {/* 点击新增和编辑 */}

+ 0 - 12
src/pages/A4exhibit/index.module.scss

@@ -14,18 +14,6 @@
       margin-top: 15px;
       height: calc(100% - 77px);
       background-color: #fff;
-
-      .ant-table-body {
-        height: 625px;
-        overflow-y: auto !important;
-        overflow-y: overlay !important;
-
-        .ant-table-row {
-          .ant-table-cell {
-            padding: 10px;
-          }
-        }
-      }
     }
   }
 }

+ 15 - 60
src/pages/A4exhibit/index.tsx

@@ -6,14 +6,15 @@ import React, {
   useState,
 } from "react";
 import styles from "./index.module.scss";
-import { Button, Input, Popconfirm, Table } from "antd";
+import { Button, Input, Popconfirm } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { A4_APIdel, A4_APIgetList } from "@/store/action/A4exhibit";
 import { RootState } from "@/store";
 import { A4tableType } from "@/types";
-import ImageLazy from "@/components/ImageLazy";
 import { MessageFu } from "@/utils/message";
 import A4add from "./A4add";
+import MyTable from "@/components/MyTable";
+import { A4tableC } from "@/utils/tableData";
 
 function A4exhibit() {
   const dispatch = useDispatch();
@@ -56,14 +57,6 @@ function A4exhibit() {
     });
   }, []);
 
-  // 页码变化
-  const paginationChange = useCallback(
-    () => (pageNum: number, pageSize: number) => {
-      setFromData({ ...fromData, pageNum, pageSize });
-    },
-    [fromData]
-  );
-
   const tableInfo = useSelector(
     (state: RootState) => state.A4exhibit.tableInfo
   );
@@ -80,44 +73,9 @@ function A4exhibit() {
     [getListFu]
   );
 
-  const columns = useMemo(() => {
+  const tableLastBtn = useMemo(() => {
     return [
       {
-        title: "名称",
-        dataIndex: "name",
-      },
-      {
-        title: "封面",
-        render: (item: A4tableType) => (
-          <div className="tableImgAuto">
-            <ImageLazy width={60} height={60} src={item.thumb} />
-          </div>
-        ),
-      },
-      {
-        title: "简介",
-        render: (item: A4tableType) =>
-          item.description ? (
-            item.description.length >= 50 ? (
-              <span style={{ cursor: "pointer" }} title={item.description}>
-                {item.description.substring(0, 50) + "..."}
-              </span>
-            ) : (
-              item.description
-            )
-          ) : (
-            "(空)"
-          ),
-      },
-      {
-        title: "发布日期",
-        dataIndex: "releaseDate",
-      },
-      {
-        title: "点赞数",
-        dataIndex: "pcs",
-      },
-      {
         title: "操作",
         render: (item: A4tableType) => (
           <>
@@ -172,20 +130,17 @@ function A4exhibit() {
 
       {/* 表格主体 */}
       <div className="A4tableBox">
-        <Table
-          scroll={{ y: 625 }}
-          dataSource={tableInfo.list}
-          columns={columns}
-          rowKey="id"
-          pagination={{
-            showQuickJumper: true,
-            position: ["bottomCenter"],
-            showSizeChanger: true,
-            current: fromData.pageNum,
-            pageSize: fromData.pageSize,
-            total: tableInfo.total,
-            onChange: paginationChange(),
-          }}
+        <MyTable
+          yHeight={625}
+          list={tableInfo.list}
+          columnsTemp={A4tableC}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) =>
+            setFromData({ ...fromData, pageNum, pageSize })
+          }
         />
       </div>
 

+ 0 - 12
src/pages/A5goods/index.module.scss

@@ -22,18 +22,6 @@
       margin-top: 15px;
       height: calc(100% - 77px);
       background-color: #fff;
-
-      .ant-table-body {
-        height: 625px;
-        overflow-y: auto !important;
-        overflow-y: overlay !important;
-
-        .ant-table-row {
-          .ant-table-cell {
-            padding: 10px;
-          }
-        }
-      }
     }
   }
 }

+ 15 - 61
src/pages/A5goods/index.tsx

@@ -7,13 +7,14 @@ import React, {
 } from "react";
 import styles from "./index.module.scss";
 import { useDispatch, useSelector } from "react-redux";
-import { Button, Input, Popconfirm, Table } from "antd";
+import { Button, Input, Popconfirm } from "antd";
 import { A5_APIdel, A5_APIgetList } from "@/store/action/A5goods";
 import { RootState } from "@/store";
 import { A5tableType } from "@/types";
-import ImageLazy from "@/components/ImageLazy";
 import { MessageFu } from "@/utils/message";
 import A5add from "./A5add";
+import MyTable from "@/components/MyTable";
+import { A5tableC } from "@/utils/tableData";
 
 // const optionsArr = [
 //   { value: "", label: "全部" },
@@ -66,14 +67,6 @@ function A5goods() {
     });
   }, []);
 
-  // 页码变化
-  const paginationChange = useCallback(
-    () => (pageNum: number, pageSize: number) => {
-      setFromData({ ...fromData, pageNum, pageSize });
-    },
-    [fromData]
-  );
-
   const tableInfo = useSelector((state: RootState) => state.A5goods.tableInfo);
 
   // 点击删除
@@ -88,45 +81,9 @@ function A5goods() {
     [getListFu]
   );
 
-  const columns = useMemo(() => {
+  const tableLastBtn = useMemo(() => {
     return [
       {
-        title: "名称",
-        dataIndex: "name",
-      },
-      {
-        title: "封面",
-        render: (item: A5tableType) => (
-          <div className="tableImgAuto">
-            <ImageLazy width={60} height={60} src={item.thumb} />
-          </div>
-        ),
-      },
-      {
-        title: "种类",
-        render: (item: A5tableType) => item.dictType || "(空)",
-      },
-      {
-        title: "时代",
-        render: (item: A5tableType) => item.dictAge || "(空)",
-      },
-      {
-        title: "级别",
-        render: (item: A5tableType) => item.dictLevel || "(空)",
-      },
-      {
-        title: "尺寸",
-        render: (item: A5tableType) => item.dictSize || "(空)",
-      },
-      {
-        title: "点赞",
-        dataIndex: "pcs",
-      },
-      {
-        title: "发布日期",
-        render: (item: A5tableType) => item.releaseDate || "(空)",
-      },
-      {
         title: "操作",
         render: (item: A5tableType) => (
           <>
@@ -195,20 +152,17 @@ function A5goods() {
 
       {/* 表格主体 */}
       <div className="A5tableBox">
-        <Table
-          scroll={{ y: 625 }}
-          dataSource={tableInfo.list}
-          columns={columns}
-          rowKey="id"
-          pagination={{
-            showQuickJumper: true,
-            position: ["bottomCenter"],
-            showSizeChanger: true,
-            current: fromData.pageNum,
-            pageSize: fromData.pageSize,
-            total: tableInfo.total,
-            onChange: paginationChange(),
-          }}
+        <MyTable
+          yHeight={625}
+          list={tableInfo.list}
+          columnsTemp={A5tableC}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) =>
+            setFromData({ ...fromData, pageNum, pageSize })
+          }
         />
       </div>
       {/* 新增和编辑 */}

+ 0 - 1
src/pages/A6hot/index.tsx

@@ -132,7 +132,6 @@ function A6hot() {
     tempArr.push({ name: "云展名称", num1: "点赞数", num2: "" });
 
     deriveDataRef1.current = tempArr;
-    console.log("-----------", deriveDataRef1.current);
   }, [echartsFu1]);
 
   const [rightData1, setRightData1] = useState<{ pcs: number; name: string }[]>(

+ 1 - 12
src/pages/A7user/index.module.scss

@@ -7,24 +7,13 @@
       display: flex;
       justify-content: space-between;
     }
+
     .tableBox {
       border-radius: 10px;
       overflow: hidden;
       margin-top: 15px;
       height: calc(100% - 80px);
       background-color: #fff;
-
-      .ant-table-body {
-        height: 617px;
-        overflow-y: auto !important;
-        overflow-y: overlay !important;
-
-        .ant-table-row {
-          .ant-table-cell {
-            padding: 10px;
-          }
-        }
-      }
     }
   }
 }

+ 22 - 49
src/pages/A7user/index.tsx

@@ -6,7 +6,7 @@ import {
 } from "@/store/action/A7user";
 import { UserTableAPIType, UserTableListType } from "@/types";
 import { MessageFu } from "@/utils/message";
-import { Input, Button, Table, Popconfirm } from "antd";
+import { Input, Button, Popconfirm } from "antd";
 import React, {
   useCallback,
   useEffect,
@@ -17,12 +17,14 @@ import React, {
 import { useDispatch, useSelector } from "react-redux";
 import styles from "./index.module.scss";
 import UserAdd from "./UserAdd";
+import MyTable from "@/components/MyTable";
+import { A7tableC } from "@/utils/tableData";
 
 function A7user() {
   const dispatch = useDispatch();
 
   // 顶部筛选
-  const [tableSelect, setTableSelect] = useState<UserTableAPIType>({
+  const [fromData, setFromData] = useState<UserTableAPIType>({
     pageNum: 1,
     pageSize: 10,
     searchKey: "",
@@ -31,8 +33,8 @@ function A7user() {
   // 封装发送请求的函数
 
   const getList = useCallback(async () => {
-    dispatch(getUserListAPI(tableSelect));
-  }, [dispatch, tableSelect]);
+    dispatch(getUserListAPI(fromData));
+  }, [dispatch, fromData]);
 
   useEffect(() => {
     getList();
@@ -44,14 +46,14 @@ function A7user() {
     (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey") => {
       clearTimeout(timeRef.current);
       timeRef.current = window.setTimeout(() => {
-        setTableSelect({
-          ...tableSelect,
+        setFromData({
+          ...fromData,
           [key]: e.target.value,
           pageNum: 1,
         });
       }, 500);
     },
-    [tableSelect]
+    [fromData]
   );
 
   // 点击重置
@@ -59,7 +61,7 @@ function A7user() {
   const resetSelectFu = useCallback(() => {
     // 把2个输入框和时间选择器清空
     setInputKey(Date.now());
-    setTableSelect({
+    setFromData({
       pageNum: 1,
       pageSize: 10,
       searchKey: "",
@@ -69,14 +71,6 @@ function A7user() {
   // 从仓库中获取表格数据
   const tableInfo = useSelector((state: RootState) => state.A7user.tableInfo);
 
-  // 页码变化
-  const paginationChange = useCallback(
-    () => (pageNum: number, pageSize: number) => {
-      setTableSelect({ ...tableSelect, pageNum, pageSize });
-    },
-    [tableSelect]
-  );
-
   // 点击删除
   const delTableFu = useCallback(
     async (id: number) => {
@@ -110,27 +104,9 @@ function A7user() {
     [tableInfo.list.length]
   );
 
-  const columns = useMemo(() => {
+  const tableLastBtn = useMemo(() => {
     return [
       {
-        title: "用户名",
-        dataIndex: "userName",
-      },
-      {
-        title: "角色",
-        render: (item: UserTableListType) =>
-          item.isAdmin === 1 ? "管理员" : "普通成员",
-      },
-
-      {
-        title: "真实姓名",
-        render: (item: UserTableListType) =>item.realName||'(空)'
-      },
-      {
-        title: "创建日期",
-        dataIndex: "createTime",
-      },
-      {
         title: "操作",
         render: (item: UserTableListType) => {
           return item.isAdmin === 1 ? (
@@ -200,20 +176,17 @@ function A7user() {
       </div>
       {/* 表格主体 */}
       <div className="tableBox">
-        <Table
-          scroll={{ y: 617 }}
-          dataSource={tableInfo.list}
-          columns={columns}
-          rowKey="id"
-          pagination={{
-            showQuickJumper: true,
-            position: ["bottomCenter"],
-            showSizeChanger: true,
-            current: tableSelect.pageNum,
-            pageSize: tableSelect.pageSize,
-            total: tableInfo.total,
-            onChange: paginationChange(),
-          }}
+        <MyTable
+          yHeight={617}
+          list={tableInfo.list}
+          columnsTemp={A7tableC}
+          lastBtn={tableLastBtn}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) =>
+            setFromData({ ...fromData, pageNum, pageSize })
+          }
         />
       </div>
 

+ 0 - 7
src/pages/A8log/index.module.scss

@@ -20,13 +20,6 @@
       margin-top: 15px;
       height: calc(100% - 70px);
       background-color: #fff;
-
-      .ant-table-body {
-        height: 630px;
-        overflow-y: auto !important;
-        overflow-y: overlay !important;
-
-      }
     }
   }
 }

+ 39 - 77
src/pages/A8log/index.tsx

@@ -1,20 +1,20 @@
 import { RootState } from "@/store";
 import { getLogListAPI } from "@/store/action/A8log";
-import { Input, DatePicker, Table } from "antd";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Input, DatePicker } from "antd";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import styles from "./index.module.scss";
+import MyTable from "@/components/MyTable";
+import { A8tableC } from "@/utils/tableData";
 
 const { RangePicker } = DatePicker;
 
 function D2Log() {
   const dispatch = useDispatch();
 
-  const pageNumRef = useRef(1);
-  const pagePageRef = useRef(10);
   // 筛选和分页
-  const [tableSelect, setTableSelect] = useState({
+  const [fromData, setFromData] = useState({
     searchKey: "",
     pageSize: 10,
     pageNum: 1,
@@ -24,69 +24,35 @@ function D2Log() {
 
   // 账号的输入
   const nameTime = useRef(-1);
-  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    clearTimeout(nameTime.current);
-    nameTime.current = window.setTimeout(() => {
-      setTableSelect({ ...tableSelect, searchKey: e.target.value, pageNum: 1 });
-    }, 500);
-  };
+  const nameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      clearTimeout(nameTime.current);
+      nameTime.current = window.setTimeout(() => {
+        setFromData({ ...fromData, searchKey: e.target.value, pageNum: 1 });
+      }, 500);
+    },
+    [fromData]
+  );
   // 时间选择器改变
-  const timeChange = (date: any, dateString: any) => {
-    let startTime = "";
-    let endTime = "";
-    if (dateString[0] && dateString[1]) {
-      startTime = dateString[0] + " 00:00:00";
-      endTime = dateString[1] + " 23:59:59";
-    }
-    setTableSelect({ ...tableSelect, startTime, endTime, pageNum: 1 });
-  };
+  const timeChange = useCallback(
+    (date: any, dateString: any) => {
+      let startTime = "";
+      let endTime = "";
+      if (dateString[0] && dateString[1]) {
+        startTime = dateString[0] + " 00:00:00";
+        endTime = dateString[1] + " 23:59:59";
+      }
+      setFromData({ ...fromData, startTime, endTime, pageNum: 1 });
+    },
+    [fromData]
+  );
 
   useEffect(() => {
-    pageNumRef.current = tableSelect.pageNum;
-    pagePageRef.current = tableSelect.pageSize;
-    dispatch(getLogListAPI(tableSelect));
-  }, [dispatch, tableSelect]);
+    dispatch(getLogListAPI(fromData));
+  }, [dispatch, fromData]);
 
   // ---------关于表格
-
-  // 页码变化
-  const paginationChange = (pageNum: number, pageSize: number) => {
-    pageNumRef.current = pageNum;
-    pagePageRef.current = pageSize;
-    setTableSelect({ ...tableSelect, pageNum, pageSize });
-  };
-
-  const results = useSelector((state: RootState) => state.A8log.tableInfo);
-
-  const columns = useMemo(() => {
-    return [
-      {
-        title: "序号",
-        render: (text: any, record: any, index: any) =>
-          index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
-      },
-      {
-        title: "操作者",
-        dataIndex: "userName",
-      },
-      {
-        title: "操作日期",
-        dataIndex: "createTime",
-      },
-      {
-        title: "IP记录",
-        dataIndex: "ip",
-      },
-      {
-        title: "操作模块",
-        dataIndex: "type",
-      },
-      {
-        title: "操作事件",
-        dataIndex: "description",
-      },
-    ];
-  }, []);
+  const tableInfo = useSelector((state: RootState) => state.A8log.tableInfo);
 
   return (
     <div className={styles.D2Log}>
@@ -112,20 +78,16 @@ function D2Log() {
 
       {/* 表格主体 */}
       <div className="tableMain">
-        <Table
-          scroll={{ y: 630 }}
-          dataSource={results.list}
-          columns={columns}
-          rowKey="id"
-          pagination={{
-            showQuickJumper: true,
-            position: ["bottomCenter"],
-            showSizeChanger: true,
-            current: tableSelect.pageNum,
-            pageSize: tableSelect.pageSize,
-            total: results.total,
-            onChange: paginationChange,
-          }}
+        <MyTable
+          yHeight={630}
+          list={tableInfo.list}
+          columnsTemp={A8tableC}
+          pageNum={fromData.pageNum}
+          pageSize={fromData.pageSize}
+          total={tableInfo.total}
+          onChange={(pageNum, pageSize) =>
+            setFromData({ ...fromData, pageNum, pageSize })
+          }
         />
       </div>
     </div>

+ 49 - 0
src/utils/tableData.ts

@@ -0,0 +1,49 @@
+/**
+ * index:序号
+ * txt:正常数据
+ * img:图片
+ * txtChange:判断显示不同字段
+ * text:文字比较多的情况
+ */
+export const A1tableC = (type: "video" | "poster") => {
+  return [
+    ["txt", "标题", "name"],
+    ["img", type === "video" ? "视频封面" : "海报", "thumb"],
+    ["txtChange", "自动播放", "display", { 0: "否", 1: "是" }],
+    ["txt", "创建日期", "createTime"],
+  ];
+};
+
+export const A4tableC = [
+  ["txt", "名称", "name"],
+  ["img", "封面", "thumb"],
+  ["text", "简介", "description", 50],
+  ["txt", "发布日期", "releaseDate"],
+  ["txt", "点赞数", "pcs"],
+];
+
+export const A5tableC = [
+  ["txt", "名称", "name"],
+  ["img", "封面", "thumb"],
+  ["txt", "种类", "dictType"],
+  ["txt", "时代", "dictAge"],
+  ["txt", "级别", "dictLevel"],
+  ["txt", "尺寸", "dictSize"],
+  ["txt", "点赞", "pcs"],
+  ["txt", "发布日期", "releaseDate"],
+];
+
+export const A7tableC = [
+  ["txt", "用户名", "userName"],
+  ["txtChange", "角色", "isAdmin", { 1: "管理员", 0: "普通成员" }],
+  ["txt", "真实姓名", "realName"],
+  ["txt", "创建日期", "createTime"],
+];
+
+export const A8tableC = [
+  ["index", "序号"],
+  ["txt", "操作日期", "createTime"],
+  ["txt", "IP记录", "ip"],
+  ["txt", "操作模块", "type"],
+  ["txt", "操作事件", "description"],
+];