aida_front/src/component/HomePage/index/workflow/content/printDesign.vue

<template>
	<div class="seriesDesign">
		<workspace @setProject="workspaceBack" ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,inject,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import workspace from '../../workflow/workspace.vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
import canvasUpload from "@/component/Canvas/index.vue";

import { gsap, TweenMax } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export default defineComponent({
    components:{ 
		PrintboardUpload,canvasUpload,workspace
    },
	props:{
		selectKey_:{
			type:String,
			default:''
		},
		workflowType:String,
		httpWorkflowType:String,
	},
	emits:['projectComplete'],
    setup(props,{emit}) {
        const store = useStore();
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		}) 
		provide('driver__',driver__) 
		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
		const data = reactive({
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			workspaceBack:inject('setBack') as any,
		})
		const dataDom:any = reactive({
			printBoard:null as any,
			canvas:null as any,
		})
		const open = (str:any)=>{
			nextTick(()=>{
				if(dataDom[str]?.openSetData){
					dataDom[str].openSetData()
				}
			})
		}
		const setitemData = (arr:any)=>{
			return new Promise((resolve,reject)=>{
			    nextTick(()=>{
					arr.forEach((rv:any)=>{
						let arr = ['design','patternMaking3D'] 						
						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
						dataDom[rv].openSetData()
					})
					resolve('')
				})
			})
		}
		const unfold = ()=>{
			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
		}
		const getCollection = ()=>{
			let value:any = {
				 "id":data.selectObject.id,
				"moduleList":["printBoard", ]
			}
			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
				historyChooseData(rv)
				let allBoardData = ['printBoard']
				let canvasData = ['canvas']
				for (let index = 0; index < canvasData.length; index++) {
					const item = canvasData[index];
					await getCanvasData(item)
				}
				await setitemData(allBoardData)
				allBoardData.forEach((item)=>{
					let value = {
						type:item,
						objectName:data.selectObject.type,
					}
					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
					if(arr.indexOf(item) != -1){
						store.dispatch('setAllBoardData',value)
					}else{
						store.dispatch('setModularData',value)
					}
				})

			})
		}
		const getCanvasData = (str:any)=>{
			return new Promise((resolve, reject) => {
				let value = {
					module:str,
					projectId:data.selectObject.id,
				}
				Https.axiosPost(Https.httpUrls.exportSearch, value)
				.then((rv) => {
					store.commit("setCanvasData", {type:str,file:rv});
					resolve('')
				})
				.catch((rv) => {
					resolve(null)
				});
			})
		}
		const historyChooseData = (data:any)=>{
			let collectionData = {
				printboardFiles: dealViewChooseData(
					data.printBoard,"Printboard"
				),
				generatePrintFiles: [],
			};
			store.commit("setAllBoardDataChoose", collectionData);
		}
		//统一处理选择组的渲染数据
		const dealViewChooseData = (data: any,str:string)=> {
			if (!data) {
				return [];
			}
			let filesList = data.map((v: any) => {
				let newData: any = {
					imgUrl: v.url?v.url:v.designOutfitUrl,
					id: v.id,
					status: "done",
					resData: v,
					type_:{
						type1:'material',
						type2:v.level1Type
					}
				};
				if (v.level1Type === "Sketchboard") {
					newData.pin = v.isPin;
					newData.categoryValue = v.level2Type;
					newData.level2Type = v.level2Type;
				}
				if (v.level1Type === "Printboard") {
					newData.pin = v.isPin;
					newData.level2Type = v.level2Type;
					newData.categoryValue = v.level2Type;
				}
				return newData;
			});
			return filesList;
		}
		onMounted(()=>{
			nextTick(()=>{
				getCollection()
			})
		})
        return{
			...toRefs(dataDom),
			...toRefs(data),
			open,
			unfold,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.seriesDesign{
		display: flex;
		width: 100%;
		height: 100%;
		> .contentBox{
			position: relative;
			flex: 1;
			overflow: hidden;
			> .content,
			>.homeContent{
				width: 100%;
				height: 100%;
				padding: 4rem;
				// padding: 3rem;
			}
			> .content{
				position: absolute;
				top: 0;
				left: 0;
				transform: scale(0);
				background: #ff6666;
				display: flex;
				flex-direction: column;
				> *{
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
				> .back{
					width: auto;
					height: auto;
					cursor: pointer;
				}
			}
			> .homeContent{
				// background: #91ff66;
				position: absolute;
			}
		}
	}
</style>