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

<template>
	<div class="designToolsModel" ref="designToolsModel" v-show="designTools"></div>
	<a-modal
		class="collection generalModel fullScreen"
		v-model:visible="designTools"
		:footer="null"
		width="100%"
		height="100%"
		:get-container="() => $refs.designToolsModel"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		:mask="false"
		:keyboard="false"
		:destroyOnClose="false"
		: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="#000" 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">
				<toProductRelight ref="toProduct" 
					:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
					:isDesignPage="true"
					@setLike="designLike"
					class="toProduct" 
					:isState="openType =='toProduct'" 
					v-if="openType == 'toProduct'"
				></toProductRelight>
				<toProductRelight ref="relight" 
					:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
					:isDesignPage="true"
					@setLike="designLike"
					class="relight" 
					:isState="openType =='relight'"	
					v-if="openType == 'relight'"
				></toProductRelight>
				<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
			</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,inject,toRefs, reactive, onBeforeMount} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import toProductRelight from '../tools/toProduct/index.vue'
import poseTransfer from '../tools/poseTransfer/index.vue'

export default defineComponent({
	components:{
		toProductRelight,poseTransfer
	},
	props:{
	},
	emits:['editToolsSuccess'],
	setup(props,{emit}) {
		const store = useStore();
		const data = reactive({
			designTools:false,
			isShowMark:false,
			openType:'',
			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
			createProbject:inject('createProbject',()=>{}) as any,
			likeDesignList:[],
		})
		const dataDom = reactive({
			toProduct:null as any,
			relight:null as any,
			poseTransfer:null as any,
		}) as any
		const init = (value:any,list:any)=>{
			data.designTools = true
			data.openType = value
			data.likeDesignList = list
			console.log(list)
			nextTick(()=>{
				let fileList = [] as any
				if(value == 'toProduct'){
					list.forEach((item:any) => {
						item.type = 'DesignOutfit'
						fileList.push(item)
					});
				}else if(value == 'relight' || value == 'poseTransfer'){
					list.forEach((item:any) => {
						if(item.childList){
							item.childList.forEach((child:any) => {
								if(child.resultType == 'ToProductImage' || child.resultType == 'Relight'){
									fileList.push(child)
								}
							});
						}
					});
				}
				dataDom[value].openSetData(fileList)
			})
		}
		let cleardata = async ()=>{
			data.openType = ''
			data.likeDesignList = []
			data.designTools = false
		}
		const designLike = ()=>{

		}
		return{
			...toRefs(dataDom),
			...toRefs(data),
			cleardata,
			init,
			designLike,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.designToolsModel{
		position: relative;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		z-index: 1000;
		:deep(>div){
			
			// position: absolute;
			// .ant-modal-mask{
			// 	position: absolute;
			// }
			.ant-modal-wrap,.ant-modal-mask{

			}
			> .ant-modal-root{
				> .ant-modal-centered{
					> .fullScreen{
						> .ant-modal-content{
							box-shadow: none;
							> .ant-modal-body{
								padding: 0;
							}
						}
					}
				}
			}
		}
		.designOpenrtion_content{
			height: 100%;
			> .collectionBox{
				height: 100%;
			}
		}
		.fullScreen{
			 .generalModel_btn {
				.generalModel_closeIcon{
					transform: translate(-10%, 10%);
				}
			}
		}
	}
</style>