eta_front/src/views/system_manage/components/smartReportImgSet.vue

<template>
    <div class="smart-report-img-set-page">
        <div class="top-wrap">
            <el-input v-model="keyword" placeholder="请输入图片名称" clearable style="width:200px;margin-right:20px" @input="handleSearch"></el-input>
            <el-select placeholder="请选择图片类型" v-model="type" clearable style="width:200px" @change="handleSearch">
                <el-option label="版头" :value="1"></el-option>
                <el-option label="版尾" :value="2"></el-option>
            </el-select>
            <el-button type="primary" style="float:right" @click="handleShowUploadPop" v-permission="permissionBtn.baseConfigPermission.etaBaseConfig_source_upload">上传图片</el-button>
        </div>

        <div class="select-status-box" v-if="selectIds.length>0">
            <el-checkbox 
                :indeterminate="isIndeterminate" 
                v-model="checkAll" 
                @change="handleCheckAllChange"
            >全选</el-checkbox>
            <span>已选择{{selectIds.length}}项</span>
            <span @click="selectIds=[]" style="color:#1146DB;margin-left:20px;cursor: pointer;">取消选择</span>
            <span @click="handleBatchDel" style="color:#1146DB;margin-left:20px;cursor: pointer;">删除</span>
        </div>


        <ul class="img-list-wrap">
            <li class="img-item" v-for="item in list" :key="item.ResourceId">
                <div :class="['select-box',selectIds.includes(item.ResourceId)?'select-box-active':'']" @click="handleSelectItem(item)"></div>
                <div class="opt-box">
                    <div class="item" @click="handleShowImgFull(item)">
                        <img src="~@/assets/img/icons/fullsreen.png" alt="">
                    </div>
                    <el-dropdown @command="handleClickOpt">
                    <div class="item">
                        <img src="~@/assets/img/icons/more.png" alt="">
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="{type:'rename',data:item}">重命名</el-dropdown-item>
                        <el-dropdown-item :command="{type:'del',data:item}">删除</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <img class="img" :src="item.ImgUrl" alt="">
                <p class="name">{{item.ImgName}}</p>
            </li>
        </ul>
        <tableNoData text="暂无数据" v-if="list.length===0"/>
        <!-- <el-col :span="24" class="toolbar">
            <el-pagination
                layout="total,prev,pager,next"
                background
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total"
                style="float: right"
            />
        </el-col> -->

        <!-- 上传图片弹窗 -->
        <el-dialog
            :visible.sync="uploadImgPop"
            :title="formData.id?'重命名':'上传图片'"
            :close-on-click-modal="false"
            :append-to-body="true"
            @close="cancelHandle"
            custom-class="classify-dialog"
            center
            width="650px"
            v-dialogDrag
        >
            
            <el-form 
                :model="formData" 
                :rules="formRules" 
                ref="ruleForm" 
                label-width="100px" 
                class="upload-img-form"
            >
                <el-form-item label="图片名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入图片名称"></el-input>
                </el-form-item>
                <el-form-item label="图片类型" prop="type">
                    <el-radio-group v-model="formData.type" :disabled="formData.id">
                        <el-radio :label="1">版头</el-radio>
                        <el-radio :label="2">版尾</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item 
                    label="上传图片" 
                    prop="imgUrl"
                >
                    <el-upload 
                        action="" 
                        accept="image/*" 
                        :http-request="handleUploadImg" 
                        :show-file-list="false"
                        :disabled="formData.id"
                    >
                        <div class="upload-box">
                            <template v-if="!formData.imgUrl">
                                <i class="el-icon-plus" style="font-size: 24px;"></i>
                            </template>
                            <template v-else>
                                <img class="upload-img" :src="formData.imgUrl" alt="">
                            </template>
                        </div>
                    </el-upload>
                    <p>支持jpg、jpeg、png等格式，建议上传版头800*200,版尾800*80</p>
                </el-form-item>
                <div style="text-align: center;padding: 30px 0;">
                    <el-button type="primary" plain style="width:120px;" @click="handleCloseImgUpload">取消</el-button>
                    <el-button type="primary" style="margin-left:20px;width:120px;" @click="handleSave">确定</el-button>
                </div>
            </el-form>
            
        </el-dialog>

        <el-image-viewer 
            v-if="showViewer" 
            :on-close="()=>{this.picShowList=[];this.showViewer = false}" 
            :url-list="picShowList" 
        />
    </div>
</template>

