LSDF/src/pages/ObjectSon/Object4/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 { 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 {
  getObject4List,
  getObject4ListNum,
  object4DelAPI,
} from "@/store/action/object4";

const { RangePicker } = DatePicker;

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

  // 获取顶部数量

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

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

  const dataTit = useSelector(
    (state: RootState) => state.object4Store.infoNum4
  );

  // 封装发送请求的函数
  const getList = () => {
    const data = {
      ...tableSelect,
      pageNum: pageNumRef.current,
      status: statusRef.current,
    };
    dispatch(getObject4List(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,
    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 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) => {
    if (id)
      history.push(
        `/object/4/add?k=${pageNumRef.current}&d=${statusRef.current}&id=${id}`
      );
    else
      history.push(
        `/object/4/add?k=${pageNumRef.current}&d=${statusRef.current}`
      );
  };

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

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

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

  const results = useSelector((state: RootState) => state.object4Store.info4);

  const columns = useMemo(() => {
    return [
      {
        title: "出库编号",
        dataIndex: "num",
      },
      {
        title: "登记人员",
        dataIndex: "creatorName",
      },
      {
        title: "出库说明",
        render: (item: any) => (item.description ? item.description : "-"),
      },
      {
        title: "登记日期",
        dataIndex: "createTime",
      },
      {
        title: "出库日期",
        render: (item: any) => (item.day && item.status === 3 ? item.day : "-"),
      },
      {
        title: "状态",
        dataIndex: "statusTxt",
      },

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

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

            {item.status === 1 ? (
              <AuthButton
                id={405}
                onClick={() =>
                  history.push(
                    `/object/4/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 id={403} type="text" danger>
                  删除
                </AuthButton>
              </Popconfirm>
            ) : null}
          </>
        ),
      },
    ];
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  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>
              <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 id={402} 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>
  );
}