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' || collectionStep == 1"></MoodboardUpload>
                <PrintboardUpload ref="printBoard" v-if="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
                <ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
                <SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard' || collectionStep == 4"></SketchboardUpload>
                <mannequin ref="mannequin" v-if="openType == 'mannequin' || collectionStep == 5"></mannequin>
			</div>
			<div class="collection_page">
				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
				<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
				<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>

			</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:'',
			collectionStep:1,
			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
			const keys = Object.keys(dataDom);
			data.collectionStep = keys.indexOf(value) + 1; // 1
			nextTick(()=>{
				dataDom[value].openSetData()
			})
		}
		let cleardata = ()=>{
			data.habitSetStyle = false
			data.collectionStep = 1
			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)
				})
			})
		}
		let lastStep = ()=>{
			data.collectionStep = data.collectionStep - 1
			setOpenSetData()
		}
		let nextStep = ()=>{
			data.collectionStep = data.collectionStep + 1
			setOpenSetData()
		}
		const setOpenSetData = ()=>{
			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
			saveProject(data.openType)
		
			const keys = Object.keys(dataDom); 
			const key = keys[data.collectionStep - 1];
			data.openType = key
			nextTick(()=>{
				dataDom[key].openSetData()
			})
		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			cleardata,
			init,
			lastStep,
			nextStep,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.collectionModal{
		:deep(.designOpenrtion_content){
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			position: relative;
			> .collection_page{
				left: 50%;
				transform: translateX(-50%);
				bottom: -4rem;
				display: flex;
				position: absolute;
				.fi-rr-arrow-small-left{
					margin-right: calc(10rem*1.2);
				}
				.fi{
					cursor: pointer;
					display: flex;
					height: 100%;
				}
				.fi::before{
					padding: 5px;
					border-radius: 50%;
					color: rgba(0, 0, 0, 0.55);
					border: solid 2px rgba(0, 0, 0, 0.25);
					transition: 1s all;
				}
				.fi:hover.fi::before{
					border: solid 2px rgba(0, 0, 0, 0.55);
					color: rgba(0, 0, 0, 1);
				}
			}
			.collectionBox{
				width: 100%;
				height: 100%;
				display: flex;
				.collection_modal_item{
					overflow: hidden;
				}
			}
		}
	}
</style>