aida_front/src/component/HomePage/sketchCategory.vue

<template>
   <div class="operate_file_block">
		<div class="select_img_type">
			<div
				class="select_category"
				:class="driverClass.class1"
				@click.stop="showFileCategory(item)"
			>
				{{ item.category || item?.level2TypeEnum?.value }}
				<div
					v-show="!isSpread"
					:class="[
						'icon',
						'iconfont',
						'icon-xiala',
						item.categoryShow
							? 'icon_rotate'
							: '',
					]"
				></div>
			</div>
			<div
				class="category_list"
				v-show="item.categoryShow"
				v-if="!isSpread"
				:class="[driver__?'showEvents':'',driverClass.class2]"
			>
				<div
					:class="[
						'category_item',
						item.categoryValue == cate.value
							? 'select_category_item'
							: '',
					]"
					v-for="(
						cate, index
					) in disignTypeList"
					:key="index"
					@click.stop="
						selectFileCategory(
							item,
							cate
						)
					"
				>
					{{ cate.name }}
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent,ref ,nextTick, computed,watch, onMounted} from "vue";  
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
export default defineComponent({
    name:'filterComponent',
	emits:['upTypeSucced'],
    props:{
        disignTypeList:{
            type:Object,
			default:{}
        },
        item:{
            type:Object
        },
        generateList:{
            type:Array
        },
		isSetSketchCategory:{
			type:Boolean,
			default:false,
		},
		isSpread:{
			type:Boolean,
			default:false,
		},
		driver__:{
			type:Boolean,
			default:false,
		},
		driverClass:{
			type:Object,
			default:{class1:'',class2:''},
		}
    },
    setup(props:any,{emit}){
		let data = ''
		let showFileCategory = (file:any)=> {
			nextTick().then(()=>{
				if(props.driver__){
					
					driverObj__.moveNext()
				}
			})
			if(props.isSpread)return
            file.categoryShow = true;
            document.addEventListener("click", hiddenFileCategory);
        }
		let hiddenFileCategory = () => {
			for (let item of props.generateList) {
				item.categoryShow = false;
			}
            document.removeEventListener("click", hiddenFileCategory);
        }
		let selectFileCategory = (file: any, cate: any) => {
			for (let item of props.generateList) {
				item.categoryShow = false;
			}
			file.level2Type = cate.value;
			file.categoryValue = cate.value;
			file.category = cate.name;
			if(props.isSetSketchCategory){
				setSketchLibrary(props.item)
			}
			if(props.driver__){
				
				driverObj__.moveNext()
			}
				// this.store.commit("sketchGenerateFiles", this.fileList);
			
        }
		let setSketchLibrary = (item:any)=>{
			
			let data = {
				libraryId:[item.id],
				level2Type:item.categoryValue,
			}
			Https.axiosPost(Https.httpUrls.setSketchLibrary,data).then(
                (rv: any) => {
					emit('upTypeSucced')
                }
            ).catch((res)=>{
            });
		}
		onMounted(()=>{
			if(!props.item.category){
				props.disignTypeList.forEach((item:any) => {
					if(item.value == props.item.level2Type){
						props.item.category = item.name
						props.item.categoryValue = item.value
					}
				});
			}
				
		})
        return {
            showFileCategory,
			selectFileCategory,
        }
        
    },
   
});
</script>
<style lang="less" scoped>
//衣服类型下拉菜单
.operate_file_block{
	width: 100%;
	height: 3rem;
	font-size: 1.6rem;
	color: #FFFFFF;
	position: absolute;
	left: 0;
	bottom: 0;

	.select_img_type{
		height: 100%;
		line-height: 3rem;
		text-align: center;
		background: rgba(0,0,0,0.6);
		position: relative;
		overflow: initial !important;
		.select_category{
			display: flex;
			align-items: center;
			justify-content: center;

			.icon-xiala{
				margin-left: 0.8rem;
			}
		}

		.icon_rotate{
			-moz-transform:rotate(180deg);
			-webkit-transform:rotate(180deg);
			transform: rotate(180deg);
			animation-direction: 0.5s;
		}

		.category_list{
			position: absolute;
			width: 100%;
			cursor: pointer;
			position: absolute;
			// top: 3.1rem;
			margin-top: .2rem;
			left: 0;
			// background: rgba(0,0,0,0.4);
			background-color: rgb(177 177 177);
			border: 1px solid #000;
			border-radius: 0.8rem;
			// overflow: hidden;
			z-index: 3;
			height: 9rem;
			overflow-x: hidden;
			&.category_list::-webkit-scrollbar{display: none;}

			.category_item{
				text-align: left;
				font-size: 1.4rem;
				padding: 1rem 1.5rem;
				line-height: 1.6rem;
				font-weight: 600;
				color: #595959;

				&.select_category_item{
					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
				}

				&:hover{
					background: linear-gradient(-137deg, #eeefdb, #e7dbed);
				}
			}
		}
	}
}
</style>