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

<template>
    <div>
        <div class="bigBox">
            <div class="settingBox" @click="mouseClick">
                <!-- 设置盒子顶部搜索 -->
                <div class="topSearch">

                    <div class="spaceName">{{ spaceName }}</div>
                    <div>
                        <el-icon @click="createNewMenu(1, true)" color="#505870" size="24" class="shouzhi">
                            <Plus />
                        </el-icon>
                        <!-- @click="createNewFile" -->
                    </div>
                </div>
                <!-- 方块点击盒子 -->
                <div style="height: 75vh;overflow-y: auto;">
                    <div class="searchBox">
                        <el-input v-model="searchFire" @keyup.enter="fileBlur" class="searchFire" size="large"
                            placeholder="搜索文件" />
                        <el-icon class="SearchIcon" @click="fileBlur">
                            <Search />
                        </el-icon>
                    </div>
                    <!-- v-for盒子 -->
                    <div
                        style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;align-content: flex-start;overflow-y: auto;">
                        <template v-for="(item, index) in fileMenu" :key="index">
                            <div class="setBox">
                                <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>
                                <div class="left_fileBox" @click="changeFile(item, index)">
                                    <el-tooltip class="box-item tool-tip" effect="dark" placement="top-start"
                                        v-if="item.encryptLevel">
                                        <template #content><span>安全级别: {{ item.encryptLevel == 'L1' ? '敏感' :
                                            (item.encryptLevel
                                                == 'L2' ? '涉密' : (item.encryptLevel == 'L3' ? '机密' : '绝密')) }}</span>
                                        </template>
                                        <img src="../../assets/images/fileStyle.png"
                                            style="width: 72px;height: 72px;" class="shouzhi"></el-tooltip>
                                    <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;" v-else class="shouzhi">
                                    <el-tooltip class="box-item tool-tip" effect="dark" placement="top-start"> <template
                                            #content> <span>{{ item.dirName }}</span></template>
                                        <p class="ellipsis-text shouzhi">{{ item.dirName }}</p>
                                    </el-tooltip>
                                    <img class="levelImg shouzhi" v-if="item.isEncrypt === 'Y'"
                                        :src="getLevelImg(item.encryptLevel)" alt="">
                                </div>
                            </div>
                        </template>
                    </div>

                </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">
                <!-- 功能盒子  -->
                <!-- table切换 -->
                <!-- <div class="useBox">
                    <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> -->
                <div v-if="editOnline">
                    <!-- 众多功能 -->
                    <div class="manyUse">
                        <div class="useMenu">
                            <div v-if="thisFolder.dirType == '1' && pathLabelData.length"
                                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 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;">上传
                                    </span>
                                </div>
                            </div>
                            <div v-if="thisFolder.dirType" class="shouzhi"
                                style="display: flex;width: 102px;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 class="shouzhi"
                                style="display: flex;opacity:0.5;width: 102px;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>
                            <div style="display: flex;width: 102px;height: 32px;justify-content: flex-start;align-items: center;"
                                :class="!thisFolder.dirType ? 'yincang' : 'xianshi'">
                                <div style="margin-left: 5px;">
                                    <el-icon
                                        style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;"
                                        @click="thisFolder.dirType ? createNewMenu(2) : null">
                                        <Plus />
                                    </el-icon>
                                </div>
                                <div style="margin-left: 5px;" @click="thisFolder.dirType ? createNewMenu(2) : null">
                                    <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,haveCheck)">
                                    <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 v-if="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/scanFile.png" style="width: 24px;height: 24px;" alt="">
                                </div>
                                <div style="margin-left: 5px;">
                                    <span style="color: black;cursor: pointer;" @click="scannerFile">扫描
                                    </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/scanFile.png" style="width: 24px;height: 24px;" alt="">
                                </div>
                                <div style="margin-left: 5px;">
                                    <span style="color: black;cursor: pointer;">扫描
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="tip">
                            <img src="@/assets/images/mouseRight.png" alt="">
                            <span>使用右键进行文件操作</span>
                       </div>
                    </div>
                    <!-- 面包屑功能栏 -->
                    <div class="breadBox">
                        <!-- 左侧 -->
                        <div style="display: flex;justify-content: space-around;align-items: center;margin-left: 10px;">
                            <!-- 前进后退 -->
                            <!-- <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">
                                <!-- <el-icon><ArrowDown /></el-icon> -->
                                <span @click="backTopPath">{{ topPath }}</span>
                                <PathLabel v-if="!loadingPreview" @folderClick="folderClick" :pathLabelData='pathLabelData'></PathLabel>
                                <!-- <BreadMenu></BreadMenu> -->
                            </div>
                        </div>
                        <!-- 右侧 -->
                        <div>
                            <img :src="sort" alt="">
                            <!-- //控制宫格展示 -->
                            <img
                              v-if="fileGrid"
                              src="@/assets/images/squre.png"
                              class="shouzhi palace-grid"
                              alt=""
                              @click="changeShow(true)"
                            />
                            <img
                              v-else
                              src="@/assets/images/Frame_187.png"
                              class="shouzhi palace-grid"
                              alt=""
                              @click="changeShow(false)"
                            />
                            <!-- <img :src="squre" alt="" @click="gridChange" class="shouzhi"> -->
                        </div>
                    </div>
                <!-- </div> -->
                <!-- 展示文件夹盒子 -->
                <!-- 文件夹 -->
                <div class="showBox">
                    <div class="detailBox file-jia" @click="mouseClick">
                        <el-collapse v-model="folder" >
                            <el-collapse-item name="1" class="custom-collapse-item">
                                <template #title>
                                    <span class="file-title">文件夹</span>
                                </template>
                                <el-table v-if="fileGrid == 1" 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="名称" :show-overflow-tooltip="true" width="600">
                                        <template #default="scope">
                                            <span style="display: flex;align-items: center;">
                                                <el-icon v-if="scope.row.isFavorite == 'N'" @click.stop="collectByStar(scope.row,true)" style="margin-right: 7px;">
                                                    <Star />
                                                </el-icon>
                                                <img v-else @click.stop="delCollect(scope.row,true)" src="../../assets/images/yellowstar.png" alt="">
                                                <img src="../../assets/images/fileBox.png" style="width: 20px;height: 24px;margin-right: 5px;"
                                                    alt="">
                                                    <span class="shouzhi">{{ scope.row.dirName }}</span>
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="createTime" label="时间" width="280" />
                                        <el-table-column label="加密等级">
                                            <template #default="scope">
                                                <span>
                                                    {{setTablelevel(scope.row.encryptLevel)}}
                                                </span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <PlaceGridFolder v-else @folderClick="folderClick" :folderList="folderList" :restName="restName"
                                        :collectFolder="collectFolder" @setScroll="setScroll" @folderRClick="folderRClick" :getAllTop="getAllTop" @folderBack="folderBack" :thisFolder="thisFolder">
                                    </PlaceGridFolder>
                                </el-collapse-item>
                            </el-collapse>
                            <!-- 右键唤出的菜单 -->
                            <div class="right_menu shouzhi" 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>重命名</span>
                                </div>
                                <div class="menu_item" @click="collectFolder">
                                    <img src="@/assets/images/collect.png" alt="" />
                                    <span>收藏</span>
                                </div>
                            </div>
                        </div>
                        <!-- 文件 -->
                        <div class="fileTable">
                            <el-collapse v-model="files">
                                <el-collapse-item name="2" class="custom-collapse-item">
                                    <template #title>
                                       <span class="file-title">文件</span>
                                    </template>
                                    <el-table v-el-table-infinite-scroll="setScroll" :infinite-scroll-distance="30"
                                        :infinite-scroll-disabled="tableBeEnd" v-if="fileGrid == 1" :height="fileHeight"
                                        :data="fileList" :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="600">
                                            <template #default="scope">
                                                <span
                                                    style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: flex;align-items: center;">
                                                    <el-icon v-if="scope.row.isFavorite == 'N'"
                                                        @click.stop="collectByStar(scope.row, false)"
                                                        style="margin-right: 7px;">
                                                        <Star />
                                                    </el-icon>
                                                    <img v-else @click.stop="delCollect(scope.row, false)"
                                                        src="../../assets/images/yellowstar.png" alt=""
                                                        style="margin-right: 5px;">
                                                    <img :src="setImg(scope.row.fileType)" style="width:22px;height:22px;" alt="">
                                                    <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 class="shouzhi">{{ scope.row.fileName }}</span> -->
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="createTime" label="时间" sortable width="280" />
                                        <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 :fileHeight="fileHeight" :getAllTop="getAllTop" @navBack="navBack"
                                        @lastBB="lastBB" @setScroll="setScroll" @handleRowClick="handleRowClick" @onlineCase="onlineCase" @shareBack="shareBack" :thisFolder="thisFolder" :fileList="fileList"></PalaceGridFile>
                                </el-collapse-item>
                            </el-collapse>
                            <div class="setCli" v-if="cliCC" :style="{ left: xz + 'px', top: yz - 260 + 'px' }">
                                <template v-for="(item, index) in filterMouseCli()" :key="index">
                                    <p @click="chooseSet(item, index, 1)" class="chooseSet">
                                        <img :src="item.img" alt="">
                                        {{ item.name }}
                                        <span v-if=" 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" v-if="clickRow.isActor === 'Y' && clickRow.isFiled != 'Y'">
                                    <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" :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="文件上传" :close-on-click-modal="false" width="30%" @close="closeUpload">
                    <el-upload class="upload-demo" :file-list="fileArr" :before-upload="upBefore"  drag :http-request="onSuccess" multiple :on-remove="handleRemove"  
                    element-loading-text="上传中..."
                    element-loading-background="rgba(255, 255, 255, 0.8)"
                    v-loading="loadingUpload" >
                        <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="closeUpload">取消</el-button>
                            <el-button type="primary" @click="throttleSureUpload">确认</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" placeholder="请输入不多于32位字符" maxlength="32"></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="refreshFile"
                    :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" :thisFolder="thisFolder.dirId"></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>
    <!-- 新增文档 -->
    <AddFile v-if="newAdd" :newAdd="newAdd" @closeAddFile="closeAddFile" @threeBe="threeBe" :clickFileData="clickFileData"></AddFile>
    <!-- 扫描文档 -->
    <ScanFile v-if="openScan" :openScan="openScan" :scannerFiles="scannerFiles" @saveScanFile="saveScanFile" @closeOpen="closeOpen"></ScanFile>
    <!-- 可用扫描仪信息 -->
     <div>
        <el-dialog v-model="checkScanner" title="扫描仪" width="30%">
            <div v-for="item in scannerList" :key="item.scannerId" @click="checkScanFn(item)" id="Onescan" :class="{'checkScan':item.scannerId ==checkScanId }">
               <img src="@/assets/images/scanImg.png" alt="">
                {{item.scannerName}}
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeCheckScanner">取消</el-button>
                    <el-button type="primary" @click="sureScaner">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <!-- 扫描文件移动到 -->
    <MoveTo v-if="openScanMove" :spaceType='3' :scanFileArr="scanFileArr" :thisFolder="thisFolder" :openScanMove="openScanMove" @closeOpenScanMove='closeOpenScanMove'></MoveTo>
