fix: moodboard generate不显示上传图片

This commit is contained in:
zhangyh
2025-10-02 11:45:00 +08:00
parent 627c535774
commit ee8c0fb355

View File

@@ -1,86 +1,118 @@
<template>
<div class="generate">
<div class="generate_checkbox" >
<generalMenu v-if="type_.type2 == 'Printboard' || type_.type2 == 'Sketchboard'" :dataList="printCatecoryList" @setprintModel="setCatecorySceneList" :item="scene" width="14rem" style="padding: 0;"></generalMenu>
<generalMenu v-if="(type_.type2 == 'Printboard' && scene.value == 'Pattern')" :dataList="printModelList" @setprintModel="setprintModel" :item="printModel"></generalMenu>
</div>
<div class="input_border" >
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
<div class="upload_item" v-show="sketchboardList?.length != 0">
<div
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
:key="file"
:class="[driver__.driver?'showEvents':'']"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin size="small" :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done' || file?.base64"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
</div>
</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> -->
<SvgIcon
name="Folder"
class="upload-icon icon"
style="font-size: 2rem"
/>
<div style="font-size: 1.2rem;">{{ $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 library-icon icon"></i>
<div class="generate">
<div class="generate_checkbox">
<generalMenu
v-if="type_.type2 == 'Printboard' || type_.type2 == 'Sketchboard'"
:dataList="printCatecoryList"
@setprintModel="setCatecorySceneList"
:item="scene"
width="14rem"
style="padding: 0"
></generalMenu>
<generalMenu
v-if="type_.type2 == 'Printboard' && scene.value == 'Pattern'"
:dataList="printModelList"
@setprintModel="setprintModel"
:item="printModel"
></generalMenu>
</div>
<div class="input_border">
<div class="input_box Guide_1_5" :class="[inputShow ? 'active' : '']">
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
<div class="upload_item" v-show="sketchboardList?.length != 0">
<div
class="upload_file_item Guide_1_2_7"
v-for="(file, index) in sketchboardList"
:key="file"
:class="[driver__.driver ? 'showEvents' : '']"
>
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
<a-spin size="small" :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done' || file?.base64"
>
<img :src="file?.imgUrl" class="upload_img" />
<div
class="delete_like_file_block"
:class="[driver__.driver ? 'hideEvents' : '']"
>
<span
class="icon iconfont icon-shanchu operate_icon"
@click.stop="deleteFile(index)"
></span>
</div>
</div>
</div>
</div>
<a-dropdown>
<i
class="fi fi-br-upload"
:class="{ Guide_1_2_6: type_.type2 == 'Printboard' }"
v-show="
!isTextarea &&
upload.level1Type !== 'Moodboard' &&
scene?.value != 'Slogan' &&
scene?.value != 'Logo'
"
></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> -->
<SvgIcon
name="Folder"
class="upload-icon icon"
style="font-size: 2rem"
/>
<div style="font-size: 1.2rem">
{{ $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 library-icon icon"></i>
<div style="font-size: 1.2rem;">{{ $t('PrintboardUpload.Library') }}</div>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<textarea
class="textarea"
@input="ifMaximumLength"
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
:maxlength='inputShow?0:9999'
@keydown.enter.prevent="getgenerate()"
@click="inputFocus()"
v-model="searchPictureName"
@paste="onPaste"
<div style="font-size: 1.2rem">
{{ $t('PrintboardUpload.Library') }}
</div>
</div>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
<textarea
class="textarea"
@input="ifMaximumLength"
:placeholder="
scene?.value == 'Slogan' && type_.type2 == 'Printboard'
? isSloganHint
: $t('Generate.inputContent1')
"
:maxlength="inputShow ? 0 : 9999"
@keydown.enter.prevent="getgenerate()"
@click="inputFocus()"
v-model="searchPictureName"
@paste="onPaste"
></textarea>
<i
@@ -349,326 +381,340 @@ import sketchCategory from '@/component/HomePage/sketchCategory.vue'
import SelectImages from '@/component/common/SelectImages.vue'
export default defineComponent({
components: {
scaleImage,
generalMenu,
createSlogan,
sketchCategory,
SelectImages
},
props: ["msg",'sketchCatecoryList','gender'],
emits:['setLibrary'],
setup(props) {
// console.log(prop.msg);
let userDetail:any= computed(()=>{
return store.state.UserHabit.userDetail
})
const instance = getCurrentInstance()
let printModelList:any = ref([])
let sketchStyleList:any = ref([])
let printModel:any = ref({
num:'',
id:'',
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
})
components: {
scaleImage,
generalMenu,
createSlogan,
sketchCategory,
SelectImages
},
props: ['msg', 'sketchCatecoryList', 'gender'],
emits: ['setLibrary'],
setup(props) {
// console.log(prop.msg);
let userDetail: any = computed(() => {
return store.state.UserHabit.userDetail
})
const instance = getCurrentInstance()
let printModelList: any = ref([])
let sketchStyleList: any = ref([])
let printModel: any = ref({
num: '',
id: '',
optype: false,
value: 'Painting Style',
label: useI18n().t('Generate.Model1')
})
let printCatecoryList:any = computed(()=>{
if(props.msg == 'Sketchboard'){
return store.state.UserHabit.SketchGenerateType
}else if(props.msg == 'Printboard'){
return store.state.UserHabit.printType
}
})
let printCatecoryList: any = computed(() => {
if (props.msg == 'Sketchboard') {
return store.state.UserHabit.SketchGenerateType
} else if (props.msg == 'Printboard') {
return store.state.UserHabit.printType
}
})
let searchPictureName = ref("");
let searchPictureSeed:any = ref(0);
let store = useStore();
let fileList: any = ref([
]);
let scene = ref({
})
let sketchboardList:any = ref([])
const setCatecorySceneList = (data:any)=>{
if(scene.value.value === data.value) return
scene.value = data
sketchboardList.value = []
searchPictureName.value = ''
}
let level2Type = ref('')
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
// let sketchCatecoryList:any = ref([])
let workspace:any = computed(()=>{
return store.state.Workspace.probjects
})
let upload = ref({
isPin: 0,
level1Type: props.msg,
ageGroup:workspace.ageGroup,
gender: props.gender,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
})
let isGenerate = ref(false)//判断是否正在进行generate
let inputShow = ref(false)//表示是否出现红框
let inputTime = ref()
let driver__:any = inject('driver__')
let {t} = useI18n()
let isTest = ref()
let generateTime:any = ref()
let generateProceedList:any = ref([])
let remGenerate:any = ref(false)
let remGenerateTime:any = ref()
let styleRecommend:any = []
// let styleRecommend:any = inject('styleRecommend')
let generateLevel2Type = ''
let isSloganHint:any = ref(' ')
let loadingShow =ref(false)
let speed = reactive({
speedList:[
{
title:'',
label:t('speedList.generateWx'),
value:'advanced',
},{
title:'',
label:t('speedList.toproductFlus'),
value:'high',
},{
title:'',
label:t('speedList.generateNormal'),
value:'normal',
},
// {
// title:'',
// label:t('speedList.generateFlux'),
// value:'flux',
// },
],
extractList:[
{
title:'',
label:t('speedList.generateFlux'),
value:'flux',
},
],
speedState:false,
speedData:{
title:'',
label:t('speedList.generateWx'),
value:'advanced',
},
})
const openSpeed = ()=>{
if(speed.speedState){
removeOpenSpeed()
}else{
instance.appContext.config.globalProperties.$dropdownEvents.closeAll()
speed.speedState = true
}
let searchPictureName = ref('')
let searchPictureSeed: any = ref(0)
let store = useStore()
let fileList: any = ref([])
let scene = ref({})
let sketchboardList: any = ref([])
const setCatecorySceneList = (data: any) => {
if (scene.value.value === data.value) return
scene.value = data
sketchboardList.value = []
searchPictureName.value = ''
}
let level2Type = ref('')
// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
// let sketchCatecoryList:any = ref([])
let workspace: any = computed(() => {
return store.state.Workspace.probjects
})
let upload = ref({
isPin: 0,
level1Type: props.msg,
ageGroup: workspace.ageGroup,
gender: props.gender,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
})
let isGenerate = ref(false) //判断是否正在进行generate
let inputShow = ref(false) //表示是否出现红框
let inputTime = ref()
let driver__: any = inject('driver__')
let { t } = useI18n()
let isTest = ref()
let generateTime: any = ref()
let generateProceedList: any = ref([])
let remGenerate: any = ref(false)
let remGenerateTime: any = ref()
let styleRecommend: any = []
// let styleRecommend:any = inject('styleRecommend')
let generateLevel2Type = ''
let isSloganHint: any = ref(' ')
let loadingShow = ref(false)
let speed = reactive({
speedList: [
{
title: '',
label: t('speedList.generateWx'),
value: 'advanced'
},
{
title: '',
label: t('speedList.toproductFlus'),
value: 'high'
},
{
title: '',
label: t('speedList.generateNormal'),
value: 'normal'
}
// {
// title:'',
// label:t('speedList.generateFlux'),
// value:'flux',
// },
],
extractList: [
{
title: '',
label: t('speedList.generateFlux'),
value: 'flux'
}
],
speedState: false,
speedData: {
title: '',
label: t('speedList.generateWx'),
value: 'advanced'
}
})
const openSpeed = () => {
if (speed.speedState) {
removeOpenSpeed()
} else {
instance.appContext.config.globalProperties.$dropdownEvents.closeAll()
speed.speedState = true
}
}
const removeOpenSpeed = () => {
speed.speedState = false
}
watch(
() => scene.value,
(newVal, oldVal) => {
if (newVal.value == 'extract') {
speed.speedData = speed.extractList[0]
} else if (newVal.value == 'Logo' || newVal.value == 'Slogan') {
speed.speedData.value = ''
speed.speedData.label = ''
} else {
// if(newVal.value == "Pattern" || props.msg == 'Sketchboard'){
// speed.speedData = speed.speedList[1]
// }else{
// speed.speedData = speed.speedList[0]
// }
speed.speedData = speed.speedList[0]
}
}
)
const setSpeed = (item: any) => {
speed.speedData = item
}
onMounted(() => {
if (props.msg == 'Sketchboard') {
scene.value = {
name: t('SketchboardUpload.GenerateSketch'),
value: 'generate'
}
} else if (props.msg == 'Printboard') {
scene.value = {
name: t('SketchboardUpload.GenerateSketch'),
value: 'Pattern'
}
}
instance.appContext.config.globalProperties.$dropdownEvents.onClose(removeOpenSpeed)
// if(props.msg == 'Sketchboard'){
// speed.speedData = speed.speedList[1]
// }
})
}
const removeOpenSpeed = ()=>{
speed.speedState = false
}
watch(()=>scene.value,(newVal,oldVal)=>{
if(newVal.value == 'extract'){
speed.speedData = speed.extractList[0]
}else if(newVal.value == 'Logo' || newVal.value == 'Slogan'){
speed.speedData.value = ''
speed.speedData.label = ''
}else{
// if(newVal.value == "Pattern" || props.msg == 'Sketchboard'){
// speed.speedData = speed.speedList[1]
// }else{
// speed.speedData = speed.speedList[0]
// }
speed.speedData = speed.speedList[0]
}
})
const setSpeed = (item:any)=>{
speed.speedData = item
}
onMounted(() => {
if(props.msg == 'Sketchboard'){
scene.value = {
name: t('SketchboardUpload.GenerateSketch'),
value:'generate'
}
}else if(props.msg == 'Printboard'){
scene.value = {
name: t('SketchboardUpload.GenerateSketch'),
value:'Pattern'
}
}
instance.appContext.config.globalProperties.$dropdownEvents.onClose(removeOpenSpeed)
// if(props.msg == 'Sketchboard'){
// speed.speedData = speed.speedList[1]
// }
})
onUnmounted(() => {
instance.appContext.config.globalProperties.$dropdownEvents.offClose(
removeOpenSpeed
)
})
return {
userDetail,
searchPictureName,
searchPictureSeed,
store,
fileList,
sketchboardList,
level2Type,
printModel,
printModelList,
sketchStyleList,
isGenerate,
printCatecoryList,
scene,
onUnmounted(() => {
instance.appContext.config.globalProperties.$dropdownEvents.offClose(removeOpenSpeed)
})
return {
userDetail,
searchPictureName,
searchPictureSeed,
store,
fileList,
sketchboardList,
level2Type,
printModel,
printModelList,
sketchStyleList,
isGenerate,
printCatecoryList,
scene,
// printBoards,
// moodboarList,
// sketchCatecoryList,
workspace,
inputShow,
inputTime,
driver__,
t,
isTest,
generateTime,
generateProceedList,
remGenerate,
remGenerateTime,
styleRecommend,
generateLevel2Type,
isSloganHint,
loadingShow,
...toRefs(speed),
openSpeed,
setSpeed,
upload,
Https,
setCatecorySceneList
}
},
data(prop) {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: '2.4rem'
},
spin: true
}),
// printBoards,
// moodboarList,
// sketchCatecoryList,
workspace,
inputShow,
inputTime,
driver__,
t,
isTest,
generateTime,
generateProceedList,
remGenerate,
remGenerateTime,
styleRecommend,
generateLevel2Type,
isSloganHint,
loadingShow,
...toRefs(speed),
openSpeed,
setSpeed,
upload,
Https,
setCatecorySceneList,
};
token: '',
uploadUrl: '',
type_: {
type1: 'generate',
type2: prop.msg
},
isTextarea: false,
isInputFocus: false
}
},
mounted() {
// this.fileList.forEach((item,index)=>{
// item.checked = true
// item.type_ = 'generate'
// item.id_ = GO.id++
// })
// this.store.commit("addGenerateFils", this.fileList);
this.token = getCookie('token') || ''
let isTest: any = getCookie('isTest')
this.isTest = JSON.parse(isTest)
this.uploadUrl = getUploadUrl()
// if()
if (this.type_.type2 == 'Printboard') {
this.printModelList = [
{
num: 1,
optype: false,
value: 'Painting Style',
label: useI18n().t('Generate.Model1')
},
{
num: 2,
optype: false,
value: 'Illustration Style',
label: useI18n().t('Generate.Model2')
},
{
num: 3,
optype: false,
value: 'Real Style',
label: useI18n().t('Generate.Model3')
}
]
} else if (this.type_.type2 == 'Sketchboard') {
this.printModelList = JSON.parse(
JSON.stringify(this.store.state.UserHabit.SketchStyle)
)
let imgList = [
'/image/sketch/sketch-thick.jpg',
'/image/sketch/sketch-medium.jpg',
'/image/sketch/sketch-fine.jpg'
]
this.printModelList.forEach((item: any, index: number) => {
item.img = imgList[index]
})
if (this.printModelList[3]) this.printModelList[3].img = -1
}
this.printModel = this.printModelList[0]
},
watch: {
driver__: {
handler(newVal, oldVal) {
if (this.type_.type2 == 'Printboard') {
if (newVal.index >= 14 && newVal.index < 15) {
} else {
}
} else if (this.type_.type2 == 'Sketchboard') {
}
}
},
data(prop) {
return {
indicator: h(LoadingOutlined, {
style: {
fontSize: "2.4rem",
},
spin: true,
}),
token: "",
uploadUrl: "",
type_: {
type1: "generate",
type2: prop.msg,
},
isTextarea:false,
isInputFocus:false,
};
},
mounted() {
// this.fileList.forEach((item,index)=>{
// item.checked = true
// item.type_ = 'generate'
// item.id_ = GO.id++
// })
// this.store.commit("addGenerateFils", this.fileList);
this.token = getCookie("token") || "";
let isTest:any = getCookie('isTest')
this.isTest =JSON.parse(isTest)
this.uploadUrl = getUploadUrl();
// if()
if(this.type_.type2 == 'Printboard'){
this.printModelList = [
{
num:1,
optype:false,
value:'Painting Style',
label:useI18n().t('Generate.Model1')
},{
num:2,
optype:false,
value:'Illustration Style',
label:useI18n().t('Generate.Model2')
},{
num:3,
optype:false,
value:'Real Style',
label:useI18n().t('Generate.Model3')
},
]
}else if(this.type_.type2 == 'Sketchboard'){
this.printModelList = JSON.parse(JSON.stringify(this.store.state.UserHabit.SketchStyle))
let imgList = ['/image/sketch/sketch-thick.jpg','/image/sketch/sketch-medium.jpg','/image/sketch/sketch-fine.jpg']
this.printModelList.forEach((item:any,index:number)=>{
item.img = imgList[index]
})
if(this.printModelList[3])this.printModelList[3].img = -1
}
this.printModel = this.printModelList[0]
},
watch:{
driver__:{
handler(newVal,oldVal){
if(this.type_.type2 == 'Printboard'){
if(newVal.index >= 14 && newVal.index < 15){
}else{
}
}else if(this.type_.type2 == 'Sketchboard'){
}
}
},
scene:{
handler(newVal,oldVal){
if(this.type_.type2 == 'Printboard' && newVal.value == 'Slogan'){
let sloganType = [this.t('Generate.BlueYelStarryNight'),this.t('Generate.GreenCthulhu'),this.t('Generate.RedYelFireStyle'),this.t('Generate.CyberpunkStyle'),this.t('Generate.CitySkyline'),this.t('Generate.RedMaple'),this.t('Generate.GoldSunflower'),this.t('Generate.EmrldJungle'),this.t('Generate.PinkSakura')]
var randomNumber = Math.floor(Math.random() * sloganType.length);
this.isSloganHint = sloganType[randomNumber]
}else{
this.isSloganHint = ''
}
}
}
// moodboarList(newVal,oldVal){
// if(newVal.length>=1 || this.sketchboardList.length >= 2){
// }else{
// this.printModel = {
// num:'',
// optype:false,
// value:'Painting Style',
// name:this.t('Generate.Model'+1)
// }
// }
// },
},
computed: {
getSketchLabel(value: any) {
return (value: any) => {
let lable = "";
for (let item of this.sketchCatecoryList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
}
scene: {
handler(newVal, oldVal) {
if (this.type_.type2 == 'Printboard' && newVal.value == 'Slogan') {
let sloganType = [
this.t('Generate.BlueYelStarryNight'),
this.t('Generate.GreenCthulhu'),
this.t('Generate.RedYelFireStyle'),
this.t('Generate.CyberpunkStyle'),
this.t('Generate.CitySkyline'),
this.t('Generate.RedMaple'),
this.t('Generate.GoldSunflower'),
this.t('Generate.EmrldJungle'),
this.t('Generate.PinkSakura')
]
var randomNumber = Math.floor(Math.random() * sloganType.length)
this.isSloganHint = sloganType[randomNumber]
} else {
this.isSloganHint = ''
}
}
}
// moodboarList(newVal,oldVal){
// if(newVal.length>=1 || this.sketchboardList.length >= 2){
// }else{
// this.printModel = {
// num:'',
// optype:false,
// value:'Painting Style',
// name:this.t('Generate.Model'+1)
// }
// }
// },
},
computed: {
getSketchLabel(value: any) {
return (value: any) => {
let lable = ''
for (let item of this.sketchCatecoryList) {
if (item.value === value) {
lable = item.label
break
}
}
return lable
}
}
},
methods: {
generageAdd(data: any) {
@@ -1420,7 +1466,7 @@ export default defineComponent({
}
.library-icon {
font-size: 1.4rem;
display: flex;
display: flex;
}
}
.fi-br-upload {