923 lines
30 KiB
Vue
923 lines
30 KiB
Vue
<template>
|
|
<div class="generate">
|
|
<div v-if="type_.type2 == 'Printboard' && scene.value == 'Pattern'" class="generate_checkbox" >
|
|
<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4'}"></generalMenu>
|
|
<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
|
|
<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
|
|
<div @click.stop="PrintModel" class="Guide_1_2_4" :class="[driver__.driver?'showEvents':'']">{{ printModel.name }}</div>
|
|
<ul v-show="printModel.optype" class="Guide_1_2_5" :class="[driver__.driver?'showEvents':'']">
|
|
<li class="printModel_item" @click="setprintModel(1)">{{ $t('Generate.Model1') }}</li>
|
|
<li class="printModel_item" @click="setprintModel(2)">{{ $t('Generate.Model2') }}</li>
|
|
<li class="printModel_item" @click="setprintModel(3)">{{ $t('Generate.Model3') }}</li>
|
|
</ul>
|
|
</div> -->
|
|
</div>
|
|
<div class="input_border" >
|
|
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'']">
|
|
<div class="input_box_btnBox">
|
|
<div class="upload_item">
|
|
<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-popover>
|
|
<template #content>
|
|
<p>Seed</p>
|
|
</template>
|
|
<input class="search_seed" max="9999" v-show="scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
|
|
</a-popover> -->
|
|
|
|
<input
|
|
class="search_input"
|
|
@input="ifMaximumLength"
|
|
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
|
|
:maxlength='inputShow?0:9999'
|
|
v-model="searchPictureName"
|
|
@keydown.enter="getgenerate()"
|
|
@click="inputFocus()"
|
|
/>
|
|
<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>
|
|
</div>
|
|
<textarea
|
|
v-show="isTextarea"
|
|
class="search_textarea "
|
|
@input="ifMaximumLength"
|
|
:maxlength='inputShow?0:9999'
|
|
@keydown.enter="getgenerate()"
|
|
@click.stop=""
|
|
v-model="searchPictureName"
|
|
></textarea>
|
|
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div> -->
|
|
<div v-show="!isGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
|
|
{{ $t('Generate.Generate') }}
|
|
<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
|
|
</div>
|
|
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
|
|
<i class="fi fi-br-loading"></i>
|
|
</div>
|
|
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
|
|
{{$t('Generate.Close')}}
|
|
</div>
|
|
<span class="inputShowText" ref="inputShowText"></span>
|
|
</div>
|
|
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
|
|
<div class="search_keyword_center" >
|
|
<div class="search_keyword_center_left">
|
|
<div v-if="type_.type2 == 'Printboard'" v-for="item in styleRecommend" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
|
|
<div v-for="item in workspace?.allKeywordsByStyle?.[type_.type2]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
|
|
<div class="upload_item">
|
|
<div
|
|
class="upload_file_item Guide_1_2_7"
|
|
v-for="(file, index) in sketchboardList"
|
|
:key="file"
|
|
@click.stop="setSketchboardItem(file)"
|
|
:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
|
|
>
|
|
<div
|
|
class="upload_file_item_content"
|
|
v-show="file?.status === 'uploading'"
|
|
>
|
|
<a-spin :indicator="indicator" tip="Uploading..." />
|
|
</div>
|
|
<div
|
|
class="upload_file_item_content"
|
|
v-show="file?.status === 'done'"
|
|
>
|
|
<img :src="file?.imgUrl" class="upload_img" />
|
|
<div
|
|
class="delete_file_block"
|
|
:class="[driver__.driver?'hideEvents':'']"
|
|
@click.stop="deleteFile(index)"
|
|
>
|
|
<span class="icon iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="generage_img Guide_1_6" :class="{Guide_1_13_2:type_.type2 == 'Sketchboard',Guide_1_2_9:type_.type2 == 'Printboard'}" :style="[isGenerate?'overflow:hidden':'']">
|
|
<div
|
|
class="generage_img_item"
|
|
v-for="(item, index) in fileList"
|
|
:key="item.imgUrl"
|
|
@click="generageAdd(item)"
|
|
:class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
|
|
>
|
|
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
|
|
<sketchCategory v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{'class1': type_.type2 == 'Sketchboard'?'Guide_1_13':'','class2':type_.type2 == 'Sketchboard'?'Guide_1_13_1':''}"></sketchCategory>
|
|
<div
|
|
class="delete_like_file_block left1"
|
|
:class="[driver__.driver?'hideEvents':'',]"
|
|
>
|
|
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
|
|
<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
|
|
</div>
|
|
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
|
|
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
|
|
</div>
|
|
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
|
|
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<scaleImage ref="scaleImage"></scaleImage>
|
|
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { message, Upload, Modal } from "ant-design-vue";
|
|
import { defineComponent, computed, createVNode, h, ref,watch, nextTick, inject } from "vue";
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import GO from "@/tool/GO";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import { getUploadUrl } from "@/tool/util";
|
|
// import { forEach } from "jszip";
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
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";
|
|
export default defineComponent({
|
|
components: {
|
|
scaleImage,
|
|
generalMenu,
|
|
createSlogan,
|
|
sketchCategory,
|
|
},
|
|
props: ["msg",'sketchCatecoryList','scene'],
|
|
setup(props) {
|
|
// console.log(prop.msg);
|
|
|
|
let printModelList = ref([
|
|
{
|
|
num:'',
|
|
optype:false,
|
|
value:'Painting Style',
|
|
label:useI18n().t('Generate.Model1')
|
|
},{
|
|
num:'',
|
|
optype:false,
|
|
value:'Illustration Style',
|
|
label:useI18n().t('Generate.Model2')
|
|
},{
|
|
num:'',
|
|
optype:false,
|
|
value:'Real Style',
|
|
label:useI18n().t('Generate.Model3')
|
|
},
|
|
])
|
|
let printModel = ref({
|
|
num:'',
|
|
optype:false,
|
|
value:'Painting Style',
|
|
label:useI18n().t('Generate.Model1')
|
|
})
|
|
let searchPictureName = ref("");
|
|
let searchPictureSeed:any = ref(0);
|
|
let store = useStore();
|
|
let fileList: any = ref([
|
|
|
|
]);
|
|
let sketchboardList:any = ref([])
|
|
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 = ref({})
|
|
let isGenerate = ref(false)//判断是否正在进行generate
|
|
let inputShow = ref(false)//表示是否出现红框
|
|
let inputTime = ref()
|
|
let driver__:any = inject('driver__')
|
|
let {t} = useI18n()
|
|
let isTest = ref()
|
|
let userInfo:any = {}
|
|
let generateTime:any = ref()
|
|
let generateProceedList = ref([])
|
|
let remGenerate:any = ref(false)
|
|
let remGenerateTime:any = ref()
|
|
let styleRecommend:any = inject('styleRecommend')
|
|
let generateLevel2Type = ''
|
|
let isSloganHint:any = ref(' ')
|
|
return {
|
|
searchPictureName,
|
|
searchPictureSeed,
|
|
store,
|
|
fileList,
|
|
sketchboardList,
|
|
level2Type,
|
|
printModel,
|
|
printModelList,
|
|
isGenerate,
|
|
|
|
// printBoards,
|
|
// moodboarList,
|
|
// sketchCatecoryList,
|
|
workspace,
|
|
inputShow,
|
|
inputTime,
|
|
driver__,
|
|
t,
|
|
isTest,
|
|
userInfo,
|
|
generateTime,
|
|
generateProceedList,
|
|
remGenerate,
|
|
remGenerateTime,
|
|
styleRecommend,
|
|
generateLevel2Type,
|
|
isSloganHint,
|
|
};
|
|
},
|
|
data(prop) {
|
|
return {
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
upload: {
|
|
isPin: 0,
|
|
gender:'',
|
|
level1Type: prop.msg,
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token: "",
|
|
uploadUrl: "",
|
|
|
|
type_: {
|
|
type1: "generate",
|
|
type2: prop.msg,
|
|
},
|
|
workspaceCom:{},
|
|
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);
|
|
let userInfo:any = getCookie("userInfo")
|
|
this.userInfo = JSON.parse(userInfo);
|
|
this.token = getCookie("token") || "";
|
|
let isTest:any = getCookie('isTest')
|
|
this.isTest =JSON.parse(isTest)
|
|
this.uploadUrl = getUploadUrl();
|
|
this.workspaceCom = computed(()=>{
|
|
return this.store?.state?.Workspace?.workspace
|
|
})
|
|
},
|
|
watch:{
|
|
driver__:{
|
|
handler(newVal,oldVal){
|
|
if(this.type_.type2 == 'Printboard'){
|
|
if(newVal.index >= 14 && newVal.index < 15){
|
|
}else{
|
|
}
|
|
}else if(this.type_.type2 == 'Sketchboard'){
|
|
|
|
}
|
|
|
|
}
|
|
},
|
|
workspaceCom(newVal,oldVal){
|
|
this.workspace = newVal
|
|
this.upload.gender = newVal?.sexEnum?.value
|
|
},
|
|
scene:{
|
|
handler(newVal,oldVal){
|
|
if(this.type_.type2 == 'Printboard' && newVal.value == 'Slogan'){
|
|
let sloganType = ['Blue and Yellow Starry Night','Green Cthulhu','Red and yellow fire style','Cyberpunk style','City skyline buildings','Red maple leaves','Golden Sunflower','Emerald Jungle Canopy','Pink Sakura Blossom']
|
|
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) {
|
|
data.type_ = this.type_;
|
|
data.resData = JSON.parse(JSON.stringify(data))
|
|
let maxImg = 8
|
|
if(this.type_.type2 == 'Sketchboard'){
|
|
maxImg = 20
|
|
}
|
|
data.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
|
|
this.store.commit("addGenerateMaterialFils", data);
|
|
// console.log(this.fileList);
|
|
let moodboard = this.store.state.UploadFilesModule.moodboardGenerateFiles
|
|
let sketch = this.store.state.UploadFilesModule.sketchGenerateFiles
|
|
let print = this.store.state.UploadFilesModule.printGenerateFiles
|
|
if((moodboard.length >= 2 || print.length >= 2 || sketch.length >= 2) && this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
},
|
|
beforeUpload(file: any) {
|
|
const isJpgOrPng =
|
|
file.type === "image/jpeg" ||
|
|
file.type === "image/png" ||
|
|
file.type === "image/jpg" ||
|
|
file.type === "image/bmp";
|
|
if (!isJpgOrPng) {
|
|
message.info(this.t('Generate.jsContent1'));
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
if (!isLt2M) {
|
|
message.info(this.t('Generate.jsContent2'));
|
|
}
|
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
},
|
|
setprintModel(value:any){
|
|
this.printModel = value
|
|
},
|
|
getgenerate(){
|
|
this.isTextarea = false
|
|
this.isInputFocus = false
|
|
if(this.isGenerate)return
|
|
clearInterval(this.remGenerateTime)
|
|
if(this.searchPictureName){
|
|
let arr = this.searchPictureName.split(/\s+/).length
|
|
if(arr > 250){
|
|
message.info(
|
|
this.t('Generate.jsContent4')
|
|
);
|
|
return
|
|
}
|
|
}else{
|
|
if(this.sketchboardList?.[0]?.imgUrl){
|
|
|
|
}else{
|
|
message.info(
|
|
this.t('Generate.jsContent5')
|
|
);
|
|
return
|
|
}
|
|
|
|
}
|
|
let level2Type = ''
|
|
let collectionElementId = ''
|
|
let base64 = ''
|
|
if(this.sketchboardList?.[0]){
|
|
collectionElementId = this.sketchboardList[0].id
|
|
if(this.sketchboardList[0].base64){
|
|
base64 = this.sketchboardList[0].imgUrl
|
|
}
|
|
}
|
|
let sloganText = ''
|
|
sloganText = this.searchPictureName
|
|
if(this.upload.level1Type == "Sketchboard"){
|
|
level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
|
|
if(this.workspace.styleName){
|
|
sloganText = `${this.workspace.styleName},${sloganText}`
|
|
}
|
|
}else if(this.upload.level1Type == "Printboard"){
|
|
level2Type = this.scene?.value
|
|
if(level2Type == 'Slogan' && this.searchPictureName == ''){
|
|
sloganText = this.isSloganHint
|
|
}else if(level2Type == 'Pattern'){
|
|
sloganText = `${this.printModel.value},${sloganText}`
|
|
}
|
|
if(!base64 && level2Type == 'Slogan'){
|
|
message.info(this.t('Generate.jsContent10'));
|
|
return
|
|
}
|
|
}
|
|
let data = {
|
|
generateType:'text',
|
|
designType:'collection',
|
|
collectionElementId:collectionElementId,
|
|
level1Type:this.upload.level1Type,
|
|
level2Type:level2Type,
|
|
text:sloganText,
|
|
seed:this.searchPictureSeed,
|
|
userId:this?.userInfo?.userId,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
version:1,//为1就是Print
|
|
isTestUser:this.driver__.driver?false:this.isTest,
|
|
gender:this.workspace.sexEnum.value,
|
|
sloganBase64:base64,
|
|
}
|
|
this.generateLevel2Type = data.level2Type
|
|
this.isGenerate = true
|
|
this.remGenerateTime = setTimeout(()=>{
|
|
this.remGenerate = true
|
|
},10000)
|
|
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
|
|
(rv) => {
|
|
if(data.isTestUser){
|
|
if(rv.leftUsageCount >= 1){
|
|
message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Moodboard')}));
|
|
}else if(rv.leftUsageCount == 0){
|
|
message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Moodboard')}));
|
|
this.isGenerate = false
|
|
return
|
|
}
|
|
}
|
|
// rv.uniqueId.forEach((item:any) => {
|
|
// let arr:any = {}
|
|
// arr.taskId = item
|
|
// arr.status = 'execution'
|
|
// this.fileList.unshift(arr)
|
|
// });
|
|
this.setGenerate(rv.uniqueId)
|
|
|
|
}
|
|
).catch(res=>{
|
|
this.generateLevel2Type = ''
|
|
this.isGenerate = false
|
|
clearInterval(this.remGenerateTime)
|
|
this.remGenerate = false
|
|
});
|
|
},
|
|
setGenerate(dataList:any){
|
|
|
|
let data = dataList
|
|
let dataNum = dataList.length
|
|
let state = true
|
|
this.generateTime = setInterval(()=>{
|
|
if(!state)return
|
|
state = false
|
|
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
|
(rv) => {
|
|
state = true
|
|
if(this.isGenerate){//防止取消后有正在执行的获取状态
|
|
this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
|
rv.forEach((element:any) => {
|
|
if(element.status == 'Success'){
|
|
element.imgUrl = element.url
|
|
element.id_ = GO.id++
|
|
this.fileList.unshift(element)
|
|
data = data.filter((item:any) => item !== element.taskId);
|
|
if(this.type_.type2 == 'Sketchboard'){
|
|
this.sketchCatecoryList.forEach((itemCategory:any) => {
|
|
if(itemCategory.value == element.category){
|
|
element.categoryValue = itemCategory?.value
|
|
element.category = itemCategory?.name
|
|
}
|
|
});
|
|
}else{
|
|
element.categoryValue = this.scene?.value
|
|
element.category = this.scene?.name
|
|
}
|
|
}
|
|
});
|
|
if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
|
|
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
|
|
message.info(this.t('Generate.effectPoor'));
|
|
}else{
|
|
nextTick().then(()=>{
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
}
|
|
|
|
this.store.dispatch('getCredits')
|
|
clearInterval(this.generateTime)
|
|
clearInterval(this.remGenerateTime)
|
|
this.remGenerate = false
|
|
this.isGenerate = false
|
|
this.generateLevel2Type = ''
|
|
}
|
|
}
|
|
}
|
|
).catch(res=>{
|
|
clearInterval(this.generateTime)
|
|
clearInterval(this.remGenerateTime)
|
|
this.isGenerate = false
|
|
this.remGenerate = false
|
|
this.generateLevel2Type = ''
|
|
});
|
|
},1000)
|
|
},
|
|
removeGenerate(){
|
|
//取消操作
|
|
this.isGenerate = false
|
|
this.remGenerate = false
|
|
clearInterval(this.generateTime)
|
|
if(this.generateProceedList){
|
|
let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
|
|
let type = 'Generate'
|
|
if(this.generateLevel2Type == 'Logo'){
|
|
type = 'Logo'
|
|
}
|
|
let data = {
|
|
uniqueId:str,
|
|
userId:this?.userInfo?.userId,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
type: type
|
|
}
|
|
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
|
(rv) => {
|
|
this.generateProceedList = []
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
}
|
|
},
|
|
setTextareaShow(){
|
|
this.isTextarea = !this.isTextarea
|
|
if(this.isTextarea){
|
|
document.addEventListener('click',this.setTextareaShow)
|
|
}else{
|
|
document.removeEventListener('click',this.setTextareaShow)
|
|
}
|
|
},
|
|
cliSetKeyword(value:any){
|
|
let str = ''
|
|
if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
|
|
str = ','
|
|
}
|
|
if(this.upload.level1Type == "Moodboard"){
|
|
if(this.workspace?.allKeywordsByStyle['Printboard'].indexOf(value) == -1){
|
|
this.styleRecommend.push(value)
|
|
this.styleRecommend = [...new Set(this.styleRecommend)]
|
|
}
|
|
}
|
|
this.searchPictureName += str + value
|
|
},
|
|
ifSeedValue(e:any){
|
|
if(this.searchPictureSeed == ''){
|
|
this.searchPictureSeed = 0
|
|
}
|
|
},
|
|
ifMaximumLength(){
|
|
clearTimeout(this.inputTime)
|
|
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
|
|
let input = inputBox.getElementsByClassName('search_input')[0]
|
|
this.inputTime = setTimeout(()=>{
|
|
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
|
|
// let num2 = (input as HTMLInputElement).value.split(' ').length
|
|
if(this.searchPictureName?.split(/\s+/).length > 250){
|
|
(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
|
|
this.inputShow = true
|
|
}else{
|
|
this.inputShow = false
|
|
}
|
|
},500)
|
|
},
|
|
inputFocus(){
|
|
if(this.isInputFocus) return
|
|
this.isInputFocus = true
|
|
let setDomCli = ()=>{
|
|
this.isInputFocus = false
|
|
document.removeEventListener('click',setDomCli)
|
|
}
|
|
setTimeout(()=>{
|
|
document.addEventListener('click',setDomCli)
|
|
},200)
|
|
},
|
|
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){
|
|
let category:any={
|
|
value:'',
|
|
name:'',
|
|
}
|
|
if(this.sketchCatecoryList && this.type_.type2 == 'Sketchboard'){
|
|
this.sketchCatecoryList.forEach((item:any) => {
|
|
if(item.name == res.data.level2Type){
|
|
category.value = item?.value
|
|
category.name = item?.name
|
|
}
|
|
});
|
|
}
|
|
file.id = res.data.id;
|
|
file.imgUrl = res.data.url;
|
|
file.resData = res.data;
|
|
file.type_ = "upload";
|
|
file.id_ = GO.id++;
|
|
file.categoryValue = category?.value;
|
|
file.category = category?.name;
|
|
let fileList = this.sketchboardList.filter(
|
|
(v: any) => v.status === "done"
|
|
);
|
|
this.sketchboardList = fileList
|
|
nextTick().then(()=>{
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
}else{
|
|
bor = false
|
|
}
|
|
|
|
} else if (file.status === "error") {
|
|
bor = false
|
|
}
|
|
if(!bor){
|
|
let index = -1;
|
|
let res:any = JSON.parse(file.xhr.response);
|
|
this.sketchboardList.forEach((ele: any, index1: any) => {
|
|
if (file.uid === ele.uid) {
|
|
index = index1;
|
|
}
|
|
});
|
|
if (index > -1) {
|
|
this.sketchboardList.splice(index, 1);
|
|
}
|
|
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
|
|
message.warning(res.errMsg);
|
|
}
|
|
},
|
|
setSlogan(){
|
|
let createSlogan:any = this.$refs.createSlogan
|
|
createSlogan.init()
|
|
},
|
|
setSloganData(data:any){
|
|
this.sketchboardList = data
|
|
},
|
|
deleteFile(item: any) {
|
|
if(this.scene?.value == 'Slogan' && this.type_.type2 == 'Printboard'){
|
|
let createSlogan:any = this.$refs.createSlogan
|
|
createSlogan.isDeleteSlogan = true
|
|
}
|
|
this.sketchboardList.splice(item, 1);
|
|
// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
|
|
// this.printModel = {
|
|
// num:'',
|
|
// optype:false,
|
|
// value:'Painting Style',
|
|
// label:this.t('Generate.Model'+1)
|
|
// }
|
|
// }
|
|
},
|
|
likeFile(item:any,str:string){
|
|
if(str == 'like'){
|
|
let level2Type = ''
|
|
if(this.upload.level1Type == "Sketchboard"){
|
|
level2Type = item.categoryValue
|
|
}else if(this.upload.level1Type == "Printboard"){
|
|
level2Type = this.scene?.value
|
|
}
|
|
let data = {
|
|
generateDetailId:item.id,
|
|
level1Type:this.type_.type2,
|
|
level2Type: level2Type,
|
|
gender:this.workspace.sexEnum.value,
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
}
|
|
Https.axiosPost(Https.httpUrls.generateLike, data).then(
|
|
(rv) => {
|
|
item.like = true
|
|
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
}else{
|
|
|
|
let data = {
|
|
generateDetailId:item.id,
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
|
|
}
|
|
Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
|
|
(rv) => {
|
|
item.like = false
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
}
|
|
},
|
|
deleteGenerate(index:any){
|
|
// if(this.isGenerate)return
|
|
let num = this.fileList.length
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: this.t('LibraryPage.jsContent1'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
let a = _this.fileList.length - num
|
|
_this.fileList.splice(index-a,1)
|
|
}
|
|
});
|
|
},
|
|
scaleImage(index:any){
|
|
let scaleImage:any = this.$refs.scaleImage
|
|
scaleImage.init(this.fileList,index)
|
|
},
|
|
closeModal() {
|
|
// this.myMaterialModalShow = false
|
|
this.searchPictureName = "";
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less">
|
|
.generate {
|
|
flex: 1;
|
|
// height: 30rem;
|
|
// overflow-x: hidden;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid #e5e5e5;
|
|
position: relative;
|
|
// padding-top: calc(2.5rem*1.2);
|
|
.input_border{
|
|
padding-top: calc(2.5rem*1.2);
|
|
}
|
|
|
|
.mark_loading{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 99;
|
|
}
|
|
.generate_checkbox,
|
|
.generage_input {
|
|
display: flex;
|
|
align-items: center;
|
|
position: sticky;
|
|
top: 0;
|
|
background: #fff;
|
|
padding-top: calc(2rem*1.2);
|
|
z-index: 3;
|
|
}
|
|
.generate_checkbox {
|
|
}
|
|
.generage_input {
|
|
}
|
|
.generage_img {
|
|
display: flex;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
&.generage_img::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.generage_img_item {
|
|
cursor: pointer;
|
|
margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
|
|
position: relative;
|
|
&.active {
|
|
opacity: 0.5;
|
|
// border: 2px solid;
|
|
border-radius: calc(1rem*1.2);
|
|
img {
|
|
transform: scale(0.9);
|
|
object-fit: contain;
|
|
}
|
|
.delete_like_file_block{
|
|
pointer-events:none;
|
|
}
|
|
.operate_file_block{
|
|
pointer-events:none;
|
|
}
|
|
}
|
|
img {
|
|
width: calc(10rem*1.2);
|
|
height: calc(10rem*1.2);
|
|
}
|
|
&:hover .delete_like_file_block{
|
|
// display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
}
|
|
.upload_item {
|
|
.upload_file_item {
|
|
// &.active {
|
|
// opacity: 0.5;
|
|
// // border: 2px solid;
|
|
// border-radius: 1rem;
|
|
// transform: scale(0.9);
|
|
// .delete_file_block{
|
|
// pointer-events:none;
|
|
// }
|
|
// .operate_file_block{
|
|
// pointer-events:none;
|
|
// }
|
|
// img {
|
|
// }
|
|
// }
|
|
.upload_file_item_content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.upload_img {
|
|
display: block;
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.delete_file_block {
|
|
display: none;
|
|
width: calc(3.2rem*1.2);
|
|
height: calc(3.2rem*1.2);
|
|
background: rgba(0, 0, 0, 0.6);
|
|
border-radius: calc(0.4rem*1.2);
|
|
position: absolute;
|
|
top: calc(0.9rem*1.2);
|
|
right: calc(0.9rem*1.2);
|
|
text-align: center;
|
|
line-height: calc(3.2rem*1.2);
|
|
left: auto;
|
|
.icon-shanchu {
|
|
font-size: calc(1.6rem*1.2);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&:hover .delete_file_block {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|