🐛优化图片懒加载/总账编辑删除附件不能真删除

src/components/ImageLazy/index.module.scss

@@ -9,6 +9,7 @@
       z-index: 99;
       opacity: 0;
       pointer-events: none;
+      transition: opacity .3s;
       width: 100%;
       height: 100%;
     }
@@ -22,6 +23,7 @@
       height: 100%;
       position: relative;
       .lookImg{
+        transition: opacity .3s;
         opacity: 0;
         pointer-events: none;
         position: absolute;

src/components/ImageLazy/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import Lazyimg from "react-lazyimg-component";
 import { baseURL } from "@/utils/http";
@@ -16,9 +16,18 @@ type Props = {
 };
 
 function ImageLazy({ width = 100, height = 100, src, noLook }: Props) {
-  const [defaultUrl, setDefaultUrl] = useState(src?imgLoding:imgErr);
+  const [defaultUrl, setDefaultUrl] = useState(src ? imgLoding : imgErr);
   const [defaultShow, setDefaultShow] = useState(true);
 
+  const timeId = useRef(-1);
+
+  useEffect(() => {
+    // 组件销毁的时候清理定时器
+    return () => {
+      clearTimeout(timeId.current);
+    };
+  }, []);
+
   const onLoad = (val: any) => {
     let flag = false;
     // console.log(val);
@@ -27,7 +36,7 @@ function ImageLazy({ width = 100, height = 100, src, noLook }: Props) {
       flag = true;
     };
     // 5秒后图片还没有加载出来为错误
-    window.setTimeout(() => {
+    timeId.current = window.setTimeout(() => {
       if (!flag) setDefaultUrl(imgErr);
     }, 5000);
   };

src/components/ImageLazy/index2.tsx

@@ -1,6 +1,5 @@
+// 这个组件没有懒加载和预览效果
 import React, { useState } from "react";
-import styles from "./index.module.scss";
-import Lazyimg from "react-lazyimg-component";
 import { baseURL } from "@/utils/http";
 import imgErr from "@/assets/img/login/IMGerror.png";
 import imgLoding from "@/assets/img/login/loading.gif";

src/components/ObjectAdd/index.tsx

@@ -144,10 +144,10 @@ function ObjectAdd({ id, colsePage, editId, dirCode, upInfoAPIFu }: Props) {
         message.success("编辑成功!");
         // 通知父组件更新页面
         upInfoAPIFu();
-        // 真正的删除
-        if (delFileList.current.length) {
-          await delInfileAPI(delFileList.current.join(","));
-        }
+        // 真正的删除 ----在藏品总账里面修改的时候不能删除
+        // if (delFileList.current.length) {
+        //   await delInfileAPI(delFileList.current.join(","));
+        // }
         //  关闭弹窗
         colsePage();
       }

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

@@ -341,7 +341,7 @@ function LookObject2() {
                 </div>
               </div>
               <div className="row">
-                <div title={sizeRes.replaceAll('&emsp;',' ')}>
+                <div title={sizeRes.replaceAll("&emsp;", " ")}>
                   <span>外形尺寸：</span>
                   <p dangerouslySetInnerHTML={{ __html: sizeRes }}></p>
                 </div>
@@ -462,70 +462,69 @@ function LookObject2() {
       </div>
 
       {/* 点击上面的编辑 移库 操作记录出来的弹窗 */}
-      <Modal
-        wrapClassName="LookObject2Model"
-        destroyOnClose
-        open={!!titCut}
-        title={
-          titCut === "1" ? "申请编辑" : titCut === "2" ? "申请移库" : "操作记录"
-        }
-        onCancel={() => setTitCut("")}
-        footer={
-          [] // 设置footer为空，去掉 取消 确定默认按钮
-        }
-      >
-        {/*  申请编辑 */}
-        {titCut === "1" ? (
-          <ObjectAdd
-            upInfoAPIFu={upInfoAPIFu}
-            dirCode={info.dirCode}
-            id={urlParamRef.current.id}
-            colsePage={() => setTitCut("")}
-            editId="edit"
-          />
-        ) : null}
-
-        {/* 申请移库 */}
-        {titCut === "2" ? (
-          <div className="moveLocBox">
-            <div>
-              <span>当前位置：</span>
-              <p>{info.storageAncestorName}</p>
-            </div>
-            <div>
-              <span>移库位置：</span>
-              <Cascader
-                style={{ width: 300 }}
-                allowClear={false}
-                value={moveLoc}
-                onChange={moveLocChangeFu}
-                fieldNames={{
-                  label: "name",
-                  value: "id",
-                  children: "children",
-                }}
-                options={moveOptions}
-                placeholder="请选择"
-              />
-            </div>
-            <br />
-            <br />
-            <div className="moveBtn">
-              <Button type="primary" onClick={moveBtnOk}>
-                提交
-              </Button>
+
+      {/*  申请编辑 */}
+      {titCut === "1" ? (
+        <ObjectAdd
+          upInfoAPIFu={upInfoAPIFu}
+          dirCode={info.dirCode}
+          id={urlParamRef.current.id}
+          colsePage={() => setTitCut("")}
+          editId="edit"
+        />
+      ) : (
+        <Modal
+          wrapClassName="LookObject2Model"
+          destroyOnClose
+          open={!!titCut}
+          title={titCut === "2" ? "申请移库" : "操作记录"}
+          onCancel={() => setTitCut("")}
+          footer={
+            [] // 设置footer为空，去掉 取消 确定默认按钮
+          }
+        >
+          {/* 申请移库 */}
+          {titCut === "2" ? (
+            <div className="moveLocBox">
+              <div>
+                <span>当前位置：</span>
+                <p>{info.storageAncestorName}</p>
+              </div>
+              <div>
+                <span>移库位置：</span>
+                <Cascader
+                  style={{ width: 300 }}
+                  allowClear={false}
+                  value={moveLoc}
+                  onChange={moveLocChangeFu}
+                  fieldNames={{
+                    label: "name",
+                    value: "id",
+                    children: "children",
+                  }}
+                  options={moveOptions}
+                  placeholder="请选择"
+                />
+              </div>
+              <br />
+              <br />
+              <div className="moveBtn">
+                <Button type="primary" onClick={moveBtnOk}>
+                  提交
+                </Button>
+              </div>
             </div>
-          </div>
-        ) : null}
+          ) : null}
 
-        {/* 操作记录 */}
-        {titCut === "3" ? (
-          <div className="logBox">
-            {/* 表格 */}
-            <LookObject2Log id={info.id} />
-          </div>
-        ) : null}
-      </Modal>
+          {/* 操作记录 */}
+          {titCut === "3" ? (
+            <div className="logBox">
+              {/* 表格 */}
+              <LookObject2Log id={info.id} />
+            </div>
+          ) : null}
+        </Modal>
+      )}
     </div>
   );
 }