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: 540px;align-content: flex-start;">
                    <!-- 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.spaceName }}</p>
                            <el-input v-else v-model="newName" @blur="nameChange(item, index)"></el-input>
                        </div>
                    </template>
                </div>
                <div>
                    <p>
                        <span style="margin-left: 10px;">{{ useSpace }}G/{{ allSpace * 1024 }}G</span>
                        <span style="margin-left: 10rem;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;">
                                <el-dropdown trigger="click">
                                    <span style="color: black;cursor: pointer;">上传
                                        <el-icon>
                                            <arrow-down />
                                        </el-icon>
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <!-- <el-dropdown-item @click="fileUpload">
                                            <img src="../../assets/images/file.png" alt="">
                                                <span id="uploadButton">上传</span>
                                                <input id="fileInput" type="file" style="display: none;">
                                            </el-dropdown-item> -->
                                            <template v-for="(item, index) in arrorMenu">
                                                <el-dropdown-item @click="arrowClick(item, index)">
                                                    <img :src="item.img" alt="">
                                                    <span>{{ item.name }}</span>
                                                </el-dropdown-item>
                                            </template>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </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="">
                                <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
                            </div>
                            <!-- 面包屑 -->
                            <div>
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item style="font-size: 12px;">homepage</el-breadcrumb-item>
                                    <el-breadcrumb-item style="font-size: 12px;">promotion management</el-breadcrumb-item>
                                    <el-breadcrumb-item style="font-size: 12px;">promotion detail</el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                        </div>
                        <!-- 右侧 -->
                        <div>
                            <img :src="sort" alt="">
                            <img :src="squre" alt="">
                        </div>
                    </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">
                                    <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="180">
                                        <template #default="scope">
                                            <span>
                                                <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="user" alt="">
                                            选择人员
                                        </p>
                                        <p class="chooseSet">
                                            <img :src="archiveTray" alt="">
                                            归档
                                        </p>
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <!-- 穿梭框 -->
                    <div>
                        <el-dialog v-model="transferModal" title="分享" width="40%">
                            <el-transfer v-model="tranvalue" filterable :filter-method="filterMethod"
                                filter-placeholder="State Abbreviations" :data="trandata" />
                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="transferModal = false">取消</el-button>
                                    <el-button type="primary" @click="transferSure">
                                        确定
                                    </el-button>
                                </span>
                            </template>
                        </el-dialog>
                    </div>
                </div>
            </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>
    </div>
</template>

