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

<template>
    <div>
        <div class="bigBox">
            <div class="settingBox">
                <!-- 设置盒子顶部搜索 -->
                <div class="topSearch">
                    <div style="position: relative;">
                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件" />
                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
                            <Search />
                        </el-icon>
                    </div>
                    <div>
                        <el-icon style="font-size: 24px;" @click="createNewFile">
                            <Plus />
                        </el-icon>
                    </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" v-if="selectedBox !== index">{{ item.dirName }}</p>
                            <el-input v-else v-model="newName" @blur="nameChange(item, index)"></el-input>
                        </div>
                    </template>
                </div>
                <div>
                    <p>
                        <span style="margin-left: 5px;">{{ useSpace ? useSpace + 'G' : '未能找到已使用空间' }}/{{ allSpace ?
                            allSpace
                            * 1024 + 'G' : '未能找到总空间' }}</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">
                <!-- 功能盒子  -->
                <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;">
                                    <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" v-if="editOnline">
                        <!-- 左侧 -->
                        <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="">
                                <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 v-if="editOnline">
                    <!-- 文件夹 -->
                    <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 mouseCli">
                                        <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;">></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 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>
                <FileEdit v-else></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="Tips" width="30%">
                    <el-form :model="boserForm" label-width="120px">
                        <!-- <el-form-item label="空间id">
                            <el-input v-model="boserForm.spaceId" />
                        </el-form-item> -->
                        <!-- <el-form-item label="目录类型">
                            <el-input v-model="boserForm.dirType" />
                        </el-form-item> -->
                        <!-- <el-form-item label="目录权限">
                            <el-input v-model="boserForm.dirPower" />
                        </el-form-item> -->
                        <el-form-item label="目录名称">
                            <el-input v-model="boserForm.dirName" />
                        </el-form-item>
                        <!-- <el-form-item label="父目录id">
                            <el-input v-model="boserForm.parentId" />
                        </el-form-item> -->
                        <!-- <el-form-item label="备注">
                            <el-input v-model="boserForm.remark" />
                        </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-input v-model="fileForm.spaceType" />
                        </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.spaceCap" />
                        </el-form-item>
                        <el-form-item label="已使用空间">
                            <el-input v-model="fileForm.usedCap" />
                        </el-form-item>
                        <el-form-item label="剩余空间">
                            <el-input v-model="fileForm.freeCap" />
                        </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>
    <ImgPreview  :previewData="previewData" :showPreview="showPreview" @closeImgPreview="closeImgPreview"></ImgPreview>
        </div>
    </div>
    <!-- 图片预览 -->
</template>

