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

<template>
    <div>
        <div class="bigBox">
            <div class="settingBox" @click="mouseClick">
                <!-- 设置盒子顶部搜索 -->
                <div class="topSearch">
                    <div style="position: relative;width: 80%;">
                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件"/>
                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
                            <Search/>
                        </el-icon>
                    </div>
                    <div>
                        <el-icon @click="createNewMenu(1,true)" color="#505870" size="24">
                            <Plus />
                        </el-icon>
                        <!-- @click="createNewFile" -->
                    </div>
                </div>
                <!-- 方块点击盒子 -->
                <div
                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 75vh;align-content: flex-start;overflow-y: auto;">
                    <!-- v-for盒子 -->
                    <template v-for="(item, index) in fileMenu" :key="index">
                        <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 v-if="item.dirType == '1'" @click="delName(item, index)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                          <div class="left_fileBox">
                            <el-tooltip
                                  class="box-item tool-tip"
                                  effect="dark"
                                  placement="top-start"
                                  v-if="item.encryptLevel"
                               > 
                               <template #content> 安全级别: {{ item.encryptLevel == 'L1'?'敏感':(item.encryptLevel == 'L2'?'涉密':(item.encryptLevel == 'L3'?'机密':'绝密')) }} </template>
                               <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;"></el-tooltip>
                               <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;" v-else>
                              <p class="ellipsis-text shouzhi">{{ item.dirName }}</p>
                              <img class="levelImg" v-if="item.isEncrypt === 'Y'" :src="getLevelImg(item.encryptLevel)" alt="">
                          </div>
                        </div>
                    </template>
                </div>
                <!-- <div class="expansion">
                    <div class="top_box">
                        <span style="margin-left: 5px;font-size: 14px;font-weight: 500;">{{ formatStorage(useSpace) }}/{{ allSpace + "G" }}</span>
                        <span style="margin-left: 5px;font-size: 14px;color: #2E6BC8;cursor: pointer;"
                            @click="askApply">申请扩容</span>
                    </div>
                    <el-progress style="margin-left: 8px;" :stroke-width="12" color='#2E6BC8' :percentage="percent()" />
                </div> -->
            </div>
            <!-- 右侧大盒子 -->
            <div class="mesBox">
                <!-- 展示文件夹盒子 -->
                <!-- 文件夹 -->
                <div v-if="editOnline">
                    <!-- 众多功能 -->
                    <div class="manyUse">
                        <div v-if="thisRole.some(item=>item == 'upload') || thisFolder.dirType == '1'"
                            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" class="shouzhi">上传
                                </span>
                            </div>
                        </div>
                        <div v-else
                            style="display: flex;width: 92px;opacity:0.5;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;" class="shouzhi">上传
                                </span>
                            </div>
                        </div>
                        <div v-if="thisFolder.dirType"
                            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;" class="shouzhi">新建</span>
                            </div>
                        </div>
                        <div v-else
                            style="display: flex;opacity:0.5;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;"
                                    >
                                    <Plus />
                                </el-icon>
                            </div>
                            <div style="margin-left: 5px;">
                                <span style="font-size: 14px;" class="shouzhi">新建</span>
                            </div>
                        </div>
                        <template v-for="(item, index) in useMenu" :key="index">
                            <div :class="{ 'isCheck': haveCheck }"
                                style="display: flex;width: 82px;opacity:0.5;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;cursor: pointer;"
                                @click="getMenu(item, index)">
                                <div style="margin-left: 5px;">
                                    <img :src="item.img" style="width: 24px;height: 24px;" alt="">
                                </div>
                                <div style="margin-left: 5px;">
                                    <span style="font-size: 14px;" class="shouzhi">{{ item.name }}</span>
                                </div>
                            </div>
                        </template>
                    </div>
                    <!-- 面包屑功能栏 -->
                    <div class="breadBox">
                        <!-- 左侧 -->
                        <div style="display: flex;justify-content: space-around;align-items: center;margin-left: 5px;">
                            <!-- 前进后退 -->
                            <!-- <div style="display: flex;justify-content: space-around;align-items: center;">
                                <img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt=""
                                    @click="arrowLift">
                                <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
                            </div> -->
                            <!-- 面包屑 -->
                            <div class="topPath">
                                {{ topPath }}
                                <!-- <BreadMenu></BreadMenu> -->
                            </div>
                        </div>
                        <!-- 右侧 -->
                        <div>
                            <img :src="sort" alt="">
                            <img :src="squre" alt="" @click="gridChange">
                        </div>
                    </div>
                <!-- </div> -->
                <!-- 展示文件夹盒子 -->
            <div class="showBox">
                <!-- 文件夹 -->
                <div class="detailBox file-jia" @click="mouseClick">
                    <el-collapse v-model="folder">
                        <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
                            <el-table v-if="folderGrid" height="37vh" :data="folderList" style="width: 100%" :scrollbar-always-on="true"
                                @selection-change="handleSelectionChange1" :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">
                                        <span class="juzhong">
                                            <el-icon v-if="scope.row.isFavorite == 'N'" @click.stop="collectByStar(scope.row,true)" class="juli">
                                                <Star />
                                            </el-icon>
                                            <img v-else @click.stop="delCollect(scope.row,true)" src="../../assets/images/yellowstar.png" alt="" class="juli">
                                            <img src="../../assets/images/fileBox.png" style="width: 20px;height: 24px;"
                                                alt="" class="juli">
                                                 <el-tooltip
                                                    class="box-item"
                                                    effect="dark"
                                                    placement="top"
                                                    :show-after="1000"
                                                    v-if="scope.row.encryptLevel"
                                                >
                                                <template #content> {{ scope.row.encryptLevel == 'L1'?'敏感':(scope.row.encryptLevel == 'L2'?'涉密':(scope.row.encryptLevel == 'L3'?'机密':'绝密')) }} </template>
                                                  <span class="shouzhi"> {{ scope.row.dirName }}</span>
                                                </el-tooltip>
                                                <span class="shouzhi" v-else>{{ scope.row.fileName }}</span>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTime" label="时间" width="180" />
                                <el-table-column prop="dirType" label="类型">
                                    <template #default="scope">
                                        <span>文件夹</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="大小">
                                    <template #default="scope">
                                        <span>
                                            10KB
                                        </span>
                                    </template>
                                </el-table-column>

                                </el-table>
                                <PlaceGridFolder v-else :folderClick="folderClick" :restName="restName"
                                    :collectFolder="collectFolder" :getAllTop="getAllTop" @folderBack="folderBack">
                                </PlaceGridFolder>
                            </el-collapse-item>
                        </el-collapse>
                        <!-- 右键唤出的菜单 -->
                        <div class="right_menu" v-if="folderVisible"
                            :style="{ left: folderleft + 'px', top: foldertop + 'px' }">
                            <!-- <div class="menu_item" @click="folderClick(null, null)">
                                <img src="@/assets/images/trash.png" alt="" />
                                <span>打开</span>
                            </div> -->
                            <div class="menu_item" @click="restName(null, null)">
                                <img src="@/assets/images/textbox.png" alt="" />
                                <span class="shouzhi">重命名</span>
                            </div>
                            <div class="menu_item" @click="collectFolder">
                                <img src="@/assets/images/collect.png" alt="" />
                                <span  class="shouzhi">收藏</span>
                            </div>
                        </div>
                    </div>
                    <!-- 文件 -->
                    <div class="fileTable">
                        <el-collapse v-model="files" >
                            <el-collapse-item title="文件" name="2" class="">
                                <el-table v-el-table-infinite-scroll="setScroll" :infinite-scroll-distance="10" :infinite-scroll-disabled="tableBeEnd" v-if="fileGrid" :data="fileList" height="38vh" :scrollbar-always-on="true" 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;" class="juzhong">
                                            <el-icon v-if="scope.row.isFavorite == 'N'" @click.stop="collectByStar(scope.row,false)" class="juli">
                                                <Star />
                                            </el-icon>
                                            <img v-else @click.stop="delCollect(scope.row,false)" src="../../assets/images/yellowstar.png" alt="" class="juli">
                                            <img :src="getImage(scope.row.fileType)" alt="" class="juli">
                                                  <el-tooltip
                                                        class="box-item"
                                                        effect="dark"
                                                        placement="top"
                                                        :show-after="1000"
                                                        :content="scope.row.fileName"
                                                    >
                                                    <!-- <template #content> {{ scope.row.encryptLevel == 'L1'?'敏感':(scope.row.encryptLevel == 'L2'?'涉密':(scope.row.encryptLevel == 'L3'?'机密':'绝密')) }} </template> -->
                                                    <span class="shouzhi">{{ scope.row.fileName }}</span>
                                                    </el-tooltip>
                                        </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>
                                                {{ formatFileSize(scope.row.fileSize) }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <PalaceGridFile v-else @showFile="showFile" :getAllTop="getAllTop" @navBack="navBack"
                                    @lastBB="lastBB" @onlineCase="onlineCase" @shareBack="shareBack"></PalaceGridFile>
                            </el-collapse-item>
                        </el-collapse>
                        <div :class="{'setCli':!noMenuItem}" v-if="cliCC" :style="{ left: xz + 'px', top: yz -100 + 'px' }">
                            <template v-for="(item, index) in filterMouseCli()" :key="index">
                                <p @click="chooseSet(item, index, 1)" v-if="!noMenuItem" 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" :style="{ left: xz + 155 + 'px', top: yz + 'px' }">
                            <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>
                <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>

            <!-- 扩容弹窗 -->
            <div>
                <SpaceBig v-if="spaces" :spaces="spaces" :impSpaceId="impSpaceId" @getSpaceC="getSpaceC"></SpaceBig>
            </div>
            <!-- 新增文件夹弹窗 -->
            <div>
                <CreateFloder v-if="folderCase" :thisType="thisFolder" :thisRole="thisRole" :folderCase="folderCase" @getChildrenC="getChildrenC" :oneOrTwo="oneOrTwo"
                    :impDirId="impDirId" :impSpaceId="impSpaceId" :newDirId="newDirId" :newSpaceId="newSpaceId" :thisFolderRole="thisFolderRole"
                    :refreshFile="refreshFile">
                </CreateFloder>
            </div>
            <!-- 文件上传 -->
            <div>
                <el-dialog v-model="uploadModal" title="文件上传" width="30%">
                    <el-upload class="upload-demo" :file-list="fileArr"  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" @refreshFile="refreshFile" :isFolder="isFolder" :clickRow="clickRow"></FileCollect>
            </div>
            <!-- 中栏重命名 -->
            <div>
                <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>
            <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 v-if="openForwardFile"  :openFile="openForwardFile" :docId="clickRowId" :name="nameForm.name" :copyRow="copyRow"
        @close="openForwardFile = false" :fileUserTreeData="fileUserTreeData.data" @changeMsgClose="changeMsgClose"
        :historyTotal="historyTotal">
    </historyList>
    <!-- 历史版本 -->
    <!-- 二次密码验证 -->
    <inputPassword v-if="showInputPassword" @surePass="surePass" @closeIptPass="closeIptPass" :showInputPassword="showInputPassword"></inputPassword>
    <div v-loading.fullscreen="loadingPreview" v-if="loadingPreview" class="lodingBox"></div>
</template>

<script>
import { ref, toRaw, onMounted ,onActivated} from 'vue'
import myfile from '../../api/myfile/myfile'
import { delFavorite } from '@/api/biz/favorite.js'
import documents from '../../api/document/document'
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 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'
import grayRight from "../../assets/images/grayRight.png"
import sort from '../../assets/images/sort.png'
import squre from '../../assets/images/squre.png'
import level1 from "@/assets/images/level1.png";
import level2 from "@/assets/images/level2.png";
import level3 from "@/assets/images/level3.png";
import level4 from "@/assets/images/level4.png";
import { ElMessage ,ElLoading } 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 inputPassword from "./components/inputPassword.vue"; //选择文件发送的列表，历史版本
import { listVersion } from "@/api/biz/version";
import useUserStore from "@/store/modules/user";
import { useRouter, useRoute,onBeforeRouteUpdate } from "vue-router";
import { canPreviewFile,rightMenuRole,publicRightMenuRole } from "@/utils/index.js"
import fileSpace from '../../api/filespace/fileSpace';
import { getLeveldetail } from '../../api/level/level';
import { encrypt, decrypt } from "@/utils/jsencrypt";
import Cookies from "js-cookie";
import elTableInfiniteScroll from 'el-table-infinite-scroll'

export default {
    directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
    },
    setup() {
        const { proxy } = getCurrentInstance();
        let fileTrees = ref(false)//filetree父传子
        let thanks = ref(false)//transfer父传子
        let collects = ref(false)//文件收藏父传子
        let rename = ref(false)//文件夹重命名
        let spaces = ref(false)//空间扩容父传子
        let folderCase = ref(false)
        let fileGrid = ref(true)
        let folderGrid = ref(true)
        let editOnline = ref(true)
        let searchFire = ref('')
        let selectedIndex = ref(0)
        let folder = ref(['1'])
        let files = ref(['2'])
        let folderList = ref([])
        let cliCC = ref(false)
        let anyP = ref(false)
        let uploadModal = ref(false)
        let collectImg = ref(true)
        let selectedBox = ref(-1)
        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 copyFolderName = ref("")
        let copySpaceCup = ref(0)
        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 delMoreFile = ref([])  //删除多个文件夹
        const historyTotal = ref(0)
        const historyPrew = ref(false)
        let xz = ref(0)
        let yz = ref(0)
        const router = useRouter(); //注册路由
        const route = useRoute(); //注册路由
        const fileUserTreeData = reactive({ data: {} });
        let fileList = ref()
        let menuList = ref([
            {
                name: "我的空间",
                choose: "我的空间"
            }
        ])
        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 ordinaryFolder = ref([ {
            img: ImgFile.previewIcon,
            name: "预览"
        },
        {
            img: ImgFile.collect,
            name: "收藏"
        },
        {
            img: ImgFile.downLoad,
            name: "下载"
        },
        {
            img: ImgFile.textbox,
            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 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) //预览
        const topPath = ref()//顶部路径
        const isFolder = ref('N') //是否为文件夹
        const clickRow = ref()//当前右键的行数据
        const backFolder = ref()//上一级的文件夹
        const thisFolderRole = ref({})//文件夹安全等级
        const thisRole = ref([])//文件夹权限
        const showInputPassword = ref(false)
        const chooseRow = ref()
        const chooseNum = ref()
        const loadingPreview = ref(false)
        const noMenuItem = ref(false)
        const addTab = inject("addTab");
        const addFileTab = inject("addFileTab");
        const addFolderAdd = inject("addFolderAdd");
        const filePageNum = ref(1) //获取文件分页
        const tableBeEnd = ref(true)//控制下拉是否到底
        const tableTotal = ref(0)//表格数据总数
        // 获取文件夹，中栏，文件
        function getAllTop() {
            documents.getTop(1).then(res => {
                console.log('getAllTopres',res);
                if(!res){
                    console.log('nores');
                    return
                }
                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',fileList.value);
                    }
                    // console.log('not200');
                })
            })
        }
        function getSpaceList() {
            myfile.fileType(3).then(res => {
                useSpace.value = res.data.usedCap
                allSpace.value = res.data.spaceCap
            })
        }
        function changeFile(row, num) {
             const addData = {
                path:'/publicment'+row.dirId,
                name:row.dirName,
                clickRowId:toRaw(row)
            }
            addFolderAdd(addData)
            thisFolder.value = row
            // console.log('row2',row);
             topPath.value = row.dirPath
            if(row.isEncrypt === "Y"){
                getLeveldetailFn(row.encryptLevel)
            }else{
                thisFolderRole.value = {}
            }
            thisRole.value = row.dirRole?row.dirRole.split(','):[]
            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(row.dirId - 0)
                        .then(res => {
                            if (res.code === 200) {
                                fileList.value = res.rows;
                            }
                        })
                        .catch(error => {
                            console.error("myfile.getAllFileMenu 调用失败:", error);
                        });
                }
                // }
            })
            selectedIndex.value = num
            const newItem = {
                name: row.dirName,
                choose: row.dirName,
                dirIds: row.dirId,
                spaceIds: row.spaceId
            };
            // 检查 newItem 是否已存在于 menuList 中
            const isItemExist = menuList.value.some(item => item.choose === newItem.choose);
            // 如果不存在，则添加它
            if (!isItemExist) {
                menuList.value.push(newItem);
            }
        }

        // x图标事件
        function shotdown(row) {
            menuList.value = menuList.value.filter(item => item.name !== row.name)
            selectedIndex.value = -1
            if (!editOnline.value) {
                editOnline.value = true
            }
        }
        // 文件名表格每一行点击事件
        function handleRowClick(row, col, e) {
            console.log('row',row);
            isFolder.value = "N"
            clickRow.value = row
            e.preventDefault();
            e.stopPropagation();
            xz.value = e.pageX
            yz.value = e.pageY
            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
            }
        }
        // 申请扩容
       async function askApply() {
            const res =  await fileSpace.querySpace(impSpaceId.value)
            console.log('res',res);
            if(res.data){
                ElMessage({ message: '已存在扩容申请', type: 'error' })
                return
            }
            spaces.value = true
        }
        //mouse弹框
        async function chooseSet(row, index, num) {
            // 权限控制
            if(thisFolderRole.value && thisFolderRole.value.roles){
                if(thisFolderRole.value.roles.l0600){
                    const passArr = localStorage.getItem('passArr');
                    const passArrObj = JSON.parse(passArr)
                    if((!passArrObj) || !passArrObj.some(item=>item === clickRow.value.docId)){
                        chooseRow.value = row
                        chooseNum.value = num
                        showInputPassword.value = true
                        return
                    }
                    // console.log('needc');
                }
            }
            // console.log('chooseSetrow',row);
            // console.log('chooseSetnum',num);
            if (row.name == '在线编辑' || row.name == '协作') {
                cliCC.value = true
            }
            if (row.name == '分享') {
                workOrEdit.value = num
                thanks.value = true
            } else {
                thanks.value = false
            }
            if (row.name == '协作') {
                workOrEdit.value = num
                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: "删除成功"
                        })
                        refreshFile()
                    }
                })
            }
            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}`;
            downLoadfile()
            }
            if (row.name === '收藏') {
                collects.value = true
            }
            if (row.name === '在线编辑') {
                loadingPreview.value = true
                // const filePreview = canPreviewFile(copyFileType.value)
                // if (filePreview) {
                     loadingPreview.value = false
                    addFileTab(clickRow.value,1);
                    onlyView.value = false
                    // editOnline.value = false
                    cliCC.value = false
                // } else {
                //     const res = await preview(copyRow.value.docId)
                //     showPreview.value = true
                //     previewData.value = URL.createObjectURL(res)
                // }
                loadingPreview.value = false
            }
            if (row.name === '文字识别') {
                router.push({
                    path: '/identifyFont',
                    query: {
                        docId: copyRow.value.docId,
                        fileId: copyFileId.value,
                        fileType: copyFileType.value
                    }
                })
            }
            if (row.name === '预览') {
                loadingPreview.value = true
                const filePreview = canPreviewFile(copyFileType.value)
                if (filePreview) {
                   loadingPreview.value = false
                    addFileTab(clickRow.value,0);
                    onlyView.value = true
                    cliCC.value = false
                } else {
                    const res = await preview(copyRow.value.docId)
                    showPreview.value = true
                    previewData.value = URL.createObjectURL(res)
                }
                loadingPreview.value = false
                console.log('filePreview', filePreview);

                // // console.log('res',res);
                // const res = await preview(copyFileId.value)
                // showPreview.value = true
                // previewData.value = URL.createObjectURL(res)
            } else if (row.name === "历史版本") {
                const resHistory = await listVersion({ docId: clickRowId.value })
                // console.log('resHistory',resHistory);
                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"
                            })
                             refreshFile()
                            uploadModal.value = false
                            fileArr.value = []
                        }
                    }).catch(err=>{
                        // console.log('UPerr',err);
                    })
                }
            }
        }
        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) {
            delMoreFile.value = val   //删除多项的数据
            // if (val.length > 1) {
            //     // 如果选择了多项，只保留最后一项
            //     val.shift();
            // }
            if (val.length === 1) {
                fileId.value = val[0].docId
            }
            if (val.length) {
                folderCheckout.value = true
                haveCheck.value = true
            } else {
                folderCheckout.value = false
                if (!fileCheckout.value) {
                    haveCheck.value = false
                }
            }
        }
        // 文件夹

        function handleSelectionChange1(val) {
            delMoreFile.value = val   //删除多项的数据
            if (val.length > 1) {
                // 如果选择了多项，只保留最后一项
                val.shift();
                proxy.$refs.taskTableRef.toggleRowSelection(val.shift(), false);//单选操作
            }
            if (val.length === 1) {
                folderId.value = val[0].dirId
            }
            if (val.length) {
                fileCheckout.value = true
                haveCheck.value = true
            } else {
                fileCheckout.value = false
                if (!folderCheckout.value) {
                    haveCheck.value = false
                }
            }
        }
        // 重命名
        function restName(row, index) {
            // 判断是点击打开还是右键菜单打开
            row = row ? row : clickRow.value
            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 {//文件夹
                        datas.push(i.docId)
                    }
                })
                // 文件夹删除
                if (isFile.value) {//文件
                    documents.delDocument(folderId.value).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "删除成功",
                                type: "success"
                            })
                            refreshFile()
                        } else {
                            ElMessage({
                                message: "删除失败，目录应不为空",
                                type: "error"
                            })
                        }
                        isFile.value = false
                    })
                } else {
                    myfile.delMenu(datas.toString()).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "删除成功",
                                type: "success"
                            })
                             refreshFile()
                        }
                    })
                }
            }
        }
        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 && allSpace.value) {
                numP = (useSpace.value / allSpace.value) * 100;
            }
            return numP.toFixed(2) - 0; // 将结果保留两位小数
        }

        // 文件夹每行点击事件
        function folderClick(row, list) {
            // 初始化分页数据
            tableBeEnd.value = true
            filePageNum.value = 1
            tableTotal.value = 0
            // 上一级dirId就是下一级的parentId
            // 判断是点击打开还是右键菜单打开
            if(row){
                backFolder.value = thisFolder.value
                thisFolder.value = row;
            }else{
                row =thisFolder.value
            }
            if(row.isEncrypt === "Y"){
                getLeveldetailFn(row.encryptLevel)
            }else{
                thisFolderRole.value = {}
            }
            thisRole.value = row.dirRole?row.dirRole.split(','):[]
            console.log('row1', toRaw(row));
            topPath.value = row.dirPath
            // console.log('topPath',toRaw(topPath.value));
            newDirId.value = row.dirId
            newSpaceId.value = row.spaceId
            const query = `${newDirId.value}?pageSize=10&pageNum=${filePageNum.value}`
            documents.getALLdocument({
                parentId: newDirId.value - 0,
                spaceId: newSpaceId.value - 0
            }).then(res => {
                folderList.value = res.data
                if (res.data.length === 0) {
                     myfile.getById(query).then(res => {
                        if (res.code === 200) {
                            tableTotal.value =res.total
                            if(res.rows.length<res.total){
                                //第一次拿到的数据少于总数开启下拉事件
                                tableBeEnd.value = false
                            }
                            fileList.value = res.rows
                        }
                    })
                } else {
                   myfile.getById(query).then(res => {
                        console.log('folerFile',res);
                        if (res.code === 200) {
                            tableTotal.value =res.total
                            if(res.rows.length<res.total){
                                //第一次拿到的数据少于总数开启下拉事件
                                tableBeEnd.value = false
                            }
                            fileList.value = JSON.parse(JSON.stringify(res.rows))
                            // console.log('fileList',toRaw(fileList.value));
                        }
                    })
                }
            })
        }
        // 确认文件重命名
        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()
            }
        }
        //关闭图片预览事件
        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
        }
        function getRename(data) {
            rename.value = data
        }
        function getSpaceC(data) {
            spaces.value = data
        }
        function navBack(data, name) {
            nameForm.value.name = name
            fileNameChange.value = data
        }
        function onlineCase(data, uid, row) {
            editOnline.value = data
            clickRowId.value = uid
            copyRow = row
        }
        function shareBack(data, num) {
            thanks.value = data
            workOrEdit.value = num
        }
        function showFile(data, e, a) {
            editOnline.value = data
            clickRowId.value = e
            copyRow = a
        }
        function folderBack(dir, spa, nam) {
            selectedBox.value = dir
            copyFolderName.value = nam
            copyFileName.value = spa
        }
        //历史版本
        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
        }
        function lastBB(data, row, num) {
            openForwardFile.value = data
            historyTotal.value = row
            fileUserTreeData.data = num
        }
        //对mouseCli数组进行筛选，实现菜单的区分显示
        const filterMouseCli = () => {
            const canPreviewArray = ['.doc','.wps', '.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','.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.rtf', '.txt', '.djvu', '.xps', '.wps','.pptx']
            let arr = []
            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)) {
                arr = arr.filter(item => item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
            }
            if (!imgTypeArr.includes(copyFileType.value)) {
                arr = arr.filter(item => item.name !== "文字识别")
            }
            // console.log('arr',arr);
            if(thisFolderRole.value.roles){
                console.log('thisFolderRole',thisFolderRole.value);
                arr = rightMenuRole(toRaw(thisFolderRole.value),arr)
            }
            if(thisRole.value.length){
                arr = publicRightMenuRole(toRaw(thisRole.value),arr)
            }
            if(thisFolder.value.dirType == '1'){
                arr = ordinaryFolder.value
            }
            if(arr.length<1){
                noMenuItem.value = true
            }else{
               noMenuItem.value = false 
            }
            console.log('filterArr',arr);
            return arr
        }
        function mouseClick() {
            if (cliCC.value) {
                cliCC.value = false
            }
            if (anyP) {
                anyP.value = false
            }
        }
        // 文件夹右键事件
        const folderRClick = (row, col, e) => {
            e.preventDefault();
            e.stopPropagation();
            // thisFolder.value = ''   //先清空
            let thisRow = toRaw(row)
            // console.log('thisFolder',thisFolder.value);
            clickRow.value = thisRow
            copyFolderName.value = row.dirName
            //  唤出右键菜单，思路：获取鼠标位置来定位菜单
            folderVisible.value = true;
            foldertop.value = e.pageY;
            folderleft.value = e.pageX;
        };
        // 关闭文件夹右键菜单
        const closeRMenu = () => {
            // console.log("close");
            folderVisible.value = false;
        };
        // 文件夹收藏事件
        const collectFolder = () => {
            isFolder.value = 'Y'
            // clickRow.value = thisFolder.value
            // thisFolder.value = ''
            copyFileName.value = clickRow.value.dirName
            collects.value = true
        }
        // 左箭头事件
        const arrowLift =async () => {
            // router.go(-1)
            // console.log(1);
            topPath.value = backFolder.value.dirPath
            // console.log('topPath',toRaw(topPath.value));
            newDirId.value = backFolder.value.parentId
            newSpaceId.value = backFolder.value.spaceId
            documents.getALLdocument({
                parentId: newDirId.value - 0,
                spaceId: newSpaceId.value - 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(newDirId.value).then(res => {
                        if (res.code === 200) {
                            fileList.value = JSON.parse(JSON.stringify(res.rows))
                            // console.log('fileList',toRaw(fileList.value));
                        }
                    })
                }
            })
            
        }
        // 归档
        function goLock() {
            fileCount.lockActor(clickRowId.value).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "归档成功"
                    })
                    cliCC.value = false
                    anyP.value = false
                }
            })
        }
        function formatFileSize(fileSize) {
            if (fileSize >= 1024 * 1024 * 1024) {
                // 大于等于1GB，显示GB
                return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
            } else if (fileSize >= 1024 * 1024) {
                // 大于等于1MB，显示MB
                return (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
            } else if (fileSize >= 1024) {
                // 大于等于1KB，显示KB
                return (fileSize / 1024).toFixed(2) + 'KB';
            } else {
                // 小于1KB，显示字节
                return fileSize + 'B';
            }
        }
        function formatStorage(sizeInGB) {
            if (sizeInGB >= 1) {
                return sizeInGB.toFixed(2) + 'GB';
            } else {
                const sizeInMB = sizeInGB * 1024;
                if (sizeInMB >= 1) {
                    return sizeInMB.toFixed(2) + 'MB';
                } else {
                    const sizeInKB = sizeInMB * 1024;
                    return sizeInKB.toFixed(2) + 'KB';
                }
            }
        }
        function gridChange() {
            if (fileGrid.value) {
                fileGrid.value = false
            } else {
                fileGrid.value = true
            }
            if (folderGrid.value) {
                folderGrid.value = false
            } else {
                folderGrid.value = true
            }
        }
        //点击收藏后刷新文件
        const refreshFile = ()=>{
            // console.log('ref',toRaw(thisFolder.value));
            if(toRaw(thisFolder.value).dirId){//如果点开了文件夹
            // console.log(111);
               folderClick()
            }else{
            // console.log(222);
                getAllTop()
            }
        }
        //star收藏事件
        const collectByStar = (row,isfolder)=>{
            console.log('row',row);
            if(isfolder){
                let thisRow = toRaw(row)
                isFolder.value = 'Y'
                clickRow.value = thisRow
                copyFolderName.value = row.dirName
                copyFileName.value = clickRow.value.dirName
            }else{
                isFolder.value = "N"
                clickRow.value = row
                copyRow.value = row
                clickRowId.value = row.docId
                copyDirId.value = row.dirId
                copyFileName.value = row.fileName
            }
            
            collects.value = true
        }
        // 取消文件收藏
        const delCollect = async (row,isfolder)=>{
            const thisRow = toRaw(row)
            console.log('thisRow',thisRow);
            let query = {}
            if(isfolder){
                query = {
                    isFolder:"Y",
                    relaId:thisRow.dirId
                }
            }else{
               query = {
                    isFolder:"N",
                    relaId:thisRow.docId
                } 
            }
            const res = await delFavorite(query)
            //TODO 之后需要重新获取数据 并message提示
            console.log('res',res);
            refreshFile()
        }
        //获取安全图标
        const getLevelImg = (level)=>{
             switch (level) {
                case "L1":
                return level1;
                break;
                case "L2":
                return level2;
                break;
                case "L3":
                return level3;
                break;
                case "L4":
                return level4;
                break;
                return level1;
                break;
            }
        }
        //获取权限详情
        const getLeveldetailFn =async (data)=>{
            const res = await getLeveldetail(data)
            // console.log('getLeveldetailFn',res);
            if(res.code === 200){
                thisFolderRole.value = res.data
            }
            // console.log('thisFolderRole',thisFolderRole.value);
        } 
        const closeIptPass = ()=>{
            showInputPassword.value = false
        }
        //输入验证密码后
        const surePass = (pass)=>{
            const passwordCookies = Cookies.get("pass");
            // const oldPass = decrypt(passwordCookies)
            // console.log('pass',pass);
            // console.log('oldPass',oldPass);
            // console.log('clickRow',clickRow);
            showInputPassword.value = false
            if(pass === passwordCookies){
                const passArr = localStorage.getItem('passArr');
                // console.log('passArr',passArr);
                if(!passArr){
                    const newArr = []
                    newArr.push(clickRow.value.docId)
                    localStorage.setItem('passArr',JSON.stringify(newArr))
                }else{
                    const passArrObj = JSON.parse(passArr)
                    passArrObj.push(clickRow.value.docId)
                    localStorage.setItem('passArr',JSON.stringify(passArrObj))
                }
                // 设置销毁
                 setTimeout(()=>{
                    const passArr = localStorage.getItem('passArr');
                    const passArrObj = JSON.parse(passArr)
                    console.log('```passArrObj',passArrObj);
                    const newArr = passArrObj.filter(item=>item != clickRow.value.docId)
                    console.log('```newArr',newArr);
                    localStorage.setItem('passArr',JSON.stringify(newArr))
                },1000*30)
                chooseSet(chooseRow.value,null,chooseNum.value) 
            }else{
                ElMessage({ message: "验证失败", type: "error" })
            }
        }
        // 文件下载
        const downLoadfile = ()=>{
            myfile.fileDown(clickRow.value.docId).then(res=>{
                 var reader = new FileReader();
                reader.onloadend = function(event){
                //event 就是你要的返回内容
                //因为返回的报错格式是字符串，手动转换成对象，转换成功表示请求失败
                //转换失败就意味着你拿到的result是文件流，那么直接手动下载就好
                try{
                    let data = JSON.parse(event.target.result)
                }catch(err){
                    const link = document.createElement('a');  // 创建a标签
                    let blob = new Blob([res]);     
                    link.style.display = 'none';
                    link.href = URL.createObjectURL(blob);   // 创建下载的链接
                    link.setAttribute('download',clickRow.value.fileName);  // 给下载后的文件命名
                    document.body.appendChild(link);
                    link.click();  // 点击下载
                    document.body.removeChild(link);  //  完成移除元素
                    window.URL.revokeObjectURL(link.href);  // 释放blob对象
                }
                };
                reader.readAsText(res);
            })
        }
        // 触底加载事件
        const setScroll =async ()=>{
            console.log('setScroll','到底喽');

            // console.log('tableBeEnd.value',tableBeEnd.value);
            filePageNum.value = filePageNum.value+1
            const query = `${thisFolder.value.dirId}?pageSize=10&pageNum=${filePageNum.value}`
            // -------------先禁止掉事件 定时器1秒钟后才能再次触发
            tableBeEnd.value = true
            
            // --------------------
            const res = await myfile.getById(query)
            // console.log('setScrollres',res);
            if (res.code === 200) {
                // const newarr = res.rows.concat(toRaw(fileList.value))
                const newarr = toRaw(fileList.value).concat(res.rows)
                console.log('newarr',newarr);
                fileList.value = JSON.parse(JSON.stringify(newarr))
                if(newarr.length < tableTotal.value){
                    //获取后的数量<total就可以再次获取
                    setTimeout(()=>{
                        tableBeEnd.value = false 
                    },1000)
                }
            }
            // console.log('query',query);
            // console.log('fileList',fileList.value);
        }
        onMounted(() => {
            getAllTop()
            getSpaceList()
            // 添加监听，点击其他地方关闭文件夹右键菜单
            window.addEventListener("click", closeRMenu, true);
            window.addEventListener("click", mouseClick, true);
        })
        // 组件显示
        onActivated(()=>{
            console.log('onActivated.query',route.query);
            loadingPreview.value = true
            setTimeout(()=>{
               if(route.query.clickRowId){
                    const newRow = JSON.parse(route.query.clickRowId)
                    // console.log('newRow',newRow);
                     myfile.getDir(newRow).then(res=>{
                        // console.log('tores',res);
                        thisFolder.value = res.data
                        refreshFile()
                    })
                }
                    loadingPreview.value = false
            },500)

        })
        onBeforeRouteUpdate((to,from)=>{
        console.log('to',to);
        console.log('from',from);
        if(to.name == 'publicment'){
            loadingPreview.value = true
            const thisdirId = to.params.dirId
            console.log('thisdirId',thisdirId);
            setTimeout(()=>{
                if(thisdirId){
                    myfile.getDir(thisdirId).then(res=>{
                        console.log('tores',res);
                        thisFolder.value = res.data
                        refreshFile()
                    })
                }
                loadingPreview.value = false
            },500)
        }
        // docId = to.query.clickRowId
        // console.log(docId, "doc");
        // console.log(copyRow, "row");
        // edit();
        })
        return {
            getSpaceList,
            folderList,//文件夹的数据
            fileList,//文件夹的数据
            searchFire,//搜索文件的model
            changeFile,//切换右侧视图的file
            menuList,//右侧切换
            selectedIndex,//当前选中下标
            shotdown,//筛选出当前数据
            useMenu,
            arrorMenu,
            blueLeft,//返回
            grayRight,//前进
            squre,//视图切换
            sort,//排序
            folder,
            files,
            handleRowClick,
            askApply,//申请扩容
            cliCC,
            mouseCli,//文件点击弹框
            chooseSet,
            trandata,
            tranvalue,
            anyP,
            chooseSet1,
            fileMenu,
            createNewMenu,
            // delBoser,
            clickRowId,
            createNewFile,
            // fileUpload,
            getImage,//筛选文件类型
            handleSelectionChange,
            handleSelectionChange1,
            selectedBox,//重命名相关
            restName,//重命名相关
            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,
            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,
            delMoreFile,//删除多个文件夹
            topPath,
            xz,//文件右键菜单left
            yz,//文件右键菜单top
            formatFileSize,
            isFolder,
            clickRow,
            rename,
            getRename,//文件夹重命名子传父
            copyFolderName,
            spaces,//空间扩容父传子
            getSpaceC,//空间扩容子传父
            copySpaceCup,
            fileGrid,
            folderGrid,
            gridChange,
            collectFolder,
            arrowLift,
            formatStorage,
            showFile,
            navBack,
            onlineCase,
            lastBB,
            shareBack,
            folderBack,
            refreshFile,
            delCollect,
            backFolder,
            collectByStar,
            getLevelImg,
            level1,
            level2,
            level3,
            level4,
            getLeveldetailFn,
            thisFolderRole,
            showInputPassword,
            closeIptPass,
            surePass,
            chooseRow,
            chooseNum,
            loadingPreview,
            thisRole,
            noMenuItem,
            downLoadfile,
            addFolderAdd,
            addFileTab,
            addTab,
            ordinaryFolder,
            filePageNum,
            setScroll,
            tableBeEnd,
            tableTotal
        }
    },
    watch: {
    },
    components: {
        BreadMenu,
        FileEdit,
        ImgPreview,
        FileTree,
        historyList,
        TransferModal,
        CreateFloder,
        FileCollect,
        FolderReName,
        SpaceBig,
        PlaceGridFolder,
        PalaceGridFile,
        inputPassword
    },
}

