收藏根据标签获取文件

src/layout/indexCommon.vue

@@ -11,7 +11,6 @@
               >聚合智慧文档管理系统</span
             >
           </div>
-          <!-- TODO 搜索触发事件优化，跳转页面优化 -->
           <div class="search">
             <el-input
               v-model="searchText"

src/utils/index.js

@@ -27,6 +27,49 @@ export const canPreviewFile = (fileType)=>{
     }
     return false
 }
+
+/**
+ * 根据传入的文件类型返回图标
+ * @param {string} fileType
+ */
+export const setIcon = (fileType) => {
+  switch (fileType) {
+    case ".docx":
+      return "src/assets/images/fileType/file_DOC.png";
+      break;
+    case ".pdf":
+      return "src/assets/images/fileType/file_pdf.png";
+      break;
+    case ".ppt":
+      return "src/assets/images/fileType/file_PPT.png";
+      break;
+    case ".txt":
+      return "src/assets/images/fileType/file_TXT.png";
+      break;
+    case ".xlsx":
+      return "src/assets/images/fileType/file_XLSX.png";
+      break;
+    case ".csv":
+      return "src/assets/images/fileType/file_XLSX.png";
+      break;
+    case ".png":
+      return "src/assets/images/fileType/file_pic.png";
+      break;
+    case ".mp3":
+      return "src/assets/images/fileType/file_audio.png";
+      break;
+    case ".mp4":
+      return "src/assets/images/fileType/file_video.png";
+      break;
+    case ".zip":
+      return "src/assets/images/fileType/file_zip.png";
+      break;
+    default:
+      return "src/assets/images/fileType/file_DOC.png";
+      break;
+  }
+};
+
 /**
  * @param {number} time
  * @param {string} option

src/views/collect/index.vue

@@ -37,7 +37,12 @@
         </draggable>
       </el-tabs> -->
 
-      <el-tabs v-model="clickCollect" class="tabSign" ref="tabs">
+      <el-tabs
+        v-model="clickCollect"
+        class="tabSign"
+        @tab-change="tabchange"
+        ref="tabs"
+      >
         <el-tab-pane label="常用" name="first"></el-tab-pane>
         <el-tab-pane label="默认" name="second"></el-tab-pane>
         <el-tab-pane
@@ -91,7 +96,7 @@
           </template>
           <!-- 表格 -->
           <el-table
-            :data="tableData"
+            :data="folderArr"
             style="width: 100%"
             height="250"
             :scrollbar-always-on="true"
@@ -105,13 +110,13 @@
                     alt=""
                     style=""
                   />
-                  {{ scope.row.date }}
+                  {{ scope.row.docInfo.fileName }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="name" label="时间" width="200" />
-            <el-table-column prop="state" label="类型" width="180" />
-            <el-table-column prop="city" label="大小" width="160" />
+            <el-table-column prop="createTime" label="时间" width="200" />
+            <el-table-column prop="docInfo.fileType" label="类型" width="180" />
+            <el-table-column prop="docInfo.fileSize" label="大小" width="160" />
           </el-table>
         </el-collapse-item>
         <el-collapse-item name="file">
@@ -120,7 +125,7 @@
           </template>
           <!-- 表格 -->
           <el-table
-            :data="tableData"
+            :data="fileArr"
             style="width: 100%"
             height="250"
             :scrollbar-always-on="true"
@@ -130,17 +135,17 @@
                 <div>
                   <img
                     class="table_icon"
-                    src="@/assets/images/fileBox.png"
+                     :src="setIcon(scope.row.docInfo.fileType)"
                     alt=""
                     style=""
                   />
-                  {{ scope.row.date }}
+                  {{ scope.row.docInfo.fileName }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="name" label="时间" width="200" />
-            <el-table-column prop="state" label="类型" width="180" />
-            <el-table-column prop="city" label="大小" width="160" />
+            <el-table-column prop="createTime" label="时间" width="200" />
+            <el-table-column prop="docInfo.fileType" label="类型" width="180" />
+            <el-table-column prop="docInfo.fileSize" label="大小" width="160" />
           </el-table>
         </el-collapse-item>
       </div>
@@ -152,13 +157,13 @@
           <!-- 平铺 -->
           <el-scrollbar height="360px">
             <div class="tile_box">
-              <div class="file_box" v-for="item in 20" :key="item">
+              <div class="file_box" v-for="item in folderArr" :key="item">
                 <img
                   class="big_file_img"
                   src="@/assets/images/fileBox.png"
                   alt=""
                 />
-                <span>Inceptos</span>
+                <span>{{item.docInfo.fileName}}</span>
               </div>
             </div>
           </el-scrollbar>
@@ -170,13 +175,13 @@
           <!-- 平铺 -->
           <el-scrollbar height="360px">
             <div class="tile_box">
-              <div class="file_box" v-for="item in 20" :key="item">
+              <div class="file_box" v-for="item in fileArr" :key="item">
                 <img
                   class="big_file_img"
-                  src="@/assets/images/fileType//file_DOC.png"
+                  :src="setIcon(item.docInfo.fileType)"
                   alt=""
                 />
-                <span>Inceptos</span>
+                <span>{{item.docInfo.fileName}}</span>
               </div>
             </div>
           </el-scrollbar>
@@ -203,6 +208,7 @@
 
 <script setup>
 import Sortable from "sortablejs";
+import { setIcon } from "@/utils/index.js"
 import draggable from "vuedraggable";
 import { onMounted, ref, watch, nextTick } from "vue";
 import { toRaw } from "@vue/reactivity";
@@ -213,7 +219,7 @@ import {
   updateLabel,
   sortLabel,
 } from "@/api/biz/label.js";
-import { listFavorite ,listFavoriteById} from "@/api/biz/favorite.js";
+import { listFavorite, listFavoriteById } from "@/api/biz/favorite.js";
 const activeNames = ref(["folder", "file"]);
 const clickCollect = ref("first"); //当前标签
 const isAddCollect = ref(false); //是否在添加标签
@@ -283,6 +289,9 @@ const top = ref(0);
 const left = ref(0);
 const thisTab = ref({}); //当前右键的标签
 const isChangeTabName = ref(0); //存放修改状标签的id
+const folderArr = ref(); //文件夹数组
+const fileArr = ref(); //文件数组
+const isList = ref(true) //控制显示方式
 onMounted(async () => {
   await getList();
   await getCollectList();
@@ -352,10 +361,11 @@ const delTabs = async () => {
   // console.log("delres = ", res);
   getList();
 };
+// TODO 按标签获取收藏数据，实现文件夹收藏功能，文件夹右键菜单和文件右键菜单样式统一
 //获取收藏数据
 const getCollectList = async () => {
   const res = await listFavoriteById(17);
-    console.log("collectres = ", res);
+  console.log("collectres = ", res);
   if (res.code === 200 && res.rows.length > 0) {
     tableData.value = res.rows;
   }
@@ -407,15 +417,15 @@ const rowDrop = () => {
           if (index === oi) {
             item.orderNum = _this[ni].orderNum;
             // console.log("oiitem", item);
-          } else if(ni<index<oi) {
+          } else if (ni < index < oi) {
             item.orderNum += 1;
           }
         } else if (oi < ni) {
           // 从前往后，需要将oi和ni之间的-1
-           if (index === oi) {
+          if (index === oi) {
             item.orderNum = _this[ni].orderNum;
             // console.log("oiitem", item);
-          } else if(oi<index<ni) {
+          } else if (oi < index < ni) {
             item.orderNum -= 1;
           }
         }
@@ -431,6 +441,17 @@ const rowDrop = () => {
   });
 };
 
+const tabchange = async (labelId) => {
+  console.log("labelId", toRaw(labelId));
+  // 获取当前标签下的数据
+  const res = await listFavoriteById(labelId);
+  // console.log("res", res);
+  folderArr.value = res.filter((item) => item.isFolder === "Y");
+  fileArr.value = res.filter((item) => item.isFolder === "N");
+  console.log('folderArr',folderArr.value);
+  console.log('fileArr',fileArr.value);
+};
+
 // 工具函数
 //获取新增标签时要赋予的ordername
 const getBigOrder = (arr) => {

src/views/myfile/MyFile.vue

@@ -305,7 +305,7 @@
             <!-- 文件收藏 -->
             <div>
                 <FileCollect v-if="collects" :collects="collects" @getCollects="getCollects" :copyFileName="copyFileName"
-                    :copyFileId="copyFileId"></FileCollect>
+                    :copyFileId="copyFileId" :isFolder="isFolder" :clickRow="clickRow"></FileCollect>
             </div>
             <!-- 中栏重命名 -->
             <div>
@@ -542,6 +542,8 @@ export default {
         const haveCheck = ref(false)//是否有勾选
         const onlyView = ref(false) //预览
         const topPath = ref()//顶部路径
+        const isFolder = ref('N') //是否为文件夹
+        const clickRow = ref()//当前右键的行数据
         // 获取文件夹，中栏，文件
         function getAllTop() {
             documents.getTop(3).then(res => {
@@ -636,6 +638,8 @@ export default {
         // 文件名表格每一行点击事件
         function handleRowClick(row, col, e) {
             console.log('row',row);
+            isFolder.value = "N"
+            clickRow.value = row
             e.preventDefault();
             e.stopPropagation();
             console.log(e, 'xxyy');
@@ -1208,7 +1212,9 @@ export default {
             folderTotal,
             fileTotal,
             delMoreFile,//删除多个文件夹
-            topPath
+            topPath,
+            isFolder,
+            clickRow
         }
     },
     watch: {

src/views/myfile/modalComponebts/FileCollect.vue

@@ -48,6 +48,16 @@ export default {
         copyFileId:{
             type:Number,
             required:true
+        },
+        isFolder:{
+            type:String,
+            required:"N"
+        },
+        clickRow:{
+            type:Object,
+            default: () => {
+                return {}
+            }
         }
     },
     setup(props, { emit }) {
@@ -102,12 +112,21 @@ export default {
         }
         // 确认收藏
         function sureCollect() {
-            collect.addCollect({
-                "docInfo": {
-                    "fileId": fid - 0,
+            let query = {}
+            if(props.isFolder === "Y"){
+                query = {
+                    "isFolder":props.isFolder,
+                    "relaId": props.clickRow.dirId,
                     "labelId": collectForm.value.folders - 0,
-                },
-            }).then(res => {
+                }
+            }else{
+                query = {
+                    "isFolder":props.isFolder,
+                    "relaId": props.clickRow.docId,
+                    "labelId": collectForm.value.folders - 0,
+                }
+            }
+            collect.addCollect(query).then(res => {
                 if (res.code === 200) {
                     ElMessage({
                         message: "收藏成功",

src/views/search/index.vue

@@ -152,7 +152,6 @@ onMounted(() => {
   baseData.value = JSON.parse(searchData).rows;
   tableData.value = JSON.parse(searchData).rows;
   total.value = JSON.parse(searchData).total;
-  // console.log("tableData", toRaw(tableData.value));
   changeSearchFor(searchFor.value);
   // console.log("total", total.value );
 });
@@ -162,20 +161,23 @@ const changeSearchFor = (name) => {
   // console.log('searchFor',searchFor.value);
   const typeArr = setType(searchType.value);
   let baseDataObj = toRaw(baseData.value);
-  // console.log("baseDataObj", baseDataObj);
+  // console.log("tableData", tableData.tableData);
   tableData.value = toRaw(baseDataObj).filter(
     (item) => item.space.spaceType == name && typeArr.includes(item.fileType)
   );
+  //  console.log('tableData',tableData.value);
 };
 // 切换搜索分类
 const changeSearchType = (name) => {
   let baseDataObj = toRaw(baseData.value);
+  // console.log("baseDataObj", baseDataObj);
   // 获取分类具体数据
   const typeArr = setType(name);
   tableData.value = toRaw(baseDataObj).filter(
     (item) =>
       typeArr.includes(item.fileType) && item.space.spaceType == searchFor.value
   );
+  // console.log('tableData',tableData.value);
 };
 const changeShow = () => {
   isList.value = !isList.value;
@@ -191,7 +193,7 @@ const changeSort = async () => {
   baseData.value = res.rows;
   tableData.value = res.rows;
   changeSearchFor(searchFor.value);
-  console.log("res", res);
+  // console.log("res", res);
 };
 // 根据选项对数据处理，返回处理后的数据
 const fliterListData = (dataList) => {
@@ -239,11 +241,12 @@ const setIcon = (fileType) => {
       break;
   }
 };
+// TODO mp3筛选不出来 离大谱，一样的写法 mp4就可以
 // 设置分类
 const setType = (fileType) => {
   switch (fileType) {
     case "doc":
-      return ['.txt',".ppd", ".pdf", ".docx", ".csv",".wps"];
+      return ['.txt',".ppd", ".pdf", ".docx", ".csv",".wps",'.xls'];
       break;
     case "img":
       return [".png", ".jpg", ".jpeg"];