2

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/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>
@@ -95,7 +93,7 @@
                         <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)"  >
+                                @click="getMenu(item, index)">
                                 <div style="margin-left: 5px;">
                                     <img :src="item.img" style="width: 24px;height: 24px;" alt="">
                                 </div>
@@ -117,14 +115,14 @@
                             </div>
                             <!-- 面包屑 -->
                             <div class="topPath">
-                                {{topPath}}
+                                {{ topPath }}
                                 <!-- <BreadMenu></BreadMenu> -->
                             </div>
                         </div>
                         <!-- 右侧 -->
                         <div>
                             <img :src="sort" alt="">
-                            <img :src="squre" alt="">
+                            <img :src="squre" alt="" >
                         </div>
                     </div>
                 </div>
@@ -134,7 +132,8 @@
                     <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" ref="taskTableRef">
+                                :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">
@@ -179,7 +178,7 @@
                 <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%;position: relative;"
+                            <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" />
@@ -205,11 +204,12 @@
                                     </template>
                                 </el-table-column>
                             </el-table>
+                            <PalaceGridFile v-else></PalaceGridFile>
                         </el-collapse-item>
                     </el-collapse>
                     <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"
@@ -239,25 +239,7 @@
             </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>
@@ -309,15 +291,9 @@
             </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>
@@ -335,7 +311,8 @@
     <!-- 图片预览 -->
     <!-- 历史版本 -->
     <historyList :openFile="openForwardFile" :docId="clickRowId" :name="nameForm.name" :copyRow="copyRow"
-        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose" :historyTotal="historyTotal">
+        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose"
+        :historyTotal="historyTotal">
     </historyList>
     <!-- 历史版本 -->
 </template>