</script>

<style lang="scss" scoped>
@import "@/assets/styles/my-common.scss";
.lodingBox{
    position:absolute;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vh;
    z-index: 10000000;
}
p {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 100%;
    height: 88vh;
    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: 8px;
    background-color: white;
}

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

.searchFire {
    // width: 248px;
    flex: 1;
    height: 32px;
}

.setBox {
    width: 88px;
    height: 112px;
    text-align: center;
    margin-left: 5px;
    margin-top: 5px;
    position: relative;
    .left_fileBox{
        position: relative;
        .levelImg{
            width: 32px;
            height: 32px;
            position: absolute;
            right: 5%;
            bottom: 20%;
        }
    }
}

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

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

.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: 88vh;
    border-radius: 4px;
    background-color: white;
}

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

.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: #F6F7F9;

    .topPath {
         margin-left: 4px;
        cursor: pointer;
        color: #6F85B5;
        font-size: 12px;
    }
}

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

.detailBox {
    width: 100%;
    height: 50%;
    overflow-y: auto;
}
.showBox{
    height: calc(100% - 48px - 24px);
}


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

.fileTable {
    height: 50%;
    overflow-y: hidden;
    // margin-top: 48px;
}

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

.setCli1 {
    width: 156px;
    height: auto;
    position: absolute;
    background-color: white;
    border: 1px solid gray;
    border-radius: 4px;
    z-index: 100;
    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;
    padding-bottom: 0;
}
:deep(.el-scrollbar__wrap) {
    height: 100% !important; 
    // overflow-y: auto;
}

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

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

    .menu_item {
        width: 100%;
        height: 30px;
        border-radius: 4px 4px 4px 4px;
        line-height: 30px;
        display: flex;
        margin: 5px auto;
        align-items: center;
        font-size: 13px;

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

        span {
            margin-left: 4px;
        }
    }
}
// 扩容盒子
.expansion{
    margin:  0 16px;
    border-top: 1px solid #C1CCE3 ;
    .top_box{
        margin-top: 16px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}

.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;
}

// 隐藏全选按钮
.file-jia {
    :deep(.el-table th.el-table__cell:nth-child(1) .cell) {
        visibility: hidden;
    }
}
</style>