部分页面样式调整

src/component/DetailCopy/detailRight/editPrintElement.vue

@@ -28,6 +28,19 @@
 				</a-slider>
 			</div>
 		</div>
+		<div class="printElementList" ref="printElementList">
+			<div class="itemList" :style="{width:prentWidth || 0}">
+				<div class="imgItem" 
+					v-for="item in printStyleList[type][stateOverallSingle]" 
+					:key="item"
+					@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
+					@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
+				>
+					<img :src="item.path" alt="">
+					<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
+				</div>
+			</div>
+		</div>
 		<div class="editPrintElementBox">
 			<div class="designOpenrtion_centent" id="designOpenrtionCentent">
 			<!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
@@ -122,6 +135,24 @@ export default defineComponent({
 				scale:0,
 			},
 			loadingShow:false,
+			printElementList:null as any,
+		})
+		const collItemSize = reactive({
+			collValue:18,
+			num:1,
+			prentWidth:0 as any,
+			padding:10,
+			likeStyle:{
+				
+			},
+			itemStyle:{
+				width:0,
+				height:0,
+			},
+			collTime:null as any,
+			isMove:false,
+			elList:[] as any,
+			selectIndex:0,
 		})
 		
 		const setOveralSingle = ()=>{
@@ -177,6 +208,7 @@ export default defineComponent({
 				scale,
 			}
 			getItemPosition(item)
+			setItemPosition()
 			store.commit('DesignDetailCopy/setCurrentPrintElement',null)
 		}
 		const previewDetailPrintData = ()=>{
@@ -256,16 +288,13 @@ export default defineComponent({
 			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++
+					// zIndex:item.priority,
 				},
 				transform:{
 					rotateZ:item.angle?item.angle:0
@@ -280,6 +309,7 @@ export default defineComponent({
 				editPrintElementData.printStyleList[props.type].overall = []
 				editPrintElementData.printStyleList[props.type].overall.push(item)
 			}
+
 		}
 		const setPosition = ()=>{
 			nextTick(()=>{
@@ -309,6 +339,7 @@ export default defineComponent({
 							}
 							getItemPosition(item)
 						})
+						setItemPosition()
 					}
 					if(props.type == 'print'){
 						editPrintElementData.overallSingle = state
@@ -345,7 +376,7 @@ export default defineComponent({
 			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.style.zIndex = editPrintElementData.printZIndex++
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
 				scale:scale,
 				rotateZ:rotateZ?rotateZ:0,
@@ -479,10 +510,8 @@ export default defineComponent({
 				top:editPrintElementDom.imgDom.offsetTop+'px',
 				height:editPrintElementDom.imgDom.offsetHeight+'px',
 				width:editPrintElementDom.imgDom.offsetWidth+'px',
-				zIndex:editPrintElementData.printZIndex
+				// zIndex:editPrintElementData.printZIndex
 			}
-			// document.removeEventListener("mouseup", sizeMouseup);
-			// document.removeEventListener("mousemove", sizeMousemove);
 			document.removeEventListener('mousemove',sizeMouseMove)
 			document.removeEventListener('touchmove',sizeTouchmove)
 			document.removeEventListener('mouseup',sizeMouseup) 
@@ -490,8 +519,6 @@ export default defineComponent({
 		}
 		const mouseup = (e:any)=>{
 
-			// document.removeEventListener("mouseup", mouseup);
-			// document.removeEventListener("mousemove", moveMousemove);
 			document.removeEventListener('mousemove',mouseMove)
 			document.removeEventListener('touchmove',touchmove)
 			document.removeEventListener('mouseup',mouseup) 
@@ -500,6 +527,191 @@ export default defineComponent({
 		const clearOverall = ()=>{
 			editPrintElementData.printStyleList[props.type].overall = []
 		}
+
+
+		const designMousedown = (e:any,uniqueId:number,str:string)=>{
+			let item:any  = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
+			if(!item)return
+			const pEl = editPrintElementData.printElementList;
+			item.el.style.zIndex = 2;
+			item.el.style.transition = 'all 0s';
+			let startX = e.clientX,
+			startY = e.clientY,
+			startSL = + pEl.scrollLeft,
+			left = item.el.offsetLeft,
+			top = item.el.offsetTop;
+			collItemSize.isMove = false;
+			const elWidth = item.el.offsetWidth;
+
+			
+			var toMovePx = 1;
+			var toMoveType = "";//left right
+			let moveFun = (e:any) => {
+				collItemSize.isMove = true
+				let X = e.clientX - startX + (pEl.scrollLeft - startSL) + left;
+				let Y = 0;
+				if(X < 0) X = 0;
+				const maxLeft = parseInt(collItemSize.prentWidth) - elWidth - collItemSize.padding ;
+				if(X > maxLeft) X = maxLeft;
+				item.el.style.left = `${X}px`;
+				item.el.style.top = `${Y}px`;
+
+				const pElBCR = pEl.getBoundingClientRect();
+				var num = 2;
+				if(X < pEl.scrollLeft){
+					toMoveType = "left";
+					num = pElBCR.x-e.clientX;
+				}else if(X > pEl.scrollLeft + pEl.clientWidth - elWidth){
+					toMoveType = "right";
+					num = e.clientX - pElBCR.x - pElBCR.width;
+				}else{
+					toMoveType = "";
+				}
+				toMovePx = num / 20;
+				if(toMovePx < 2) toMovePx = 2;
+
+
+				reRange(item, X, Y,str);
+			};
+
+			const updataFun = ()=>{
+				if(toMoveType == "left"){
+					let left = pEl.scrollLeft - toMovePx;
+					if(left < 0)left = 0;
+					item.el.style.left = `${left}px`;
+					pEl.scrollLeft = left;
+					reRange(item, left, 0);
+				}else if(toMoveType == "right"){
+					let left = pEl.scrollLeft + toMovePx;
+					if(left > pEl.scrollWidth - pEl.clientWidth)left = pEl.scrollWidth - pEl.clientWidth;
+					const elLeft = left + pEl.clientWidth - elWidth - collItemSize.padding;
+					item.el.style.left = `${elLeft}px`;
+					pEl.scrollLeft = left;
+					reRange(item, elLeft, 0);
+				}else if(toMoveType == "stop"){
+					return;
+				}
+				requestAnimationFrame(updataFun);
+			}
+			updataFun();
+
+			let mouseUpFun = ()=>{
+				toMoveType = "stop"
+				document.removeEventListener('mousemove',mouseMove)
+				document.removeEventListener('touchmove',touchmove)
+
+				document.removeEventListener('mouseup',mouseUpFun) 
+				document.removeEventListener('touchend',mouseUpFun) 
+				item.el.style.zIndex = 1;
+				item.el.style.transition = 'top .5s';
+				moveItem();
+				sortDesignCollection()
+			}
+			let mouseMove = function(event:any){
+				let e = getMousePosition(event,false)
+				moveFun(e)
+			}
+			let touchmove = function(event:any){
+				let e = getMousePosition(event,true)
+				moveFun(e)
+			}
+
+			document.addEventListener('mousemove',mouseMove)
+			document.addEventListener('touchmove',touchmove)
+
+			document.addEventListener('mouseup',mouseUpFun) 
+			document.addEventListener('touchend',mouseUpFun) 
+		}
+		//排序  从大到小
+		const sortDesignCollection = ()=> {
+		
+		}
+		const reRange = (item:any, x:number, y:number,str?:string)=>{
+			let elList:any = collItemSize.elList
+			let index = collItemSize.selectIndex
+			let width,height,num
+			num = collItemSize.num
+			width = collItemSize.itemStyle.width
+			height = collItemSize.itemStyle.height
+			
+			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
+			moveIndex = elList.length - 1 - moveIndex
+			moveIndex = moveIndex < 0 ? 0 : moveIndex;
+			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
+			if(moveIndex != index){
+				collItemSize.selectIndex = moveIndex;
+				let currentSort = item.sort;
+				for(let i = 0;i < elList.length;i++){
+					if(currentSort < moveIndex){
+						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
+							elList[i].sort -= 1;
+						};
+					}else if(currentSort > moveIndex){
+						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
+							elList[i].sort += 1;
+						};
+					}
+				};
+				elList[item.index].sort = moveIndex;
+				moveItem();
+			}
+		}
+		const moveItem = ()=>{
+			let value = collItemSize.num
+			for(let i = 0;i < collItemSize.elList.length;i++){
+				let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.width +collItemSize.padding) + 'px';
+				collItemSize.elList[i].el.style.left = height
+			}
+			setZIndex()
+		}
+		const navDelete = (item:any)=>{
+			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
+			let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
+			arr.splice(index,1)
+			setItemPosition()
+		}
+		const setZIndex = ()=>{
+			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
+			collItemSize.elList.forEach((elItem:any)=>{
+				let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
+				arr[clothesIndex].pattern.style.zIndex = elItem.sort
+				// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
+				// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
+				// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
+				// editPrintElementData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
+			})
+		}
+		const setItemPosition = async ()=>{
+			// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
+			await nextTick()
+			let parent = editPrintElementData.printElementList.offsetWidth
+			let elArr = editPrintElementData.printElementList.querySelectorAll('.imgItem')
+			let value = collItemSize.num
+			const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+			const remValue = 8 * htmlFontSize;
+			//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
+			collItemSize.itemStyle.width = remValue
+			collItemSize.elList = []
+			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
+
+			arr.forEach((item,index) => {item.uniqueId  = `${Date.now()}_${index}`});
+
+			const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
+			const sortMap = {} as any;
+			sortedArray.forEach((item, index) => {
+				sortMap[item.priority] = index ; // 1, 2, 3, 4...
+			});
+			for(let i = 0;i < elArr.length;i++){
+				collItemSize.elList.push({
+					el: elArr[i], 
+					// sort: elArr.length - i -1, 
+					sort: sortMap[arr[i].priority],
+					index: i,
+					uniqueId:arr[i]?.uniqueId || 99999,
+				});
+			}
+			collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
+		} 
 		onMounted(()=>{
 			if(props.type == 'element'){
 				editPrintElementData.stateOverallSingle = 'single'
@@ -513,6 +725,7 @@ export default defineComponent({
 			getMousePosition,
 			...toRefs(editPrintElementDom),
 			...toRefs(editPrintElementData),
+			...toRefs(collItemSize),
 			setOveralSingle,
 			formatter,
 			itemMoveMousedown,
@@ -520,6 +733,8 @@ export default defineComponent({
 			deletePrint,
 			previewDetailPrintData,
 			clearOverall,
+			designMousedown,
+			navDelete,
         }
     },
 	directives:{
@@ -656,6 +871,35 @@ export default defineComponent({
 				}
 			}
 		}
+		> .printElementList{
+			width: 100%;
+			height: 10rem;
+			position: relative;
+			overflow-x: auto;
+			.itemList{
+				height: 100%;
+			}
+			.imgItem{
+				width: 8rem;
+				height: 8rem;
+				position: absolute;
+				cursor: pointer;
+				border-radius: 1rem;
+				overflow: hidden;
+				> img{
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+				}
+				> i{
+					position: absolute;
+					right: 1rem;
+					top: 1rem;
+					color: #fff;
+					text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
+				}
+			}
+		}
 		> .editPrintElementBox{
 			flex: 1;
 			overflow: hidden;

src/component/DetailCopy/detailRight/elementType.vue

@@ -1,45 +0,0 @@
-<template>
-    <div class="sketchType">
-    </div>
-    
-</template>
-<script lang="ts">
-import { defineComponent,computed,ref,provide,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'
-export default defineComponent({
-    components:{
-    },
-    setup(props,{emit}) {
-        const store = useStore();
-		const detailData = reactive({
-			
-		})
-		const getDetailListData = reactive({
-		
-		})
-		const getDetailListDom = reactive({
-		})
-        return{
-			...toRefs(detailData),
-			...toRefs(getDetailListData),
-			...toRefs(getDetailListDom),
-
-        }
-    },
-
-	provide() {
-		return {
-		}
-	},
-		
-})
-</script>
-<style lang="less" scoped>
-    .sketchType{
-		
-	}
-</style>

src/component/DetailCopy/detailRight/index.vue

@@ -6,7 +6,6 @@
 		</div> -->
 		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
 		<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
-		<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
 		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
 		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
 		<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
@@ -20,15 +19,15 @@ import { useStore } from "vuex";
 import sketchType from './sketchType.vue'
 import printType from './printType.vue'
 import editPrintElement from './editPrintElement.vue'
-import elementType from './elementType.vue'
 import modelsType from './modelsType.vue'
 export default defineComponent({
     components:{
-		sketchType,printType,elementType,editPrintElement,modelsType
+		sketchType,printType,editPrintElement,modelsType
     },
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
+		    designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			editPrintElement:null as any,
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
@@ -55,6 +54,7 @@ export default defineComponent({
 		display: flex;
 		flex: 1;
 		overflow: hidden;
+		flex-direction: column;
 		> .detailText{
 			margin-bottom: 1rem;
 		}

src/component/DetailCopy/detailRight/modelsType.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sketchType" v-show="designDetail?.newModel">
-		<div class="detailText">{{$t('DesignPrintOperation.NewPrint')}}</div>
+		<div class="detailText">{{$t('DesignPrintOperation.NewModel')}}</div>
 		<div class="sketchContent">
 			<img :src="designDetail.newModel?.url" alt="">
 		</div>