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

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

                                </el-table>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <!-- 文件 -->
                    <div class="fileTable">
                        <el-collapse v-model="files" accordion class="collapse" style="height: 200px;">
                            <el-collapse-item title="文件" name="2" class="">
                                <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick"
                                    @selection-change="handleSelectionChange">
                                    <el-table-column type="selection" width="55" />
                                    <el-table-column label="名称" width="200">
                                        <template #default="scope">
                                            <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                                <el-icon v-if="collectImg">
                                                    <Star />
                                                </el-icon>
                                                <img v-else src="../../assets/images/yellowstar.png" alt="">
                                                <img :src="getImage(scope.row.fileType)" alt="">
                                                {{ scope.row.fileName }}
                                            </span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="createTime" label="时间" width="180" />
                                    <el-table-column prop="fileType" label="类型" />
                                    <el-table-column label="大小">
                                        <template #default="scope">
                                            <span>
                                                {{ scope.row.fileSize }}KB
                                            </span>
                                        </template>
                                    </el-table-column>

                                </el-table>
                                <div class="setCli" v-if="cliCC">
                                    <template v-for="(item, index) in filterMouseCli()">
                                        <p @click="chooseSet(item, index)" class="chooseSet">
                                            <img :src="item.img" alt="">
                                            {{ item.name }}
                                            <span v-if="item.name == '在线编辑' || item.name == '协作' ? true : false"
                                                style="color: #7084B4;float: right;position: relative;" class="arrow">></span>
                                        </p>
                                </template>
                                <div class="setCli1" v-if="anyP">
                                    <p @click="chooseSet1()" class="chooseSet">
                                        <img src="../../assets/images/user.png" alt="">
                                        选择人员
                                    </p>
                                    <p class="chooseSet">
                                        <img src="../../assets/images/archiveTray.png" alt="">
                                        归档
                                    </p>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <!-- 穿梭框 -->
                <div>
                    <el-dialog v-model="transferModal" title="分享" width="40%">
                        <!-- 穿梭大盒子 -->
                        <div class="transBox">
                            <!-- 总数据包 -->
                            <div class="allBag">
                                <el-input style="width: 220px;margin-left: 18px;margin-top:5px" v-model="allBag"
                                    placeholder="搜索"></el-input>
                                <div class="allLog">
                                    <el-tree :data="allTreeData" :props="allTreeProps" show-checkbox node-key="id"
                                        :default-expanded-keys="openTree" @check-change="allTreeChange" />
                                </div>
                            </div>
                            <!-- 需要的数据包 -->
                            <div class="needBag">
                                <!-- <el-input style="width: 220px;margin-left: 18px;margin-top:5px" v-model="needBag"
                                    placeholder="搜索"></el-input> -->
                                <div style="border-bottom: 1px solid gray;">
                                    <span>已选择{{ chooseTagData.length }}人</span>
                                    <span style="color: red;font-size: 14px;float: right;">清空</span>
                                </div>
                                <div class="needLog">
                                    <el-tag v-for="(item, index) in chooseTagData" :key="index" class="tagtag" closable
                                        @close="handleClose(item)">
                                        {{ item.userName }}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="transferModal = false">取消</el-button>
                                <el-button type="primary" @click="sureShare">
                                    确定
                                </el-button>
                            </span>
                        </template>
                    </el-dialog>
                </div>
            </div>
            <div v-else>
                <div>
                    <el-button @click="editOnline = true">返回</el-button>
                </div>
                <FileEdit :docId="clickRowId" :copyRow="copyRow"></FileEdit>
            </div>
            <!-- 扩容弹窗 -->
            <div>
                <el-dialog v-model="askTo" title="扩容申请" width="30%">
                    <el-form>
                        <el-form-item label="新容量">
                            <el-input-number v-model="askNum" :min="1" :max="10" />
                        </el-form-item>
                        <el-form-item label="申请理由">
                            <el-input v-model="askTalk" maxlength="150" placeholder="请输入申请理由" show-word-limit
                                type="textarea" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="askTo = false">取消</el-button>
                            <el-button type="primary" @click="sureAsk">
                                确定
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 新增文件夹弹窗 -->
            <div>
                <el-dialog v-model="addBoser" title="新建文件夹" width="30%">
                    <el-form :model="boserForm" label-width="120px">
                        <el-form-item label="目录名称">
                            <el-input v-model="boserForm.dirName" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="addBoser = false">取消</el-button>
                            <el-button type="primary" @click="sureAddBoser">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 废弃的顶层目录新增 -->
            <div>
                <el-dialog v-model="addFile" title="Tips" width="30%">
                    <el-form :model="fileForm" label-width="120px">
                        <el-form-item label="空间类型">
                            <el-select v-model="spaceValue" placeholder="请选择空间类型">
                                <el-option v-for="(item, index) in spaceSelect" :key="item.value" :label="item.label"
                                    :value="item.value" :disabled="item.disabled" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="空间名称">
                            <el-input v-model="fileForm.spaceName" />
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="fileForm.remark" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="addFile = false">取消</el-button>
                            <el-button type="primary" @click="sureAddFile">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 文件上传 -->
            <div>
                <el-dialog v-model="uploadModal" title="文件上传" width="30%">
                    <el-upload class="upload-demo" drag :http-request="onSuccess" multiple>
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            拖入或<em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                请选择或拖入文件
                            </div>
                        </template>
                    </el-upload>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="uploadModal = false">取消</el-button>
                            <el-button type="primary" @click="sureUpload">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 文件重命名 -->
            <div>
                <el-dialog v-model="fileNameChange" title="重命名" width="30%">
                    <el-form :model="nameForm" label-width="120px">
                        <el-form-item label="新名字">
                            <el-input v-model="nameForm.name"></el-input>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="fileNameChange = false">取消</el-button>
                            <el-button type="primary" @click="sureChangeName">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 文件收藏 -->
            <div>
                <el-dialog v-model="fileCollect" title="重命名" width="30%">
                    <el-form :model="collectForm" label-width="120px">
                        <el-form-item label="名称">
                            <el-input v-model="collectForm.name" />
                        </el-form-item>
                        <el-form-item label="收藏标签">
                            <div class="newTag" v-if="tagCollect">
                                <el-input v-model="newTag" placeholder="请输入新标签" @blur="tagBlur"></el-input>
                            </div>
                            <el-select v-model="collectForm.folders" class="m-2" placeholder="请选择" size="large"
                                @change="collectChange">
                                <el-option v-for="(item, index) in collectList" :key="item.labelId" :label="item.label"
                                    :value="item.labelId" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-button @click="createTag">新建标签</el-button>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="fileCollect = false">取消</el-button>
                            <el-button type="primary" @click="sureCollect">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 中栏重命名 -->
            <div>
                <el-dialog v-model="folderName" title="重命名" width="30%">
                    <el-input v-model="newName"></el-input>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="folderName = false">取消</el-button>
                            <el-button type="primary" @click="sureFolderName">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
                @closeImgPreview="closeImgPreview"></ImgPreview>
            <div>
                <FileTree v-if="fileTrees" :fileTrees="fileTrees" :newSpaceId="newSpaceId" :fileId="clickRowId"
                    @getChildren="getChildren" :copyOrMove="copyOrMove"></FileTree>
            </div>
        </div>
    </div>
    <!-- 图片预览 -->
    <!-- 历史版本 -->
    <historyList
    :openFile="openForwardFile"
    :docId="clickRowId"
    :name="nameForm.name"
    :copyRow="copyRow"
    @close="openForwardFile = false"
    :fileUserTreeData="fileUserTreeData.data"
  ></historyList>
  <!-- 历史版本 -->
    <FileTreeChoice :openFile="openForwardFile" :docId="clickRowId.toString()" @close="openForwardFile = false"
        :fileUserTreeData="fileUserTreeData.data" @forwardChangeMsg="forwardChangeMsg"></FileTreeChoice>
    <!-- 历史版本 -->
