|
@@ -1,12 +1,123 @@
|
|
|
-import React from "react";
|
|
|
+import React, { useCallback, useEffect, useRef, useState } from "react";
|
|
|
import styles from "./index.module.scss";
|
|
|
- function A7Recycled() {
|
|
|
-
|
|
|
+import { Button, DatePicker, Input, Popconfirm } from "antd";
|
|
|
+import { useDispatch } from "react-redux";
|
|
|
+import { A7_APIgetList } from "@/store/action/A7Recycled";
|
|
|
+
|
|
|
+const { RangePicker } = DatePicker;
|
|
|
+
|
|
|
+function A7Recycled() {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+
|
|
|
+ const [fromData, setFromData] = useState({
|
|
|
+ searchKey: "",
|
|
|
+ userId: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ sizeMin: "",
|
|
|
+ sizeMax: "",
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 输入框的定时器
|
|
|
+ const tableTime = useRef(-1);
|
|
|
+
|
|
|
+ const getListFu = useCallback(() => {
|
|
|
+ clearTimeout(tableTime.current);
|
|
|
+
|
|
|
+ tableTime.current = window.setTimeout(() => {
|
|
|
+ const obj = {
|
|
|
+ ...fromData,
|
|
|
+ sizeMin: fromData.sizeMin ? Number(fromData.sizeMin) : null,
|
|
|
+ sizeMax: fromData.sizeMax ? Number(fromData.sizeMax) : null,
|
|
|
+ };
|
|
|
+
|
|
|
+ console.log("---", obj);
|
|
|
+
|
|
|
+ // dispatch(A7_APIgetList(obj));
|
|
|
+ }, 500);
|
|
|
+ }, [dispatch, fromData]);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ getListFu();
|
|
|
+ }, [getListFu]);
|
|
|
+
|
|
|
+ // 输入框的输入
|
|
|
+ const tabInputChangeFu = useCallback(
|
|
|
+ (e: React.ChangeEvent<HTMLInputElement>, key: "searchKey" | "userId") => {
|
|
|
+ setFromData({
|
|
|
+ ...fromData,
|
|
|
+ [key]: e.target.value,
|
|
|
+ pageNum: 1,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ [fromData]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 时间选择器改变
|
|
|
+ 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";
|
|
|
+ }
|
|
|
+ setFromData({ ...fromData, startTime, endTime, pageNum: 1 });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 点击删除
|
|
|
+ const delById = useCallback((ids: string) => {}, []);
|
|
|
+
|
|
|
return (
|
|
|
<div className={styles.A7Recycled}>
|
|
|
- <h1>A7Recycled</h1>
|
|
|
+ <div className="pageTitle">回收站 当前文件占用内存:</div>
|
|
|
+ <div className="A7Top">
|
|
|
+ <div className="A7TopRow">
|
|
|
+ <span>文件名称:</span>
|
|
|
+ <Input
|
|
|
+ maxLength={30}
|
|
|
+ style={{ width: 200 }}
|
|
|
+ placeholder="请输入内容,最多30字"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => tabInputChangeFu(e, "searchKey")}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="A7TopRow">
|
|
|
+ <span>删除人:</span>
|
|
|
+ <Input
|
|
|
+ maxLength={10}
|
|
|
+ style={{ width: 200 }}
|
|
|
+ placeholder="请输入内容,最多10字"
|
|
|
+ allowClear
|
|
|
+ onChange={(e) => tabInputChangeFu(e, "userId")}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="A7TopRow">
|
|
|
+ <span>删除日期:</span>
|
|
|
+ <RangePicker onChange={timeChange} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="A7TopBtn">
|
|
|
+ <Popconfirm
|
|
|
+ title="此次为物理删除,无法找回。请谨慎操作"
|
|
|
+ okText="删除"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => delById("123")}
|
|
|
+ okButtonProps={{ loading: false }}
|
|
|
+ >
|
|
|
+ <Button type="primary" danger>
|
|
|
+ 批量删除
|
|
|
+ </Button>
|
|
|
+ </Popconfirm>
|
|
|
+  
|
|
|
+ <Button type="primary">批量恢复</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- )
|
|
|
+ );
|
|
|
}
|
|
|
|
|
|
const MemoA7Recycled = React.memo(A7Recycled);
|