spfm-market-front/src/pages/main/terminal/advertmaterial.vue

<template>
    <div>
        <div class="container">
            <div class="container-box">
                <h2>素材库</h2>
                <div class="adv-type">
                    <el-select v-model="infotype" @change="changeType">
                        <el-option v-for="items in typeList" :key="items.dataCode" :label="items.dataName"
                            :value="items.dataCode">
                        </el-option>
                    </el-select>
                    <span>
                        <myUpload style="float: left;" @uploadBack="uploadBack" :fileInfo="fileInfot"
                            :fileList="fileInfot.fileList"></myUpload>
                        <el-button type="primary" @click="mstatuschange" size="medium">{{mstatus?'取消多选':'多选'}}
                        </el-button>
                        <el-button type="primary" @click="dialogCli(1)" size="medium" :disabled="!mstatus">导出
                        </el-button>
                        <el-button type="danger" @click="dialogCli(2)" size="medium" :disabled="!mstatus">删除</el-button>
                    </span>
                </div>

                <div class="img-box">
                    <div class="boximg">
                        <div v-for="(item,index) in imgList" :key="item.id">
                            <img :src="item.fileBase64" alt="" @click="checkimg(item,index)">
                            <el-checkbox v-if="mstatus" v-model="item.checked" @change="checkAdd(item)"></el-checkbox>
                        </div>
                    </div>
                    <el-pagination class="pageBox" @current-change="currchange" layout="prev, pager, next" background
                        :total="total">
                    </el-pagination>
                </div>
            </div>
            <div v-if="bigImgs" class="bigimgcheck">
                <i class="el-icon-close close" @click="bigImgs = false"></i>
                <img :src="checksrc" alt="">
            </div>
        </div>
    </div>
