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="createNewMenu">
                            <Plus />
                        </el-icon>
                    </div>
                </div>
                <!-- 方块点击盒子 -->
                <div
                    style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;height: 540px;">
                    <!-- v-for盒子 -->
                    <template v-for="(item, index) in fileMenu">
                        <div class="setBox" @click="changeFile">
                            <el-dropdown trigger="click" class="selectChe">
                                <span class="el-dropdown-link">
                                    ...
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>重命名</el-dropdown-item>
                                        <el-dropdown-item @click="delBoser(item)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;">
                            <p>{{ item.dirName }}</p>
                        </div>
                    </template>
                </div>
                <div>
                    <p>
                        <span style="margin-left: 10px;">5G/1T</span>
                        <span style="margin-left: 10rem;font-size: 12px;color: blue;cursor: pointer;"
                            @click="askApply">申请扩容</span>
                    </p>
                    <el-progress style="margin-left: 8px;" :percentage="50" />
                </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;">
                                <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;">
                                <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>
                                                    <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="collapse">
                            <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">

                            </el-collapse-item>
                        </el-collapse>
                    </div>
                    <!-- 文件 -->
                    <div class="fileTable">
                        <el-collapse v-model="files" accordion class="collapse">
                            <el-collapse-item title="文件" name="2" class="">
                                <el-table :data="fileList" style="width: 100%" @row-click="handleRowClick">
                                    <!-- <el-table-column label="Image" width="100">
                                        <template slot-scope="scope">
                                            <img :src="fileBox" alt="" />
                                        </template>
                                    </el-table-column> -->
                                    <el-table-column prop="fileName" label="名称" width="180" />
                                    <el-table-column prop="createTime" label="时间" width="180" />
                                    <el-table-column prop="fileType" label="类型" />
                                    <el-table-column prop="fileSize" label="大小" />
                                </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="空间id">
                            <el-input v-model="fileForm.spaceId" />
                        </el-form-item>
                        <el-form-item label="目录id">
                            <el-input v-model="fileForm.dirId" />
                        </el-form-item>
                        <el-form-item label="文件名称">
                            <el-input v-model="fileForm.fileName" />
                        </el-form-item>
                        <el-form-item label="文件id">
                            <el-input v-model="fileForm.fileId" />
                        </el-form-item>
                        <el-form-item label="文件大小">
                            <el-input v-model="fileForm.fileSize" />
                        </el-form-item>
                        <el-form-item label="文件类型">
                            <el-input v-model="fileForm.fileType" />
                        </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>
    </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 { 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'
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 clickRowId = ref("")
        let trandata = ref(generateData())
        let tranvalue = ref([])
        let boserForm = ref({
            spaceId: "",//空间id
            dirName: "",
            dirPower: "",
            dirType: "",
            parentId: "",
            remark: ""//备注
        })
        let fileForm = ref({
            dirId: '',
            fileId: "",
            fileName: "",
            fileSize: '',
            fileType: "",
            remark: "",
            spaceId: '',
        })
        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([
            {
                name: "标签1",
                choose: "1"
            },
            {
                name: "标签2",
                choose: "2"
            },
        ])
        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 changeFile(row) {

        }
        // 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.dirId
            cliCC.value = true
        }
        // 申请扩容
        function askApply() {
            this.askTo = true
        }
        function sureAsk() {
            this.askTo = false
        }
        //mouse弹框
        function chooseSet(row, num) {
            console.log(row, '1');
            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 => {
                    console.log(res, 'sss');
                })
            }
        }
        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 delBoser(row) {
            documents.delDocument(row.dirId).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "删除成功",
                        type: "success"
                    })
                    getAllText()
                }
            })
        }
        function getAllText() {
            documents.getALLdocument({}).then(res => {
                fileMenu.value = res.data
            })
        }
        function createNewFile() {
            addFile.value = true
        }
        function sureAddFile() {
            myfile.addNewMenu(
                {
                    "dirId": fileForm.value.dirId - 0,
                    "fileId": fileForm.value.fileId - 0,
                    "fileName": fileForm.value.fileName,
                    "fileSize": fileForm.value.fileSize,
                    "fileType": fileForm.value.fileType,
                    "remark": fileForm.value.remark,
                    "spaceId": fileForm.value.spaceId - 0,
                }
            ).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        message: "新增成功",
                        type: "success"
                    })
                    getAll()
                    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]; // 获取选择的文件
                myfile.uploadFile({
                    spaceId: 1,
                    dirId: 1,
                    file: files
                }).then(res => {
                    console.log(res, '222');
                    if(res.code ===200){
                        ElMessage({
                            message:"上传文件成功",
                            type:"success"
                        })
                        getAll()
                    }
                })
            });
        }
        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,
        }
    },
    created() {
        this.getAll();
        this.getSpace()
        this.getAllText()
    },
}
</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;
}

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

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

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