371 lines
10 KiB
Vue
371 lines
10 KiB
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>
|
||
Project setting ({{ workflowTitle }})
|
||
</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" style="display: flex; align-items: center;justify-content: space-between;" v-show="show.position">
|
||
<div class="text">
|
||
Category:
|
||
</div>
|
||
<generalMenu style="width:80%" :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,onBeforeUnmount,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';
|
||
import {projectList} from '@/tool/listData'
|
||
export default defineComponent({
|
||
components:{
|
||
habitSetStyle,generalMenu
|
||
},
|
||
props:{
|
||
workflowType:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
httpWorkflowType:{
|
||
type:String,
|
||
default:''
|
||
},
|
||
workflowTitle:{
|
||
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{
|
||
projectList,
|
||
...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> |