pbl-teacher-table/src/components/pages/library/fileBox.vue

<template>
    <div class="f_box">
        <div class="f_box_top">
            <div class="f_box_top_left">
                <div class="btn" @click="addImg($event)" v-if="type == '1'">
                    上传本地文件
                    <input type="file" accept="*" style="display: none" multiple="multiple"
                        @change="beforeUpload($event)" />
                </div>
                <div class="btn" @click="addFileToTest()" :style="{opacity: checkArray.length ? 1 : .5}" v-if="type == '2'">
                    添加至表单
                </div>
                <div class="btn2" v-if="checkArray.length && type == '1'" @click="openMoveBox">移动到</div>
                <div class="btn2" v-if="checkArray.length && type == '1'" @click="downPan">下载</div>
                <div class="delBtn" v-if="checkArray.length && type == '1'" @click="deleteFile"></div>
            </div>
            <div class="f_box_top_right">
                <div class="input">
                    <input type="text" v-model="fileName" placeholder="请输入你需要搜索的文件名字" @keyup.enter="serchFile">
                    <div class="serch" @click="serchFile"></div>
                </div>
                <div class="tab">
                    <div class="list" :class="{ active: stype == '2' }" @click="stype = '2'"></div>
                    <div class="table" :class="{ active: stype == '1' }" @click="stype = '1'"></div>
                </div>
            </div>
        </div>
        <div class="none_box" v-if="fileArray.length == 0">
            暂无上传文件
        </div>
        <div class="f_box_file_square" v-if="stype == '1' && fileArray.length" v-loading.body="isLoading">
            <div class="f_box_file_allCheck" @click="checkAll" v-if="fileArray.length">
                <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
                <img :src="checkIsImg" alt="" v-else>
                <span>全部文件</span>
            </div>
            <div class="f_box_file" v-for="(item, index) in fileArray" :key="index"
                :class="{ check: checkArray.indexOf(item.id) != -1 }" @click.stop="selectFile(item)">
                <img :src="officeImg" alt="" v-if="item.type == 1">
                <img :src="pdfImg" alt="" v-if="item.type == 4">
                <img :src="videoImg" alt="" v-if="item.type == 2">
                <img :src="otherImg" alt="" v-if="item.type == 5">
                <img :src="item.file" alt="" v-if="item.type == 3">
                <el-tooltip :content="item.name" placement="top" effect="dark">
                    <!-- content to trigger tooltip here -->
                    <div class="name">{{ item.name }}</div>
                </el-tooltip>
                <div class="check" @click.stop="checkFile(item.id)">
                    <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
                    <img :src="checkIsImg" alt="" v-else>
                </div>
            </div>
        </div>
        <div class="f_box_file_list" v-else-if="stype == '2' && fileArray.length" v-loading.body="isLoading">
            <div class="list_file_box">
                <div class="list_top">
                    <div class="check">
                        <div class="list_allcheck" @click="checkAll" v-if="fileArray.length">
                            <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
                            <img :src="checkIsImg" alt="" v-else>
                        </div>
                    </div>
                    <div class="name">文件名</div>
                    <div class="size">大小</div>
                    <div class="type">类型</div>
                    <div class="time">上传时间</div>
                </div>
                <div class="list_content" :class="{ active: checkArray.indexOf(item.id) != -1 }"
                    @click="checkFile(item.id)" v-for="(item, index) in fileArray" :key="index">
                    <div class="check">
                        <div class="list_allcheck">
                            <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
                            <img :src="checkIsImg" alt="" v-else>
                        </div>
                    </div>
                    <div class="name">
                        <div class="list_file_name">
                            <img :src="officeImg" alt="" v-if="item.type == 1">
                            <img :src="pdfImg" alt="" v-if="item.type == 4">
                            <img :src="videoImg" alt="" v-if="item.type == 2">
                            <img :src="otherImg" alt="" v-if="item.type == 5">
                            <img :src="item.file" alt="" v-if="item.type == 3">
                            <el-tooltip :content="item.name" placement="top" effect="dark">
                                <div>{{ item.name }}</div>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="size">
                        {{ item.size }}
                    </div>
                    <div class="type">
                        {{ retrunType(item) }}
                    </div>
                    <div class="time">
                        {{ item.time }}
                    </div>
                </div>
            </div>
        </div>
        <div v-if="proVisible" class="mask">
            <div class="progressBox">
                <div class="lbox">
                    <img src="../../../assets/loading.gif" />上传中，请稍后
                </div>
                <!-- <div style="margin-bottom: 10px">
                                <span>{{
                                    isFinishSize
                                }}M</span>
                                /
                                <span>{{
                                    isAllSize
                                }}M</span>
                            </div> -->
                <!-- <el-progress :text-inside="true" :stroke-width="20" :percentage="progress
                                ? progress
                                : 0
                                " style="width: 80%"></el-progress> -->
            </div>
        </div>
        <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
        <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
        <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
        <el-dialog title="移动至" :visible.sync="moveBox" width="400px" @close="moveBox = false" class="dialog">
            <div>
                <div class="type_nav_box" v-for="(item, index) in checkTypeArray" :key="index">
                    <div class="nav" :class="{ active: item.open }" @click.stop="openChild(index)">
                        <span class="down"></span>
                        <span class="file"></span>
                        <el-tooltip :content="item.name" placement="top" effect="dark">:
                            <!-- content to trigger tooltip here -->
                            <span class="name">{{ item.name }}</span>
                        </el-tooltip>
                    </div>
                    <div class="child" v-if="item.open">
                        <div class="nav" v-for="(item2, index2) in item.child" :key="index + '-' + index2"
                            :class="{ active: moveChild.id == item2.id }" @click.stop="checkMoveChild(item2)">
                            <span class="file"></span>
                            <el-tooltip :content="item2.name" placement="top" effect="dark">:
                                <!-- content to trigger tooltip here -->
                                <span class="name">{{ item2.name }}</span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="moveBox = false">取 消</el-button>
                <el-button type="primary" @click="confirmMove">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import officeImg from '../../../assets/icon/sourceFile/office.png'
