收藏文件打开，复制默认选择

src/components/RightMenu/index.vue

@@ -4,11 +4,11 @@
     class="right_menu"
     :style="{ left: fileRightXY.left + 'px', top: fileRightXY.top + 'px' }"
   >
-    <div class="menu_item" @click="folderClick(null, null)">
-      <img src="@/assets/images/trash.png" alt="" />
+    <div class="menu_item" @click="openFn">
+      <img src="@/assets/images/openImg.png" alt="" />
       <span class="shouzhi">打开</span>
     </div>
-    <div class="menu_item" @click="collectFolder">
+    <div class="menu_item" v-if="isTop" @click="collectFolder">
       <img src="@/assets/images/collect.png" alt="" />
       <span class="shouzhi">取消收藏</span>
     </div>
@@ -16,25 +16,40 @@
 </template>
 
 <script setup>
-import {
-  ref,
-  computed,
-  reactive,
-  defineComponent,
-  watch,
-  onMounted,
-  defineExpose,
-} from "vue";
+import { onMounted, ref, toRaw, watch, inject, defineEmits } from "vue";
 const props = defineProps({
   fileRightXY: {
-    type: String,
-    default: false,
+    type: Object,
+    default: () => {},
   },
   foldertop: {
     type: String,
     default: "",
   },
+  isFolder: {
+    type: Boolean,
+    default: false,
+  },
+   isTop: {
+    type: Boolean,
+    default: false,
+  },
 });
+const emit = defineEmits(['folderClick','delCollect','openFile']);
+const openFn = () => {
+  console.log("props.isFolder", props.isFolder);
+  if (props.isFolder) {
+    console.log(11);
+    // 打开文件夹
+    emit("folderClick");
+  } else {
+    // 打开文件
+    emit('openFile')
+  }
+};
+const collectFolder = ()=>{
+emit('delCollect')
+}
 </script>
 
 <style lang="scss" scoped>

src/views/collect/index.vue

@@ -2,12 +2,11 @@
   <div class="container">
     <div class="topPath">
       <!-- <el-icon><ArrowDown /></el-icon> -->
-      <!-- <span @click="backTopPath">{{ topPath }}</span>
+      <span @click="backTopPath">最近文件</span>
       <PathLabel
-        v-if="!loadingPreview"
         @folderClick="folderClick"
         :pathLabelData="pathLabelData"
-      ></PathLabel> -->
+      ></PathLabel>
       <!-- <BreadMenu></BreadMenu> -->
     </div>
     <!-- 标签 -->
@@ -103,9 +102,10 @@
           <el-table
             :data="folderArr"
             style="width: 100%"
-            height="250"
+            height="37vh"
             :scrollbar-always-on="true"
             @row-contextmenu="fileRightTable"
+            @row-click="folderClick"
           >
             <el-table-column fixed prop="date" label="名称" width="500">
               <template #default="scope">
@@ -116,15 +116,23 @@
                     alt=""
                     style=""
                   />
-                  <span class="shouzhi">{{ scope.row.docDir.dirName }}</span>
+                  <span class="shouzhi">{{
+                    scope.row.dirName
+                      ? scope.row.dirName
+                      : scope.row.docDir.dirName
+                  }}</span>
                 </div>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="docDir.createTime"
-              label="时间"
-              width="200"
-            />
+            <el-table-column prop="docDir.createTime" label="时间" width="200">
+              <template #default="scope">
+                {{
+                  scope.row.createTime
+                    ? scope.row.createTime
+                    : scope.row.docDir.createTime
+                }}
+              </template>
+            </el-table-column>
             <el-table-column prop="docInfo.fileType" label="类型" width="180">
               <!-- <template #default="scope"> -->
               <div>文件夹</div>
@@ -140,29 +148,56 @@
           <el-table
             :data="fileArr"
             style="width: 100%"
-            height="250"
+            height="40vh"
             :scrollbar-always-on="true"
             @row-contextmenu="fileRightTable"
