aida_front/src/component/HomePage/layout.vue

<template>
  <div>
	<a-modal
            class="layout_modal"
            v-model:visible="layout"
            :footer="null"
            width="47rem"
            :maskClosable="false"
            :centered="true"
            :closable="false"
            :mask="false"
        >
            <div class="layout_content">
                <div class="layout_header">
                    <div class="layout_title">MoodBoard Design</div>
                    <div
                        class="icon iconfont icon-guanbi close_icon"
                        @click.stop="init()"
                    ></div>
                </div>
				<div class="layout_nav">
					<div v-for="item,index in layoutList" :key="item">
						<img :src="item.imgUrl">
					</div>
				</div>
				<div class="layout_centent" :class="{active:flex_direction}">
					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
						<img :src="item.imgUrl">
					</div>
					<!-- <draggable 
						v-model="layoutList" 
						group="people" 
						@start="drag=true" 
						@end="drag=false" 
						animation= "150"
						item-key="id">
						<template #item="{element,index}">
							<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
								<img :src="element.imgUrl">
							</div>
						</template>
					</draggable> -->
				</div>
               
				<div class="layout_left">
					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
						</div>
					</div>
				</div>
				<div class="layout_right">
					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
						</div>
					</div>
				</div>
                <div
                    class="button_second submit_button"
                    @click="submitTemplate()"
                >
                    Submit
                </div>
            </div>
        </a-modal>

  </div>
</template>

<script lang="ts">
import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import moodb from "@/tool/moodb";
import draggable from 'vuedraggable'
export default defineComponent({
	props:["moodb_className",'flex_direction'],
	components: {
		draggable
    },
    setup(prop) {
        let fileList: any = ref([]);
        let layout: any = ref(false);
        let templateFileList: any = ref([]);
        let openClick: any = ref(1);
		let drag = false;
        return {
            fileList,
            layout,
            templateFileList,
            openClick,
			drag,
        };
    },
    data() {
        return {
            indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            moodTemplateId: "", //模板id
            store: useStore(),

			layoutList:computed(()=>{
				return [...(useStore().state.UploadFilesModule.moodboardFiles),
				...(useStore().state.UploadFilesModule.generateFiles),
				...(useStore().state.UploadFilesModule.MaterialFiles)]
			}),
			layoutListaa:[
				{
					id_:1,
					name:'2',
				},
				{
					id_:2,
					name:'2',
				},
				{
					id_:3,
					name:'2',
				},
			],
			moodb : moodb.moodb_,
			moodbList:{},
			moodbClassName:[],
        };
    },

    mounted() {
		
    },
	directives:{
		layout:{
			mounted (el,layout) {
				// console.log(el,layout);
				layout.value.style = {
					rotate:'',
					left:'',
					top:'',
					width:'',
					height:'',
				}
			},
			updated (el,layout) {
				
			}
		}
	},
    methods: {
		init(){
			this.layout = !this.layout
			let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
				...this.store.state.UploadFilesModule.generateFiles,
				...this.store.state.UploadFilesModule.MaterialFiles]
			console.log(this.moodb[layoutList.length]);
			this.moodbList = this.moodb[layoutList.length-1]
			this.moodbClassName = this.moodb_className
		},
		setmoodb(item:any){
			console.log(item);
			this.moodbClassName = item
			this.$emit('setmoodbClass',this.moodbClassName)
		},
		//开始拖拽事件
		onStart(){
			this.drag=true;
		},
		//拖拽结束事件
		onEnd() {
			this.drag=false;
		},
		// setmoodbClassName(){
		// },
		//获取图片宽高
		// getimgWH(){
		// 	let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
		// 		...(useStore().state.UploadFilesModule.generateFiles),
		// 		...(useStore().state.UploadFilesModule.MaterialFiles)]


		// 	return new Promise(res => {
		// 		var img = document.createElement("img");
		// 		img.src = item.imgUrl
		// 		img.addEventListener("load", function () {
		// 			document.body.appendChild(img);
		// 			var w = img.offsetWidth;
		// 			var h = img.offsetHeight;
		// 			img.remove()
		// 			res({ w, h });
		// 		})
		// 	})
		// 	layoutList.forEach(item => {
		// 		let img = document.createElement('img')
		// 		img.addEventListener("load",function(){
		// 			document.body.appendChild(img);
		// 			var w = img.offsetWidth;
		// 			var h = img.offsetHeight;
		// 			console.log(w,h);
		// 			img.remove()
		// 		})

		// 	});
		// },
        // layoutcli(num: Number) {
        //     this.openClick = num;
		// 	if(num ==2 ){
		// 		let material:any = this.$refs.Material
		// 		material.init('Moodboard')
		// 	}else if (num == 3){
		// 		let material:any = this.$refs.Material
		// 		material.init('generate')
		// 	}
        // },
      

        randomRange(min: any, max: any, num: any) {
            // min最小值，max最大值 num排除的值
            let index = Math.floor(Math.random() * (max - min)) + min;
            while (index === num) {
                index = Math.floor(Math.random() * (max - min)) + min;
            }
            return index;
        },

        //随机重置图片顺序
        // refetchTemplate() {
        //     let arr = Array.from({ length: this.templateFileList.length });
        //     for (let item of this.templateFileList) {
        //         let index = this.randomRange(
        //             0,
        //             this.templateFileList.length,
        //             -1
        //         );
        //         while (arr[index]) {
        //             index = this.randomRange(
        //                 0,
        //                 this.templateFileList.length,
        //                 -1
        //             );
        //         }
        //         arr[index] = item;
        //     }
        //     this.templateFileList = arr;
        // },
		changeTemplateModal(){
			this.layout = !this.layout
		},
        //提交模板
        submitTemplate() {
            this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
            this.store.commit("setMoodboardFile", this.fileList);
            this.store.commit("setMoodTemplateId", this.moodTemplateId);
            this.changeTemplateModal();
        },
    },
});
</script>

