|
@@ -1,9 +1,294 @@
|
|
|
+import BreadTit from "@/components/BreadTit";
|
|
|
+import classNames from "classnames";
|
|
|
+import { useEffect, useMemo, useRef, useState } from "react";
|
|
|
import styles from "./index.module.scss";
|
|
|
-export default function Object3() {
|
|
|
-
|
|
|
+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 {
|
|
|
+ getObject3List,
|
|
|
+ getObject3ListNum,
|
|
|
+ object3DelAPI,
|
|
|
+} from "@/store/action/object3";
|
|
|
+
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
+
|
|
|
+export default function Object1() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+
|
|
|
+ // 获取顶部数量
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ dispatch(getObject3ListNum());
|
|
|
+ }, [dispatch]);
|
|
|
+
|
|
|
+ // 顶部的状态改变了,统一管理,传到二级页码
|
|
|
+ const statusRef = useRef<null | number>(null);
|
|
|
+
|
|
|
+ const dataTit = useSelector(
|
|
|
+ (state: RootState) => state.object3Store.infoNum3
|
|
|
+ );
|
|
|
+
|
|
|
+ // 封装发送请求的函数
|
|
|
+ const getList = () => {
|
|
|
+ const data = { ...tableSelect, pageNum: pageNumRef.current };
|
|
|
+ dispatch(getObject3List(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/3/add?k=${pageNumRef.current}&d=${statusRef.current}&id=${id}`
|
|
|
+ );
|
|
|
+ else
|
|
|
+ history.push(
|
|
|
+ `/object/3/add?k=${pageNumRef.current}&d=${statusRef.current}`
|
|
|
+ );
|
|
|
+ };
|
|
|
+
|
|
|
+ // 点击删除按钮
|
|
|
+ const delOne = async (id: number) => {
|
|
|
+ const res: any = await object3DelAPI(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ message.success("删除成功!");
|
|
|
+ getList();
|
|
|
+ dispatch(getObject3ListNum());
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // ---------关于表格
|
|
|
+
|
|
|
+ // 页码变化
|
|
|
+ const paginationChange = (pageNum: number, pageSize: number) => {
|
|
|
+ setTableSelect({ ...tableSelect, pageNum, pageSize });
|
|
|
+ };
|
|
|
+
|
|
|
+ const results = useSelector((state: RootState) => state.object3Store.info3);
|
|
|
+
|
|
|
+ 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
|
|
|
+ }, []);
|
|
|
+
|
|
|
return (
|
|
|
- <div className={styles.Object3}>
|
|
|
- <h1>Object3</h1>
|
|
|
+ <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 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>
|
|
|
- )
|
|
|
+ );
|
|
|
}
|