合并代码

src/component/HomePage/layout.vue

@@ -125,13 +125,21 @@ export default defineComponent({
 		draggable
     },
     setup(prop) {
+		let store = useStore()
         let layout: any = ref(false);
         let templateFileList: any = ref([]);
         let openClick: any = ref(1);
 		let drag = false;
 		let layoutList:any = ref([])
-		const content = ref<HTMLElement | null>(null);
+		const content:any = ref<HTMLElement | null>(null);
 		let loadingShow = ref(false)
+		let styleObj = computed(()=>{
+			return store.state.UploadFilesModule.disposeMoodboardPostition
+		})
+		let domObj = {
+			dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
+			domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
+		}
         return {
             layout,
             templateFileList,
@@ -139,7 +147,9 @@ export default defineComponent({
 			drag,
 			layoutList,
 			content,
-			loadingShow
+			loadingShow,
+			styleObj,
+			domObj,
         };
     },
     data() {
@@ -348,6 +358,20 @@ export default defineComponent({
 				el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
 					el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
 						if(timeSwitch){
+							if(angle == 0){
+								function getRotationAngle(transformDom:any) {
+								if (!transformDom || transformDom === 'none') return null;
+								let transform = window.getComputedStyle(transformDom).transform;
+								const values = transform?.match(/matrix\(([^)]+)\)/);
+								if (values) {
+									const matrix = values[1].split(',').map(Number);
+									const angle = Math.atan2(matrix[1], matrix[0]) * (180 / Math.PI);
+									return angle >= 0 ? angle : angle + 360; // 确保角度为正值
+								}
+								return null;
+								}
+								angle = getRotationAngle(elParent.firstElementChild);
+							}
 							timeSwitch = false
 							if((e as WheelEvent).deltaY > 0){
 								if(num <= 1){
@@ -571,7 +595,9 @@ export default defineComponent({
 			this.layoutList = parentList
 			
 			this.moodbList = this.moodb[parentList.length-1]
-			this.moodbClassName = this.moodb_className
+			this.moodbClassName = this.styleObj.class
+			this.initDomStyle()
+			
 		},
 		cancelDsign(){
 			this.layout = false
@@ -604,6 +630,65 @@ export default defineComponent({
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
+		setIndex(arr:any){
+			const nums = arr.map((obj:any) => obj.num);
+			const sortedNums = [...nums].sort((a, b) => a - b);
+			GO.zIndex = sortedNums[sortedNums.length - 1] + 1
+			const numToNewValue = new Map();
+			sortedNums.forEach((num, index) => numToNewValue.set(num, index + 1));
+			arr.forEach((obj:any) => {
+				obj.num = numToNewValue.get(obj.num);
+			});
+			return arr
+		},
+		initDomStyle(){
+			nextTick(()=>{
+				this.content.forEach((item:any,index:any) => {
+					if(this.styleObj.domStyle[index]){
+						item.classList.add('active')
+						this.initStyle(item,this.styleObj.domStyle[index])
+					}
+					this.domObj.dom.forEach((domName:any,domStyle:any) => {
+						let dom,style
+						if(this.styleObj[this.domObj.domStyle[index]]){
+							style = this.styleObj[this.domObj.domStyle[domStyle]][index]
+						 	dom = item.querySelector(domName)
+							this.initStyle(dom,style)
+						}
+					})
+				});
+			})
+		},
+		clearStyleObj(){
+			this.styleObj.domStyle = []
+			this.domObj.domStyle.forEach((item:any)=>{
+				if(this.styleObj[item])this.styleObj[item] = []
+			})
+		},
+		initStyle(dom:any,style:any){
+			if(!style)return
+			for (const [property, value] of Object.entries(style)) {
+				dom.style.setProperty(property, value);
+			}
+		},
+		setDomStyle(){
+			this.clearStyleObj()
+			this.content.forEach((item:any) => {
+				this.styleObj.domStyle.push(this.setStyle(item.style))
+				this.domObj.dom.forEach((domName:any,index:any) => {
+					let style = this.domObj.domStyle[index]
+					let dom = item.querySelector(domName)
+					this.styleObj[style].push(this.setStyle(dom.style))
+				})
+			});
+		},
+		setStyle(domStyle:any){
+			let style:any = {}
+			for (let property of domStyle) {
+				style[property] = domStyle.getPropertyValue(property);
+			}
+			return style
+		},
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
@@ -628,6 +713,11 @@ export default defineComponent({
 							this.layout = false
 							this.loadingShow = false
 							this.store.commit("setDisposeMoodboard", rv);
+
+							this.setDomStyle()
+							this.setIndex(this.styleObj.domStyle)//index统一排序设置值
+							this.store.commit("setDisposeMoodboardPosition", this.styleObj);
+
 						}
 					).catch(rv=>{
 						this.loadingShow = false