pbl-teacher-table/src/components/pages/test/file/checkfile.vue

<template>
    <el-dialog title="上传文件" :visible.sync="dialogVisiblefile" :append-to-body="true" width="600px"
        :before-close="handleClose" class="dialog_diy">
        <div class="fileCss">
            <div>
                <button class="info_btn" @click="addImg($event)">
                    选择本地文件
                    <input type="file" accept="*" style="display: none" multiple="multiple" @change="beforeUpload" />
                </button>
                <div class="spanName">选择本地文件</div>
            </div>
            <!-- <div>
                <el-button @click="openFile">选择素材库文件</el-button>
                <div class="spanName">选择素材库文件</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>
        <el-dialog title="选择素材库文件" :visible.sync="dialogVisiblefile2" :append-to-body="true" width="710px"
            :before-close="handleClose2" class="dialog_diy">
            <div class="file_box">
                <div class="student_head">
                    <div class="three">
                        <div :class="choose == 0 ? 'choose' : ''" @click="sMtl(0)">图片</div>
                        <div :class="choose == 1 ? 'choose' : ''" @click="sMtl(1)">视频</div>
                        <div :class="choose == 2 ? 'choose' : ''" @click="sMtl(2)">附件</div>
                    </div>
                </div>
                <div class="student_table" v-loading="isLoading">
                    <div v-if="this.choose == 0" class="boxCss">
                        <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
                            <div class="tup">
                                <img :src="item.chapdataInfo ? JSON.parse(item.chapdataInfo).url : mtp
                                    " alt="" @click="checkJson(JSON.parse(item.chapdataInfo))" />
                                <div class="deleteWord">
                                    <img src="../../../../assets/icon/delete.png" alt="" />
                                </div>
                            </div>
                            <div class="bottom_box">
                                <el-tooltip :content="item.chapdataInfo
                                    ? JSON.parse(item.chapdataInfo).name
                                    : '暂无名称'" placement="top" effect="dark">
                                    <div>
                                        {{
                                            item.chapdataInfo
                                            ? JSON.parse(item.chapdataInfo).name
                                            : "暂无名称"
                                        }}
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div v-if="this.choose == 1" class="boxCss">
                        <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
                            <div class="tup">
                                <img :src="msp" alt="" @click="checkJson(JSON.parse(item.chapdataInfo))" />
                                <div class="deleteWord">
                                    <img src="../../../../assets/icon/delete.png" alt="" />
                                </div>
                            </div>
                            <div class="bottom_box">
                                <el-tooltip :content="item.chapdataInfo
                                    ? JSON.parse(item.chapdataInfo).name
                                    : '暂无名称'" placement="top" effect="dark">
                                    <div>
                                        {{
                                            item.chapdataInfo
                                            ? JSON.parse(item.chapdataInfo).name
                                            : "暂无名称"
                                        }}
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div v-if="this.choose == 2" class="boxCss">
                        <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
                            <div class="tup">
                                <img :src="mfj" alt="" @click="checkJson(JSON.parse(item.chapdataInfo))" />
                                <div class="deleteWord">
                                    <img src="../../../../assets/icon/delete.png" alt="" />
                                </div>
                            </div>
                            <div class="bottom_box">
                                <el-tooltip :content="item.chapdataInfo
                                    ? JSON.parse(item.chapdataInfo).name
                                    : '暂无名称'" placement="top" effect="dark">
                                    <div>
                                        {{
                                            item.chapdataInfo
                                            ? JSON.parse(item.chapdataInfo).name
                                            : "暂无名称"
                                        }}
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="student_page">
                    <el-pagination background layout="prev, pager, next" :page-size="10" :total="total"
                        v-if="page && chapInfo.length" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </el-dialog>
</template>
  
