cloudfile-ui/src/views/myfile/MyFile.vue

<template>
    <div>
        <div class="bigBox">
            <div class="settingBox" @click="mouseClick">
                <!-- 设置盒子顶部搜索 -->
                <div class="topSearch">
                    <div style="position: relative;">
                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件"
                            style="width: 15rem;" />
                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
                            <Search />
                        </el-icon>
                    </div>
                    <div>
                        <el-icon style="font-size: 24px;" @click="createNewMenu(1)">
                            <Plus />
                        </el-icon>
                        <!-- @click="createNewFile" -->
                    </div>
                </div>
                <!-- 方块点击盒子 -->
                <div
                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 80vh;align-content: flex-start;overflow-y: auto;">
                    <!-- v-for盒子 -->
                    <template v-for="(item, index) in fileMenu">
                        <div class="setBox" @click="changeFile(item, index)">
                            <el-dropdown trigger="click" class="selectChe">
                                <span class="el-dropdown-link">
                                    ...
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="restName(item, index)">重命名</el-dropdown-item>
                                        <el-dropdown-item @click="delName(item, index)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;">
                            <p class="ellipsis-text">{{ item.dirName }}</p>
                        </div>
                    </template>
                </div>
                <div>
                    <p>
                        <span style="margin-left: 5px;">{{ useSpace ? useSpace + 'G' : '0' }}/{{ allSpace ?
                            allSpace
                            * 1024 + 'G' : '0' }}</span>
                        <span style="margin-left: 5px;font-size: 12px;color: blue;cursor: pointer;"
                            @click="askApply">申请扩容</span>
                    </p>
                    <el-progress style="margin-left: 8px;" :percentage="percent()" />
                </div>
            </div>
            <!-- 右侧大盒子 -->
            <div class="mesBox" v-if="editOnline">
                <!-- 功能盒子  -->
                <div class="useBox">
                    <!-- table切换 -->
                    <div style="width: 100%;height: 24px;background-color: #7084B4;line-height: 20px;">
                        <template v-for="(item, index) in menuList">
                            <span @click="tableChange(item, index)"
                                :class="['tables', { tableLis: selectedIndex === index }]">
                                {{ item.name }}
                                <img v-if="selectedIndex === index ? true : false"
                                    style="position: absolute;top: 4px;right: 4px;" src="../../assets/images/close.png"
                                    @click="shotdown(item)">
                            </span>
                        </template>
                    </div>
                    <!-- 众多功能 -->
                    <div class="manyUse">
                        <div
                            style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
                            <div style="margin-left: 5px;">
                                <img src="../../assets/images/upload.png" style="width: 24px;height: 24px;" alt="">
                            </div>
                            <div style="margin-left: 5px;">
                                <span style="color: black;cursor: pointer;" @click="uploadModal = true">上传
                                </span>
                            </div>
                        </div>
                        <div
                            style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;">
                            <div style="margin-left: 5px;">
                                <el-icon
                                    style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;"
                                    @click="createNewMenu(0)">
                                    <Plus />
                                </el-icon>
                            </div>
                            <div style="margin-left: 5px;" @click="createNewMenu(0)">
                                <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;"
                                @click="getMenu(item, index)">
                                <div style="margin-left: 5px;">
                                    <img :src="item.img" style="width: 24px;height: 24px;" alt="">
                                </div>
                                <div style="margin-left: 5px;">
                                    <span style="font-size: 14px;">{{ item.name }}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <!-- 面包屑功能栏 -->
                    <div class="breadBox">
                        <!-- 左侧 -->
                        <div style="display: flex;justify-content: space-around;align-items: center;">
                            <!-- 前进后退 -->
                            <div style="display: flex;justify-content: space-around;align-items: center;">
                                <img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt=""
                                    @click="getAllTop">
                                <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
                            </div>
                            <!-- 面包屑 -->
                            <div>
                                <BreadMenu></BreadMenu>
                            </div>
                        </div>
                        <!-- 右侧 -->
                        <div>
                            <img :src="sort" alt="">
                            <img :src="squre" alt="">
                        </div>
                    </div>
                </div>
                <!-- 展示文件夹盒子 -->
                <!-- 文件夹 -->
                <div class="detailBox" @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">
                                <el-table-column type="selection" width="55" />
                                <el-table-column label="名称" width="180">
                                    <template #default="scope">
                                        <span>
                                            <img src="../../assets/images/fileBox.png" style="width: 20px;height: 24px;"
                                                alt="">
                                            {{ scope.row.dirName }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTime" label="时间" width="180" />
                                <el-table-column prop="dirType" label="类型">
                                    <template #default="scope">
                                        <span>{{ scope.row.dirType === "1" ? "文件夹" : "未知类型" }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="大小">
                                    <template #default="scope">
                                        <span>
                                            10KB
                                        </span>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </el-collapse-item>
                    </el-collapse>
                    <!-- 右键唤出的菜单 -->
                    <div class="right_menu" v-if="folderVisible"
                        :style="{ left: folderleft + 'px', top: foldertop + 'px' }">
                        <div class="menu_item" @click="restName(null, null)">
                            <!-- <img src="@/assets/images/textbox.png" alt="" /> -->
                            <span>重命名</span>
                        </div>
                        <div class="menu_item" @click="folderClick(null, null)">
                            <!-- <img src="@/assets/images/trash.png" alt="" /> -->
                            <span>打开</span>
                        </div>
                    </div>
                </div>
                <!-- 文件 -->
                <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-column type="selection" width="55" />
                                <el-table-column label="名称" width="200">
                                    <template #default="scope">
                                        <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                            <el-icon v-if="collectImg">
                                                <Star />
                                            </el-icon>
                                            <img v-else src="../../assets/images/yellowstar.png" alt="">
                                            <img :src="getImage(scope.row.fileType)" alt="">
                                            {{ scope.row.fileName }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTime" label="时间" sortable width="180" />
                                <el-table-column prop="fileType" label="类型" />
                                <el-table-column label="大小">
                                    <template #default="scope">
                                        <span>
                                            {{ scope.row.fileSize }}KB
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="setCli" v-if="cliCC">
                        <template v-for="(item, index) in filterMouseCli()">
                            <p @click="chooseSet(item, index)" class="chooseSet">
                                <img :src="item.img" alt="">
                                {{ item.name }}
                                <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
                                    style="color: #7084B4;float: right;position: relative;" class="arrow">></span>
                            </p>
                        </template>
                    </div>
                    <div class="setCli1" v-if="anyP">
                        <p @click="chooseSet1(0)" class="chooseSet">
                            <img src="../../assets/images/user.png" alt="">
                            选择人员
                        </p>
                        <p class="chooseSet" @click="goLock">
                            <img src="../../assets/images/archiveTray.png" alt="">
                            归档
                        </p>
                    </div>
                </div>

            </div>
            <div v-else>
                <div>
                    <el-button @click="editOnline = true;historyPrew=false">返回</el-button>
                </div>
                <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>
            </div>
            <!-- 新增文件夹弹窗 -->
            <div>
                <CreateFloder v-if="folderCase" :folderCase="folderCase" @getChildrenC="getChildrenC" :oneOrTwo="oneOrTwo"
                    :impDirId="impDirId" :impSpaceId="impSpaceId" :newDirId="newDirId" :newSpaceId="newSpaceId"
                    :getAllTop="getAllTop">
                </CreateFloder>
            </div>
            <!-- 文件上传 -->
            <div>
                <el-dialog v-model="uploadModal" title="文件上传" width="30%">
                    <el-upload class="upload-demo" drag :http-request="onSuccess" multiple>
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">拖入或<em>点击上传</em></div>
                        <template #tip>
                            <div class="el-upload__tip">请选择或拖入文件</div>
                        </template>
                    </el-upload>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="uploadModal = false">取消</el-button>
                            <el-button type="primary" @click="sureUpload">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 文件重命名 -->
            <div>
                <el-dialog v-model="fileNameChange" title="重命名" width="30%">
                    <el-form :model="nameForm" label-width="120px">
                        <el-form-item label="新名字">
                            <el-input v-model="nameForm.name"></el-input>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="fileNameChange = false">取消</el-button>
                            <el-button type="primary" @click="sureChangeName">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 文件收藏 -->
            <div>
                <FileCollect v-if="collects" :collects="collects" @getCollects="getCollects" :copyFileName="copyFileName"
                    :copyFileId="copyFileId"></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>
            </div>
            <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
                @closeImgPreview="closeImgPreview"></ImgPreview>
            <div>
                <FileTree v-if="fileTrees" :fileTrees="fileTrees" :newSpaceId="newSpaceId" :fileId="clickRowId"
                    @getChildren="getChildren" :copyOrMove="copyOrMove"></FileTree>
            </div>
            <!-- 穿梭框 -->
            <div>
                <TransferModal v-if="thanks" :thanks="thanks" :clickRowId="clickRowId" :workOrEdit="workOrEdit"
                    @getCback="getCback"></TransferModal>
            </div>
        </div>
    </div>
    <!-- 图片预览 -->
    <!-- 历史版本 -->
    <historyList :openFile="openForwardFile" :docId="clickRowId" :name="nameForm.name" :copyRow="copyRow"
        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose" :historyTotal="historyTotal">
    </historyList>
    <!-- 历史版本 -->
</template>

<script>
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'
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 ImgFile from "./jsComponents/ImgFile"
import { Search } from '@element-plus/icons-vue'
import blueLeft from '../../assets/images/blueLeft.png'
import grayRight from "../../assets/images/grayRight.png"
import sort from '../../assets/images/sort.png'
import squre from '../../assets/images/squre.png'
import { ElMessage } from 'element-plus'
import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
import { preview } from "@/api/common/common.js";
import historyList from "@/components/historyList/index.vue"; //选择文件发送的列表，历史版本
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() {
        let fileTrees = ref(false)//filetree父传子
        let thanks = ref(false)//transfer父传子
        let collects = ref(false)//文件收藏父传子
        let folderCase = ref(false)
        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('')
        let fileId = ref('')
        let tranvalue = ref([])
        let useSpace = ref(0)
        let allSpace = ref(0)
        let fileArr = ref([])
        let copyDirId = ref(0)//需要操作的dirid
        let copySpaceId = ref(0)//需要操作的spaceid
        let copyDocId = ref(0)//需要操作的docid
        let copyFileId = ref(0)//需要操作的fileid
        let copyFileSize = ref(0)//需要操作的filesize
        let copyFileType = ref('')//需要操作的文件类型
        let copyFileName = ref("")//需要操作的文件名
        let directoryId = ref('')
        let impSpaceId = ref("")
        let impDirId = ref("")
        let impNum = ref(0)
        let copyParentId = ref("")//文件夹
        let needBag = ref("")
        let copyOrMove = ref(0)//0代表复制，1代表移动
        let oneOrTwo = ref(0)//0代表二级，1代表一级
        let sortNum = ref(0)
        let folderTotal = ref(0)//文件夹total
        let fileTotal = ref(0)//文件total
        const openForwardFile = ref(false)   //历史版本展示
        const historyTotal=ref(0)
        const historyPrew = ref(false)
        const fileUserTreeData = reactive({ data: {} });
        let fileList = ref([
        ])
        let menuList = ref([
        ])
        let useMenu = ref([
            // {
            //     img: ImgFile.copy,
            //     name: "复制"
            // },
            // {
            //     img: ImgFile.clipboard,
            //     name: "粘贴"
            // },
            {
                img: ImgFile.share,
                name: "分享给"
            },
            {
                img: ImgFile.trash,
                name: "删除"
            },
        ])
        let arrorMenu = ref([
            {
                img: ImgFile.file,
                name: "文件"
            },
            {
                img: ImgFile.folder,
                name: '文件夹'
            },
            {
                img: ImgFile.image,
                name: "图片"
            },
            {
                img: ImgFile.filmSlate,
                name: "视频"
            },
            {
                img: ImgFile.musicNotes,
                name: "音频"
            }
        ])
        let mouseCli = ref([
            {
                img: ImgFile.previewIcon,
                name: "预览"
            },
            {
                img: ImgFile.addolder,
                name: "移动到...",
            },
            {
                img: ImgFile.copy,
                name: "复制到...",
            },
            // {
            //     img: ImgFile.clipboard,
            //     name: "粘贴"
            // },
            {
                img: ImgFile.collect,
                name: "收藏"
            },
            {
                img: ImgFile.downLoad,
                name: "下载"
            },
            {
                img: ImgFile.textbox,
                name: "重命名"
            },
            // {
            //     img: ImgFile.goon,
            //     name: "发送"
            // },
            {
                img: ImgFile.share,
                name: "分享"
            },
            {
                img: ImgFile.notePencil,
                name: "在线编辑"
            },
            {
                img: ImgFile.togger,
                name: "协作"
            },
            {
                img: ImgFile.icc,
                name: "文字识别"
            },
            {
                img: ImgFile.history,
                name: "历史版本"
            },
            {
                img: ImgFile.trash,
                name: "删除"
            }
        ])
        let nameForm = ref({
            name: ""
        })
        let fileNameChange = ref(false)
        let fileMenu = ref([])
        let copyRow = ref({})
        let newDirId = ref('')
        let newSpaceId = ref('')
        let workOrEdit = ref(0)
        const showPreview = ref(false)//控制图片预览组件显示
        const previewData = ref()//需要预览的文件的数据
        const router = useRouter(); //注册路由
        const folderVisible = ref(false); //显示文件夹右键菜单
        const foldertop = ref(0);
        const folderleft = ref(0);
        const thisFolder = ref({}); //当前右键的文件夹
        const folderCheckout = ref(false)//是否有勾选
        const fileCheckout = ref(false)//是否有勾选
        const haveCheck = ref(false)//是否有勾选
        const onlyView = ref(false) //预览
        // 获取文件夹，中栏，文件
        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//变化
                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
                                })
                            }
                        }
                    }
                })
            })
        }
        function changeFile(row, num) {
            copyParentId.value = row.parentId
            newDirId.value = row.dirId
            newSpaceId.value = row.spaceId
            documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
                folderList.value = res.data
                // if (res.code === 200) {
                if (res.data.length === 0) {
                    myfile.getById(newDirId.value)
                        .then(res => {
                            if (res.code === 200) {
                                fileList.value = res.rows;
                            }
                        })
                        .catch(error => {
                            console.error("myfile.getAllFileMenu 调用失败:", error);
                        });
                } else {
                    myfile.getById(res.data[0].dirId - 0)
                        .then(res => {
                            if (res.code === 200) {
                                fileList.value = res.rows;
                            }
                        })
                        .catch(error => {
                            console.error("myfile.getAllFileMenu 调用失败:", error);
                        });
                }
                // }
            })
            this.selectedIndex = num
            const newItem = {
                name: row.dirName,
                choose: row.dirName
            };
            // 检查 newItem 是否已存在于 menuList 中
            const isItemExist = menuList.value.some(item => item.choose === newItem.choose);
            // 如果不存在，则添加它
            if (!isItemExist) {
                menuList.value.push(newItem);
            }
            useSpace.value = row.usedCap
            allSpace.value = row.spaceCap
        }

        // tableMenu切换
        function tableChange(row, num) {
            this.selectedIndex = num
        }
        // x图标事件
        function shotdown(row) {
            this.menuList = this.menuList.filter(item => item.name !== row.name)
        }
        // 文件名表格每一行点击事件
        function handleRowClick(row, col, e) {
            e.preventDefault();
            e.stopPropagation();
            console.log(e, 'xxyy');
            copyRow.value = row
            clickRowId.value = row.docId
            copyDirId.value = row.dirId
            copySpaceId.value = row.spaceId
            copyFileId.value = row.fileId
            copyFileSize.value = row.fileSize
            copyFileType.value = row.fileType
            nameForm.value.name = row.fileName
            copyFileName.value = row.fileName
            if (cliCC.value === true) {
                cliCC.value = false
            } else {
                cliCC.value = true
            }
        }
        // 申请扩容
        function askApply() {
            this.askTo = true
        }
        function sureAsk() {
            this.askTo = false
        }
        //mouse弹框
        async function chooseSet(row, index, num) {
            if (row.name == '在线编辑' || row.name == '协作') {
                cliCC.value = true
            } else {
                cliCC.value = false
            }
            if (row.name == '分享') {
                workOrEdit.value = num
                thanks.value = true
            } else {
                thanks.value = false
            }
            if (row.name == '协作') {
                if (anyP.value) {
                    anyP.value = false
                } else {
                    anyP.value = true
                }
            } else {
                anyP.value = false
            }
            if (row.name == '删除') {
                myfile.delMenu(clickRowId.value).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            type: "success",
                            message: "删除成功"
                        })
                        getAllTop()
                    }
                })
            }
            if (row.name === '复制到...') {
                copyOrMove.value = 0
                fileTrees.value = true
            }
            if (row.name === '移动到...') {
                copyOrMove.value = 1
                fileTrees.value = true
            }
            if (row.name === '重命名') {
                fileNameChange.value = true
            }
            if (row.name === "下载") {
                location.href = `${import.meta.env.VITE_APP_BASE_API}/api/download/${copyFileId.value}`;
            }
            if (row.name === '收藏') {
                collects.value = true
            }
            if (row.name === '在线编辑') {
                editOnline.value = false
                cliCC.value = false
            }
            if (row.name === '文字识别') {
                router.push({
                    path: '/identifyFont',
                    query: {
                        fileId: copyFileId.value,
                        fileType: copyFileType.value
                    }
                })
            }
            if (row.name === '预览') {
                const filePreview = canPreviewFile(copyFileType.value)
                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)
                }
                console.log('filePreview', filePreview);

                // console.log('res',res);
                showPreview.value = true
                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
                fileUserTreeData.data = resHistory.rows;
                openForwardFile.value = true
            }
        }
        function chooseSet1(num) {
            workOrEdit.value = num
            thanks.value = true
            anyP.value = false
        }
        function createNewMenu(num) {
            oneOrTwo.value = num
            folderCase.value = true
        }
        function cancleHistoryPrew(val){
            historyPrew.value=false
        }
        function createNewFile() {
            addFile.value = true
        }
        function arrowClick(row, num) {
            if (row.name === '文件') {
                uploadModal.value = true
            } else {
                uploadModal.value = false
            }
        }
        // 确认上传
        function sureUpload() {
            if (fileArr.value.length > 0) {
                for (var i = 1; i <= fileArr.value.length; i++) {
                    myfile.uploadFile({
                        spaceId: newSpaceId.value - 0,
                        dirId: newDirId.value - 0,
                        file: fileArr.value[i - 1]
                    }).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "上传文件成功",
                                type: "success"
                            })
                            getAllTop()
                            uploadModal.value = false
                            fileArr.value = []
                        }
                    })
                }
            }
        }
        function onSuccess(files, val) {
            fileArr.value.push(files.file)
        }
        // 筛选后缀图片
        function getImage(file) {
            if (file === '.txt') {
                return ImgFile.txt
            } else if (file === '.xlxs' || file === '.docx') {
                return ImgFile.xlxs
            } else if (file === '.pptx') {
                return ImgFile.pptx
            } else if (file === '.word') {
                return ImgFile.word
            } else if (file === '.pdf') {
                return ImgFile.pdf
            }
        }
        // 表格多选框
        function handleSelectionChange(val) {
            console.log('checkout val',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 {
                folderCheckout.value = false
                if (!fileCheckout.value) {
                    haveCheck.value = false
                }
            }
        }
        // 文件夹
        function handleSelectionChange1(val) {
            if (val.length > 1) {
                // 如果选择了多项，只保留最后一项
                val.shift();
            }
            if (val.length === 1) {
                folderId.value = val[0].dirId
            }
            if (val.length) {
                fileCheckout.value = true
                haveCheck.value = true
            } else {
                fileCheckout.value = false
                if (!folderCheckout.value) {
                    haveCheck.value = false
                }
            }
        }
        // 重命名
        function restName(row, index) {
            // 判断是点击打开还是右键菜单打开
            row = row ? row : thisFolder.value
            newName.value = row.dirName
            folderName.value = true
            selectedBox.value = row.dirId
        }
        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()
                    }
                })
            }
        }
        function delName(row, num) {
            documents.delDocument(row.dirId).then(res => {
                if (res.code === 200) {
                    getAllTop()
                    ElMessage({
                        message: "删除成功",
                        type: "success"
                    })
                }
            })
        }
        // 计算百分比
        function percent() {
            let numP = 0
            if (useSpace.value) {
                numP = parseInt(useSpace.value / (allSpace.value * 1024) * 100)
            }
            return numP
        }
        // 文件夹每行点击事件
        function folderClick(row, list) {
            // 上一级dirId就是下一级的parentId
            // 判断是点击打开还是右键菜单打开
            row = row ? row : thisFolder.value
            newDirId.value = row.dirId
            newSpaceId.value = row.spaceId
            documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
                folderList.value = res.data
                if (res.data.length === 0) {
                    myfile.getById(newDirId.value).then(res => {
                        if (res.code === 200) {
                            fileList.value = res.rows
                        }
                    })
                } else {
                    myfile.getById(row.dirId - 0).then(res => {
                        if (res.code === 200) {
                            fileList.value = res.rows
                        }
                    })
                }
            })
        }
        // 确认文件重命名
        function sureChangeName() {
            myfile.editNewMenu({
                dirId: copyDirId.value - 0,
                docId: clickRowId.value - 0,
                fileId: copyFileId.value,
                fileName: nameForm.value.name,
                fileSize: copyFileSize.value - 0,
                fileType: copyFileType.value,
                remark: '',
                spaceId: copySpaceId.value - 0,
            }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "重命名成功",
                        type: "success"
                    })
                    fileNameChange.value = false
                    getAllTop()
                }
            })
        }
        // 判断id
        function isId() {
            if (directoryId.value === '') {
                directoryId.value = 0
                getAllTop()
            }
            if (folderId.value === '') {
                folderId.value = 0
                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');
            showPreview.value = false
        }
        function getChildren(data) {
            fileTrees.value = data
        }
        function getCback(data) {
            thanks.value = data
        }
        function getChildrenC(data) {
            folderCase.value = data
        }
        function getCollects(data) {
            collects.value = data
        }
        //历史版本
        const forwardTreeData = reactive({ data: {} });
        const historycopyRow = ref({})
        function changeMsgClose(val, item) {
            if (val) {
                historycopyRow.value = item
                editOnline.value = false
                cliCC.value = false
                historyPrew.value = true
            }
            openForwardFile.value = val
        }

        //对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']
            let arr = []
            if (!(typeArr.includes(copyFileType.value) || array.includes(copyFileType.value))) {
                arr = mouseCli.value.filter(item => item.name !== "预览")
            } else {
                arr = toRaw(mouseCli.value)
            }
            if (!array.includes(copyFileType.value)) {
                arr = arr.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
            }
            if (!imgTypeArr.includes(copyFileType.value)) {
                arr = arr.filter(item => item.name !== "文字识别")
            }
            return arr
        }
        function mouseClick() {
            if (cliCC.value) {
                cliCC.value = false
            }
            if (anyP) {
                anyP.value = false
            }
        }
        // 文件夹右键事件
        const folderRClick = (row, col, e) => {
            e.preventDefault();
            e.stopPropagation();
            let thisRow = toRaw(row)
            thisFolder.value = thisRow;
            //  唤出右键菜单，思路：获取鼠标位置来定位菜单
            folderVisible.value = true;
            foldertop.value = e.pageY;
            folderleft.value = e.pageX;
        };
        // 关闭文件夹右键菜单
        const closeRMenu = () => {
            // console.log("close");
            folderVisible.value = false;
        };
        // 归档
        function goLock() {
            fileCount.lockActor(clickRowId.value).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "归档成功"
                    })
                    cliCC.value = false
                    anyP.value = false
                }
            })
        }
        onMounted(() => {
            getAllTop()
            // 添加监听，点击其他地方关闭文件夹右键菜单
            window.addEventListener("click", closeRMenu, true);
        })
        return {
            folderList,//文件夹的数据
            fileList,//文件夹的数据
            searchFire,//搜索文件的model
            changeFile,//切换右侧视图的file
            menuList,//右侧切换
            tableChange,//改变class点击事件
            selectedIndex,//当前选中下标
            shotdown,//筛选出当前数据
            useMenu,
            arrorMenu,
            blueLeft,//返回
            grayRight,//前进
            squre,//视图切换
            sort,//排序
            folder,
            files,
            handleRowClick,
            askApply,//申请扩容
            askTo,
            sureAsk,
            askNum,
            askTalk,
            cliCC,
            mouseCli,//文件点击弹框
            chooseSet,
            trandata,
            tranvalue,
            anyP,
            chooseSet1,
            fileMenu,
            createNewMenu,
            // delBoser,
            clickRowId,
            createNewFile,
            // fileUpload,
            getImage,//筛选文件类型
            handleSelectionChange,
            handleSelectionChange1,
            selectedBox,//重命名相关
            restName,//重命名相关
            newName,//重命名相关
            getMenu,
            folderId,
            fileId,
            // getAllMiddle,//拿到所有空间信息
            delName,//删除空间信息
            useSpace,//使用空间
            allSpace,//总空间
            percent,
            arrowClick,
            uploadModal,
            sureUpload,
            onSuccess,
            fileArr,
            directoryId,
            folderClick,
            copyDirId,//复制移动需要的↓
            copyDocId,
            copySpaceId,
            copyFileId,
            copyFileName,
            copyFileSize,
            copyFileType,
            sureChangeName,//文件重命名
            fileNameChange,//文件重命名模态框
            nameForm,
            collectImg,//收藏小星星
            sortNum,
            needBag,
            isId,
            editOnline,//在线编辑
            copyParentId,
            folderName,
            sureFolderName,
            copyRow,
            getAllTop,
            newDirId,
            newSpaceId,
            showPreview,//控制图片预览
            closeImgPreview,//关闭预览事件
            previewData,//预览文件数据
            router,
            fileTrees,
            getChildren,//子传父
            copyOrMove,
            impDirId,
            impNum,
            impSpaceId,
            //历史版本=========
            openForwardFile,
            forwardTreeData,
            fileUserTreeData,
            filterMouseCli,
            changeMsgClose,
            historyPrew,
            historycopyRow,
            thanks,
            getCback,
            mouseClick,
            folderVisible,
            foldertop,
            folderleft,
            thisFolder,
            folderRClick,
            closeRMenu,
            cancleHistoryPrew,
            historyTotal,
            //历史版本=========
            fileUserTreeData,
            thanks,
            getCback,
            mouseClick,
            workOrEdit,
            folderCase,//新建文件夹传值
            getChildrenC,
            oneOrTwo,//父传子判断
            folderCheckout,
            fileCheckout,
            haveCheck,
            onlyView,
            goLock,
            collects,//收藏父传子
            getCollects,//收藏子传父
            folderTotal,
            fileTotal,
        }
    },
    watch: {
    },
    components: {
        BreadMenu,
        FileEdit,
        ImgPreview,
        FileTree,
        historyList,
        TransferModal,
        CreateFloder,
        FileCollect,
    },
}

