cloudfile-ui/src/views/myfile/components/PalaceGridFile.vue

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