权限下载/查看

src/components/LookDom/index.tsx

@@ -6,7 +6,7 @@ import { useSelector } from "react-redux";
 import store, { RootState } from "@/store";
 import { baseURL } from "@/utils/http";
 function LookDom() {
-  const { src, type } = useSelector(
+  const { src, type, flag } = useSelector(
     (state: RootState) => state.A0Layout.lookDom
   );
   return (
@@ -18,11 +18,11 @@ function LookDom() {
         <>
           {type === "video" ? (
             <div className="viedoBox">
-              <video autoPlay controls src={baseURL + src}></video>
+              <video autoPlay controls src={flag ? src : baseURL + src}></video>
             </div>
           ) : type === "audio" ? (
             <div className="audioBox">
-              <audio autoPlay controls src={baseURL + src}></audio>
+              <audio autoPlay controls src={flag ? src : baseURL + src}></audio>
             </div>
           ) : (
             <div className="modelBox">
@@ -35,7 +35,7 @@ function LookDom() {
             onClick={() =>
               store.dispatch({
                 type: "layout/lookDom",
-                payload: { src: "", type: "" },
+                payload: { src: "", type: "", flag: false },
               })
             }
           >

src/pages/A1Project/A1Look/index.tsx

@@ -49,6 +49,7 @@ function A1Look({ pageType, closeFu, tabType, lookTit, editTopFu }: Props) {
   // 从 项目介绍 点击 取消
   const tab1CloseFu = useCallback(() => {
     setSonPageType({ txt: "look", id: pageType.id });
+    setTab1Key(Date.now());
   }, [pageType.id]);
 
   // 编辑成功

src/pages/A1Project/A1Outer/A1OMove/index.module.scss

@@ -23,6 +23,7 @@
         border-bottom: 1px solid #ccc;
         padding-bottom: 6px;
         padding-left: 6px;
+        color: var(--themeColor);
 
         &>span {
           cursor: pointer;
@@ -33,6 +34,7 @@
 
           &:last-child {
             cursor: default;
+            color: black;
 
             &:hover {
               text-decoration: none

src/pages/A1Project/A1Outer/A1OMove/index.tsx

@@ -1,33 +1,23 @@
 import React, { useCallback, useEffect, useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Modal, Popconfirm } from "antd";
+import { Button, Empty, Modal, Popconfirm } from "antd";
 import classNames from "classnames";
 import { MessageFu } from "@/utils/message";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import { A1OFileType } from "@/types";
+import { A1_APIOgetListMove, A2_APIOmove } from "@/store/action/A1Project";
 
 type Props = {
   mId: { id: number; name: string };
   id1: { id: number; name: string };
   id2: { id: number; name: string };
   closeFu: () => void;
+  projectId: number;
+  moveSuFu: () => void;
 };
 
-const towTableArr = [
-  {
-    id: 2,
-    name: "asdasd",
-    type: 1,
-  },
-  {
-    id: 22,
-    name: "sadsssscxxxx",
-    type: 0,
-  },
-] as A1OFileType[];
-
-function A1OMove({ mId, id1, id2, closeFu }: Props) {
+function A1OMove({ mId, id1, id2, closeFu, projectId, moveSuFu }: Props) {
   // 从仓库获取左侧写死列表
   const A1OleftArr = useSelector(
     (state: RootState) => state.A1Project.A1OleftArr
@@ -47,15 +37,20 @@ function A1OMove({ mId, id1, id2, closeFu }: Props) {
   }, [A1OleftArr]);
 
   // 封装发送请求的函数
-  const getListFu = useCallback((id: number) => {
-    console.log("文件移动发送请求", id);
+  const getListFu = useCallback(
+    async (id: number) => {
+      const res = await A1_APIOgetListMove(projectId, id);
 
-    // setTableInfo();
-  }, []);
+      if (res.code === 0) {
+        setTableInfo(res.data.records);
+      }
+    },
+    [projectId]
+  );
 
   // 选中文件夹
   const cutFileFu = useCallback(
-    (id: number, name: string, type?: 0|1) => {
+    (id: number, name: string, type?: 0 | 1) => {
       if (type === 1) {
         if (tab1.id) {
           // 第二级
@@ -65,11 +60,6 @@ function A1OMove({ mId, id1, id2, closeFu }: Props) {
           // 第一级
           setTab1({ id, name });
           setTab2({ id: 0, name: "" });
-
-          // 后面调试接口的时候 删掉
-          setTimeout(() => {
-            setTableInfo(towTableArr);
-          }, 200);
         }
       }
     },
@@ -100,15 +90,23 @@ function A1OMove({ mId, id1, id2, closeFu }: Props) {
   }, [tab1.id, tab1.name, tab2.id]);
 
   // 点击移动
-  const btnOkFu = useCallback(() => {
+  const btnOkFu = useCallback(async () => {
     if (tab2.id) {
       // 进入到了二级
       if (tab2.id === id2.id) return MessageFu.warning("不能和之前的位置一样!");
-    } else if (tab1.id) {
+    } else if (tab1.id && !id2.id) {
       // 一级
       if (tab1.id === id1.id) return MessageFu.warning("不能和之前的位置一样!");
     }
-  }, [id1.id, id2.id, tab1.id, tab2.id]);
+
+    const res = await A2_APIOmove(mId.id, tab2.id ? tab2.id : tab1.id);
+
+    if (res.code === 0) {
+      MessageFu.success("移动成功!");
+      moveSuFu();
+      closeFu();
+    }
+  }, [closeFu, id1.id, id2.id, mId.id, moveSuFu, tab1.id, tab2.id]);
 
   return (
     <Modal
@@ -144,20 +142,24 @@ function A1OMove({ mId, id1, id2, closeFu }: Props) {
           ) : null}
         </div>
 
-        <div className="A1OMArr">
-          {tableInfo.map((v) => (
-            <div
-              className={classNames(
-                "A1OMArrRow",
-                v.type === 1 ? "A1OMArrRowAc" : ""
-              )}
-              key={v.id}
-              onClick={() => cutFileFu(v.id, v.name, v.type)}
-            >
-              {v.name}
-            </div>
-          ))}
-        </div>
+        {tableInfo.length <= 0 ? (
+          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        ) : (
+          <div className="A1OMArr">
+            {tableInfo.map((v) => (
+              <div
+                className={classNames(
+                  "A1OMArrRow",
+                  v.type === 1 ? "A1OMArrRowAc" : ""
+                )}
+                key={v.id}
+                onClick={() => cutFileFu(v.id, v.name, v.type)}
+              >
+                {v.name}
+              </div>
+            ))}
+          </div>
+        )}
 
         <div className="A1OMBtn">
           <Popconfirm

src/pages/A1Project/A1Outer/A1ORenFile/index.tsx

@@ -44,7 +44,7 @@ function A1ORenFile({ closeFu, fileInfo, addFu, editFu, projectId }: Props) {
 
     const obj = {
       id: fileInfo.id === -1 ? null : fileInfo.id,
-      name: value,
+      name: isFileType?value+`.${isFileType}`:value,
       parentId: fileInfo.parentId,
       projectId,
     };
@@ -61,15 +61,7 @@ function A1ORenFile({ closeFu, fileInfo, addFu, editFu, projectId }: Props) {
       }
       closeFu();
     }
-  }, [
-    addFu,
-    closeFu,
-    editFu,
-    fileInfo.id,
-    fileInfo.parentId,
-    projectId,
-    value,
-  ]);
+  }, [addFu, closeFu, editFu, fileInfo.id, fileInfo.parentId, isFileType, projectId, value]);
 
   return (
     <Modal

src/pages/A1Project/A1Outer/A1OupFile/index.tsx

@@ -17,9 +17,9 @@ import { EyeOutlined, DownloadOutlined } from "@ant-design/icons";
 import history from "@/utils/history";
 import React from "react";
 import { getTokenFu } from "@/utils/storage";
-import filesLookFu from "@/utils/filesLook";
 import { MessageFu } from "@/utils/message";
-import { baseURL } from "@/utils/http";
+import { A2_APIOupFileIds } from "@/store/action/A1Project";
+import { authFilesLookFu, urlChangeFu } from "@/utils/authFilesLook";
 
 const { Dragger } = Upload;
 
@@ -27,10 +27,11 @@ type props = {
   myUrl: string;
   fromData: any;
   nowLoc: string;
+  upFileFu: () => void;
   closeFu: () => void;
 };
 
-function A1OupFile({ myUrl, fromData, nowLoc, closeFu }: props) {
+function A1OupFile({ myUrl, fromData, nowLoc, closeFu, upFileFu }: props) {
   const [modal, contextHolder] = Modal.useModal();
 
   const [fileList, setFileList] = useState<UploadFile[]>([]);
@@ -83,8 +84,6 @@ function A1OupFile({ myUrl, fromData, nowLoc, closeFu }: props) {
         // console.log(info.file, info.fileList);
       }
       if (status === "done") {
-        console.log(info, "上传成功");
-
         // message.success(`${info.file.name} 上传成功.`);
       } else if (status === "error") {
         message.error(`${info.file.name} 上传失败.`);
@@ -124,39 +123,33 @@ function A1OupFile({ myUrl, fromData, nowLoc, closeFu }: props) {
       });
       return await promiseFu;
     },
-
-    // 修复版本报错问题
-    // Warning: [antd: Progress] `strokeWidth` is deprecated. Please use `size` instead.
-    // progress: {
-    //   strokeColor: {
-    //     "0%": "#108ee9",
-    //     "100%": "#87d068",
-    //   },
-    //   size: 3,
-    //   format: (percent) => percent && `${parseFloat(percent.toFixed(2))}%`,
-    // },
   };
 
   // 点击确定
-  const btnOkFu = useCallback(() => {
+  const btnOkFu = useCallback(async () => {
     console.log("-----", fileList);
 
-    // 拿到 后端返回 的 id列表
-    const ids = [] as Number[];
-
     if (fileList.some((v) => v.percent !== 100))
       return message.warning("有文件未上传完成.");
 
-    // fileList.forEach((v) => {
-    //   // 看下是否全部传输完成
-    //   if (v.percent !== 100) return message.warning("有文件未上传完成.");
+    // 拿到 id集合
+
+    console.log("-----", fileList);
+
+    const ids: number[] = [];
+
+    fileList.forEach((v) => {
+      ids.push(v.response.data.id);
+    });
 
-    //   ids.push(v.response.data.id);
-    // });
-    // console.log("点击确定", ids.join(","));
+    const res = await A2_APIOupFileIds(ids.join(","));
 
-    return ids.join(",");
-  }, [fileList]);
+    if (res.code === 0) {
+      MessageFu.success("保存成功!");
+      upFileFu();
+      closeFu();
+    }
+  }, [closeFu, fileList, upFileFu]);
 
   return (
     <Modal
@@ -184,14 +177,14 @@ function A1OupFile({ myUrl, fromData, nowLoc, closeFu }: props) {
             <div className="myIncoRow" key={v.uid}>
               {v.percent === 100 && v.response && v.response.data ? (
                 <>
-                  {filesLookFu(v.response.data.name) ? (
+                  {authFilesLookFu(v.response.data.name) ? (
                     <>
                       {/* // 1.预览（name里面有常用的，浏览器能识别的 图片 音频 视频 模型） */}
                       <div title="预览文件">
                         <EyeOutlined
                           rev={undefined}
                           onClick={() =>
-                            filesLookFu(
+                            authFilesLookFu(
                               v.response.data.name,
                               v.response.data.filePath
                             )
@@ -201,14 +194,18 @@ function A1OupFile({ myUrl, fromData, nowLoc, closeFu }: props) {
                     </>
                   ) : null}
                   {/* // 2.下载 */}
-                  <div title="下载文件">
-                    <a
-                      href={baseURL + v.response.data.filePath}
-                      target="blank"
-                      download
-                    >
-                      <DownloadOutlined rev={undefined} />
-                    </a>
+                  <div
+                    title="下载文件"
+                    onClick={() =>
+                      urlChangeFu(
+                        v.response.data.filePath,
+                        true,
+                        undefined,
+                        v.response.data.name
+                      )
+                    }
+                  >
+                    <DownloadOutlined rev={undefined} />
                   </div>
                 </>
               ) : (

src/pages/A1Project/A1Outer/index.tsx

@@ -9,7 +9,6 @@ import styles from "./index.module.scss";
 import { Button, Input, Popconfirm, Table } from "antd";
 import classNames from "classnames";
 import { baseURL } from "@/utils/http";
-import filesLookFu from "@/utils/filesLook";
 import A1ORenFile from "./A1ORenFile";
 import A1OMove from "./A1OMove";
 import { A1OFileType } from "@/types";
@@ -22,6 +21,7 @@ import {
 } from "@/store/action/A1Project";
 import { MessageFu } from "@/utils/message";
 import A1OupFile from "./A1OupFile";
+import { authFilesLookFu, urlChangeFu } from "@/utils/authFilesLook";
 
 type Props = {
   projectId: number;
@@ -182,11 +182,11 @@ function A1Outer({ projectId }: Props) {
         title: "操作",
         render: (item: A1OFileType) => (
           <>
-            {filesLookFu(item.name) ? (
+            {authFilesLookFu(item.name) ? (
               <Button
                 size="small"
                 type="text"
-                onClick={() => filesLookFu(item.name, item.filePath)}
+                onClick={() => authFilesLookFu(item.name, item.filePath)}
               >
                 查看
               </Button>
@@ -201,16 +201,15 @@ function A1Outer({ projectId }: Props) {
                 下载
               </Button>
             ) : (
-              <a
-                href={baseURL + item.filePath}
-                download={item.name}
-                target="_blank"
-                rel="noreferrer"
+              <Button
+                size="small"
+                type="text"
+                onClick={() =>
+                  urlChangeFu(item.filePath, true, undefined, item.name)
+                }
               >
-                <Button size="small" type="text">
-                  下载
-                </Button>
-              </a>
+                下载
+              </Button>
             )}
 
             <Button size="small" type="text" onClick={() => setRenFile(item)}>
@@ -361,6 +360,8 @@ function A1Outer({ projectId }: Props) {
           id1={tab1}
           id2={tab2}
           closeFu={() => setMoveId({ id: 0, name: "" })}
+          projectId={projectId}
+          moveSuFu={() => getListFu()}
         />
       ) : null}
 
@@ -371,6 +372,7 @@ function A1Outer({ projectId }: Props) {
           fromData={{ parentId: upFileId, projectId }}
           nowLoc={nowLoc}
           closeFu={() => setUpFileId(0)}
+          upFileFu={() => getListFu()}
         />
       ) : null}
     </div>

src/store/action/A1Project.ts

@@ -93,3 +93,30 @@ export const A2_APIOdownload = (ids: string) => {
 export const A2_APIOdel = (id: number) => {
   return http.get(`cms/item/remove/${id}`);
 };
+
+/**
+ * 项目文件---------批量上传点击确定
+ */
+export const A2_APIOupFileIds = (ids: string) => {
+  return http.post(`cms/item/update/display?fileId=${ids}`);
+};
+
+
+/**
+ * 获取列表 ---- 文件移动的展示
+ */
+export const A1_APIOgetListMove = (projectId: number, parentId: number) => {
+  return http.post("cms/item/pageList", {
+    pageNum: 0,
+    pageSize: 99999,
+    projectId,
+    parentId,
+  });
+};
+
+/**
+ * 项目文件---------移动文件
+ */
+export const A2_APIOmove = (id:number,parentId:number) => {
+  return http.get(`cms/item/move/${id}/${parentId}`);
+};

src/types/api/layot.d.ts

@@ -1,6 +1,7 @@
 export type LookDomType = {
   src: string;
   type: "video" | "audio" | "model" | "";
+  flag?:boolean
 };
 export type RouterType = {
   id: string;

src/utils/authFilesLook.ts

@@ -0,0 +1,106 @@
+import store from "@/store";
+import { baseURL } from "./http";
+import { getTokenFu } from "./storage";
+
+// 携带token，转换成文件流
+export const urlChangeFu = (
+  url: string,
+  flag: boolean,
+  type?: "img" | "video" | "audio" | "pdf",
+  name?:string
+) => {
+  // flag true 为 生成 a标签 下载
+
+  let xhr = new XMLHttpRequest();
+
+  xhr.open("get", baseURL + url, true);
+
+  xhr.responseType = "blob";
+  xhr.onload = function (res) {
+    if (this.status === 200) {
+      var blob = this.response;
+
+      // 转为为Blob格式的
+      const srcRes = window.URL.createObjectURL(blob);
+
+      if (flag) {
+       
+        // 创建a标签下载
+        let link = document.createElement('a') //创建a标签
+        link.style.display = 'none'  //使其隐藏
+        link.href = srcRes //赋予文件下载地址
+        link.setAttribute('download',name!) //设置下载属性 以及文件名
+        document.body.appendChild(link) //a标签插至页面中
+        link.click() //强制触发a标签事件
+        document.body.removeChild(link)
+
+      }
+      else {
+        if (type === "img") {
+          store.dispatch({
+            type: "layout/lookBigImg",
+            payload: {
+              url: srcRes,
+              show: true,
+            },
+          });
+        } else if (type === "pdf") {
+          window.open(srcRes);
+        } else if (type === "audio" || type === "video") {
+          store.dispatch({
+            type: "layout/lookDom",
+            payload: {
+              src: srcRes,
+              type,
+              flag: true,
+            },
+          });
+        }
+      }
+    }
+  };
+
+  xhr.setRequestHeader("token", getTokenFu());
+
+  xhr.send();
+};
+
+// 查看 权限 图片 /视频 、音频
+export const authFilesLookFu = (name: string, url?: string) => {
+  let flag = false;
+
+  if (name.toLowerCase().endsWith(".pdf")) {
+    if (url) urlChangeFu(url, false, "pdf");
+    flag = true;
+  }
+
+  const arr1 = [".png", ".jpg", ".jpeg", ".gif"];
+  arr1.forEach((v) => {
+    if (name.toLowerCase().endsWith(v)) {
+      if (url) urlChangeFu(url, false, "img");
+
+      flag = true;
+    }
+  });
+
+  let type: "" | "video" | "audio" = "";
+
+  const arr2 = [".mp3", ".wav"];
+
+  arr2.forEach((v) => {
+    if (name.toLowerCase().endsWith(v)) {
+      type = "audio";
+      flag = true;
+    }
+  });
+
+  if (name.toLowerCase().endsWith(".mp4")) {
+    type = "video";
+    flag = true;
+  }
+
+  if (type && url) urlChangeFu(url, false, type);
+
+  return flag;
+};
+