Merge branch 'v3' of ssh://94.191.59.107:10222/houwenfeng/cloudfile-ui into v3

src/api/biz/favorite.js

@@ -8,10 +8,10 @@ export function listFavorite(query) {
     params: query
   })
 }
-// 查询文件收藏列表
+// 根据标签收藏列表
 export function listFavoriteById(query) {
   return request({
-    url: '/biz/favorite/listByLabelId',
+    url: '/biz/favorite/list/'+query,
     method: 'get',
     params: query
   })

src/api/filespace/fileSpace.js

@@ -1,38 +1,37 @@
 import request from '../../utils/request'
-// 获取文档空间
-function getFileSpace(data) {
+// 获取控件扩容列表
+function getSpaceList(data){
     return request({
-        url: `/biz/space/list`,
-        method: "get",
-        params: data
+        url:`/biz/expansion/list`,
+        method:"get",
+        params:data
     })
 }
-// 新增文档空间
-function addFileSpace(data) {
+// 同意扩容
+function knowSpace(data){
     return request({
-        url: `/biz/space`,
-        method: "post",
-        data
+        url:`/biz/expansion/agree/${data}`,
+        method:"post"
     })
 }
-// 删除文档空间
-function delFileSpace(data) {
+// 拒绝扩容
+function refuseSpace(data){
     return request({
-        url: `/biz/space/${data}`,
-        method: "delete",
+        url:`/biz/expansion/refuse/${data}`,
+        method:"post"
     })
 }
-// 修改文档空间
-function editFileSpace(data) {
+// 申请扩容
+function addSpace(data){
     return request({
-        url: `/biz/space`,
-        method: "put",
-        data
+        url:`/biz/expansion`,
+        method:"post",
+        data,
     })
 }
 export default {
-    getFileSpace,
-    addFileSpace,
-    delFileSpace,
-    editFileSpace,
+    getSpaceList,
+    knowSpace,
+    refuseSpace,
+    addSpace
 }

src/components/historyList/index.vue

@@ -9,28 +9,36 @@
       <div class="main-conts">
         <div
           class="main-cont-left"
-          style="display: flex; flex-direction: column; margin-top: 16px"
+          style="display: flex; flex-direction: column"
         >
-            <div
-              v-for="(item, index) in treeData.data"
-              :key="index"
-              class="list-item list-item-dot"
-              :class="{ 'active-list-item list-item-dot-active': clickIndex == index }"
-              @click="clickList(index)"
-            >
-              <div>
-                <span style="padding-left: 24px">{{ item.createTime }}</span>
-              </div>
-              <!-- 显示节点标签 -->
-              <img :src="eyes" @click="previewFileClick(item)" class="eyes"/>
+          <div
+            v-for="(item, index) in treeData"
+            :key="index"
+            class="list-item list-item-dot"
+            :class="{
+              'active-list-item list-item-dot-active': clickIndex == index,
+            }"
+            @click="clickList(index)"
+          >
+            <div>
+              <span style="padding-left: 24px">{{ item.createTime }}</span>
             </div>
+            <!-- 显示节点标签 -->
+            <img :src="eyes" @click="previewFileClick(item)" class="eyes" />
+          </div>
         </div>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="pageNum"
+          v-model:limit="pageSize"
+          @pagination="getList"
+          style="width: 70%;height: 62px;"
+        />
       </div>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="closeOpen" class="cancel-button"
-            >关闭</el-button
-          >
+          <el-button @click="closeOpen" class="cancel-button">关闭</el-button>
         </span>
       </template>
     </el-dialog>
@@ -38,17 +46,16 @@
   </div>
 </template>
     <script setup>
-import { reactive, ref, toRaw, toRefs, watch } from "vue";
+import { nextTick, reactive, ref, toRaw, toRefs, watch } from "vue";
 import FileEdit from "../../views/myfile/components/FileEdit.vue";
 import { ElMessage } from "element-plus";
 import fileImg from "@/assets/images/file-img.png";
 import activeCircle from "@/assets/images/active-circle.png";
 import morenCircle from "@/assets/images/moren-circle.png";
-
+import { listVersion } from "@/api/biz/version";
 import eyes from "@/assets/images/eyes.png";
 import useUserStore from "@/store/modules/user";
 import { defineEmits } from "vue";
-const opent = ref(true);
 const props = defineProps({
   openFile: {
     type: Boolean,
@@ -62,6 +69,10 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
+  historyTotal: {
+    type: Number,
+    default: 0,
+  },
   name: {
     type: String,
     default: "",
@@ -71,6 +82,14 @@ const props = defineProps({
     required: true,
   },
 });
+const opent = ref(true);
+const total = ref(0);
+watchEffect(() => {
+  total.value=props.historyTotal
+});
+
+const pageNum=ref(1)
+const pageSize=ref(10)
 const defaultProps = {
   children: "",
   label: "createTime",
@@ -83,12 +102,22 @@ watch(
     isOpen.value = newValue;
   }
 );
-const treeData = reactive({ data: [] });
-watchEffect(() => {
-  treeData.data = props.fileUserTreeData;
-  toRaw(treeData.data);
-});
+const treeData =ref([])
+// watchEffect(() => {
+//   treeData.value = props.fileUserTreeData;
+//   toRaw(treeData.value);
+// });
+const getList=async()=>{
+  console.log('page', pageNum.value)
+  nextTick(async ()=>{
+    const resHistory = await listVersion({pageNum:pageNum.value,pageSize:pageSize.value,docId: props.docId })
+  treeData.value =resHistory.rows
+  console.log('toRaw(treeData.value)', toRaw(treeData.value))
+  total.value=resHistory.total
 
+  })
+}
+getList()
 //树
 const clickData = ref({});
 const handleNodeClick = (data) => {
@@ -98,24 +127,28 @@ const clickIndex = ref("");
 const emit = defineEmits(["changeMsgClose"]);
 //点击预览
 const previewFileClick = (item) => {
-  emit("changeMsgClose", true,item);
-  isOpen.value= false
+  emit("changeMsgClose", true, item);
+  isOpen.value = false;
 };
 const clickList = (index) => {
   clickIndex.value = index;
 };
 
-const closeOpen=()=>{
-  isOpen.value= false
-  emit("changeMsgClose", false,'');
-}
+const closeOpen = () => {
+  isOpen.value = false;
+  emit("changeMsgClose", false, "");
+};
 </script>
   <style lang="scss" scoped>
 @import "@/assets/styles/tree-common.scss";
+// .footer-main{
+//   display: flex;
+//   align-items: center;
+// }
 .main-conts {
   height: 348px;
   border: 1px solid #c1cce3;
-  display: flex;
+  // display: flex;
 
   .main-cont-left,
   .main-cont-right {
@@ -136,7 +169,7 @@ const closeOpen=()=>{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0px 16px;
+  padding: 12px 16px;
   height: 46px;
   background: #fff;
 }
@@ -156,7 +189,7 @@ const closeOpen=()=>{
   height: 14px;
 }
 
-.list-item:not(:first-child)::after  {
+.list-item:not(:first-child)::after {
   content: "";
   position: absolute;
   top: 1%;
@@ -166,21 +199,26 @@ const closeOpen=()=>{
   height: 60%;
   background-color: #c1cce3; /* 连线的颜色 */
 }
-.list-item-dot-active::before{
+.list-item-dot-active::before {
   background-image: url("@/assets/images/active-circle.png");
 }
 
 .active-list-item {
   background: #f5f7f9;
 }
-.cancel-button{
-  background: #2E6BC8;
+.cancel-button {
+  background: #2e6bc8;
   color: #fff;
   border: none;
   width: 120px;
   height: 32px;
 }
-.main-conts{
+.main-conts {
   border: none;
+  // overflow: auto;
+}
+:deep(.pagination-container .el-pagination){
+left:25px;
+bottom: 22px;
 }
 </style>

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({labelId :18});
-    console.log("collectres = ", res);
+  const res = await listFavoriteById(17);
+  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

@@ -42,9 +42,7 @@
                 </div>
                 <div>
                     <p>
-                        <span style="margin-left: 5px;">{{ useSpace ? useSpace + 'G' : '0' }}/{{ allSpace ?
-                            allSpace
-                            * 1024 + 'G' : '0' }}</span>
+                        <span style="margin-left: 5px;">{{ useSpace + 'G' }}/{{ allSpace + "G" }}</span>
                         <span style="margin-left: 5px;font-size: 12px;color: blue;cursor: pointer;"
                             @click="askApply">申请扩容</span>
                     </p>
@@ -92,8 +90,9 @@
                                 <span style="font-size: 14px;">新建</span>
                             </div>
                         </div>
-                        <template v-for="(item, index) in useMenu">
-                            <div :class="{'isCheck':haveCheck}" style="display: flex;width: 82px;opacity:0.5;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;"
+                        <template v-for="(item, index) in useMenu" :key="index">
+                            <div :class="{ 'isCheck': haveCheck }"
+                                style="display: flex;width: 82px;opacity:0.5;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;cursor: pointer;"
                                 @click="getMenu(item, index)">
                                 <div style="margin-left: 5px;">
                                     <img :src="item.img" style="width: 24px;height: 24px;" alt="">
@@ -115,24 +114,26 @@
                                 <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
                             </div>
                             <!-- 面包屑 -->
-                            <div>
-                                <BreadMenu></BreadMenu>
+                            <div class="topPath">
+                                {{ topPath }}
+                                <!-- <BreadMenu></BreadMenu> -->
                             </div>
                         </div>
                         <!-- 右侧 -->
                         <div>
                             <img :src="sort" alt="">
-                            <img :src="squre" alt="">
+                            <img :src="squre" alt="" >
                         </div>
                     </div>
                 </div>
                 <!-- 展示文件夹盒子 -->
                 <!-- 文件夹 -->
-                <div class="detailBox" @click="mouseClick">
+                <div class="detailBox file-jia" @click="mouseClick">
                     <el-collapse v-model="folder" accordion class="collapseSell">
                         <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
                             <el-table :data="folderList" style="width: 100%" @selection-change="handleSelectionChange1"
-                                :single-select="true" @row-click="folderClick" @row-contextmenu="folderRClick">
+                                :single-select="true" @row-click="folderClick" @row-contextmenu="folderRClick"
+                                ref="taskTableRef">
                                 <el-table-column type="selection" width="55" />
                                 <el-table-column label="名称" width="180">
                                     <template #default="scope">
@@ -177,8 +178,9 @@
                 <div class="fileTable">
                     <el-collapse v-model="files" accordion class="collapse" style="height: 200px;">
                         <el-collapse-item title="文件" name="2" class="">
-                            <el-table :data="fileList" style="width: 100%" @row-contextmenu="handleRowClick"
-                                @selection-change="handleSelectionChange" @row-click="mouseClick" :default-sort="{ prop: 'createTime', order: 'descending' }">
+                            <el-table v-if="fileGrid" :data="fileList" style="width: 100%;position: relative;"
+                                @row-contextmenu="handleRowClick" @selection-change="handleSelectionChange"
+                                @row-click="mouseClick" :default-sort="{ prop: 'createTime', order: 'descending' }">
                                 <el-table-column type="selection" width="55" />
                                 <el-table-column label="名称" width="200">
                                     <template #default="scope">
@@ -197,16 +199,17 @@
                                 <el-table-column label="大小">
                                     <template #default="scope">
                                         <span>
-                                            {{ scope.row.fileSize }}KB
+                                            {{ formatFileSize(scope.row.fileSize) }}
                                         </span>
                                     </template>
                                 </el-table-column>
                             </el-table>
+                            <PalaceGridFile v-else></PalaceGridFile>
                         </el-collapse-item>
                     </el-collapse>
-                    <div class="setCli" v-if="cliCC">
+                    <div class="setCli" v-if="cliCC" :style="{ left: xz + 'px', top: yz - 260 + 'px' }">
                         <template v-for="(item, index) in filterMouseCli()">
-                            <p @click="chooseSet(item, index)" class="chooseSet">
+                            <p @click="chooseSet(item, index,1)" class="chooseSet">
                                 <img :src="item.img" alt="">
                                 {{ item.name }}
                                 <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
@@ -229,32 +232,14 @@
             </div>
             <div v-else>
                 <div>
-                    <el-button @click="editOnline = true;historyPrew=false">返回</el-button>
+                    <el-button @click="editOnline = true; historyPrew = false">返回</el-button>
                 </div>
-                <FileEdit :docId="clickRowId" :copyRow="copyRow" :historyPrew="historyPrew"
-                    :historycopyRow="historycopyRow" :onlyView="onlyView" @cancleHistoryPrew="cancleHistoryPrew"></FileEdit>
+                <FileEdit :docId="clickRowId" :copyRow="copyRow" :historyPrew="historyPrew" :historycopyRow="historycopyRow"
+                    :onlyView="onlyView" @cancleHistoryPrew="cancleHistoryPrew"></FileEdit>
             </div>
             <!-- 扩容弹窗 -->
             <div>
-                <el-dialog v-model="askTo" title="扩容申请" width="30%">
-                    <el-form>
-                        <el-form-item label="新容量">
-                            <el-input-number v-model="askNum" :min="1" :max="10" />
-                        </el-form-item>
-                        <el-form-item label="申请理由">
-                            <el-input v-model="askTalk" maxlength="150" placeholder="请输入申请理由" show-word-limit
-                                type="textarea" />
-                        </el-form-item>
-                    </el-form>
-                    <template #footer>
-                        <span class="dialog-footer">
-                            <el-button @click="askTo = false">取消</el-button>
-                            <el-button type="primary" @click="sureAsk">
-                                确定
-                            </el-button>
-                        </span>
-                    </template>
-                </el-dialog>
+                <SpaceBig v-if="spaces" :spaces="spaces" :impSpaceId="impSpaceId" @getSpaceC="getSpaceC"></SpaceBig>
             </div>
             <!-- 新增文件夹弹窗 -->
             <div>
@@ -302,19 +287,13 @@
             <!-- 文件收藏 -->
             <div>
                 <FileCollect v-if="collects" :collects="collects" @getCollects="getCollects" :copyFileName="copyFileName"
-                    :copyFileId="copyFileId"></FileCollect>
+                    :copyFileId="copyFileId" :isFolder="isFolder" :clickRow="clickRow"></FileCollect>
             </div>
             <!-- 中栏重命名 -->
             <div>
-                <el-dialog v-model="folderName" title="重命名" width="30%">
-                    <el-input v-model="newName"></el-input>
-                    <template #footer>
-                        <span class="dialog-footer">
-                            <el-button @click="folderName = false">取消</el-button>
-                            <el-button type="primary" @click="sureFolderName">确认</el-button>
-                        </span>
-                    </template>
-                </el-dialog>
+                <FolderReName v-if="rename" :rename="rename" :selectedBox="selectedBox" :getAllTop="getAllTop"
+                    :copyFolderName="copyFolderName" @getRename="getRename">
+                </FolderReName>
             </div>
             <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
                 @closeImgPreview="closeImgPreview"></ImgPreview>
@@ -332,7 +311,8 @@
     <!-- 图片预览 -->
     <!-- 历史版本 -->
     <historyList :openFile="openForwardFile" :docId="clickRowId" :name="nameForm.name" :copyRow="copyRow"
-        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose">
+        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose"
+        :historyTotal="historyTotal">
     </historyList>
     <!-- 历史版本 -->
 </template>
@@ -341,7 +321,6 @@
 import { ref, toRaw, onMounted } from 'vue'
 import myfile from '../../api/myfile/myfile'
 import documents from '../../api/document/document'
-import fileSpace from '../../api/filespace/fileSpace'
 import fileCount from '../../api/fileCount/fileCount'
 import FileTree from './components/FileTree.vue'
 import BreadMenu from './components/BreadMenu.vue'
@@ -349,6 +328,10 @@ import FileEdit from './components/FileEdit.vue'
 import TransferModal from './modalComponebts/Transfer.vue'
 import CreateFloder from './modalComponebts/CreateFloder.vue'
 import FileCollect from './modalComponebts/FileCollect.vue'
+import FolderReName from './modalComponebts/FolderReName.vue'
+import SpaceBig from './modalComponebts/SpaceBig.vue'
+import PlaceGridFolder from './components/PlaceGridFolder.vue'
+import PalaceGridFile from './components/PalaceGridFile.vue'
 import ImgFile from "./jsComponents/ImgFile"
 import { Search } from '@element-plus/icons-vue'
 import blueLeft from '../../assets/images/blueLeft.png'
@@ -363,28 +346,29 @@ import { listVersion } from "@/api/biz/version";
 import useUserStore from "@/store/modules/user";
 import { useRouter, useRoute } from "vue-router";
 import { canPreviewFile } from "@/utils/index.js"
+
 export default {
     setup() {
+        const { proxy } = getCurrentInstance();
         let fileTrees = ref(false)//filetree父传子
         let thanks = ref(false)//transfer父传子
         let collects = ref(false)//文件收藏父传子
+        let rename = ref(false)//文件夹重命名
+        let spaces = ref(false)//空间扩容父传子
         let folderCase = ref(false)
+        let fileGrid = ref(true)
+        let folderGrid = ref(true)
         let editOnline = ref(true)
         let searchFire = ref('')
         let selectedIndex = ref(0)
         let folder = ref(['1'])
         let files = ref(['2'])
         let folderList = ref([])
-        let askTo = ref(false)
-        let folderName = ref(false)
-        let askNum = ref(1)
-        let askTalk = ref('')
         let cliCC = ref(false)
         let anyP = ref(false)
         let uploadModal = ref(false)
         let collectImg = ref(true)
         let selectedBox = ref(-1)
-        let newName = ref('')
         let clickRowId = ref(0)
         let trandata = ref()
         let folderId = ref('')
@@ -400,6 +384,8 @@ export default {
         let copyFileSize = ref(0)//需要操作的filesize
         let copyFileType = ref('')//需要操作的文件类型
         let copyFileName = ref("")//需要操作的文件名
+        let copyFolderName = ref("")
+        let copySpaceCup = ref(0)
         let directoryId = ref('')
         let impSpaceId = ref("")
         let impDirId = ref("")
@@ -412,7 +398,11 @@ export default {
         let folderTotal = ref(0)//文件夹total
         let fileTotal = ref(0)//文件total
         const openForwardFile = ref(false)   //历史版本展示
+        const delMoreFile = ref([])  //删除多个文件夹
+        const historyTotal = ref(0)
         const historyPrew = ref(false)
+        let xz = ref(0)
+        let yz = ref(0)
         const fileUserTreeData = reactive({ data: {} });
         let fileList = ref([
         ])
@@ -536,6 +526,9 @@ export default {
         const fileCheckout = ref(false)//是否有勾选
         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 => {
@@ -544,11 +537,12 @@ export default {
                 impSpaceId.value = userMe[0].spaceId//固定
                 newSpaceId.value = userMe[0].spaceId//变化
                 newDirId.value = userMe[0].dirId//变化
+                topPath.value = userMe[0].dirPath
                 let obj = {
                     pageNum: 1,
                     pageSize: 10
                 }
-                documents.getALLdocument({ parentId: userMe[0].dirId - 0, spaceId: userMe[0].spaceId,pageNum:obj.pageNum,pageSize:obj.pageSize }).then(res => {
+                documents.getALLdocument({ parentId: userMe[0].dirId - 0, spaceId: userMe[0].spaceId, pageNum: obj.pageNum, pageSize: obj.pageSize }).then(res => {
                     fileMenu.value = res.data
                     folderList.value = res.data
                 })
@@ -558,10 +552,14 @@ export default {
                         fileTotal.value = res.total
                         if (fileTotal.value / 10 != 1) {
                             let x = Math.trunc(fileTotal.value / 10) + 1
-                            for (var i = 1; i < x; i++) {
+                            for (var i = 1; i <= x; i++) {
                                 obj.pageNum = i
                                 myfile.getById(userMe[0].dirId - 0, obj).then(res => {
-                                    fileList.value = fileList.value.concat(res.rows); // 合并数组并更新 fileList.value
+                                    fileList.value = fileList.value.concat(res.rows)
+                                    const uniqueFileList = Array.from(new Set(fileList.value.map(item => item.docId)))
+                                        .map(docId => fileList.value.find(item => item.docId === docId));
+                                    // 合并数组并更新 fileList.value
+                                    fileList.value = uniqueFileList
                                 })
                             }
                         }
@@ -569,6 +567,12 @@ export default {
                 })
             })
         }
+        function getSpaceList() {
+            myfile.fileType(3).then(res => {
+                useSpace.value = res.data.usedCap
+                allSpace.value = res.data.spaceCap
+            })
+        }
         function changeFile(row, num) {
             copyParentId.value = row.parentId
             newDirId.value = row.dirId
@@ -587,7 +591,7 @@ export default {
                             console.error("myfile.getAllFileMenu 调用失败:", error);
                         });
                 } else {
-                    myfile.getById(res.data[0].dirId - 0)
+                    myfile.getById(row.dirId - 0)
                         .then(res => {
                             if (res.code === 200) {
                                 fileList.value = res.rows;
@@ -610,8 +614,6 @@ export default {
             if (!isItemExist) {
                 menuList.value.push(newItem);
             }
-            useSpace.value = row.usedCap
-            allSpace.value = row.spaceCap
         }
 
         // tableMenu切换
@@ -624,9 +626,13 @@ 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');
+            xz.value = e.pageX
+            yz.value = e.pageY
             copyRow.value = row
             clickRowId.value = row.docId
             copyDirId.value = row.dirId
@@ -644,10 +650,7 @@ export default {
         }
         // 申请扩容
         function askApply() {
-            this.askTo = true
-        }
-        function sureAsk() {
-            this.askTo = false
+            spaces.value = true
         }
         //mouse弹框
         async function chooseSet(row, index, num) {
@@ -714,16 +717,16 @@ export default {
             }
             if (row.name === '预览') {
                 const filePreview = canPreviewFile(copyFileType.value)
-                if(filePreview){
+                if (filePreview) {
                     onlyView.value = true
                     editOnline.value = false
                     cliCC.value = false
-                }else{
-                      showPreview.value = true
-                      const res = await preview(copyFileId.value)
-                      previewData.value = URL.createObjectURL(res)
+                } else {
+                    showPreview.value = true
+                    const res = await preview(copyFileId.value)
+                    previewData.value = URL.createObjectURL(res)
                 }
-                console.log('filePreview',filePreview);
+                console.log('filePreview', filePreview);
 
                 // console.log('res',res);
                 showPreview.value = true
@@ -731,6 +734,7 @@ export default {
                 previewData.value = URL.createObjectURL(res)
             } else if (row.name === "历史版本") {
                 const resHistory = await listVersion({ docId: clickRowId.value })
+                historyTotal.value = resHistory.total
                 fileUserTreeData.data = resHistory.rows;
                 openForwardFile.value = true
             }
@@ -744,8 +748,8 @@ export default {
             oneOrTwo.value = num
             folderCase.value = true
         }
-        function cancleHistoryPrew(val){
-            historyPrew.value=false
+        function cancleHistoryPrew(val) {
+            historyPrew.value = false
         }
         function createNewFile() {
             addFile.value = true
@@ -798,40 +802,43 @@ export default {
         }
         // 表格多选框
         function handleSelectionChange(val) {
-            console.log('checkout val',toRaw(val));
-            if (val.length > 1) {
-                // 如果选择了多项，只保留最后一项
-                val.shift();
-            }
+            delMoreFile.value = val   //删除多项的数据
+            // if (val.length > 1) {
+            //     // 如果选择了多项，只保留最后一项
+            //     val.shift();
+            // }
             if (val.length === 1) {
                 fileId.value = val[0].docId
             }
-            if(val.length){
-               folderCheckout.value = true 
-               haveCheck.value = true
-            }else{
+            if (val.length) {
+                folderCheckout.value = true
+                haveCheck.value = true
+            } else {
                 folderCheckout.value = false
-                if(!fileCheckout.value){
-                  haveCheck.value = false
+                if (!fileCheckout.value) {
+                    haveCheck.value = false
                 }
             }
         }
         // 文件夹
+
         function handleSelectionChange1(val) {
+            delMoreFile.value = val   //删除多项的数据
             if (val.length > 1) {
                 // 如果选择了多项，只保留最后一项
                 val.shift();
+                proxy.$refs.taskTableRef.toggleRowSelection(val.shift(), false);//单选操作
             }
             if (val.length === 1) {
                 folderId.value = val[0].dirId
             }
-             if(val.length){
-               fileCheckout.value = true 
-               haveCheck.value = true
-            }else{
+            if (val.length) {
+                fileCheckout.value = true
+                haveCheck.value = true
+            } else {
                 fileCheckout.value = false
-                 if(!folderCheckout.value){
-                  haveCheck.value = false
+                if (!folderCheckout.value) {
+                    haveCheck.value = false
                 }
             }
         }
@@ -839,36 +846,50 @@ export default {
         function restName(row, index) {
             // 判断是点击打开还是右键菜单打开
             row = row ? row : thisFolder.value
-            newName.value = row.dirName
-            folderName.value = true
+            copyFolderName.value = row.dirName
             selectedBox.value = row.dirId
+            rename.value = true
+
         }
         function getMenu(row, num) {
             if (row.name === '删除') {
-                // 文件夹删除
-                documents.delDocument(folderId.value).then(res => {
-                    if (res.code === 200) {
-                        ElMessage({
-                            message: "删除成功",
-                            type: "success"
-                        })
-                        getAllTop()
-                    } else {
-                        ElMessage({
-                            message: "删除失败，目录应不为空",
-                            type: "error"
-                        })
-                    }
-                })
-                myfile.delMenu(fileId.value).then(res => {
-                    if (res.code === 200) {
-                        ElMessage({
-                            message: "删除成功",
-                            type: "success"
-                        })
-                        getAllTop()
+                const datas = []
+                const isFile = ref(false)
+                delMoreFile.value.map(i => {//多选删除
+                    if (i.parentId) {//文件
+                        isFile.value = true
+                    } else {//文件夹
+                        datas.push(i.docId)
                     }
                 })
+                // 文件夹删除
+                if (isFile.value) {//文件
+                    documents.delDocument(folderId.value).then(res => {
+                        if (res.code === 200) {
+                            ElMessage({
+                                message: "删除成功",
+                                type: "success"
+                            })
+                            getAllTop()
+                        } else {
+                            ElMessage({
+                                message: "删除失败，目录应不为空",
+                                type: "error"
+                            })
+                        }
+                        isFile.value = false
+                    })
+                } else {
+                    myfile.delMenu(datas.toString()).then(res => {
+                        if (res.code === 200) {
+                            ElMessage({
+                                message: "删除成功",
+                                type: "success"
+                            })
+                            getAllTop()
+                        }
+                    })
+                }
             }
         }
         function delName(row, num) {
@@ -884,17 +905,21 @@ export default {
         }
         // 计算百分比
         function percent() {
-            let numP = 0
-            if (useSpace.value) {
-                numP = parseInt(useSpace.value / (allSpace.value * 1024) * 100)
+            let numP = 0;
+            if (useSpace.value && allSpace.value) {
+                numP = (useSpace.value / allSpace.value) * 100;
             }
-            return numP
+            return numP.toFixed(2) - 0; // 将结果保留两位小数
         }
+
         // 文件夹每行点击事件
         function folderClick(row, list) {
             // 上一级dirId就是下一级的parentId
             // 判断是点击打开还是右键菜单打开
             row = row ? row : thisFolder.value
+            // console.log('row', toRaw(row));
+            topPath.value = row.dirPath
+            // console.log('topPath',toRaw(topPath.value));
             newDirId.value = row.dirId
             newSpaceId.value = row.spaceId
             documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
@@ -906,7 +931,7 @@ export default {
                         }
                     })
                 } else {
-                    myfile.getById(res.data[0].dirId - 0).then(res => {
+                    myfile.getById(row.dirId - 0).then(res => {
                         if (res.code === 200) {
                             fileList.value = res.rows
                         }
@@ -947,22 +972,6 @@ export default {
                 getAllTop()
             }
         }
-        // 中栏重命名
-        function sureFolderName() {
-            documents.editDocument({
-                dirId: selectedBox.value - 0,
-                name: newName.value,
-            }).then(res => {
-                if (res.code === 200) {
-                    getAllTop()
-                    folderName.value = false
-                    ElMessage({
-                        message: '重命名成功',
-                        type: "success"
-                    })
-                }
-            })
-        }
         //关闭图片预览事件
         const closeImgPreview = () => {
             // console.log('close');
@@ -980,6 +989,12 @@ export default {
         function getCollects(data) {
             collects.value = data
         }
+        function getRename(data) {
+            rename.value = data
+        }
+        function getSpaceC(data) {
+            spaces.value = data
+        }
         //历史版本
         const forwardTreeData = reactive({ data: {} });
         const historycopyRow = ref({})
@@ -994,17 +1009,18 @@ export default {
         }
 
         //对mouseCli数组进行筛选，实现菜单的区分显示
-        const filterMouseCli = ()=>{
-            const array = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.pdf', '.rtf', '.txt', '.djvu', '.xps','csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx','fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx']
-            const typeArr = ['.png','.jpg','.jpeg','.JPG','.mp3','.mp4','.pdf']
-            const imgTypeArr = ['.png','.jpg','.jpeg','.JPG']
+        const filterMouseCli = () => {
+            const canPreviewArray = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.pdf', '.rtf', '.txt', '.djvu', '.xps', 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx']
+            const typeArr = ['.png', '.jpg', '.jpeg', '.JPG', '.mp3', '.mp4']
+            const imgTypeArr = ['.png', '.jpg', '.jpeg', '.JPG']
+            const canEditArr = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.txt', '.djvu', '.xps', 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'fodp', 'odp', 'otp']
             let arr = []
-            if (!(typeArr.includes(copyFileType.value) || array.includes(copyFileType.value)) ) {
+            if (!(typeArr.includes(copyFileType.value) || canPreviewArray.includes(copyFileType.value))) {
                 arr = mouseCli.value.filter(item => item.name !== "预览")
             } else {
                 arr = toRaw(mouseCli.value)
             }
-            if(!array.includes(copyFileType.value)){
+            if (!canEditArr.includes(copyFileType.value)) {
                 arr = arr.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
             }
             if (!imgTypeArr.includes(copyFileType.value)) {
@@ -1026,6 +1042,7 @@ export default {
             e.stopPropagation();
             let thisRow = toRaw(row)
             thisFolder.value = thisRow;
+            copyFolderName.value = row.dirName
             //  唤出右键菜单，思路：获取鼠标位置来定位菜单
             folderVisible.value = true;
             foldertop.value = e.pageY;
@@ -1049,12 +1066,37 @@ export default {
                 }
             })
         }
+        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';
+            }
+        }
+        function gridChange() {
+            if (fileGrid.value) {
+                fileGrid.value = false
+            } else {
+                fileGrid.value = true
+            }
+        }
         onMounted(() => {
             getAllTop()
+            getSpaceList()
             // 添加监听，点击其他地方关闭文件夹右键菜单
             window.addEventListener("click", closeRMenu, true);
+            window.addEventListener("click", mouseClick);
         })
         return {
+            getSpaceList,
             folderList,//文件夹的数据
             fileList,//文件夹的数据
             searchFire,//搜索文件的model
@@ -1073,10 +1115,6 @@ export default {
             files,
             handleRowClick,
             askApply,//申请扩容
-            askTo,
-            sureAsk,
-            askNum,
-            askTalk,
             cliCC,
             mouseCli,//文件点击弹框
             chooseSet,
@@ -1095,7 +1133,6 @@ export default {
             handleSelectionChange1,
             selectedBox,//重命名相关
             restName,//重命名相关
-            newName,//重命名相关
             getMenu,
             folderId,
             fileId,
@@ -1127,8 +1164,6 @@ export default {
             isId,
             editOnline,//在线编辑
             copyParentId,
-            folderName,
-            sureFolderName,
             copyRow,
             getAllTop,
             newDirId,
@@ -1161,6 +1196,7 @@ export default {
             folderRClick,
             closeRMenu,
             cancleHistoryPrew,
+            historyTotal,
             //历史版本=========
             fileUserTreeData,
             thanks,
@@ -1179,6 +1215,22 @@ export default {
             getCollects,//收藏子传父
             folderTotal,
             fileTotal,
+            delMoreFile,//删除多个文件夹
+            topPath,
+            xz,//文件右键菜单left
+            yz,//文件右键菜单top
+            formatFileSize,
+            isFolder,
+            clickRow,
+            rename,
+            getRename,//文件夹重命名子传父
+            copyFolderName,
+            spaces,//空间扩容父传子
+            getSpaceC,//空间扩容子传父
+            copySpaceCup,
+            fileGrid,
+            folderGrid,
+            gridChange,
         }
     },
     watch: {
@@ -1192,6 +1244,10 @@ export default {
         TransferModal,
         CreateFloder,
         FileCollect,
+        FolderReName,
+        SpaceBig,
+        PlaceGridFolder,
+        PalaceGridFile,
     },
 }
 
@@ -1329,7 +1385,12 @@ p {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background-color: #D9E0F0;
+    background-color: #F6F7F9;
+
+    .topPath {
+        color: #6F85B5;
+        font-size: 12px;
+    }
 }
 
 :deep(.el-collapse-item__header) {
@@ -1348,14 +1409,13 @@ p {
 }
 
 .fileTable {
-    position: relative;
     height: 100%;
-    /* overflow-y: auto; */
+    overflow-y: hidden;
 }
 
 .setCli {
     width: 156px;
-    max-height: 380px;
+    max-height: auto;
     position: absolute;
     top: -70px;
     left: 300px;
@@ -1363,7 +1423,7 @@ p {
     background-color: white;
     border: 1px solid gray;
     border-radius: 4px;
-    z-index: 10;
+    z-index: 3;
     overflow-y: auto;
     // font-size: 16px;
 }
@@ -1449,8 +1509,9 @@ p {
         }
     }
 }
-.isCheck{
-    opacity: 1!important;
+
+.isCheck {
+    opacity: 1 !important;
 }
 
 :deep(.el-tag__content) {
@@ -1469,4 +1530,11 @@ p {
 :deep(.el-collapse-item__wrap) {
     height: 300px;
 }
+
+// 隐藏全选按钮
+.file-jia {
+    :deep(.el-table th.el-table__cell:nth-child(1) .cell) {
+        visibility: hidden;
+    }
+}
 </style>

src/views/myfile/components/FileEdit.vue

@@ -87,7 +87,6 @@ export default {
                     id: useUserStore().uid, //用户ID
                     name: useUserStore().uname //用户姓名
                 };
-                console.log('333333')
                 // const emit = defineEmits(["cancleHistoryPrew"]);
                 // emit("cancleHistoryPrew",false);
                 // console.log(option.value,'option3===');

src/views/myfile/components/PalaceGridFile.vue

@@ -0,0 +1,114 @@
+<template>
+    <div>
+        <!-- flex盒子 -->
+        <div class="bigBox">
+            <template v-for="(item,index) in fileList">
+                <!-- 循环盒子 -->
+                <div>
+                    <!-- 图片 -->
+                    <div>
+                        <img :src="getImage(item.fileType)" alt="">
+                    </div>
+                    <!-- 名称 -->
+                    <div>
+                        <p>{{ item.fileName }}</p>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue"
+import { ElMessage } from "element-plus";
+import myfile from "../../../api/myfile/myfile";
+import documents from "../../../api/document/document";
+import ImgFile from "../jsComponents/ImgFile";
+// import bigFolder from '../../../assets/images/folderBig.png'
+export default {
+    setup() {
+        let impDirId = ref(0)
+        let impSpaceId = ref(0)
+        let newSpaceId = ref(0)
+        let newDirId = ref(0)
+        let topPath = ref("")
+        let fileList = ref([])
+        let folderList = ref([])
+        let fileTotal = ref(0)
+        let fileMenu = ref([])
+        // 获取文件夹，中栏，文件
+        function getAllTop() {
+            documents.getTop(3).then(res => {
+                let userMe = [res]
+                impDirId.value = userMe[0].dirId//固定
+                impSpaceId.value = userMe[0].spaceId//固定
+                newSpaceId.value = userMe[0].spaceId//变化
+                newDirId.value = userMe[0].dirId//变化
+                topPath.value = userMe[0].dirPath
+                let obj = {
+                    pageNum: 1,
+                    pageSize: 10
+                }
+                documents.getALLdocument({ parentId: userMe[0].dirId - 0, spaceId: userMe[0].spaceId, pageNum: obj.pageNum, pageSize: obj.pageSize }).then(res => {
+                    fileMenu.value = res.data
+                    folderList.value = res.data
+                })
+                myfile.getById(userMe[0].dirId - 0, obj).then(res => {
+                    if (res.code === 200) {
+                        fileList.value = res.rows
+                        fileTotal.value = res.total
+                        if (fileTotal.value / 10 != 1) {
+                            let x = Math.trunc(fileTotal.value / 10) + 1
+                            for (var i = 1; i <= x; i++) {
+                                obj.pageNum = i
+                                myfile.getById(userMe[0].dirId - 0, obj).then(res => {
+                                    fileList.value = fileList.value.concat(res.rows)
+                                    const uniqueFileList = Array.from(new Set(fileList.value.map(item => item.docId)))
+                                        .map(docId => fileList.value.find(item => item.docId === docId));
+                                    // 合并数组并更新 fileList.value
+                                    fileList.value = uniqueFileList
+                                    console.log(fileList.value, 'iiii');
+                                })
+                            }
+                        }
+                    }
+                })
+
+            })
+        }
+        // 筛选后缀图片
+        function getImage(file) {
+            console.log(file,'file');
+            if (file === '.txt') {
+                return ImgFile.bigTxt
+            } else if (file === '.xlxs' || file === '.docx') {
+                return ImgFile.bigxlsx
+            } else if (file === '.pptx') {
+                return ImgFile.bigpptx
+            } else if (file === '.word') {
+                return ImgFile.bigdoc
+            } else if (file === '.pdf') {
+                return ImgFile.bigpdf
+            }
+        }
+        onMounted(() => {
+            getAllTop()
+        })
+        return {
+            getAllTop,
+            impDirId,
+            impSpaceId,
+            newDirId,
+            newSpaceId,
+            fileList,
+            fileMenu,
+            folderList,
+            fileTotal,
+            getImage,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/myfile/components/PlaceGridFolder.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+import {ref,onMounted} from "vue"
+import { ElMessage } from "element-plus";
+export default {
+    setup () {
+        // 获取文件夹，中栏，文件
+        function getAllTop() {
+            documents.getTop(3).then(res => {
+                let userMe = [res]
+                impDirId.value = userMe[0].dirId//固定
+                impSpaceId.value = userMe[0].spaceId//固定
+                newSpaceId.value = userMe[0].spaceId//变化
+                newDirId.value = userMe[0].dirId//变化
+                topPath.value = userMe[0].dirPath
+                let obj = {
+                    pageNum: 1,
+                    pageSize: 10
+                }
+                documents.getALLdocument({ parentId: userMe[0].dirId - 0, spaceId: userMe[0].spaceId, pageNum: obj.pageNum, pageSize: obj.pageSize }).then(res => {
+                    fileMenu.value = res.data
+                    folderList.value = res.data
+                })
+                myfile.getById(userMe[0].dirId - 0, obj).then(res => {
+                    if (res.code === 200) {
+                        fileList.value = res.rows
+                        fileTotal.value = res.total
+                        if (fileTotal.value / 10 != 1) {
+                            let x = Math.trunc(fileTotal.value / 10) + 1
+                            for (var i = 1; i <= x; i++) {
+                                obj.pageNum = i
+                                myfile.getById(userMe[0].dirId - 0, obj).then(res => {
+                                    fileList.value = fileList.value.concat(res.rows)
+                                    const uniqueFileList = Array.from(new Set(fileList.value.map(item => item.docId)))
+                                        .map(docId => fileList.value.find(item => item.docId === docId));
+                                    // 合并数组并更新 fileList.value
+                                    fileList.value = uniqueFileList
+                                })
+                            }
+                        }
+                    }
+                })
+            })
+        }
+
+        return {
+
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/myfile/jsComponents/ImgFile.js

@@ -30,6 +30,11 @@ import collect from '../../../assets/images/collect.png'
 import downLoad from '../../../assets/images/download.png'
 import yellowStar from '../../../assets/images/yellowstar.png'
 import previewIcon from '../../../assets/images/outline_preview.png'
+import bigTxt from '../../../assets/images/txtBig.png'
+import bigxlsx from '../../../assets/images/xlsxBig.png'
+import bigpdf from '../../../assets/images/pdfBig.png'
+import bigdoc from '../../../assets/images/docBig.png'
+import bigpptx from '../../../assets/images/pptxBig.png'
 export default {
     copy,
     clipboard,
@@ -61,5 +66,10 @@ export default {
     xlxs,
     collect,
     downLoad,
-    previewIcon
+    previewIcon,
+    bigTxt,
+    bigdoc,
+    bigpdf,
+    bigpptx,
+    bigxlsx,
 }

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/myfile/modalComponebts/FolderReName.vue

@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <div>
+            <el-dialog v-model="folderName" title="重命名" width="30%">
+                <el-input v-model="newName"></el-input>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="backToFile">取消</el-button>
+                        <el-button type="primary" @click="sureFolderName">确认</el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRef } from "vue"
+import { ElMessage } from "element-plus";
+import documents from "../../../api/document/document";
+export default {
+    props: {
+        rename: {
+            type: Boolean,
+            required: true
+        },
+        selectedBox:{
+            type:Number,
+            required:true
+        },
+        getAllTop:{
+            type:Function,
+            required:true
+        },
+        copyFolderName:{
+            type:String,
+            required:true
+        }
+    },
+    setup(props, { emit }) {
+        let { backToFile, sureFolderName } = toRef(props)
+        let result = props.rename
+        let reid = props.selectedBox
+        let reSet = props.copyFolderName
+        let folderName = ref(false)
+        let newName = ref('')
+        function inlineList() {
+            folderName.value = result
+            newName.value = reSet
+        }
+        function to() {
+            folderName.value = false
+            emit("getRename", folderName.value)
+        }
+        function editName() {
+            documents.editDocument({
+                dirId: reid - 0,
+                name: newName.value,
+            }).then(res => {
+                if (res.code === 200) {
+                    props.getAllTop()
+                    ElMessage({
+                        message: '重命名成功',
+                        type: "success"
+                    })
+                    folderName.value = false
+                    emit("getRename", folderName.value)
+                }
+            })
+        }
+        onMounted(() => {
+            inlineList()
+        })
+        return {
+            folderName,
+            newName,
+            inlineList,
+            backToFile: to,
+            sureFolderName:editName,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/myfile/modalComponebts/SpaceBig.vue

@@ -0,0 +1,83 @@
+<template>
+    <div>
+        <div>
+            <el-dialog v-model="askTo" title="扩容申请" width="30%" @close="backTo">
+                <el-form :model="spaceForm">
+                    <el-form-item label="新容量">
+                        <el-input-number v-model="spaceForm.newCup" :min="1" :max="10" />
+                    </el-form-item>
+                    <el-form-item label="申请理由">
+                        <el-input v-model="spaceForm.newTalk" maxlength="150" placeholder="请输入申请理由" show-word-limit
+                            type="textarea" />
+                    </el-form-item>
+                </el-form>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="backTo">取消</el-button>
+                        <el-button type="primary" @click="sureAsk">
+                            确定
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRef } from 'vue'
+import { ElMessage } from 'element-plus';
+import fileSpace from '../../../api/filespace/fileSpace';
+export default {
+    props: {
+        spaces: {
+            type: Boolean,
+            required: true
+        },
+        impSpaceId: {
+            type: Number,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let { backTo, sureAsk } = toRef(props)
+        let result = props.spaces
+        let spid = props.impSpaceId
+        let askTo = ref(false)
+        let spaceForm = ref({
+            newCup: 1,
+            newTalk: ""
+        })
+        function inlineList() {
+            askTo.value = result
+        }
+        function to() {
+            askTo.value = false
+            emit("getSpaceC", askTo.value)
+        }
+        function addSpace() {
+            // fileSpace.addSpace({
+            //     spaceId: spid - 0,
+            //     expandCap: spaceForm.value.newCup - 0,
+            //     expandReason: spaceForm.value.newTalk
+            // }).then(res => {
+            //     console.log(res,'ssq');
+            // })
+            askTo.value = false
+            emit("getSpaceC", askTo.value)
+        }
+        onMounted(() => {
+            inlineList()
+        })
+        return {
+            askTo,
+            spaceForm,
+            backTo: to,
+            sureAsk: addSpace,
+            inlineList
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

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"];
+      return ['.txt',".ppd", ".pdf", ".docx", ".csv",".wps",'.xls'];
       break;
     case "img":
       return [".png", ".jpg", ".jpeg"];