269 lines
6.8 KiB
Vue
269 lines
6.8 KiB
Vue
<template>
|
|
<div class="generalMenu_printModel">
|
|
<div @click.stop="openPrintModel" :class="driverClass.class1">
|
|
<a-popover v-if="isCanvas">
|
|
<template #content>
|
|
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
|
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
|
</template>
|
|
<span v-if="item?.label">{{ item?.label }}</span>
|
|
<span v-else>{{ item.name }}</span>
|
|
</a-popover>
|
|
<div v-else>
|
|
<span v-if="item?.label">{{ item?.label }}</span>
|
|
<span v-else>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
<ul :class="driverClass.class2" v-show="openClick">
|
|
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
|
|
<a-popover placement="right" v-if="isCanvas">
|
|
<template #content>
|
|
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
|
|
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
|
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
|
|
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
|
|
<a-upload
|
|
style="height: 100%;"
|
|
class="search_upImg"
|
|
:capture="null"
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload,
|
|
}"
|
|
:maxCount='1'
|
|
:headers="{ Authorization: token }"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="(file) => fileUploadChange(file)"
|
|
>
|
|
</a-upload>
|
|
</i>
|
|
</div> -->
|
|
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
|
|
|
</template>
|
|
<span v-if="item?.label">{{ item?.label }}</span>
|
|
<span v-else>{{ item.name }}</span>
|
|
</a-popover>
|
|
<div v-else>
|
|
<span v-if="item?.label">{{ item?.label }}</span>
|
|
<span v-else>{{ item.name }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,ref ,nextTick} from "vue";
|
|
import { useStore } from "vuex";
|
|
import { Https } from "@/tool/https";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import { getUploadUrl } from "@/tool/util";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import { message, Upload, Modal } from "ant-design-vue";
|
|
export default defineComponent({
|
|
name:'filterComponent',
|
|
props:{
|
|
item:{
|
|
type:Object
|
|
},
|
|
dataList:{
|
|
type:Array
|
|
},
|
|
driver__:{
|
|
type:Boolean,
|
|
default:false,
|
|
},
|
|
isCanvas:{
|
|
type:Boolean,
|
|
default:false,
|
|
},
|
|
deleteItem:{
|
|
type:Number,
|
|
default:-1
|
|
},
|
|
driverClass:{
|
|
type:Object,
|
|
default:{class1:'',class2:'',classList:{item1:'',item2:'',item3:''}},
|
|
}
|
|
},
|
|
emits:['setprintModel'],
|
|
setup(props:any,{emit}){
|
|
let selectIndex = ref(0)
|
|
let openClick = ref(false)
|
|
let store = useStore();
|
|
let openPrintModel = ()=>{
|
|
document.addEventListener('click',removePrintModel)
|
|
openClick.value = true
|
|
nextTick().then(()=>{
|
|
if(props.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
}
|
|
let setprintModel = (item:any,index:any)=>{
|
|
if(props.deleteItem == index) return
|
|
if(item.img == -1) return
|
|
openClick.value = false
|
|
selectIndex = index
|
|
nextTick().then(()=>{
|
|
if(props.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
emit('setprintModel',item)
|
|
}
|
|
let removePrintModel = ()=>{
|
|
openClick.value = false
|
|
document.removeEventListener('click',removePrintModel)
|
|
}
|
|
let fileUploadChange = (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.type_ = "upload";
|
|
props.dataList.forEach((item:any)=>{
|
|
if(item.img == -1){
|
|
item.img = res.data.url
|
|
item.id = res.data.id
|
|
}
|
|
})
|
|
}else{
|
|
bor = false
|
|
}
|
|
|
|
} else if (file.status === "error") {
|
|
bor = false
|
|
}
|
|
if(!bor){
|
|
// let res:any = JSON.parse(file.xhr.response);
|
|
// props.dataList.forEach((item:any)=>{
|
|
// if(item.img == -1){
|
|
// }
|
|
// })
|
|
// message.warning(res.errMsg);
|
|
}
|
|
}
|
|
let deleteFile = (item:any)=>{
|
|
item.img = -1
|
|
emit('setprintModel',props.dataList[0])
|
|
}
|
|
return {
|
|
selectIndex,
|
|
openClick,
|
|
store,
|
|
setprintModel,
|
|
openPrintModel,
|
|
fileUploadChange,
|
|
deleteFile,
|
|
}
|
|
|
|
},
|
|
data(prop) {
|
|
return {
|
|
upload: {
|
|
isPin: 0,
|
|
gender:'',
|
|
level1Type: 'Sketchboard',
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token: "",
|
|
uploadUrl: "",
|
|
type_: {
|
|
type1: "generate",
|
|
type2: 'Sketchboard',
|
|
},
|
|
workspaceCom:{},
|
|
isTextarea:false,
|
|
isInputFocus:false,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.uploadUrl = getUploadUrl();
|
|
this.token = getCookie("token") || "";
|
|
this.upload.gender = this.store?.state?.Workspace?.workspace?.sexEnum?.value
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.ant-popover-inner-content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
//衣服类型下拉菜单
|
|
.generalMenu_printModel{
|
|
margin-right: 2rem;
|
|
|
|
>div{
|
|
// display: flex;
|
|
display: block;
|
|
width: calc(13rem*1.2);
|
|
border-radius: calc(1rem*1.2);
|
|
margin: 0;
|
|
border: 2px solid;
|
|
cursor: pointer;
|
|
padding: 0 calc(1rem*1.2);
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
> span{
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
>i{
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
}
|
|
ul{
|
|
position: absolute;
|
|
width: calc(13rem*1.2);
|
|
text-align: center;
|
|
margin-top: calc(.3rem*1.2);
|
|
border-radius: calc(1rem*1.2);
|
|
overflow: hidden;
|
|
z-index: 3;
|
|
li{
|
|
// background: rgba(0,0,0,.2);
|
|
background: #cccccc;
|
|
line-height: 2;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 calc(1rem*1.2);
|
|
span{
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
&.active{
|
|
// opacity: .4;
|
|
pointer-events: none;
|
|
color: #a4a4a4 !important;
|
|
background: #ebebeb !important;
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
:deep(.icon-shanchu){
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
}
|
|
.printModel_item:hover{
|
|
// background: rgba(0,0,0,.4);
|
|
background: #999999;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |