feat: design界面printboard选择generate时可从Library选择图片

This commit is contained in:
zhangyh
2025-09-23 13:41:07 +08:00
parent 21f569a0ac
commit 12ca8f0eb0
2 changed files with 108 additions and 25 deletions

View File

@@ -39,6 +39,41 @@
</div>
</div>
</div>
<a-dropdown>
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i>
<template #overlay>
<a-menu>
<a-menu-item>
<a-upload
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
<div class="drop-container">
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
<div>{{ $t('PrintboardUpload.Upload') }}</div>
</div>
</a-upload>
</a-menu-item>
<a-menu-item>
<div class="drop-container" @click.stop="handleOpenLibrarySelect">
<i class="fi fi-rr-followcollection"></i>
<div>{{ $t('PrintboardUpload.Library') }}</div>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<textarea
class="textarea"
@input="ifMaximumLength"
@@ -50,25 +85,7 @@
@paste="onPaste"
></textarea>
<i class="fi fi-rr-followcollection"></i>
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
<a-upload
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:data="{
...upload,
}"
:maxCount='1'
:headers="{ Authorization: token }"
v-model:file-list="sketchboardList"
:before-upload="beforeUpload"
accept=".jpg,.png,.jpeg,.bmp"
@change="(file) => fileUploadChange(file)"
>
</a-upload>
</i>
<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
@@ -204,6 +221,13 @@
</div>
<scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
<SelectImages
radio
full-data
ref="selectImages"
@select="handleImageSelect"
:api="Https.httpUrls.queryLibraryPage"
isLibrary/>
</div>
</template>
<script lang="ts">
@@ -223,6 +247,7 @@ import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import createSlogan from "@/component/HomePage/createSlogan.vue";
import { useI18n } from "vue-i18n";
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
import SelectImages from '@/component/common/SelectImages.vue'
export default defineComponent({
components: {
@@ -230,6 +255,7 @@ export default defineComponent({
generalMenu,
createSlogan,
sketchCategory,
SelectImages
},
props: ["msg",'sketchCatecoryList','scene','gender'],
emits:['setLibrary'],
@@ -393,6 +419,7 @@ export default defineComponent({
openSpeed,
setSpeed,
upload,
Https
};
},
data(prop) {
@@ -898,6 +925,7 @@ export default defineComponent({
let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
if(paste.length == 0)this.sketchboardList.push(file);
this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
console.log('插入图片',this.sketchboardList)
nextTick().then(()=>{
if(this.driver__.driver && this.type_.type2 == 'Printboard'){
driverObj__.moveNext()
@@ -1038,6 +1066,22 @@ export default defineComponent({
})
}
},
handleOpenLibrarySelect(){
let selectImages:any = this.$refs.selectImages
selectImages.init()
},
handleImageSelect(data:any){
const file={
status: 'done',
...data,
errCode:0,
imgUrl:data.url,
xhr:{
response:JSON.stringify({...data,errCode:0,imgUrl:data.url,status:'done'})
}
}
this.sketchboardList = [file]
}
},
});
@@ -1180,6 +1224,22 @@ export default defineComponent({
}
}
}
}
}
.search_upImg :deep(.ant-upload.ant-upload-select-picture-card){
background-color: transparent;
border: none;
width: inherit;
height: inherit;
margin: 0;
}
.drop-container{
display: flex;
align-items: center;
column-gap: 1rem;
padding: 0.25rem 0.3rem 0.25rem;
}
</style>