upp

src/assets/styles/base.css

@@ -1,35 +1,42 @@
-*{
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
+
 html {
   height: 100%;
   font-size: 14px;
   user-select: none;
 }
-body{
+
+body {
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
   height: 100%;
   color: #333;
 }
+
 a {
   text-decoration: none;
   color: #333;
   outline: none;
 }
+
 i {
   font-style: normal;
 }
+
 img {
   max-width: 100%;
   max-height: 100%;
   vertical-align: middle;
 }
+
 ul {
   list-style: none;
 }
-#root{
+
+#root {
   width: 100vw;
   height: 100vh;
   min-width: 1600px;
@@ -37,7 +44,83 @@ ul {
   overflow-y: auto;
 
 }
+
+/* 文本域取消下拉 */
+textarea{
+  resize:none !important;
+}
+
 /* 主题色 */
-:root{
-  --themeColor:#9F1927
+:root {
+  --themeColor: #9F1927
+}
+
+/* 按钮的危险颜色 */
+.ant-btn-text.ant-btn-dangerous {
+  color: var(--themeColor);
+}
+
+/* antd分页器样式 */
+.ant-pagination .ant-pagination-item {
+  border-radius: 50%;
+  border: 1px solid #999;
+  background-color: transparent !important;
+}
+
+.ant-pagination .ant-pagination-item-active {
+  background-color: var(--themeColor) !important;
+}
+
+
+.ant-pagination .ant-pagination-item-active a {
+  color: #fff !important;
+}
+
+.ant-pagination .ant-pagination-item:hover {
+  background-color: var(--themeColor) !important;
+}
+
+.ant-pagination .ant-pagination-item:hover a {
+  color: #fff !important;
+}
+
+.ant-pagination-prev {
+  border-radius: 50% !important;
+  border: 1px solid #999;
+}
+
+.ant-pagination-prev:hover {
+  background-color: var(--themeColor);
+}
+
+.ant-pagination-prev:hover button {
+  color: #fff;
+}
+
+
+
+.ant-pagination-next {
+  border-radius: 50% !important;
+  border: 1px solid #999;
+}
+
+
+.ant-pagination-next:hover {
+  background-color: var(--themeColor);
+}
+
+.ant-pagination-next:hover button {
+  color: #fff;
+}
+
+.ant-pagination-disabled {
+  border: 1px solid #ccc;
+}
+
+.ant-pagination-disabled:hover {
+  background-color: transparent;
+}
+
+img{
+  object-fit: cover;
 }

src/components/AuthButton/index.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import { Button } from "antd";
+
+type Props = {
+  [x: string]: any;
+  children?: ReactNode;
+};
+function AuthButton({ children, ...rest }: Props) {
+  // console.log({ children, ...rest });
+
+  return <Button {...rest}>{children}</Button>;
+}
+
+const MemoAuthButton = React.memo(AuthButton);
+
+export default MemoAuthButton;

src/pages/Layout/index.module.scss

@@ -195,13 +195,19 @@
               margin: 0 auto;
               height: calc(100% - 80px);
               .tableSelectBox{
+                margin-bottom: 20px;
                 width: 100%;
+                height: 40px;
                 display: flex;
                 align-items: center;
                 .row{
                   margin-right: 30px;
                 }
               }
+              .tableMain{
+                width: 100%;
+                height: calc(100% - 60px);
+              }
             }
           }
         }

src/pages/Object/index.tsx

@@ -48,6 +48,17 @@ export default function Object() {
     ];
   }, []);
 
+  const dataIn = useMemo(() => {
+    return [
+      {
+        id: 1001,
+        name: "藏品登记新增",
+        Com: React.lazy(() => import("../ObjectSon/Object1/AddObject1")),
+        path: "/object/1/add",
+      },
+    ];
+  }, []);
+
   return (
     <div className={styles.Object}>
       <div className="leftBar">
@@ -65,6 +76,12 @@ export default function Object() {
                 component={v.Com}
               />
             ))}
+
+            {/* 新增 */}
+            {dataIn.map((v) => (
+              <AuthRoute key={v.id} path={v.path} component={v.Com} />
+            ))}
+
             <Route path="*" component={NotFound} />
           </Switch>
         </React.Suspense>

src/pages/ObjectSon/Object1/AddObject1/index.module.scss

