773 lines
19 KiB
Vue
773 lines
19 KiB
Vue
<template>
|
|
<div class="habit">
|
|
<div v-show="openType.habit" class="habit_mask"></div>
|
|
<div class="habit_button" @click.stop="setOpenType('habit')" >
|
|
Workspace
|
|
<i class="fi fi-bs-angle-down"></i>
|
|
</div>
|
|
<div class="habit_content" v-fade="openType.habit">
|
|
<div class="habit_title">
|
|
<h3>Workspace Setting</h3>
|
|
<div class="habit_intro">adjust your workspace setting</div>
|
|
</div>
|
|
<div class="habit_type" trigger="['click']" >
|
|
<a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
|
|
<a-button>
|
|
<UserOutlined />
|
|
{{workspaceItem.workSpaceName}}
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
<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>
|
|
<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>
|
|
<i @click.stop="putName(index,'delete')" class="fi fi-rr-trash"></i>
|
|
</li>
|
|
<li @click="newWorkspace" class="newWorkspace">
|
|
<input v-show="openType.addWorkspace" type="text" v-model="workspaceItemName">
|
|
<i @click.stop="putName(-1,'affirm')" v-show="openType.addWorkspace" class="fi fi-br-check"></i>
|
|
<div v-show="!openType.addWorkspace">+</div>
|
|
</li>
|
|
</ul>
|
|
</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>
|
|
</div>
|
|
<div class="habit_Overal_Single">
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: !workspaceItem.overallSingle }"
|
|
>
|
|
Overal
|
|
</div>
|
|
<a-switch @change="setOverall" v-model:checked="workspaceItem.overallSingle" />
|
|
<div
|
|
class="habit_Overal_Single_text"
|
|
:class="{ active: workspaceItem.overallSingle }"
|
|
>
|
|
Single
|
|
</div>
|
|
</div>
|
|
<div class="habit_habit_singleton" v-show="!workspaceItem.overallSingle">
|
|
<a-dropdown @click.stop="setOpenType('singleton')">
|
|
<a-button>
|
|
<UserOutlined />
|
|
{{ workspaceItem.position }}
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
<div class="habit_model_show habit_singleton_show" v-fade="openType.singleton">
|
|
<ul class="habit_model_list">
|
|
<li v-for="item,index in singleTypeList">
|
|
<div @click.stop="setSingle(item.value)">{{ item.label }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="habit_System_Designer">
|
|
<a-slider id="system_silder"
|
|
v-model:value="workspaceItem.systemDesignerPercentage"
|
|
@afterChange="systemDesigner"
|
|
:tip-formatter="formatter"
|
|
>
|
|
</a-slider>
|
|
<div class="habit_System_Designer_text_max">
|
|
<div class="habit_System_Designer_text">System</div>
|
|
<div class="habit_System_Designer_text">Designer</div>
|
|
</div>
|
|
</div>
|
|
<div class="habit_model">
|
|
<a-dropdown placement="bottomRight"
|
|
trigger="['click']"
|
|
@click.stop="setOpenType('model')"
|
|
>
|
|
<a-button>
|
|
<UserOutlined />
|
|
Mannequin
|
|
<DownOutlined />
|
|
</a-button>
|
|
</a-dropdown>
|
|
</div>
|
|
<div id="modelShow" class="habit_model_show" v-fade="openType.model">
|
|
<div class="habit_btn">
|
|
<div class="model_current">
|
|
<div class="model_text">Current</div>
|
|
<div class="model_img">
|
|
<img src="" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="model_Designer">
|
|
<div class="model_text">
|
|
<div
|
|
class="habit_System_Seleves_text"
|
|
:class="{ active: systemSeleves }"
|
|
>
|
|
System
|
|
</div>
|
|
<a-switch @change="setSystemSeleves" v-model:checked="systemSeleves" />
|
|
<div
|
|
class="habit_System_Seleves_text"
|
|
:class="{ active: !systemSeleves }"
|
|
>
|
|
Seleves
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- <ModelsModal ref="modelsModal" @sureSelectModel="sureSelectModel"></ModelsModal> -->
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { useStore } from "vuex";
|
|
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",
|
|
putName:false,
|
|
systemDesignerPercentage:30,
|
|
position:'top',
|
|
sex:'male',
|
|
sexType:false,
|
|
overallSingle:false,
|
|
current:{
|
|
|
|
},
|
|
system:[{
|
|
id:1,
|
|
url:"11111"
|
|
},
|
|
{
|
|
id:2,
|
|
url:"11111"
|
|
}],
|
|
seleves:[{
|
|
id:1,
|
|
url:"22"
|
|
},
|
|
{
|
|
id:2,
|
|
url:"222"
|
|
}],
|
|
})
|
|
let systemSeleves= ref(true);
|
|
let openType = ref({
|
|
workspace:false,
|
|
singleton:false,
|
|
habit:false,
|
|
model:false,
|
|
addWorkspace: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 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",
|
|
},
|
|
])
|
|
|
|
return{
|
|
systemSeleves,
|
|
openType,
|
|
workspace,
|
|
workspaceItem,
|
|
workspaceItemName,
|
|
singleTypeList
|
|
}
|
|
},
|
|
watch:{
|
|
'openType.habit':{
|
|
handler(newVal:any,oldVal:any){
|
|
console.log(newVal);
|
|
// this.store.state.Workspace.workspace
|
|
if(!newVal){
|
|
this.store.commit("setWoekspace", this.workspaceItem);
|
|
}
|
|
}
|
|
},
|
|
'workspaceItem.id':{
|
|
handler(newVal:any,oldVal:any){
|
|
console.log(newVal);
|
|
// this.store.state.Workspace.workspace
|
|
// if(!newVal){
|
|
// this.store.commit("setWoekspace", this.workspaceItem);
|
|
// }
|
|
this.workspace.workspaceList = this.workspace.workspaceList
|
|
}
|
|
},
|
|
workspaceItem:{
|
|
handler(newVal:any,oldVal:any){
|
|
console.log(123123);
|
|
// this.store.state.Workspace.workspace
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
store: useStore(),
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getworkspace()
|
|
},
|
|
directives:{
|
|
fade:{
|
|
mounted (el) {
|
|
el.addEventListener('click',()=>{
|
|
|
|
})
|
|
},
|
|
updated (el,model){
|
|
if(model.value){
|
|
el.style.display="block"
|
|
setTimeout(() => {
|
|
el.classList.add("active")
|
|
}, 100);
|
|
}else{
|
|
el.classList.remove("active")
|
|
setTimeout(() => {
|
|
el.style.display="none"
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
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
|
|
}else{
|
|
rv.sexType == false
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
setSex(){
|
|
if(this.workspaceItem.sexType){
|
|
this.workspaceItem.sex = 'female'
|
|
}else{
|
|
this.workspaceItem.sex = 'male'
|
|
}
|
|
},
|
|
setOverall(){
|
|
if(this.workspaceItem.sexType){
|
|
this.workspaceItem.sex = 'female'
|
|
}else{
|
|
this.workspaceItem.sex = 'male'
|
|
}
|
|
},
|
|
//修改名字
|
|
putName(index:number,v:string){
|
|
this.workspace.workspaceList.forEach(v => {
|
|
v.putName = false
|
|
});
|
|
if(v == 'put'){
|
|
this.workspaceItemName = this.workspace.workspaceList[index].name
|
|
this.workspace.workspaceList[index].putName = true
|
|
}else if (v == 'delete'){
|
|
this.workspace.workspaceList.splice(index,1)
|
|
}else{
|
|
if(this.workspaceItemName == ''){
|
|
message.error('Please enter a workbench name');
|
|
}else{
|
|
if(index == -1){
|
|
this.workspace.workspaceList.push(this.workspaceItem)
|
|
|
|
this.workspaceItem.id = 2
|
|
this.workspaceItem.name = this.workspaceItemName
|
|
this.openType.addWorkspace = false
|
|
}else{
|
|
console.log(this.workspaceItemName,this.workspaceItem);
|
|
this.workspace.workspaceList[index].name = this.workspaceItemName
|
|
this.workspace.workspaceList[index].putName = false
|
|
}
|
|
}
|
|
|
|
}
|
|
},
|
|
//设置系统设计占比
|
|
systemDesigner(num: number) {
|
|
this.workspaceItem.systemDesignerPercentage = num
|
|
},
|
|
formatter(value: number) {
|
|
return `${value}%`;
|
|
},
|
|
|
|
//根据id设置当前参数
|
|
setWorkspace(num:number){
|
|
this.openType.addWorkspace = false
|
|
this.workspace.workspaceList.forEach(v => {
|
|
v.putName = false
|
|
});
|
|
this.workspace.workspaceList.forEach((v:any)=>{
|
|
if(v.id == num){
|
|
this.workspaceItem = v
|
|
}
|
|
})
|
|
this.openType.workspace = false
|
|
},
|
|
//新建参数
|
|
newWorkspace(){
|
|
this.openType.addWorkspace = true
|
|
},
|
|
//设置single & overall
|
|
setSingle(v:string){
|
|
this.openType.singleton = false
|
|
this.workspaceItem.position = v
|
|
},
|
|
//切换系统还是自己的模特
|
|
setSystemSeleves(){
|
|
},
|
|
|
|
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.workspace = !this.openType.workspace
|
|
}else if(v == 'model'){
|
|
this.openType.singleton = false
|
|
this.openType.workspace = false
|
|
this.openType.model = !this.openType.model
|
|
}else if(v == 'singleton'){
|
|
this.openType.singleton = !this.openType.singleton
|
|
this.openType.workspace = false
|
|
}
|
|
let mask = document.getElementsByClassName("habit_mask")[0]
|
|
mask.addEventListener("click", this.documentClick,true);
|
|
},
|
|
documentClick(){
|
|
let mask = document.getElementsByClassName("habit_mask")[0]
|
|
mask.removeEventListener("click", this.documentClick);
|
|
this.openType.habit = false
|
|
this.openType.workspace = false
|
|
this.openType.model = false
|
|
this.openType.singleton = false
|
|
},
|
|
// //选择模特
|
|
// selectModels() {
|
|
// let modelsModal: any = this.$refs.modelsModal;
|
|
// modelsModal.init();
|
|
// },
|
|
|
|
// //确定选择模特
|
|
// sureSelectModel(event: any) {
|
|
// this.store.commit("setTemplateData", event);
|
|
// },
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.habit {
|
|
position: relative;
|
|
.habit_button {
|
|
background-color: #fff;
|
|
border: solid 2px #000;
|
|
padding: 0px 2rem;
|
|
box-sizing: initial;
|
|
font-weight: 600;
|
|
height: 3.2rem;
|
|
line-height: 3.2rem;
|
|
padding: .4rem 1.5rem;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
position: relative;
|
|
.fi-bs-angle-down {
|
|
margin-left: 1rem;
|
|
display: inline-block;
|
|
transform: translateY(2px);
|
|
}
|
|
}
|
|
.habit_mask{
|
|
position: absolute;
|
|
top: -20px;
|
|
left: auto;
|
|
right: -30px;
|
|
bottom: 0;
|
|
// background: #000;
|
|
opacity: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.habit_content {
|
|
border: solid 2px #000;
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
// zoom: .75;
|
|
transform-origin: top right;
|
|
position: absolute;
|
|
right: -.3rem;
|
|
top: 110%;
|
|
background: #fff;
|
|
// width: 25rem;
|
|
width: 30rem;
|
|
opacity: 0;
|
|
transition: all .3s;
|
|
transform: scale(0.75)translateY(10%);
|
|
display: none;
|
|
&.active{
|
|
opacity: 1;
|
|
transform: scale(0.75)translateY(0%);
|
|
}
|
|
.habit_title {
|
|
h3 {
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
color: #000;
|
|
margin: 0;
|
|
}
|
|
.habit_intro {
|
|
font-size: 1.2rem;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.habit_type {
|
|
margin-top: 1.5rem;
|
|
cursor: pointer;
|
|
position: relative;
|
|
.habit_workspace_show{
|
|
width: 100%;
|
|
z-index: 1;
|
|
transform: translateY(10%);
|
|
top: 4rem;
|
|
height: 14rem;
|
|
overflow-x: hidden;
|
|
cursor: auto;
|
|
&.active{
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
}
|
|
.habit_Overal_Single {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 3rem 0;
|
|
.habit_Overal_Single_text {
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 900;
|
|
}
|
|
|
|
}
|
|
:deep(.ant-switch) {
|
|
margin: 0 1rem;
|
|
}
|
|
}
|
|
.habit_habit_singleton {
|
|
margin-bottom: 3rem;
|
|
position: relative;
|
|
.habit_singleton_show{
|
|
width: 100%;
|
|
z-index: 1;
|
|
transform: translateY(10%);
|
|
top: 4rem;
|
|
height: 14rem;
|
|
overflow-x: hidden;
|
|
cursor: auto;
|
|
&.active{
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
}
|
|
.habit_System_Designer {
|
|
margin-top: 8rem;
|
|
:deep(.ant-slider-track),
|
|
:deep(.ant-slider-rail) {
|
|
height: .6rem;
|
|
background-color: #e1e1e1;
|
|
border-radius: 0.5rem;
|
|
}
|
|
:deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
|
|
:deep(.ant-slider-handle) {
|
|
background-color: #2d2e76 !important;
|
|
border: none !important;
|
|
}
|
|
:deep(.ant-slider-handle:hover) {
|
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
|
}
|
|
|
|
.habit_System_Designer_text_max {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.habit_System_Designer_text {
|
|
}
|
|
}
|
|
}
|
|
.habit_model{
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.habit_model_show{
|
|
position: absolute;
|
|
background-color: #fff;
|
|
border: solid 2px #000;
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
bottom: -.5rem;
|
|
transform: translateY(110%);
|
|
right: -.2rem;
|
|
width: 35rem;
|
|
opacity: 0;
|
|
transition: all .3s;
|
|
display: none;
|
|
&.active{
|
|
opacity: 1;
|
|
transform: translateY(100%);
|
|
}
|
|
.habit_btn{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.habit_model_list{
|
|
margin: 0;
|
|
li{
|
|
padding: .5rem 0;
|
|
display: flex;
|
|
input{
|
|
border: 0;
|
|
width: 80%;
|
|
background: rgba(0,0,0,0);
|
|
}
|
|
>div{
|
|
cursor: pointer;
|
|
width: 80%;
|
|
}
|
|
&.newWorkspace{
|
|
text-align: center;
|
|
justify-content: center;
|
|
|
|
div{
|
|
border-radius: 50%;
|
|
border: 1px solid #000;
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
}
|
|
i{
|
|
flex: 1;
|
|
}
|
|
}
|
|
i{
|
|
cursor: pointer;
|
|
}
|
|
.fi-rr-trash{
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
li:hover{
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
}
|
|
.model_Designer{
|
|
.model_text{
|
|
display: flex;
|
|
:deep(.ant-switch) {
|
|
margin: 0 1rem;
|
|
}
|
|
.habit_System_Seleves_text {
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
&.active {
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 900;
|
|
}
|
|
:deep(.ant-switch-checked) {
|
|
background-color: #000;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.model_img{
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.habit :deep(.ant-dropdown-button) {
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.habit :deep(.ant-btn:hover),
|
|
:deep(.ant-btn:focus),
|
|
:deep(.ant-btn:active),
|
|
:deep(.ant-btn::after) {
|
|
color: #000;
|
|
border-color: #000 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
:deep(.ant-switch-checked) {
|
|
background-color: #000;
|
|
}
|
|
.habit :deep(.ant-btn) {
|
|
box-shadow: none !important;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
box-shadow: none;
|
|
border: none;
|
|
background: #f6f6f6;
|
|
width: 100%;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
</style>
|
|
<style>
|
|
.ant-tooltip{
|
|
z-index: 1049 !important;
|
|
}
|
|
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
|
|
background: #000 !important;
|
|
}
|
|
.habit_mod{
|
|
background-color: #000 !important;
|
|
/* top: 0 !important; */
|
|
/* left: 0 !important; */
|
|
}
|
|
.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
|
|
background: #000 !important;
|
|
}
|
|
</style> |