This commit is contained in:
WangXiaoDong
2023-09-25 10:09:00 +08:00
parent 173f35042d
commit d9868d5cf0
37 changed files with 1618 additions and 1146 deletions

View File

@@ -21,7 +21,7 @@
<div class="habit_model_show habit_workspace_show" v-fade="openType.workspace">
<ul class="habit_model_list">
<li v-for="item,index in workspace.workspaceList">
<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.name }}</div>
<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.workSpaceName }}</div>
<input v-show="item.putName" type="text" v-model="workspaceItemName">
<i @click.stop="putName(index,'put')" v-show="!item.putName" class="fi fi-rr-edit"></i>
<i @click.stop="putName(index,'affirm')" v-show="item.putName" class="fi fi-br-check"></i>
@@ -36,36 +36,38 @@
</div>
</div>
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !workspaceItem.sexType }"
>
</div>
<a-switch @change="setSex" v-model:checked="workspaceItem.sexType" />
<div
class="habit_Overal_Single_text"
:class="{ active: workspaceItem.sexType }"
>
</div>
<a-dropdown @click.stop="setOpenType('sex')">
<a-button>
<UserOutlined />
{{ workspaceItem.sex }}
<DownOutlined />
</a-button>
</a-dropdown>
<div class="habit_model_show habit_sex_show" v-fade="openType.sex">
<ul class="habit_model_list">
<li v-for="item,index in sex">
<div @click.stop="setSex(item.value)">{{ item.label }}</div>
</li>
</ul>
</div>
</div>
<div class="habit_Overal_Single">
<div
class="habit_Overal_Single_text"
:class="{ active: !workspaceItem.overallSingle }"
>
Overal
Overal
</div>
<a-switch @change="setOverall" v-model:checked="workspaceItem.overallSingle" />
<a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
<div
class="habit_Overal_Single_text"
:class="{ active: workspaceItem.overallSingle }"
>
Single
Single
</div>
</div>
<div class="habit_habit_singleton" v-show="!workspaceItem.overallSingle">
<div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
<a-dropdown @click.stop="setOpenType('singleton')">
<a-button>
<UserOutlined />
@@ -110,36 +112,45 @@
<div class="model_current">
<div class="model_text">Current</div>
<div class="model_img">
<img src="" alt="">
<img :src="workspaceItem.mannequinUrl" alt="">
</div>
</div>
<div class="model_Designer">
<div class="model_text">
<div
class="habit_System_Seleves_text"
:class="{ active: systemSeleves }"
:class="{ active: !systemSeleves }"
>
System
</div>
<a-switch @change="setSystemSeleves" v-model:checked="systemSeleves" />
<a-switch v-model:checked="systemSeleves" />
<div
class="habit_System_Seleves_text"
:class="{ active: !systemSeleves }"
:class="{ active: systemSeleves }"
>
Seleves
User
</div>
</div>
<div class="model_img">
<div v-for="(item,index) in systemSeleves?workspaceItem.system:workspaceItem.seleves" :key="item.id">
<img :src="item.url" alt="">
<div class="model_img" v-show="systemSeleves">
<div v-mousewheel>
<div v-for="(item,index) in mannequins[0].modelList" :key="item.id">
<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'Library')">
</div>
</div>
</div>
<div class="model_img" v-show="!systemSeleves">
<div v-mousewheel>
<div v-for="(item,index) in mannequins[1].modelList" :key="item.id">
<img :src="item.presignedUrl" alt="" @click="setMannequins(item,'System')">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal> -->
</div>
</template>
<script lang="ts">
@@ -148,164 +159,90 @@ import { defineComponent, createVNode, ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import type { MenuProps } from "ant-design-vue";
import ModelsModal from "@/component/LibraryPage/ModelsModal.vue";
import { message,Upload} from 'ant-design-vue';
export default defineComponent({
components: {
DownOutlined,
UserOutlined,
ModelsModal,
},
setup(){
let workspaceItem = ref({
id:1,
name:"工作台2",
id_:1,
workSpaceName:"工作台1",
putName:false,
systemDesignerPercentage:30,
position:'top',
sex:'male',
sexType:false,
position:'Outwear',
sex:'Female',
overallSingle:false,
current:{
},
system:[{
id:1,
url:"11111"
},
{
id:2,
url:"11111"
}],
seleves:[{
id:1,
url:"22"
},
{
id:2,
url:"222"
}],
mannequinUrl:'',
mannequinType:'',
mannequinId:'',
})
let systemSeleves= ref(true);
let mannequins:any = ref([{},{}])
let systemSeleves= ref(false);
let openType = ref({
workspace:false,
singleton:false,
habit:false,
model:false,
addWorkspace:false,
sex:false
})
let workspace = ref({
id:'2',
workspaceList:[
{
id:1,
name:"工作台2",
putName:false,
systemDesignerPercentage:24,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:2,
name:"工作台3",
putName:false,
systemDesignerPercentage:23,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
{
id:3,
name:"工作台1",
putName:false,
systemDesignerPercentage:100,
position:'top',
sex:'male',
current:{
},
system:[{
}],
seleves:[{
}],
},
],
let workspace:any = ref({
});
let workspaceItemName = ref('')//设置单独name公共使用
let singleTypeList = ref([
{
value: "Outwear",
label: "Outwear",
},
{
value: "Blouse",
label: "Blouse",
},
{
value: "Dress",
label: "Dress",
},
{
value: "Trousers",
label: "Trousers",
},
{
value: "Skirt",
label: "Skirt",
},
])
let sex = ref([
])
return{
systemSeleves,
mannequins,
openType,
workspace,
workspaceItem,
workspaceItemName,
singleTypeList
singleTypeList,
sex
}
},
watch:{
'openType.habit':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
if(!newVal){
this.store.commit("setWoekspace", this.workspaceItem);
let data = this.workspaceItem
this.putWorkspace(data)
this.store.commit("setWorkspace", this.workspaceItem);
}
}
},
'workspaceItem.id':{
'workspaceItem.id_':{
handler(newVal:any,oldVal:any){
console.log(newVal);
// this.store.state.Workspace.workspace
// if(!newVal){
// this.store.commit("setWoekspace", this.workspaceItem);
// this.store.commit("setWorkspace", this.workspaceItem);
// }
this.workspace.workspaceList = this.workspace.workspaceList
this.workspace.workspaceList.forEach((v:any)=>{
if(v.id == this.workspaceItem.id_){
this.workspaceItem = v
this.workspaceItem.id_ = v.id
}
if(v.id == oldVal){
this.getDetail(newVal)
delete v.isLastIndex
this.putWorkspace(v)
}
})
}
},
workspaceItem:{
handler(newVal:any,oldVal:any){
console.log(123123);
// this.store.state.Workspace.workspace
}
}
@@ -317,10 +254,12 @@ export default defineComponent({
},
mounted() {
this.getworkspace()
this.getSexPosition()
this.store.commit("setWorkspace", this.workspaceItem);
},
directives:{
fade:{
mounted (el) {
mounted (el,binding) {
el.addEventListener('click',()=>{
})
@@ -338,80 +277,167 @@ export default defineComponent({
}, 100);
}
}
},
mousewheel:{
mounted (el) {
let parent = el.parentNode
// el.style.width='100%'
// el.style.height='100%'
let num = 0
let width = el.offsetWidth
let parentWidth = parent.offsetWidth
el.addEventListener('mouseover',()=>{
width = el.offsetWidth
parentWidth = parent.offsetWidth
})
el.addEventListener('mousewheel',(e:MouseEvent)=>{
if(0>(e as WheelEvent).deltaY){
num+=15
if(num >= 0){
num = 0
}
}else{
num-=15
if(num<=parentWidth - width){
num = parentWidth - width
}
}
el.style.marginLeft = num+'px'
})
}
}
},
methods: {
getSexPosition(){
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.sex = arr
}
})
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Position'}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
let obj = {
value:item.name,
label:item.name,
}
arr.push(obj)
});
this.singleTypeList = arr
}
})
},
getworkspace(){
console.log(123);
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
// if (rv) {
// console.log(rv,'workspace');
// }
// })
// let url = Https.httpUrls.workspaceList + `?page=0&size=10`
// Https.axiosGet(url).then(
// (rv: any) => {
// console.log(rv);
// }
// ).catch(rv=>{
// })
let data = {
page:1,
size:10,
}
Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
if (rv) {
console.log(rv,'workspace');
this.workspace.workspaceList = rv.page.content
this.workspace.workspaceList.forEach((rv:any)=>{
if(rv.sex == '男装'){
rv.sexType == true
rv.page.content.forEach((v:any) => {
v.id_ = v.id
if(v.position == "Overall"){
v.overallSingle = false
}else{
rv.sexType == false
v.overallSingle = true
}
})
v.putName = false
if(v.id == rv.id){
this.workspaceItem = v
}
});
this.workspace.id = rv.id
this.workspace.workspaceList = rv.page.content
}
})
},
getDetail(id:any){
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
if (rv) {
}
})
},
getMannequins(){
Https.axiosGet(Https.httpUrls.getMannequins).then((rv: any) => {
if (rv) {
this.mannequins = rv
}
})
},
setSex(){
if(this.workspaceItem.sexType){
this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
}
putWorkspace(data:any){
Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
if (rv) {
this.getworkspace()
}
})
},
setOverall(){
if(this.workspaceItem.sexType){
this.workspaceItem.sex = 'female'
}else{
this.workspaceItem.sex = 'male'
deleteWorkspace(data:any){
Https.axiosDelete(Https.httpUrls.workspaceRemove,data).then((rv: any) => {
if (rv) {
this.getworkspace()
}
})
},
//
setOverallSingle(){
if(!this.workspaceItem.overallSingle){
this.workspaceItem.position = "Overall"
}
},
//修改名字
putName(index:number,v:string){
this.workspace.workspaceList.forEach(v => {
this.workspace.workspaceList.forEach((v:any )=> {
v.putName = false
});
if(v == 'put'){
this.workspaceItemName = this.workspace.workspaceList[index].name
this.workspaceItemName = this.workspace.workspaceList[index].workSpaceName
this.workspace.workspaceList[index].putName = true
}else if (v == 'delete'){
this.workspace.workspaceList.splice(index,1)
let data = [{
id:this.workspace.workspaceList[index].id,
}]
let id = this.workspace.workspaceList[index].id
this.deleteWorkspace(data)
}else{
if(this.workspaceItemName == ''){
message.error('Please enter a workbench name');
message.warning('Please enter a workbench name');
}else{
if(index == -1){
this.workspace.workspaceList.push(this.workspaceItem)
this.workspaceItem.id = 2
this.workspaceItem.name = this.workspaceItemName
let data = {
workSpaceName:this.workspaceItemName,
}
this.putWorkspace(data)
this.openType.addWorkspace = false
}else{
console.log(this.workspaceItemName,this.workspaceItem);
this.workspace.workspaceList[index].name = this.workspaceItemName
let data:any
this.workspace.workspaceList.forEach((item:any)=>{
if(this.workspace.workspaceList[index].id == item.id){
data = item
}
})
data.workSpaceName = this.workspaceItemName
this.putWorkspace(data)
this.workspace.workspaceList[index].workSpaceName = this.workspaceItemName
this.workspace.workspaceList[index].putName = false
}
}
@@ -429,45 +455,57 @@ export default defineComponent({
//根据id设置当前参数
setWorkspace(num:number){
this.openType.addWorkspace = false
this.workspace.workspaceList.forEach(v => {
this.workspace.workspaceList.forEach((v:any) => {
v.putName = false
});
this.workspace.workspaceList.forEach((v:any)=>{
if(v.id == num){
this.workspaceItem = v
}
})
this.workspaceItem.id_ = num
this.openType.workspace = false
},
//新建参数
newWorkspace(){
this.workspaceItemName = ''
this.openType.addWorkspace = true
},
setSex(v:any){
this.openType.sex = false
this.workspaceItem.sex = v
},
//设置single & overall
setSingle(v:string){
this.openType.singleton = false
this.workspaceItem.position = v
},
//切换系统还是自己的模特
setSystemSeleves(){
},
setMannequins(item:any,str:string){//设置模特
this.workspaceItem.mannequinId = item.id
this.workspaceItem.mannequinType = str
this.workspaceItem.mannequinUrl = item.url
},
setOpenType(v:string){
if(v == 'habit'){
this.openType.habit = !this.openType.habit
}else if(v == 'workspace'){
this.openType.singleton = false
this.workspace.workspaceList.forEach(v => {
v.putName = false
});
this.openType.sex = false
// this.workspace.workspaceList.forEach((v:any) => {
// v.putName = false
// });
this.openType.workspace = !this.openType.workspace
}else if(v == 'model'){
this.openType.singleton = false
this.openType.workspace = false
this.openType.sex = false
this.openType.model = !this.openType.model
this.getMannequins()
}else if(v == 'singleton'){
this.openType.singleton = !this.openType.singleton
this.openType.workspace = false
this.openType.sex = false
}else if(v == 'sex'){
this.openType.sex = !this.openType.sex
this.openType.workspace = false
this.openType.singleton = false
}
let mask = document.getElementsByClassName("habit_mask")[0]
mask.addEventListener("click", this.documentClick,true);
@@ -479,6 +517,7 @@ export default defineComponent({
this.openType.workspace = false
this.openType.model = false
this.openType.singleton = false
this.openType.sex = false
},
// //选择模特
// selectModels() {
@@ -580,6 +619,7 @@ export default defineComponent({
align-items: center;
justify-content: center;
margin: 3rem 0;
position: relative;
.habit_Overal_Single_text {
font-weight: 600;
color: rgba(0, 0, 0, 0.5);
@@ -592,6 +632,18 @@ export default defineComponent({
:deep(.ant-switch) {
margin: 0 1rem;
}
.habit_sex_show{
width: 100%;
z-index: 1;
transform: translateY(10%);
top: 4rem;
height: 14rem;
overflow-x: hidden;
cursor: auto;
&.active{
transform: translateY(0%);
}
}
}
.habit_habit_singleton {
margin-bottom: 3rem;
@@ -608,6 +660,7 @@ export default defineComponent({
transform: translateY(0%);
}
}
}
.habit_System_Designer {
margin-top: 8rem;
@@ -646,7 +699,8 @@ export default defineComponent({
bottom: -.5rem;
transform: translateY(110%);
right: -.2rem;
width: 35rem;
width: 40rem;
// width: 35rem;
opacity: 0;
transition: all .3s;
display: none;
@@ -657,6 +711,9 @@ export default defineComponent({
.habit_btn{
display: flex;
justify-content: space-between;
.model_current{
margin-right: 3rem;
}
}
.habit_model_list{
margin: 0;
@@ -671,6 +728,9 @@ export default defineComponent({
>div{
cursor: pointer;
width: 80%;
white-space: nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
&.newWorkspace{
text-align: center;
@@ -702,6 +762,8 @@ export default defineComponent({
}
.model_Designer{
flex: 1;
overflow: hidden;
.model_text{
display: flex;
:deep(.ant-switch) {
@@ -721,7 +783,19 @@ export default defineComponent({
}
}
.model_img{
display: flex;
>div{
display: flex;
}
div{
width: auto;
margin-right: 1rem;
}
img{
width: 10rem;
cursor: pointer;
}
}
}