aida_front/src/component/home/newProject/index.vue

<template>
	<div class="newProject">
		<div class="contentBox">
			<div class="select" v-show="!isCreateBox">
				<div class="title">AiDA</div>
				<div class="info">{{ $t('newProjectg.info') }}</div>
				<div class="selectList">
					<div :class="{active:selectFlow?.value == seiesDesign.value}" @click="selectSeiesOrSingle(seiesDesign)">
						<img src="@/assets/images/homePage/icon/homeCreateSeriesDesign.svg" alt="">
						<span>{{ seiesDesign.title }}</span>
					</div>
					<div  :class="{active:selectFlow?.value == singleDesign.value}" @click="selectSeiesOrSingle(singleDesign)">
						<img src="@/assets/images/homePage/icon/homeCreateSingleDesign.svg" alt="">
						<span>{{ singleDesign.title }}</span>
					</div>
				</div>
				<div class="gallery_btn gallery_btn_radius" @click="goCreate">{{ $t('newProjectg.CreateProject') }}</div>
			</div>
			<div class="content" v-show="isCreateBox">
				<i class="fi fi-rr-arrow-small-left" @click="()=>isCreateBox = false"></i>

				<div class="workspaceBox">
					<workspace @setProject="setProject" :httpWorkflowType="selectFlow?.value"></workspace>
				</div>
			</div>
		</div>
		<div class="mark_loading" v-show="loadingShow">
			<a-spin size="large" />
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
import { useI18n } from 'vue-i18n'
import {getCookie,clonAllCookie} from '@/tool/cookie'
import router from '@/router';
import workspace from './workspace.vue'
export default defineComponent({
	components:{
		workspace,
	},
	props:{
	},
	emits:['newProject'],
	setup(props,{emit}) {
		const {t} = useI18n()
		const store = useStore();
		const data = reactive({
			seiesDesign:{
				title:computed(()=>t('newProjectg.series')),
				value:'SERIES_DESIGN',
			},
			singleDesign:{
				title:computed(()=>t('newProjectg.single')),
				value:'SINGLE_DESIGN',
			},	
			selectFlow:{
				
			},
			isCreateBox:false,
			loadingShow:false,
		})
		const dataDom = reactive({
		})
		const setProject = (item:any)=>{
			emit('newProject',item)
			// router.push(`home?history=${item.id}`)
		}
		const selectSeiesOrSingle = (type:any)=>{
			data.selectFlow = type
		}
		const goCreate = ()=>{
			if(!data.selectFlow?.value){
				return message.info(t('newProjectg.selectDesignType'))
			}
			data.isCreateBox = true
		}
		onMounted(()=>{
			store.commit('createProbject')
		})
		return{
			...toRefs(dataDom),
			...toRefs(data),
			setProject,
			selectSeiesOrSingle,
			goCreate,
		}
	},
	provide() {
		return {
		}
	},
})
</script>
<style lang="less" scoped>
	.newProject{
		width: 100%;
		height: 100%;
		position: relative;
		> .contentBox{
			width: 100%;
			height: calc(100% - 3.9rem);
			// height: calc(100% - 7.8rem);
			display: flex;
			align-items: center;
			justify-content: center;
			> .select{
				display: flex;
				flex-direction: column;
				align-items: center;
				> .title{
					font-size: 4rem;
					font-weight: 600;
				}
				> .info{
					margin-top: 1.2rem;
					font-weight: 600;
					font-size: 2.4rem;
				}
				> .selectList{
					margin-top: 4.8rem;
					display: flex;
					> div{
						margin-right: 6rem;
						border-radius: 3.2rem;
						cursor: pointer;
						border: 1px solid #D9D9D9;
						background-color: #fff;
						height: 6.5rem;
						padding: 0 2.3rem;
						display: flex;
						align-items: center;
						&.active{
							background-color: #efeff1;
						}
						> img{
							width: 2.7rem;
							height: 2.7rem;
							margin-right: 1rem;
						}
						> span{
							font-weight: 600;
							font-size: 2rem;
							color: #3B3B3B;
						}
						&:last-child{
							margin-right: 0;
						}

					}
				}
				.gallery_btn{
					margin-top: 4rem;
				}
			}
			> .content{
				// background: red;
				// width: 88rem;
				height: 100%;
				position: relative;
				> i{
					cursor: pointer;
					position: absolute;
					transform: translateX(-100%);
					left: -2.6rem;
					top: 1.8rem;
					width: 5rem;
					height: 5rem;
					display: flex;
					font-size: 4rem;
					color: #fff;
					background-color: #000;
					border-radius: 50%;
					align-items: center;
					justify-content: center;
				}
				> .title{
					font-size: 2rem;
					font-weight: 600;
					text-align: center;
				}
				> .workspaceBox{
					// height: 89rem;
					height: 100%;
					// flex: 1;
					border-radius: 1.6rem;
					padding: 3.2rem 0rem;
					border: 2px solid #D0D0D0;
					:deep(.workspace){
						padding: 0;
						height: 100%;
						> .workspaceBox{
							> div{
								padding: 0rem 2.1rem;
							}
						}
					}
				}
			}
		}
	}
</style>