1049 lines
32 KiB
Vue
1049 lines
32 KiB
Vue
<template>
|
|
<div class="generate">
|
|
<div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'" class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
|
|
<div v-show="type_.type2 != 'Sketchboard'">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
v-model="checkbox[0].type"
|
|
@click="setKeyword(0)"
|
|
/>
|
|
<span>{{ $t('Generate.ImageOnly') }}</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label
|
|
:class="[driver__.driver ? driver__.index == 29?'showEvents':'':'',type_.type2 == 'Sketchboard'?'Guide_1_9_1':'']"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
v-model="checkbox[1].type"
|
|
@click="setKeyword(1)"
|
|
/>
|
|
<span>{{ $t('Generate.TextOnly') }}</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label class="Guide_1_2_3" :class="[driver__.driver?'showEvents':'']">
|
|
<input
|
|
type="checkbox"
|
|
v-model="checkbox[2].type"
|
|
@click="setKeyword(2)"
|
|
/>
|
|
<span>{{ $t('Generate.TextImage') }}</span>
|
|
</label>
|
|
</div>
|
|
<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>
|
|
<!-- <li v-show="(sketchboardList.length>=1 && moodboarList.length>=1&& checkbox[0].type) || (sketchboardList.length>=2 && checkbox[0].type) " class="printModel_item" @click="setprintModel(4)">{{ $t('Generate.Merge') }}</li> -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div v-else class="input_border" >
|
|
<div class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
|
|
<input
|
|
class="search_input"
|
|
@input="ifMaximumLength"
|
|
:placeholder="$t('Generate.inputContent1')"
|
|
:maxlength='inputShow?0:9999'
|
|
v-model="searchPictureName"
|
|
@keydown.enter="getgenerate()"
|
|
@click="inputFocus()"
|
|
/>
|
|
<i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i>
|
|
<textarea
|
|
v-show="isTextarea"
|
|
class="search_textarea "
|
|
@input="ifMaximumLength"
|
|
:maxlength='inputShow?0:9999'
|
|
@keydown.enter="getgenerate()"
|
|
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" @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" @click="getgenerate">
|
|
<i class="fi fi-br-loading"></i>
|
|
</div>
|
|
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
|
|
{{$t('Generate.Close')}}
|
|
</div>
|
|
<span ref="inputShowText"></span>
|
|
</div>
|
|
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
|
|
<div class="search_keyword_center">
|
|
<div class="search_keyword_center_left">
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</div>
|
|
<div @click.stop="cliSetKeyword" class="search_keyword_center_item">asdasd</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
|
|
class="upload_file_item upload_component Guide_1_2_6"
|
|
:class="[driver__.driver?'showEvents':'']"
|
|
>
|
|
<a-upload
|
|
:capture="null"
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload,
|
|
}"
|
|
:disabled="checkbox[1].type"
|
|
:headers="{ Authorization: token }"
|
|
v-model:file-list="sketchboardList"
|
|
:before-upload="beforeUpload"
|
|
multiple
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="(file) => fileUploadChange(file)"
|
|
>
|
|
<div
|
|
class="upload_tip_block"
|
|
>
|
|
<i class="fi fi-br-upload"></i>
|
|
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
|
</div>
|
|
</a-upload>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="generage_img Guide_1_6" :style="[loadingShow?'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-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
|
|
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
|
|
<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>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
|
|
</div>
|
|
<scaleImage ref="scaleImage"></scaleImage>
|
|
|
|
</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, 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 { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
|
import { useI18n } from "vue-i18n";
|
|
export default defineComponent({
|
|
components: {
|
|
scaleImage,
|
|
},
|
|
props: ["msg",'sketchCatecoryList'],
|
|
setup() {
|
|
// console.log(prop.msg);
|
|
let checkbox = ref([
|
|
{
|
|
name: "image",
|
|
type: true,
|
|
},
|
|
{
|
|
name: "text",
|
|
type: false,
|
|
},
|
|
{
|
|
name: "text-image",
|
|
type: false,
|
|
},
|
|
]);
|
|
let checkboxImage = ref()
|
|
let imgList = ref([]);
|
|
let selectImgList: any = ref([]);
|
|
let selectImgListIds: any = ref([]);
|
|
let isShowLoading: any = ref(false);
|
|
let selectCode: any = ref("");
|
|
let currentPage: any = ref(1);
|
|
let searchPictureName = ref("");
|
|
let pageSize = ref(20);
|
|
let total = ref(0);
|
|
let searcMaterialhName: any = ref(""); //搜索名字
|
|
let designType: any = ref(null);
|
|
let store = useStore();
|
|
let fileList: any = ref([
|
|
|
|
]);
|
|
let sketchboardList:any = ref([])
|
|
let collectionElementid = ref()
|
|
let level2Type = ref('')
|
|
let printModel = ref({
|
|
num:'',
|
|
optype:false,
|
|
value:'Painting Style',
|
|
name:useI18n().t('Generate.Model'+1)
|
|
})
|
|
// 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 loadingShow = ref(false)
|
|
let isGenerate = ref(false)//判断是否正在进行generate
|
|
let inputShow = ref(false)//表示是否出现红框
|
|
let inputTime = ref()
|
|
let driver__:any = inject('driver__')
|
|
let {t} = useI18n()
|
|
let isMmerge = ref(false)
|
|
|
|
let isTest = ref()
|
|
let userInfo:any = {}
|
|
let generateId:any = ref([])
|
|
let generateTime:any = ref()
|
|
let generateProceedList = ref([])
|
|
let remGenerate:any = ref(false)
|
|
let remGenerateTime:any = ref()
|
|
return {
|
|
imgList,
|
|
selectImgList,
|
|
selectImgListIds,
|
|
isShowLoading,
|
|
selectCode,
|
|
currentPage,
|
|
searchPictureName,
|
|
pageSize,
|
|
total,
|
|
searcMaterialhName,
|
|
designType,
|
|
checkbox,
|
|
store,
|
|
fileList,
|
|
sketchboardList,
|
|
collectionElementid,
|
|
level2Type,
|
|
checkboxImage,
|
|
printModel,
|
|
loadingShow,
|
|
isGenerate,
|
|
// printBoards,
|
|
moodboarList,
|
|
// sketchCatecoryList,
|
|
workspace,
|
|
inputShow,
|
|
inputTime,
|
|
driver__,
|
|
t,
|
|
isMmerge,
|
|
isTest,
|
|
userInfo,
|
|
generateId,
|
|
generateTime,
|
|
generateProceedList,
|
|
remGenerate,
|
|
remGenerateTime,
|
|
};
|
|
},
|
|
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
|
|
})
|
|
this.workspace = this.store.state.Workspace.workspace
|
|
if(this.type_.type2 == 'Sketchboard'){
|
|
this.checkbox=[
|
|
{
|
|
name: "image",
|
|
type: false,
|
|
},
|
|
{
|
|
name: "text",
|
|
type: true,
|
|
},
|
|
{
|
|
name: "text-image",
|
|
type: false,
|
|
},
|
|
]
|
|
}
|
|
this.$emit('generateCheckbox',this.checkbox[0].type)
|
|
},
|
|
watch:{
|
|
driver__:{
|
|
handler(newVal,oldVal){
|
|
if(this.type_.type2 == 'Printboard'){
|
|
if(newVal.index >= 14 && newVal.index < 15){
|
|
this.setKeyword(newVal.index-14)
|
|
}else{
|
|
}
|
|
}else if(this.type_.type2 == 'Sketchboard'){
|
|
|
|
}
|
|
|
|
}
|
|
},
|
|
workspaceCom(newVal,oldVal){
|
|
this.workspace = newVal
|
|
this.upload.gender = newVal?.sexEnum?.name
|
|
},
|
|
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
|
|
if(moodboard.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 < 2;
|
|
if (!isLt2M) {
|
|
message.info(this.t('Generate.jsContent2'));
|
|
}
|
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
},
|
|
setKeyword(num: any) {
|
|
this.checkbox.forEach((v: any) => {
|
|
v.type = false;
|
|
});
|
|
|
|
nextTick().then(()=>{
|
|
this.checkbox[num].type = true
|
|
this.$emit('generateCheckbox',this.checkbox[0].type)
|
|
this.checkboxImage = this.checkbox[1].type
|
|
// if(this.checkboxImage){
|
|
// this.sketchboardList.forEach((v:any)=>{
|
|
// v.checked = false
|
|
// })
|
|
// }
|
|
})
|
|
if(num == 1){
|
|
this.level2Type = ''//点击文字生成就把衣服类型清空
|
|
}
|
|
if(num == 2 || num == 1){
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
this.printModel = {
|
|
num:'',
|
|
optype:false,
|
|
value:'Painting Style',
|
|
name:this.t('Generate.Model'+1)
|
|
}
|
|
}
|
|
},
|
|
PrintModel(){
|
|
if(!this.printModel.optype){
|
|
document.addEventListener('click',this.removePrintModel)
|
|
}
|
|
this.printModel.optype = !this.printModel.optype
|
|
nextTick().then(()=>{
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
},
|
|
removePrintModel(){
|
|
this.printModel.optype = false
|
|
document.removeEventListener('click',this.removePrintModel)
|
|
},
|
|
setprintModel(num:any){
|
|
let arr = ["Painting Style","Illustration Style","Real Style"]
|
|
if(num == 4){
|
|
this.printModel = {
|
|
num : 'Generate',
|
|
optype:false,
|
|
value:'',
|
|
name:this.t('Generate.Merge')
|
|
}
|
|
}else{
|
|
this.printModel = {
|
|
num : num,
|
|
value:arr[num-1],
|
|
optype:false,
|
|
name:this.t('Generate.Model'+num)
|
|
}
|
|
}
|
|
nextTick().then(()=>{
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
},
|
|
getgenerate(){
|
|
clearInterval(this.remGenerateTime)
|
|
this.remGenerate = false
|
|
// if(this.isTest){//试用用户禁止使用
|
|
// message.info(
|
|
// this.t('isTest.available')
|
|
// );
|
|
// return
|
|
// }
|
|
if(this.isGenerate){
|
|
return
|
|
}
|
|
// if(!this.searchPictureName){
|
|
// message.info(
|
|
// this.t('Generate.jsContent3')
|
|
// );
|
|
// return
|
|
// }
|
|
if(this.searchPictureName){
|
|
let arr = this.searchPictureName.split(/\s+/).length
|
|
if(arr > 250){
|
|
message.info(
|
|
this.t('Generate.jsContent4')
|
|
);
|
|
return
|
|
}
|
|
}else{
|
|
message.info(
|
|
this.t('Generate.jsContent5')
|
|
);
|
|
return
|
|
}
|
|
let data = {
|
|
generateType:'text',
|
|
designType:'',
|
|
collectionElementId:'',
|
|
level1Type:this.upload.level1Type,
|
|
level2Type:'',
|
|
text:this.searchPictureName,
|
|
userId:this?.userInfo?.userId,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
version:1,//为1就是Print
|
|
isTestUser:this.driver__.driver?false:this.isTest,
|
|
gender:'',
|
|
}
|
|
this.isGenerate = true
|
|
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.isGenerate = false
|
|
});
|
|
// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
|
// (rv) => {
|
|
// console.log(rv)
|
|
// if(rv){
|
|
// this.fileList = []
|
|
// let arr
|
|
// rv.generatedCollectionItems.forEach((v:any,index:number)=>{
|
|
// arr = {
|
|
// id:rv.generatedCollectionItems[index].generateItemId,
|
|
// imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
|
|
// like:rv.generatedCollectionItems[index].isLiked
|
|
// }
|
|
// this.fileList.push(arr)
|
|
// this.loadingShow = false
|
|
// })
|
|
// nextTick().then(()=>{
|
|
// if(this.driver__.driver){
|
|
// driverObj__.moveNext()
|
|
// }
|
|
// })
|
|
// }
|
|
// }
|
|
// ).catch(res=>{
|
|
// this.loadingShow = false
|
|
// });
|
|
},
|
|
setGenerate(dataList:any){
|
|
this.remGenerateTime = setTimeout(()=>{
|
|
this.remGenerate = true
|
|
},10000)
|
|
let data = dataList
|
|
let dataNum = dataList.length
|
|
this.generateTime = setInterval(()=>{
|
|
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
|
(rv) => {
|
|
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((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'));
|
|
}
|
|
nextTick().then(()=>{
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
clearInterval(this.generateTime)
|
|
clearInterval(this.remGenerateTime)
|
|
this.remGenerate = false
|
|
this.isGenerate = false
|
|
}
|
|
}
|
|
}
|
|
).catch(res=>{
|
|
clearInterval(this.generateTime)
|
|
clearInterval(this.remGenerateTime)
|
|
this.isGenerate = false
|
|
this.remGenerate = false
|
|
});
|
|
},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 data = {uniqueId:str,userId:this?.userInfo?.userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
|
|
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
|
(rv) => {
|
|
this.generateProceedList = []
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
}
|
|
},
|
|
setTextareaShow(){
|
|
this.isTextarea = !this.isTextarea
|
|
},
|
|
cliSetKeyword(){
|
|
|
|
},
|
|
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 > 75){
|
|
(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"
|
|
);
|
|
let arr = this.store.state.UploadFilesModule.sketchboard;
|
|
if (arr.length >= 8) {
|
|
message.info(this.t('Generate.jsContent6'));
|
|
} else {
|
|
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);
|
|
}
|
|
},
|
|
|
|
setSketchboardItem(item:any){
|
|
if(this.checkboxImage){
|
|
return
|
|
}
|
|
let parent:any = this.$parent
|
|
|
|
if(item.checked){
|
|
item.checked = false
|
|
this.collectionElementid = ''
|
|
}else{
|
|
let obj = {
|
|
imgId : item.id,
|
|
imgUr: item.imgUrl,
|
|
level2Type:item.category,
|
|
designType:'collection'
|
|
}
|
|
// parent.useGenerate.designType = 'collection'
|
|
this.$emit('setGenerate',obj)
|
|
this.sketchboardList.forEach((v:any)=>{
|
|
if(v.checked){
|
|
v.checked = false
|
|
}
|
|
})
|
|
item.checked = true
|
|
this.collectionElementid = item.id
|
|
}
|
|
this.level2Type = item.category
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
},
|
|
deleteFile(item: any) {
|
|
// this.sketchboardList
|
|
this.collectionElementid = ''
|
|
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',
|
|
name:this.t('Generate.Model'+1)
|
|
}
|
|
}
|
|
},
|
|
likeFile(item:any,str:string){
|
|
if(str == 'like'){
|
|
let data = {
|
|
generateDetailId:item.id,
|
|
level1Type:"Moodboard",
|
|
level2Type: '',
|
|
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 _this = this
|
|
Modal.confirm({
|
|
title: this.t('LibraryPage.jsContent1'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
_this.fileList.splice(index,1)
|
|
}
|
|
});
|
|
},
|
|
scaleImage(index:any){
|
|
let scaleImage:any = this.$refs.scaleImage
|
|
scaleImage.init(this.fileList,index)
|
|
},
|
|
closeModal() {
|
|
// this.myMaterialModalShow = false
|
|
this.searchPictureName = "";
|
|
this.designType = null;
|
|
this.selectImgList = [];
|
|
this.selectImgListIds = [];
|
|
this.imgList = [];
|
|
this.currentPage = 1;
|
|
// this.pageSize = 10;
|
|
this.total = 0;
|
|
},
|
|
},
|
|
});
|
|
</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;
|
|
&.generate::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.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(2.5rem*1.2);
|
|
padding-bottom: calc(2rem*1.2);
|
|
z-index: 2;
|
|
}
|
|
.generate_checkbox {
|
|
div {
|
|
margin-right: calc(4rem*1.2);
|
|
label {
|
|
display: flex;
|
|
cursor: pointer;
|
|
input {
|
|
margin-right: calc(0.5rem*1.2);
|
|
padding-left: calc(1.5rem*1.2);
|
|
}
|
|
span {
|
|
font-size: calc(1.2rem*1.2);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.printModel{
|
|
>div{
|
|
width: calc(13rem*1.2);
|
|
// display: flex;
|
|
display: block;
|
|
border-radius: calc(1rem*1.2);
|
|
margin: 0;
|
|
border: 2px solid;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 calc(1rem*1.2);
|
|
text-align: center;
|
|
}
|
|
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;
|
|
li{
|
|
background: rgba(0,0,0,.2);
|
|
line-height: 2;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 0 calc(1rem*1.2);
|
|
&.printModel_item:hover{
|
|
background: rgba(0,0,0,.4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.generage_input {
|
|
}
|
|
.generage_img {
|
|
display: flex;
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
flex: 1;
|
|
.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);
|
|
}
|
|
.delete_like_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 {
|
|
// }
|
|
// }
|
|
&.forbidden{
|
|
cursor:not-allowed;
|
|
img{
|
|
cursor:not-allowed;
|
|
}
|
|
}
|
|
|
|
.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>
|