@@ -344,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'
@@ -352,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'
@@ -373,23 +353,22 @@ export default {
         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('')
@@ -405,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("")
@@ -417,8 +398,8 @@ export default {
         let folderTotal = ref(0)//文件夹total
         let fileTotal = ref(0)//文件total
         const openForwardFile = ref(false)   //历史版本展示
-        const delMoreFile=ref([])  //删除多个文件夹
-        const historyTotal=ref(0)
+        const delMoreFile = ref([])  //删除多个文件夹
+        const historyTotal = ref(0)
         const historyPrew = ref(false)
         let xz = ref(0)
         let yz = ref(0)
@@ -584,6 +565,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
@@ -625,8 +612,6 @@ export default {
             if (!isItemExist) {
                 menuList.value.push(newItem);
             }
-            useSpace.value = row.usedCap
-            allSpace.value = row.spaceCap
         }
 
         // tableMenu切换
@@ -639,10 +624,8 @@ export default {
         }
         // 文件名表格每一行点击事件
         function handleRowClick(row, col, e) {
-            console.log('row',row);
             e.preventDefault();
             e.stopPropagation();
-            console.log(e, 'xxyy');
             xz.value = e.pageX
             yz.value = e.pageY
             copyRow.value = row
@@ -662,10 +645,7 @@ export default {
         }
         // 申请扩容
         function askApply() {
-            this.askTo = true
-        }
-        function sureAsk() {
-            this.askTo = false
+            spaces.value = true
         }
         //mouse弹框
         async function chooseSet(row, index, num) {
@@ -748,8 +728,8 @@ export default {
                 const res = await preview(copyFileId.value)
                 previewData.value = URL.createObjectURL(res)
             } else if (row.name === "历史版本") {
-                const resHistory = await listVersion({docId: clickRowId.value })
-                historyTotal.value= resHistory.total
+                const resHistory = await listVersion({ docId: clickRowId.value })
+                historyTotal.value = resHistory.total
                 fileUserTreeData.data = resHistory.rows;
                 openForwardFile.value = true
             }
@@ -817,7 +797,7 @@ export default {
         }
         // 表格多选框
         function handleSelectionChange(val) {
-            delMoreFile.value=val   //删除多项的数据
+            delMoreFile.value = val   //删除多项的数据
             // if (val.length > 1) {
             //     // 如果选择了多项，只保留最后一项
             //     val.shift();
@@ -836,13 +816,13 @@ export default {
             }
         }
         // 文件夹
-        
-        function handleSelectionChange1(val) {  
-            delMoreFile.value=val   //删除多项的数据
+
+        function handleSelectionChange1(val) {
+            delMoreFile.value = val   //删除多项的数据
             if (val.length > 1) {
                 // 如果选择了多项，只保留最后一项
                 val.shift();
-                 proxy.$refs.taskTableRef.toggleRowSelection(val.shift(), false);//单选操作
+                proxy.$refs.taskTableRef.toggleRowSelection(val.shift(), false);//单选操作
             }
             if (val.length === 1) {
                 folderId.value = val[0].dirId
@@ -861,49 +841,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 === '删除') {
-                const datas=[]
-                const isFile=ref(false)
-                delMoreFile.value.map(i=>{//多选删除
-                    if(i.parentId){//文件
-                        isFile.value=true
-                    }else{//文件夹
+                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()
-                    }
-                })
-            }
+                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) {
@@ -919,12 +900,13 @@ 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
@@ -985,22 +967,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');
@@ -1018,6 +984,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({})
@@ -1032,18 +1004,18 @@ export default {
         }
 
         //对mouseCli数组进行筛选，实现菜单的区分显示
-        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']
+        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) || canPreviewArray.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(!canEditArr.includes(copyFileType.value)){
+            if (!canEditArr.includes(copyFileType.value)) {
                 arr = arr.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
             }
             if (!imgTypeArr.includes(copyFileType.value)) {
@@ -1065,6 +1037,7 @@ export default {
             e.stopPropagation();
             let thisRow = toRaw(row)
             thisFolder.value = thisRow;
+            copyFolderName.value = row.dirName
             //  唤出右键菜单，思路：获取鼠标位置来定位菜单
             folderVisible.value = true;
             foldertop.value = e.pageY;
@@ -1103,13 +1076,22 @@ export default {
                 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
@@ -1128,10 +1110,6 @@ export default {
             files,
             handleRowClick,
             askApply,//申请扩容
-            askTo,
-            sureAsk,
-            askNum,
-            askTalk,
             cliCC,
             mouseCli,//文件点击弹框
             chooseSet,
@@ -1150,7 +1128,6 @@ export default {
             handleSelectionChange1,
             selectedBox,//重命名相关
             restName,//重命名相关
-            newName,//重命名相关
             getMenu,
             folderId,
             fileId,
@@ -1182,8 +1159,6 @@ export default {
             isId,
             editOnline,//在线编辑
             copyParentId,
-            folderName,
-            sureFolderName,
             copyRow,
             getAllTop,
             newDirId,
@@ -1237,9 +1212,18 @@ export default {
             fileTotal,
             delMoreFile,//删除多个文件夹
             topPath,
-            xz,
-            yz,
+            xz,//文件右键菜单left
+            yz,//文件右键菜单top
             formatFileSize,
+            rename,
+            getRename,//文件夹重命名子传父
+            copyFolderName,
+            spaces,//空间扩容父传子
+            getSpaceC,//空间扩容子传父
+            copySpaceCup,
+            fileGrid,
+            folderGrid,
+            gridChange,
         }
     },
     watch: {
@@ -1253,6 +1237,10 @@ export default {
         TransferModal,
         CreateFloder,
         FileCollect,
+        FolderReName,
+        SpaceBig,
+        PlaceGridFolder,
+        PalaceGridFile,
     },
 }
 
@@ -1391,7 +1379,8 @@ p {
     justify-content: space-between;
     align-items: center;
     background-color: #F6F7F9;
-    .topPath{
+
+    .topPath {
         color: #6F85B5;
         font-size: 12px;
     }
@@ -1534,11 +1523,11 @@ p {
 :deep(.el-collapse-item__wrap) {
     height: 300px;
 }
+
 // 隐藏全选按钮
-.file-jia{
-:deep(.el-table th.el-table__cell:nth-child(1) .cell) {
-visibility: hidden;
-}
+.file-jia {
+    :deep(.el-table th.el-table__cell:nth-child(1) .cell) {
+        visibility: hidden;
+    }
 }
-
 </style>

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/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>