文件夹收藏

src/views/collect/index.vue

@@ -110,13 +110,20 @@
                     alt=""
                     style=""
                   />
-                  {{ scope.row.docInfo.fileName }}
+                  {{ scope.row.docDir.dirName }}
                 </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="docInfo.fileSize" label="大小" width="160" />
+            <el-table-column
+              prop="docDir.createTime"
+              label="时间"
+              width="200"
+            />
+            <el-table-column prop="docInfo.fileType" label="类型" width="180">
+              <!-- <template #default="scope"> -->
+              <div>文件夹</div>
+              <!-- </template> -->
+            </el-table-column>
           </el-table>
         </el-collapse-item>
         <el-collapse-item name="file">
@@ -135,7 +142,7 @@
                 <div>
                   <img
                     class="table_icon"
-                     :src="setIcon(scope.row.docInfo.fileType)"
+                    :src="setIcon(scope.row.docInfo.fileType)"
                     alt=""
                     style=""
                   />
@@ -145,7 +152,11 @@
             </el-table-column>
             <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-column prop="docInfo.fileSize" label="大小" width="160">
+              <template #default="scope">
+                <div>{{ scope.row.docInfo.fileSize }} KB</div>
+              </template>
+            </el-table-column>
           </el-table>
         </el-collapse-item>
       </div>
@@ -163,7 +174,7 @@
                   src="@/assets/images/fileBox.png"
                   alt=""
                 />
-                <span>{{item.docInfo.fileName}}</span>
+                <span>{{ item.docDir.dirName }}</span>
               </div>
             </div>
           </el-scrollbar>
@@ -181,7 +192,7 @@
                   :src="setIcon(item.docInfo.fileType)"
                   alt=""
                 />
-                <span>{{item.docInfo.fileName}}</span>
+                <span>{{ item.docInfo.fileName }}</span>
               </div>
             </div>
           </el-scrollbar>
@@ -208,7 +219,7 @@
 
 <script setup>
 import Sortable from "sortablejs";
-import { setIcon } from "@/utils/index.js"
+import { setIcon } from "@/utils/index.js";
 import draggable from "vuedraggable";
 import { onMounted, ref, watch, nextTick } from "vue";
 import { toRaw } from "@vue/reactivity";
@@ -291,7 +302,7 @@ const thisTab = ref({}); //当前右键的标签
 const isChangeTabName = ref(0); //存放修改状标签的id
 const folderArr = ref(); //文件夹数组
 const fileArr = ref(); //文件数组
-const isList = ref(true) //控制显示方式
+const isList = ref(false); //控制显示方式
 onMounted(async () => {
   await getList();
   await getCollectList();
@@ -448,8 +459,8 @@ const tabchange = async (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);
+  console.log("folderArr", folderArr.value);
+  console.log("fileArr", fileArr.value);
 };
 
 // 工具函数
@@ -614,9 +625,16 @@ const sortArr = (field) => {
       height: 100px;
     }
     span {
+      width: 100%;
+      text-align: center;
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2; //例如超过3行显示省略号
+      overflow: hidden;
     }
   }
 }

src/views/myfile/MyFile.vue

@@ -112,7 +112,7 @@
                             <!-- 前进后退 -->
                             <div style="display: flex;justify-content: space-around;align-items: center;">
                                 <img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt=""
-                                    @click="getAllTop">
+                                    @click="arrowLift">
                                 <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
                             </div>
                             <!-- 面包屑 -->
@@ -165,13 +165,17 @@
                     <!-- 右键唤出的菜单 -->
                     <div class="right_menu" v-if="folderVisible"
                         :style="{ left: folderleft + 'px', top: foldertop + 'px' }">
+                        <div class="menu_item" @click="folderClick(null, null)">
+                            <img src="@/assets/images/trash.png" alt="" />
+                            <span>打开</span>
+                        </div>
                         <div class="menu_item" @click="restName(null, null)">
-                            <!-- <img src="@/assets/images/textbox.png" alt="" /> -->
+                            <img src="@/assets/images/textbox.png" alt="" />
                             <span>重命名</span>
                         </div>
-                        <div class="menu_item" @click="folderClick(null, null)">
-                            <!-- <img src="@/assets/images/trash.png" alt="" /> -->
-                            <span>打开</span>
+                        <div class="menu_item" @click="collectFolder">
+                            <img src="@/assets/images/collect.png" alt="" />
+                            <span>收藏</span>
                         </div>
                     </div>
                 </div>
@@ -1079,6 +1083,18 @@ export default {
             // console.log("close");
             folderVisible.value = false;
         };
+        // 文件夹收藏事件
+        const collectFolder = ()=>{
+            isFolder.value = 'Y'
+            clickRow.value = thisFolder.value
+            copyFileName.value = thisFolder.value.dirName
+            collects.value = true
+            console.log('thisFolder',thisFolder.value);
+        }
+        // 左箭头事件
+        const arrowLift = ()=>{
+            // router.go(-1)
+        }
         // 归档
         function goLock() {
             fileCount.lockActor(clickRowId.value).then(res => {
@@ -1244,7 +1260,9 @@ export default {
             yz,
             formatFileSize,
             isFolder,
-            clickRow
+            clickRow,
+            collectFolder,
+            arrowLift
         }
     },
     watch: {
@@ -1493,21 +1511,24 @@ p {
 }
 
 .right_menu {
-    width: 100px;
+    width: 156px;
     position: absolute;
     padding: 8px;
     box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
     border-radius: 4px 4px 4px 4px;
-    border: 1px solid #c1cce3;
+    border: 1px solid gray;
     background-color: #fff;
     z-index: 10000;
 
     .menu_item {
         width: 100%;
-        height: 40px;
+        height: 30px;
         border-radius: 4px 4px 4px 4px;
+        line-height: 30px;
         display: flex;
+        margin: 5px auto;
         align-items: center;
+        font-size: 13px;
 
         &:hover {
             background-color: #f5f7f9;

src/views/myfile/modalComponebts/FileCollect.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div>
-            <el-dialog v-model="fileCollect" title="重命名" width="30%">
+            <el-dialog v-model="fileCollect" title="收藏" width="30%">
                 <el-form :model="collectForm" label-width="120px">
                     <el-form-item label="名称">
                         <el-input v-model="collectForm.name" />