<script>
export default {
    props: {
        dialogVisiblefile: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            progress: 0,
            isFinishSize: 0,
            proVisible: false,
            isAllSize: 0,
            dialogVisiblefile2: false,
            userid: this.$route.query.userid,
            page: 1,
            isLoading: false,
            total: 0,
            chapInfo: [],
            choose: 0,
            mtp: require("../../../../assets/tup1.png"),
            msp: require("../../../../assets/icon/fileIcon/isVideo.png"),
            mfj: require("../../../../assets/icon/fileIcon/word2.png"),
        };
    },
    methods: {
        handleClose(done) {
            this.close();
            done();
        },
        handleClose2(done) {
            done();
        },
        close() {
            this.$emit("update:dialogVisiblefile", false);
        },
        openFile() {
            this.dialogVisiblefile2 = true
            this.selectMtl();
        },
        sMtl(choose) {
            this.choose = choose
            this.page = 1
            this.selectMtl()
        },
        handleCurrentChange(val) {
            this.page = val
            this.selectMtl()
        },
        selectMtl() {
            this.isLoading = true;
            let params = {
                t: this.choose,
                uid: this.userid,
                page: this.page,
            };
            this.ajax
                .get(this.$store.state.api + "selectMtl2", params)
                .then((res) => {
                    this.isLoading = false;
                    this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
                    this.chapInfo = 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 = "";
        },
        beforeUpload(event, type) {
            // const loading = this.openLoading();
            let cfindex2 = 0;
            for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
                let 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;

                // _this.progress = 0;
                _this.proVisible = true;
                // _this.isFinishSize = 0;
                // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
                _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 - 1 ||
                                cfindex2 > event.target.files.length - 1
                                ) {
                                _this.proVisible = false;
                                _this.close();
                                }
                            }, 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; //文件
                                }
                                // 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,
                                //     });
                                // }
                                _this.$emit("setCheckJson", file.name, data.Location, _type);
                                _this.$forceUpdate();

                                console.log(_this.checkJson);
                                console.log(data.Location);
                            }
                        });
                }
            }
        },
        checkJson(json) {
            let _type = 2;
            let url = "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"+encodeURIComponent(json.url.split(
          "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"
        )[1]);
            let name = json.name
            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(
                    url.split(".")[
                    url.split(".").length - 1
                    ].toLocaleUpperCase()
                ) != -1
            ) {
                _type = 1; //word 文件
            } else if (
                videoA.indexOf(
                    url.split(".")[
                    url.split(".").length - 1
                    ].toLocaleUpperCase()
                ) != -1
            ) {
                _type = 2; //视频
            } else if (
                imgA.indexOf(
                    url.split(".")[
                    url.split(".").length - 1
                    ].toLocaleLowerCase()
                ) != -1
            ) {
                _type = 3; //图片
            } else if (
                'pdf'.indexOf(
                    url.split(".")[
                    url.split(".").length - 1
                    ].toLocaleLowerCase()
                ) != -1
            ) {
                _type = 4; //pdf
            } else {
                _type = 5; //文件
            }
            this.$emit("setCheckJson", name, url, _type);
            this.dialogVisiblefile2 = false
            this.close();
        }
    }
};
</script>
  
<style scoped>
.dialog_diy>>>.el-dialog {
    /* height: 100%; */
    margin: 10vh auto !important;
}

.dialog_diy>>>.el-dialog__header {
    background: #454545 !important;
    padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__body {
    height: calc(100% - 124px);
    box-sizing: border-box;
    padding: 0px;
}

.dialog_diy>>>.el-dialog__title {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
    top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
    color: #fff;
}

.dialog_diy>>>.el-dialog__body,
.dialog_diy>>>.el-dialog__footer {
    background: #fafafa;
}


.fileCss {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    padding: 40px 0;
    box-sizing: border-box;
}

.fileCss>div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fileCss .spanName {
    margin-top: 10px
}


.info_btn,
.teacherWord {
    color: #fff;
    background-color: #0f7eff;
    padding: 8px 24px;
    font-size: 0.9375rem;
    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
        0px 3px 1px -2px rgb(0 0 0 / 12%);
    min-width: 64px;
    font-weight: 500;
    border-radius: 4px;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}

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

.file_box {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}

.student_head>>>.el-button--primary {
    background-color: #2268bc;
}

.student_head {
    display: flex;
    justify-content: space-between;
}

.three {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 200px;
    height: 30px;
}

.three>div {
    cursor: pointer;
}

.choose {
    border-bottom: 5px solid #3994fd;
}

.student_table {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    margin-top: 10px;
}

.tup {
    width: calc(100% - 20px);
    height: 120px;
    margin: 0 auto;
    position: relative;
}

.out_box:hover .deleteWord {
    /* display: block; */
}

.deleteWord {
    width: 25px;
    height: 25px;
    position: absolute;
    right: -25px;
    top: -10px;
    cursor: pointer;
    display: none;
}

.tup>img,
.deleteWord>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.out_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 216px;
    padding: 10px 0;
    background: #fff;
    margin: 0 10px 10px 0;
    height: fit-content;
    cursor: pointer;
}

.out_box:nth-child(3n){
    margin-right: 0;
}

.bottom_box {
    display: flex;
    text-align: center;
    margin: 0 auto;
    padding: 10px 0 5px 0;
}

.bottom_box>div:nth-child(1) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    width: 200px;
}

.uploadThing {
    background: #2268bc;
    width: 90px;
    height: 35px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    border-radius: 4px;
}

.top {
    display: flex;
    justify-content: space-between;
}

.student_page {
    margin-top: 30px;
}

.boxCss {
    padding: 15px 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 250px;
}
</style>