便签页内打开文件

package.json

@@ -30,6 +30,7 @@
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
+    "mitt": "^3.0.1",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
     "sm-crypto": "^0.3.13",

src/layout/NewIndex.vue

@@ -19,7 +19,8 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, provide, onUnmounted } from "vue";
+import bus from "@/utils/bus.js";
 import TopMenu from "@/layout/components/TopMenu/TopMenu.vue";
 import DefaultPage from "@/layout/components/DefaultPage/DefaultPage.vue";
 import { layer } from "@layui/layer-vue";
@@ -62,10 +63,10 @@ const openMaxmin = (title, path) => {
     }
     const oldStorage = JSON.parse(storage);
     // 判断是否存在相同的标签
-    // if (oldStorage.find((item) => item.path === path)) {
-    //   //这里应该是打开旧的标签
-    //   return;
-    // } else {
+    if (oldStorage.find((item) => item.path === path)) {
+      //这里应该是打开旧的标签
+      return;
+    }
     const thisId = layer.open({
       type: "iframe", //类型
       move: false, //不可拖拽
@@ -108,13 +109,87 @@ const openMaxmin = (title, path) => {
     item.id = thisId;
     sessionStorage.setItem("tagList", JSON.stringify([item]));
   }
+  if (!path.includes("fileEdit")) {
+    setInterval(() => {
+      const newTab = sessionStorage.getItem("newTab");
+      if (!newTab) {
+        return;
+      }
+      const tabData = JSON.parse(newTab);
+      openTab(tabData.name, tabData.path);
+      sessionStorage.removeItem("newTab");
+    }, 200);
+  }
 };
+const openTab = (title, path) => {
+  const item = {
+    title: title,
+    path: path,
+  };
+  // 判断是否存在标签列表，存在则添加，不存在则创建
+  const storage = sessionStorage.getItem("tagList");
+  if (storage) {
+    //如果标签数量超过11个，提示超出最大限制
+    if (JSON.parse(storage).length >= 11) {
+      ElMessage({ message: "标签数量超出最大限制", type: "error" });
+      return;
+    }
+    const oldStorage = JSON.parse(storage);
+    // 判断是否存在相同的标签
+    if (oldStorage.find((item) => item.path === path)) {
+      //这里应该是打开旧的标签
+      return;
+    }
+    const thisId = layer.open({
+      type: "iframe", //类型
+      move: false, //不可拖拽
+      maxmin: true,
+      title: title,
+      content: path,
+      shadeClose: false, // 点击遮罩关闭
+      area: ["80%", "80%"], //大小
+      close: (id) => {
+        // console.log(`关闭:${id}`);
+        const oldData = JSON.parse(sessionStorage.getItem("tagList"));
+        // 删除本地存储中该标签的数据
+        const newStorage = oldData.filter((item) => item.id !== id);
+        sessionStorage.setItem("tagList", JSON.stringify(newStorage));
+      },
+    });
+    item.id = thisId;
+    sessionStorage.setItem(
+      "tagList",
+      JSON.stringify([...JSON.parse(sessionStorage.getItem("tagList")), item])
+    );
+    // }
+  } else {
+    const thisId = layer.open({
+      type: "iframe", //类型
+      move: false, //不可拖拽
+      maxmin: true,
+      title: title,
+      content: path,
+      shadeClose: false, // 点击遮罩关闭
+      area: ["80%", "80%"], //大小
+      close: (id) => {
+        // console.log(`关闭:${id}`);
+        // 删除本地存储中该标签的数据
+        const oldData = JSON.parse(sessionStorage.getItem("tagList"));
+        const newStorage = oldData.filter((item) => item.id !== id);
+        sessionStorage.setItem("tagList", JSON.stringify(newStorage));
+      },
+    });
+    item.id = thisId;
+    sessionStorage.setItem("tagList", JSON.stringify([item]));
+  }
+};
+
 // 页面刷新后清除标签
 onMounted(() => {
   // 判断是否页面刷新 刷新就清楚存储的标签
   switch (performance.navigation.type) {
     case 0:
-      console.log("首次加载出来了");
+      // console.log("首次加载出来了");
       break;
     case 1:
       sessionStorage.removeItem("tagList");
@@ -137,6 +212,14 @@ onMounted(() => {
       path: `${path1}/${path2}${path3 ? "/" + path3 : ""}`,
     };
   }
+  // 绑定事件总线
+  bus.on("test", (data, num) => {
+    console.log("data", data);
+  });
+});
+onUnmounted(() => {
+  bus.off("test");
+  clearInterval();
 });
 const changeSearch = async (val, text) => {
   showSearch.value = val;

src/layout/components/DefaultPage/DefaultPage.vue

@@ -31,7 +31,7 @@
           />
         </div>
       </div>
-      <div class="search" :class="{ 'showSearch': isSearch }">
+      <div class="search" :class="{ showSearch: isSearch }">
         <input
           type="text"
           class="search_input"
@@ -72,7 +72,7 @@
         <div class="num">共查询到{{ props.allDataTotal }}个相关结果</div>
         <el-table
           :data="allData"
-          style="width: 100%; "
+          style="width: 100%"
           ref="container"
           height="584"
           scrollbar-always-on
@@ -82,7 +82,7 @@
           <el-table-column type="index" width="70" />
           <el-table-column label="名称" width="200">
             <template #default="scope">
-              <div class="flie_name" >
+              <div class="flie_name">
                 <img
                   class="table_icon"
                   :src="setIcon(scope.row.fileType)"
@@ -109,7 +109,7 @@
       </div>
     </div>
     <div v-else class="btmBox">
-      <div class="upFile">
+      <div class="upFile" @paste="copyFile">
         <el-upload
           class="upload-demo"
           :file-list="fileArr"
@@ -235,6 +235,7 @@ import myfile from "@/api/myfile/myfile";
 import { listInfo, selectInfo, getFileByScanerId } from "@/api/scanner/info.js";
 import documents from "@/api/document/document";
 import uploadApi from "@/api/upload/upload";
+import bus from "@/utils/bus.js";
 const tableFileData = ref([]);
 const copyFileType = ref();
 const previewData = ref();
@@ -293,6 +294,7 @@ const searchBtn = () => {
     });
     return;
   }
+bus.emit('test',1,1)
   emit("changeSearch", true, searchText.value);
 };
 // 获取数据
