242 lines
7.7 KiB
Vue
242 lines
7.7 KiB
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> |