upp

src/pages/ObjectSon/Object1/index.tsx

@@ -1,9 +1,127 @@
+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 } from "antd";
+
+const { RangePicker } = DatePicker;
+
 export default function Object1() {
-  
+  const dataTit = useMemo(() => {
+    return [
+      { id: 1, name: "全部", num: 30 },
+      { id: 2, name: "待审核", num: 0 },
+      { id: 3, name: "代办理", num: 10 },
+      { id: 4, name: "审核不通过", num: 15 },
+      { id: 5, name: "已完成", num: 5 },
+    ];
+  }, []);
+
+  // 封装发送请求的函数
+  const getList = () => {
+    console.log("------", tableSelect);
+  };
+
+  // 顶部筛选
+  const [tableSelect, setTableSelect] = useState({
+    state: 1,
+    laiyuan: "藏品来源",
+    name: "",
+    staTime: "",
+    endTime: "",
+    pageSize: 10,
+    paseNum: 1,
+  });
+
+  useEffect(() => {
+    getList();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSelect]);
+
+  // 藏品来源下拉框筛选
+  const handleChange = (value: string) => {
+    setTableSelect({ ...tableSelect, laiyuan: value, paseNum: 1 });
+  };
+
+  // 单位或个人输入
+  const nameTime = useRef(-1);
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(nameTime.current);
+    nameTime.current = window.setTimeout(() => {
+      setTableSelect({ ...tableSelect, name: e.target.value, paseNum: 1 });
+    }, 500);
+  };
+
+  // 时间选择器改变
+  const timeChange = (date: any, dateString: any) => {
+    let staTime = "";
+    let endTime = "";
+    if (dateString[0] && dateString[1]) {
+      staTime = dateString[0] + " 00:00:00";
+      endTime = dateString[1] + " 23:59:59";
+    }
+    setTableSelect({ ...tableSelect, staTime, endTime, paseNum: 1 });
+  };
+
   return (
     <div className={styles.Object1}>
-      <h1>Object1</h1>
+      <div className="breadTit">
+        <BreadTit>
+          <div className="breadTitRow active">藏品登记</div>
+        </BreadTit>
+      </div>
+      <div className="objectSonMain">
+        {/* 顶部筛选 */}
+        <div className="objectSonMainTit">
+          {dataTit.map((v) => (
+            <div
+              key={v.id}
+              onClick={() =>
+                setTableSelect({ ...tableSelect, state: v.id, paseNum: 1 })
+              }
+              className={classNames(v.id === tableSelect.state ? "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.laiyuan}
+                onChange={handleChange}
+                options={[
+                  { value: "藏品来源", label: "藏品来源" },
+                  { value: "藏品来源1", label: "藏品来源1" },
+                ]}
+              />
+            </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">
+              
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-  )
+  );
 }