@@ -463,6 +465,23 @@ const closeOpenScanMove = () => {
   openScanMove.value = false;
   // refreshFile();
 };
+//粘贴文件上传
+const copyFile = (event) => {
+  const items = (event.clipboardData || window.clipboardData).items;
+  console.log('event',event);
+  let file = null;
+  if (!items || items.length === 0) {
+    ElMessage({ message: "请选当前浏览器不支持本地或请打开图片再复制择文件", type: "error" })
+    return;
+  }
+  // // 搜索剪切板items
+  // for (let i = 0; i < items.length; i++) {
+  //   if (items[i].type.indexOf("image") !== -1) {
+  //     file = items[i].getAsFile();
+  //     break;
+  //   }
+  // }
+};
 function formatFileSize(fileSize) {
   if (fileSize >= 1024 * 1024 * 1024) {
     // 大于等于1GB，显示GB
@@ -865,15 +884,14 @@ onMounted(() => {
       vertical-align: middle;
     }
     //表格文本超出隐藏
-:deep(.flie_name,
-.folder) {
-  /*第一步： 溢出隐藏 */
-  overflow: hidden;
-  /* 第二步：让文本不会换行， 在同一行继续 */
-  white-space: nowrap;
-  /* 第三步：用省略号来代表未显示完的文本 */
-  text-overflow: ellipsis;
-}
+    :deep(.flie_name, .folder) {
+      /*第一步： 溢出隐藏 */
+      overflow: hidden;
+      /* 第二步：让文本不会换行， 在同一行继续 */
+      white-space: nowrap;
+      /* 第三步：用省略号来代表未显示完的文本 */
+      text-overflow: ellipsis;
+    }
   }
 }
 .checkScan {

src/utils/bus.js

@@ -0,0 +1,2 @@
+import mitt from 'mitt';
+export default mitt()

src/views/myfile/MyFile.vue

@@ -630,6 +630,7 @@ import { getConfigKey } from "@/api/system/config.js"
 import TreeMenu from '@/components/TreeMenu/TreeMenu.vue'
 import addFileDrop from '@/components/addFileDrop/addFileDrop.vue'
 import addFileTempList from '@/components/addFileTempList/addFileTempList.vue'
+import bus from "@/utils/bus.js";
 
 export default {
     directives: {
@@ -1077,7 +1078,12 @@ export default {
                 name: row.dirName,
                 clickRowId: toRaw(row)
             }
-            addFolderAdd(addData)   //加了这句代码界面会渲染两次
+            // addFolderAdd(addData)   //加了这句代码界面会渲染两次
+            const itemData = {
+                name: row.dirName,
+                path:'/myfile' + row.dirId
+            }
+            sessionStorage.setItem('newTab',JSON.stringify(itemData))
             thisFolder.value = row
             // topPath.value = row.dirPath
             if (row.isEncrypt === "Y") {
@@ -1419,22 +1425,51 @@ export default {
                 if (filePreview) {
                     // 文件
                     getInfo(clickRow.value.docId).then((res)=>{
-                    // console.log('res',res);
+                    console.log('res',res);
                     clickRow.value = res.data
                     if(clickRow.value.isFiled === "Y" || !canEditArr.includes(copyFileType.value) ){
                         //归档了或者不允许编辑的格式 就是预览
                         if(thisFolderRole.value &&thisFolderRole.value.roles&& thisFolderRole.value.roles.l0800){
-                            addFileTab(clickRow.value, 0,1);
+                            // addFileTab(clickRow.value, 0,1);
+                            const itemData = {
+                                name: clickRow.value.fileName,
+                                path: `${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=0&canCopy=1&history=0&fileId=0`
+                            }
+
+                            sessionStorage.setItem('newTab',JSON.stringify(itemData))
+                            // bus.emit('test',clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=0&canCopy=1&history=0&fileId=0`)
+                            // openMaxmin(clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=0&canCopy=1&history=0&fileId=0`)
                         }else{
-                        addFileTab(clickRow.value, 0,0); 
+                        // addFileTab(clickRow.value, 0,0); 
+                             const itemData = {
+                                name: clickRow.value.fileName,
+                                path: `${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=0&canCopy=0&history=0&fileId=0`
+                            }
+                            sessionStorage.setItem('newTab',JSON.stringify(itemData))
+                        // openMaxmin(clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=0&canCopy=0&history=0&fileId=0`)
+                        // bus.emit('test',clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=0&canCopy=0&history=0&fileId=0`)
                         }
                     }else{ // 编辑
                         //--------------------------
                             loadingPreview.value = false
                             if(thisFolderRole.value &&thisFolderRole.value.roles&& thisFolderRole.value.roles.l0800){
-                                    addFileTab(clickRow.value, 1,1);
+                                    // addFileTab(clickRow.value, 1,1);
+                                    const itemData = {
+                                        name: clickRow.value.fileName,
+                                        path: `${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=1&canCopy=1&history=0&fileId=0`
+                                    }
+                                    sessionStorage.setItem('newTab',JSON.stringify(itemData))
+                                    // openMaxmin(clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=1&canCopy=1&history=0&fileId=0`)
+                                    // bus.emit('test',clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=1&canCopy=1&history=0&fileId=0`)
                                 }else{
-                                addFileTab(clickRow.value, 1,0); 
+                                // addFileTab(clickRow.value, 1,0); 
+                                    const itemData = {
+                                        name: clickRow.value.fileName,
+                                        path: `${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=1&canCopy=0&history=0&fileId=0`
+                                    }
+                                    sessionStorage.setItem('newTab',JSON.stringify(itemData))
+                                    // openMaxmin(clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=1&canCopy=0&history=0&fileId=0`)
+                                    // bus.emit('test',clickRow.value.fileName,`${window.location.origin}/fileEdit?clickRowId=${clickRow.value.docId}&canEdit=1&canCopy=0&history=0&fileId=0`)
                                 }
                             cliCC.value = false
                             loadingPreview.value = false
@@ -1486,9 +1521,19 @@ export default {
         function threeBe(data,newFileData) {
             addTempId.value = null
             if(thisFolderRole.value && thisFolderRole.value.roles.l0800){
-                        addFileTab(newFileData, 1,1);
+                        // addFileTab(newFileData, 1,1);
+                        const itemData = {
+                            name: newFileData.fileName,
+                            path: `${window.location.origin}/fileEdit?clickRowId=${newFileData.docId}&canEdit=1&canCopy=1&history=0&fileId=0`
+                        }
+                        sessionStorage.setItem('newTab',JSON.stringify(itemData))
                     }else{
-                       addFileTab(newFileData, 1,0); 
+                    //    addFileTab(newFileData, 1,0); 
+                       const itemData = {
+                            name:newFileData.fileName,
+                            path: `${window.location.origin}/fileEdit?clickRowId=${newFileData.docId}&canEdit=1&canCopy=0&history=0&fileId=0`
+                        }
+                        sessionStorage.setItem('newTab',JSON.stringify(itemData))
                     }
             newAdd.value = data
             getFileTree()
@@ -3080,7 +3125,8 @@ export default {
             delFull,
             historyDocId,
             historyFileId,
-            noHis
+            noHis,
+            bus
         }
     },
     watch: {