import pdfImg from '../../../assets/icon/sourceFile/pdf.png'
import videoImg from '../../../assets/icon/sourceFile/video.png'
import otherImg from '../../../assets/icon/sourceFile/other.png'
import checkImg from '../../../assets/icon/sourceFile/check.png'
import checkIsImg from '../../../assets/icon/sourceFile/check_is.png'


import wVideo from "../test/file/wVideo.vue";
import wpdf from "../test/file/wPdf2.vue";
import wOffice from "../test/file/wOffice.vue";

import JSZip from "jszip";
import FileSaver from "file-saver";

const getFile = (url) => {
    return new Promise((resolve, reject) => {
        var credentials = {
            accessKeyId: "AKIATLPEDU37QV5CHLMH",
            secretAccessKey: "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",
        }; //秘钥形式的登录上传
        window.AWS.config.update(credentials);
        window.AWS.config.region = "cn-northwest-1"; //设置区域
        let url2 = url;
        let _url2 = "";
        if (
            url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
        ) {
            _url2 = url2.split(
                "https://view.officeapps.live.com/op/view.aspx?src="
            )[1];
        } else {
            _url2 = url2;
        }
        var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
        let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1].replace(/\+/g, ' '))
        var params = {
            Bucket: "ccrb",
            Key: name
        };
        s3.getObject(params, function (err, data) {
            if (err) {
                console.log(err, err.stack)
                resolve({ data: 1 });
            } else {
                resolve({ data: data.Body });
                console.log(data);
            }          // sxuccessful response

        });
        // axios({
    });
};
export default {
    components: {
        wVideo,
        wpdf,
        wOffice,
    },
    props: {
        userid: {
            type: String,
        },
        typeArray: {
            type: Array,
        },
        pid: {
            type: String,
        },
        type: {
            type: String
        }
    },
    watch: {
        pid: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.fileArray = []
                this.checkArray = []
                this.fileName = ''
                this.getData()
            },
        },
    },
    data() {
        return {
            isLoading: false,
            proVisible: false,
            stype: 1,
            fileArray: [],
            officeImg: officeImg,
            pdfImg: pdfImg,
            videoImg: videoImg,
            otherImg: otherImg,
            checkImg: checkImg,
            checkIsImg: checkIsImg,
            checkArray: [],
            dialogVisiblePdf: false,
            dialogVisibleVideo: false,
            dialogVisibleOffice: false,
            wurl: '',
            moveBox: false,
            checkTypeArray: [],
            moveChild: '',
            fileName: '',
        }
    },
    computed: {
        retrunType() {
            return function (item) {
                if (item.type == 1) {
                    return 'OFFICE文件'
                } else if (item.type == 2) {
                    return '视频文件'
                } else if (item.type == 3) {
                    return '图片'
                } else if (item.type == 4) {
                    return 'PDF文件'
                } else if (item.type == 5) {
                    return '其他文件'
                }
            };
        }
    },
    methods: {
        getData() {
            let type = this.pid.split('-')
            let id = ''
            if (type.length == 1) {
                if (type[0] == 'wu') {
                    id = '0'
                } else {
                    id = this.typeArray[type[0]].id
                }
            } else {
                id = this.typeArray[type[0]].child[type[1]].id
            }
            this.isLoading = true;
            let params = {
                uid: this.userid,
                pid: id,
                n: this.fileName
            };
            this.ajax
                .get(this.$store.state.api + "getSourceFile", params)
                .then((res) => {
                    this.isLoading = false;
                    this.fileArray = res.data[0];
                })
                .catch((err) => {
                    this.isLoading = false;
                    console.error(err);
                });
        },
        addImg(e) {
            var el = e.currentTarget;
            el.getElementsByTagName("input")[0].click();
            e.target.value = "";
        },
        serchFile() {
            this.getData();
        },
        beforeUpload(event) {
            // const loading = this.openLoading();
            let file = "";
            let cfindex2 = 0;
            for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
                file = event.target.files[cfindex];

                var credentials = {
                    accessKeyId: "AKIATLPEDU37QV5CHLMH",
                    secretAccessKey: "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",
                }; //秘钥形式的登录上传
                window.AWS.config.update(credentials);
                window.AWS.config.region = "cn-northwest-1"; //设置区域

                var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
                var _this = this;
                let _name = file.name;
                // _this.progress = 0;
                _this.proVisible = true;
                // _this.isFinishSize = 0;
                // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
                let size = file.size;
                _this.$forceUpdate();
                if (file) {
                    var params = {
                        Key:
                            file.name.split(".")[0] +
                            new Date().getTime() +
                            "." +
                            file.name.split(".")[file.name.split(".").length - 1],
                        ContentType: file.type,
                        Body: file,
                        "Access-Control-Allow-Credentials": "*",
                        ACL: "public-read",
                    }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
                    var options = {
                        partSize: 2048 * 1024 * 1024,
                        queueSize: 2,
                        leavePartsOnError: true,
                    };
                    bucket
                        .upload(params, options)
                        .on("httpUploadProgress", function (evt) {
                            //这里可以写进度条
                            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
                            // _this.progress = parseInt((evt.loaded / evt.total) * 100);
                            // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
                            // _this.$forceUpdate();
                        })
                        .send(function (err, data) {
                            cfindex2++;

                            // _this.progress = 100;
                            // _this.isFinishSize = _this.isAllSize;
                            // _this.$forceUpdate();
                            // setTimeout(() => {
                            //     _this.proVisible = false;
                            //     _this.$forceUpdate();
                            // }, 1000);
                            setTimeout(() => {
                                if (
                                    cfindex2 == event.target.files.length ||
                                    cfindex2 > event.target.files.length
                                ) {
                                    _this.proVisible = false;
                                }
                            }, 1000);
                            // loading.close();
                            if (err) {
                                _this.$message.error("上传失败");
                            } else {
                                let _type = 2;
                                var imgA = [
                                    "png",
                                    "jpg",
                                    "jpeg",
                                    "bmp",
                                    "gif",
                                    "webp",
                                    "psd",
                                    "svg",
                                    "tiff",
                                ];
                                var fileA = [
                                    "DOC",
                                    "DOCX",
                                    "DOCM",
                                    "DOTM",
                                    "DOTX",
                                    "PPTX",
                                    "PPSX",
                                    "PPT",
                                    "PPS",
                                    "PPTM",
                                    "POTM",
                                    "PPAM",
                                    "POTX",
                                    "PPSM",
                                    "XLSX",
                                    "XLS",
                                ];
                                var videoA = [
                                    "AVI",
                                    "NAVI",
                                    "MPEG",
                                    "ASF",
                                    "MOV",
                                    "WMV",
                                    "3GP",
                                    "RM",
                                    "RMVB",
                                    "FLV",
                                    "F4V",
                                    "H.264",
                                    "H.265",
                                    "REAL VIDEO",
                                    "MKV",
                                    "WebM",
                                    "HDDVD",
                                    "MP4",
                                    "MPG",
                                    "M4V",
                                    "MGV",
                                    "OGV",
                                    "QTM",
                                    "STR",
                                    "AMC",
                                    "DVX",
                                    "EVO",
                                    "DAT",
                                    "OGG",
                                    "OGM",
                                ];
                                if (
                                    fileA.indexOf(
                                        data.Location.split(".")[
                                            data.Location.split(".").length - 1
                                        ].toLocaleUpperCase()
                                    ) != -1
                                ) {
                                    _type = 1; //word 文件
                                } else if (
                                    videoA.indexOf(
                                        data.Location.split(".")[
                                            data.Location.split(".").length - 1
                                        ].toLocaleUpperCase()
                                    ) != -1
                                ) {
                                    _type = 2; //视频
                                } else if (
                                    imgA.indexOf(
                                        data.Location.split(".")[
                                            data.Location.split(".").length - 1
                                        ].toLocaleLowerCase()
                                    ) != -1
                                ) {
                                    _type = 3; //图片
                                } else if (
                                    'pdf'.indexOf(
                                        data.Location.split(".")[
                                            data.Location.split(".").length - 1
                                        ].toLocaleLowerCase()
                                    ) != -1
                                ) {
                                    _type = 4; //pdf
                                } else {
                                    _type = 5; //文件
                                }
                                let _file = {
                                    name: _name,
                                    url: data.Location,
                                    type: _type,
                                    size: _this.formatFileSize(size)
                                }
                                // if (_this.checkJson.file) {
                                //     _this.checkJson.file.push({
                                //         name: file.name,
                                //         url: data.Location,
                                //         type: _type,
                                //     });
                                // } else {
                                //     _this.checkJson.file = []
                                //     _this.checkJson.file.push({
                                //         name: file.name,
                                //         url: data.Location,
                                //         type: _type,
                                //     });
                                // }
                                let type = 1
                                if (
                                    cfindex2 == event.target.files.length ||
                                    cfindex2 > event.target.files.length
                                ) {
                                    type = 2
                                }
                                _this.addSource(_file, type)
                                _this.$forceUpdate();

                                console.log(_file);
                                console.log(data.Location);
                            }
                        });
                }
            }
        },
        addSource(file, ctype) {
            let _ctype = ctype
            let type = this.pid.split('-')
            let id = ''
            if (type.length == 1) {
                if (type[0] == 'wu') {
                    id = '0'
                } else {
                    id = this.typeArray[type[0]].id
                }
            } else {
                id = this.typeArray[type[0]].child[type[1]].id
            }
            let params = [{
                n: file.name,
                file: file.url,
                type: file.type,
                pid: id,
                uid: this.userid,
                size: file.size,
            }];
            this.ajax
                .post(this.$store.state.api + "addSourceFile", params)
                .then((res) => {
                    if (_ctype == 2) {
                        this.$message.success('上传成功');
                        this.getData()
                    }
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        formatFileSize(bytes) {
            if (bytes < 1024) {
                return bytes + "B";
            } else if (bytes < 1048576) {
                return (bytes / 1024).toFixed(2) + "KB";
            } else if (bytes < 1073741824) {
                return (bytes / 1048576).toFixed(2) + "MB";
            } else {
                return (bytes / 1073741824).toFixed(2) + "GB";
            }
        },
        checkFile(id) {
            if (this.checkArray.indexOf(id) == -1) {
                this.checkArray.push(id)
            } else {
                this.checkArray.splice(this.checkArray.indexOf(id), 1)
            }
        },
        selectFile(item) {
            if (item.type == 3) {
                this.$hevueImgPreview(item.file);
            } else if (item.type == 5) {
                this.downloadFile(item);
            } else if (item.type == 1) {
                this.dialogVisibleOffice = true
                this.wurl = item.file
            } else if (item.type == 2) {
                this.dialogVisibleVideo = true
                this.wurl = item.file
            } else if (item.type == 4) {
                this.dialogVisiblePdf = true
                this.wurl = item.file
            }
        },
        downloadFile(f) {
            this.isLoading = true;
            var credentials = {
                accessKeyId: "AKIATLPEDU37QV5CHLMH",
                secretAccessKey: "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",
            }; //秘钥形式的登录上传
            window.AWS.config.update(credentials);
            window.AWS.config.region = "cn-northwest-1"; //设置区域
            let url2 = f.file;
            let _url2 = "";
            if (
                url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
            ) {
                _url2 = url2.split(
                    "https://view.officeapps.live.com/op/view.aspx?src="
                )[1];
            } else {
                _url2 = url2;
            }
            let _this = this;

            var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
            let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1].replace(/\+/g, ' '))
            var params = {
                Bucket: "ccrb",
                Key: name
            };
            s3.getObject(params, function (err, data) {
                _this.isLoading = false
                if (err) console.log(err, err.stack); // an error occurred
                else {
                    let url = window.URL.createObjectURL(new Blob([data.Body]));
                    let a = document.createElement("a");
                    a.name = f.name;
                    a.href = url;
                    a.download = f.name;
                    a.click();
                    console.log(data);
                }          // sxuccessful response

            });
        },
        checkAll() {
            if (this.checkArray.length === this.fileArray.length) {
                this.checkArray = []
            } else {
                this.checkArray = []
                this.fileArray.forEach(item => {
                    this.checkArray.push(item.id)
                });
            }
        },
        deleteFile() {
            this.$confirm("确定删除这些文件吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = [
                        { ids: this.checkArray.join(",") }
                    ]
                    this.ajax
                        .post(this.$store.state.api + "deleteSourceFile", params)
                        .then((res) => {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                            this.checkArray = []
                            this.getData();
                        })
                        .catch((err) => {
                            this.$message.error("删除失败");
                            console.error(err);
                        });
                })
                .catch(() => { });
        },
        openMoveBox() {
            if (this.checkArray.length == 0) {
                this.$message.error("请添加分类再移动");
                return
            }
            let type = this.pid.split('-')
            let id = ''
            if (type.length == 1) {
                if (type[0] == 'wu') {
                    id = '0'
                } else {
                    id = this.typeArray[type[0]].id
                }
            } else {
                id = this.typeArray[type[0]].child[type[1]].id
            }
            let array = JSON.parse(JSON.stringify(this.typeArray)).filter((item) => {
                item.open = false
                return item.child.length > 0
            })

            array = array.filter((item) => {
                item.child = item.child.filter((item2) => {
                    return item2.id != id
                })
                return item.child.length > 0
            })
            this.moveChild = ''
            this.checkTypeArray = array
            this.moveBox = true
        },
        openChild(index) {
            this.checkTypeArray[index].open = !this.checkTypeArray[index].open
        },
        checkMoveChild(item) {
            this.moveChild = item
        },
        confirmMove() {
            if (!this.moveChild) {
                this.$message.error("请选择移动的分类");
                return
            }
            this.$confirm("确定将文件移动到" + this.moveChild.name + "下吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = [
                        {
                            ids: this.checkArray.join(","),
                            pid: this.moveChild.id
                        }
                    ]
                    this.ajax
                        .post(this.$store.state.api + "updateSourceFilePid", params)
                        .then((res) => {
                            this.$message({
                                message: "移动成功",
                                type: "success",
                            });
                            this.checkArray = []
                            this.moveChild = ''
                            this.moveBox = false
                            this.getData();
                        })
                        .catch((err) => {
                            this.$message.error("删除失败");
                            console.error(err);
                        });
                })
                .catch(() => { });
        },
        downPan() {
            this.downloadFile({file:'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/icons1712477416633.png',name:"icons1712477416633.png"})
            // let array = []
            // this.fileArray.forEach(item => {
            //     if (this.checkArray.includes(item.id)) {
            //         array.push(item)
            //     }
            // })
            // if (array.length == 1) {
            //     this.downloadFile(array[0])
            // } else {
            //     this.uploadCourse(array)
            // }
        },
        uploadCourse(item) {
            this.isLoading = true;
            const _chapInfo = item;
            let url = [];
            for (let i = 0; i < _chapInfo.length; i++) {
                url.push({
                    name: _chapInfo[i].name,
                    url: _chapInfo[i].file,
                });
            }
            console.log(url);
            this.downLoadAll(url);
        },
        downLoadAll(url) {
            const data = url; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
            const zip = new JSZip();
            const cache = {};
            const promises = [];
            data.forEach((item) => {
                const promise = getFile(item.url).then((data) => {
                    if (data.data != 1) {
                        // 下载文件, 并存成ArrayBuffer对象
                        const file_name = item.name; // 获取文件名
                        zip.file(file_name, data.data, { binary: true }); // 逐个添加文件
                        cache[file_name] = data.data;
                    }
                });
                promises.push(promise);
            });
            Promise.all(promises).then(() => {
                zip.generateAsync({ type: "blob" }).then((content) => {
                    // 生成二进制流
                    FileSaver.saveAs(content, "附件.zip"); // 利用file-saver保存文件  自定义文件名
                    setTimeout(() => {
                        this.isLoading = false;
                    }, 2000);
                });
            });
        },
        addFileToTest(){
            if(!this.checkArray.length){
                return
            }
            let file = []
            for(let i = 0; i < this.fileArray.length; i++){
                if(this.checkArray.includes(this.fileArray[i].id)){
                    file.push(this.fileArray[i])
                }
            }
            this.$emit('addFile', file)
            this.checkArray = []
        }
    },
    mounted() {
        this.getData();
    },
}
</script>

