aida_front/src/component/home/design/collection.vue

<template>
	<div class="collectionModal" ref="collectionModal"></div>
	<a-modal
		class="collection generalModel"
		v-model:visible="habitSetStyle"
		:footer="null"
		width="75%"
		:get-container="() => $refs.collectionModal"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="true"
		:keyboard="false"
		:destroyOnClose="true"
		:zIndex="1000"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cleardata()">
				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
				</svg>
			</div>
		</div>
		<div class="designOpenrtion_content">
			<!-- <div class="modal_title_text">
				<div>Setting</div>
			</div> -->
			<div class="collectionBox">
				<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard'"></MoodboardUpload>
                <PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
                <ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
                <SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
                <mannequin ref="mannequin" v-if="openType == 'mannequin'"></mannequin>
			</div>
		</div>
		<div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div>
	</a-modal>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { init } from 'echarts/core';
import MoodboardUpload from './collection/MoodboardUpload.vue';
import PrintboardUpload from './collection/PrintboardUpload.vue';
import ColorboardUpload from './collection/ColorboardUpload.vue';
import SketchboardUpload from './collection/SketchboardUpload.vue';
import mannequin from './mannequin/index.vue';

export default defineComponent({
	components:{
		MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
	},
	props:{
	},
	emits:['getHistory'],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			habitSetStyle:false,
			isShowMark:false,
			openType:'',
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
		})
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		}) 
		provide('driver__',driver__) 
		const dataDom = reactive({
			moodBoard:null as any,
			printBoard:null as any,
			colorBoard:null as any,
			sketchBoard:null as any,
			mannequin:null as any,
		}) as any
		const init = (value:any)=>{
			data.habitSetStyle = true
			data.openType = value
			nextTick(()=>{
				dataDom[value].openSetData()
			})
		}
		let cleardata = ()=>{
			data.habitSetStyle = false
			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
			saveProject(data.openType)
		}
		const saveProject = (str:any)=>{
			if(str == 'design')return
			let value:any = {
				projectId:data.selectObject.id,
			}
			store.dispatch('getProjectData',str).then((data)=>{
				if(!data[str])return
				value[str] = data[str]
				Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
					if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
				})
			})
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			cleardata,
			init,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.collectionModal{
		:deep(.designOpenrtion_content){
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			position: relative;
			.collectionBox{
				width: 100%;
				height: 100%;
				display: flex;
				.collection_modal_item{
					overflow: hidden;
				}
			}
		}
	}
</style>