ZYYHT/src/pages/Exhibit/index.tsx

import { RootState } from "@/store";
import { getExhibitListAPI } from "@/store/action/exhibit";
import { ExhibitTableType } from "@/types/api/exhibit";
import { Button, Table } from "antd";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useDispatch, useSelector } from "react-redux";
import ExhibitEdit from "./Edit";
import styles from "./index.module.scss";

function Exhibit() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getExhibitListAPI());
  }, [dispatch]);

  // 从仓库中获取列表数据
  const results = useSelector((state: RootState) => state.ExhibitReducer.list);

  // 点击编辑
  const editTableFu = useCallback((id: number) => {
    editIdRef.current = id;
    setOpen(true);
  }, []);

  const columns = useMemo(() => {
    return [
      {
        width: 100,
        title: "序号",
        render: (text: any, record: any, index: any) => index + 1,
      },
      {
        title: "展馆名称",
        dataIndex: "name",
      },

      {
        title: "展馆简介",
        render: (item: ExhibitTableType) =>
          item.description ? (
            item.description.length >= 20 ? (
              <span style={{ cursor: "pointer" }} title={item.description}>
                {item.description.substring(0, 20) + "..."}
              </span>
            ) : (
              item.description
            )
          ) : (
            "（空）"
          ),
      },
      // {
      //   title: "展馆封面",
      //   render: (item: ExhibitTableType) => (
      //     <div className="tableImgAuto">
      //       <ImageLazy width={60} height={60} src={item.thumb} />
      //     </div>
      //   ),
      // },
      {
        title: "联系电话",
        dataIndex: "phone",
      },
      {
        title: "展馆地址",
        dataIndex: "address",
      },
      {
        title: "开放时间",
        dataIndex: "openTime",
      },
      {
        title: "操作",
        render: (item: ExhibitTableType, _: any, index: any) => (
          <>
            <Button
              size="small"
              type="text"
              onClick={() => editTableFu(item.id)}
            >
              编辑
            </Button>
          </>
        ),
      },
    ];
  }, [editTableFu]);

  // 点击编辑打开弹窗
  const [open, setOpen] = useState(false);

  const editIdRef = useRef(0);

  return (
    <div className={styles.Exhibit}>
      <div className="pageTitlt">展馆管理</div>
      {/* 表格主体 */}
      <div className="tableBox">
        <Table
          // size="small"
          scroll={{ y: 700 }}
          dataSource={results}
          columns={columns}
          rowKey="id"
          pagination={false}
        />
      </div>

      {/* 点击编辑打开的页面 */}
      {open ? (
        <ExhibitEdit
          id={editIdRef.current}
          closeFu={() => setOpen(false)}
          upList={() => dispatch(getExhibitListAPI())}
        />
      ) : null}
    </div>
  );
}

const MemoExhibit = React.memo(Exhibit);

export default MemoExhibit;