<style lang="less">
.layout_modal {
	width: 80% !important;
    .ant-modal-body {
        padding: 0;
		height: calc(60vh - 6.4rem);
    }
	.ant-modal-content{
		border-radius: 1rem;
	}

    .layout_content {
        // background: #f2f3fb;
        // padding-bottom: 2.9rem;
		height: 100%;
        .layout_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem 0 2.5rem;
            height: 6.6rem;

            .layout_title {
                font-size: 1.8rem;
                font-weight: 500;
                color: #030303;
            }

            .close_icon {
                font-size: 1.8rem;
                color: #aeb2b7;
                cursor: pointer;
            }
        }
		.layout_nav{
			display: flex;
			margin-top: 2rem;
			justify-content: center;
			img{
				width:5rem;
                cursor: pointer;
				margin: 0 2rem;
			}
		}
		.layout_centent{
			display: flex;
			height: 60%;
			flex-direction: column;
			flex-wrap: wrap;
			align-content: space-around;
			width: 50%;
			margin: auto;
			padding: 3rem 0;
			justify-content: space-between;
			>div{
				// width: 100%;
				// height: 100%;
				// display: flex;
				// flex-direction: column;
				// flex-wrap: wrap;
				// align-content: space-around;
				// margin: auto;
				// justify-content: space-between;
			}
			&.active{
				flex-direction: row;

				// >div{
				// }
			}
			.layout_centent_bor{
				
			}
			.modal_imgItem{
				position: relative;
				img{
					position: absolute;
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}
		}
		.wh1{
				width: 23%;
				height: 48%;
			}
			.wh4{
				width: 48.5%;
				height: 100%;
			}
			.w1h2{
				width: 23%;
				height: 100%;
			}
			.w2h1{
				width: 48.5%;
				height: 48%;
			}
		.layout_left{
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			overflow-x: hidden;
			// background-color: #000;
			width: 8%;
			height: 50%;
			&.layout_left::-webkit-scrollbar {
                display: none;
            }
			.layout_left_items{
				width: 100%;
				height: 6rem;
				display: flex;
				align-content: space-between;
				justify-content: space-between;
				flex-wrap: wrap;
				flex-direction: column;
				margin-bottom: 2rem;
                cursor: pointer;
				.layout_left_item{
					box-sizing: border-box;
					border: 1px solid #000;
				}
			}
		}
        .submit_button {
            margin: 2rem auto 0;
        }
    }
}
</style>