aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: moodboard generate不显示上传图片

Browse Source
This commit is contained in:
zhangyh
2025-10-02 11:45:00 +08:00
parent 627c535774
commit ee8c0fb355
1 changed files with 441 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

836
src/component/HomePage/Generate.vue
View File

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