aida_front/src/component/HomePage/SketchboardUpload.vue

<template>
    <div class="sketchboard_upload_modal">
        <div class="modal_left">
            <div class="switch_type_list">
                <div
                    @click.stop="open(1)"
                    class="switch_type_item"
                    :class="[openClick == 1 ? 'select_swtich' : '']"
                >
                    <span>Upload</span>
                </div>
                <div
                    @click.stop="open(2)"
                    class="switch_type_item"
                    :class="[openClick == 2 ? 'select_swtich' : '']"
                >
                    <span>Library</span>
                </div>
                <div
                    @click.stop="open(3)"
                    class="switch_type_item"
                    :class="[openClick == 3 ? 'select_swtich' : '']"
                >
                    <span>Generate</span>
                </div>
            </div>
            <div v-show="openClick == 1" class="sketchboard_body">
                <div class="upload_img_body scroll_style">
                    <div class="upload_item">
                        <div
                            class="upload_file_item"
                            v-for="(file, index) in fileList"
                            :key="file"
                        >
						<div
                                class="upload_file_item_content"
                                v-show="file?.status === 'uploading'"
                            >
                                <a-spin
                                    :indicator="indicator"
                                    tip="Uploading..."
                                />
                            </div>
                            <div
                                class="upload_file_item_content"
                                v-show="file?.status === 'done'"
                            >
                                <img :src="file?.imgUrl" class="upload_img" />
                                <div class="operate_file_block">
                                    <div class="select_img_type">
                                        <div
                                            class="select_category"
                                            @click.stop="showFileCategory(file)"
                                        >
                                            {{ getSketchLabel(file.category) }}
                                            <div
                                                :class="[
                                                    'icon',
                                                    'iconfont',
                                                    'icon-xiala',
                                                    file.categoryShow
                                                        ? 'icon_rotate'
                                                        : '',
                                                ]"
                                            ></div>
                                        </div>
                                        <div
                                            class="category_list"
                                            v-show="file.categoryShow"
                                        >
                                            <div
                                                :class="[
                                                    'category_item',
                                                    file.category == cate.value
                                                        ? 'select_category_item'
                                                        : '',
                                                ]"
                                                v-for="(
                                                    cate, index
                                                ) in sketchCatecoryList"
                                                :key="index"
                                                @click="
                                                    selectFileCategory(
                                                        file,
                                                        cate
                                                    )
                                                "
                                            >
                                                {{ cate.label }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="delete_file_block"
                                    @click="deleteFile(file)"
                                >
                                    <span
                                        class="icon iconfont icon-shanchu"
                                    ></span>
                                </div>
                            </div>
                            <div
                                class="pin_block"
                                v-show="file?.status === 'done'"
                            >
                                <a-checkbox v-model:checked="file.pin"
                                    >PIN</a-checkbox
                                >
                            </div>
                        </div>
                        <div
                            class="upload_file_item upload_component"
                            v-show="fileList.length < 15"
                        >
                            <a-upload
                                :action="uploadUrl + '/api/element/upload'"
                                list-type="picture-card"
                                :data="{
                                    ...upload,
                                }"
                                :before-upload="beforeUpload"
                                :headers="{ Authorization: token }"
                                v-model:file-list="fileList"
                                multiple
                                :maxCount="15"
                                accept=".jpg,.png,.jpeg,.bmp"
                                @change="(file) => fileUploadChange(file)"
                            >
								<div
                                    class="upload_tip_block"
                                >
                                    <i class="fi fi-br-upload"></i>
                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
                                </div>
                            </a-upload>
                        </div>
                    </div>
                </div>
            </div>

            <Material
                v-show="openClick == 2"
                ref="Material"
                msg="Sketchboard"
                @confirmSelect="confirmSelect"
            ></Material>
            <Generate
                v-show="openClick == 3"
                ref="Generate"
                msg="Sketchboard"
                @generateCheckbox="getgenerateCheckbox"
            ></Generate>
        </div>
		<div class="modal_right">
			<div class="modal_layout">
				<div class="modal_text">
					<div>Thumbnail preview of selected moodboard</div>
					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
				</div>
				<div class="modal_img">
					<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
						<img v-lazy="item.imgUrl">
						<div class="checked" >
							<i class="fi fi-rr-trash"></i>
						</div>
					</div>
				</div>
			</div>
			<div v-show="openClick == 3" class="modal_accomplish">
				<div class="input_box">
					<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
					<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
				</div>
				<div class="modal_img">
					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
						<img :src="item.imgUrl">
					</div>
				</div>
			</div>
		</div>
		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
       	
		
    </div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import { Https } from "@/tool/https";