+            @row-click="clickFile"
           >
             <el-table-column fixed prop="date" label="名称" width="500">
               <template #default="scope">
                 <div class="fileName">
                   <img
                     class="table_icon"
-                    :src="setIcon(scope.row.docInfo.fileType)"
+                    :src="
+                      setIcon(
+                        scope.row.fileType
+                          ? scope.row.fileType
+                          : scope.row.docInfo.fileType
+                      )
+                    "
                     alt=""
                     style=""
                   />
-                  <span class="shouzhi"> {{ scope.row.docInfo.fileName }}</span>
+                  <span class="shouzhi">
+                    {{
+                      scope.row.fileName
+                        ? scope.row.fileName
+                        : scope.row.docInfo.fileName
+                    }}</span
+                  >
                 </div>
               </template>
             </el-table-column>
             <el-table-column prop="createTime" label="时间" width="200" />
-            <el-table-column prop="docInfo.fileType" label="类型" width="180" />
+            <el-table-column prop="fileType" label="类型" width="180">
+              <template #default="scope">
+                {{
+                  scope.row.fileType
+                    ? scope.row.fileType
+                    : scope.row.docInfo.fileType
+                }}
+              </template>
+            </el-table-column>
             <el-table-column prop="docInfo.fileSize" label="大小" width="160">
               <template #default="scope">
-                 <span>
-                    {{ formatFileSize(scope.row.docInfo.fileSize) }}
+                <span>
+                  {{
+                    formatFileSize(
+                      scope.row.fileSize
+                        ? scope.row.fileSize
+                        : scope.row.docInfo.fileSize
+                    )
+                  }}
                 </span>
               </template>
             </el-table-column>
@@ -192,10 +227,12 @@
                 <el-tooltip
                   class="box-item"
                   effect="dark"
-                  :content="item.docDir.dirName"
+                  :content="item.dirName ? item.dirName : item.docDir.dirName"
                   placement="top"
                 >
-                  <span>{{ item.docDir.dirName }}</span>
+                  <span>{{
+                    item.dirName ? item.dirName : item.docDir.dirName
+                  }}</span>
                 </el-tooltip>
               </div>
             </div>
@@ -206,7 +243,7 @@
             <span class="collapseItem_title">文件</span>
           </template>
           <!-- 平铺 -->
-          <el-scrollbar style="height: 37vh">
+          <el-scrollbar style="height: 40vh">
             <div class="tile_box">
               <div
                 class="file_box"
@@ -217,16 +254,24 @@
               >
                 <img
                   class="big_file_img"
-                  :src="setIcon(item.docInfo.fileType)"
+                  :src="
+                    setIcon(
+                      item.fileType ? item.fileType : item.docInfo.fileType
+                    )
+                  "
                   alt=""
                 />
                 <el-tooltip
                   class="box-item"
                   effect="dark"
-                  :content="item.docInfo.fileName"
+                  :content="
+                    item.fileName ? item.fileName : item.docInfo.fileName
+                  "
                   placement="top"
                 >
-                  <span>{{ item.docInfo.fileName }}</span>
+                  <span>{{
+                    item.fileName ? item.fileName : item.docInfo.fileName
+                  }}</span>
                 </el-tooltip>
               </div>
             </div>
@@ -250,7 +295,26 @@
       <span>删除</span>
     </div>
   </div>
-  <RightMenu v-if="showFlieRM" :fileRightXY="fileRightXY"></RightMenu>
+  <RightMenu
+    v-show="showFlieRM"
+    @folderClick="folderClick"
+    @delCollect="delCollect"
+    @openFile='openFile'
+    :isTop="isTop"
+    :fileRightXY="fileRightXY"
+    :isFolder="isFolder"
+  ></RightMenu>
+  <ImgPreview
+    :previewData="previewData"
+    :copyFileType="copyFileType"
+    :showPreview="showPreview"
+    @closeImgPreview="closeImgPreview"
+  ></ImgPreview>
+  <div
+    v-loading.fullscreen="loadingPreview"
+    v-if="loadingPreview"
+    class="lodingBox"
+  ></div>
 </template>
 
 <script setup>