</template>
<script>
    import myUpload from "../../../components/upload";
    export default {
        components: {
            myUpload
        },
        data() {
            return {
                info: {},
                delbox: [],
                infotype: "",
                typeList: [],
                fileInfot: {
                    type: 'btn',
                    typename: '新增素材',
                    btntype: 'success',
                    limit: 10,
                    url: '/market/cadvMaterial/upload',
                    fileList: [],
                    advType: '',
                    advTypeName: '',
                },
                total: 0,
                pageSize: 1,
                imgList: [],
                bigImgs: false,
                checksrc: null,
                mstatus: false,
                checkList: []
            }
        },
        methods: {
            changeType(v) {
                for (let i = 0; i < this.typeList.length; i++) {
                    if (this.typeList[i].dataCode == v) {
                        this.fileInfot.advType = v;
                        this.fileInfot.advTypeName = this.typeList[i].dataName;
                        this.getlist(this.pageSize);
                    }
                }
            },
            uploadBack(v) {
                this.getlist(this.pageSize);
            },
            dialogCli(v) {
                let params = [];
                let paramsf = [];
                for (let i = 0; i < this.checkList.length; i++) {
                    params.push({
                        id: this.checkList[i].id
                    })
                    paramsf.push({
                        compressFileId: this.checkList[i].compressFileId,
                        fileName: this.checkList[i].fileName
                    })
                }
                let _this = this;
                if (v == 2) {
                    this.$http({
                        url: "/market/cadvMaterial/delBatchAdvMaterial",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: params,
                    }).then((res) => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: 'error'
                            });
                        } else {
                            _this.$message({
                                message: '成功',
                                type: 'success'
                            });
                            _this.getlist(_this.pageSize);
                        }
                    });
                }else if(v == 1){
                    this.$http({
                        url: "/market/cadvMaterial/exportAdvMaterialZip",
                        method: "post",
                        responseType: 'blob',
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: paramsf,
                    }).then((response) => {
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            let blob = new Blob([response.data], {
                                type: response.data.type
                            });
                            window.navigator.msSaveOrOpenBlob(blob, 'adv.zip');
                        } else {
                            /* 火狐谷歌的文件下载方式 */
                            console.log(response.data.type)
                            var blob = new Blob([response.data])
                            var downloadElement = document.createElement('a')
                            var href = window.URL.createObjectURL(blob);
                            downloadElement.href = href;
                            downloadElement.download = 'adv.zip';
                            document.body.appendChild(downloadElement);
                            downloadElement.click();
                            document.body.removeChild(downloadElement);
                            window.URL.revokeObjectURL(href);
                        }
                    });
                }
            },
            getlist(v) {
                let params = {
                    advType: this.infotype
                };
                if (this.infotype == '08') {
                    params.advType = ''
                }
                this.$http({
                    url: "/market/cadvMaterial/queryPage",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "page": '{"pageNo":"' + v + '","pageSize":"20"}'
                    },
                    data: params,
                }).then((res) => {
                    this.total = res.data.totalRecord;
                    this.imgList = [];
                    this.imgListold = res.data.data;
                    res.data.data.forEach(item => {
                        item.checked = false;
                        this.imgList.push(item)
                    })
                });
            },
            // 分页
            currchange(v) {
                this.pageSize = v;
                this.getList(this.pageSize);
            },
            gettype() {
                this.$http({
                    url: "/sysmgr/cfgDataDicts/queryMap",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCodePks: 'materType'
                    },
                }).then((res) => {
                    this.typeList = res.data.body.materType;
                    this.infotype = this.$route.query.type;
                    this.changeType(this.infotype);
                });
            },
            //切换状态
            mstatuschange() {
                this.mstatus = !this.mstatus;
                this.checkList = [];
                this.imgList = [];
                for (let i = 0; i < this.imgListold.length; i++) {
                    let item = this.imgListold[i];
                    item.checked = false;
                    this.imgList.push(item)
                }
            },
            //点击图片
            checkimg(v, i) {
                if (this.mstatus) {
                    this.imgList[i].checked = !this.imgList[i].checked;
                    this.checkAdd(v);
                    return
                }
                // this.bigImgs = true;
                // this.checksrc = v.fileBase64;
                this.$http({
                    url: "/market/cadvMaterial/previewAdvMaterial?compressFileId=" + v.fileId,
                    method: "post",
                    responseType: 'blob',
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {},
                }).then((res) => {
                    let _this = this;
                    if (res && res.data && res.data.size) {
                        const dataInfo = res.data
                        let reader = new window.FileReader()
                        reader.readAsArrayBuffer(dataInfo)
                        reader.onload = function(e) {
                            const result = e.target.result
                            const contentType = dataInfo.type;
                            const blob = new Blob([result], {
                                type: contentType
                            })
                            const url = window.URL.createObjectURL(blob)
                            _this.bigImgs = true;
                            _this.checksrc = url;
                        }
                    }
                });
            },
            //选中图片
            checkAdd(v) {
                let s = true;
                for (let i = 0; i < this.checkList.length; i++) {
                    if (this.checkList[i].id == v.id) {
                        s = false;
                        this.checkList.splice(i, 1)
                        return
                    }
                }
                if (s) {
                    this.checkList.push(v);
                }
            },
            getUser() {
                this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            },
        },
        mounted() {
            this.gettype();
            this.getUser();
            // this.getlist(this.pageSize);
        },
        created() {

        },
    }
</script>
<style scoped lang="scss">
    .container-box {
        h2 {
            margin-bottom: 20px;
        }

        .adv-type {
            display: flex;
            justify-content: space-between;

            span {
                display: inline-block;

            }
        }

        .img-box {
            height: 100%;

            .boximg {
                height: calc(100% - 190px);
                overflow-y: scroll;
                display: flex;
                flex-wrap: wrap;
                // justify-content: space-between;
                margin-top: 20px;

                div {
                    display: inline-block;
                    width: 18%;
                    margin-right: 2%;
                    margin-bottom: 20px;
                    overflow: hidden;
                    border: 1px solid #ddd;
                    border-radius: 3px;
                    background: #fff;
                    position: relative;
                    height: 45%;

                    img {
                        width: 100%;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        // height: 100%;
                    }

                    .el-checkbox {
                        position: absolute;
                        top: 0;
                        right: 0;
                        display: inline-block;
                    }

                    span {}
                }
            }
        }

        .pageBox {
            text-align: right;
            margin-top: 10px;
        }
    }

    .bigimgcheck {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10000;
        background: rgba(0, 0, 0, .6);

        img {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            max-width: 90vw;
        }

        .close {
            position: absolute;
            top: 40px;
            right: 40px;
            font-size: 28px;
            color: #fff;
            background: rgba(0, 0, 0, .5);
            border-radius: 50%;
            padding: 5px;
            cursor: pointer;
        }
    }
</style>