details功能
This commit is contained in:
X1627315083
@@ -10,7 +10,7 @@
|
||||
</div> -->
|
||||
<div v-show="isEditFrontBack" class="frontBack">
|
||||
<div class="label_item" @click.stop="setOperation('print')">
|
||||
<div class="title">color</div>
|
||||
<div class="title">Sharding</div>
|
||||
<a-select
|
||||
v-model:value="frontBackData"
|
||||
:options="frontBackDataList"
|
||||
@@ -35,18 +35,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!isEditFrontBack" class="sketch">
|
||||
<div class="label_item" @click.stop="setOperation('print')">
|
||||
<div class="label_item" @click.stop="setOperation('print')" v-show="isDashedShow">
|
||||
<div class="title">print</div>
|
||||
<div class="current"></div>
|
||||
<div class="drop" v-show="operation == 'print'">
|
||||
<selectList @selectImgItem="selectImgItem" type="print" :catecoryList="printCatecoryList"></selectList>
|
||||
<selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print" :catecoryList="printCatecoryList"></selectList>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label_item" @click.stop="setOperation('element')">
|
||||
<div class="label_item" @click.stop="setOperation('element')" v-show="isDashedShow">
|
||||
<div class="title">element</div>
|
||||
<div class="current"></div>
|
||||
<div class="drop" v-show="operation == 'element'">
|
||||
<selectList @selectImgItem="selectImgItem" type="element" :catecoryList="designElementsType"></selectList>
|
||||
<selectList @selectImgItem="selectImgItem" level1Type="DesignElements" type="element" :catecoryList="designElementsType"></selectList>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label_item" v-show="
|
||||
@@ -156,6 +156,9 @@
|
||||
designElementsType:computed(()=>{
|
||||
return store.state.UserHabit.designElementsType;
|
||||
}),
|
||||
isDashedShow:computed(()=>{
|
||||
return canvasGeneral.dashed.isDashedShow;
|
||||
}),
|
||||
frontBackData:'#ff0000',
|
||||
frontBackDataList:[
|
||||
{
|
||||
@@ -278,12 +281,15 @@
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
:deep(.ant-select){
|
||||
height: 3rem;
|
||||
|
||||
border-radius: 3rem;
|
||||
.ant-select-selector{
|
||||
height: 100%;
|
||||
border-radius: 3rem;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.ant-select-selection-item{
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
|
||||
@@ -208,7 +208,8 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.canvasContent{
|
||||
height: 73rem;
|
||||
height: 100%;
|
||||
// height: 70rem;
|
||||
width: 100%;
|
||||
border: 2px solid #000;
|
||||
border-radius: 3rem;
|
||||
|
||||
@@ -47,7 +47,14 @@
|
||||
</div>
|
||||
|
||||
<div class="item model">
|
||||
<model ref="model" @canvasReload="canvasReload" @detailEdit="detailEdit" @addSketch="()=>isEditPattern.value=false"></model>
|
||||
<model
|
||||
ref="model"
|
||||
@canvasReload="canvasReload"
|
||||
@detailEdit="detailEdit"
|
||||
@addSketch="()=>isEditPattern.value=false"
|
||||
@revocation="revocation"
|
||||
@oppositeRevocation="oppositeRevocation"
|
||||
></model>
|
||||
<div class="btn">
|
||||
<div class="gallery_btn" @click="submit">Submit</div>
|
||||
<div class="gallery_btn" @click="previwe">Preview</div>
|
||||
@@ -57,7 +64,7 @@
|
||||
<div class="submit">
|
||||
</div>
|
||||
<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
|
||||
<detailRight></detailRight>
|
||||
<detailRight ref="detailRight"></detailRight>
|
||||
</div>
|
||||
<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
|
||||
<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
|
||||
@@ -104,6 +111,7 @@ export default defineComponent({
|
||||
const detailDom = reactive({
|
||||
model:null,
|
||||
canvasBox,
|
||||
detailRight,
|
||||
})
|
||||
const userDetail = computed(()=>{
|
||||
return store.state.UserHabit.userDetail
|
||||
@@ -114,6 +122,8 @@ export default defineComponent({
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
designDetailShow:false,
|
||||
loadingShow:false,
|
||||
oppositeRevocationShow:-1,
|
||||
revocationShow:-1,
|
||||
isEditPattern:{
|
||||
value:false,
|
||||
},// 是否编辑图案
|
||||
@@ -121,6 +131,8 @@ export default defineComponent({
|
||||
})
|
||||
provide('isEditPattern',detailData.isEditPattern)
|
||||
const closeModal = ()=>{
|
||||
sessionStorage.removeItem('oppositeRevocation')
|
||||
sessionStorage.removeItem('revocation')
|
||||
detailData.designDetailShow = false
|
||||
emit('destroy')
|
||||
}
|
||||
@@ -157,7 +169,7 @@ export default defineComponent({
|
||||
store.commit('DesignDetailCopy/setDesignDetail',rv)
|
||||
// this.deleteShow = false
|
||||
|
||||
setRevocation(rv,'')
|
||||
setRevocation()
|
||||
detailData.loadingShow = false
|
||||
// await this.setImgSize()
|
||||
}
|
||||
@@ -172,8 +184,49 @@ export default defineComponent({
|
||||
sessionStorage.removeItem('oppositeRevocation')
|
||||
sessionStorage.removeItem('revocation')
|
||||
}
|
||||
const setRevocation = (designItemDetail:any,data:any)=>{//设置撤销
|
||||
//撤回
|
||||
const setRevocation = ()=>{//设置撤销
|
||||
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
|
||||
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
|
||||
// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
||||
if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
|
||||
// sessionStorage.setItem('revocation', JSON.stringify([]));
|
||||
// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
|
||||
revocation = []
|
||||
}
|
||||
revocation.push(itemDetail)
|
||||
detailData.revocationShow = revocation?.length
|
||||
detailData.oppositeRevocationShow = 0
|
||||
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
||||
sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
|
||||
}
|
||||
provide('setRevocation',setRevocation)
|
||||
|
||||
const revocation = ()=>{//撤回
|
||||
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
||||
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
|
||||
if(detailData.revocationShow <= 1)return
|
||||
oppositeRevocation.push(revocation[revocation.length-1])
|
||||
detailData.oppositeRevocationShow = oppositeRevocation.length
|
||||
revocation.splice(revocation.length-1,1)
|
||||
detailData.revocationShow = revocation.length
|
||||
store.commit("DesignDetailCopy/setDesignDetail", revocation[revocation.length-1]);
|
||||
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
|
||||
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
||||
// clearSelect()
|
||||
}
|
||||
const oppositeRevocation = ()=>{//反撤回
|
||||
let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
|
||||
let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
|
||||
if(!oppositeRevocation[oppositeRevocation.length-1])return
|
||||
store.commit("DesignDetailCopy/setDesignDetail", oppositeRevocation[oppositeRevocation.length-1]);
|
||||
revocation.push(oppositeRevocation[oppositeRevocation.length-1])
|
||||
detailData.revocationShow = revocation.length
|
||||
oppositeRevocation.splice(oppositeRevocation.length-1,1)
|
||||
detailData.oppositeRevocationShow = oppositeRevocation.length
|
||||
sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
|
||||
sessionStorage.setItem('revocation', JSON.stringify(revocation));
|
||||
// this.clearSelect()
|
||||
}
|
||||
const setCurrentDetail = (str:string)=>{
|
||||
store.commit('DesignDetailCopy/setCurrentDetailType',str)
|
||||
@@ -182,10 +235,12 @@ export default defineComponent({
|
||||
let clothesList:any = []
|
||||
for(let i = 0;i<list.length;i++){
|
||||
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
|
||||
await (detailDom.canvasBox as any).privewDetail()
|
||||
if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
|
||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||
let gradient = null
|
||||
let newData = list[i]?.newDetail?.[detailData.currentDetailType]
|
||||
let isCurrent = list[i].id == detailData?.selectDetail?.id
|
||||
|
||||
let data:any = {
|
||||
changed:false,
|
||||
color:(newData && detailData.currentDetailType == 'color' && isCurrent)?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`,
|
||||
@@ -193,16 +248,16 @@ export default defineComponent({
|
||||
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
|
||||
// maskMinioUrl:'',
|
||||
// maskUrl:'',
|
||||
maskUrl:list[i].maskUrl?list[i].maskUrl:null,
|
||||
maskUrl:list[i].maskUrl,
|
||||
offset,
|
||||
partialDesign:list[i].partialDesign,
|
||||
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
|
||||
printObject:list[i].printObject?list[i].printObject:{prints:[]},
|
||||
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
|
||||
priority,
|
||||
scale,
|
||||
type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
|
||||
sketchString:'',
|
||||
trims:list[i].trims?list[i].trims:{prints:null},
|
||||
trims:(newData && detailData.currentDetailType == 'element' && isCurrent)?{prints:newData}:list[i].trims?list[i].trims:{prints:[]},
|
||||
}
|
||||
if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
|
||||
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
|
||||
@@ -229,7 +284,11 @@ export default defineComponent({
|
||||
}
|
||||
detailData.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
|
||||
store.commit('DesignDetailCopy/setPraeview',rv)
|
||||
let value = {
|
||||
currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
|
||||
rv:rv
|
||||
}
|
||||
store.commit('DesignDetailCopy/setPraeview',value)
|
||||
detailData.loadingShow = false
|
||||
}).catch(res=>{
|
||||
detailData.loadingShow = false
|
||||
@@ -284,6 +343,8 @@ export default defineComponent({
|
||||
detailData.childKey += 1
|
||||
}
|
||||
onBeforeUnmount(()=>{
|
||||
sessionStorage.removeItem('oppositeRevocation')
|
||||
sessionStorage.removeItem('revocation')
|
||||
store.commit('DesignDetailCopy/clearDesignDetail')
|
||||
})
|
||||
return{
|
||||
@@ -294,6 +355,8 @@ export default defineComponent({
|
||||
setCurrentDetail,
|
||||
previwe,
|
||||
submit,
|
||||
revocation,
|
||||
oppositeRevocation,
|
||||
detailEdit,
|
||||
canvasReload,
|
||||
}
|
||||
@@ -402,6 +465,7 @@ export default defineComponent({
|
||||
> .btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-left: 12rem;
|
||||
> div{
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
import { defineComponent,computed,ref,watch,nextTick,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useStore } from "vuex";
|
||||
@@ -52,6 +52,7 @@ export default defineComponent({
|
||||
selectTitle:'current',
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
colorList:{
|
||||
list:{},
|
||||
index:-1,
|
||||
@@ -83,7 +84,11 @@ export default defineComponent({
|
||||
newVal.name = data.name
|
||||
newVal.tcx = data.tcx
|
||||
colorData.colorList.list[colorData.selectDetail.id][colorData.colorList.index] = newVal
|
||||
store.commit('DesignDetailCopy/setNewDetail',newVal)
|
||||
let value = {
|
||||
data:newVal,
|
||||
str:'color'
|
||||
}
|
||||
store.commit('DesignDetailCopy/setNewDetail',value)
|
||||
}
|
||||
})
|
||||
watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
|
||||
@@ -138,8 +143,6 @@ export default defineComponent({
|
||||
item = {}
|
||||
}
|
||||
}
|
||||
console.log(12312);
|
||||
|
||||
colorData.colorList.list[newVal].push(item)
|
||||
}
|
||||
},{immediate: true})
|
||||
@@ -241,6 +244,7 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -281,6 +285,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .uploadImage{
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 3rem;
|
||||
border: 1px dashed transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
||||
|
||||
161
src/component/DetailCopy/detailLeft/element.vue
Normal file
161
src/component/DetailCopy/detailLeft/element.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="element">
|
||||
<div class="detailText">Current Element</div>
|
||||
<div class="select_element">
|
||||
<img :class="{active:elementList.length == 1}" v-for="item in elementList" @click="addElement(item)" :src="item.path" alt="">
|
||||
<!-- <img :src="selectDetail.path" alt="">
|
||||
{{ selectDetail }} -->
|
||||
<div v-if="elementList.length == 0">
|
||||
<i class="fi fi-rr-picture centent"></i>
|
||||
</div>
|
||||
</div>
|
||||
<selectList @selectImgItem="selectImgItem" level1Type="DesignElements" type="element" :catecoryList="printCatecoryList"></selectList>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import selectList from './module/selectList.vue'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
selectList,
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
selectTitle:'current',
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
printCatecoryList:computed(()=>{
|
||||
return store.state.UserHabit.designElementsType
|
||||
}),
|
||||
elementList:[],
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
|
||||
})
|
||||
watch(()=>detailData?.selectDetail?.trims?.prints,(newVal,oldVal)=>{
|
||||
if(!newVal)return
|
||||
detailData.elementList = newVal.reduce((acc:any, curr:any) => {
|
||||
if (!acc.some((item:any) => item.minIOPath === curr.minIOPath)) {
|
||||
acc.push(curr);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
},{immediate: true})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
libraryList:null as any,
|
||||
})
|
||||
const openCurrent = ()=>{
|
||||
detailData.selectTitle = 'current'
|
||||
}
|
||||
const openUpload = ()=>{
|
||||
detailData.selectTitle = 'upload'
|
||||
}
|
||||
const openLibrary = ()=>{
|
||||
detailData.selectTitle = 'library'
|
||||
getDetailListDom.libraryList.init()
|
||||
}
|
||||
const addElement = (data:any)=>{
|
||||
let value = {
|
||||
designType:data.designType,
|
||||
level2Type:data.level2Type,
|
||||
minIOPath:data.minIOPath,
|
||||
url:data.path,
|
||||
}
|
||||
store.commit('DesignDetailCopy/setCurrentPrintElement',value)
|
||||
}
|
||||
const selectImgItem = (data:any)=>{
|
||||
let value = {
|
||||
data,
|
||||
}
|
||||
if(detailData.currentDetailType != 'print' && detailData.currentDetailType != 'element'){
|
||||
store.commit('DesignDetailCopy/setNewDetail',value)
|
||||
}else{
|
||||
store.commit('DesignDetailCopy/setCurrentPrintElement',data)
|
||||
}
|
||||
}
|
||||
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
openCurrent,
|
||||
openUpload,
|
||||
openLibrary,
|
||||
selectImgItem,
|
||||
addElement,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.element{
|
||||
// width: 34rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .select_element{
|
||||
width: 100%;
|
||||
height: 23.5rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
border-radius: .5rem;
|
||||
// border: 1px dashed #202020;
|
||||
border: 1px dashed transparent;
|
||||
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
||||
margin-bottom: 3rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
justify-content: flex-start;
|
||||
> img{
|
||||
object-fit: contain;
|
||||
height: 9rem;
|
||||
width: 9rem;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
margin: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .active{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> div{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> i{
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,7 @@
|
||||
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
|
||||
<print v-show="currentDetailType == 'print'"></print>
|
||||
<color v-show="currentDetailType == 'color'"></color>
|
||||
<element v-show="currentDetailType == 'element'"></element>
|
||||
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
||||
</div>
|
||||
</template>
|
||||
@@ -16,11 +17,12 @@ import { useI18n } from 'vue-i18n'
|
||||
import sketch from './sketch.vue'
|
||||
import print from './print.vue'
|
||||
import color from './colorBox/index.vue'
|
||||
import element from './element.vue'
|
||||
import addDetails from '@/component/Detail/addDetails.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
sketch,print,color,addDetails
|
||||
sketch,print,color,addDetails,element
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
|
||||
@@ -57,6 +57,11 @@ export default defineComponent({
|
||||
default:'' as any,
|
||||
required:true
|
||||
},
|
||||
level1Type:{
|
||||
type:String,
|
||||
default:'' as any,
|
||||
required:true
|
||||
},
|
||||
},
|
||||
emits:['selectImgItem'],
|
||||
setup(props,{emit}) {
|
||||
@@ -109,18 +114,9 @@ export default defineComponent({
|
||||
detailData.isShowLoading = true
|
||||
let level2Type = ''
|
||||
let workspace = store.state.Workspace.workspace
|
||||
let type = props.type
|
||||
// let type = store.state.DesignDetailCopy.currentDetailType
|
||||
let leve1Type
|
||||
if(type == 'sketch'){
|
||||
leve1Type = 'Sketchboard'
|
||||
}else if(type == 'print'){
|
||||
leve1Type = 'Printboard'
|
||||
}else if(type == 'element'){
|
||||
leve1Type = 'DesignElements'
|
||||
}
|
||||
let data = {
|
||||
level1Type:leve1Type,
|
||||
level1Type:props.level1Type,
|
||||
// level2Type:'Pattern',
|
||||
level2Type:detailData.designType,
|
||||
modelSex:workspace?.sex,
|
||||
|
||||
@@ -26,13 +26,13 @@
|
||||
</div>
|
||||
<div class="print_content_list">
|
||||
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
|
||||
<currentList ref="currentList" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
|
||||
<currentList ref="currentList" :level1Type="level1Type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'upload'">
|
||||
<uploadList @selectImgItem="selectImgItem" :catecoryList="catecoryList"></uploadList>
|
||||
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'library'">
|
||||
<libraryList @selectImgItem="selectImgItem" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
|
||||
<libraryList @selectImgItem="selectImgItem" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,6 +63,11 @@ export default defineComponent({
|
||||
default:'' as any,
|
||||
required:true
|
||||
},
|
||||
level1Type:{
|
||||
type:String,
|
||||
default:'' as any,
|
||||
required:true
|
||||
},
|
||||
},
|
||||
emits:['selectImgItem'],
|
||||
setup(props,{emit}) {
|
||||
|
||||
@@ -58,7 +58,12 @@ export default defineComponent({
|
||||
type:Object,
|
||||
default:()=>[] as any,
|
||||
required:true
|
||||
}
|
||||
},
|
||||
level1Type:{
|
||||
type:String,
|
||||
default:'' as any,
|
||||
required:true
|
||||
},
|
||||
},
|
||||
emits:['selectImgItem'],
|
||||
setup(props,{emit}) {
|
||||
@@ -69,12 +74,13 @@ export default defineComponent({
|
||||
uploadList:[],
|
||||
upload:{
|
||||
isPin: 0,
|
||||
level1Type: 'Sketchboard',
|
||||
level1Type: props.level1Type,
|
||||
gender:store.state.Workspace.workspace.sex,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:getCookie("token"),
|
||||
uploadUrl:getUploadUrl(),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
|
||||
})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
@@ -154,18 +160,6 @@ export default defineComponent({
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
}
|
||||
onMounted(()=>{
|
||||
let type = store.state.DesignDetailCopy.currentDetailType
|
||||
let leve1Type:any
|
||||
if(type == 'sketch'){
|
||||
leve1Type = 'Sketchboard'
|
||||
}else if(type == 'print'){
|
||||
leve1Type = 'Printboard'
|
||||
}else if(type == 'element'){
|
||||
leve1Type = 'DesignElements'
|
||||
}
|
||||
detailData.upload.level1Type = leve1Type
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
<div class="print">
|
||||
<div class="detailText">Current Print</div>
|
||||
<div class="select_print">
|
||||
<img :class="{active:printList.length == 1}" v-for="item in printList" :src="item.path" alt="">
|
||||
<img :class="{active:printList.length == 1}" v-for="item in printList" @click="addElement(item)" :src="item.path" alt="">
|
||||
<!-- <img :src="selectDetail.path" alt="">
|
||||
{{ selectDetail }} -->
|
||||
<div v-if="printList.length == 0">
|
||||
<i class="fi fi-rr-picture centent"></i>
|
||||
</div>
|
||||
</div>
|
||||
<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="printCatecoryList"></selectList>
|
||||
<selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print" :catecoryList="printCatecoryList"></selectList>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -40,12 +40,11 @@ export default defineComponent({
|
||||
watch(()=>detailData?.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
|
||||
if(!newVal)return
|
||||
detailData.printList = newVal.reduce((acc:any, curr:any) => {
|
||||
if (!acc.some((item:any) => item.id === curr.id)) {
|
||||
if (!acc.some((item:any) => item.minIOPath === curr.minIOPath)) {
|
||||
acc.push(curr);
|
||||
}
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
},{immediate: true})
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
@@ -65,8 +64,24 @@ export default defineComponent({
|
||||
detailData.selectTitle = 'library'
|
||||
getDetailListDom.libraryList.init()
|
||||
}
|
||||
const addElement = (data:any)=>{
|
||||
let value = {
|
||||
designType:data.designType,
|
||||
level2Type:data.level2Type,
|
||||
minIOPath:data.minIOPath,
|
||||
url:data.path,
|
||||
}
|
||||
store.commit('DesignDetailCopy/setCurrentPrintElement',value)
|
||||
}
|
||||
const selectImgItem = (data:any)=>{
|
||||
store.commit('DesignDetailCopy/setNewDetail',data)
|
||||
let value = {
|
||||
data,
|
||||
}
|
||||
if(detailData.currentDetailType != 'print' && detailData.currentDetailType != 'element'){
|
||||
store.commit('DesignDetailCopy/setNewDetail',value)
|
||||
}else{
|
||||
store.commit('DesignDetailCopy/setCurrentPrintElement',data)
|
||||
}
|
||||
}
|
||||
|
||||
return{
|
||||
@@ -78,6 +93,7 @@ export default defineComponent({
|
||||
openUpload,
|
||||
openLibrary,
|
||||
selectImgItem,
|
||||
addElement,
|
||||
}
|
||||
},
|
||||
|
||||
@@ -113,16 +129,20 @@ export default defineComponent({
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
justify-content: flex-start;
|
||||
> img{
|
||||
object-fit: contain;
|
||||
height: 9rem;
|
||||
width: 9rem;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
margin: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
> .active{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> div{
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="sketch">
|
||||
<div class="detailText">Current Print</div>
|
||||
<div class="detailText">Current Sketch</div>
|
||||
<div class="select_sketch" v-if="selectDetail.id">
|
||||
<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
|
||||
<img :src="selectDetail.sketchString || selectDetail.path" alt="">
|
||||
@@ -11,7 +11,7 @@
|
||||
<i class="fi fi-rr-picture centent"></i>
|
||||
</div>
|
||||
</div>
|
||||
<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="sketchCatecoryList"></selectList>
|
||||
<selectList @selectImgItem="selectImgItem" level1Type="Sketchboard" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -58,7 +58,10 @@ export default defineComponent({
|
||||
getDetailListDom.libraryList.init()
|
||||
}
|
||||
const selectImgItem = (data:any)=>{
|
||||
store.commit('DesignDetailCopy/setNewDetail',data)
|
||||
let value = {
|
||||
data,
|
||||
}
|
||||
store.commit('DesignDetailCopy/setNewDetail',value)
|
||||
}
|
||||
const openAddDetail = ()=>{
|
||||
emit('addDetail')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="editPrintElement">
|
||||
<div class="printOverallBtn">
|
||||
<div class="printOverallBtn" v-if="type == 'print'">
|
||||
<div class="overallSlogin">
|
||||
<div
|
||||
class="habit_Overal_Single_text"
|
||||
@@ -28,14 +28,57 @@
|
||||
</a-slider>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="editPrintElementBox">
|
||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
|
||||
<div class="designOpenrtion_imgMask">
|
||||
<div class="designOpenrtion_print">
|
||||
<div
|
||||
v-for="item,index in printStyleList[type][stateOverallSingle]"
|
||||
:key="item"
|
||||
v-if="overallSingle"
|
||||
:style="item?.pattern?.style"
|
||||
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
|
||||
class="modal_imgItem"
|
||||
ref="content"
|
||||
>
|
||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
|
||||
</div>
|
||||
</div>
|
||||
<img :src="selectDetail?.undividedLayer?selectDetail.undividedLayer:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg">
|
||||
<div class="designOpenrtion_btn">
|
||||
<ul v-if="overallSingle" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
||||
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item?.transform,type]"></li>
|
||||
<li class="designOpenrtion_delete" @click.stop="deletePrint">
|
||||
<img src="../../../assets/images/homePage/cuowu.svg" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<div v-show="!overallSingle"></div>
|
||||
<ul v-if="!overallSingle && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
|
||||
<i class="fi fi-rr-arrows animtion1"></i>
|
||||
<i class="fi fi-rr-arrows animtion2"></i>
|
||||
<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive, onBeforeUnmount} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { useStore } from "vuex";
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
@@ -48,26 +91,508 @@ export default defineComponent({
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const editPrintElementDom = reactive({
|
||||
|
||||
imgDom:null as any,
|
||||
sketchImg:null as any,
|
||||
})
|
||||
const editPrintElementData = reactive({
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
overallSingle:false,
|
||||
currentPrintElement:computed(()=>store.state.DesignDetailCopy.currentPrintElement),
|
||||
overallSingle:true,
|
||||
systemDesignerPercentage:0,
|
||||
printStyleList:{
|
||||
print:{
|
||||
single:[],
|
||||
overall:[],
|
||||
},
|
||||
element:{
|
||||
single:[],
|
||||
}
|
||||
} as any,
|
||||
stateOverallSingle:'single',
|
||||
type:props.type,
|
||||
imgDomIndex:0,
|
||||
direction:'',//判断点的那条边
|
||||
printZIndex:2,//印花优先级
|
||||
sketchWH:{
|
||||
width:0,
|
||||
height:0,
|
||||
scale:0,
|
||||
},
|
||||
loadingShow:false,
|
||||
})
|
||||
const setOveralSingle = ()=>{}
|
||||
|
||||
const setOveralSingle = ()=>{
|
||||
if(!editPrintElementData.overallSingle){
|
||||
editPrintElementData.stateOverallSingle = 'overall'
|
||||
}else{
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
}
|
||||
}
|
||||
const formatter = (value:any)=>{
|
||||
return `${value}%`;
|
||||
}
|
||||
const deletePrint = ()=>{
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
|
||||
}
|
||||
const setScaleLocation:any = (item:any)=>{
|
||||
return new Promise((resolve, reject) => {
|
||||
// let location = [,]
|
||||
let img = new Image
|
||||
img.onload = ()=>{
|
||||
let imgScale = img.width / img.height
|
||||
let zoom = 2
|
||||
let width = editPrintElementData.sketchWH.width / zoom
|
||||
let height = width / editPrintElementData.sketchWH.height
|
||||
|
||||
let scale = [width / editPrintElementData.sketchWH.width,height]
|
||||
|
||||
let sketchW = editPrintElementData.sketchWH.width * editPrintElementData.sketchWH.scale
|
||||
let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale
|
||||
let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
|
||||
let y = sketchH / 2 -(sketchH * height/2)
|
||||
if(!editPrintElementData.overallSingle){
|
||||
x = sketchW / 2
|
||||
y = sketchH / 2
|
||||
}
|
||||
let location = [x,y]
|
||||
resolve({scale,location})
|
||||
}
|
||||
img.src = item.url
|
||||
})
|
||||
}
|
||||
const addPrintELement = async (data:any)=>{
|
||||
let {scale,location} = await setScaleLocation(data)
|
||||
let item = {
|
||||
angle:0,
|
||||
designType:data.designType,
|
||||
ifSingle:editPrintElementData.overallSingle,
|
||||
level2Type:data.level2Type,
|
||||
location,
|
||||
minIOPath:data.minIOPath,
|
||||
path:data.url,
|
||||
priority:editPrintElementData.printZIndex,
|
||||
scale,
|
||||
}
|
||||
getItemPosition(item)
|
||||
store.commit('DesignDetailCopy/setCurrentPrintElement',null)
|
||||
}
|
||||
const previewDetailPrintData = ()=>{
|
||||
let data:any = []
|
||||
let index = 1
|
||||
let setData = (item:any,index:number)=>{
|
||||
let scale,location
|
||||
let style = item.pattern.style
|
||||
let sketchWH = editPrintElementData.sketchWH.scale
|
||||
if(item.ifSingle){
|
||||
scale = [style.width.replace(/px/g,'')/editPrintElementData.sketchWH.width,(style.height.replace(/px/g,'')/editPrintElementData.sketchWH.height)]
|
||||
location = [style.left.replace(/px/g,'')*sketchWH,style.top.replace(/px/g,'')*sketchWH]
|
||||
}else{
|
||||
let x = Number(style.left.replace(/px/g,''))
|
||||
let y = Number(style.top.replace(/px/g,''))
|
||||
location = [(x*sketchWH) ,(y*sketchWH)]
|
||||
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
|
||||
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
|
||||
// location = [item.pattern.style.left,item.pattern.style.top]
|
||||
}
|
||||
let value ={
|
||||
angle : item.pattern.transform.rotateZ,
|
||||
// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
|
||||
location : location,
|
||||
priority:index,
|
||||
scale: scale,
|
||||
designType:item.designType,
|
||||
level2Type:item.level2Type,
|
||||
path:item.path,
|
||||
minIOPath:item.minIOPath,
|
||||
ifSingle:!!item.ifSingle,
|
||||
}
|
||||
return value
|
||||
}
|
||||
if(editPrintElementData.printStyleList[props.type].single.length>0){
|
||||
sort(editPrintElementData.printStyleList[props.type].single)
|
||||
}
|
||||
editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
|
||||
data.push(setData(item,index))
|
||||
index++
|
||||
})
|
||||
editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
|
||||
data.push(setData(item,index))
|
||||
index++
|
||||
})
|
||||
let value = {
|
||||
data,
|
||||
str:props.type
|
||||
}
|
||||
store.commit('DesignDetailCopy/setNewDetail',value)
|
||||
}
|
||||
const sort = (list:any)=>{
|
||||
list.sort((a:any,b:any)=>{
|
||||
var a_num = a.pattern.style.zIndex;
|
||||
var b_num = b.pattern.style.zIndex;
|
||||
return a_num - b_num;
|
||||
})
|
||||
}
|
||||
const getPosition = ()=>{
|
||||
|
||||
// editPrintElementData.selectDetail.newDetail[props.type].push()
|
||||
}
|
||||
const getItemPosition = (item:any)=>{
|
||||
let left,top
|
||||
|
||||
if(item.ifSingle){
|
||||
//single
|
||||
left = item.location[0] / editPrintElementData.sketchWH.scale
|
||||
top = item.location[1] / editPrintElementData.sketchWH.scale
|
||||
}else{
|
||||
//overall
|
||||
editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
|
||||
left = item.location[0] / editPrintElementData.sketchWH.scale
|
||||
top = item.location[1] / editPrintElementData.sketchWH.scale
|
||||
editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
|
||||
}
|
||||
let pattern = {
|
||||
centers:{left:0,top:0},
|
||||
style:{
|
||||
// left:(boor?left:Math.trunc(Math.random()*x)+1)+"px",
|
||||
// top:(boor?top:Math.trunc(Math.random()*y)+1)+"px",
|
||||
left:left+'px',
|
||||
top:top+'px',
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:editPrintElementData.sketchWH.width*item.scale[0]+'px',
|
||||
height:editPrintElementData.sketchWH.height*item.scale[1]+'px',
|
||||
zIndex:item.priority,
|
||||
// zIndex:this.printZIndex++
|
||||
},
|
||||
transform:{
|
||||
rotateZ:item.angle?item.angle:0
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
}
|
||||
editPrintElementData.printZIndex++
|
||||
item.pattern = pattern
|
||||
if(item.ifSingle){
|
||||
editPrintElementData.printStyleList[props.type].single.push(item)
|
||||
}else{
|
||||
editPrintElementData.printStyleList[props.type].overall = []
|
||||
editPrintElementData.printStyleList[props.type].overall.push(item)
|
||||
}
|
||||
}
|
||||
const setPosition = ()=>{
|
||||
nextTick(()=>{
|
||||
let img = new Image
|
||||
img.onload = ()=>{
|
||||
let scale = img.width / editPrintElementDom.sketchImg.offsetWidth
|
||||
editPrintElementData.sketchWH = {
|
||||
width:editPrintElementDom.sketchImg.offsetWidth,
|
||||
height:editPrintElementDom.sketchImg.offsetHeight,
|
||||
scale,
|
||||
}
|
||||
if(!editPrintElementData.selectDetail.printObject.prints)return
|
||||
let state = true
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
let arr:any = editPrintElementData.selectDetail.printObject.prints
|
||||
console.log(props.type)
|
||||
if(props.type == 'element'){
|
||||
arr = editPrintElementData.selectDetail.printObject.trims
|
||||
}
|
||||
if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
|
||||
arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
|
||||
}
|
||||
if(arr && arr.length > 0){
|
||||
arr.forEach((item:any)=>{
|
||||
if(!item.ifSingle){
|
||||
editPrintElementData.stateOverallSingle = 'overall',
|
||||
state = false
|
||||
}
|
||||
getItemPosition(item)
|
||||
})
|
||||
}
|
||||
if(props.type == 'print'){
|
||||
editPrintElementData.overallSingle = state
|
||||
}
|
||||
}
|
||||
img.src = editPrintElementData.selectDetail.undividedLayer
|
||||
})
|
||||
}
|
||||
watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
|
||||
if(!newVal)return
|
||||
editPrintElementData.printStyleList[props.type] = {
|
||||
single:[],
|
||||
overall:[],
|
||||
}
|
||||
setPosition()
|
||||
},{immediate: true,})
|
||||
watch(()=>editPrintElementData.currentPrintElement,(newVal)=>{
|
||||
if(newVal){
|
||||
addPrintELement(newVal)
|
||||
}
|
||||
})
|
||||
//设置移动
|
||||
const itemMoveMousedown = (index:number,event:any)=>{
|
||||
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
|
||||
editPrintElementData.imgDomIndex = index
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].forEach((v:any)=>{
|
||||
v.pattern.designOpenrtionBtn = false
|
||||
})
|
||||
if(!editPrintElementData.overallSingle){
|
||||
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
|
||||
}else{
|
||||
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
|
||||
}
|
||||
let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
||||
let left = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.left.replace(/px/g,''))
|
||||
let top = Number(editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.top.replace(/px/g,''))
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.left = imgDomWH.x+event.offsetX-left
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.centers.top = imgDomWH.y+event.offsetY-top
|
||||
// document.addEventListener("mouseup", this.mouseup);
|
||||
// document.addEventListener("mousemove", this.moveMousemove);
|
||||
document.addEventListener('mousemove', mouseMove);
|
||||
document.addEventListener('touchmove', touchmove);
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
document.addEventListener('touchend', mouseup);
|
||||
}
|
||||
//设置尺寸
|
||||
const itemSizeMousedown = (direction:any,event:any)=>{
|
||||
editPrintElementData.direction = direction
|
||||
editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
|
||||
let scale = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(editPrintElementDom.imgDom.firstChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.designOpenrtionBtn = true
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
||||
let li = (document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
|
||||
if(editPrintElementData.direction == 'right' || editPrintElementData.direction == 'bottom'){
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX-li
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY-li
|
||||
}else{
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||
}
|
||||
|
||||
// document.addEventListener("mouseup", this.sizeMouseup);
|
||||
// document.addEventListener("mousemove", this.sizeMousemove);
|
||||
document.addEventListener('mousemove', sizeMouseMove);
|
||||
document.addEventListener('touchmove', sizeTouchmove);
|
||||
document.addEventListener('mouseup', sizeMouseup);
|
||||
document.addEventListener('touchend', sizeMouseup);
|
||||
}
|
||||
const mouseMove = (event:any)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
const touchmove = (event:any)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
//鼠标移动
|
||||
const mouseMoveOperation = (e:any)=>{
|
||||
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
||||
let parentNode:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
|
||||
parentNode = parentNode.getBoundingClientRect()
|
||||
let x:any = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)+'px'
|
||||
let y:any = ( e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)+'px'
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = x
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = y
|
||||
if(!editPrintElementData.overallSingle){
|
||||
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = parentNode.width - imgDomWH.width+'px'
|
||||
}
|
||||
if(x.replace(/px/g,'') <= 0){
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 0+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = parentNode.height - imgDomWH.height+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') <= 0){
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 0+'px'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
const sizeMouseMove = (event:any)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
sizeMouseMoveOperation(e)
|
||||
}
|
||||
const sizeTouchmove = (event:any)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
sizeMouseMoveOperation(e)
|
||||
}
|
||||
const sizeMouseMoveOperation = (e:any)=>{
|
||||
let imgDomWH = editPrintElementDom.imgDom.getBoundingClientRect()
|
||||
let parentNode =editPrintElementDom.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
let height = imgDomWH.height
|
||||
let num = width/height
|
||||
let num1 = height/width
|
||||
let w,h
|
||||
//判断移动四个边
|
||||
if(editPrintElementData.direction == 'right'){
|
||||
w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)
|
||||
h = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(editPrintElementData.direction == 'top'){
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = 'auto'
|
||||
// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.bottom = parentNode.offsetHeight -imgDomWH.height - editPrintElementDom.imgDom.offsetTop+'px'
|
||||
w = (e.clientX - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left)*num
|
||||
h = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top - e.clientY)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}else if(editPrintElementData.direction == 'bottom'){
|
||||
h = (e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}else if(editPrintElementData.direction == 'left'){
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = 'auto'
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.right = parentNode.offsetWidth -imgDomWH.width - editPrintElementDom.imgDom.offsetLeft+'px'
|
||||
w = (editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.left - e.clientX)
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.width = width
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.height = height
|
||||
|
||||
}
|
||||
//鼠标抬起
|
||||
const sizeMouseup = (e:any)=>{
|
||||
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style={
|
||||
right:'auto',
|
||||
left:editPrintElementDom.imgDom.offsetLeft+'px',
|
||||
bottom:'auto',
|
||||
top:editPrintElementDom.imgDom.offsetTop+'px',
|
||||
height:editPrintElementDom.imgDom.offsetHeight+'px',
|
||||
width:editPrintElementDom.imgDom.offsetWidth+'px',
|
||||
zIndex:editPrintElementData.printZIndex
|
||||
}
|
||||
// document.removeEventListener("mouseup", sizeMouseup);
|
||||
// document.removeEventListener("mousemove", sizeMousemove);
|
||||
document.removeEventListener('mousemove',sizeMouseMove)
|
||||
document.removeEventListener('touchmove',sizeTouchmove)
|
||||
document.removeEventListener('mouseup',sizeMouseup)
|
||||
document.removeEventListener('touchend',sizeMouseup)
|
||||
}
|
||||
const mouseup = (e:any)=>{
|
||||
|
||||
// document.removeEventListener("mouseup", mouseup);
|
||||
// document.removeEventListener("mousemove", moveMousemove);
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('touchend',mouseup)
|
||||
}
|
||||
onMounted(()=>{
|
||||
console.log(123123)
|
||||
if(props.type == 'element'){
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
editPrintElementData.overallSingle = true
|
||||
}
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
previewDetailPrintData()
|
||||
})
|
||||
return{
|
||||
getMousePosition,
|
||||
...toRefs(editPrintElementDom),
|
||||
...toRefs(editPrintElementData),
|
||||
setOveralSingle,
|
||||
formatter,
|
||||
itemMoveMousedown,
|
||||
itemSizeMousedown,
|
||||
deletePrint,
|
||||
previewDetailPrintData,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value:any){
|
||||
console.log(value)
|
||||
let mousedown = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
mouseDownOperation(e)
|
||||
}
|
||||
|
||||
let touchstart = function(event:any){
|
||||
let e = getMousePosition(event,true)
|
||||
mouseDownOperation(e)
|
||||
}
|
||||
let mouseDownOperation = (e:any) => {
|
||||
let elParent:any = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
||||
let mouse = true;
|
||||
let angle = 0
|
||||
let num = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
num = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.scale
|
||||
angle = value.instance.printStyleList[value.value[2]][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ
|
||||
// 添加鼠标按下事件监听器
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
mouse = true;
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
let mouseMove = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
let touchmove = function(event:any){
|
||||
let e = getMousePosition(event,true)
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
let mouseMoveOperation = (e:any) => {
|
||||
if (mouse) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
let x = e.clientX - X
|
||||
let y = Y - e.clientY
|
||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||
if(elParent){
|
||||
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
|
||||
}
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
}
|
||||
}
|
||||
// 添加鼠标松开事件监听器
|
||||
let mouseup = () => {
|
||||
value.instance.printStyleList[value.value[2] ][value.instance.stateOverallSingle][value.instance.imgDomIndex].pattern.transform.rotateZ = angle
|
||||
mouse = false;
|
||||
// document.removeEventListener('mouseup',mouseup)
|
||||
// document.removeEventListener('mousemove',mousemove)
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('touchend',mouseup)
|
||||
}
|
||||
// document.addEventListener('mouseup', mouseup);
|
||||
document.addEventListener('mousemove', mouseMove);
|
||||
document.addEventListener('touchmove', touchmove);
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
document.addEventListener('touchend', mouseup);
|
||||
}
|
||||
el.addEventListener('mousedown',mousedown)
|
||||
el.addEventListener('touchstart',touchstart)
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
@@ -86,25 +611,32 @@ export default defineComponent({
|
||||
> .printOverallBtn{
|
||||
display: flex;
|
||||
> .overallSlogin{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.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;
|
||||
// transform: scale(1.2);
|
||||
}
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 1.8rem;
|
||||
margin: 0 1rem;
|
||||
&.active {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
// font-weight: 900;
|
||||
// transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
.habit_System_Designer {
|
||||
transform: scale(.8);
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.ant-slider-track,
|
||||
.ant-slider-rail {
|
||||
background-color: #e1e1e1;
|
||||
border-radius: calc(0.5rem*1.2);
|
||||
}
|
||||
:deep(.system_silder){
|
||||
width: 20rem;
|
||||
}
|
||||
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
|
||||
.ant-slider-handle {
|
||||
background-color: #2d2e76 !important;
|
||||
@@ -114,12 +646,215 @@ export default defineComponent({
|
||||
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
||||
}
|
||||
.habit_System_Designer_text{
|
||||
font-size: calc(1.6rem*1.2);
|
||||
font-size: 1.8rem;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-right: 3rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .editPrintElementBox{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
> .mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
> .designOpenrtion_centent{
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
user-select:none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
transform: translate(-50%,-50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.designOpenrtion_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
.designOpenrtion_sketch_mask{
|
||||
z-index: 2;
|
||||
// z-index: 3;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_print{
|
||||
z-index: 3;
|
||||
.modal_imgItem{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.designOpenrtion_btn{
|
||||
z-index: 3;
|
||||
>div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
padding: 0;
|
||||
-webkit-user-drag: none;
|
||||
user-select:none;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
|
||||
&.designOpenrtion_Mouoverall{
|
||||
opacity: 1;
|
||||
border: none;
|
||||
width: calc(1.4rem*1.2);
|
||||
height: calc(1.4rem*1.2);
|
||||
z-index: 2;
|
||||
i{
|
||||
display: flex;
|
||||
color: #14bcff;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.animtion1{
|
||||
animation: anim 4s 2s linear infinite;
|
||||
// animation-delay: .5;
|
||||
}
|
||||
.animtion2{
|
||||
animation: anim 4s linear infinite;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
@keyframes anim{
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(3);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(2rem*1.2);
|
||||
height: calc(2rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
li{
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.designOpenrtion_btn_top{
|
||||
top: 0;
|
||||
}
|
||||
.designOpenrtion_btn_bottom{
|
||||
top: 100%;
|
||||
}
|
||||
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.designOpenrtion_btn_left{
|
||||
left: 0;
|
||||
}
|
||||
.designOpenrtion_btn_right{
|
||||
left: 100%;
|
||||
}
|
||||
.designOpenrtion_rotote{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.designOpenrtion_delete{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 2.5rem;
|
||||
background: none;
|
||||
transform: translate(100%, -100%);
|
||||
height: 2.5rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
width: calc(.2rem*1.2);
|
||||
height: calc(3rem*1.2);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.designOpenrtion_rotote::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
top: calc(50% - 3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
width: calc(1.5rem*1.2);
|
||||
height: calc(1.5rem*1.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,8 @@
|
||||
<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
|
||||
<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
|
||||
<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
|
||||
<editPrintElement v-if="currentDetailType === 'print' || currentDetailType === 'element'" :type="currentDetailType"></editPrintElement>
|
||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
|
||||
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@@ -26,11 +27,16 @@ export default defineComponent({
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
editPrintElement:null as any,
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
})
|
||||
const privewDetail = ()=>{
|
||||
if(detailData.editPrintElement?.previewDetailPrintData)detailData.editPrintElement.previewDetailPrintData()
|
||||
}
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
privewDetail,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<div class="modelindex">
|
||||
<div class="modelindex_left">
|
||||
<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')"></modelNav>
|
||||
<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem"></modelNav>
|
||||
</div>
|
||||
<div class="modelindex_right">
|
||||
<div class="detail_btn">
|
||||
<!-- 全屏 -->
|
||||
<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
|
||||
|
||||
|
||||
<i v-show="true" class="icon iconfont icon-chehui" @click="revocation"></i>
|
||||
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||
<!-- 编辑 -->
|
||||
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
|
||||
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
|
||||
@@ -17,16 +18,15 @@
|
||||
|
||||
<!-- 层 -->
|
||||
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
|
||||
<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
|
||||
<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
|
||||
|
||||
</div>
|
||||
<position ref="position" :imgDesignImg=imgDesignImg></position>
|
||||
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
@@ -38,16 +38,14 @@ export default defineComponent({
|
||||
components:{
|
||||
position,modelNav
|
||||
},
|
||||
emits:['detailEdit','canvasReload','addSketch'],
|
||||
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
|
||||
})
|
||||
const setRevocation:any = inject('setRevocation')
|
||||
const getDetailListData = reactive({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||
isEditPattern:inject('isEditPattern') as any,
|
||||
imgDesignImg:false,
|
||||
@@ -62,6 +60,17 @@ export default defineComponent({
|
||||
const showDesignImgDetail = (str:any)=>{
|
||||
emit('detailEdit',str)
|
||||
}
|
||||
const deleteItem = ()=>{
|
||||
setRevocation()
|
||||
}
|
||||
const revocation = ()=>{//撤回
|
||||
emit('revocation')
|
||||
getDetailListDom.position.updataPosition()
|
||||
}
|
||||
const oppositeRevocation = ()=>{//反撤回
|
||||
emit('oppositeRevocation')
|
||||
getDetailListDom.position.updataPosition()
|
||||
}
|
||||
|
||||
//图片按下样子
|
||||
const mousedownDesignImg = ()=>{
|
||||
@@ -73,6 +82,9 @@ export default defineComponent({
|
||||
...toRefs(getDetailListDom),
|
||||
getSubmitData,
|
||||
showDesignImgDetail,
|
||||
revocation,
|
||||
deleteItem,
|
||||
oppositeRevocation,
|
||||
mousedownDesignImg,
|
||||
}
|
||||
},
|
||||
@@ -89,7 +101,7 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding-top: 3rem;
|
||||
// padding-top: 3rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.modelindex_right,.modelindex_left{
|
||||
@@ -102,12 +114,14 @@ export default defineComponent({
|
||||
> .modelindex_right{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
> .detail_btn{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 1rem;
|
||||
padding: .7rem ;
|
||||
flex-shrink: 0;
|
||||
> i{
|
||||
font-size: 2rem;
|
||||
line-height: 4rem;
|
||||
|
||||
@@ -22,7 +22,7 @@ export default defineComponent({
|
||||
components:{
|
||||
position,
|
||||
},
|
||||
emits:['canvasReload','addSketch'],
|
||||
emits:['canvasReload','addSketch','deleteItem'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n()
|
||||
@@ -66,6 +66,7 @@ export default defineComponent({
|
||||
detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
|
||||
detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
|
||||
detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
|
||||
emit('deleteItem')
|
||||
}
|
||||
const addSketch = ()=>{
|
||||
if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
|
||||
|
||||
@@ -37,6 +37,7 @@ import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import newFollowVue from '@/component/Account/message/newFollow.vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
@@ -47,11 +48,15 @@ export default defineComponent({
|
||||
type:Boolean,
|
||||
}
|
||||
},
|
||||
emits:['canvasReload'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
|
||||
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||||
isEditPattern:inject('isEditPattern') as any
|
||||
|
||||
})
|
||||
const selectItem = reactive({
|
||||
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||||
@@ -183,7 +188,45 @@ export default defineComponent({
|
||||
// this.designItemDetail.clothes[index].clothesOpenItem = true
|
||||
// }
|
||||
}
|
||||
const itemMoveMousedown = (index:any,e:any)=>{
|
||||
const itemMoveMousedown = async (index:any,e:any)=>{
|
||||
let isOpen = false
|
||||
let isModal = false
|
||||
await new Promise((resolve, reject) => {
|
||||
if(
|
||||
detailData.isEditPattern.value &&
|
||||
selectItem.selectDetail?.id &&
|
||||
(detailData.frontBack.front[index].id != selectItem.selectDetail.id)
|
||||
){
|
||||
isModal = true
|
||||
Modal.confirm({
|
||||
title: t('collectionModal.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
resolve(true)
|
||||
isOpen = true
|
||||
},
|
||||
onCancel(){
|
||||
resolve(false)
|
||||
isOpen = false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
resolve(true)
|
||||
isModal = false
|
||||
}
|
||||
}).then((rv)=>{
|
||||
})
|
||||
if(isOpen){
|
||||
store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
|
||||
emit('canvasReload')
|
||||
return
|
||||
}
|
||||
|
||||
if(isModal)return
|
||||
store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
|
||||
selectItem.imgDomIndex = index
|
||||
detailData.frontBack.front.forEach((v:any)=>{
|
||||
@@ -273,6 +316,27 @@ export default defineComponent({
|
||||
detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
||||
clothesOpenActive(index)
|
||||
}
|
||||
const updataPosition = ()=>{
|
||||
let url = detailData.frontBack?.body?.path
|
||||
let sacle = 0
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
let dom:any = document.querySelector('.molepositon .perview_img')
|
||||
// resolve(img)
|
||||
sacle = dom.parentNode.offsetWidth / img.width
|
||||
detailData.frontBack.front.forEach((item:any,index:number) => {
|
||||
for (const key in item.style) {
|
||||
if(key == 'zIndex')return
|
||||
item.style[key] = item.style[key]*sacle+'px'
|
||||
}
|
||||
for (const key in detailData.frontBack.back[index].style) {
|
||||
if(key == 'zIndex')return
|
||||
detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
|
||||
}
|
||||
});
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListDom),
|
||||
@@ -283,6 +347,7 @@ export default defineComponent({
|
||||
setpitch,
|
||||
getSubmitData,
|
||||
getMousePosition,
|
||||
updataPosition,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
@@ -303,8 +368,6 @@ export default defineComponent({
|
||||
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
|
||||
}
|
||||
});
|
||||
|
||||
console.log(el.parentNode.offsetWidth);
|
||||
};
|
||||
img.src = data.value;
|
||||
}
|
||||
@@ -320,7 +383,8 @@ export default defineComponent({
|
||||
<style lang="less" scoped>
|
||||
.molepositon{
|
||||
width: 30rem;
|
||||
height: 80rem;
|
||||
height: 65rem;
|
||||
// height: 80rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// margin: auto 0;
|
||||
@@ -337,11 +401,14 @@ export default defineComponent({
|
||||
position: relative;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
>div{
|
||||
@@ -350,6 +417,7 @@ export default defineComponent({
|
||||
}
|
||||
.detail_modal_item_front,.designOpenrtion_print{
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -369,6 +437,7 @@ export default defineComponent({
|
||||
}
|
||||
> .designOpenrtion_btn{
|
||||
z-index: 99;
|
||||
left: 0;
|
||||
ul{
|
||||
list-style: none;
|
||||
// width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user