@@ -258,8 +322,10 @@ import Sortable from "sortablejs";
 // import { setIcon } from "@/utils/index.js";
 import draggable from "vuedraggable";
 import FileEdit from "@/views/myfile/components/FileEdit.vue";
-import { onMounted, ref, watch, nextTick } from "vue";
+import { onMounted, ref, watch, nextTick, inject } from "vue";
 import { toRaw } from "@vue/reactivity";
+import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
+import { canPreviewFile } from "@/utils/index.js";
 import {
   listLabel,
   addLabel,
@@ -267,8 +333,17 @@ import {
   updateLabel,
   sortLabel,
 } from "@/api/biz/label.js";
-import { listFavorite, listFavoriteById } from "@/api/biz/favorite.js";
+import {
+  listFavorite,
+  listFavoriteById,
+  delFavorite,
+} from "@/api/biz/favorite.js";
+import { preview } from "@/api/common/common.js";
+import { ElMessageBox, ElMessage } from "element-plus";
 import RightMenu from "@/components/RightMenu/index.vue";
+import documents from "@/api/document/document";
+import myfile from "@/api/myfile/myfile";
+import PathLabel from "@/components/PathLabel/index.vue";
 const activeNames = ref(["folder", "file"]);
 const clickCollect = ref("second"); //当前标签
 const isAddCollect = ref(false); //是否在添加标签
@@ -289,6 +364,20 @@ const showPreview = ref(false); //预览
 const fileRightXY = ref({}); //右键菜单坐标
 const showFlieRM = ref(false); //右键菜单显示
 const thisRData = ref(); //当前右键的文件
+const filePageNum = ref(1); //获取文件分页
+const tableBeEnd = ref(true); //控制下拉是否到底
+const tableTotal = ref(0); //表格数据总数
+const thisFolder = ref(); //当前右键的文件夹
+const pageSize = ref(10);
+const newDirId = ref();
+const newSpaceId = ref();
+const pathLabelData = ref([]);
+const isFolder = ref(false); //右键的是否是文件夹
+const isTop = ref(true); //是不是顶层的
+const loadingPreview = ref(false);
+const previewData = ref();
+const copyFileType = ref();
+const addFileTab = inject("addFileTab");
 //----引入图片----
 import file_DOC from "../../assets/images/fileType/file_DOC.png";
 import file_pdf from "../../assets/images/fileType/file_pdf.png";
@@ -309,6 +398,101 @@ onMounted(async () => {
   window.addEventListener("click", closeMenu, true);
   window.addEventListener("click", closeFlieRMenu, true);
 });
+// 文件夹每行点击事件
+const folderClick = (row, list, e, jump) => {
+  console.log("thisFolder.value", thisFolder.value);
+  // 初始化分页数据
+  tableBeEnd.value = true;
+  filePageNum.value = 1;
+  tableTotal.value = 0;
+  if (row) {
+    thisFolder.value = row.docDir ? row.docDir : row;
+  } else {
+    row = thisFolder.value;
+  }
+  console.log("row", row);
+
+  if (row.favoriteId) {
+    // 说明是拿到的收藏数据 也就是第一层
+    pathLabelData.value = []; // 先把数据清空
+    const labelItem = {
+      name: row.docDir.dirName,
+      dirId: row.docDir.dirId,
+    };
+    pathLabelData.value = [labelItem];
+  } else {
+    // 说明是点开拿到的数据 也就是第二层往后
+    const oldArr = toRaw(pathLabelData.value);
+    let newArr;
+    if (jump == undefined) {
+      newArr = oldArr.push({
+        name: row.dirName,
+        dirId: row.dirId,
+      });
+    } else {
+      newArr = oldArr.splice(jump + 1);
+    }
+    pathLabelData.value = JSON.parse(JSON.stringify(oldArr));
+  }
+  newDirId.value = row.docDir ? row.docDir.dirId : row.dirId;
+  newSpaceId.value = row.docDir ? row.docDir.spaceId : row.spaceId;
+  const query = `${newDirId.value}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`;
+  documents
+    .getALLdocumentByType(
+      {
+        parentId: newDirId.value - 0,
+        spaceId: newSpaceId.value - 0,
+      },
+      2
+    )
+    .then((res) => {
+      folderArr.value = res.data;
+      if (res.data.length === 0) {
+        myfile.getById(query).then((res) => {
+          if (res.code === 200) {
+            tableTotal.value = res.total;
+            if (res.rows.length < res.total) {
+              //第一次拿到的数据少于总数开启下拉事件
+              tableBeEnd.value = false;
+            }
+            fileArr.value = res.rows;
+          }
+        });
+      } else {
+        myfile.getById(query).then((res) => {
+          console.log("folerFile", res);
+          if (res.code === 200) {
+            tableTotal.value = res.total;
+            if (res.rows.length < res.total) {
+              //第一次拿到的数据少于总数开启下拉事件
+              tableBeEnd.value = false;
+            }
+            fileArr.value = JSON.parse(JSON.stringify(res.rows));
+            // console.log('fileList',toRaw(fileList.value));
+          }
+        });
+      }
+    });
+};
+// 文件点击事件
+const clickFile = () => {};
+// 返回最顶层
+const backTopPath = () => {
+  tabchange(clickCollect.value);
+};
+//取消收藏
+const delCollect = async () => {
+  let thisFavoriteId;
+  if (isFolder.value) {
+    thisFavoriteId = thisFolder.value;
+  } else {
+    thisFavoriteId = thisRData.value;
+  }
+  console.log("thisFavoriteId", thisFavoriteId);
+  const res = await delFavorite(thisFavoriteId);
+  tabchange(clickCollect.value);
+  console.log("res", res);
+};
 // tab右键事件
 const tabClick = (e, item) => {
   e.preventDefault();
@@ -321,31 +505,78 @@ const tabClick = (e, item) => {
   top.value = e.pageY;
   left.value = e.pageX;
 };
-// file右键事件
+// 宫格右键事件
 const fileRight = (e, item) => {
   e.preventDefault();
   e.stopPropagation();
+  if (!item.favoriteId) {
+    isTop.value = false;
+  } else {
+    isTop.value = true;
+  }
   // console.log("e", e);
-  // console.log("item", toRaw(item));
+  console.log("item", toRaw(item));
   //  唤出右键菜单，思路：获取鼠标位置来定位菜单
-  thisRData.value = item;
-  console.log("thisRData", thisRData.value);
   showFlieRM.value = true;
   fileRightXY.value.top = e.pageY;
   fileRightXY.value.left = e.pageX;
+  // 判断是文件夹还是文件
+  if (item.docInfo || item.docId) {
+    isFolder.value = false;
+    thisRData.value = item;
+  } else {
+    isFolder.value = true;
+    thisFolder.value = item;
+  }
 };
 // folder右键事件
 const fileRightTable = (item, col, e) => {
   e.preventDefault();
   e.stopPropagation();
+  if (!item.favoriteId) {
+    isTop.value = false;
+  } else {
+    isTop.value = true;
+  }
   // console.log("e", e);
-  // console.log("item", toRaw(item));
+  console.log("item", toRaw(item));
   //  唤出右键菜单，思路：获取鼠标位置来定位菜单
-  thisRData.value = item;
-  console.log("thisRData", thisRData.value);
   showFlieRM.value = true;
   fileRightXY.value.top = e.pageY;
   fileRightXY.value.left = e.pageX;
+  // 判断是文件夹还是文件
+  if (item.docInfo || item.docId) {
+    isFolder.value = false;
+    thisRData.value = item;
+  } else {
+    isFolder.value = true;
+    thisFolder.value = item;
+  }
+};
+const openFile = async () => {
+  const row = thisRData.value.favoriteId
+    ? thisRData.value.docInfo
+    : thisRData.value;
+  const typeArr = [".png", ".jpg", ".jpeg", ".JPG", ".PNG", ".mp3", ".mp4"];
+  // loadingPreview.value = true
+  const filePreview = canPreviewFile(row.fileType);
+  if (filePreview) {
+    loadingPreview.value = false;
+    addFileTab(row, 0, 0);
+  } else if (typeArr.some((item) => item == row.fileType)) {
+    const res = await preview(row.docId);
+    copyFileType.value = row.fileType;
+    showPreview.value = true;
+    previewData.value = URL.createObjectURL(res);
+  } else {
+    ElMessage.error("该文件格式不支持预览！");
+  }
+  loadingPreview.value = false;
+};
+//关闭图片预览事件
+const closeImgPreview = () => {
+  // console.log('close');
+  showPreview.value = false;
 };
 // 关闭右键菜单
 const closeMenu = () => {
@@ -402,7 +633,6 @@ const delTabs = async () => {
   // console.log("delres = ", res);
   getList();
 };
-// TODO 按标签获取收藏数据，实现文件夹收藏功能，文件夹右键菜单和文件右键菜单样式统一
 //获取收藏数据
 const getCollectList = async () => {
   const res = await listFavorite();
@@ -491,17 +721,19 @@ const tabchange = async (labelId) => {
   };
   let res;
   if (labelId === "second") {
-    res = await listFavoriteById(-1,query);
+    res = await listFavoriteById(-1, query);
     console.log("res", res);
     // return;
   } else {
     // 获取当前标签下的数据
-    res = await listFavoriteById(labelId,query);
+    res = await listFavoriteById(labelId, query);
   }
 
   // console.log("----res", res);
   folderArr.value = res.filter((item) => item.isFolder === "Y");
   fileArr.value = res.filter((item) => item.isFolder === "N");
+  //把路径清楚
+  pathLabelData.value = [];
   console.log("folderArr", folderArr.value);
   console.log("fileArr", fileArr.value);
 };
@@ -540,19 +772,19 @@ const sortArr = (field) => {
 };
 // 文件大小格式化
 function formatFileSize(fileSize) {
-    if (fileSize >= 1024 * 1024 * 1024) {
-        // 大于等于1GB，显示GB
-        return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
-    } else if (fileSize >= 1024 * 1024) {
-        // 大于等于1MB，显示MB
-        return (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
-    } else if (fileSize >= 1024) {
-        // 大于等于1KB，显示KB
-        return (fileSize / 1024).toFixed(2) + 'KB';
-    } else {
-        // 小于1KB，显示字节
-        return fileSize + 'B';
-    }
+  if (fileSize >= 1024 * 1024 * 1024) {
+    // 大于等于1GB，显示GB
+    return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB";
+  } else if (fileSize >= 1024 * 1024) {
+    // 大于等于1MB，显示MB
+    return (fileSize / (1024 * 1024)).toFixed(2) + "MB";
+  } else if (fileSize >= 1024) {
+    // 大于等于1KB，显示KB
+    return (fileSize / 1024).toFixed(2) + "KB";
+  } else {
+    // 小于1KB，显示字节
+    return fileSize + "B";
+  }
 }
 const setIcon = (fileType) => {
   switch (fileType) {
@@ -598,6 +830,14 @@ const setIcon = (fileType) => {
 .shouzhi {
   margin-left: 5px;
 }
+.lodingBox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vh;
+  height: 100vh;
+  z-index: 10000000;
+}
 .container {
   height: 100%;
   background-color: #fff;
@@ -608,7 +848,7 @@ const setIcon = (fileType) => {
     height: 24px;
     display: flex;
     align-items: center;
-    margin-left: 4px;
+    margin-left: 16px;
     cursor: pointer;
     color: #6f85b5;
     font-size: 12px;

src/views/department/MyFile.vue

@@ -1901,7 +1901,7 @@ export default {
                 if(fileGrid.value == 0){
                     pageSize.value = 10
                     }else{
-                    pageSize.value = 40
+                    pageSize.value = 50
                 }
                 fileHeight.value = '38vh'
                  if(!thisFolder.value.dirId)return

src/views/myfile/components/FileTree.vue

@@ -1,7 +1,8 @@
 <template>
     <div>
         <el-dialog v-model="treeOpen" :title="options" width="30%" :close-on-click-modal="false">
-              <el-tree v-if="!changeMes" :data="thisFoder" :props="defaultProps" @node-click="handleNodeClick" />
+              <!-- <el-tree v-if="!changeMes"  :data="thisFoder"  :props="defaultProps"  highlight-current :current-node-key="dirIds" node-key='id' @node-click="handleNodeClick" /> -->
+              <div v-if="!changeMes" class="topspan" :class="{'alive':dirIds ==thisFoder.id}"  @click="handleNodeClick">{{thisFoder.label}}</div>
             <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
             <template #footer>
                 <span class="dialog-footer">
@@ -14,7 +15,7 @@
 </template>
 
 <script>
-import { ref, onMounted, toRefs } from 'vue';
+import { ref, onMounted, toRefs, toRaw } from 'vue';
 import documents from '../../../api/document/document';
 import myfile from '../../../api/myfile/myfile'
 import { ElMessage } from 'element-plus'
@@ -47,14 +48,14 @@ export default {
         let spaceIds = props.newSpaceId
         let fileIds = props.fileId
         let changeMes = props.copyOrMove - 0
-        let dirIds = ref('')
+        let dirIds = ref()
         let treeOpen = ref(false)
         let options = ref("复制到")
         let treeData = ref([])
-        let thisFoder = ref([{
+        let thisFoder = ref({
             label:'当前文件夹',
             id:props.thisFolder - 0,
-        }])
+        })
         let defaultProps = ref({
             label: "label",
             value: "id",
@@ -99,7 +100,14 @@ export default {
             emit("getChildren", treeOpen.value)
         }
         function handleNodeClick(data) {
-            dirIds.value = data.id
+            // console.log('1',thisFoder.value);
+            if(data){
+
+                dirIds.value = data.id
+            }else{
+                dirIds.value = thisFoder.value.id
+            }
+            // console.log('dirIds.value',dirIds.value);
         }
         function changes() {
             if (changeMes === 1) {
@@ -112,6 +120,8 @@ export default {
             modalOpen()
             getFileTree()
             changes()
+            dirIds.value = props.copyOrMove - 0?'':props.thisFolder - 0
+            //  console.log('12',thisFoder.value);
         })
         return {
             getFileTree,
@@ -133,4 +143,16 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.topspan{
+    width: 100%;
+    height: 26px;
+    padding-left: 16px;
+    line-height: 26px;
+    font-size: 14px;
+    background-color: #fff;
+}
+.alive{
+    background-color: #F5F7F9;
+}
+</style>

src/views/myfile/modalComponebts/FileCollect.vue

@@ -8,7 +8,7 @@
                     </el-form-item>
                     <el-form-item label="收藏标签">
                         <div class="newTag" v-if="tagCollect">
-                            <el-input v-model="newTag" placeholder="请输入新标签" @blur="tagBlur"></el-input>
+                            <el-input v-model="newTag" placeholder="请输入新标签" maxlength="10" @blur="tagBlur"></el-input>
                         </div>
                         <el-select v-model="collectForm.folders" class="m-2" placeholder="请选择" size="large"
                             @change="collectChange">