<style scoped>
.f_box {
    width: 100%;
    height: 100%;
    position: relative;
}

.f_box_top {
    display: flex;
    align-items: center;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.f_box_top_left {
    display: flex;
    align-items: center;
}

.f_box_top_left .btn {
    display: flex;
    cursor: pointer;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    background: rgb(0, 97, 255);
    color: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
    align-items: center;
}

.f_box_top_left .btn2 {
    display: flex;
    cursor: pointer;
    align-items: center;
    height: 30px;
    padding: 0 8px;
    background: #fff;
    color: rgb(0, 97, 255);
    border: 1px solid rgb(0, 97, 255);
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
    align-items: center;
}

.f_box_top_left .delBtn {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: block;
    background-image: url('../../../assets/icon/sourceFile/delete.png');
    background-size: 100% 100%;
}

.f_box_top_left .btn+.btn2,
.f_box_top_left .btn2+.btn2,
.f_box_top_left .btn2+.delBtn {
    margin-left: 15px;
}

.f_box_top_right {
    margin-left: auto;
    max-width: calc(100% - 280px);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.f_box_top_right>.input {
    position: relative;
    width: 250px;
    height: 35px;
}

.f_box_top_right>.input>input {
    width: 100%;
    height: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    padding: 0 45px 0 10px;
    box-sizing: border-box;
    font-size: 12px;
    outline: none;
}

.f_box_top_right>.input>.serch {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('../../../assets/icon/sourceFile/search.png');
    background-size: 100% 100%;
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.f_box_top_right>.tab {
    height: 30px;
    width: 80px;
    margin-left: 15px;
    background: #e7e7e7;
    border: 2px solid #D9D9D9;
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.f_box_top_right>.tab>.table,
.f_box_top_right>.tab>.list {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.f_box_top_right>.tab>.list::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('../../../assets/icon/sourceFile/list.png');
    background-size: 100% 100%;
}

.f_box_top_right>.tab>.list.active,
.f_box_top_right>.tab>.table.active {
    background: #fff;
}

.f_box_top_right>.tab>.table::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-image: url('../../../assets/icon/sourceFile/table.png');
    background-size: 100% 100%;
}

.mask {
    background-color: rgb(0 0 0 / 30%);
    /* position: fixed; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progressBox {
    width: 300px;
    height: 150px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 6px 1px #bfbfbf;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    color: #6c6c6c;
}

.progressBox>>>.el-progress-bar__outer {
    background-color: #d1dfff !important;
}

.progressBox .lbox {
    height: 50px;
    font-size: 19px;
    display: flex;
    align-items: center;
    color: #747474;
}

.progressBox .lbox img {
    width: 40px;
    margin-right: 20px;
}

.closeCss {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.closeCss>img {
    width: 100%;
    height: 100%;
}


.f_box_file_square {
    height: calc(100% - 55px);
    overflow: auto;
    width: 100%;
    padding: 55px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    position: relative;
}

.f_box_file_square>.f_box_file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    cursor: pointer;
    margin: 0 36px 36px 0;
    border-radius: 20px;
    position: relative;
}

.f_box_file_square>.f_box_file:hover {
    background: #F0F2F5;
}

.f_box_file_square>.f_box_file:hover>.check {
    display: block;
}

.f_box_file_square>.f_box_file.check {
    background: #E0EAFB;
}

.f_box_file_square>.f_box_file.check>.check {
    display: block;
}

.f_box_file_square>.f_box_file>.check {
    position: absolute;
    left: 15px;
    top: 15px;
    width: 16px;
    height: 16px;
    background-size: 100%;
    display: none;
}

.f_box_file_square>.f_box_file>.check>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.f_box_file_square>.f_box_file>img {
    width: 90px;
    height: 90px;
    object-fit: cover;
}

.f_box_file_square>.f_box_file>.name {
    white-space: nowrap;
    font-size: 14px;
    max-width: 80%;
    overflow: hidden;
    margin: 4px auto 0;
    text-overflow: ellipsis;
    text-align: center;
}

.f_box_file_list {
    height: calc(100% - 55px);
    overflow: auto;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.f_box_file_list>.f_box_file {}


.f_box_file_allCheck {
    display: flex;
    align-items: center;
    position: absolute;
    font-size: 14px;
    top: 20px;
    left: 10px;
    cursor: pointer;
}

.f_box_file_allCheck>img {
    width: 16px;
    height: 16px;
    object-fit: cover;
    margin-right: 5px;
}

.dialog>>>.el-dialog__body {
    padding: 10px 20px;
}

.type_nav_box {}

.type_nav_box>.nav {
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 16px;
    color: #000;
}

.type_nav_box>.nav>.down {
    min-width: 14px;
    height: 14px;
    background-image: url('../../../assets/icon/sourceFile/icon_arrow.png');
    background-size: 100% 100%;
    margin-right: 10px;
    transition: all 0.3s;
    transform: rotate(-90deg);
}

.type_nav_box>.nav.active>.down {
    transform: rotate(0deg);
}

.type_nav_box>.nav>.file {
    min-width: 18px;
    height: 18px;
    background-image: url('../../../assets/icon/sourceFile/file.png');
    background-size: 100% 100%;
    margin-right: 10px;
}

.type_nav_box>.nav>.name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type_nav_box>.child {}

.type_nav_box>.child>.nav {
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 10px 0 50px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 16px;
    color: #000;
}

.type_nav_box>.child>.nav.active {
    background: #e0eafb;
}

.type_nav_box>.child>.nav>.file {
    min-width: 18px;
    height: 18px;
    background-image: url('../../../assets/icon/sourceFile/file.png');
    background-size: 100% 100%;
    margin-right: 10px;
}

.type_nav_box>.child>.nav>.name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.none_box {
    height: calc(100% - 55px);
    overflow: auto;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}


.list_file_box {
    width: 100%;
}

.list_file_box>.list_top {
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
}

.list_file_box .check {
    width: 21px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list_allcheck {
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.list_allcheck>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list_file_box .name {
    width: calc(100% - 21px - 100px - 100px - 200px - 50px);
    margin-right: 10px;
}

.list_file_box .size {
    width: 100px;
    margin-right: 10px;
}

.list_file_box .type {
    width: 100px;
    margin-right: 10px;
}

.list_file_box .time {
    width: 200px;
}

.list_top>.check,
.list_top>.name,
.list_top>.size,
.list_top>.type,
.list_top>.time {
    font-size: 16px;
}

.list_content {
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    cursor: pointer;
}

.list_content:hover {
    background: #f0f2f5;
}

.list_content.active {
    background: #e0eafb;
}

.list_content>.name {
    font-size: 14px;
    color: #000000e6;
}

.list_content>.size,
.list_content>.type,
.list_content>.time {
    font-size: 12px;
    color: #00000099;
}

.list_file_name {
    display: flex;
    align-items: center;
}

.list_file_name>img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    margin-right: 5px;
}

.list_file_name>div {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>