chaoZhou-WWQ-ht/src/pages/A5goods/index.tsx

import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { Button, Input, Popconfirm } from "antd";
import { A5_APIdel, A5_APIgetList } from "@/store/action/A5goods";
import { RootState } from "@/store";
import { A5tableType } from "@/types";
import { MessageFu } from "@/utils/message";
import A5add from "./A5add";
import MyTable from "@/components/MyTable";
import { A5tableC } from "@/utils/tableData";

// const optionsArr = [
//   { value: "", label: "全部" },
//   { value: "三维文物", label: "三维文物" },
//   { value: "平面文物", label: "平面文物" },
//   { value: "油画", label: "油画" },
//   { value: "电子书", label: "电子书" },
// ];

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

  const [fromData, setFromData] = useState({
    pageNum: 1,
    pageSize: 10,
    searchKey: "",
    dictType: "",
  });

  const getListFu = useCallback(() => {
    dispatch(A5_APIgetList(fromData));
  }, [dispatch, fromData]);

  useEffect(() => {
    getListFu();
  }, [getListFu]);

  const [inputKey, setInputKey] = useState(1);

  // 标题的输入
  const timeRef = useRef(-1);
  const fromKeyChangeFu = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey") => {
      clearTimeout(timeRef.current);
      timeRef.current = window.setTimeout(() => {
        setFromData({ ...fromData, [key]: e.target.value, pageNum: 1 });
      }, 500);
    },
    [fromData]
  );

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setInputKey(Date.now());
    setFromData({
      pageNum: 1,
      pageSize: 10,
      searchKey: "",
      dictType: "",
    });
  }, []);

  const tableInfo = useSelector((state: RootState) => state.A5goods.tableInfo);

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res = await A5_APIdel(id);
      if (res.code === 0) {
        MessageFu.success("删除成功!");
        getListFu();
      }
    },
    [getListFu]
  );

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: "操作",
        render: (item: A5tableType) => (
          <>
            <Button size="small" type="text" onClick={() => setAddId(item.id)}>
              编辑
            </Button>

            <Popconfirm
              title="删除后无法恢复，是否删除?"
              okText="删除"
              cancelText="取消"
              onConfirm={() => delTableFu(item.id)}
            >
              <Button size="small" type="text" danger>
                删除
              </Button>
            </Popconfirm>
          </>
        ),
      },
    ];
  }, [delTableFu]);

  // 点击新增和编辑
  const [addId, setAddId] = useState(0);

  return (
    <div className={styles.A5goods}>
      <div className="pageTitle">馆藏管理</div>
      {/* 顶部筛选 */}
      <div className="A5top">
        <div className="A5topRow">
          <div>
            <span>搜索项：</span>
            <Input
              key={inputKey}
              maxLength={20}
              style={{ width: 300 }}
              placeholder="请输入名称"
              allowClear
              onChange={(e) => fromKeyChangeFu(e, "searchKey")}
            />
          </div>

          {/* <div>
            <span>类别：</span>
            <Select
              placeholder="请选择"
              style={{ width: 160 }}
              value={fromData.dictType}
              onChange={(e) =>
                setFromData({ ...fromData, dictType: e, pageNum: 1 })
              }
              options={optionsArr}
            />
          </div> */}
        </div>
        <div className="A5topRow">
          <Button onClick={resetSelectFu}>重置</Button>
          &emsp;&emsp;
          <Button type="primary" onClick={() => setAddId(-1)}>
            新增
          </Button>
        </div>
      </div>

      {/* 表格主体 */}
      <div className="A5tableBox">
        <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>
      {/* 新增和编辑 */}
      {addId ? (
        <A5add
          addId={addId}
          closeFu={() => setAddId(0)}
          addTableFu={() => resetSelectFu()}
          editTableFu={() => getListFu()}
        />
      ) : null}
    </div>
  );
}

const MemoA5goods = React.memo(A5goods);

export default MemoA5goods;