合并代码

src/component/HomePage/layoutMobile.vue

@@ -132,14 +132,22 @@ 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 moodItemScale = ref(0)
+		let domObj = {
+			dom:['img','ul','.layoutMobile_rotote','.layoutMobile_translate','.layoutMobile_angle_tr','.layoutMobile_angle_tl','.layoutMobile_angle_br','.layoutMobile_angle_bl'],
+			domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
+		}
         return {
             layout,
             templateFileList,
@@ -148,7 +156,9 @@ export default defineComponent({
 			layoutList,
 			content,
 			loadingShow,
-			moodItemScale
+			moodItemScale,
+			styleObj,
+			domObj,
         };
     },
     data() {
@@ -582,7 +592,9 @@ export default defineComponent({
 			this.moodIndex = 0
 
 			this.moodbList = this.moodb[parentList.length-1]
-			this.moodbClassName = this.moodb_className
+			this.moodbClassName = this.styleObj.class
+			this.initDomStyle()
+
 		},
 		cancelDsign(){
 			this.layout = false
@@ -635,6 +647,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
@@ -659,6 +730,10 @@ 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