</script>

<style lang="scss" scoped>
p {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    overflow: hidden;
}

.settingBox {
    width: 25vw;
    height: 92vh;
    border: 1px solid black;
    border-radius: 4px;
    /* margin: 5px 5px; */
    margin-right: 5px;
    background-color: white;
}

.topSearch {
    width: 100%;
    height: 48px;
    background-color: #EBEFF6;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.searchFire {
    width: 248px;
    height: 32px;
}

.setBox {
    width: 88px;
    height: 112px;
    text-align: center;
    margin-left: 5px;
    margin-top: 5px;
    position: relative;
}

.setBox:hover {
    background-color: #EEF9FF;
}

.setBox:hover .selectChe {
    background-color: #EEF9FF;
    display: block;
}

.selectChe {
    display: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px 4px 4px 4px;
    position: absolute;
    top: 2px;
    right: 2px;
    line-height: 10px;
}

.mesBox {
    width: 75vw;
    height: 92vh;
    border-radius: 4px;
    background-color: white;
}

.useBox {
    width: 100%;
    height: 96px;
}

.tables {
    display: inline-block;
    width: 112px;
    height: 22px;
    border-radius: 4px;
    line-height: 21px;
    text-align: center;
    font-size: 12px;
    margin-left: 5px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tableLis {
    display: inline-block;
    width: 112px;
    height: 22px;
    border-radius: 4px;
    background-color: #EBEFF6;
    line-height: 21px;
    text-align: center;
    font-size: 12px;
    margin-left: 5px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: auto;
}

.manyUse {
    width: 100%;
    height: 48px;
    /* background-color: gray; */
    line-height: 48px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.el-dropdown-link {
    color: white;
}

.breadBox {
    width: 100%;
    height: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #D9E0F0;
}

:deep(.el-collapse-item__header) {
    height: 24px !important;
    background-color: #EBEFF6 !important;
}

.detailBox {
    width: 100%;
    height: 270px;
}

:deep(.el-dialog__header) {
    background-color: #ECEFF7;
    margin-right: 0px;
}

.fileTable {
    position: relative;
    height: 100%;
    /* overflow-y: auto; */
}

.setCli {
    width: 156px;
    max-height: 380px;
    position: absolute;
    top: -70px;
    left: 300px;
    flex-wrap: 400;
    background-color: white;
    border: 1px solid gray;
    border-radius: 4px;
    z-index: 10;
    overflow-y: auto;
    // font-size: 16px;
}

.setCli1 {
    width: 156px;
    height: auto;
    position: absolute;
    top: 185px;
    left: 455px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 4px;
    z-index: 2;
    overflow-y: auto;
}

.chooseSet {
    width: 140px;
    height: 30px;
    line-height: 30px;
    margin: 5px auto;
    font-size: 13px;

    // display: flex;
    // align-items: center;
    // position: relative;
    img {
        margin-right: 4px;
        vertical-align: middle;
    }
}

.chooseSet:hover {
    width: 140px;
    height: 30px;
    line-height: 30px;
    margin: 5px auto;
    font-size: 13px;
    background-color: #F5F7F9;
    /* color: white; */
}

:deep([data-v-69cdaa40] .el-collapse-item__header) {
    padding-left: 10px;
}

:deep(.el-collapse-item__content) {
    // height: 235px;
    overflow-y: auto;
}

.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: auto;
}

.right_menu {
    width: 100px;
    position: absolute;
    padding: 8px;
    box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #c1cce3;
    background-color: #fff;
    z-index: 10000;

    .menu_item {
        width: 100%;
        height: 40px;
        border-radius: 4px 4px 4px 4px;
        display: flex;
        align-items: center;

        &:hover {
            background-color: #f5f7f9;
        }

        span {
            margin-left: 4px;
        }
    }
}

.isCheck {
    opacity: 1 !important;
}

:deep(.el-tag__content) {
    display: block;
}

:deep(.el-icon el-tag__close) {
    display: block;
}

:deep(.el-collapse-item__content) {
    height: 100%;
    border-bottom: none;
}

:deep(.el-collapse-item__wrap) {
    height: 300px;
}</style>