LSDF/src/pages/ObjectSon/Object1/index.tsx

import BreadTit from "@/components/BreadTit";
import classNames from "classnames";
import { useEffect, useMemo, useRef, useState } from "react";
import styles from "./index.module.scss";
import {
  Select,
  Input,
  DatePicker,
  Table,
  Button,
  Popconfirm,
  message,
} from "antd";
import AuthButton from "@/components/AuthButton";
import history from "@/utils/history";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import {
  getObject1List,
  getObject1ListNum,
  object1DelAPI,
} from "@/store/action/object1";

const { RangePicker } = DatePicker;

export default function Object1() {
  const dispatch = useDispatch();

  // 获取顶部数量

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

  // 顶部的状态改变了，统一管理，传到二级页码
  const statusRef = useRef<null | number>(null);

  const dataTit = useSelector((state: RootState) => state.object1Store.infoNum1);

  // 封装发送请求的函数
  const getList = () => {
    const data = { ...tableSelect, pageNum: pageNumRef.current };
    dispatch(getObject1List(data));
  };

  // 获取地址栏参数
  const location = useLocation();

  const pageNumRef = useRef(1);

  // 如果有参数 根据参数页码在次发送请求
  useEffect(() => {
    const urlParam = location.state || {};
    setTableSelect({
      ...tableSelect,
      pageNum: Number(urlParam.k) ? Number(urlParam.k) : 1,
      // eslint-disable-next-line eqeqeq
      status: urlParam.d&&urlParam.d!='null'? Number(urlParam.d) : null,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [location]);

  // 顶部筛选
  const [tableSelect, setTableSelect] = useState({
    status: null as null | number,
    sourceName: null,
    searchKey: "",
    startTime: "",
    endTime: "",
    pageSize: 10,
    pageNum: 1,
  });

  // 当前页码统一
  useEffect(() => {
    pageNumRef.current = tableSelect.pageNum;
  }, [tableSelect.pageNum]);

  // 顶部状态统一
  useEffect(() => {
    statusRef.current = tableSelect.status;
  }, [tableSelect.status]);

  // 防止返回的时候发送了2次请求来对应页码

  const getListRef = useRef(-1);

  useEffect(() => {
    clearTimeout(getListRef.current);
    getListRef.current = window.setTimeout(() => {
      getList();
    }, 100);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tableSelect]);

  // 藏品来源下拉框筛选
  const handleChange = (value: any) => {
    setTableSelect({ ...tableSelect, sourceName: value, pageNum: 1 });
  };

  // 登记人员输入
  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 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 addObject = (id?: any) => {
    // 清空详情页面里面的附件表格信息
    dispatch({ type: "login/setGoodsSonList", payload: [] });

    if (id)
      history.push(
        `/object/1/add?k=${pageNumRef.current}&d=${statusRef.current}&id=${id}`
      );
    else
      history.push(
        `/object/1/add?k=${pageNumRef.current}&d=${statusRef.current}`
      );
  };

  // 点击删除按钮
  const delOne = async (id: number) => {
    const res: any = await object1DelAPI(id);
    if (res.code === 0) {
      message.success("删除成功!");
      getList();
      dispatch(getObject1ListNum());
    }
  };

  // ---------关于表格

  // 页码变化
  const paginationChange = (pageNum: number, pageSize: number) => {
    setTableSelect({ ...tableSelect, pageNum, pageSize });
  };

  const results = useSelector((state: RootState) => state.object1Store.info1);

  const columns = useMemo(() => {
    return [
      {
        title: "登记编号",
        dataIndex: "num",
      },
      {
        title: "藏品来源",
        dataIndex: "sourceName",
      },
      {
        title: "登记人员",
        dataIndex: "creatorName",
      },
      {
        title: "创建日期",
        dataIndex: "createTime",
      },
      {
        title: "完成日期",
        render: (item: any) => (item.day ? item.day : "-"),
      },
      {
        title: "状态",
        dataIndex: "statusTxt",
      },

      {
        title: "操作",
        render: (item: any) => (
          <>
            <Button
              type="text"
              danger
              onClick={() =>
                history.push(
                  `/object/1/look?k=${pageNumRef.current}&d=${statusRef.current}&id=${item.id}`
                )
              }
            >
              查看
            </Button>

            {item.status === 0 || item.status === 2 ? (
              <AuthButton type="text" danger onClick={() => addObject(item.id)}>
                编辑
              </AuthButton>
            ) : null}

            {item.status === 1 ? (
              <AuthButton
                onClick={() =>
                  history.push(
                    `/object/1/audit?k=${pageNumRef.current}&d=${statusRef.current}&id=${item.id}`
                  )
                }
                type="text"
                danger
              >
                审核
              </AuthButton>
            ) : null}

            {item.status === 0 || item.status === 2 ? (
              <Popconfirm
                title="确定删除吗?"
                okText="确定"
                cancelText="取消"
                onConfirm={() => delOne(item.id)}
              >
                <AuthButton type="text" danger>
                  删除
                </AuthButton>
              </Popconfirm>
            ) : null}
          </>
        ),
      },
    ];
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 从仓库中获取藏品来源下拉数据
  const options = useSelector(
    (state: RootState) => state.loginStore.selectAll["文物来源"]
  );

  return (
    <div className={styles.Object1}>
      <div className="breadTit">
        <BreadTit>
          <div className="breadTitRow active">藏品登记</div>
        </BreadTit>
      </div>
      <div className="objectSonMain">
        {/* 顶部筛选 */}
        <div className="objectSonMainTit">
          {dataTit.map((v: any) => (
            <div
              key={v.id}
              onClick={() =>
                setTableSelect({ ...tableSelect, status: v.id, pageNum: 1 })
              }
              className={classNames(
                v.id === tableSelect.status ? "active" : ""
              )}
            >
              {v.name}（{v.num}）
            </div>
          ))}
        </div>
        <div className="objectSonMainTable">
          {/* 表格数据筛选 */}
          <div className="tableSelectBox">
            <div className="row">
              <span>藏品来源：</span>
              <Select
                placeholder="请选择"
                allowClear
                style={{ width: 150 }}
                value={tableSelect.sourceName}
                onChange={handleChange}
                options={options.map((v: any) => ({
                  label: v.name,
                  value: v.name,
                }))}
              />
            </div>
            <div className="row">
              <span>登记人员：</span>
              <Input
                maxLength={10}
                style={{ width: 150 }}
                placeholder="请输入"
                allowClear
                onChange={(e) => nameChange(e)}
              />
            </div>
            <div className="row">
              <span>创建日期：</span>
              <RangePicker onChange={timeChange} />
            </div>
            <div className="row">
              <AuthButton type="primary" onClick={() => addObject()}>
                新增
              </AuthButton>
            </div>
          </div>

          {/* 表格主体 */}
          <div className="tableMain">
            <Table
              scroll={{ y: 428 }}
              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,
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}