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

<template>
    <div>
        <div class="container">
            <div class="container-box">
                <h2>素材库</h2>
                <div class="adv-type">
                    <div class="search-list-box">
                    <el-select v-model="infotype" @change="changeType" class="search-box">
                        <el-option v-for="items in typeList" :key="items.dataCode" :label="items.dataName"
                            :value="items.dataCode">
                        </el-option>
                    </el-select>
                    <el-input v-model="fileNameSearch" placeholder="文件名称" @input="searchInput" class="file-name-search search-box"></el-input>
                    <el-select v-model="timeSort" @change="timeSortChange" class="search-box">
                        <el-option v-for="item in sortList" :key="item.sortCode" :label="item.sortName"
                            :value="item.sortCode">
                        </el-option>
                    </el-select>
                    <div class="block search-box search-box1">
                        <el-date-picker
                        v-model="dateSearch"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="dateSearchChange"
                        class="search-inner-box">
                        </el-date-picker>
                    </div>
                    
                    </div>
                    <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" class="img-list">
                            <div class="img-content">
                                <img :src="item.fileBase64" alt="" @click="checkimg(item,index)">                           
                                <el-checkbox v-if="mstatus" v-model="item.checked" @change="checkAdd(item)"></el-checkbox>
                            </div>
                            <input type="text" class="file-name" v-model="item.fileName" :readonly="!item.isRename" @dblclick="renameFile(item)" :style="{'border':!item.isRename ? 'none' : '1px solid #ddd'}" @blur="submitFileName(item)">
                        </div>
                    </div>
                    <el-pagination :page-size="20" 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: [],
                params:{},
                fileNameSearch: '',
                isRename: true,

                //时间排序
                sortList:[
                    {
                        sortCode: '1',
                        sortName: '倒序'
                    },
                    {
                        sortCode: '2',
                        sortName: '正序'
                    }
                ],
                timeSort:'倒序',
                isDesc: "desc",
                dateSearch:[],
                createTimeFrom: '',
                createTimeTo:''
            }
        },
        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.infotype = v
                        this.getlist(this.pageSize);
                    }
                }
            },
            timeSortChange(v){
                if(v==1){
                    this.isDesc = 'desc'
                    this.getlist(this.pageSize);
                }else if(v==2){
                    this.isDesc = ''
                    this.getlist(this.pageSize);
                }
            },
            dateSearchChange(v){
                this.createTimeFrom = this.$formatDate(v[0],"YYYY-MM-DD")
                this.createTimeTo = this.$formatDate(v[1],"YYYY-MM-DD")
                this.getlist(this.pageSize);
                

            },
            searchInput(v){
                this.fileNameSearch = v
                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);
                        }
                    });
                }
            },
            renameFile(v){
                this.$set(v,'isRename',true)
            },
            submitFileName(v){
                v.isRename = false;
                let params = {
                    id: v.id,
                    fileName: v.fileName
                }
                this.$http({
                    url: "/market/cadvMaterial/updateMkAdvFileName",
                    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);
                        }
                });
               
            },
            getlist(v) {
                let params = {
                    advType: this.infotype,
                    fileName: this.fileNameSearch,
                    isDesc: this.isDesc,
                    createTimeFrom: this.createTimeFrom,
                    createTimeTo: this.createTimeTo,
                };
                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;
            align-items: center;
            .file-name-search{
                width: 30%;
            }
            span {
                display: inline-block;

            }
        }

        .img-box {
            height: 90%;

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

                .img-list {
                    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: 50%;
                    
                   
                    .img-content{
                        border: 1px solid #ddd;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 80%;
                        text-align: center;
                        img {
                        // width: 100%;
                            display: block;
                            max-width: 100%;
                            max-height: 100%;
                            // position: absolute;
                            // top: 0;
                            // bottom: 0;
                            margin: auto;
                            // height: 100%;
                        }

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

                        span {}
                    }
                    .file-name{
                        margin-top: 5px;
                        border: none;
                        outline: none;
                        width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    
                }
            }
        }

        .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;
        }
    }
    .search-list-box{
        display: flex;
        flex-wrap: wrap;
        max-width: 50%;
        .search-box{
            width: 30%;
            margin-right: 10px;
            margin-bottom: 10px;
            .search-inner-box{
                width: 100%
            }
        }
        .search-box1{
            width: 80%;
        }

    }
    
</style>