1182 lines
36 KiB
Vue
1182 lines
36 KiB
Vue
<template>
|
|
<div class="sketchboard_upload_modal">
|
|
<div class="modal_left">
|
|
<div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
|
|
<div
|
|
@click.stop="open(1)"
|
|
class="switch_type_item"
|
|
:class="[openClick == 1 ? 'select_swtich' : '']"
|
|
>
|
|
<span>{{ $t('SketchboardUpload.Upload') }}</span>
|
|
</div>
|
|
<div
|
|
@click.stop="open(2)"
|
|
class="switch_type_item"
|
|
:class="[openClick == 2 ? 'select_swtich' : '']"
|
|
>
|
|
<span>{{ $t('SketchboardUpload.Library') }}</span>
|
|
</div>
|
|
<div
|
|
@click.stop="open(3)"
|
|
class="switch_type_item Guide_1_9"
|
|
:class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
|
|
>
|
|
<span>{{ $t('SketchboardUpload.Generate') }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-show="openClick == 1" class="sketchboard_body">
|
|
<div class="upload_img_body scroll_style">
|
|
<div class="upload_item">
|
|
<div
|
|
class="upload_file_item"
|
|
v-for="(file, index) in fileList"
|
|
:key="file"
|
|
>
|
|
<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" />
|
|
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
|
|
<div
|
|
class="delete_like_file_block"
|
|
@click.stop="deleteFile(file)"
|
|
>
|
|
<span
|
|
class="icon iconfont icon-shanchu"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="pin_block"
|
|
v-show="file?.status === 'done'"
|
|
>
|
|
<a-checkbox v-model:checked="file.pin"
|
|
>{{ $t('SketchboardUpload.PIN') }}</a-checkbox
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="upload_file_item upload_component"
|
|
v-show="sketchboardList.length < 20"
|
|
>
|
|
<a-upload
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
:capture="null"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload,
|
|
}"
|
|
:multiple="!driver__.driver"
|
|
:before-upload="beforeUpload"
|
|
:headers="{ Authorization: token }"
|
|
v-model:file-list="fileList"
|
|
:maxCount="20 - sketchboardList.length+fileList.length"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="(file) => fileUploadChange(file)"
|
|
>
|
|
<div
|
|
class="upload_tip_block"
|
|
v-show="sketchboardList.length < 20"
|
|
>
|
|
<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 class="upload_max_tip">
|
|
<span class="icon iconfont icon-zhuyi"></span>
|
|
<span>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Material
|
|
v-show="openClick == 2"
|
|
ref="Material"
|
|
msg="Sketchboard"
|
|
@confirmSelect="confirmSelect"
|
|
:disignTypeList="sketchCatecoryList"
|
|
@setLibrary = setSetchboardGenerate
|
|
></Material>
|
|
<Generate
|
|
v-show="openClick == 3"
|
|
ref="Generate"
|
|
msg="Sketchboard"
|
|
:sketchCatecoryList="sketchCatecoryList"
|
|
@generateCheckbox="getgenerateCheckbox"
|
|
@setGenerate = setSetchboardGenerate
|
|
></Generate>
|
|
</div>
|
|
<div class="modal_right">
|
|
<div class="modal_layout">
|
|
<div class="modal_text">
|
|
<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
|
|
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
|
</div>
|
|
<div class="modal_img modal_img_x" v-mousewheel>
|
|
<div class="mousewheel">
|
|
<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
|
|
<img v-lazy="item.imgUrl">
|
|
<div class="checked" >
|
|
<i class="fi fi-rr-trash"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div v-show="openClick == 3" class="modal_accomplish">
|
|
<div class="input_border">
|
|
<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
|
|
<div class="input_box_btnBox">
|
|
<input class="search_input"
|
|
@click="inputFocus()"
|
|
@input="ifMaximumLength"
|
|
@keydown.enter="getgenerate"
|
|
:maxlength='inputShow?0:9999'
|
|
:class="{forbidden:generateCheckbox}"
|
|
:readonly="generateCheckbox"
|
|
:placeholder="$t('PrintboardUpload.inputContent1')"
|
|
v-model="captionGeneration">
|
|
<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
|
|
</div>
|
|
<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
|
|
</textarea>
|
|
<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
|
|
<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
|
|
{{ $t('LibraryPage.Generate') }}
|
|
</div>
|
|
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="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 v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div>
|
|
<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
|
|
<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="modal_img" :style="[loadingShow?'overflow:hidden':'']">
|
|
<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[item.status != 'Success'?'hideEvents':'',driver__.driver?'showEvents':'',item?.checked?'active':'']" :key="item">
|
|
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
|
|
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
|
|
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
|
|
<div
|
|
class="delete_like_file_block left1"
|
|
>
|
|
<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 class="pin_block">
|
|
<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
|
|
<div v-show="remGenerate" class="mark_loading_btn" :class="[driver__.driver?'hideEvents':'']" @click="removeGenerate">{{$t('Generate.Close')}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<scaleImage ref="scaleImage"></scaleImage>
|
|
|
|
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import { getUploadUrl } from "@/tool/util";
|
|
import GO from "@/tool/GO";
|
|
import { useStore } from "vuex";
|
|
import { message, Upload, Modal } from "ant-design-vue";
|
|
import Material from "@/component/HomePage/Material.vue";
|
|
import Generate from "@/component/HomePage/Generate.vue";
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
import { Https } from "@/tool/https";
|
|
import { openGuide,driverObj__ } from "@/tool/guide";
|
|
import { useI18n } from "vue-i18n";
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
|
|
|
export default defineComponent({
|
|
components: { Material, Generate,scaleImage,sketchCategory },
|
|
setup() {
|
|
let fileList: any = ref([
|
|
]);
|
|
let openClick: any = ref(1);
|
|
let generateList:any = ref([
|
|
])
|
|
let store:any =useStore()
|
|
|
|
let generateCheckbox:any = ref()
|
|
let loadingShow = ref(false)
|
|
let isGenerate = ref(false)
|
|
|
|
let sketchCatecoryList:any = computed(()=>{
|
|
return store.state.Workspace.workspacePosition
|
|
})
|
|
let workspace:any = ref({})
|
|
let inputShow = ref(false)
|
|
let inputTime = ref()
|
|
let sketchboardList:any = computed(()=>{
|
|
return store.state.UploadFilesModule.sketchboard
|
|
})
|
|
let {t} = useI18n()
|
|
let driver__:any = inject('driver__')
|
|
let isTest = ref()
|
|
let userInfo:any = {}
|
|
let generateTime:any = ref()
|
|
let generateProceedList = ref([])
|
|
let remGenerate:any = ref(false)
|
|
let remGenerateTime:any = ref()
|
|
let isUseGenerate = ref(false)
|
|
let useGenerate:any = ref({
|
|
imgId : '',
|
|
imgUrl:1,
|
|
checked:false,
|
|
level2Type:'',
|
|
designType:'',
|
|
})
|
|
return {
|
|
fileList,
|
|
openClick,
|
|
generateList,
|
|
store,
|
|
generateCheckbox,
|
|
loadingShow,
|
|
isGenerate,
|
|
sketchCatecoryList,
|
|
workspace,
|
|
inputShow,
|
|
inputTime,
|
|
sketchboardList,
|
|
t,
|
|
driver__,
|
|
isTest,
|
|
userInfo,
|
|
generateTime,
|
|
remGenerate,
|
|
generateProceedList,
|
|
remGenerateTime,
|
|
useGenerate,
|
|
isUseGenerate,
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
swtich_type: "upload",
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
upload: {
|
|
isPin: 0,
|
|
level1Type: "Sketchboard",
|
|
gender:'',
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token: "",
|
|
uploadUrl: "",
|
|
captionGeneration:'',
|
|
isTextarea:false,
|
|
isInputFocus:false,
|
|
};
|
|
},
|
|
computed: {
|
|
getSketchLabel(value) {
|
|
return (value: any) => {
|
|
let lable = "";
|
|
for (let item of this.sketchCatecoryList) {
|
|
if (item.value === value) {
|
|
lable = item.label;
|
|
break;
|
|
}
|
|
}
|
|
return lable;
|
|
};
|
|
},
|
|
},
|
|
directives:{
|
|
mousewheel:{
|
|
mounted (el) {
|
|
// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
|
|
let dom:any = document.getElementsByClassName('modal_img_x')
|
|
let mouseover = ()=>{
|
|
// bodyDom.classList.add('active')
|
|
}
|
|
let mouseleave = ()=>{
|
|
// bodyDom.classList.remove('active')
|
|
}
|
|
dom.forEach((item:any) => {
|
|
item.addEventListener('mouseover',mouseover)
|
|
item.addEventListener('mouseleave',mouseleave)
|
|
});
|
|
|
|
|
|
el.addEventListener('wheel',(e:WheelEvent)=>{
|
|
let num = 0
|
|
if(e.deltaY > 0){
|
|
num = 25
|
|
}else{
|
|
num = -25
|
|
}
|
|
el.scrollBy(num, 0);
|
|
},true)
|
|
}
|
|
}
|
|
},
|
|
watch:{
|
|
workspace(newVal,oldVal){
|
|
this.upload.gender = newVal?.sexEnum?.name
|
|
},
|
|
sketchboardList:{
|
|
handler(newVal:any,oldVal:any){
|
|
if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
|
|
if(this.driver__.driver){
|
|
// driverObj__.moveTo(22)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
driver__:{
|
|
handler(newVal,oldVal){
|
|
if(newVal.index >= 15 && newVal.index <= 16){
|
|
if(this.driver__.driver){
|
|
// driverObj__.moveTo(15)
|
|
}
|
|
}else{
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
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.workspace = computed(()=>{
|
|
return this.store?.state?.Workspace?.workspace
|
|
})
|
|
if(this.driver__.driver){
|
|
this.captionGeneration = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
|
|
}else{
|
|
this.captionGeneration = ''
|
|
}
|
|
},
|
|
methods: {
|
|
setUseGenerate(){
|
|
this.isUseGenerate = !this.isUseGenerate
|
|
let sketchMaterialFiles:any = computed(()=>{
|
|
return this.store.state.UploadFilesModule.sketchMaterialFiles
|
|
})
|
|
let Material:any = this.$refs.Material
|
|
Material.setUseGenerate(sketchMaterialFiles.value)
|
|
if(this.isUseGenerate){
|
|
let generate:any = this.$refs.Generate
|
|
generate.checkbox.forEach((item:any)=>{
|
|
if(item.name == "text-image"){
|
|
item.type = true
|
|
}else{
|
|
item.type = false
|
|
}
|
|
})
|
|
this.generateCheckbox = false
|
|
}
|
|
},
|
|
setSetchboardGenerate(item:any){
|
|
this.useGenerate.imgId = item.imgId
|
|
this.useGenerate.imgUrl = item.imgUrl
|
|
this.useGenerate.level2Type = item.level2Type
|
|
this.useGenerate.designType = item.designType
|
|
let Material:any = this.$refs.Material
|
|
let generate:any = this.$refs.Generate
|
|
|
|
if(item.designType == 'collection'){
|
|
Material.setUseGenerate([])
|
|
}else {
|
|
generate.sketchboardList.forEach((item:any) => {
|
|
item.checked = false
|
|
});
|
|
}
|
|
},
|
|
open(num: Number) {
|
|
this.openClick = num;
|
|
if (num == 2) {
|
|
let material: any = this.$refs.Material;
|
|
material.init("Sketchboard");
|
|
} else if (num == 3) {
|
|
// let Generate:any = this.$refs.Generate
|
|
// Generate.init('generate')
|
|
nextTick().then(()=>{
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
}
|
|
},
|
|
scaleImage(index:any){
|
|
let scaleImage:any = this.$refs.scaleImage
|
|
scaleImage.init(this.generateList,index)
|
|
},
|
|
getgenerateCheckbox(value:any){
|
|
this.generateCheckbox = value
|
|
},
|
|
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:'',
|
|
}
|
|
this.sketchCatecoryList.forEach((item:any) => {
|
|
if(item.value == res.data.level2Type){
|
|
category.value = item?.value
|
|
category.name = item?.name
|
|
}
|
|
});
|
|
file.imgUrl = res.data.url;
|
|
file.resData = res.data;
|
|
// file.pin = false;
|
|
//category用来数据处理
|
|
file.categoryValue = category?.name;
|
|
file.category = category?.value;
|
|
file.categoryShow = false;
|
|
file.id_ = GO.id++
|
|
file.id = res.data.id
|
|
file.type_ = {
|
|
type1:'upload',
|
|
type2:'Sketchboard'
|
|
};
|
|
let fileList = this.fileList.filter(
|
|
(v: any) => v.status === "done"
|
|
);
|
|
this.store.commit("setSketchboardFile", fileList);
|
|
}else{
|
|
bor = false
|
|
}
|
|
} else if (file.status === "error") {
|
|
bor = false
|
|
}
|
|
if(!bor){
|
|
let index = -1;
|
|
let res:any = JSON.parse(file.xhr.response);
|
|
this.fileList.forEach((ele: any, index1: any) => {
|
|
if (file.uid === ele.uid) {
|
|
index = index1;
|
|
}
|
|
});
|
|
if (index > -1) {
|
|
this.fileList.splice(index, 1);
|
|
}
|
|
// message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
|
|
message.warning(res.errMsg);
|
|
}
|
|
},
|
|
|
|
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('SketchboardUpload.jsContent2'));
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
message.info(this.t('SketchboardUpload.jsContent3'));
|
|
}
|
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
},
|
|
setTextareaShow(){
|
|
if(this.generateCheckbox) return
|
|
this.isTextarea = !this.isTextarea
|
|
},
|
|
cliSetKeyword(value:any){
|
|
let str = ''
|
|
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
|
|
str = ','
|
|
}
|
|
this.captionGeneration += str + value
|
|
},
|
|
ifMaximumLength(){
|
|
clearTimeout(this.inputTime)
|
|
let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[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.captionGeneration?.split(/\s+/).length > 250){
|
|
(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.maximumLength')
|
|
this.inputShow = true
|
|
}else{
|
|
this.inputShow = false
|
|
}
|
|
},500)
|
|
},
|
|
inputFocus(){
|
|
if(this.isInputFocus) return
|
|
if(this.generateCheckbox) return
|
|
this.isInputFocus = true
|
|
let setDomCli = ()=>{
|
|
this.isInputFocus = false
|
|
document.removeEventListener('click',setDomCli)
|
|
}
|
|
setTimeout(()=>{
|
|
document.addEventListener('click',setDomCli)
|
|
},200)
|
|
},
|
|
deleteFile(item: any) {
|
|
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
|
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
|
this.store.commit("addGenerateMaterialFils", item);
|
|
}else{
|
|
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
|
let moodboard
|
|
this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
|
|
if(items.id_ == item.id_){
|
|
moodboard = index
|
|
|
|
}
|
|
})
|
|
this.fileList.splice(moodboard,1)
|
|
this.store.commit("setSketchboardFile", this.fileList);
|
|
}
|
|
},
|
|
likeFile(item:any,str:string){
|
|
if(str == 'like'){
|
|
let data = {
|
|
generateDetailId:item.id,
|
|
level1Type:"Sketchboard",
|
|
level2Type: item.category,
|
|
gender:this.workspace.sex,
|
|
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.generateList.splice(index,1)
|
|
}
|
|
});
|
|
},
|
|
recollection() {
|
|
this.isUseGenerate = false
|
|
this.useGenerate = {
|
|
imgId : '',
|
|
imgUrl:1,
|
|
checked:false,
|
|
level2Type:'',
|
|
designType:''
|
|
}
|
|
let arr = JSON.parse(
|
|
JSON.stringify(
|
|
this.store.state.UploadFilesModule.allBoardData
|
|
.sketchboardFiles
|
|
)
|
|
);
|
|
let setboard = {
|
|
generate:[] as any,
|
|
material:[] as any,
|
|
moodboard:[] as any,
|
|
}
|
|
arr.forEach((v:any)=>{
|
|
if(v.type_.type1 == 'generate'){
|
|
setboard.generate.push(v)
|
|
}else if(v.type_.type1 == 'material'){
|
|
setboard.material.push(v)
|
|
}else{
|
|
setboard.moodboard.push(v)
|
|
}
|
|
})
|
|
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
|
|
this.store.commit("setSketchboardMaterialFiles", setboard.material);
|
|
this.store.commit("setSketchboardFile", setboard.moodboard);
|
|
this.fileList = setboard.moodboard
|
|
},
|
|
confirmSelect(event: any) {
|
|
for (let item of event) {
|
|
let data = {
|
|
imgUrl: item.url,
|
|
resData: item,
|
|
pin: false,
|
|
status: "done",
|
|
category: item.level2Type || "Outwear",
|
|
categoryShow: false,
|
|
};
|
|
if (this.fileList.length == 15) {
|
|
message.warning(
|
|
this.t('SketchboardUpload.jsContent4')
|
|
);
|
|
break;
|
|
}
|
|
this.fileList.push(data);
|
|
}
|
|
this.store.commit("setSketchboardFile", this.fileList);
|
|
},
|
|
//发送请求生成图片
|
|
getgenerate(){
|
|
clearInterval(this.remGenerateTime)
|
|
this.remGenerate = false
|
|
// this.sketchCatecoryList = this.store.state.Workspace.workspacePosition
|
|
let sketchCatecoryList = this.sketchCatecoryList
|
|
// if(this.isTest){//试用用户禁止使用
|
|
// message.warning(
|
|
// this.t('isTest.available')
|
|
// );
|
|
// return
|
|
// }
|
|
if(this.isGenerate){
|
|
return
|
|
}
|
|
let generage:any = this.$refs.Generate
|
|
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
|
let data = {
|
|
generateType:generateType,
|
|
// designType:this.useGenerate.designType,
|
|
designType:'collection',
|
|
collectionElementId:this.useGenerate.imgId,
|
|
level1Type:this.upload.level1Type,
|
|
level2Type:this.useGenerate.level2Type,
|
|
text:this.captionGeneration,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
userId:this?.userInfo?.userId,
|
|
isTestUser:this.driver__.driver?false:this.isTest,
|
|
version:1,//为1就是Print
|
|
gender:this.workspace.sex,
|
|
}
|
|
if(generateType == 'image'){
|
|
if(this.useGenerate.imgId){
|
|
data.text = ''
|
|
}else{
|
|
message.info(
|
|
this.t('PrintboardUpload.jsContent4')
|
|
);
|
|
return
|
|
}
|
|
}else if(generateType == 'text'){
|
|
data.collectionElementId = ''
|
|
data.level2Type = ''
|
|
// this.beforeUpload(false)
|
|
if(this.captionGeneration){
|
|
let arr = this.captionGeneration.split(/\s+/).length
|
|
if(arr > 250){
|
|
message.info(
|
|
this.t('PrintboardUpload.jsContent5')
|
|
);
|
|
return
|
|
|
|
}
|
|
}else{
|
|
message.info(
|
|
this.t('PrintboardUpload.jsContent6')
|
|
);
|
|
return
|
|
}
|
|
}else if(generateType == 'text-image'){
|
|
if(this.useGenerate.imgId){
|
|
if(this.captionGeneration){
|
|
let arr = this.captionGeneration.split(/\s+/).length
|
|
if(arr > 250){
|
|
message.info(
|
|
this.t('PrintboardUpload.jsContent5')
|
|
);
|
|
return
|
|
}
|
|
}else{
|
|
message.info(
|
|
this.t('PrintboardUpload.jsContent6')
|
|
);
|
|
return
|
|
}
|
|
}else{
|
|
message.info(
|
|
this.t('PrintboardUpload.jsContent4')
|
|
);
|
|
return
|
|
}
|
|
}
|
|
|
|
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.Printboard')}));
|
|
}else if(rv.leftUsageCount == 0){
|
|
message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Printboard')}));
|
|
this.isGenerate = false
|
|
return
|
|
}
|
|
}
|
|
// rv.uniqueId.forEach((item:any) => {
|
|
// let arr:any = {}
|
|
// arr.taskId = item
|
|
// arr.status = 'execution'
|
|
// this.generateList.unshift(arr)
|
|
// });
|
|
this.setGenerate(rv.uniqueId)
|
|
|
|
}
|
|
).catch(res=>{
|
|
this.isGenerate = false
|
|
});
|
|
},
|
|
setGenerate(dataList:any){
|
|
let generage:any = this.$refs.Generate
|
|
let sketchCatecoryList = this.sketchCatecoryList
|
|
let categoryValue:any
|
|
let data = dataList
|
|
let dataNum = dataList.length
|
|
this.remGenerateTime = setTimeout(()=>{
|
|
this.remGenerate = true
|
|
},10000)
|
|
generage.sketchboardList.forEach((item:any) => {
|
|
if(item.checked){
|
|
categoryValue = item.categoryValue
|
|
}
|
|
});
|
|
this.generateTime = setInterval(()=>{
|
|
// let data = this.generateList.filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
|
|
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.sketchCatecoryList.forEach((itemCategory:any) => {
|
|
if(itemCategory.value == element.category){
|
|
element.categoryValue = itemCategory?.name
|
|
element.category = itemCategory?.value
|
|
}
|
|
});
|
|
this.generateList.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.remGenerate = false
|
|
this.isGenerate = 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=>{
|
|
});
|
|
}
|
|
},
|
|
generageAdd(item:any){
|
|
item.type_ = {
|
|
type1: "generate",
|
|
type2: 'Sketchboard',
|
|
},
|
|
item.resData = JSON.parse(JSON.stringify(item))
|
|
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
|
this.store.commit("addGenerateMaterialFils", item);
|
|
nextTick().then(()=>{
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.sketchboard_upload_modal {
|
|
height: 100%;
|
|
display: flex;
|
|
.modal_left {
|
|
padding-top: calc(4rem*1.2);
|
|
width: 47%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.switch_type_list {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.switch_type_item {
|
|
display: flex;
|
|
align-items: center;
|
|
// padding: 0 2rem*1.2);
|
|
height: calc(4rem*1.2);
|
|
background: #fff;
|
|
border-radius: calc(0.8rem*1.2);
|
|
line-height: calc(4rem*1.2);
|
|
font-size: var(--aida-fsize1-8);
|
|
// margin-right: 2.2rem*1.2);
|
|
margin-right: calc(8rem*1.2);
|
|
color: #000;
|
|
cursor: pointer;
|
|
position: relative;
|
|
text-align: center;
|
|
transform-origin: left;
|
|
transform: scale(1);
|
|
transition: 0.3s all;
|
|
&.switch_type_item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
background: #000;
|
|
height: calc(.3rem*1.2);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: calc(.6rem*1.2);
|
|
width: 0px;
|
|
transition: 0.3s all;
|
|
}
|
|
&.select_swtich {
|
|
color: #000;
|
|
// font-weight: 900;
|
|
transform: scale(1.15);
|
|
}
|
|
&.select_swtich::before {
|
|
width: 100%;
|
|
}
|
|
|
|
.switch_icon {
|
|
font-size: calc(1.8rem*1.2);
|
|
margin-right: calc(0.8rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
.sketchboard_body {
|
|
// height: calc(100% - 5rem*1.2));
|
|
flex: 1;
|
|
padding-top: calc(2.5rem*1.2);
|
|
height: calc(30rem*1.2);
|
|
overflow-x: hidden;
|
|
border-right: 1px solid #e5e5e5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
&.moodboard_body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.upload_img_body {
|
|
height: calc(100% - 3rem*1.2);
|
|
overflow-y: auto;
|
|
margin-bottom: calc(1rem*1.2);
|
|
&.upload_img_body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
.upload_file_item{
|
|
margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
|
|
// margin: 0 2rem*1.2) 2rem*1.2) 0;
|
|
display: inline-block;
|
|
width: calc(10rem*1.2);
|
|
height: calc(10rem*1.2);
|
|
border: 1px solid #f5f5f5;
|
|
vertical-align: top;
|
|
position: relative;
|
|
img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
&.upload_component {
|
|
border: none;
|
|
}
|
|
:deep(.ant-upload-picture-card-wrapper) {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
:deep(.ant-upload-select-picture-card) {
|
|
width: calc(6rem*1.2);
|
|
height: calc(6rem*1.2);
|
|
border: calc(0.3rem*1.2) solid #ededed;
|
|
border-radius: calc(1rem*1.2);
|
|
margin: 0;
|
|
}
|
|
.checked{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
&.modal_img_item:hover .checked{
|
|
display: flex;
|
|
}
|
|
.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%;
|
|
}
|
|
&:hover .delete_like_file_block{
|
|
// display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
.upload_max_tip {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: calc(1.4rem*1.2);
|
|
color: #030303;
|
|
|
|
.icon-zhuyi {
|
|
font-size: calc(1.6rem*1.2);
|
|
margin-right: calc(0.7rem*1.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal_right{
|
|
flex: 1;
|
|
margin-left: calc(3rem*1.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.modal_layout,.modal_accomplish{
|
|
.modal_text{
|
|
font-size: var(--aida-fsize1-4);
|
|
font-weight: 400;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.modal_layout{
|
|
.modal_img{
|
|
width: calc(40rem*1.2);
|
|
height: calc(5rem*1.2);
|
|
// overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-y: hidden;
|
|
&.modal_img::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.mousewheel{
|
|
display: flex;
|
|
}
|
|
.modal_img_item{
|
|
width: calc(4rem*1.2);
|
|
height: calc(4rem*1.2);
|
|
margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
|
|
position: relative;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
img{
|
|
// width: 100%;
|
|
width: auto;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
.checked{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
&.modal_img_item:hover .checked{
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.modal_accomplish{
|
|
// margin-top: 2rem*1.2);
|
|
overflow-x: hidden;
|
|
height: calc(30rem*1.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
position: relative;
|
|
.mark_loading{
|
|
position: absolute;
|
|
z-index: 99;
|
|
}
|
|
// overflow-x: hidden;
|
|
&.modal_accomplish::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.modal_text{
|
|
padding-top: calc(2rem*1.2);
|
|
padding-block:calc(2rem*1.2);
|
|
}
|
|
.input_box{
|
|
z-index: 1;
|
|
input{
|
|
&.forbidden{
|
|
cursor:not-allowed;
|
|
}
|
|
}
|
|
}
|
|
.modal_img{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
align-content: flex-start;
|
|
position: relative;
|
|
.modal_imgItem{
|
|
margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
|
|
display: inline-block;
|
|
width: calc(10rem*1.2);
|
|
height: calc(10rem*1.2);
|
|
border: 1px solid #f5f5f5;
|
|
position: relative;
|
|
cursor: pointer;
|
|
&:hover .delete_like_file_block{
|
|
display: block;
|
|
}
|
|
img{
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
&.active{
|
|
opacity: 0.5;
|
|
// border: 2px solid;
|
|
border-radius: calc(1rem*1.2);
|
|
transform: scale(0.9);
|
|
// img {
|
|
// }
|
|
.operate_file_block{
|
|
pointer-events:none
|
|
}
|
|
.pin_block{
|
|
pointer-events:none
|
|
}
|
|
.delete_like_file_block{
|
|
pointer-events:none
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|