@@ -0,0 +1,87 @@
+.AddObject1 {
+  :global {
+    .objectSonMain {
+      padding: 10px 30px;
+
+      .addInfoTop {
+        .row {
+          display: flex;
+          justify-content: space-between;
+          height: 50px;
+
+          &>div {
+            width: 45%;
+            height: 50px;
+            align-items: center;
+            display: flex;
+
+            &>span {
+              width: 80px;
+            }
+
+            .bs {
+              position: relative;
+
+              &::before {
+                content: '*';
+                position: absolute;
+                z-index: 10;
+                top: 2px;
+                left: -10px;
+                color: #ff4d4f;
+
+              }
+            }
+          }
+        }
+
+        .rowAll {
+          display: flex;
+          margin-top: 6px;
+
+          &>span {
+            width: 80px;
+          }
+
+          .ant-input-textarea {
+            width: calc(100% - 80px);
+          }
+        }
+      }
+
+      .addTableBox {
+        margin-top: 30px;
+        width: 100%;
+        height: 430px;
+
+        .addTableBox_Tit {
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .addTableBox_TitL {
+            display: flex;
+            align-items: center;
+            color: var(--themeColor);
+            font-size: 20px;
+            font-weight: 700;
+          }
+        }
+
+        .addTableBox_table {
+          width: 100%;
+          height: calc(100% - 90px);
+        }
+
+        .addTableBox_btn {
+          width: 100%;
+          height: 40px;
+          display: flex;
+          justify-content: center;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,233 @@
+import AuthButton from "@/components/AuthButton";
+import BreadTit from "@/components/BreadTit";
+import history, { urlParameter } from "@/utils/history";
+import { Input, message, Select, Image, Table, Popconfirm } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import React, { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+import imgErr from "@/assets/img/login/imgErr.png";
+import styles from "./index.module.scss";
+function AddObject1() {
+  // 获取地址栏参数
+  const location = useLocation();
+  const [urlParam, setUrlParam] = useState<any>({});
+  useEffect(() => {
+    setUrlParam(urlParameter(location.search));
+  }, [location]);
+
+  // 顶部数据
+  const [addInfoTop, setAddInfoTop] = useState({
+    num: "DJ20221212009",
+    user: "admin",
+    laiyuan: "藏品来源",
+    txt: "",
+  });
+
+  // 藏品来源下拉框
+  const handleChange = (value: string) => {
+    setAddInfoTop({ ...addInfoTop, laiyuan: value });
+  };
+
+  // const tabList = useMemo(() => {
+  //   return [
+  //     { id: 1, value: "img", label: "高清图片" },
+  //     { id: 2, value: "video", label: "视频文件" },
+  //     { id: 3, value: "audio", label: "音频文件" },
+  //     { id: 4, value: "model", label: "三维模型" },
+  //     { id: 5, value: "file", label: "文档资料" },
+  //   ];
+  // }, []);
+
+  // 表格数据
+
+  // 选中的表格数据
+  const [tableSelectList, setTableSelectList] = useState([]);
+
+  // 点击删除
+  const delTableListFu = () => {
+    console.log("删除");
+  };
+
+  const rowSelection = {
+    onChange: (selectedRowKeys: any, selectedRows: any) => {
+      setTableSelectList(selectedRows);
+    },
+  };
+
+  const [results, setResults] = useState([
+    {
+      id: 1,
+      name: "图片1",
+      img: "https://ts1.cn.mm.bing.net/th/id/R-C.6d2d3fecd79a96e43d1a410640d7199b?rik=B7RCgF82Vb7P0A&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20190831%2f3e03e9c2473c40b180aa99a37c0589fa.jpeg&ehk=JXdgMrjnolHlMkdX9N0K7%2fzBc9wi7FSFDjSGclreQbI%3d&risl=&pid=ImgRaw&r=0",
+    },
+    { id: 2, name: "图片2", img: "" },
+    { id: 3, name: "图片3", img: "" },
+    { id: 4, name: "图片4", img: "" },
+    { id: 5, name: "图片4", img: "" },
+    { id: 6, name: "图片4", img: "" },
+    { id: 7, name: "图片4", img: "" },
+    { id: 8, name: "图片4", img: "" },
+    { id: 9, name: "图片4", img: "" },
+    { id: 10, name: "图片4", img: "" },
+    {
+      id: 11,
+      name: "图片4",
+      img: "https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0",
+    },
+  ]);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "缩略图",
+        render: (item: any) => (
+          <div className="tableImg">
+            <Image
+              width={120}
+              height={70}
+              placeholder={true}
+              fallback={imgErr}
+              src={item.img}
+            />
+          </div>
+        ),
+      },
+      {
+        title: "标题",
+        dataIndex: "name",
+      },
+      {
+        title: "操作",
+        render: (item: any) => (
+          <>
+            <AuthButton type="text" danger>
+              编辑
+            </AuthButton>
+            <AuthButton type="text" danger>
+              删除
+            </AuthButton>
+          </>
+        ),
+      },
+    ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 点击返回
+  const cancelFu = () => {
+    history.push({
+      pathname: `/object`,
+      state: { k: urlParam.k ? urlParam.k : "1" },
+    });
+  };
+
+  // 点击提交
+  const submitFu = () => {
+    if (results.length === 0)
+      return message.warning("至少需要添加一条藏品信息!");
+    // cancelFu()
+  };
+
+  return (
+    <div className={styles.AddObject1}>
+      <div className="breadTit">
+        <BreadTit>
+          <div className="breadTitRow">藏品登记</div>
+          <div className="splitStr">/</div>
+          <div className="breadTitRow active">
+            {urlParam.id ? "编辑" : "新增"}
+          </div>
+        </BreadTit>
+      </div>
+
+      <div className="objectSonMain">
+        {/* 上面的信息展示 */}
+        <div className="addInfoTop">
+          <div className="row">
+            <div>
+              <span className="bs">登记编号：</span>
+              <Input style={{ width: 400 }} value={addInfoTop.num} disabled />
+            </div>
+            <div>
+              <span className="bs">登记人员：</span>
+              <Input style={{ width: 400 }} value={addInfoTop.user} disabled />
+            </div>
+          </div>
+          <div className="row">
+            <div>
+              <span className="bs">藏品来源：</span>
+              <Select
+                placeholder="请选择"
+                style={{ width: 400 }}
+                value={addInfoTop.laiyuan}
+                onChange={handleChange}
+                options={[
+                  { value: "藏品来源", label: "藏品来源" },
+                  { value: "藏品来源1", label: "藏品来源1" },
+                ]}
+              />
+            </div>
+          </div>
+          <div className="rowAll">
+            <span>登记说明：</span>
+            <TextArea
+              value={addInfoTop.txt}
+              onChange={(e) =>
+                setAddInfoTop({ ...addInfoTop, txt: e.target.value })
+              }
+              rows={3}
+              placeholder="请输入"
+              showCount
+              maxLength={255}
+            />
+          </div>
+        </div>
+
+        {/* 下面的表格 */}
+        <div className="addTableBox">
+          <div className="addTableBox_Tit">
+            <div className="addTableBox_TitL">藏品信息</div>
+            <div className="addTableBox_TitR">
+              <AuthButton>添加</AuthButton>&emsp;
+              <Popconfirm
+                title="确定删除吗?"
+                okText="确定"
+                cancelText="取消"
+                onConfirm={delTableListFu}
+              >
+                <AuthButton disabled={tableSelectList.length === 0}>
+                  删除
+                </AuthButton>
+              </Popconfirm>
+            </div>
+          </div>
+          {/* 表格主体 */}
+          <div className="addTableBox_table">
+            <Table
+              scroll={{ y: 280 }}
+              rowSelection={{
+                type: "checkbox",
+                ...rowSelection,
+              }}
+              dataSource={results}
+              columns={columns}
+              rowKey="id"
+              pagination={false}
+            />
+          </div>
+          <div className="addTableBox_btn">
+            <AuthButton type="primary" onClick={submitFu}>
+              提交
+            </AuthButton>
+            &emsp;
+            <AuthButton onClick={cancelFu}>返回</AuthButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoAddObject1 = React.memo(AddObject1);
+
+export default MemoAddObject1;

src/pages/ObjectSon/Object1/index.tsx

@@ -2,7 +2,10 @@ 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";
+import { Select, Input, DatePicker, Table } from "antd";
+import AuthButton from "@/components/AuthButton";
+import history from "@/utils/history";
+import { useLocation } from "react-router-dom";
 
 const { RangePicker } = DatePicker;
 
@@ -19,9 +22,23 @@ export default function Object1() {
 
   // 封装发送请求的函数
   const getList = () => {
-    console.log("------", tableSelect);
+    const data = { ...tableSelect, pageNum: pageNumRef.current };
+    console.log("------", data);
   };
 
+  // 获取地址栏参数
+  const location = useLocation();
+
+  const pageNumRef = useRef(1);
+
+  // 如果有参数 根据参数页码在次发送请求
+  useEffect(() => {
+    const urlParam = location.state || {};
+    if (urlParam.k && urlParam.k !== "1")
+      setTableSelect({ ...tableSelect, pageNum: Number(urlParam.k) });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location]);
+
   // 顶部筛选
   const [tableSelect, setTableSelect] = useState({
     state: 1,
@@ -30,9 +47,14 @@ export default function Object1() {
     staTime: "",
     endTime: "",
     pageSize: 10,
-    paseNum: 1,
+    pageNum: 1,
   });
 
+  // 当前页码统一
+  useEffect(() => {
+    pageNumRef.current = tableSelect.pageNum;
+  }, [tableSelect.pageNum]);
+
   useEffect(() => {
     getList();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -40,7 +62,7 @@ export default function Object1() {
 
   // 藏品来源下拉框筛选
   const handleChange = (value: string) => {
-    setTableSelect({ ...tableSelect, laiyuan: value, paseNum: 1 });
+    setTableSelect({ ...tableSelect, laiyuan: value, pageNum: 1 });
   };
 
   // 单位或个人输入
@@ -48,7 +70,7 @@ export default function Object1() {
   const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     clearTimeout(nameTime.current);
     nameTime.current = window.setTimeout(() => {
-      setTableSelect({ ...tableSelect, name: e.target.value, paseNum: 1 });
+      setTableSelect({ ...tableSelect, name: e.target.value, pageNum: 1 });
     }, 500);
   };
 
@@ -60,9 +82,75 @@ export default function Object1() {
       staTime = dateString[0] + " 00:00:00";
       endTime = dateString[1] + " 23:59:59";
     }
-    setTableSelect({ ...tableSelect, staTime, endTime, paseNum: 1 });
+    setTableSelect({ ...tableSelect, staTime, endTime, pageNum: 1 });
+  };
+
+  // 点击新增或者编辑按钮
+  const addObject = (id?: any) => {
+    if (id) history.push(`/object/1/add?k=${pageNumRef.current}&id=${id}`);
+    else history.push(`/object/1/add?k=${pageNumRef.current}`);
+  };
+
+  // 关于表格的数据
+  const paginationChange = (pageNum: number, pageSize: number) => {
+    setTableSelect({ ...tableSelect, pageNum, pageSize });
+  };
+
+  const results = {
+    list: [
+      { name: "666-1", id: 1 },
+      { name: "666-2", id: 2 },
+      { name: "666-3", id: 3 },
+      { name: "666-4", id: 4 },
+      { name: "666-5", id: 5 },
+      { name: "666-6", id: 6 },
+      { name: "666-7", id: 7 },
+      { name: "666-8", id: 8 },
+      { name: "666-9", id: 9 },
+      { name: "666-10", id: 10 },
+      { name: "666-11", id: 11 },
+      { name: "666-12", id: 12 },
+      { name: "666-13", id: 13 },
+      { name: "666-14", id: 14 },
+      { name: "666-15", id: 15 },
+      { name: "666-16", id: 16 },
+      { name: "666-17", id: 17 },
+      { name: "666-18", id: 18 },
+      { name: "666-19", id: 19 },
+      { name: "666-20", id: 20 },
+      { name: "666-21", id: 21 },
+      { name: "666-22", id: 22 },
+      { name: "666-23", id: 23 },
+    ],
+    total: 23,
   };
 
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "标题",
+        dataIndex: "name",
+      },
+      {
+        title: "操作",
+        render: (item: any) => (
+          <>
+            <AuthButton type="text" danger>
+              查看
+            </AuthButton>
+            <AuthButton type="text" danger onClick={() => addObject(item.id)}>
+              编辑
+            </AuthButton>
+            <AuthButton type="text" danger>
+              删除
+            </AuthButton>
+          </>
+        ),
+      },
+    ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className={styles.Object1}>
       <div className="breadTit">
@@ -77,7 +165,7 @@ export default function Object1() {
             <div
               key={v.id}
               onClick={() =>
-                setTableSelect({ ...tableSelect, state: v.id, paseNum: 1 })
+                setTableSelect({ ...tableSelect, state: v.id, pageNum: 1 })
               }
               className={classNames(v.id === tableSelect.state ? "active" : "")}
             >
@@ -117,9 +205,29 @@ export default function Object1() {
               <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={{
+                position: ["bottomCenter"],
+                showSizeChanger: true,
+                current: tableSelect.pageNum,
+                pageSize: tableSelect.pageSize,
+                total: results.total,
+                onChange: paginationChange,
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>

src/pages/初始化组件/index.module.scss

@@ -1,4 +1,4 @@
-.Layout{
+.AAAAA{
   :global{
     
   }

src/pages/初始化组件/index.tsx

@@ -1,9 +1,14 @@
+import React from "react";
 import styles from "./index.module.scss";
-export default function Layout() {
+ function AAAAA() {
   
   return (
-    <div className={styles.Layout}>
-      <h1>123</h1>
+    <div className={styles.AAAAA}>
+      <h1>AAAAA</h1>
     </div>
   )
 }
+
+const MemoAAAAA = React.memo(AAAAA);
+
+export default MemoAAAAA;

src/utils/history.ts

@@ -1,3 +1,17 @@
-import { createHashHistory  } from 'history'
-const history = createHashHistory()
-export default history
+import { createHashHistory } from "history";
+const history = createHashHistory();
+export default history;
+
+export const urlParameter = (data: string) => {
+  if (data) {
+    const query = data.substring(data.indexOf("?") + 1);
+    const arr = query.split("&");
+    const params = {} as any;
+    arr.forEach((v) => {
+      const key = v.substring(0, v.indexOf("="));
+      const val = v.substring(v.indexOf("=") + 1);
+      params[key] = val;
+    });
+    return params;
+  } else return {};
+};