export default defineComponent({
    components: { Material, Generate },
    setup() {
        let fileList: any = ref([]);
        let openClick: any = ref(1);
		let generateList:any = ref([
		{
                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
                id_: 1,
            },
            {
                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
                id_: 2,
            },
            {
                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
                id_: 3,
            },
            {
                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
                id_: 4,
            },
		])
		let generateCheckbox:any = ref()
        return {
            fileList,
            openClick,
			generateList,
			generateCheckbox
        };
    },
    data() {
        return {
            swtich_type: "upload",
            indicator: h(LoadingOutlined, {
                style: {
                    fontSize: "2.4rem",
                },
                spin: true,
            }),
            upload: {
                isPin: 0,
                level1Type: "Sketchboard",
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
            token: "",
            uploadUrl: "",
            store: useStore(),
            sketchCatecoryList: [
                {
                    value: "Outwear",
                    label: "Outwear",
                },
                {
                    value: "Blouse",
                    label: "Blouse",
                },
                {
                    value: "Dress",
                    label: "Dress",
                },
                {
                    value: "Trousers",
                    label: "Trousers",
                },
                {
                    value: "Skirt",
                    label: "Skirt",
                },
            ],
			captionGeneration:'',
			sketchboardList:computed(()=>{
				return  useStore().state.UploadFilesModule.sketchboard
			}),
        };
    },
    computed: {
        getSketchLabel(value) {
            return (value: any) => {
                let lable = "";
                for (let item of this.sketchCatecoryList) {
                    if (item.value === value) {
                        lable = item.label;
                        break;
                    }
                }
                return lable;
            };
        },
		
    },
    mounted() {
        this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
    },
    methods: {
        open(num: Number) {
            this.openClick = num;
            if (num == 2) {
                let material: any = this.$refs.Material;
                material.init("Moodboard");
            } else if (num == 3) {
                // let Generate:any = this.$refs.Generate
                // Generate.init('generate')
            }
        },
		getgenerateCheckbox(value:any){
			this.generateCheckbox = value
		},
        fileUploadChange(data: any) {
            let file = data.file;
            if (file.status === "done") {
				let res = JSON.parse(file.xhr.response);
                file.imgUrl = res.data.url;
                file.resData = res.data;
                file.pin = false;
                file.category = "Outwear";
                file.categoryShow = false;
				file.id_ = GO.id++
				file.type_ = 'upload';
                let fileList = this.fileList.filter(
                    (v: any) => v.status === "done"
                );
                this.store.commit("setSketchboardFile", fileList);
            } else if (file.status === "error") {
                let index = -1;
                this.fileList.forEach((ele: any, index1: any) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    this.fileList.splice(index, 1);
                }
                message.error(file.name + "upload failed");
            }
        },

        beforeUpload(file: any) {
            const isJpgOrPng =
                file.type === "image/jpeg" ||
                file.type === "image/png" ||
                file.type === "image/jpg" ||
                file.type === "image/bmp";
            if (!isJpgOrPng) {
                message.error("You can only upload Image file!");
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                message.error("Image must smaller than 5MB!");
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        },

        showFileCategory(file: any) {
            file.categoryShow = true;
            document.addEventListener("click", this.hiddenFileCategory);
        },

        selectFileCategory(file: any, cate: any) {
            file.category = cate.value;
            this.store.commit("setSketchboardFile", this.fileList);
        },
        hiddenFileCategory() {
            for (let item of this.fileList) {
                item.categoryShow = false;
            }
            document.removeEventListener("click", this.hiddenFileCategory);
        },

        deleteFile(item: any) {
			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
				this.store.commit("addGenerateMaterialFils", item);
			}else{
				this.fileList = this.store.state.UploadFilesModule.moodboardFiles
				let moodboard 
				this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
					if(items.id_ == item.id_){
						moodboard = index
						
					}
				})
				this.fileList.splice(moodboard,1)
				this.store.commit("setSketchboardFile", this.fileList);
			}
        },

        recollection() {
            this.fileList = JSON.parse(
                JSON.stringify(
                    this.store.state.UploadFilesModule.allBoardData
                        .skecthboardFiles
                )
            );
            this.store.commit("setSketchboardFile", this.fileList);
        },
        confirmSelect(event: any) {
            for (let item of event) {
                let data = {
                    imgUrl: item.url,
                    resData: item,
                    pin: false,
                    status: "done",
                    category: item.level2Type || "Outwear",
                    categoryShow: false,
                };
                if (this.fileList.length == 15) {
                    message.error(
                        "Maximum number of allowable file uploads has been exceeded"
                    );
                    break;
                }
                this.fileList.push(data);
            }
            this.store.commit("setSketchboardFile", this.fileList);
        },
		//发送请求生成图片
		getgenerate(){
			
			let generage:any = this.$refs.Generate
			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
			let data = {
				generateType:generateType,
				designType:'',
				collectionElementId:generage.collectionElementid,
				level1Type:generage.upload.level1Type,
				level2Type:generage.level2Type,
				text:this.captionGeneration,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
				version:0,//为1就是Print
			}
			if(generateType == 'image'||generateType == 'text-image'){
				if(generage.collectionElementid){
				}else{
					message.error(
						"Please select a picture"
					);
					return
				}
			}else if(generateType == 'text'){
				// this.beforeUpload(false)
				if(this.captionGeneration){
				}else{
					message.error(
						"Please enter content"
					);
					return
				}
			}
			if(generateType == 'text'){
				data.collectionElementId = ''
				data.level2Type = ''
			}
			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
                (rv) => {
					// if(rv){
						
					// }
					console.log(rv);
					
                }
            ).catch(res=>{
            });
		},
		generageAdd(item:any){
			item.type_ = {
                type1: "generate",
                type2: 'Sketchboard',
            },
            this.store.commit("addGenerateMaterialFils", item);
		}
    },
});
</script>
<style lang="less" scoped>
.sketchboard_upload_modal {
	height: 100%;
    display: flex;
	.modal_left {
        padding-top: 4rem;
        width: 47%;
		.switch_type_list {
            display: flex;
            align-items: center;
            position: relative;

            .switch_type_item {
                display: flex;
                align-items: center;
                // padding: 0 2rem;
                height: 4rem;
                background: #fff;
                border-radius: 0.8rem;
                line-height: 4rem;
                font-size: 1.6rem;
                // margin-right: 2.2rem;
                margin-right: 8rem;
                color: #000;
                cursor: pointer;
                position: relative;
                text-align: center;
                transform-origin: left;
                transform: scale(1);
                transition: 0.3s all;
                &.switch_type_item::before {
                    position: absolute;
                    content: "";
                    display: block;
                    background: #000;
                    height: 3px;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 6px;
                    width: 0px;
                    transition: 0.3s all;
                }
                &.select_swtich {
                    color: #000;
                    // font-weight: 900;
                    transform: scale(1.15);
                }
                &.select_swtich::before {
                    width: 100%;
                }

                .switch_icon {
                    font-size: 1.8rem;
                    margin-right: 0.8rem;
                }
            }
        }
		.sketchboard_body {
        height: calc(100% - 5rem);
        padding-top: 2.5rem;
        height: 30rem;
        overflow-x: hidden;
        border-right: 1px solid #e5e5e5;
        &.moodboard_body::-webkit-scrollbar {
            display: none;
        }
        .upload_img_body {
            height: calc(100% - 3rem);
            overflow-y: auto;
            margin-bottom: 1rem;
			&.upload_img_body::-webkit-scrollbar {
					display: none;
				}
        }

       
		.upload_file_item{
			margin: 0 2rem 4rem 0;
			// margin: 0 2rem 2rem 0;
			display: inline-block;
			width: 10rem;
			height: 10rem;
			border: 1px solid #f5f5f5;
			vertical-align: top;
			position: relative;
			img{
				width: 100%;
				height: 100%;
			}
			&.upload_component {
                    border: none;
                }
                :deep(.ant-upload-picture-card-wrapper) {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                :deep(.ant-upload-select-picture-card) {
                    width: 6rem;
                    height: 6rem;
                    border: 0.3rem solid #ededed;
                    border-radius: 10px;
                    margin: 0;
                }
			.checked{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				cursor: pointer;
				display: none;
				justify-content: center;
				align-items: center;
			}
			&.modal_img_item:hover .checked{
				display: flex;
			}
			.upload_file_item_content{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                position: relative;
                cursor: pointer;
                .upload_img{
                    display: block;
                    max-height: 100%;
                    max-width: 100%;
                }

                .delete_file_block{
                    display: none;
                    width: 3.2rem;
                    height: 3.2rem;
                    background: rgba(0,0,0,0.6);
                    border-radius: 0.4rem;
                    position: absolute;
                    top: 0.9rem;
                    right: 0.9rem;
                    text-align: center;
                    line-height: 3.2rem;
					left: auto;
                    .icon-shanchu{
                        font-size: 1.6rem;
                        color: #fff;
                    }
                }

                &:hover .delete_file_block{
                    display: block;
                }

                .operate_file_block{
                    width: 100%;
                    height: 3rem;
                    font-size: 1.6rem;
                    color: #FFFFFF;
                    position: absolute;
                    left: 0;
                    bottom: 0;

                    .select_img_type{
                        height: 100%;
                        line-height: 3rem;
                        text-align: center;
                        background: rgba(0,0,0,0.6);
                        position: relative;

                        .select_category{
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .icon-xiala{
                                margin-left: 0.8rem;
                            }
                        }

                        .icon_rotate{
                            -moz-transform:rotate(180deg);
                            -webkit-transform:rotate(180deg);
                            transform: rotate(180deg);
                            animation-direction: 0.5s;
                        }

                        .category_list{
							position: absolute;
                            width: 100%;
                            cursor: pointer;
                            position: absolute;
                            // top: 3.1rem;
							margin-top: .2rem;
                            left: 0;
                            background: rgba(0,0,0,0.4);
                            border: 1px solid #343579;
                            border-radius: 0.8rem;
                            // overflow: hidden;
                            z-index: 2;
							height: 9rem;
							overflow-x: hidden;
							&.category_list::-webkit-scrollbar{display: none;}

                            .category_item{
                                text-align: left;
                                font-size: 1.4rem;
                                padding: 1rem 1.9rem;
                                line-height: 1.6rem;

                                &.select_category_item{
                                    background: linear-gradient(160deg, #AC2A3B, #292161);
                                }

                                &:hover{
                                    background: linear-gradient(160deg, #AC2A3B, #292161);
                                }
                            }
                        }
                    }
                }
            }
			.pin_block{
				
			}
		}
       
    }
	}
   
	.modal_right{
		flex: 1;
		margin-left: 3rem;
		.modal_layout,.modal_accomplish{
			.modal_text{
				font-size: 1.2rem;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		.modal_layout{
			.modal_img{
				width: 40rem;
				height: 5rem;
				overflow-x: hidden;
				display: flex;
				flex-direction: row;
				&.modal_img::-webkit-scrollbar {
					display: none;
				}
				.modal_img_item{
					width: 4rem;
					height: 4rem;
					margin: 0 1rem 1rem 0;
					position: relative;
					cursor: pointer;
					img{
						width: 100%;
						height: 100%;
					}
					.checked{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						cursor: pointer;
						display: none;
						justify-content: center;
						align-items: center;
					}
					&.modal_img_item:hover .checked{
						display: flex;
					}
				}
				
			}
		}
		.modal_accomplish{
			// margin-top: 2rem;
			height: 30rem;
			display: flex;
			flex-direction: column;
			.modal_text{
				padding-top: 2rem;
				padding-block: 2rem;
			}
			.input_box{
				input{
					&.forbidden{
						cursor:not-allowed;
					}
				}
			}
			.modal_img{
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				.modal_imgItem{
					margin: 0 2rem 2rem 0;
					display: inline-block;
					width: 10rem;
					height: 10rem;
					border: 1px solid #f5f5f5;
					position: relative;
					cursor: pointer;
					img{
						object-fit: cover;
						width: 100%;
						height: 100%;
					}
					&.active{
						opacity: 0.5;
					// border: 2px solid;
						border-radius: 1rem;
						img {
							transform: scale(0.9);
						}
					}
				}
			}
		}
	}
}
</style>