upp

src/components/ImageLazy/index.tsx

@@ -12,9 +12,10 @@ type Props = {
   width?: number;
   height?: number;
   src: string;
+  noLook?: boolean;
 };
 
-function ImageLazy({ width = 100, height = 100, src }: Props) {
+function ImageLazy({ width = 100, height = 100, src, noLook }: Props) {
   const [defaultUrl, setDefaultUrl] = useState(imgLoding);
   const [defaultShow, setDefaultShow] = useState(true);
 
@@ -46,11 +47,13 @@ function ImageLazy({ width = 100, height = 100, src }: Props) {
           alt=""
         />
         {/* 图片预览 */}
-        <div className="lookImg" onClick={() => setVisible(true)}>
-          <EyeOutlined />
-          &nbsp;
-          <div>预览</div>
-        </div>
+        {noLook ? null : (
+          <div className="lookImg" onClick={() => setVisible(true)}>
+            <EyeOutlined />
+            &nbsp;
+            <div>预览</div>
+          </div>
+        )}
       </div>
 
       <img

src/components/LookObjTable/index.css

@@ -45,6 +45,20 @@
 .lookObjTable .goodsInfo .row > div p {
   width: calc(100% - 110px);
 }
+.lookObjTable .goodsInfo .rowFull {
+  display: flex;
+  padding: 5px;
+  border: 1px solid #ccc;
+}
+.lookObjTable .goodsInfo .rowFull span {
+  font-weight: 700;
+  display: inline-block;
+  width: 100px;
+  text-align: right;
+}
+.lookObjTable .goodsInfo .rowFull p {
+  width: calc(100% - 110px);
+}
 .lookObjTable .goodsBtn {
   margin-top: 20px;
   text-align: center;

src/components/LookObjTable/index.less

@@ -56,6 +56,21 @@
         }
       }
     }
+    .rowFull{
+      display: flex;
+      padding: 5px;
+      border: 1px solid #ccc;
+      span {
+        font-weight: 700;
+        display: inline-block;
+        width: 100px;
+        text-align: right;
+      }
+
+      p {
+        width: calc(100% - 110px);
+      }
+    }
 
     // .rowThree {
     //   display: flex;

src/components/LookObjTable/index.tsx

@@ -259,15 +259,13 @@ function LookObjTable({ data, y }: Props) {
             </div>            
           </div> */}
 
-          <div className="row">
-            <div>
-              <span>外形尺寸：</span>
-              <p>（通长）66666666（通宽）66666666（通高）66666666</p>
-            </div>
-            <div>
-              <span>具体尺寸：</span>
-              <p>666666666</p>
-            </div>
+          <div className="rowFull">
+            <span>外形尺寸：</span>
+            <p>（通长）66666666&emsp;（通宽）66666666&emsp;（通高）66666666</p>
+          </div>
+          <div className="rowFull">
+            <span>具体尺寸：</span>
+            <p>666666666</p>
           </div>
 
           <div className="row">
@@ -314,15 +312,13 @@ function LookObjTable({ data, y }: Props) {
             </div>
           </div>
 
-          <div className="row">
-            <div>
-              <span>存卷：</span>
-              <p>666666666</p>
-            </div>
-            <div>
-              <span>来源说明：</span>
-              <p>454654654564654</p>
-            </div>
+          <div className="rowFull">
+            <span>存卷：</span>
+            <p>666666666</p>
+          </div>
+          <div className="rowFull">
+            <span>来源说明：</span>
+            <p>454654654564654</p>
           </div>
         </div>
 

src/components/ObjectAdd/index.tsx

@@ -505,7 +505,7 @@ function ObjectAdd({ id, colsePage }: Props) {
                 <InputNumber
                   min={1}
                   maxLength={8}
-                  placeholder="请输入"
+                  placeholder="请输入数字"
                   addonAfter={
                     <Select
                       value={danweiValue}

src/pages/Object/index.tsx

@@ -9,6 +9,9 @@ import NotFound from "@/components/NotFound";
 const LookObject1 = React.lazy(
   () => import("../ObjectSon/Object1/LookObject1")
 );
+const LookObject2 = React.lazy(
+  () => import("../ObjectSon/Object2/LookObject2")
+);
 
 export default function Object() {
   const data = useMemo(() => {
@@ -60,6 +63,12 @@ export default function Object() {
         Com: React.lazy(() => import("../ObjectSon/Object1/AddObject1")),
         path: "/object/1/add",
       },
+      {
+        id: 1002,
+        name: "藏品登记审核",
+        Com: React.lazy(() => import("../ObjectSon/Object1/AuditObject1")),
+        path: "/object/1/audit",
+      },
     ];
   }, []);
 
@@ -74,7 +83,8 @@ export default function Object() {
           <Switch>
             {data.map((v, i) => (
               <AuthRoute
-                exact={i === 0 ? true : false}
+              exact
+                // exact={i === 0 ? true : false}
                 key={v.id}
                 path={v.path}
                 component={v.Com}
@@ -83,6 +93,8 @@ export default function Object() {
 
             {/* 查看页面，无需权限 */}
             <AuthRoute path="/object/1/look" component={LookObject1} />
+            <AuthRoute path="/object/2/look" component={LookObject2} />
+
             {/* 新增 */}
             {dataIn.map((v) => (
               <AuthRoute key={v.id} path={v.path} component={v.Com} />

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

@@ -0,0 +1,81 @@
+.AuditObject1 {
+  :global {
+    .objectSonMain {
+      padding: 10px 30px;
+
+      .topTit {
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--themeColor);
+        margin-bottom: 12px;
+      }
+
+      .topInfo {
+        .topInfoRow {
+          display: flex;
+
+          &>div {
+            width: 33.33%;
+            border: 1px solid #ccc;
+            height: 34px;
+            line-height: 32px;
+            display: flex;
+
+            .one {
+              font-weight: 700;
+              width: 80px;
+              text-align: right;
+            }
+          }
+        }
+
+        .topInfoTex {
+          cursor: pointer;
+          border: 1px solid #ccc;
+          padding: 5px 10px 4px;
+          display: -webkit-box;
+          overflow: hidden;
+          white-space: normal !important;
+          text-overflow: ellipsis;
+          word-wrap: break-word;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+
+          &>span {
+            font-weight: 700;
+          }
+        }
+
+      }
+
+      .goodsInfo{
+        .inputBox1{
+          margin-bottom: 10px;
+          display: flex;
+          align-items: center;
+          .inputBoxTit{
+            font-weight: 700;
+            width: 90px;
+            &>span{
+              position: relative;
+              top: 3px;
+              color: #ff4d4f;
+            }
+          }
+          .inputBoxText{
+            width: calc(100% - 90px);
+          }
+        }
+        .inputBox2{
+          align-items: flex-start;
+        }
+      }
+
+      .backBtn {
+        margin-top: 12px;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}

src/pages/ObjectSon/Object1/index.tsx

@@ -75,7 +75,7 @@ export default function Object1() {
     setTableSelect({ ...tableSelect, laiyuan: value, pageNum: 1 });
   };
 
-  // 单位或个人输入
+  // 登记人员输入
   const nameTime = useRef(-1);
   const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     clearTimeout(nameTime.current);
@@ -165,7 +165,15 @@ export default function Object1() {
               编辑
             </AuthButton>
 
-            <AuthButton type="text" danger>
+            <AuthButton
+              onClick={() =>
+                history.push(
+                  `/object/1/audit?k=${pageNumRef.current}&id=${item.id}`
+                )
+              }
+              type="text"
+              danger
+            >
               审核
             </AuthButton>
             <Popconfirm
@@ -230,7 +238,7 @@ export default function Object1() {
               />
             </div>
             <div className="row">
-              <span>单位或个人：</span>
+              <span>登记人员：</span>
               <Input
                 maxLength={10}
                 style={{ width: 150 }}
@@ -258,6 +266,7 @@ export default function Object1() {
               columns={columns}
               rowKey="id"
               pagination={{
+                showQuickJumper:true,
                 position: ["bottomCenter"],
                 showSizeChanger: true,
                 current: tableSelect.pageNum,

src/pages/ObjectSon/Object2/LookObject2/index.module.scss

@@ -0,0 +1,5 @@
+.LookObject2{
+  :global{
+    
+  }
+}

src/pages/ObjectSon/Object2/LookObject2/index.tsx

@@ -0,0 +1,43 @@
+import BreadTit from "@/components/BreadTit";
+import history, { urlParameter } from "@/utils/history";
+import { Button } from "antd";
+import React, { useEffect, useRef } from "react";
+import { useLocation } from "react-router-dom";
+import styles from "./index.module.scss";
+function LookObject2() {
+  // 获取地址栏参数
+  const location = useLocation();
+  const urlParamRef = useRef<any>({});
+  useEffect(() => {
+    urlParamRef.current = urlParameter(location.search);
+    // console.log("地址栏参数", urlParamRef.current);
+  }, [location]);
+
+  // 点击返回
+  const cancelFu = () => {
+    history.push({
+      pathname: `/object/2`,
+      state: { k: urlParamRef.current.k ? urlParamRef.current.k : "1" },
+    });
+  };
+  return (
+    <div className={styles.LookObject2}>
+      <div className="breadTit">
+        <BreadTit>
+          <div className="breadTitRow">藏品总账</div>
+          <div className="splitStr">/</div>
+          <div className="breadTitRow active">查看</div>
+        </BreadTit>
+      </div>
+      <div className="objectSonMain">
+        <div className="backBtn">
+          <Button onClick={cancelFu}>返回</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoLookObject2 = React.memo(LookObject2);
+
+export default MemoLookObject2;

src/pages/ObjectSon/Object2/index.module.scss

@@ -1,5 +1,81 @@
-.Object2{
-  :global{
-    
+.Object2 {
+  :global {
+    .searchBox {
+      padding: 20px 35px;
+      display: flex;
+      align-items: center;
+
+      .row {
+        margin-right: 50px;
+
+        .cutShow {
+          cursor: pointer;
+          display: inline-block;
+          width: 50px;
+          height: 32px;
+          border: 1px solid #ccc;
+          border-radius: 4px 0 0 4px;
+          font-size: 20px;
+          text-align: center;
+        }
+
+        .cutShow2 {
+          border-radius: 0 4px 4px 0;
+        }
+
+        .active {
+          pointer-events: none;
+          color: #D3B453;
+          background-color: var(--themeColor);
+        }
+      }
+    }
+
+    .imgList {
+      padding: 0 30px;
+      width: 100%;
+      height: calc(100% - 176px);
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+
+      .imgListRow {
+        cursor: pointer;
+
+        width: 195px;
+        height: 230px;
+        border: 1px solid #ccc;
+        margin: 0 20px 20px 0;
+
+        &:nth-of-type(6n) {
+          margin: 0 0 20px 0;
+        }
+
+        &>p {
+          border-top: 1px solid #ccc;
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          padding: 0 3px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+
+    .tableBox {
+      height: calc(100% - 176px);
+
+    }
+
+    .pageBox {
+      width: 100%;
+      display: flex;
+      height: 60px;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

src/pages/ObjectSon/Object2/index.tsx

@@ -1,9 +1,291 @@
+import BreadTit from "@/components/BreadTit";
+import { RootState } from "@/store";
+import { Button, Input, Pagination, Select, Table } from "antd";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useSelector } from "react-redux";
 import styles from "./index.module.scss";
+import { UnorderedListOutlined, AppstoreOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+import ImageLazy from "@/components/ImageLazy";
+import history from "@/utils/history";
+import { useLocation } from "react-router-dom";
+import dayjs from "dayjs";
+const { Option } = Select;
 export default function Object2() {
-  
+  // 从仓库中获取藏品编号名称下拉数据
+  const options = useSelector(
+    (state: RootState) => state.loginStore.selectAll["藏品编号名称"]
+  );
+
+  // 封装发送请求的函数
+  const getList = () => {
+    const data = { ...tableSelect, pageNum: pageNumRef.current, aaaaa: value };
+    console.log("------", data);
+  };
+
+  // 获取地址栏参数
+  const location = useLocation();
+
+  // 如果有参数 根据参数页码在次发送请求
+  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<any>({
+    bianhao: null,
+    name: "",
+    pageSize: 10,
+    pageNum: 1,
+  });
+  // 当前页码统一
+  const pageNumRef = useRef(1);
+  useEffect(() => {
+    pageNumRef.current = tableSelect.pageNum;
+  }, [tableSelect.pageNum]);
+
+  // 防止返回的时候发送了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 handleChange = (val: string) => {
+    setTableSelect({ ...tableSelect, bianhao: val, pageNum: 1 });
+  };
+
+  // 搜索输入框下拉
+  const [value, setValue] = useState("name1");
+  const valueChangeFu = (val: string) => {
+    setValue(val);
+  };
+  const nameTime = useRef(-1);
+  const nameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    clearTimeout(nameTime.current);
+    nameTime.current = window.setTimeout(() => {
+      setTableSelect({ ...tableSelect, name: e.target.value, pageNum: 1 });
+    }, 500);
+  };
+
+  // 图片页面和列表页面的切换
+  const [cutShow, setCutShow] = useState("cutShow1");
+
+  // 关于表格的数据
+  const paginationChange = (pageNum: number, pageSize: number) => {
+    setTableSelect({ ...tableSelect, pageNum, pageSize });
+  };
+
+  const results = {
+    list: [
+      { img: "", name: "666-1", id: 1 },
+      {
+        img: "http://project.4dage.com:8016/content/1_1001/img/20220810_1553241331042.JPG",
+        name: "666-2",
+        id: 2,
+      },
+      { img: "", name: "sada阿三大苏打sada阿三大苏打-3", id: 3 },
+      { img: "", name: "666-4", id: 4 },
+      { img: "", name: "666-5", id: 5 },
+      { img: "", name: "666-6", id: 6 },
+      { img: "", name: "666-7", id: 7 },
+      { img: "", name: "666-8", id: 8 },
+      { img: "", name: "666-9", id: 9 },
+      { img: "", name: "666-10", id: 10 },
+      { img: "", name: "666-11", id: 11 },
+      { img: "", name: "666-12", id: 12 },
+      { img: "", name: "666-13", id: 13 },
+      { img: "", name: "666-14", id: 14 },
+      { img: "", name: "666-15", id: 15 },
+      { img: "", name: "666-16", id: 16 },
+      { img: "", name: "666-17", id: 17 },
+      { img: "", name: "666-18", id: 18 },
+      { img: "", name: "666-19", id: 19 },
+      { img: "", name: "666-20", id: 20 },
+      { img: "", name: "666-21", id: 21 },
+      { img: "", name: "666-22", id: 22 },
+      { img: "", name: "666-23", id: 23 },
+    ],
+    total: 23,
+  };
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "缩略图",
+        render: (item: any) => (
+          <ImageLazy width={120} height={70} src={item.img} />
+        ),
+      },
+      {
+        title: "标题",
+        dataIndex: "name",
+      },
+      {
+        title: "操作",
+        render: (item: any) => (
+          <>
+            <Button
+              type="text"
+              danger
+              onClick={() =>
+                history.push(
+                  `/object/2/look?k=${pageNumRef.current}&id=${item.id}`
+                )
+              }
+            >
+              查看
+            </Button>
+          </>
+        ),
+      },
+    ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 点击导出
+  const deriveFu = () => {
+    const name = dayjs(new Date()).format("YYYYMMDDHHmmss");
+    console.log("ppppppp", name);
+    //获取表格
+    const exportFileContent = document.getElementById("deriveBox")!.outerHTML;
+
+    console.log('121321',exportFileContent);
+    
+       //使用Blob
+       var blob = new Blob([exportFileContent], { type: "text/plain;charset=utf-8" });         //解决中文乱码问题
+       blob = new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type });
+       //设置链接
+       var link = window.URL.createObjectURL(blob);
+       var a = document.createElement("a");    //创建a标签
+       a.download = name;  //设置被下载的超链接目标（文件名）   建议文件后缀为 .xls
+       a.href = link;                            //设置a标签的链接
+       document.body.appendChild(a);            //a标签添加到页面
+       a.click();                                //设置a标签触发单击事件
+       document.body.removeChild(a);            //移除a标签
+
+  };
+
   return (
     <div className={styles.Object2}>
-      <h1>Object2</h1>
+      <div className="breadTit">
+        <BreadTit>
+          <div className="breadTitRow active">藏品总账</div>
+        </BreadTit>
+      </div>
+      <div className="objectSonMain">
+        {/* 顶部搜索和筛选 */}
+        <div className="searchBox">
+          <div className="row">
+            <span>藏品编号名称：</span>
+            <Select
+              placeholder="请选择"
+              allowClear
+              style={{ width: 150 }}
+              value={tableSelect.bianhao}
+              onChange={handleChange}
+              options={options.map((v: any) => ({
+                label: v.name,
+                value: v.name,
+              }))}
+            />
+          </div>
+          <div className="row">
+            <span>搜索：</span>
+            <Select
+              style={{ width: 100 }}
+              value={value}
+              onChange={(val) => valueChangeFu(val)}
+            >
+              <Option value="name1">藏品名称</Option>
+              <Option value="name2">藏品年代</Option>
+              <Option value="name3">藏品质地</Option>
+            </Select>
+            <Input
+              maxLength={10}
+              style={{ width: 150 }}
+              placeholder="请输入"
+              allowClear
+              onChange={(e) => nameChange(e)}
+            />
+          </div>
+          <div className="row">
+            <Button onClick={deriveFu}>导出</Button>
+          </div>
+          <div className="row">
+            <div
+              onClick={() => setCutShow("cutShow1")}
+              className={classNames(
+                "cutShow",
+                cutShow === "cutShow1" ? "active" : ""
+              )}
+            >
+              <AppstoreOutlined />
+            </div>
+            <div
+              onClick={() => setCutShow("cutShow2")}
+              className={classNames(
+                "cutShow",
+                "cutShow2",
+                cutShow === "cutShow2" ? "active" : ""
+              )}
+            >
+              <UnorderedListOutlined />
+            </div>
+          </div>
+        </div>
+        {/* 图片展示列表 */}
+        <div className="imgList" hidden={cutShow !== "cutShow1"}>
+          {results.list.map((v) => (
+            <div
+              title="666666"
+              onClick={() =>
+                history.push(
+                  `/object/2/look?k=${pageNumRef.current}&id=${v.id}`
+                )
+              }
+              key={v.id}
+              className="imgListRow"
+            >
+              <ImageLazy noLook={true} width={193} height={190} src={v.img} />
+              <p>{v.name}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* 表格展示列表 */}
+        <div className="tableBox" hidden={cutShow !== "cutShow2"}>
+          <Table
+            id="deriveBox"
+            scroll={{ y: 450 }}
+            dataSource={results.list}
+            columns={columns}
+            rowKey="id"
+            pagination={false}
+          />
+        </div>
+
+        {/* 从表格里面拆出来的分页 */}
+        <div className="pageBox">
+          <Pagination
+            showQuickJumper
+            showSizeChanger
+            current={tableSelect.pageNum}
+            pageSize={tableSelect.pageSize}
+            onChange={paginationChange}
+            total={results.total}
+          />
+        </div>
+      </div>
     </div>
-  )
+  );
 }