</template>

<script>
import { ref, toRaw, onMounted } from 'vue'
import myfile from '../../api/myfile/myfile'
import documents from '../../api/document/document'
import fileSpace from '../../api/filespace/fileSpace'
import userTree from '../../api/user/userTree'
import fileShare from '../../api/fileShare/fileShare'
import collect from '../../api/collect/collect'
import FileTree from './components/FileTree.vue'
import BreadMenu from './components/BreadMenu.vue'
import FileEdit from './components/fileedit.vue'
import ImgFile from "./jsComponents/ImgFile"
import { Search } from '@element-plus/icons-vue'
import blueLeft from '../../assets/images/blueLeft.png'
import grayRight from "../../assets/images/grayRight.png"
import sort from '../../assets/images/sort.png'
import squre from '../../assets/images/squre.png'
import { ElMessage } from 'element-plus'
import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
import { preview } from "@/api/common/common.js";
import historyList from "@/components/historyList/index.vue"; //选择文件发送的列表，历史版本
import { listVersion } from "@/api/biz/version";
import useUserStore from "@/store/modules/user";
import { useRouter, useRoute } from "vue-router";
export default {
    setup() {
        let fileTrees = ref(false)
        let editOnline = ref(true)
        let searchFire = ref('')
        let selectedIndex = ref(0)
        let folder = ref(['1'])
        let files = ref(['2'])
        let folderList = ref([])
        let askTo = ref(false)
        let folderName = ref(false)
        let askNum = ref(1)
        let askTalk = ref('')
        let newTag = ref('')
        let cliCC = ref(false)
        let transferModal = ref(false)
        let addBoser = ref(false)
        let addFile = ref(false)
        let anyP = ref(false)
        let uploadModal = ref(false)
        let collectImg = ref(true)
        let fileCollect = ref(false)
        let tagCollect = ref(false)//添加收藏标签时显示
        let selectedBox = ref(-1)
        let newName = ref('')
        let clickRowId = ref(0)
        let trandata = ref()
        let folderId = ref('')
        let fileId = ref('')
        let tranvalue = ref([])
        let useSpace = ref(0)
        let allSpace = ref(0)
        let fileArr = ref([])
        let copyDirId = ref(0)//需要操作的dirid
        let copySpaceId = ref(0)//需要操作的spaceid
        let copyDocId = ref(0)//需要操作的docid
        let copyFileId = ref(0)//需要操作的fileid
        let copyFileSize = ref(0)//需要操作的filesize
        let copyFileType = ref('')//需要操作的文件类型
        let copyFileName = ref("")//需要操作的文件名
        let directoryId = ref('')
        let impSpaceId = ref("")
        let impDirId = ref("")
        let impNum = ref(0)
        let copyParentId = ref("")//文件夹
        let allBag = ref("")//穿梭狂内搜索
        let needBag = ref("")
        let copyOrMove = ref(0)//0代表复制，1代表移动
        let sortNum = ref(0)
        const openForwardFile = ref(false)   //历史版本展示
        const fileUserTreeData = reactive({ data: {} });
        let boserForm = ref({
            spaceId: "",//空间id
            dirName: "",
            dirPower: "",
            dirType: "",
            parentId: "",
            remark: ""//备注
        })
        let fileForm = ref({
            spaceType: '',
            spaceName: "",
            remark: "",
        })
        let fileList = ref([
        ])
        let menuList = ref([
        ])
        let useMenu = ref([
            {
                img: ImgFile.copy,
                name: "复制"
            },
            {
                img: ImgFile.clipboard,
                name: "粘贴"
            },
            {
                img: ImgFile.share,
                name: "分享给"
            },
            {
                img: ImgFile.trash,
                name: "删除"
            },
        ])
        let arrorMenu = ref([
            {
                img: ImgFile.file,
                name: "文件"
            },
            {
                img: ImgFile.folder,
                name: '文件夹'
            },
            {
                img: ImgFile.image,
                name: "图片"
            },
            {
                img: ImgFile.filmSlate,
                name: "视频"
            },
            {
                img: ImgFile.musicNotes,
                name: "音频"
            }
        ])
        let mouseCli = ref([
            {
                img: ImgFile.previewIcon,
                name: "预览"
            },
            {
                img: ImgFile.addolder,
                name: "移动",
            },
            {
                img: ImgFile.copy,
                name: "复制",
            },
            // {
            //     img: ImgFile.clipboard,
            //     name: "粘贴"
            // },
            {
                img: ImgFile.collect,
                name: "收藏"
            },
            {
                img: ImgFile.downLoad,
                name: "下载"
            },
            {
                img: ImgFile.textbox,
                name: "重命名"
            },
            // {
            //     img: ImgFile.goon,
            //     name: "发送"
            // },
            {
                img: ImgFile.share,
                name: "分享"
            },
            {
                img: ImgFile.notePencil,
                name: "在线编辑"
            },
            {
                img: ImgFile.togger,
                name: "协作"
            },
            {
                img: ImgFile.icc,
                name: "文字识别"
            },
            {
                img: ImgFile.history,
                name: "历史版本"
            },
            {
                img: ImgFile.trash,
                name: "删除"
            }
        ])
        let nameForm = ref({
            name: ""
        })
        let allTreeProps = {
            label: 'label',
            children: 'children',
            disabled: false,
            id: "id"
        }
        let collectForm = ref({
            name: "",
            folders: "",
        })
        let allTreeData = ref([])
        let needTagData = ref([])
        let chooseTagData = ref([])
        let openTree = ref([])
        let fileNameChange = ref(false)
        let fileMenu = ref([])
        let collectList = ref([])
        let copyRow = ref({})
        let spaceValue = ref("")
        let newDirId = ref('')
        let newSpaceId = ref('')
        let spaceSelect = ref([
            {
                label: "个人空间",
                value: 3,
            },
            {
                label: "部门空间",
                value: 2,
                disabled: true
            },
            {
                label: "公共空间",
                value: 1,
                disabled: true
            },

        ])
        const showPreview = ref(false)//控制图片预览组件显示
        const previewData = ref()//需要预览的文件的数据
        const router = useRouter(); //注册路由
        // 获取用户树
        function getAllUser() {
            userTree.getUserTree({}).then(res => {
                allTreeData.value = [res]
                userTree.getUserTree({}).then(res => {
                    allTreeData.value = [res];
                    // 递归函数来获取所有节点的 id
                    function getAllNodeIds(nodes) {
                        nodes.forEach(node => {
                            openTree.value.push(node.id);
                            if (node.children && node.children.length > 0) {
                                getAllNodeIds(node.children);
                            }
                        });
                    }
                    // 调用递归函数获取所有节点的 id
                    getAllNodeIds(allTreeData.value);
                });
            })
        }
        function getAllCollect() {
            collect.getCollect({}).then(res => {
                const maxAge = res.rows.reduce((max, obj) => (obj.orderNum > max ? obj.orderNum : max), res.rows[0].orderNum)
                sortNum.value = maxAge
                collectList.value = res.rows.map(item => {
                    return {
                        label: item.labelName,
                        labelId: item.labelId,
                        order: item.orderNum
                    }
                })
            })
        }
        // 获取文件夹，中栏，文件
        function getAllTop() {
            documents.getTop(3).then(res => {
                let userMe = [res]
                impDirId.value = userMe[0].dirId//固定
                impSpaceId.value = userMe[0].spaceId//固定
                newSpaceId.value = userMe[0].spaceId//变化
                newDirId.value = userMe[0].dirId//变化
                documents.getALLdocument({ parentId: userMe[0].dirId - 0, spaceId: userMe[0].spaceId }).then(res => {
                    fileMenu.value = res.data
                    folderList.value = res.data
                })
                myfile.getById(userMe[0].dirId - 0).then(res => {
                    if (res.code === 200) {
                        fileList.value = res.rows
                    }
                })
            })
        }
        function changeFile(row, num) {
            copyParentId.value = row.parentId
            newDirId.value = row.dirId
            newSpaceId.value = row.spaceId
            documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
                folderList.value = res.data
                // if (res.code === 200) {
                if (res.data.length === 0) {
                    myfile.getById(newDirId.value)
                        .then(res => {
                            if (res.code === 200) {
                                fileList.value = res.rows;
                            }
                        })
                        .catch(error => {
                            console.error("myfile.getAllFileMenu 调用失败:", error);
                        });
                } else {
                    myfile.getById(res.data[0].dirId - 0)
                        .then(res => {
                            if (res.code === 200) {
                                fileList.value = res.rows;
                            }
                        })
                        .catch(error => {
                            console.error("myfile.getAllFileMenu 调用失败:", error);
                        });
                }
                // }
            })
            this.selectedIndex = num
            const newItem = {
                name: row.dirName,
                choose: row.dirName
            };
            // 检查 newItem 是否已存在于 menuList 中
            const isItemExist = menuList.value.some(item => item.choose === newItem.choose);
            // 如果不存在，则添加它
            if (!isItemExist) {
                menuList.value.push(newItem);
            }
            useSpace.value = row.usedCap
            allSpace.value = row.spaceCap
        }

        // tableMenu切换
        function tableChange(row, num) {
            this.selectedIndex = num
        }
        // x图标事件
        function shotdown(row) {
            this.menuList = this.menuList.filter(item => item.name !== row.name)
        }
        // 文件名表格每一行点击事件
        function handleRowClick(row) {
            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
            if (cliCC.value === true) {
                cliCC.value = false
            } else {
                cliCC.value = true
            }
            fileShare.getSharePeople(row.docId).then(res => {
                console.log(res, 'res');
            }).catch(err => {
                console.log(err, 'err');
            })
        }
        // 申请扩容
        function askApply() {
            this.askTo = true
        }
        function sureAsk() {
            this.askTo = false
        }
        //mouse弹框
        async function chooseSet(row, num) {
            if (row.name == '在线编辑' || row.name == '协作') {
                cliCC.value = true
            } else {
                cliCC.value = false
            }
            if (row.name == '分享') {
                transferModal.value = true
                fileShare.getSharePeople(clickRowId.value).then(res => {
                    // 去除数组内部的重复元素
                    const uniqueRes = Array.from(new Set(res.map(item => item.userName))).map(id => res.find(item => item.userName === id));
                    // 现在的 uniqueRes 数组不包含重复元素
                    chooseTagData.value = uniqueRes;
                })
            } else {
                transferModal.value = false
            }
            if (row.name == '协作') {
                anyP.value = true
            } else {
                anyP.value = false
            }
            if (row.name == '删除') {
                myfile.delMenu(clickRowId.value).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            type: "success",
                            message: "删除成功"
                        })
                        getAllTop()
                    }
                })
            }
            if (row.name === '复制') {
                copyOrMove.value = 0
                fileTrees.value = true
            }
            if (row.name === '移动') {
                copyOrMove.value = 1
                fileTrees.value = true
            }
            if (row.name === '重命名') {
                fileNameChange.value = true
            }
            if (row.name === "下载") {
                location.href = `${import.meta.env.VITE_APP_BASE_API}/api/download/${copyFileId.value}`;
            }
            if (row.name === '收藏') {
                collectForm.value.name = nameForm.value.name
                fileCollect.value = true
            }
            if (row.name === '在线编辑') {
                editOnline.value = false
                cliCC.value = false
            }
            if (row.name === '文字识别') {
                router.push({
                    path: '/identifyFont',
                    query:{
                        fileId:copyFileId.value,
                        fileType:copyFileType.value
                    }
                })
            }
            if (row.name === '预览') {
                // console.log('row=', toRaw(row));
                // console.log('copyFileId',copyFileId.value);//文件id
                // console.log('copyFileType',copyFileType.value);//文件type
                showPreview.value = true
                const res = await preview(copyFileId.value)
                previewData.value = URL.createObjectURL(res)
                // console.log('res',res);
            } else if (row.name === "历史版本") {
                const resHistory = await listVersion({ docId: clickRowId.value })
                fileUserTreeData.data = resHistory.rows;
                openForwardFile.value = true
            }
        }
        function chooseSet1() {
            transferModal.value = true
            anyP.value = false
        }
        function createNewMenu(num) {
            impNum.value = num
            addBoser.value = true
        }
        // 新建文件夹
        function sureAddBoser() {
            if (impNum.value === 1) {
                documents.addDocument(
                    {
                        "dirName": boserForm.value.dirName,
                        "parentId": impDirId.value - 0,
                        "spaceId": impSpaceId.value - 0,
                    }
                ).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: '添加一级目录成功',
                            type: 'success',
                        })
                    }
                    addBoser.value = false
                    getAllTop()
                })
            } else {
                documents.addDocument(
                    {
                        "dirName": boserForm.value.dirName,
                        "parentId": newDirId.value - 0,
                        "spaceId": newSpaceId.value - 0,
                    }
                ).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                    }
                    addBoser.value = false
                    getAllTop()
                })
            }
        }

        function createNewFile() {
            addFile.value = true
        }
        // 确定新增中栏
        function sureAddFile() {
            fileSpace.addFileSpace(
                {
                    "spaceName": fileForm.value.spaceName,
                    "spaceType": fileForm.value.spaceType,
                    "remark": fileForm.value.remark,//备注
                }
            ).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "新增成功",
                        type: "success"
                    })
                    getAllTop()
                    addFile.value = false
                } else {
                    ElMessage({
                        message: "请检查错误",
                        type: "warning"
                    })
                }
            })
        }
        function arrowClick(row, num) {
            if (row.name === '文件') {
                uploadModal.value = true
            } else {
                uploadModal.value = false
            }
        }
        // 确认上传
        function sureUpload() {
            if (fileArr.value.length > 0) {
                for (var i = 1; i <= fileArr.value.length; i++) {
                    myfile.uploadFile({
                        spaceId: newSpaceId.value - 0,
                        dirId: newDirId.value - 0,
                        file: fileArr.value[i - 1]
                    }).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "上传文件成功",
                                type: "success"
                            })
                            getAllTop()
                            uploadModal.value = false
                            fileArr.value = []
                        }
                    })
                }
            }
        }
        function onSuccess(files, val) {
            fileArr.value.push(files.file)
        }
        // 筛选后缀图片
        function getImage(file) {
            if (file === '.txt') {
                return ImgFile.txt
            } else if (file === '.xlxs' || file === '.docx') {
                return ImgFile.xlxs
            } else if (file === '.pptx') {
                return ImgFile.pptx
            } else if (file === '.word') {
                return ImgFile.word
            } else if (file === '.pdf') {
                return ImgFile.pdf
            }
        }
        // 表格多选框
        function handleSelectionChange(val) {
            if (val.length > 1) {
                // 如果选择了多项，只保留最后一项
                val.shift();
            }
            if (val.length === 1) {
                fileId.value = val[0].docId
            }
        }
        // 文件夹
        function handleSelectionChange1(val) {
            if (val.length > 1) {
                // 如果选择了多项，只保留最后一项
                val.shift();
            }
            if (val.length === 1) {
                folderId.value = val[0].dirId
            }
        }
        // 重命名
        function restName(row, index) {
            newName.value = row.dirName
            folderName.value = true
            selectedBox.value = row.dirId
        }
        function getMenu(row, num) {
            if (row.name === '删除') {
                // 文件夹删除
                documents.delDocument(folderId.value).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: "删除成功",
                            type: "success"
                        })
                        getAllTop()
                    } else {
                        ElMessage({
                            message: "删除失败，目录应不为空",
                            type: "error"
                        })
                    }
                })
                myfile.delMenu(fileId.value).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: "删除成功",
                            type: "success"
                        })
                        getAllTop()
                    }
                })
            }
        }
        function delName(row, num) {
            documents.delDocument(row.dirId).then(res => {
                if (res.code === 200) {
                    getAllTop()
                    ElMessage({
                        message: "删除成功",
                        type: "success"
                    })
                }
            })
        }
        // 计算百分比
        function percent() {
            let numP = 0
            if (useSpace.value) {
                numP = parseInt(useSpace.value / (allSpace.value * 1024) * 100)
            }
            return numP
        }
        // 文件夹每行点击事件
        function folderClick(row, list) {
            // 上一级dirId就是下一级的parentId
            newDirId.value = row.dirId
            newSpaceId.value = row.spaceId
            documents.getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 }).then(res => {
                folderList.value = res.data
                if (res.data.length === 0) {
                    myfile.getById(newDirId.value).then(res => {
                        if (res.code === 200) {
                            fileList.value = res.rows
                        }
                    })
                } else {
                    myfile.getById(res.data[0].dirId - 0).then(res => {
                        if (res.code === 200) {
                            fileList.value = res.rows
                        }
                    })
                }
            })
        }
        // 确认文件重命名
        function sureChangeName() {
            myfile.editNewMenu({
                dirId: copyDirId.value - 0,
                docId: clickRowId.value - 0,
                fileId: copyFileId.value,
                fileName: nameForm.value.name,
                fileSize: copyFileSize.value - 0,
                fileType: copyFileType.value,
                remark: '',
                spaceId: copySpaceId.value - 0,
            }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "重命名成功",
                        type: "success"
                    })
                    fileNameChange.value = false
                    getAllTop()
                }
            })
        }
        // 分享穿梭框
        function allTreeChange(e) {
            const id = e.id;
            const label = e.label;
            // 查找是否已经存在相同 userId 的数据的索引
            const existingIndex = needTagData.value.findIndex(item => item.userId === id);
            if (existingIndex !== -1) {
                // 如果已存在，删除该项
                needTagData.value.splice(existingIndex, 1);
            } else {
                // 选择操作，将数据添加到 needTagData 中
                needTagData.value.push({ userId: id, userName: label });
            }
            chooseTagData.value = needTagData.value;
        }
        // 确认分享
        function sureShare() {
            fileShare.addSharePeople(clickRowId.value, chooseTagData.value).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "分享成功",
                        type: "success"
                    })
                    transferModal.value = false
                }
            })

        }
        function handleClose(tag) {
            chooseTagData.value.splice(chooseTagData.value.indexOf(tag), 1)
            console.log(chooseTagData.value, 'move');
        }
        // 确认收藏
        function sureCollect() {
            collect.addCollect({
                "docInfo": {
                    "fileId": copyFileId.value - 0,
                    "labelId": collectForm.value.folders - 0,
                },
            }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "收藏成功",
                        type: "success"
                    })
                }
            })
            fileCollect.value = false
        }
        function collectChange(e) {
            collectForm.value.folders = e
        }
        // 新建收藏标签
        function createTag() {
            newTag.value = ''
            tagCollect.value = true
        }
        function tagBlur() {
            collect.addNewTag({ labelName: newTag.value, orderNum: sortNum.value + 1 }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "新建标签成功",
                        type: "success"
                    })
                    getAllCollect()
                }
            })
            tagCollect.value = false
        }
        // 判断id
        function isId() {
            if (directoryId.value === '') {
                directoryId.value = 0
                getAllTop()
            }
            if (folderId.value === '') {
                folderId.value = 0
                getAllTop()
            }
        }
        // 中栏重命名
        function sureFolderName() {
            documents.editDocument({
                dirId: selectedBox.value - 0,
                name: newName.value,
            }).then(res => {
                if (res.code === 200) {
                    getAllTop()
                    folderName.value = false
                    ElMessage({
                        message: '重命名成功',
                        type: "success"
                    })
                }
            })
        }
        //关闭图片预览事件
        const closeImgPreview = () => {
            // console.log('close');
            showPreview.value = false
        }
        function getChildren(data) {
            fileTrees.value = data

        }
        //历史版本
        // 点击转存
        const forwardTreeData = reactive({ data: {} });
        function forwardChangeMsg(val) {}

        //对mouseCli数组进行筛选，实现菜单的区分显示
        const filterMouseCli = ()=>{
            const typeArr = ['.png','.jpg','.jpeg','.JPG','.mp3','.mp4']
            let arr = []
            if(!typeArr.includes(copyFileType.value)){
                arr = mouseCli.value.filter(item=>item.name !== "预览")
            }else{
                arr = mouseCli.value.filter(item=>item.name !== "在线编辑" && item.name !== "协作" && item.name !== "历史版本")
            }
            return arr
        }        
        onMounted(() => {
            getAllTop()
            getAllCollect()
            getAllUser()
            getAllCollect()
        })
        return {
            allBag,
            folderList,//文件夹的数据
            fileList,//文件夹的数据
            searchFire,//搜索文件的model
            changeFile,//切换右侧视图的file
            menuList,//右侧切换
            tableChange,//改变class点击事件
            selectedIndex,//当前选中下标
            shotdown,//筛选出当前数据
            useMenu,
            arrorMenu,
            blueLeft,//返回
            grayRight,//前进
            squre,//视图切换
            sort,//排序
            folder,
            files,
            handleRowClick,
            askApply,//申请扩容
            askTo,
            sureAsk,
            askNum,
            askTalk,
            cliCC,
            mouseCli,//文件点击弹框
            chooseSet,
            transferModal,
            trandata,
            tranvalue,
            anyP,
            chooseSet1,
            fileMenu,
            addBoser,
            boserForm,
            createNewMenu,
            sureAddBoser,
            // delBoser,
            clickRowId,
            addFile,
            createNewFile,
            fileForm,
            sureAddFile,
            // fileUpload,
            getImage,//筛选文件类型
            handleSelectionChange,
            handleSelectionChange1,
            selectedBox,//重命名相关
            restName,//重命名相关
            newName,//重命名相关
            getMenu,
            folderId,
            fileId,
            // getAllMiddle,//拿到所有空间信息
            delName,//删除空间信息
            useSpace,//使用空间
            allSpace,//总空间
            percent,
            arrowClick,
            uploadModal,
            sureUpload,
            onSuccess,
            fileArr,
            directoryId,
            folderClick,
            copyDirId,//复制移动需要的↓
            copyDocId,
            copySpaceId,
            copyFileId,
            copyFileName,
            copyFileSize,
            copyFileType,
            sureChangeName,//文件重命名
            fileNameChange,//文件重命名模态框
            nameForm,
            getAllUser,//获取所有用户
            allTreeProps,//树形控件需要显示键名
            allTreeData,//树形控件数据
            allTreeChange,
            sureShare,
            openTree,
            chooseTagData,
            handleClose,
            collectImg,//收藏小星星
            fileCollect,
            collectForm,
            sureCollect,
            getAllCollect,//获取所有收藏文件夹
            collectList,//文件收藏表
            createTag,
            tagCollect,
            tagBlur,
            newTag,
            collectChange,
            sortNum,
            needBag,
            isId,
            editOnline,//在线编辑
            copyParentId,
            folderName,
            sureFolderName,
            copyRow,
            getAllTop,
            spaceValue,
            spaceSelect,
            newDirId,
            newSpaceId,
            showPreview,//控制图片预览
            closeImgPreview,//关闭预览事件
            previewData,//预览文件数据
            router,
            fileTrees,
            getChildren,//子传父
            copyOrMove,
            impDirId,
            impNum,
            impSpaceId,
            openForwardFile,//历史版本
            forwardTreeData,
            fileUserTreeData,
            filterMouseCli
        }

    },
    watch: {
    },
    components: {
        BreadMenu,
        FileEdit,
        ImgPreview,
        FileTree,
        historyList
    },
}

</script>

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

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

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

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

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

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

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

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

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

.mesBox {
    width: 72vw;
    /* height: calc(100% - 200px); */
    border-radius: 4px;
    background-color: white;
}

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

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

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

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

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

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

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

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

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

.fileTable {
    position: relative;
    height: 300px;
    /* overflow-y: auto; */
}

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

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

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

    // 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;
    background-color: #F5F7F9;
    /* color: white; */
}

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

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

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

.transBox {
    width: 550px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* border: 1px solid black; */
}

.allBag {
    width: 255px;
    height: 380px;
    border: 1px solid green;
}

.needBag {
    width: 255px;
    height: 380px;
    border: 1px solid green;
}

.allLog {
    width: 245px;
    height: 330px;
    margin: 5px auto;
    /* border: 1px solid red; */
    overflow-y: auto;
}

.needLog {
    width: 245px;
    height: 330px;
    margin: 5px auto;
    /* border: 1px solid red; */
    overflow-y: auto;
    text-align: center;
}

.tagtag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: start;
    width: 230px;
    margin: 0 auto;
}

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

:deep(.el-icon el-tag__close) {
    display: block;
}
</style>