orgManager/src/components/BannerIcon/index.vue

<template >
    <!-- 图标选择 -->
    <div class="tab-container borderOverflow" >
        <!-- el-tabs 组件的容器 -->
            <div class="tab-scroll-content" ref="tabScrollContent">
                <el-tabs
                    v-model="activeName"
                    type="card"
                    class="demo-tabs"
                    @tab-click="handleClick"
                >
                    <el-tab-pane v-for="item in list" :key="item.id" :name="item.label">
                        <template #label>
                            <el-badge :is-dot="activeName == item.label" class="item"><span style="padding: 0 10px;">{{ item.label }}</span></el-badge>
                        </template>
                        <div class="tab-content" :style="isExpand?'height: 500px;':'height: 180px;'">
                            <div :class="disabled==true?'disable-click contents':'contents'">
                                <div v-for="items in item.gameMaterialDatas" :key="items.label"  @click="clickSelect(items,'not')" :class="selectType ==items.url?'contentsBorder select':'contentsBorder Uncheck' ">
                                    <img :src="fileHost+items.url" style="width: 100%;" alt="" >
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="t('自定义')" name="自定义">
                        <div :class="disabled==true? 'disable-click tab-content':'tab-content'" :style="isExpand?'height: 500px;':'height: 180px;'">
                            <div class="contents contentsIcon" style="display: flex;">
                               <upload-icon @updateIcon="updateIcons" :typeUpImg="101" :limit="1" :fileType="['jpg', 'png', 'jpeg']"
                               :fileSize="1"></upload-icon>
                                <div style="width: 290px;text-wrap: wrap;margin-left: 5px;">
                                  <span style="color: red;">*</span>{{ t('只能上传文件，且不超过1MB，图片尺寸为343px*300px') }}</div>
                                <div class="buttonClass" style="cursor: pointer;"  @click="delectClick">{{ t('删除') }}</div>
                            </div>
                            <div class="contents" style="margin-top: 10px;">
                                <div v-for="item2 in listFale"  @click="clickSelect(item2,'its')" :class="selectType ==item2.url?'contentsBorder select':'contentsBorder Uncheck' ">
                                    <img :src="fileHost+item2.url" style="width: 100%;" alt="" >
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
    
    </div>
    <div class="imgArrow" @click="clickAwor">
        <img v-if="!isExpand" src="@/assets/icons/svg/arrow1.svg" style="width: 25;height: 23px;"/>
        <img v-else src="@/assets/icons/svg/arrow2.svg" style="width: 25;height: 23px;"/>
        <span v-if="!isExpand">展开</span>
        <span v-else>收起</span>
    </div>

</template>

<script setup>
import { getSelectData } from '@/api/common.js';
import { getLocalStorage } from "@/utils/auth";
import UploadIcon from "@/components/UploadIcon"; // Banner排版BannerImg
const props = defineProps({
    url: {
        type: String,
        default: ''
    },
    query: {
        type: Object
    },
    method: {
        type: String,
        default: 'get'
    },
    imageUrl: {
        type: String, //Banner图图标
        default: ''
    },
    disabled:{ // 是否禁用
        type: Boolean,
        default: false
    }
});
const emits = defineEmits(['clickSelect']) //子组件传值
const fileHost = getLocalStorage('fileUrl') || '';    // 文件host
const tabScrollContent = ref(null); // 获取tab-scroll-content
const list = ref([]); // 默认数据
const delectItem = ref({});
const listFale = ref([]); // 自定义上传列表数据
const activeName = ref(''); // 默认选中
const selectType = ref(''); // 选中类型
const isExpand = ref(false); //展开收起
// 点击选择
const clickSelect = (item,type) => {
    selectType.value = item.url
    item.type = type;
    delectItem.value = item.url;
    emits('clickSelect', item);
}

const delectClick = () =>{
    if (!delectItem.value || Object.keys(delectItem.value).length === 0){
        proxy.$modal.msgError(proxy.t('请选择需要删除的内容'));
        return
    }
    const index = listFale.value.findIndex(item => item.url === delectItem.value);
    if (index !== -1) {
        listFale.value.splice(index, 1)
        emits('clickSelect', '');
    }
}
const clickAwor = () => {
    isExpand.value = !isExpand.value;
}
// 获取数据
const getList = async () => {
    const { query, method, url } = props
    try {
        const parmas = { pageNumber: 1, pageSize: 1000, ...query }
        await getSelectData(url, parmas, method).then(res => {
            //循环
            res.data.map((item,index) => {
                if (index == 0){
                    activeName.value = item.label
                }
                if (props.imageUrl){
                    selectType.value = props.imageUrl
                }else{
                    if (index == 0){
                        selectType.value = item.gameMaterialDatas[0].url
                        emits('clickSelect', item.gameMaterialDatas[0]);
                    }
                }
               
                list.value.push(item);
            })
            res.data.map(item => {
                item.gameMaterialDatas.map(item2 => {
                    if (item2.url == props.imageUrl){
                        activeName.value = item.label;
                    }
                })
            })
        })
    } catch (e) {
    }
}
getList();
const handleClick = (tab, event) => {
}
const updateIcons = (file) => {
    listFale.value=file;
}
</script>
<style lang="scss" scoped>

.tab-container {
  position: relative;
//   width: 462px;
    // height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tab-scroll-content {
  overflow-x: auto;
  white-space: nowrap;
  flex-grow: 1;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
  user-select: none; /* 禁止用户选择文本 */
}

.left-btn {
  left: 10px; /* 根据需要调整位置 */
}

.right-btn {
  right: 10px; /* 根据需要调整位置 */
}

/* 可选：为el-tab-pane设置内联块样式以确保它们在同一行显示 */
.el-tab-pane {
  display: inline-block;
}
.tab-content{
    // width: 462px;
    height: 500px;
    overflow-y: auto;
    .contents{
        // width: 455px;
        display: flex;
        flex-wrap: wrap;
        .contentsBorder{
            width: 70px;
            height: 70px;
            margin-right: 3px;
            margin-top: 3px;
            cursor: pointer;
        }
        .Uncheck{
             border: 1px solid #d1d5db;
        }
        .select{    
            border: 1px solid #409EFF;
        }
    }
}
.buttonClass{
    width: 70px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border: 1px solid #409EFF;
    color: #fff;
    background: #409EFF;
    border-radius: 5px;
}
.imgArrow{
    display: flex;
    align-items: center;
    // width: 500px;
    justify-content: right;
    padding-right: 0px;
    color: #409EFF;
    cursor: pointer;
}
.borderOverflow{
    border: 1px solid #d1d5db;
    overflow: hidden;
}
.disable-click {
    pointer-events: none;
}
</style>
<style>
.contentsIcon .el-upload--picture-card {
  width: 70px !important; /* 设置上传后图片卡片的宽度 */
  height: 70px !important; /* 设置上传后图片卡片的高度 */
}
</style>