upp

src/components/LeftBar/index.module.scss

@@ -13,7 +13,7 @@
         opacity: 0;
       }
       &:hover{
-        color: var(--themeColor);
+        color: #D3B453;
       }
     }
     .active{

src/components/LookObjTable/index.css

@@ -0,0 +1,65 @@
+.lookObjTable .ant-modal {
+  top: 30px !important;
+  width: 1000px !important;
+}
+.lookObjTable .ObjectAddTit {
+  border-top: 1px solid #999999;
+  padding-top: 15px;
+  width: 100%;
+  height: 45px;
+  display: flex;
+  margin-bottom: 15px;
+}
+.lookObjTable .ObjectAddTit > div {
+  cursor: pointer;
+  width: 50%;
+  height: 30px;
+  border: 1px solid #999999;
+  text-align: center;
+  line-height: 28px;
+  border-radius: 5px 0 0 5px;
+}
+.lookObjTable .ObjectAddTit .ObjectAddTitTow {
+  border-radius: 0 5px 5px 0;
+}
+.lookObjTable .ObjectAddTit .active {
+  background-color: var(--themeColor);
+  color: #fff;
+}
+.lookObjTable .goodsInfo .row {
+  display: flex;
+  width: 100%;
+}
+.lookObjTable .goodsInfo .row > div {
+  padding: 5px;
+  width: 50%;
+  display: flex;
+  border: 1px solid #ccc;
+}
+.lookObjTable .goodsInfo .row > div span {
+  font-weight: 700;
+  display: inline-block;
+  width: 100px;
+  text-align: right;
+}
+.lookObjTable .goodsInfo .row > div p {
+  width: calc(100% - 110px);
+}
+.lookObjTable .goodsBtn {
+  margin-top: 20px;
+  text-align: center;
+}
+.lookObjTable .goodsFile .row {
+  width: 100%;
+  display: flex;
+  margin-bottom: 10px;
+}
+.lookObjTable .goodsFile .row .rowTit {
+  font-weight: 700;
+  display: inline-block;
+  width: 100px;
+  text-align: right;
+}
+.lookObjTable .goodsFile .row .rowRr {
+  width: calc(100% - 110px);
+}

src/components/LookObjTable/index.less

@@ -0,0 +1,105 @@
+.lookObjTable {
+  .ant-modal {
+    top: 30px !important;
+    width: 1000px !important;
+  }
+
+  .ObjectAddTit {
+    border-top: 1px solid #999999;
+    padding-top: 15px;
+    width: 100%;
+    height: 45px;
+    display: flex;
+    margin-bottom: 15px;
+
+    &>div {
+      cursor: pointer;
+      width: 50%;
+      height: 30px;
+      border: 1px solid #999999;
+      text-align: center;
+      line-height: 28px;
+      border-radius: 5px 0 0 5px;
+    }
+
+    .ObjectAddTitTow {
+      border-radius: 0 5px 5px 0;
+    }
+
+    .active {
+      background-color: var(--themeColor);
+      color: #fff;
+    }
+  }
+
+  .goodsInfo {
+
+    .row {
+      display: flex;
+      width: 100%;
+
+      &>div {
+        padding: 5px;
+        width: 50%;
+        display: flex;
+        border: 1px solid #ccc;
+
+        span {
+          font-weight: 700;
+          display: inline-block;
+          width: 100px;
+          text-align: right;
+        }
+
+        p {
+          width: calc(100% - 110px);
+        }
+      }
+    }
+
+    // .rowThree {
+    //   display: flex;
+    //   width: 100%;
+
+    //   &>div {
+    //     padding: 5px;
+
+    //     border: 1px solid #ccc;
+    //     width: 33%;
+
+    //     span {
+    //       font-weight: 700;
+    //       display: inline-block;
+    //       width: 100px;
+    //       text-align: right;
+    //     }
+    //   }
+    // }
+
+  }
+
+  .goodsBtn {
+    margin-top: 20px;
+    text-align: center;
+  }
+
+  .goodsFile {
+
+    .row {
+      width: 100%;
+      display: flex;
+      margin-bottom: 10px;
+
+      .rowTit {
+        font-weight: 700;
+        display: inline-block;
+        width: 100px;
+        text-align: right;
+      }
+
+      .rowRr {
+        width: calc(100% - 110px);
+      }
+    }
+  }
+}

src/components/LookObjTable/index.tsx

@@ -0,0 +1,372 @@
+import { Button, Modal, Select, Table } from "antd";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import ImageLazy from "../ImageLazy";
+import "./index.css";
+import classNames from "classnames";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/store";
+
+type Props = {
+  data: any;
+  y: number;
+};
+
+function LookObjTable({ data, y }: Props) {
+  const dispatch = useDispatch();
+
+  // 点击表格里面的查看
+  const lookGoods = useCallback((id: number) => {
+    setShow(true);
+  }, []);
+
+  // 外层表格格式
+  const columns = useMemo(() => {
+    const tempArr = [
+      {
+        title: "缩略图",
+        render: (item: any) => (
+          <ImageLazy width={120} height={70} src={item.img} />
+        ),
+      },
+      {
+        title: "藏品编号名称",
+        dataIndex: "num",
+      },
+      {
+        title: "藏品编号",
+        dataIndex: "num",
+      },
+      {
+        title: "藏品名称",
+        dataIndex: "num",
+      },
+      {
+        title: "类别",
+        dataIndex: "num",
+      },
+      {
+        title: "完残程度",
+        dataIndex: "num",
+      },
+      {
+        title: "年代",
+        dataIndex: "num",
+      },
+      {
+        title: "操作",
+        render: (item: any) => (
+          <>
+            <Button type="text" danger onClick={() => lookGoods(item.id)}>
+              查看
+            </Button>
+          </>
+        ),
+      },
+    ];
+
+    return tempArr;
+  }, [lookGoods]);
+
+  // 控制弹窗的显示隐藏
+  const [show, setShow] = useState(false);
+  // 选择商品信息还是附近（默认商品信息）
+  const [titSelect, setTitSelect] = useState("tit1");
+
+  // 附件类型下拉框
+  const results = useSelector((state: RootState) => state.loginStore.fileData);
+
+  const fileSelectList = 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 [fileSelect, setFileSelect] = useState("img");
+  const fileSelectChangeFu = (value: string) => {
+    setFileSelect(value);
+  };
+
+  // 里面的表格数据
+  useEffect(() => {
+    dispatch({
+      type: "login/setFileData",
+      payload: {
+        img: [
+          {
+            id: 1,
+            name: "图片1",
+            time: "2022-12-13",
+            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",
+            time: "2022-12-14",
+            img: "",
+          },
+          {
+            id: 3,
+            name: "图片3",
+            time: "2022-12-14",
+            img: "",
+          },
+        ],
+        video: [
+          {
+            id: 4,
+            name: "视频1",
+            time: "2022-12-14",
+            img: "",
+          },
+        ],
+        audio: [],
+      },
+    });
+  }, [dispatch]);
+
+  // 外层表格格式
+  const columns2 = useMemo(() => {
+    const tempArr = [
+      {
+        title: "附件名称",
+        dataIndex: "name",
+      },
+      {
+        title: "上传时间",
+        dataIndex: "time",
+      },
+    ] as any;
+    if (fileSelect === "img") {
+      tempArr.unshift({
+        title: "缩略图",
+        render: (item: any) => (
+          <ImageLazy width={120} height={70} src={item.img} />
+        ),
+      });
+    }
+    return tempArr;
+  }, [fileSelect]);
+
+  return (
+    <div>
+      <Table
+        scroll={{ y }}
+        dataSource={data}
+        columns={columns}
+        rowKey="id"
+        pagination={false}
+      />
+      {/* 点击查看出来的对话框 */}
+      <Modal
+        wrapClassName="lookObjTable"
+        destroyOnClose
+        open={show}
+        title="查看藏品"
+        onCancel={() => setShow(false)}
+        footer={
+          [] // 设置footer为空，去掉 取消 确定默认按钮
+        }
+      >
+        {/* 商品信息和附件切换 */}
+        <div className="ObjectAddTit">
+          <div
+            onClick={() => setTitSelect("tit1")}
+            className={classNames(titSelect === "tit1" ? "active" : "")}
+          >
+            藏品信息
+          </div>
+          <div
+            onClick={() => setTitSelect("tit2")}
+            className={classNames(
+              "ObjectAddTitTow",
+              titSelect === "tit2" ? "active" : ""
+            )}
+          >
+            附件
+          </div>
+        </div>
+
+        {/* 藏品信息 */}
+        <div className="goodsInfo" hidden={titSelect !== "tit1"}>
+          <div className="row">
+            <div>
+              <span>藏品名称：</span>
+              <p>
+                阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松
+              </p>
+            </div>
+            <div>
+              <span>原名：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+          <div className="row">
+            <div>
+              <span>藏品编号名称：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>藏品编号：</span>
+              <p>
+                阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松阿松大阿松
+              </p>
+            </div>
+          </div>
+          <div className="row">
+            <div>
+              <span>年代：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>文物质地：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+          <div className="row">
+            <div>
+              <span>具体年代：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>文物类别：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+
+          <div className="row">
+            <div>
+              <span>实际数量：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>文物级别：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+
+          {/* <div className="rowThree">
+            <div>
+              <span>通长：</span>123
+            </div>
+            <div>
+              <span>通宽：</span>123
+            </div>
+            <div>
+              <span>通高：</span>123
+            </div>            
+          </div> */}
+
+          <div className="row">
+            <div>
+              <span>外形尺寸：</span>
+              <p>（通长）66666666（通宽）66666666（通高）66666666</p>
+            </div>
+            <div>
+              <span>具体尺寸：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+
+          <div className="row">
+            <div>
+              <span>质量范围：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>具体质量：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+
+          <div className="row">
+            <div>
+              <span>完残程度：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>保存状态：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+
+          <div className="row">
+            <div>
+              <span>入藏时间范围：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>入藏年度：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+
+          <div className="row">
+            <div>
+              <span>著者：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>版本：</span>
+              <p>666666666</p>
+            </div>
+          </div>
+
+          <div className="row">
+            <div>
+              <span>存卷：</span>
+              <p>666666666</p>
+            </div>
+            <div>
+              <span>来源说明：</span>
+              <p>454654654564654</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="goodsFile" hidden={titSelect !== "tit2"}>
+          <div className="row">
+            <div className="rowTit">藏品图片：</div>
+            <div className="rowRr">
+              <ImageLazy width={120} height={120} src={""} />
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="rowTit">附件类型：</div>
+            <div className="rowRr">
+              <Select
+                style={{ width: 150 }}
+                value={fileSelect}
+                onChange={fileSelectChangeFu}
+                options={fileSelectList}
+              />
+            </div>
+          </div>
+
+          {/* 表格主体 */}
+          <Table
+            scroll={{ y: 300 }}
+            dataSource={results[fileSelect]}
+            columns={columns2}
+            rowKey="id"
+            pagination={false}
+          />
+        </div>
+
+        {/* 确定按钮 */}
+        <div className="goodsBtn">
+          <Button type="primary" onClick={() => setShow(false)}>
+            确定
+          </Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+const MemoLookObjTable = React.memo(LookObjTable);
+
+export default MemoLookObjTable;

src/components/ObjectAdd/index.tsx

@@ -319,7 +319,7 @@ function ObjectAdd({ id, colsePage }: Props) {
             onClick={() => setTitSelect("tit1")}
             className={classNames(titSelect === "tit1" ? "active" : "")}
           >
-            商品信息
+            藏品信息
           </div>
           <div
             onClick={() => setTitSelect("tit2")}

src/pages/Object/index.tsx

@@ -6,6 +6,10 @@ import { Route, Switch } from "react-router-dom";
 import AuthRoute from "@/components/AuthRoute";
 import NotFound from "@/components/NotFound";
 
+const LookObject1 = React.lazy(
+  () => import("../ObjectSon/Object1/LookObject1")
+);
+
 export default function Object() {
   const data = useMemo(() => {
     return [
@@ -77,6 +81,8 @@ export default function Object() {
               />
             ))}
 
+            {/* 查看页面，无需权限 */}
+            <AuthRoute path="/object/1/look" component={LookObject1} />
             {/* 新增 */}
             {dataIn.map((v) => (
               <AuthRoute key={v.id} path={v.path} component={v.Com} />

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

@@ -1,7 +1,6 @@
-import AuthButton from "@/components/AuthButton";
 import BreadTit from "@/components/BreadTit";
 import history, { urlParameter } from "@/utils/history";
-import { Input, message, Select, Table, Popconfirm } from "antd";
+import { Input, message, Select, Table, Popconfirm, Button } from "antd";
 import TextArea from "antd/es/input/TextArea";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
@@ -11,7 +10,6 @@ import ImageLazy from "@/components/ImageLazy/index";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 function AddObject1() {
-
   // 从仓库中获取藏品来源下拉数据
   const options = useSelector(
     (state: RootState) => state.loginStore.selectAll["文物来源"]
@@ -28,7 +26,7 @@ function AddObject1() {
   const [addInfoTop, setAddInfoTop] = useState({
     num: "DJ20221212009",
     user: "admin",
-    laiyuan: options[0].name?options[0].name:'',
+    laiyuan: options[0].name ? options[0].name : "",
     txt: "",
   });
 
@@ -37,8 +35,6 @@ function AddObject1() {
     setAddInfoTop({ ...addInfoTop, laiyuan: value });
   };
 
-
-
   // 表格数据
 
   // 选中的表格数据
@@ -105,18 +101,18 @@ function AddObject1() {
         title: "操作",
         render: (item: any) => (
           <>
-            <AuthButton type="text" danger onClick={() => addPageFu(item.id)}>
+            <Button type="text" danger onClick={() => addPageFu(item.id)}>
               编辑
-            </AuthButton>
+            </Button>
             <Popconfirm
               title="确定删除吗?"
               okText="确定"
               cancelText="取消"
               onConfirm={() => delOne(item.id)}
             >
-              <AuthButton type="text" danger>
+              <Button type="text" danger>
                 删除
-              </AuthButton>
+              </Button>
             </Popconfirm>
           </>
         ),
@@ -151,8 +147,6 @@ function AddObject1() {
     setAddPage(true);
   };
 
-
-
   return (
     <div className={styles.AddObject1}>
       <div className="breadTit">
@@ -213,7 +207,7 @@ function AddObject1() {
           <div className="addTableBox_Tit">
             <div className="addTableBox_TitL">藏品信息</div>
             <div className="addTableBox_TitR">
-              <AuthButton onClick={() => addPageFu(null)}>添加</AuthButton>
+              <Button onClick={() => addPageFu(null)}>添加</Button>
               &emsp;
               <Popconfirm
                 title="确定删除吗?"
@@ -221,9 +215,7 @@ function AddObject1() {
                 cancelText="取消"
                 onConfirm={delTableListFu}
               >
-                <AuthButton disabled={tableSelectList.length === 0}>
-                  删除
-                </AuthButton>
+                <Button disabled={tableSelectList.length === 0}>删除</Button>
               </Popconfirm>
             </div>
           </div>
@@ -242,13 +234,13 @@ function AddObject1() {
             />
           </div>
           <div className="addTableBox_btn">
-            <AuthButton onClick={() => submitFu(1)}>存入草稿</AuthButton>
+            <Button onClick={() => submitFu(1)}>存入草稿</Button>
             &emsp;
-            <AuthButton type="primary" onClick={() => submitFu(1)}>
+            <Button type="primary" onClick={() => submitFu(1)}>
               提交
-            </AuthButton>
+            </Button>
             &emsp;
-            <AuthButton onClick={cancelFu}>返回</AuthButton>
+            <Button onClick={cancelFu}>返回</Button>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,56 @@
+.LookObject1 {
+  :global {
+    .objectSonMain {
+      padding: 10px 30px;
+
+      .topTit {
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--themeColor);
+        margin-bottom: 12px;
+      }
+
+      .topInfo {
+        .topInfoRow {
+          display: flex;
+          &>div {
+            width: 50%;
+            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;
+          }
+        }
+
+      }
+      .backBtn{
+        margin-top: 12px;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}

src/pages/ObjectSon/Object1/index.tsx

@@ -2,7 +2,7 @@ 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, Table } from "antd";
+import { Select, Input, DatePicker, Table, Button, Popconfirm } from "antd";
 import AuthButton from "@/components/AuthButton";
 import history from "@/utils/history";
 import { useLocation } from "react-router-dom";
@@ -101,6 +101,11 @@ export default function Object1() {
     else history.push(`/object/1/add?k=${pageNumRef.current}`);
   };
 
+  // 点击删除按钮
+  const delOne = (id: number) => {
+    console.log("删除", id);
+  };
+
   // 关于表格的数据
   const paginationChange = (pageNum: number, pageSize: number) => {
     setTableSelect({ ...tableSelect, pageNum, pageSize });
@@ -145,15 +150,34 @@ export default function Object1() {
         title: "操作",
         render: (item: any) => (
           <>
-            <AuthButton type="text" danger>
+            <Button
+              type="text"
+              danger
+              onClick={() =>
+                history.push(
+                  `/object/1/look?k=${pageNumRef.current}&id=${item.id}`
+                )
+              }
+            >
               查看
-            </AuthButton>
+            </Button>
             <AuthButton type="text" danger onClick={() => addObject(item.id)}>
               编辑
             </AuthButton>
+
             <AuthButton type="text" danger>
-              删除
+              审核
             </AuthButton>
+            <Popconfirm
+              title="确定删除吗?"
+              okText="确定"
+              cancelText="取消"
+              onConfirm={() => delOne(item.id)}
+            >
+              <AuthButton type="text" danger>
+                删除
+              </AuthButton>
+            </Popconfirm>
           </>
         ),
       },