details功能

src/component/DetailCopy/model/index.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;

src/component/DetailCopy/model/modelNav.vue

@@ -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')

src/component/DetailCopy/model/modelPosition.vue

@@ -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%;