<script>
import {bannerupload} from '@/api/api.js';
import {apiSmartReport}  from '@/api/modules/smartReport'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
export default {
    components:{ElImageViewer},
    data() {
        return {
            keyword:'',
            type:'',
            page:1,
            pageSize:1000,
            list:[],
            total:0,

            uploadImgPop:false,
            formData:{
                id:0,
                name:'',
                type:'',
                imgUrl:''
            },
            formRules:{
                name:[{ required: true, message: '请输入图片名称', trigger: 'blur' }],
                type:[{ required: true, message: '请选择图片类型', trigger: 'change' }],
                imgUrl:[{ required: true, message: '请上传图片', trigger: 'change' }]
            },

            showViewer:false,
            picShowList:[],

            delIds:[],//要删除的id集合
            selectIds:[],

            isIndeterminate:false,
            checkAll:false
        }
    },
    created() {
        this.getImgList()
    },
    methods: {
        handleSelectItem(e){
            const index=this.selectIds.indexOf(e.ResourceId)
            if(index>-1){
                this.selectIds.splice(index,1)
            }else{
                this.selectIds.push(e.ResourceId)
            }

            this.checkAll=this.selectIds.length===this.list.length?true:false
            this.isIndeterminate=this.selectIds.length>0&&this.selectIds.length<this.list.length
        },
        handleCheckAllChange(val){
            if(val){
                this.selectIds=this.list.map(item=>item.ResourceId)
            }else{
                this.selectIds=[]
            }
        },

        //分页页码跳转
        handleCurrentChange(current) {
            this.page = current;
            this.getImgList();
        },


        //资源库列表
        async getImgList(){
            // 获取列表数据重置选择数据
            this.selectIds=[]
            this.isIndeterminate=false
            this.checkAll=false
            this.delIds=[]
            
            const res=await apiSmartReport.imgReourceList({
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                Type:this.type,
                Keyword:this.keyword
            })
            if(res.Ret===200){
                this.list=res.Data.List||[]
                this.total=res.Data.Paging.Totals
            }
        },

        handleSearch(){
            this.page=1
            this.getImgList()
        },

        handleUploadImg(file){
            //图片大小和格式限制
            const {size,type} = file.file
            let form = new FormData();
            form.append('file',file.file);
            bannerupload(form).then(res=>{
                // console.log(res);
                if(res.Ret!==200) return 
                this.formData.imgUrl=res.Data.ResourceUrl
            })
        
        },

        handleSave(){
            this.$refs.ruleForm.validate((valid)=>{
                if(valid){
                    const params={
                        Type:this.formData.type,
                        ImgUrl:this.formData.imgUrl,
                        ImgName:this.formData.name
                    }
                    if(this.formData.id){
                        // 编辑
                        apiSmartReport.imgReourceRename({
                            ResourceId:this.formData.id,
                            ImgName:this.formData.name
                        }).then(res=>{
                            if(res.Ret===200){
                                this.$message.success('修改成功')
                                this.page=1
                                this.getImgList()
                                this.handleCloseImgUpload()
                            }
                        })
                        return
                    }
                    apiSmartReport.imgReourceAdd(params).then(res=>{
                        if(res.Ret===200){
                            this.$message.success('新增成功')
                            this.page=1
                            this.getImgList()
                            this.handleCloseImgUpload()
                        }
                    })
                }
            })
        },

        handleCloseImgUpload(){
            this.uploadImgPop=false
            this.formData.id=0
            this.$refs.ruleForm.resetFields()
        },

        handleShowImgFull(e){
            console.log(e);
            this.picShowList=[e.ImgUrl]
            this.showViewer=true
        },

        handleClickOpt(e){
            if(e.type==='del'){
                this.delIds=[e.data.ResourceId]
                this.handleImgDel()
            }
            if(e.type==='rename'){
                this.formData.id=e.data.ResourceId
                this.formData.name=e.data.ImgName
                this.formData.type=e.data.Type
                this.formData.imgUrl=e.data.ImgUrl
                this.uploadImgPop=true
            }
        },

        handleShowUploadPop(){
            this.formData.id=0
            this.formData.name=''
            this.formData.type=''
            this.formData.imgUrl=''
            this.uploadImgPop=true
        },

        handleBatchDel(){
            this.delIds=this.selectIds
            this.handleImgDel()
        },

        handleImgDel(){
            this.$confirm('是否确认删除选中图片?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                apiSmartReport.imgReourceDel({ResourceIds:this.delIds.join(',')}).then(res=>{
                    if(res.Ret===200){
                        this.$message.success('删除成功')
                        this.page=1
                        this.getImgList()
                    }
                })
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.smart-report-img-set-page{
    padding: 30px;
    padding-bottom: 100px;
    .select-status-box{
        background-color: #F8F8F8;
        padding: 10px 20px;
        margin-top: 20px;
    }
}
.img-list-wrap{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    .img-item{
        position: relative;
        width: 160px;
        cursor: pointer;
        .img{
            display: block;
            width: 100%;
            height: 160px;
            background-color: var(--gary-gy-3-disabled, #EBEFF6);
            object-fit: contain !important;
            box-sizing: border-box;
            &:hover{
                border: 1px solid #3375e1;
            }
        }
        .name{
            margin-top: 5px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            line-break: anywhere;
            -webkit-box-orient: vertical;
        }
        .select-box{
            position: absolute;
            left: 1px;
            top: 1px;
            width: 12px;
            height: 12px;
            background-color: #EBEFF6;
            display: none;
        }
        .select-box-active{
            background-image: url('~@/assets/img/smartReport/icon17.png');
            background-repeat: no-repeat;
            background-size: cover;
            display: block;
        }
        .opt-box{
            display: none;
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 5;
            .item{
                width: 24px;
                height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fff;
                border-radius: 50%;
                margin-left: 10px;
                img{
                    width: 16px;
                    height: 16px;
                }
            }
        }
        &:hover{
            .opt-box{
                display: flex;
            }
            .select-box{
                display: block;
            }
        }
    }
}
.upload-img-form{
    .el-upload {
        .upload-box {
            position: relative;
            width: 120px;
            height: 120px;
            background-color: #F5F7F9;
            border: 1px dashed #DCDFE6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 4px;
            overflow: hidden;

            &:hover {
                border: 1px dashed #3375e1;

                .upload-mask {
                    opacity: 1;
                }
            }

            .form-hint {
                margin-top: 10px;
                color: #999999;
            }

            .upload-img,
            .upload-mask {
                width: 100%;
                height: 100%;
            }

            .upload-mask {
                position: absolute;
                left: 0;
                top: 0;
                cursor: default;
                text-align: center;
                color: #fff;
                opacity: 0;
                font-size: 20px;
                background-color: rgba(0, 0, 0, .5);
                transition: opacity .3s;
                z-index: 2;
                line-height: 120px;

                .mask-icon {
                    cursor: pointer;
                }
            }
        }
    }
}
</style>