</template>

<script>
import { ref, toRaw, onMounted, inject, onActivated ,watch} from 'vue'
import myfile from '../../api/myfile/myfile'
import {documentation}from "@/api/biz/actor.js"
import {getInfo}from "@/api/biz/info.js"
import uploadApi from '../../api/upload/upload'
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 AddFile from '../myjoin/components/AddFile.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 { Refresh, 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 ScanFile from '@/components/ScanFile/ScanFile.vue'
import MoveTo from '@/components/MoveTo/MoveTo.vue'
import PathLabel from '@/components/PathLabel/index.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 } from "@/utils/index.js"
import fileSpace from '../../api/filespace/fileSpace';
import { getLeveldetail } from '../../api/level/level';
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { setIcon } from "@/utils/index.js";
import Cookies from "js-cookie";
import elTableInfiniteScroll from 'el-table-infinite-scroll'
import { getLevel } from '@/api/level/level.js';
import { listInfo,selectInfo ,getFileByScanerId} from '@/api/scanner/info.js';
import { getConfigKey } from "@/api/system/config.js"

export default {
    directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
    },
    setup() {
        const { proxy } = getCurrentInstance();
        const levelList = ref()
        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(sessionStorage.getItem('fileGrid') || 1)
        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)
        const leftNewFile = ref(false)  //解决左侧点击后不能显示的问题
        let xz = ref(0)
        let yz = ref(0)
        let newAdd = ref(false)
        const loadingUpload = ref(false);//文件上传加载
        const fileUserTreeData = reactive({ data: {} });
        // 创建一个 ref 用于标记节流状态
        const throttled = ref(false);
        let fileList = ref()
        let menuList = ref([
            {
                name: "我的空间",
                choose: "我的空间"
            }
        ])
        let useMenu = ref([
            {
                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 route = useRoute(); //注册路由
        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 showInputPassword = ref(false)
        const chooseRow = ref()
        const chooseNum = ref()
        const loadingPreview = ref(false)
        const addTab = inject("addTab");
        const addFileTab = inject("addFileTab");
        const addFolderAdd = inject("addFolderAdd");
        const spaceName = ref()
        const filePageNum = ref(1) //获取文件分页
        const tableBeEnd = ref(true)//控制下拉是否到底
        const tableTotal = ref(0)//表格数据总数
        const clickFileData = ref(null);
        let fileBig = ref(0);
        const maxFileSize = ref()//能上传的最大size
        const scannerList = ref() // 扫描仪数据
        const checkScanId = ref() // 选中的scan的id
        const checkScanner = ref(false) //显示扫描仪选择框
        const scannerFiles = ref([]) //选择的扫描仪的文件
        const openScanMove = ref(false)
        const pathLabelData = ref([
        ])
        const fileHeight=ref('38vh')
        const pageSize = ref(10)
         //控制宫格展示
        const isList = ref(false); //控制显示方式
        const openScan = ref(false)//控制扫描文档显示
        const scanFileArr = ref([]) //认领的扫描文件数组
        const changeShow =async (fileGrids) => {
            filePageNum.value = 1
        if(fileGrid.value == 1){
            fileGrid.value = 0 // 变宫格
            pageSize.value = 20+pageSize.value
            if(!thisFolder.value.dirId)return
            const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
            const res = await myfile.getById(query)
              console.log('filessetScrollres',res);
            if (res.code === 200) {
                // const newarr = res.rows.concat(toRaw(fileList.value))
                const newarr = res.rows
                console.log('newarr',newarr);
                fileList.value = JSON.parse(JSON.stringify(newarr))
                if(newarr.length < tableTotal.value){
                    //获取后的数量<total就可以再次获取
                    setTimeout(()=>{
                        tableBeEnd.value = false 
                    },1000)
                }
            }
        }else{
            fileGrid.value = 1
            pageSize.value = 20
        }
        sessionStorage.setItem('fileGrid',fileGrid.value)

        };
        // 获取文件夹，中栏，文件
        function getAllTop() {
            documents.getTop(3).then(res => {
                if(!res){
                    console.log('nores');
                    return
                }
                let userMe;
                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
                spaceName.value = userMe[0].dirPath
                let obj = {
                    pageNum: 1,
                    pageSize: 10
                }
                documents.getALLdocumentByType({ parentId: userMe[0].dirId - 0, spaceId: userMe[0].spaceId, pageNum: obj.pageNum, pageSize: obj.pageSize }, 3).then(res => {
                    fileMenu.value = res.data
                    folderList.value = res.data
                    console.log('folderList.value',folderList.value);
                })
                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 => {
                                    // console.log('topallfn');
                                    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');
                })
            })
        }
        const getFirstFolder = ()=>{
            let obj = {
                    pageNum: 1,
                    pageSize: 10
                }
            documents.getALLdocumentByType({ parentId: impDirId.value, spaceId: impSpaceId.value, pageNum: obj.pageNum, pageSize: obj.pageSize },3).then(res => {
                    fileMenu.value = res.data
                    folderList.value = res.data
                })
        }
        function getSpaceList() {
            myfile.fileType(3).then(res => {
                useSpace.value = res.data.usedCap
                allSpace.value = res.data.spaceCap
            })
        }
        function changeFile(row, num) {
            // 创建标签
             const labelItem = {
                name:row.dirName,
                dirId:row.dirId
            }      
            pathLabelData.value = [labelItem]
            const addData = {
                path: '/myfile' + row.dirId,
                name: row.dirName,
                clickRowId: toRaw(row)
            }
            addFolderAdd(addData)   //加了这句代码界面会渲染两次
            thisFolder.value = row
            // topPath.value = row.dirPath
            if (row.isEncrypt === "Y") {
                getLeveldetailFn(row.encryptLevel)
            } else {
                thisFolderRole.value = null
            }
            copyParentId.value = row.parentId
            newDirId.value = row.dirId
            newSpaceId.value = row.spaceId
            documents.getALLdocumentByType({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }, 3).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);
            }
        }

        // tableMenu切换
        function tableChange(row, num) {
            if (row.name == '我的空间') {
                getAllTop()
                if (!editOnline.value) {
                    editOnline.value = true
                }
            } else {
                let obj = {
                    pageNum: 1,
                    pageSize: 10
                }
                documents.getALLdocumentByType({ parentId: row.dirIds - 0, spaceId: row.spaceIds - 0, pageNum: obj.pageNum, pageSize: obj.pageSize }, 3).then(res => {
                    // fileMenu.value = res.data
                    folderList.value = res.data
                })
                myfile.getById(row.dirIds - 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
                                })
                            }
                        }
                    }
                })
            }
            selectedIndex.value = num
        }
        // x图标事件
        function shotdown(row) {
            menuList.value = menuList.value.filter(item => item.name !== row.name)
            selectedIndex.value = -1
            if (!editOnline.value) {
                editOnline.value = true
            }
        }
        function fileBlur() {
            if (searchFire.value == '') {
                getAllTop()
            } else {
                const searchTerm = searchFire.value.trim().toLowerCase(); // 转换为小写字母并去除首尾空格
                fileMenu.value = fileMenu.value.filter(item => {
                    const dirName = item.dirName.trim();
                    return dirName.includes(searchTerm);
                });
            }
        }
        // 文件名表格每一行点击事件
        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');
                    let passArrObj
                    if(passArr){
                     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: "删除成功"
                        })
                        // getAllTop()
                        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}/biz/info/download/${copyFileId.value}`;
                downLoadfile()
            }
            if (row.name === '收藏') {
            //    console.log('clickRow',clickRow.value);
               if(clickRow.value.isFavorite === "Y"){
                return ElMessage({
                            type: "error",
                            message: "请勿重复收藏"
                         })
                }
                collects.value = true
            }
            if (row.name === '在线编辑') {
                loadingPreview.value = true
                // const filePreview = canPreviewFile(copyFileType.value)
                getInfo(clickRow.value.docId).then((res)=>{
                    console.log('res',res);
                    clickRow.value = res.data
                    if(clickRow.value.isFiled === "Y"){
                        cliCC.value = false
                        loadingPreview.value = false
                        return ElMessage({ message: '该文件已归档 不可再次编辑', type: 'error' })
                    }
                //--------------------------
                    loadingPreview.value = false
                    if(thisFolderRole.value &&thisFolderRole.value.roles&& thisFolderRole.value.roles.l0800){
                            addFileTab(clickRow.value, 1,1);
                        }else{
                        addFileTab(clickRow.value, 1,0); 
                        }
                    cliCC.value = false
                    loadingPreview.value = false
                //---------------------------
                })
            }
            if (row.name === '文字识别') {
                 const itemData = {
                        name: '文字识别',
                        path: 'identifyFont',
                        clickRowId: {
                            docId: copyRow.value.docId,
                            fileId: copyRow.value.fileId,
                            fileType: copyFileType.value
                        }
                    }
                    addFolderAdd(itemData)
            }
            if (row.name === '预览') {
                // console.log('yulanData',thisFolder.value);
                // console.log('thisFolderRole',thisFolderRole.value);
                loadingPreview.value = true
                const filePreview = canPreviewFile(copyFileType.value)
                if (filePreview) {
                    loadingPreview.value = false
                    if(thisFolderRole.value &&thisFolderRole.value.roles&& thisFolderRole.value.roles.l0800){

                        addFileTab(clickRow.value, 0,1);
                    }else{
                       addFileTab(clickRow.value, 0,0); 
                    }
                    //    const addData = {
                    //     path:"/fileEdit" + clickRow.value.docId,
                    //     name:clickRow.value.fileName,
                    //     row:clickRow.value.docId
                    // }
                    // addFolderAdd(addData)
                    onlyView.value = true
                    // 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
                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, leftNewFiles) {
            if (leftNewFiles) {
                leftNewFile.value = true  //解决左侧点击文件后不显示的问题
            }
            if (num == 2) {
                newAdd.value = true
            } else {
                oneOrTwo.value = num
                folderCase.value = true
            }
        }
        function threeBe(data,newFileData) {
            if(thisFolderRole.value && thisFolderRole.value.roles.l0800){
                        addFileTab(newFileData, 1,1);
                    }else{
                       addFileTab(newFileData, 1,0); 
                    }
            newAdd.value = data
            console.log('cli', clickFileData.value)
            let obj = {
                pageNum: 1,
                pageSize: 10
            }
            myfile.getById(clickFileData.value.dirId, 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(clickFileData.value.dirId, 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 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 throttleSureUpload() {
            if (!throttled.value) {
                sureUpload();
                throttled.value = true;
                setTimeout(() => {
                    throttled.value = false;
                }, 5000); // 设置节流的时间间隔为 1000 毫秒（1秒）
            }
        }
        // 确认上传
        function sureUpload() {
            loadingUpload.value = true;
            if (useSpace.value * 1024 * 1024 + fileBig.value / 1024 > allSpace.value * 1024 * 1024) {
                ElMessage({
                    message: "超过最大容量，请联系管理员扩容",
                    type: "error",
                })
                return
            } else {
                if (fileArr.value.length > 0) {
                    for (var i = 1; i <= fileArr.value.length; i++) {
                        uploadApi.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()
                                refreshFile()
                                uploadModal.value = false
                                loadingUpload.value = false;
                                fileArr.value = []
                            }
                        }).catch(err => {
                            loadingUpload.value = false;
                            fileArr.value = []
                        })
                    }
                } else {
                    loadingUpload.value = false;
                    return ElMessage({ message: "请选择文件", type: "error" })
                }
            }

        }
        function onSuccess(files, val) {
            fileBig.value = files.file.size
            fileArr.value.push(files.file)
        }
        //关闭文件上传
        const closeUpload =() =>{
            uploadModal.value = false;
            fileArr.value = [];
            loadingUpload.value = false
        }
        // 移除上传的某些文件
        const handleRemove = (file,rawFile) => {
            fileArr.value = [...rawFile]
        }
        // 筛选后缀图片
        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]
            }
            if (val.length) {
                fileCheckout.value = true
                haveCheck.value = true
            } else {
                fileCheckout.value = false
                if (!folderCheckout.value) {
                    haveCheck.value = false
                }
            }
            // console.log('folderId',folderId.value)
        }
        // 重命名
        function restName(row, index) {
            // 判断是点击打开还是右键菜单打开
            row = row ? row : clickRow.value
            copyFolderName.value = row.dirName
            selectedBox.value = row.dirId
            rename.value = true
        }
        function getMenu(row, num,canDo) {
            if (row.name === '删除') {
                if(!canDo){
                    // openScan.value = true
                    return
                } 
                const datas = []
                const isFile = ref(false)
                delMoreFile.value.map(i => {//多选删除
                    if (i.parentId) {//文件
                        isFile.value = true
                    } else {//文件夹
                        datas.push(i.docId)
                    }
                })
                // if(folderId.value.isEncrypt === 'Y'){
                //     return  ElMessage({
                //                 message: "删除失败，加密目录不可删除",
                //                 type: "error"
                //             })
                // }
                // 文件夹删除
                if (isFile.value) {//文件
                    documents.delDocument(folderId.value.dirId).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "删除成功",
                                type: "success"
                            })
                            // getAllTop()
                            refreshFile()
                        } else {
                            ElMessage({
                                message: "删除失败，目录应不为空",
                                type: "error"
                            })
                        }
                        isFile.value = false
                    })
                } else {
                    myfile.delMenu(datas.toString()).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "删除成功",
                                type: "success"
                            })
                            // getAllTop()
                            refreshFile()
                        }
                    })
                }
            }
            if (row.name == '分享给') {
                workOrEdit.value = num
                thanks.value = true
            }
        }
        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,e,jump) {
            // console.log('rightRow',row);
            // 如果label没有值说明点的是一级目录
            if(!pathLabelData.value[0]){
                 // 创建标签
                const addData = {
                    path: '/myfile' + row.dirId,
                    name: row.dirName,
                    clickRowId: toRaw(row)
                }
                addFolderAdd(addData) 
            }
            // 初始化分页数据
            tableBeEnd.value = true
            filePageNum.value = 1
            tableTotal.value = 0
            // 上一级dirId就是下一级的parentId
            // 判断是点击打开还是右键菜单打开
            if (row) {
                backFolder.value = thisFolder.value
                thisFolder.value = row;
                if(pathLabelData.value[0]){
                    // 有值就说明是二级及以后的数据
                    const oldArr = toRaw(pathLabelData.value)
                    // console.log('oldArr',oldArr);
                    let newArr
                    console.log('jump',jump);
                    if(jump == undefined){
                        newArr = oldArr.push({
                          name:toRaw(row).dirName,
                          dirId:toRaw(row).dirId
                        })
                    }else{ // jump有值说明是点击过来的 后面的要截取掉
                        newArr = oldArr.splice(jump+1)
                    }
                    console.log('newArr',newArr);
                    pathLabelData.value = JSON.parse(JSON.stringify(oldArr))
                }else{
                    const labelItem = {
                        name:row.dirName,
                        dirId:row.dirId
                    }      
                    pathLabelData.value = [labelItem]
                }
            } else {
                row = thisFolder.value
            }
            if (row.isEncrypt === "Y") {
                getLeveldetailFn(row.encryptLevel)
            } else {
                thisFolderRole.value = null
            }
            // topPath.value = row.dirPath
            newDirId.value = row.dirId
            newSpaceId.value = row.spaceId
            clickFileData.value = row
            const query = `${newDirId.value}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
            documents.getALLdocumentByType({
                parentId: newDirId.value - 0,
                spaceId: newSpaceId.value - 0
            }, 3).then(res => {
                folderList.value = res.data
                if (res.data.length === 0) {
                    myfile.getById(query).then(res => {
                        // console.log('res = ',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('folderClickshijian1',tableTotal.value,tableBeEnd.value);
                    })
                } else {
                    myfile.getById(query).then(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('folderClickshijian2',tableTotal.value,tableBeEnd.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
                    refreshFile()
                }
            })
        }
        // 判断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
            refreshFile()
        }
        function getCback(data) {
            thanks.value = data
            refreshFile()
        }
        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 closeOpen = ()=>{
            openScan.value = false
        }
        //历史版本
        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
        }
        const closeAddFile = ()=>{
            newAdd.value = false
        }
        //对mouseCli数组进行筛选，实现菜单的区分显示
        const filterMouseCli = () => {
            const canPreviewArray = ['.doc','.dps','.et', '.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','.PNG', '.mp3', '.mp4']
            const imgTypeArr = ['.png', '.jpg', '.jpeg', '.JPG','.PNG']
            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','.dps','.et', '.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 (clickRow.value.isFiled === "Y") {
                arr = arr.filter(item => item.name !== "在线编辑" && item.name !== "协作")
            }
            if (!imgTypeArr.includes(copyFileType.value)) {
                arr = arr.filter(item => item.name !== "文字识别")
            }
            // console.log('arr',arr);
            if (thisFolderRole.value) {
                arr = rightMenuRole(toRaw(thisFolderRole.value), 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 = () => {
            // console.log('clickRow',clickRow.value);
            if(clickRow.value.isFavorite === "Y"){
                return ElMessage({
                            type: "error",
                            message: "请勿重复收藏"
                         })
            }
            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.getALLdocumentByType({
                parentId: newDirId.value - 0,
                spaceId: newSpaceId.value - 0
            }, 3).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));
                        }
                    })
                }
            })

        }
        // 归档
       async function goLock() {
            console.log('goLockclickRow',clickRow.value);
            const res = await documentation(clickRow.value.docId)
                console.log('res',res);
                if(res.code == 200){
                     ElMessage({
                            type: "success",
                            message: "成功归档"
                        })
                }
                cliCC.value = false
                anyP.value = false
                refreshFile()
        }
        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';
                }
            }
        }

        //点击收藏后刷新文件
        const refreshFile = (left,edit) => {
            console.log(333);
            if(edit){
                getFirstFolder()
            }
            if (toRaw(thisFolder.value).dirId && !leftNewFile.value) {//如果点开了文件夹
                folderClick()
                console.log(111);
            } 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 getLevelList = async ()=>{
            const res = await getLevel()
            if(res.rows){
                levelList.value = res.rows.map(item=>{
                    return {
                        levelCode:item.levelCode,
                        levelName:item.levelName
                    }
                })
            console.log('levelList',levelList.value);
            }
        }
        const setTablelevel = (level)=>{
            const thisItem = levelList.value.find(item=>item.levelCode == level)
            if(thisItem){
                return thisItem.levelName
            }else{
                return '未加密'
            }
        }
        //获取权限详情
        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");
            // console.log('pass',pass);
            // console.log('oldPass',passwordCookies);
            // 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 time = Date.now()
                        // console.log('time',time);
                        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=${pageSize.value}&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);
        }
        const backTopPath = ()=>{
            pathLabelData.value = ([])
            getAllTop()
        }
        const upBefore = (file)=>{
            console.log('file',file);
            const maxSize = (maxFileSize.value-0)*1024*1024
            // console.log('maxSize',maxSize);
            if(file.size>maxSize){
                ElMessage({ message: file.name+'上传失败，上传文件大小最大为'+maxFileSize.value+'M', type: 'error' })
            return false
            }
        }
        //获取扫描仪列表
        const scannerFile =async ()=>{
            const res = await selectInfo()
            scannerList.value = res.rows
            checkScanner.value = true
            checkScanId.value = null
            // console.log('scanner',res);
        }
        // 选择扫描仪
        const checkScanFn = (item)=>{
            checkScanId.value = item.scannerId
        }
        // 确认选择扫描仪 获取扫描仪下文件列表
        const sureScaner =async ()=>{
            if(!checkScanId.value) return
            const res = await getFileByScanerId(checkScanId.value)
            console.log('sureScanerres',res);
            scannerFiles.value = res.data
            checkScanner.value = false
            openScan.value = true
        }
        // 关闭窗口
        const closeCheckScanner = ()=>{
            checkScanner.value = false
        }
        // 移动到事件
        const saveScanFile = (arr)=>{
            console.log('arr',arr);
             openScan.value = false
             scanFileArr.value = arr
             openScanMove.value = true

        }
        // 关闭窗口
        const closeOpenScanMove = ()=>{
            openScanMove.value = false
            refreshFile()
        }
        const setImg = (type)=>{
           return setIcon(type)
        }
        const changePageSizeFn = ()=>{
            if(fileGrid.value == 0){
                if(!folder.value.length){
                    pageSize.value = 80
                }else{
                    pageSize.value = 20+pageSize.value
                }
            }else{
                pageSize.value = 20
            }
        }
        watch(() => folder.value, async(newValue, oldValue) => {
            // console.log('iFrameData 发生改变了', newValue, oldValue);
            console.log('files',newValue);
            filePageNum.value = 1
            if(!newValue.length){
                fileHeight.value = '75vh'
                if(!thisFolder.value.dirId)return
                if(fileGrid.value = 0){
                    pageSize.value = 20
                    }else{
                    pageSize.value = 80
                }
                 const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                 const res = await myfile.getById(query)
                //  console.log('filessetScrollres',res);
                 if (res.code === 200) {
                    // const newarr = res.rows.concat(toRaw(fileList.value))
                    const newarr = res.rows
                    console.log('newarr',newarr);
                    fileList.value = JSON.parse(JSON.stringify(newarr))
                    if(newarr.length < tableTotal.value){
                        //获取后的数量<total就可以再次获取
                        setTimeout(()=>{
                            tableBeEnd.value = false 
                        },1000)
                    }
                }
            }else{
                if(fileGrid.value = 0){
                    pageSize.value = 10
                    }else{
                    pageSize.value = 40
                }
                fileHeight.value = '38vh'
                if(!thisFolder.value.dirId)return
                 const query = `${thisFolder.value.dirId}?pageSize=${pageSize.value}&pageNum=${filePageNum.value}`
                 const res = await myfile.getById(query)
                //  console.log('filessetScrollres',res);
                 if (res.code === 200) {
                    // const newarr = res.rows.concat(toRaw(fileList.value))
                    const newarr = res.rows
                    console.log('newarr',newarr);
                    fileList.value = JSON.parse(JSON.stringify(newarr))
                    if(newarr.length < tableTotal.value){
                        //获取后的数量<total就可以再次获取
                        setTimeout(()=>{
                            tableBeEnd.value = false 
                        },1000)
                    }
                }
            }
        });
        onMounted(() => {
            // if(!thisFolder.value){
            getAllTop()
            // }
            getSpaceList()
            getLevelList()
            getConfigKey("file.size.limit").then(response => {
                // console.log('response',response);
                maxFileSize.value = response.msg
            });     
            // console.log('!thisFolder.value',thisFolder.value);
            // refreshFile()
            // 添加监听，点击其他地方关闭文件夹右键菜单
            changePageSizeFn()
            window.addEventListener("click", closeRMenu, true);
            window.addEventListener("click", mouseClick, true);
            // console.log('onMounted');
        })
        // 组件显示
        onActivated(() => {
            // console.log('onActivated.query',route.query);
            loadingPreview.value = true
            //给pagesize复制

            // setTimeout(()=>{
            //     if(route.query.row){
            //         const newRow = JSON.parse(route.query.row)
            //         console.log('newRow',newRow);
            //         thisFolder.value = newRow
            //         refreshFile()
            //     }
            //         loadingPreview.value = false
            // },500)
            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
                         // 这里点的是一级目录 所以重新给pathLabelData赋值
                        const labelItem = {
                            name:res.data.dirName,
                            dirId:res.data.dirId
                        }      
                        pathLabelData.value = [labelItem]
                        // console.log('pathLabelData',pathLabelData.value);
                        refreshFile()
                    })
                }
                loadingPreview.value = false
            }, 500)

        })
        // 监听路由变化
        // onBeforeRouteUpdate((to, from) => {
        //     console.log('to',to);
        //     // console.log('from',from);
        //     if (to.name == 'myfile') {
        //         loadingPreview.value = true
        //         const thisdirId = to.params.dirId
        //         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,//右侧切换
            tableChange,//改变class点击事件
            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,
            handleRemove,
            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,
            route,
            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,
            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,
            downLoadfile,
            addTab,
            addFolderAdd,
            addFileTab,
            threeBe,
            newAdd,
            spaceName,
            filePageNum,
            setScroll,
            tableBeEnd,
            tableTotal,
            clickFileData,
            leftNewFile,
            fileBlur,
            fileBig,
            loadingUpload,
            closeUpload,
            //控制宫格展示
            changeShow,
            isList,
            throttled,
            throttleSureUpload,
            getLevelList,
            levelList,
            setTablelevel,
            pathLabelData,
            backTopPath,
            maxFileSize,
            upBefore,
            openScan,
            closeOpen,
            getFirstFolder,
            scannerFile,
            scannerList,
            checkScanner,
            checkScanId,
            checkScanFn,
            closeCheckScanner,
            sureScaner,
            scannerFiles,
            saveScanFile,
            openScanMove,
            closeOpenScanMove,
            scanFileArr,
            setImg,
            closeAddFile,
            fileHeight,
            pageSize,
            changePageSizeFn
        }
    },
    watch: {
    },
    components: {
        AddFile,
        BreadMenu,
        // FileEdit,
        ImgPreview,
        FileTree,
        historyList,
        TransferModal,
        CreateFloder,
        FileCollect,
        FolderReName,
        SpaceBig,
        PlaceGridFolder,
        PalaceGridFile,
        inputPassword,
        PathLabel,
        ScanFile,
        MoveTo
    },
}

