aida_front/src/component/DetailCopy/uploadList.vue

<template>
    <div class="uploadList">
		<div class="uploadList_box">

			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
				<div class="content_img_item_block" :class="{active:file?.checked}">
					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
					<sketchCategory :disignTypeList="catecoryList" :generateList="uploadList" :item="file" ></sketchCategory>
					
				</div>
			</div>
			<div class="upload_item">
				<div class="upload_file_item upload_component">
					<a-upload
						:action="uploadUrl + '/api/element/upload'"
						list-type="picture-card"
						:capture="null"

						:data="{
							...upload,
						}"
						:headers="{ Authorization: token }"
						v-model:file-list="uploadList"
						:before-upload="beforeUpload"
						:maxCount="8"
						accept=".jpg,.png,.jpeg,.bmp"
						@change="(file) => upFileUploadChange(file)"
					>
						<div
							class="upload_tip_block"
							v-show="uploadList.length != 8"
						>
							<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>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import { getCookie } from "@/tool/cookie";
import { message,Upload} from 'ant-design-vue';
import {getUploadUrl} from '@/tool/util'
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
		sketchCategory
    },
	props:{
		catecoryList:{
		    type:Object,
			default:()=>[] as any,
			required:true
		}
	},
    setup(props,{emit}) {
		const {t} = useI18n();
        const store = useStore();
		const detailData = reactive({
			isShowLoading:false,//懒加载，加载中
			uploadList:[],
			upload:{
                isPin: 0,
                level1Type: 'Sketchboard',
				gender:store.state.Workspace.workspace.sex,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
			},
			token:getCookie("token"),
			uploadUrl:getUploadUrl(),
		})
		const getDetailListData = reactive({
			total:0,
			pageSize:10,
			currentPage:1,
		})
		const selectImgItem = ()=>{

		}
		const upFileUploadChange = (data:any)=>{
            let file = data.file;
			let bor = true
            if (file.status === "done") {
                let res = JSON.parse(file.xhr.response);
				if(res.errCode == 0){
					file.id = res.data.id;
					file.url = res.data.url;
					file.resData = res.data;
					let type 
					if(props?.catecoryList){
						if(res.data.level2Type){
							props?.catecoryList.forEach((item:any) => {
								if(item.value == res.data.level2Type){
									file.categoryValue = item?.value;
									type = item.value
									file.category = item?.name;
								}
							});
						}else{
							file.categoryValue = props?.catecoryList?.[0].value;
							type = props.catecoryList[0].value
							file.category = props.catecoryList[0].name;
						}
					}
					
					file.designType = res.data.designType
					file.level2Type = type;
					file.minIOPath = file.resData.minIOPath
					let fileList = detailData.uploadList.filter(
						(v:any) => v.status === "done"
					);
					detailData.uploadList = fileList
					// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
				}else{
					bor = false
				}
            } else if (file.status === "error") {
				bor = false
            }
			if(!bor){
                let res = JSON.parse(file.xhr.response);
				let index = -1;
                detailData.uploadList.forEach((ele:any, index1) => {
                    if (file.uid === ele.uid) {
                        index = index1;
                    }
                });
                if (index > -1) {
                    detailData.uploadList.splice(index, 1);
                }
                message.warning(res.errMsg);
			}
			
        }
		const beforeUpload = (file:any)=>{
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
            if (!isJpgOrPng) {
                message.info(t('DesignDetailAlter.jsContent4'));
            }
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                message.info(t('DesignDetailAlter.jsContent5'));
            }
            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
        }
		onMounted(()=>{
		})
        return{
			...toRefs(detailData),
			...toRefs(getDetailListData),

			selectImgItem,
			beforeUpload,
			upFileUploadChange,
        }
    },
	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .uploadList{
		height: 100%;
		display: flex;
		flex-direction: column;
		> .uploadList_box{
			width: 100%;
			flex: 1;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			margin-top: 1rem;
			justify-content: space-between;
			align-content: flex-start;
			&::-webkit-scrollbar{display: none;}
			> .content_img_item{
				> .content_img_item_block{
					width: calc((34rem - 2rem) / 2);
					height: calc((34rem - 2rem) / 2);
					position: relative;
					margin-bottom: 2rem;

					> img{
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
			}
			> .material_content_list_loding{
				width: 100%;
				height: calc((34rem - 2rem) / 2);
			}
			> .upload_item{
				width: calc((34rem - 2rem) / 2);
				height: calc((34rem - 2rem) / 2);
				align-items: center;
				justify-content: center;
			}
		}
		
	}
</style>