<script>
import { ref } 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 { Search } from '@element-plus/icons-vue'
import copy from '../../assets/images/copy.png'
import clipboard from '../../assets/images/clipboard.png'
import share from '../../assets/images/share.png'
import trash from '../../assets/images/trash.png'
import file from '../../assets/images/file.png'
import folder from '../../assets/images/folder.png'
import image from '../../assets/images/image.png'
import filmSlate from '../../assets/images/filmSlate.png'
import musicNotes from '../../assets/images/musicNotes.png'
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 addolder from '../../assets/images/addolder.png'
import textbox from '../../assets/images/textbox.png'
import goon from '../../assets/images/goon.png'
import notePencil from '../../assets/images/notePencil.png'
import togger from '../../assets/images/togger.png'
import icc from '../../assets/images/icc.png'
import history from '../../assets/images/history.png'
import fileBox from '../../assets/images/fileBox.png'
import user from '../../assets/images/user.png'
import archiveTray from '../../assets/images/archiveTray.png'
import { ElMessage } from 'element-plus'
import txt from '../../assets/images/txt.png'
import pptx from '../../assets/images/pptx.png'
import word from '../../assets/images/word.png'
import pdf from '../../assets/images/pdf.png'
import xlxs from '../../assets/images/xlxs.png'
export default {
    setup() {
        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 cliCC = ref(false)
        let transferModal = ref(false)
        let addBoser = ref(false)
        let addFile = ref(false)
        let anyP = ref(false)
        let uploadModal = ref(false)
        let selectedBox = ref(-1)
        let newName = ref('')
        let clickRowId = ref("")
        let trandata = ref(generateData())
        let folderId = ref('')
        let fileId = ref('')
        let tranvalue = ref([])
        let useSpace = ref(0)
        let allSpace = ref(0)
        let fileArr = ref([])
        let boserForm = ref({
            spaceId: "",//空间id
            dirName: "",
            dirPower: "",
            dirType: "",
            parentId: "",
            remark: ""//备注
        })
        let fileForm = ref({
            spaceType: '',
            spaceName: "",
            spaceCap: "",
            usedCap: "",
            freeCap: "",
            remark: "",
        })
        let fileList = ref([
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-02',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-04',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
            {
                date: '2016-05-01',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
            },
        ])
        let menuList = ref([
        ])
        let useMenu = ref([
            {
                img: copy,
                name: "复制"
            },
            {
                img: clipboard,
                name: "粘贴"
            },
            {
                img: share,
                name: "分享给"
            },
            {
                img: trash,
                name: "删除"
            },
        ])
        let arrorMenu = ref([
            {
                img: file,
                name: "文件"
            },
            {
                img: folder,
                name: '文件夹'
            },
            {
                img: image,
                name: "图片"
            },
            {
                img: filmSlate,
                name: "视频"
            },
            {
                img: musicNotes,
                name: "音频"
            }
        ])
        let mouseCli = ref([
            {
                img: addolder,
                name: "移动",
            },
            {
                img: copy,
                name: "复制",
            },
            {
                img: clipboard,
                name: "粘贴"
            },
            {
                img: textbox,
                name: "重命名"
            },
            {
                img: goon,
                name: "发送"
            },
            {
                img: share,
                name: "分享"
            },
            {
                img: notePencil,
                name: "在线编辑"
            },
            {
                img: togger,
                name: "协作"
            },
            {
                img: icc,
                name: "文字识别"
            },
            {
                img: history,
                name: "历史版本"
            },
            {
                img: share,
                name: "删除"
            }
        ])
        let fileMenu = ref([])
        // 获取所有文件夹
        function getAll() {
            myfile.getAllFileMenu({}).then(res => {
                if (res.code === 200) {
                    fileList.value = res.rows
                }
            })
        }
        // 获取所有中栏
        function getAllMiddle() {
            fileSpace.getFileSpace({}).then(res => {
                fileMenu.value = res.rows
            })
        }
        function changeFile(row, num) {
            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);
            }
            console.log(row, 'asdasd');
            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) {
            clickRowId.value = row.docId
            if (cliCC.value === true) {
                cliCC.value = false
            } else {
                cliCC.value = true
            }
        }
        // 申请扩容
        function askApply() {
            this.askTo = true
        }
        function sureAsk() {
            this.askTo = false
        }
        //mouse弹框
        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()
                    }
                })
            }
        }
        function chooseSet1() {
            transferModal.value = true
            anyP.value = false
        }
        function generateData() {
            const data = []
            const states = [
                'California',
                'Illinois',
                'Maryland',
                'Texas',
                'Florida',
                'Colorado',
                'Connecticut ',
            ]
            const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
            states.forEach((city, index) => {
                data.push({
                    label: city,
                    key: index,
                    initial: initials[index],
                })
            })
            return data
        }
        function filterMethod(query, item) {
            return item.initial.toLowerCase().includes(query.toLowerCase())
        }
        function getSpace() {

        }

        function createNewMenu() {
            addBoser.value = true
        }
        // 新增中栏下方数据
        function sureAddBoser() {
            documents.addDocument({
                "dirName": boserForm.value.dirName,
                "dirRole": boserForm.value.dirPower,
                "dirType": boserForm.value.dirType,
                "parentId": boserForm.value.parentId,
                "remark": boserForm.value.remark,
                "spaceId": boserForm.value.spaceId,
            }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: '添加成功',
                        type: 'success',
                    })
                }
                addBoser.value = false
                getAllText()
            })
        }
        function getAllText() {
            documents.getALLdocument({}).then(res => {
                folderList.value = res.data
            })
        }
        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 fileUpload() {
        //     const fileInput = document.getElementById('fileInput');
        //     const uploadButton = document.getElementById('uploadButton');
        //     // 监听按钮点击事件
        //     uploadButton.addEventListener('click', function () {
        //         // 模拟点击文件上传输入框
        //         fileInput.click();
        //     });
        //     // 监听文件选择事件
        //     fileInput.addEventListener('change', function () {
        //         const files = fileInput.files[0]; // 获取选择的文件
        //         console.log(files, 'file');
        //         myfile.uploadFile({
        //             spaceId: 1,
        //             dirId: 1,
        //             file: files
        //         }).then(res => {
        //             console.log(res, '222');
        //             if (res.code === 200) {
        //                 ElMessage({
        //                     message: "上传文件成功",
        //                     type: "success"
        //                 })
        //                 getAll()
        //             }
        //         })
        //     })
        // }
        function arrowClick(row, num) {
            if (row.name === '文件') {
                uploadModal.value = true
            } else {
                uploadModal.value = false
            }
        }
        // 确认上传
        function sureUpload() {
            myfile.uploadFile({
                spaceId: 1,
                dirId: 1,
                file: fileArr.value
            }).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "上传文件成功",
                        type: "success"
                    })
                    getAll()
                    uploadModal.value = false
                }
            })
        }
        function onSuccess(file, val) {
            fileArr.value = file.file
        }
        // 筛选后缀图片
        function getImage(file) {
            if (file === '.txt') {
                return txt
            } else if (file === '.xlxs' || file === '.docx') {
                return xlxs
            } else if (file === '.pptx') {
                return pptx
            } else if (file === '.word') {
                return word
            } else if (file === '.pdf') {
                return 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].docIds
            }
        }
        // 重命名
        function restName(row, index) {
            newName.value = row.spaceName
            selectedBox.value = index
        }
        // 重命名失焦事件
        function nameChange(row, index) {
            fileSpace.editFileSpace({
                "spaceId": row.spaceId,
                "spaceName": newName.value,
            }).then(res => {
                if (res.code === 200) {
                    getAllMiddle()
                    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()
                    }
                })
                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
            }
        }
        return {
            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,
            addolder,//图片↓
            textbox,
            goon,
            notePencil,
            togger,
            icc,
            history,
            mouseCli,//文件点击弹框
            chooseSet,
            fileBox,
            transferModal,
            generateData,
            filterMethod,
            trandata,
            tranvalue,
            archiveTray,//协作图标
            user,//用户图标
            anyP,
            chooseSet1,
            getSpace,//获取内存空间
            fileMenu,
            addBoser,
            boserForm,
            createNewMenu,
            sureAddBoser,
            // delBoser,
            getAllText,
            clickRowId,
            addFile,
            createNewFile,
            fileForm,
            sureAddFile,
            // fileUpload,
            txt,
            pptx,
            xlxs,
            pdf,
            word,
            getImage,//筛选文件类型
            handleSelectionChange,
            handleSelectionChange1,
            selectedBox,//重命名相关
            restName,//重命名相关
            newName,//重命名相关
            nameChange,
            getMenu,
            folderId,
            fileId,
            getAllMiddle,//拿到所有空间信息
            delName,//删除空间信息
            useSpace,//使用空间
            allSpace,//总空间
            percent,
            arrowClick,
            uploadModal,
            sureUpload,
            onSuccess,
            fileArr,
        }
    },
    created() {
        this.getAll();
        this.getSpace()
        this.getAllText()
        this.getAllMiddle()
    },
    watch: {
    },
}
</script>

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

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

.settingBox {
    width: 342px;
    height: 666px;
    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: 666px;
    /* 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;
}

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

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

::v-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: 100%;
    height: 30px;
    line-height: 30px;
}

.chooseSet:hover {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #8693b2;
    color: white;
}

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

::v-deep .el-collapse-item__content {
    height: 260px;
    overflow-y: auto;
}

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