</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-between;
    align-items: center;
    padding-left: 16px;
    padding-right: 16px;
}

.searchFire {
    width: 100%;
    height: 32px;
}

.searchBox {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 8px 16px;

    .SearchIcon {
        color: gray;
        position: absolute;
        right: 5%;
        top: 35%;

    }
}

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

    // border: 1px solid salmon;
    .left_fileBox {
        margin-top: 10px;
        position: relative;

        // border: 1px solid black;
        .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 !important;
}

.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:space-between;
    align-items: center;
    .useMenu{
        height: 100%;
        display: flex;
        align-items: center;
        line-height: 48px;
    }
    .tip{
        display: flex;
        align-items: center;
        margin-right: 24px;
        color: #2E6BC8;
        font-size: 14px;
    }
}

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

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

    .topPath {
        display: flex;
        align-items: center;
        margin-left: 4px;
        cursor: pointer;
        color: #6F85B5;
        font-size: 12px;
    }
}
.checkScan{
    background-color: #F5F7F9;
}
#Onescan{
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

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

.showBox {
    height: calc(100% - 48px - 24px);
}

.detailBox {
    width: 100%;
    height: 50%;
    // overflow-y: auto;
}

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

.fileTable {
    height: 50%;
    // overflow-y: auto;
}

.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;
    cursor: pointer;
    // 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(.el-collapse-item__header) {
    padding-left: 10px;
    box-sizing: border-box;
}

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

.yincang {
    opacity: 0.5;
}
.file-title{
    color: #2E6BC8;
    margin-left: 3%;
}
::v-deep .el-collapse-item__arrow {
  position: relative;
  color: #2e6bc8;
  right: 97%;
}
.palace-grid{
    margin-left: 4px;
    margin-right: 20px;
}
</style>