aida_front/src/component/Detail/detailLeft/element.vue

<template>
    <div class="element">
		<div class="detailText">{{$t('DesignPrintOperation.CurrentElement')}}</div>
		<div class="select_element">
			<img :class="{active:elementList.length == 1}" v-for="item in elementList" @click="addElement(item)" :src="item.path" alt="">
			<!-- <img :src="selectDetail.path" alt="">
			{{ selectDetail }} -->
			<div v-if="elementList.length == 0">
				<i class="fi fi-rr-picture centent"></i>
			</div>
		</div>
		<selectList @selectImgItem="selectImgItem" level1Type="DesignElements" type="element" :catecoryList="printCatecoryList"></selectList>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import selectList from './module/selectList.vue'
export default defineComponent({
    components:{
		selectList,
    },
    setup(props,{emit}) {
        const store = useStore();
		const detailData = reactive({
			selectTitle:'current',
			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
			printCatecoryList:computed(()=>{
				return store.state.UserHabit.designElementsType
			}),
			elementList:[],
			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType)
		})
		watch(()=>detailData?.selectDetail?.trims?.prints,(newVal,oldVal)=>{
			if(!newVal)return
			detailData.elementList = newVal.reduce((acc:any, curr:any) => {
				if (!acc.some((item:any) => item.minIOPath === curr.minIOPath)) {
					acc.push(curr);
				}
				return acc;
			}, []);
			
		},{immediate: true})
		const getDetailListData = reactive({
			total:0,
			pageSize:10,
			currentPage:1,
		})
		const getDetailListDom = reactive({
			libraryList:null as any,
		})
		const openCurrent = ()=>{
			detailData.selectTitle = 'current'
		}
		const openUpload = ()=>{
			detailData.selectTitle = 'upload'
		}
		const openLibrary = ()=>{
			detailData.selectTitle = 'library'
			getDetailListDom.libraryList.init()
		}
		const addElement = (data:any)=>{
			let value = {
				designType:data.designType,
				level2Type:data.level2Type,
				minIOPath:data.minIOPath,
				url:data.path,
			}
			store.commit('DesignDetail/setCurrentPrintElement',value)
		}
		const selectImgItem = (data:any)=>{
			let value = {
				data,
			}
			if(detailData.currentDetailType != 'print' && detailData.currentDetailType != 'element'){
				store.commit('DesignDetail/setNewDetail',value)
			}else{
				store.commit('DesignDetail/setCurrentPrintElement',null)
				store.commit('DesignDetail/setCurrentPrintElement',data)
			}
		}
		
        return{
			...toRefs(detailData),
			...toRefs(getDetailListData),
			...toRefs(getDetailListDom),

			openCurrent,
			openUpload,
			openLibrary,
			selectImgItem,
			addElement,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .element{
		// width: 34rem;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		> .detailText{
			margin-bottom: 1rem;
		}
		> .select_element{
			width: 100%;
			height: 23.5rem;
			padding: 1rem;
			text-align: center;
			border-radius: .5rem;
			// border: 1px dashed #202020;
			border: 1px dashed transparent;
        	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
			margin-bottom: 3rem;
			display: flex;
			flex-wrap: wrap;
			overflow: hidden;
			justify-content: space-between;
			overflow-y: auto;
			justify-content: flex-start;
			> img{
				object-fit: contain;
				height: 9rem;
				width: 9rem;
				overflow-y: auto;
				margin-bottom: 1rem;
				margin: 1rem;
				cursor: pointer;
			}
			> .active{
				width: 100%;
				height: 100%;
				margin: 0;
				margin-bottom: 0;
			}
			> div{
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				> i{
					font-size: 10rem;
				}
			}
		}
	}
</style>