eta_front/src/views/ppt_manage/newVersion/components/selectImage.vue

<template>
    <div class="select-image">
        <el-dialog :visible.sync="showDialog" :title="titleObj[imgType]" :close-on-click-modal="false"
            :modal-append-to-body="false" @close="cancelHandle" custom-class="select-image-dialog" center width="820px"
            v-dialogDrag>
            <el-input v-model="keyword"
                :placeholder="$t('OnlineExcelPage.please_input') + inputName[imgType] + $t('ETable.BalanceSheetTable.name')"
                clearable style="width:200px;" @input="handleSearch"></el-input>
            <div class="image-list">
                <div class="image-item" v-for="item in list" :key="item.ImageConfId">
                    <div class="img-box">
                        <div class="opt-box">
                            <div class="item full-fix" @click="handleShowImgFull(item)">
                                <img src="~@/assets/img/icons/fullsreen.png" alt="">
                            </div>
                            <div class="radio-fix">
                                <el-radio v-if="imgType != 3" size="medium" v-model="momentChooseId"
                                    @change="changeRadio" :label="item.ImageConfId"></el-radio>
                                <el-radio class="backcover-radio" v-else size="medium" v-model="momentChooseId"
                                    @click.native.prevent="clickRadio(item.ImageConfId)"
                                    :label="item.ImageConfId"></el-radio>
                            </div>
                        </div>
                        <img class="img" :src="item.Url" alt="">
                    </div>
                    <p class="name">{{ item.ImgName || item.ImageName }}</p>
                </div>
            </div>
            <div style="margin-top: 20px;display: flex;justify-content:flex-end;padding-right: 40px;">
                <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="pageSize"
                    layout="total, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div style="text-align:center;padding: 30px 0;margin-top: 60px;">
                <el-button style="width:120px;" @click="cancelHandle()">{{ $t('Dialog.cancel_btn') }}</el-button>
                <el-button type="primary" style="margin-left:20px;width:120px;" @click="handleSave">{{
                    $t('Dialog.confirm_save_btn') }}</el-button>
            </div>
            <el-image-viewer :zIndex="9999" v-if="showPptViewer"
                :on-close="() => { this.picShowList = []; this.showPptViewer = false }" :url-list="picShowList" />
        </el-dialog>
    </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { apiSmartReport } from '@/api/modules/smartReport'
export default {
    components: { ElImageViewer },
    props: {
    },
    data() {
        return {
            momentChooseId: 0,
            momentChooseUrl: '',
            total: 0,
            list: [],
            pageSize: 8,
            page: 1,
            keyword: '',
            showPptViewer: false,
            picShowList: [],
            imgType: 1,
            showDialog: false,
            inputName: {
                1: this.$t('SystemManage.BaseConfig.ppt_type01'),
                2: this.$t('SystemManage.BaseConfig.ppt_type02'),
                3: this.$t('SystemManage.BaseConfig.ppt_type03')
            },
            titleObj: {
                1: this.$t('Slides.more_cover_page'),
                2: this.$t('Slides.select_ground_page'),
                3: this.$t('Slides.select_back_page')
            }
        }
    },
    mounted() {
    },
    methods: {
        handleShowImgFull(e) {
            console.log(e);
            this.picShowList = [e.Url]
            this.showPptViewer = true
        },
        handleCurrentChange(val) {
            this.page = val
            this.getImgList()
        },
        // 保存
        handleSave() {
            const obj = {
                url: this.momentChooseUrl,
                type: this.imgType,
                id: this.momentChooseId
            }
            this.cancelHandle()
            this.$emit('saveChoose', obj)
        },
        // 选择图片
        changeRadio(val) {
            const index = this.list.findIndex(el => el.ImageConfId == val)
            if (index > -1) {
                this.momentChooseUrl = this.list[index].Url
            }
        },
        // 封底图片选择
        clickRadio(val) {
            if (val === this.momentChooseId) {
                this.momentChooseId = 0
                this.momentChooseUrl = ''
            } else {
                this.momentChooseId = val
                const index = this.list.findIndex(el => el.ImageConfId == val)
                if (index > -1) {
                    this.momentChooseUrl = this.list[index].Url
                }
            }
        },
        //资源库列表
        getImgList() {
            apiSmartReport.pptMaterialList({
                CurrentIndex: this.page,
                PageSize: this.pageSize,
                ImageType: this.imgType,
                ImageName: this.keyword,
                ConfType: 1
            }).then(res => {
                this.list = res.Data ? res.Data.List : []
                this.total = res.Data ? res.Data.Paging.Totals : 0
                if (!this.momentChooseId&&this.imgType!=3) {
                    if (this.list.length) {
                        this.momentChooseId = this.list[0].ImageConfId
                        this.momentChooseUrl = this.list[0].Url
                    }
                }
            })
        },
        // 搜索图片
        handleSearch() {
            this.page = 1
            this.getImgList()
        },
        // 打开弹框
        showHandle(type, id, url) {
            // console.log(type, id, url)
            this.showDialog = true
            this.imgType = type
            this.keyword = ''
            this.momentChooseId = id
            this.momentChooseUrl = url
            this.handleSearch()
        },
        // 关闭弹窗
        cancelHandle() {
            this.showDialog = false
        }
    }
}
</script>

<style lang="scss">
.select-image-dialog {
    .el-dialog__body {
        padding: 40px 60px !important;
    }

    .image-list {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        .image-item {
            width: 160px;

            .img-box {
                position: relative;
                cursor: pointer;
                width: 160px;

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

                .opt-box {
                    position: absolute;
                    z-index: 5;
                    width: 100%;
                    height: 100%;

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

                    .full-fix {
                        position: absolute;
                        top: 12px;
                        right: 12px;
                    }

                    .radio-fix {
                        position: absolute;
                        top: 12px;
                        left: 12px;
                    }
                }

                &:hover {
                    .opt-box {
                        display: flex;
                    }

                    .select-box {
                        display: block;
                    }
                }
            }

            .name {
                padding-top: 5px;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                line-break: anywhere;
                -webkit-box-orient: vertical;
            }
        }
    }

    .el-radio {
        .el-radio__label {
            display: none;
        }
    }

    .backcover-radio.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
}
</style>