aida_front/src/component/home/design/collection/more.vue

<template>
    <div class="more">
		<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
		<div class="more_box" v-show="show">
			<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
				<!-- <i class="fi fi-rr-edit"></i> -->
				<i class="fi fi-br-pen-swirl"></i>
				<div class="text">{{ $t('more.edit') }}</div>
			</div>
			<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
				<i class="fi fi-bs-expand-arrows-alt"></i>
				<div class="text">{{ $t('more.enlargement') }}</div>
			</div>
			<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
				<i class="fi fi-br-download"></i>
				<div class="text">{{ $t('more.down') }}</div>
			</div>
			<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
				<span class="icon iconfont icon-shanchu operate_icon"></span>
				<div class="text">{{ $t('more.delete') }}</div>
			</div>
		</div>
    </div>
	<modalCanvas ref="modalCanvas" @setSloganData="saveBase64Img"></modalCanvas>
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { downloadIamge } from "@/tool/util";
import { Modal } from "ant-design-vue";
import modalCanvas from "@/component/modules/generalModalCanvas.vue";

export default defineComponent({
    components:{
		modalCanvas,
    },
	props:{
		moreList:{type:Array,default:()=>[]},
		list:{type:Array,default:()=>[]},
		item:{type:Object,default:()=>{}},
		index:{type:Number,default:0},
		level1Type:{type:String,default:''},
	},
	emits:['deleteFile','scaleImage'],
    setup(props,{emit}) {
        const store = useStore();
		const {t} = useI18n()
		const data = reactive({
			show:false
		})
		
		const dataDom = reactive({
			modalCanvas:null as any
		})
		const openList = ()=>{
			data.show = true
			document.addEventListener('click',setShow)
		}
		const setShow = ()=>{
			data.show = false
			document.removeEventListener('click',setShow)
		}
		const setMore = (str:any)=>{
			if(str == 'delete'){
				emit("deleteFile",props.item);
			}else if(str == 'edit'){
				console.log(props.item)
				dataDom.modalCanvas.init(props.item,'')
			}else if(str == 'down'){
				downloadIamge(props.item.url || props.item.imgUrl)
			}else if(str == 'enlargement'){
				emit("scaleImage",props.index);
			}
			setShow()
		}
		const saveBase64Img = async (rv)=>{
			let isOverlay = false
			await new Promise<void>((resolve, reject) => {
				Modal.confirm({
					title: t('scaleImage.overlayOrNot'),
					icon: createVNode(ExclamationCircleOutlined),
					okText: 'Yes',
					cancelText: 'No',
					mask:false,
					centered:true,
					onOk() {
						resolve()
						isOverlay = true

					},
					onCancel(){
						isOverlay = false
						resolve()
					}
				});
			})
			let data = {
				"base64": rv,
				"category": props.item.categoryValue,
				"gender": store.state.Workspace.probjects.sex,
				"originalId":props.item.resData.id,
				"isOverride":isOverlay,
				originalIdSource:props.item.resData.designType,
				type:props.level1Type,
			}
			console.log(data)
			Https.axiosPost(Https.httpUrls.modifySketch, data).then(
				(rv) => {
					// rv.imgUrl = rv.url
					// rv.status = 'Success'
					// rv.resData = {
					// 	id:rv.id,
					// 	designType:props.item.resData.designType,
					// }
					// rv.category = props.item?.category
					// rv.categoryValue = props.item?.categoryValue
					if(isOverlay){
						props.list[props.index].imgUrl = rv.url
						props.list[props.index].resData = {
							id:rv.id,
							designType:props.item.resData.designType,
						}
					}else{
						props.list.unshift(rv)
					}
				}
			).catch(res=>{
			});
		}
        return{
			...toRefs(dataDom),
			...toRefs(data),
			openList,
			setMore,
			saveBase64Img,
        }
    },

	provide() {
		return {
		}
	},
		
})
</script>
<style lang="less" scoped>
    .more{
		position: relative;
		width: 100%;
		height: 100%;
		> .fi{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0,0,0,.7);
			color: #fff;
			border-radius: .6rem;
		}
		> .more_box{
			position: absolute;
			background: rgba(0,0,0,.7);
			right: 0;
			margin-top: .5rem;
			color: #fff;
			border-radius: .6rem;
			padding: 1rem 0;
			font-size: 1.4rem;
			// width: 12rem;
			text-align: left;
			z-index: 99;
			> .item{
				display: flex;
				align-items: center;
				padding: 1rem 1.3rem;
				> i,> span{
					margin-right: 1rem;
				}
				> .text{
					white-space: nowrap;
				}
				&:hover{
					background: rgba(0,0,0,.3);
				}
			}
		}
	}
</style>