<script>
import { ref, toRaw } from 'vue'
import myfile from '../../api/myfile/myfile'
import space from '../../api/space/space'
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 fileCount from '../../api/fileCount/fileCount'
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";
export default {
    setup() {
        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 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("")
        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 copyParentId = ref("")//文件夹
        let allBag = ref("")//穿梭狂内搜索
        let needBag = ref("")
        let sortNum = ref(0)
        let boserForm = ref({
            spaceId: "",//空间id
            dirName: "",
            dirPower: "",
            dirType: "",
            parentId: "",
            remark: ""//备注
        })
        let fileForm = ref({
            spaceType: '',
            spaceName: "",
            spaceCap: "",
            usedCap: "",
            freeCap: "",
            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.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.share,
                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([])
        const showPreview = ref(false)//控制图片预览组件显示
        const previewData = ref()//需要预览的文件的数据
        // 获取所有文件
        function getAll() {
            myfile.getAllFileMenu({ dirId: folderId.value }).then(res => {
                if (res.code === 200) {
                    fileList.value = res.rows
                }
            })
        }
        // 获取用户树
        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 getAllText() {
            documents.getALLdocument({ spaceId: directoryId.value }).then(res => {
                folderList.value = res.data
                fileMenu.value = res.data
            })
        }
        // 获取所有文件夹
        function getAllFolder() {
            if (copyParentId.value === '') {
                copyParentId.value = 0
                documents.getALLdocument({ parentId: copyParentId.value - 0 }).then(res => {
                    folderList.value = res.data
                })
            } else {
                documents.getALLdocument({ parentId: copyParentId.value - 0 }).then(res => {
                    folderList.value = res.data
                })
            }
        }
        function changeFile(row, num) {
            copyParentId.value = row.parentId
            getAllFolder()
            this.selectedIndex = num
            const newItem = {
                name: row.spaceName,
                choose: row.spaceId
            };
            // 检查 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) {
            console.log('row = ',toRaw(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
            } 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: "删除成功"
                        })
                        getAll()
                    }
                })
            }
            if (row.name === '复制') {
                myfile.fileCopy({ dirId: copyDirId.value, docId: clickRowId.value, spaceId: copySpaceId.value }).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: "复制成功",
                            type: "success"
                        })
                    }
                })
            }
            if (row.name === '移动') {
                myfile.fileMove({ dirId: copyDirId.value, docId: clickRowId.value, spaceId: copySpaceId.value }).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: "移动成功",
                            type: "success"
                        })
                    }
                })
            }
            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
            }
            if (row.name === '历史版本') {
                console.log('row=', toRaw(row));
                console.log('copyFileId',copyFileId.value);//文件id
                showPreview.value = true
                const res = await preview(copyFileId.value)
                previewData.value = URL.createObjectURL(res)
                console.log('res',res);
            }
        }
        function chooseSet1() {
            transferModal.value = true
            anyP.value = false
        }
        function getSpace() {

        }

        function createNewMenu() {
            addBoser.value = true
        }
        // 新增文件夹
        function sureAddBoser() {
            documents.addDocument({
                "dirName": boserForm.value.dirName,
                // "dirRole": boserForm.value.dirPower,
                // "dirType": boserForm.value.dirType,
                "parentId": copyParentId.value-0,
                // "remark": boserForm.value.remark,
                "spaceId": directoryId.value,
            }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                    })
                }
                addBoser.value = false
                getAllText()
            })
        }

        function createNewFile() {
            addFile.value = true
        }
        // 确定新增中栏
        function sureAddFile() {
            fileSpace.addFileSpace(
                {
                    "spaceName": fileForm.value.spaceName,
                    "spaceType": fileForm.value.spaceType,
                    "spaceCap": fileForm.value.spaceCap - 0,//空间容量
                    "usedCap": fileForm.value.usedCap - 0,//已用空间
                    "freeCap": fileForm.value.freeCap - 0,//剩余空间
                    "remark": fileForm.value.remark,//备注
                }
            ).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "新增成功",
                        type: "success"
                    })
                    getAllMiddle()
                    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 = 0; i <= fileArr.value.length; i++) {
                    myfile.uploadFile({
                        spaceId: 1,
                        dirId: 1,
                        file: fileArr.value[i]
                    }).then(res => {
                        if (res.code === 200) {
                            ElMessage({
                                message: "上传文件成功",
                                type: "success"
                            })
                            getAll()
                            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
            selectedBox.value = index
        }
        // 重命名失焦事件
        function nameChange(row, index) {
            document.editDocument({
                "spaceId": row.spaceId,
                "spaceName": newName.value,
            }).then(res => {
                if (res.code === 200) {
                    getAllFolder()
                    selectedBox.value = -1
                    ElMessage({
                        message: '重命名成功',
                        type: "success"
                    })
                }
            })
        }
        function getMenu(row, num) {
            if (row.name === '删除') {
                // 文件夹删除
                documents.delDocument(folderId.value).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: "删除成功",
                            type: "success"
                        })
                        getAllText()
                    } else {
                        ElMessage({
                            message: "删除失败，目录应不为空",
                            type: "error"
                        })
                    }
                })
                myfile.delMenu(fileId.value).then(res => {
                    if (res.code === 200) {
                        ElMessage({
                            message: "删除成功",
                            type: "success"
                        })
                        getAll()
                    }
                })
            }
        }
        function delName(row, num) {
            fileSpace.delFileSpace(row.spaceId).then(res => {
                if (res.code === 200) {
                    getAllMiddle()
                    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) {
            folderId.value = row.dirId
            getAll()
        }
        // 确认文件重命名
        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
                    getAll()
                }
            })
        }
        // 分享穿梭框
        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, needTagData.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)
        }
        // 确认收藏
        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 (this.directoryId === '') {
                this.directoryId = 0
                this.getAllText()
            }
            if (this.folderId === '') {
                this.folderId = 0
                this.getAll()
            }
        }
        //关闭图片预览事件
        const closeImgPreview = ()=>{
            // console.log('close');
            showPreview.value = false
        }
        return {
            allBag,
            folderList,//文件夹的数据
            fileList,//文件夹的数据
            getAll,//拿到数据的方法
            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,
            getSpace,//获取内存空间
            fileMenu,
            addBoser,
            boserForm,
            createNewMenu,
            sureAddBoser,
            // delBoser,
            getAllText,
            clickRowId,
            addFile,
            createNewFile,
            fileForm,
            sureAddFile,
            // fileUpload,
            getImage,//筛选文件类型
            handleSelectionChange,
            handleSelectionChange1,
            selectedBox,//重命名相关
            restName,//重命名相关
            newName,//重命名相关
            nameChange,
            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,
            getAllFolder,
            showPreview,//控制图片预览
            closeImgPreview,//关闭预览事件
            previewData,//预览文件数据
        }
    },
    created() {
        this.getAll();
        this.getSpace()
        this.getAllText()
        // this.getAllMiddle()
        this.getAllUser()
        this.getAllCollect()
        this.isId()
        this.getAllFolder()
    },
    watch: {
    },
    components: {
        BreadMenu,
        FileEdit,
        ImgPreview
    },
}
</script>

<style scoped>
p {
    margin: 0;
    padding: 0;
}

.bigBox {
    display: flex;
    justify-content: flex-start;
}

.settingBox {
    width: 22vw;
    height: 100%;
    border: 2px solid black;
    border-radius: 4px;
    /* margin: 5px 5px; */
    margin-right: 15px;
    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: 70vw;
    height: 43rem;
    /* margin: 5px 5px; */
    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;
    height: auto;
    position: absolute;
    top: -70px;
    left: 300px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 4px;
    z-index: 2;
}

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

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

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