aida_front/src/component/HomePage/index/workflow/workspace.vue

<template>
    <div class="workspace">
		<div class="workspaceBox">
			<div class="title marginBottom" style=" display:flex;align-items: center;">
				<i v-if="firstTime" @click="setBack" style="font-size:3rem; display:flex; cursor: pointer;margin-right:2rem" class="fi fi-rr-arrow-small-left"></i>
				Porject setting 
			</div>
			<div class="projectName marginBottom" v-if="show.title">
				<div class="text">Project name: <span style="color: red;">*</span></div>
				<div class="input">
					<input type="text" v-model="selectObject.name">
					<!-- <i class="fi fi-rr-edit"></i> -->
				</div>
			</div>
			<div class="gender marginBottom" v-if="show.age">
				<div class="text">Age</div>
				<div class="radio">
					<label>
						<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
						<span>Adult</span>
					</label>
					<label>
						<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
						<span>Child</span>
					</label>
				</div>
			</div>
			<div class="gender marginBottom">
				<div class="text">Gender：</div>
				<div class="radio">
					<label>
						<input type="radio" name="gender" v-model="selectObject.sex" value="Female">
						<span>Female</span>
					</label>
					<label>
						<input type="radio" name="gender" v-model="selectObject.sex" value="Male">
						<span>Male</span>
					</label>
				</div>
			</div>
			<div class="style marginBottom" v-if="show.style">
				<div class="text">Style：</div>
				<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
				<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
			</div>
			<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
				<a-slider class="system_silder"
                    v-model:value="selectObject.systemDesignerPercentage"
					:tip-formatter="formatter"
					:tooltipVisible="false"
				>
                </a-slider>
                <div class="text">
                    <div class="left">
						{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
					</div>
                    <div class="right">
					
						{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
					</div>
                </div>
			</div>
			<div class="position marginBottom" v-show="show.position">
				<generalMenu :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
			</div>
			<div class="complete">
				<div class="gallery_btn" @click="complete">Complete</div>
			</div>
		</div>
		<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,watch,nextTick,onBeforeMount,toRefs, reactive, onMounted, inject} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
// import workspace from './model/workspace.vue'
import router from '@/router';
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import { Https } from '@/tool/https';
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
import { id } from 'element-plus/es/locale';
import { message } from 'ant-design-vue';
export default defineComponent({
    components:{
		habitSetStyle,generalMenu
    },
	props:{
	    workflowType:{
	        type:String,
			default:''
	    },
		httpWorkflowType:{
	        type:String,
			default:''
	    },
		firstTime:{
	        type:Boolean,
			default:false
		}
	},
	emits:['setProject'],
    setup(props,{emit}) {
		const { t } = useI18n();
        const store = useStore();
		const data = reactive({
			selectObject_:computed(()=>store.state.Workspace.probjects),//选择的项目
			selectObject:{} as any,
			femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
			malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
			mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
			show:{
				title:true,
				gender:false,
				style:false,
				age:false,
				systemDesigner:false,
				position:false,
			},
			systemDesigner:{
				system:0,
				designer:0,
			},
			setIsShowMark:inject('setIsShowMark') as any,
		})
		watch(()=>data.selectObject_,(newVal)=>{
			data.selectObject = JSON.parse(JSON.stringify(newVal))
		})
		const dataDom = reactive({
			habitSetStyle:null as any,
		})
		const setStyle = ()=>{
			dataDom.habitSetStyle.init(data.selectObject);
		}
		const setWorkspaceStyle = (value:any)=>{
			data.selectObject.styleName = value.name
			data.selectObject.style = value.value
			data.selectObject.styleId = value.id
			// store.commit('setProbject',data)
		}
		const setprintModel = (value:any)=>{
			data.selectObject.position = value
		}
		const formatter = (value: number)=>{
			data.systemDesigner.system = 100 - value
			data.systemDesigner.designer = value
			let num = Math.abs((value-50)*2)
			return `${num}%`;
		}
		const complete = ()=>{
			if(!data.selectObject.name){
				message.info(t('PrintboardUpload.jsContent7'))
				return
			}
			let value = {
				name:data.selectObject.name,
				process:props.httpWorkflowType,
				styleId:data.show.style?data.selectObject.styleId:null,
				id:data.selectObject.id,
				workspace:{
					sex:data.selectObject.sex,
					// sex:data.show.gender?data.selectObject.sex:null,
					systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
					position:data.show.position?data.selectObject.position.value:'Overall',
					ageGroup:data.show.style?data.selectObject.ageGroup:null,
					// position:data.selectObject,
				} as any,

			}
			Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
				if(rv){
					data.selectObject.id = rv.id
					let model:any = {}
					let position = []
					if(data.selectObject.sex == "Female"){
					// if(rv.workspaceVO.sex == "Female"){
						model = {
							id:rv.workspaceVO.mannequinFemaleId,
							type:rv.workspaceVO.mannequinFemaleType,
							url:rv.workspaceVO.femalePresignedUrl,
						}
						position = store.state.UserHabit.FemalePosition
					}else{
						model = {
							id:rv.workspaceVO.mannequinMaleId,
							type:rv.workspaceVO.mannequinMaleType,
							url:rv.workspaceVO.malePresignedUrl,
						}
						position = store.state.UserHabit.MalePosition
					}
					// model.url = rv.workspaceVO.malePresignedUrl
					data.selectObject.model = model
					data.selectObject.positionList = position
					store.commit('setProbject',data.selectObject)
					emit('setProject','set')
				}
			})
		}
		const openSetData = ()=>{

		}
		const setBack = ()=>{
			let data = {
				type:'',
				httpType:'',//项目类型
			}
			store.commit('setProbject',data)
			store.commit('setProjectList',[])
		}
		onMounted(()=>{
			data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
			data.show.gender = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'printingDesign3D')
			data.show.style = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
			data.show.age = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'sketchDesign')
			data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
			data.show.position = (props.workflowType == 'singleProductDesign')
			
			if(!data.mannequinStyle && (props.workflowType == 'seriesDesign' || props.workflowType =='sketchDesign')){
				data.setIsShowMark(true)
				Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
					(rv) => {
						data.setIsShowMark(false)
						rv.forEach((item:any) => {
							let name = item.value
							item.value = item.name
							item.name = name
						});
						data.selectObject.style = rv[0].value
						data.selectObject.styleName = rv[0].name
						data.selectObject.styleId = rv[0].id
						store.commit('setMannequinStyle',rv)
					}
				).catch(res=>{
					data.setIsShowMark(false)
				});
			}
		})
		watch(()=>data.selectObject.sex,(newVal)=>{
			if(newVal == 'Male'){
				data.selectObject.positionList = data.malePosition
			}else{
				data.selectObject.positionList = data.femalePosition
			}
			data.selectObject.position = data.selectObject.positionList[0]
		})
        return{
			...toRefs(dataDom),
			...toRefs(data),
			setStyle,
			setWorkspaceStyle,
			setprintModel,
			formatter,
			complete,
			openSetData,
			setBack,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
	.workspace{
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 600;
		font-size: 1.8rem;
		> .workspaceBox{
			width: 55rem;
			padding: 0 5rem;
			> .marginBottom{
				margin-bottom: 3rem;
			}
			> .title{
				font-size: 2.7rem;
				> span{
					color: #999999;
					font-size: 1.4rem;
				}
			}
			> .projectName{
				> .text{
					margin-bottom: 2rem;
				}
				> .input{
					padding: 1rem 2rem;
					// padding: 2rem 2.7rem;
					font-size: 1.6rem;
					border-radius: 1.6rem;
					border: 2px solid #D0D0D0;
					display: flex;
					> input{
						flex: 1;
						border: none;
					}
					> i{
						display: flex;
						color: #999999;
						align-items: center;
						font-size: 2.4rem;
					}
				}
			}
			> .gender{
				display: flex;
				> .text{
					width: 8rem;
				}
				> .radio{
					display: flex;
					margin-left: 4.5rem;
					> label{
						display: flex;
						margin-right: 4rem;
						>input{
							margin-right: 1.5rem;
						}
					}
				}
			}
			> .style{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			> .systemDesigner{
				> .text{
					display: flex;
					justify-content: space-between;
				}
			}
			> .position{
				:deep(.generalMenu_printModel){
					position: relative;
					margin: 0;
					> div,> ul{
						width: 100%;
						border-radius: 1.6rem;
						border: 2px solid #D0D0D0;
					}
				}
			}
			> .complete{
				width: 100%;
				text-align: right;
				> div{
				}
			}
		}
	}
</style>