2422 lines
83 KiB
Vue
2422 lines
83 KiB
Vue
<template>
|
|
<div class="library_page">
|
|
<div class="page_content">
|
|
<!-- <img
|
|
class="page_content_bg"
|
|
src="@/assets/images/homePage/bg.png"
|
|
/> -->
|
|
<div class="page_content_body">
|
|
<!-- <HeaderComponent></HeaderComponent> -->
|
|
<div class="library_page_body">
|
|
<!-- <div class="library_body_left">
|
|
<div>
|
|
<div class="library_menu_list" v-for="(menu,index) in menuList" :key="menu.title">
|
|
<div :class="['menu_item', selectCode==menu.code ? 'select_menu_item' :'']" @click="selectMenuItem(menu,index)">
|
|
<div class="menu_item_left">
|
|
<i :class="[menu.icon]"></i>
|
|
<div>{{menu.title}}</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="menu.showChildren && menu.children.length">
|
|
<div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)">
|
|
{{child.title}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
|
|
<div class="library_body_right">
|
|
<div class="library_right_header" v-show="selectCode != 'MyBrand'">
|
|
<div class="library_header_left">
|
|
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
|
|
<div>{{ $t('LibraryPage.Organize') }}</div>
|
|
</div>
|
|
<div v-show="selectCode != 'Models' && selectCode != 'DesignElements'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
|
|
</div>
|
|
|
|
<div class="librart_headr_right " v-show="selectCode != 'MyBrand'">
|
|
<div class="generalModel_state " v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
|
|
<div class="generalModel_state_item smail" v-if="selectCode != 'DesignElements' && selectCode != 'Printboard'">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="sex"
|
|
:options="sexList"
|
|
size="large"
|
|
:fieldNames="{ label: 'name', value: 'value' }"
|
|
style="width:20rem"
|
|
@change="sexChange"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
</div>
|
|
<div class="generalModel_state_item smail" v-if="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="designType"
|
|
:options="designTypeList[selectCode]"
|
|
@change="handleChange"
|
|
style="width:20rem"
|
|
size="large"
|
|
:fieldNames="{ label: 'name', value: 'value' }"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
</div>
|
|
<div class="generalModel_state_item smail" v-if="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="designType"
|
|
:options="designTypeList[selectCode]"
|
|
@change="handleChange"
|
|
style="width:20rem"
|
|
size="large"
|
|
:fieldNames="{ label: 'name', value: 'value' }"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
</div>
|
|
<div class="generalModel_state_item smail" v-if="SketchGenerateTypeList?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate == 'Generate'">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="SketchGenerateType"
|
|
:options="SketchGenerateTypeList"
|
|
@change="setSketchGenerateType"
|
|
style="width:20rem"
|
|
size="large"
|
|
:fieldNames="{ label: 'name', value: 'value' }"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
</div>
|
|
<div class="generalModel_state_item smail" v-if="selectCode == 'Models'">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="ageGroup"
|
|
:options="ageGroupList"
|
|
@change="getLibraryList"
|
|
style="width:20rem"
|
|
size="large"
|
|
:fieldNames="{ label: 'name', value: 'value' }"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="libray_right_content" :class="{'myBrand':selectCode == 'MyBrand'}">
|
|
<div class="right_content_body" v-show="uploadGenerate =='Upload' && selectCode != 'MyBrand'">
|
|
<div class="content_body_header" v-show="selectCode == 'DesignElements'">
|
|
<div style="font-size:1.5rem;">{{ $t('LibraryPage.generated') }}</div>
|
|
</div>
|
|
<!-- <div class="content_body_header"> -->
|
|
<div class="content_body_header" v-show="selectCode != 'DesignElements'">
|
|
<div class="content_body_header_left">
|
|
<div class="content_body_header_right">
|
|
<div :class="['header_operate_item' , 'fontSize','active']">
|
|
<a-upload
|
|
:capture="null"
|
|
v-show="uploadGenerate == 'Upload'"
|
|
:before-upload="beforeUpload"
|
|
:customRequest="customRequest "
|
|
:multiple="selectCode != 'Models'"
|
|
:maxCount="15"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="fileUploadChange"
|
|
>
|
|
<div>{{ $t('LibraryPage.Upload') }}</div>
|
|
</a-upload>
|
|
</div>
|
|
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="deleteBatchPic()">{{ $t('LibraryPage.Delete') }}</div>
|
|
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal(selectImgList,'batch')">{{ $t('LibraryPage.Rename') }}</div>
|
|
</div>
|
|
<div class="content_search_block generalModel_state">
|
|
<div class="generalModel_state_item">
|
|
<input
|
|
class="search_input"
|
|
style="background-color: #fff;"
|
|
:placeholder="$t('LibraryPage.inputContent1')"
|
|
v-model="searchPictureName"
|
|
@keydown.enter="getLibraryList('')">
|
|
</div>
|
|
<div class="generalModel_state_item search_cascader">
|
|
<el-cascader
|
|
:options="options"
|
|
filterable
|
|
v-model="value.labelValue"
|
|
:collapse-tags="true"
|
|
:show-all-levels="false"
|
|
:clearable="true"
|
|
:placeholder="$t('LibraryPage.Select')"
|
|
:max-collapse-tags=3
|
|
:props="prop"
|
|
:collapse-tags-tooltip="true"
|
|
ref="cascader"
|
|
popper-class="libraryPageCascader"
|
|
@visible-change="dropdownVisibleChange"
|
|
>
|
|
<template #empty>
|
|
<div>
|
|
{{$t('LibraryPage.Select')}}
|
|
</div>
|
|
</template>
|
|
</el-cascader>
|
|
</div>
|
|
<div class="intersection">
|
|
<div :title="$t('LibraryPage.unionSet')" @click="()=>intersection = 1" v-show="intersection == 0" :class="['icon', 'iconfont','icon-bingji',]"></div>
|
|
<div :title="$t('LibraryPage.intersection')" @click="()=>intersection = 0" v-show="intersection == 1" :class="['icon', 'iconfont','icon-bingji1',]"></div>
|
|
</div>
|
|
<!-- <div class="search_icon_block" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div> -->
|
|
<div class="gallery_btn" style="padding: 2rem; line-height: 1;" @click="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
|
|
</div>
|
|
<div v-show="imgList.length" :class="['check_all_block',selectImgList.length == imgList.length ? 'check_all' : '']" @click="selectAllImg()">
|
|
<div class="check_block"><div class="check_block_body" v-show="selectImgList.length == imgList.length && imgList.length"></div></div>
|
|
<div>{{ $t('LibraryPage.all') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content_body_table scroll_style">
|
|
<div class="content_img_item" v-for="(img,index) in imgList" :key="img.id" @click="selectImgItem(img)" :draggable="true">
|
|
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
|
<img v-lazy="img.url" :key="img.url" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
|
|
<div class="img_item_hover" v-show="selectCode != 'DesignElements'">
|
|
<div class="img_operate_content left">
|
|
<div class="img_operate_block" :title="t('LibraryPage.Point')" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
|
|
<span class="icon iconfont icon-dianwei operate_icon"></span>
|
|
</div>
|
|
<div class="img_operate_block">
|
|
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,imgList,'library')"></i>
|
|
</div>
|
|
<div class="img_operate_block" :title="t('LibraryPage.Rename')" @click.stop="showRenameModal(img,'total')">
|
|
<span class="icon iconfont icon-tianxie operate_icon"></span>
|
|
</div>
|
|
</div>
|
|
<div class="img_operate_content right">
|
|
<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteSinglePic(img,index)">
|
|
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content_img_name">{{img.name}}</div>
|
|
</div>
|
|
|
|
<div class="no_data_block" v-show="!imgList.length && !isShowMark">
|
|
<img src="@/assets/images/homePage/null_img.png">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="table_pagination" v-show="imgList.length">
|
|
<a-pagination
|
|
|
|
v-model:current="currentPage"
|
|
v-model:pageSize="pageSize"
|
|
:total="total"
|
|
:showQuickJumper="true"
|
|
:showSizeChanger="false"
|
|
@change="changePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<!-- 蒙层 start-->
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<!-- 蒙层 end-->
|
|
<div v-show="selectCode == 'MyBrand'" class="right_content_body">
|
|
<div v-show="!isBrandDetail" class="list">
|
|
<div class="addBrand gallery_btn" style="padding:0 2.5rem;" @click="addBrand">Add brand</div>
|
|
<div class="content_body_table scroll_style">
|
|
<div class="myBrandItem content_img_item" v-for="item,index in brandDNAList" :key="item.id" @click="openBrandDetail(item)">
|
|
<img :src="item.minioUrl" alt="">
|
|
<div class="bg"></div>
|
|
<i class="fi fi-rr-trash icon_delete" @click.stop="deleteBrand(item,index)"></i>
|
|
</div>
|
|
<div class="no_data_block" v-show="!brandDNAList.length && !isShowMark">
|
|
<img src="@/assets/images/homePage/null_img.png">
|
|
</div>
|
|
</div>
|
|
<div class="table_pagination" v-show="brandDNAList.length">
|
|
<a-pagination
|
|
v-model:current="currentPage"
|
|
v-model:pageSize="pageSize"
|
|
:total="total"
|
|
:showQuickJumper="true"
|
|
:showSizeChanger="false"
|
|
@change="changePage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<brandDetail v-if="isBrandDetail" v-model:isShowMark="isShowMark" :selectCode="selectCode" ref="brandDetail" @handleBack="()=>isBrandDetail = false"></brandDetail>
|
|
|
|
</div>
|
|
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
|
|
<div class="content_body_header content_body_header_generate">
|
|
<!-- <div v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" class="printModel">
|
|
<div @click.stop="PrintModel">{{ printModel.name }}</div>
|
|
<ul v-show="printModel.optype">
|
|
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
|
|
<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
|
|
<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
|
|
</ul>
|
|
</div> -->
|
|
<generalMenu v-if="printModelList" class="printModel" v-show="selectCode == 'Printboard' && scene?.value == 'Pattern'" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
|
|
<div class="input_border">
|
|
<div class="input_box" :class="{active:inputShow}">
|
|
<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
|
|
<div class="upload_item" v-show="selectGenerateList.length != 0 && selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
|
|
<div
|
|
class="upload_file_item"
|
|
v-for="(file, index) in selectGenerateList"
|
|
: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' || 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="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
|
|
</a-popover> -->
|
|
<input
|
|
@input="ifMaximumLength"
|
|
:maxlength='inputShow?0:9999'
|
|
@keydown.enter="getgenerate"
|
|
@click="inputFocus()"
|
|
:placeholder="(scene?.value == 'Slogan' && selectCode == 'Printboard')?isSloganHint:$t('LibraryPage.inputContent2')"
|
|
@paste="onPaste"
|
|
v-model="captionGeneration">
|
|
<i class="fi fi-br-upload" :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"
|
|
:before-upload="beforeUpload"
|
|
:data="{
|
|
...upload,
|
|
gender:sex,
|
|
}"
|
|
:headers="{Authorization:token}"
|
|
v-model:file-list="selectGenerateList"
|
|
multiple
|
|
:maxCount="1"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="generateFileUploadChange"
|
|
>
|
|
</a-upload>
|
|
</i>
|
|
<i v-show="selectCode == 'Printboard' && 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>
|
|
<div class="input_box_btnBox sketch" v-else>
|
|
<div class="upload_item" v-show="selectGenerateList.length > 0">
|
|
<div
|
|
class="upload_file_item"
|
|
v-for="(file, index) in selectGenerateList"
|
|
: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' || 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>
|
|
<i class="fi fi-br-upload" style="margin-left: 2rem;" v-show="selectGenerateList.length == 0" :title="$t('Generate.uploadproduct')">
|
|
<a-upload
|
|
class="search_upImg"
|
|
:capture="null"
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload,
|
|
gender:sex,
|
|
}"
|
|
:maxCount='1'
|
|
:headers="{ Authorization: token }"
|
|
v-model:file-list="selectGenerateList"
|
|
:before-upload="beforeUpload"
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="generateFileUploadChange"
|
|
>
|
|
</a-upload>
|
|
</i>
|
|
<div :title="$t('Generate.style')">
|
|
<generalMenu v-if="printModelList" class="printModel" :dataList="printModelList" :isCanvas="selectCode == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
|
|
</div>
|
|
</div>
|
|
|
|
<textarea
|
|
v-show="isTextarea "
|
|
class="search_textarea "
|
|
@input="ifMaximumLength"
|
|
:maxlength='inputShow?0:9999'
|
|
@keydown.enter="getgenerate"
|
|
@click.stop=""
|
|
v-model="captionGeneration"
|
|
></textarea>
|
|
<div class="generage_btn_box" v-show="!isGenerate[selectCode]">
|
|
<div class="generage_btn started_btn" style="padding: 1.5rem 2rem;">
|
|
|
|
<div @click.stop="getgenerate">
|
|
<span v-if="
|
|
selectCode == 'Moodboard' ||
|
|
(selectCode == 'Printboard' && scene?.value == 'Pattern') ||
|
|
(selectCode == 'Sketchboard' && scene?.value == 'generate')">{{ speedData.label }}</span>
|
|
<span v-else>{{ $t('LibraryPage.Generate') }}</span>
|
|
</div>
|
|
<div class="icon iconfont icon-xiala" v-show="
|
|
selectCode == 'Moodboard' ||
|
|
(selectCode == 'Printboard' && scene?.value == 'Pattern') ||
|
|
(selectCode == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
|
</div>
|
|
<div class="content" v-show="speedState">
|
|
<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="isGenerate[selectCode] && !remGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
|
|
<i class="fi fi-br-loading"></i>
|
|
</div>
|
|
<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
|
|
{{$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-for="item in workspace?.allKeywordsByStyle?.[selectCode]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content_body_table scroll_style">
|
|
<div class="content_img_item" v-for="(img,index) in generateList[selectCode]" :key="img.id" :class="[img.status != 'Success'?'hideEvents':'']" v-show="img.status == 'Success'"
|
|
:draggable="!isGenerate[selectCode]" @dragstart="startDrag($event,index)" @dragover.prevent @drop="drop($event,index)">
|
|
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
|
<!-- <img v-show="img.status != 'Success'" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" src="@/assets/images/homePage/loading.gif" alt=""> -->
|
|
<img :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']" v-lazy="img.imgUrl">
|
|
|
|
<div class="img_item_hover">
|
|
<div class="img_operate_content left">
|
|
<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
|
|
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
|
</div>
|
|
<div class="img_operate_block">
|
|
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index,generateList[selectCode],'generate')"></i>
|
|
</div>
|
|
</div>
|
|
<div class="img_operate_content right">
|
|
<div class="img_operate_block">
|
|
<i v-if="!img.like" class="fi fi-rr-heart operate_icon" @click.stop="likeFile(img,'like')"></i>
|
|
<i v-else class="fi fi-sr-heart operate_icon" :adminLike="!!img.like" @click.stop="likeFile(img,'noLike')"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
|
|
</div>
|
|
<div class="content_img_name"></div>
|
|
</div>
|
|
<div class="no_data_block" v-show="!generateList[selectCode]?.length && !isShowMark">
|
|
<img src="@/assets/images/homePage/null_img.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<mannequinEdit ref="ModelPlacement" :ageGroup="ageGroup" :isPop="true" @submit="getLibraryList"></mannequinEdit>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<searchLabel ref="searchLabel"></searchLabel>
|
|
<scaleImage ref="scaleImage" :isCanvas="selectCode == 'Sketchboard'" :sex="workspace.sex"></scaleImage>
|
|
<!-- <ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement> -->
|
|
<setLabel ref="setLabel"></setLabel>
|
|
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
|
<UpgradePlan ref="UpgradePlan"></UpgradePlan>
|
|
|
|
<createBrand ref="createBrand" @submitBrandAdd="getBrandDNAList"></createBrand>
|
|
<!-- <RobotAssist></RobotAssist> -->
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { defineComponent,h ,ref,createVNode,nextTick,watch,provide,computed,reactive,toRefs} from 'vue'
|
|
// import ModelPlacement from '@/component/LibraryPage/ModelPlacementUpdata.vue';
|
|
import setLabel from '@/component/LibraryPage/setLabel.vue';
|
|
import brandDetail from '@/component/LibraryPage/brandDetail.vue';
|
|
import createBrand from '@/component/LibraryPage/createBrand.vue';
|
|
import searchLabel from '@/component/LibraryPage/searchLabel.vue';
|
|
|
|
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
|
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import {getUploadUrl,isMoible} from '@/tool/util'
|
|
import { useStore } from "vuex";
|
|
import { Https } from "@/tool/https";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
|
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { ElCascader } from 'element-plus'
|
|
import { remove } from "jszip";
|
|
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
|
import generalMenu from "@/component/HomePage/generalMenu.vue";
|
|
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
|
import mannequinEdit from "@/component/home/design/mannequin/edit.vue";
|
|
export default defineComponent({
|
|
components: {
|
|
setLabel,
|
|
brandDetail,
|
|
createBrand,
|
|
searchLabel,
|
|
// RobotAssist,
|
|
ElCascader,
|
|
scaleImage,
|
|
sketchCategory,
|
|
createSlogan,
|
|
generalMenu,
|
|
UpgradePlan,
|
|
mannequinEdit,
|
|
},
|
|
props:{
|
|
},
|
|
|
|
setup(props) {
|
|
const store = useStore();
|
|
let menuList = computed(()=>{
|
|
return [
|
|
{title:useI18n().t('LibraryPage.Moodboard'),code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
|
|
{title:useI18n().t('LibraryPage.Prints'),code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
|
|
// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
|
|
{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
|
|
// {title:'Market Sketch',code:'Elements',icon:'icon-fuwushichang',showChildren:false,children:[]},
|
|
{title:useI18n().t('LibraryPage.DesignElements'),code:'DesignElements',icon:'fi fi-ss-puzzle-piece',showChildren:false,children:[]},
|
|
{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
|
|
{title:useI18n().t('LibraryPage.brandDNA'),code:'MyBrand',icon:'fi fi-ss-gem',showChildren:false,children:[]},
|
|
// {title:useI18n().t('LibraryPage.MyBrand'),code:'MyBrand',icon:'fi fi-rs-people',showChildren:false,children:[]},
|
|
|
|
]
|
|
})
|
|
let selectImgList:any = ref([])
|
|
let selectCode:any = ref('')
|
|
let searchPictureName = ref('')
|
|
let searchPictureSeed:any = ref(0);
|
|
let designType:any = ref({
|
|
name:'',
|
|
value:''
|
|
})
|
|
let sex:any = ref('')
|
|
// const sexList:any = []
|
|
let sexList:any = computed(()=>store.state.UserHabit.sex.value)
|
|
const printType = computed(() => {
|
|
return store.state.UserHabit.printType;
|
|
});
|
|
const designElementsType = computed(() => {
|
|
return store.state.UserHabit.designElementsType;
|
|
});
|
|
const positionType = computed(() => {
|
|
return store.state.UserHabit.Position;
|
|
});
|
|
const dataDom = reactive({
|
|
createBrand:null as any,
|
|
brandDetail:null as any,
|
|
})
|
|
const pageData = reactive({
|
|
isBrandDetail:false,
|
|
brandDNAList:[] as any,
|
|
ageGroup:'',
|
|
ageGroupList:computed(()=>store.state.UserHabit.ageGroup),
|
|
})
|
|
let designTypeList:any = ref({
|
|
Sketchboard:positionType,
|
|
Moodboard:[],
|
|
Printboard:printType,
|
|
Models:[],
|
|
DesignElements:designElementsType,
|
|
})
|
|
let SketchGenerateTypeList = computed(()=>{
|
|
return store.state.UserHabit.SketchGenerateType
|
|
})
|
|
let SketchGenerateType = ref({})
|
|
let imgList = ref([])
|
|
let currentPage:any = ref(1)
|
|
let pageSize:any = ref(18)
|
|
let total:any = ref(20)
|
|
let uploadUrl:any = ref('')
|
|
let currentUploadFileNum:any = ref(0) //当次上传文件数量
|
|
let isShowMark:any = ref(false) //蒙层
|
|
let uploadGenerate:any = ref('Upload')
|
|
let inputShow = ref(false)
|
|
let generateCheckbox:any = ref()
|
|
let captionGeneration:any = ref('')
|
|
let inputTime = ref()
|
|
let generateList:any = ref({
|
|
Sketchboard:[],
|
|
Moodboard:[],
|
|
Printboard:[],
|
|
Models:[],
|
|
DesignElements:[],
|
|
})
|
|
let selectGenerateList:any = ref([])
|
|
let printModel = ref({
|
|
id:'',
|
|
num:1,
|
|
optype:false,
|
|
value:'',
|
|
name:useI18n().t('LibraryPage.Model1')
|
|
})
|
|
let {t} = useI18n()
|
|
let type:any = {
|
|
selectCode:selectCode,
|
|
}
|
|
provide('type',type)
|
|
let value = ref({
|
|
labelValue:[],
|
|
editLabelValue:[],
|
|
})
|
|
|
|
let intersection = ref(1)
|
|
let isTest = ref()
|
|
let driver__:any = computed(()=>{
|
|
return store.state.Guide.guide
|
|
})
|
|
let userDetail:any= computed(()=>{
|
|
return store.state.UserHabit.userDetail
|
|
})
|
|
let generateTime:any = ref({
|
|
Sketchboard:'',
|
|
Moodboard:'',
|
|
Printboard:'',
|
|
Models:'',
|
|
DesignElements:'',
|
|
})
|
|
let generateProceedList = ref([])
|
|
let isGenerate:any = ref({
|
|
Sketchboard:false,
|
|
Moodboard:false,
|
|
Printboard:false,
|
|
Models:false,
|
|
DesignElements:false,
|
|
})
|
|
let remGenerate:any = ref({
|
|
Sketchboard:false,
|
|
Moodboard:false,
|
|
Printboard:false,
|
|
Models:false,
|
|
DesignElements:false,
|
|
})
|
|
let remGenerateTime:any = ref({
|
|
Sketchboard:'',
|
|
Moodboard:'',
|
|
Printboard:'',
|
|
Models:'',
|
|
DesignElements:'',
|
|
})
|
|
let scene:any = ref({})
|
|
let dragIdx:any=ref(0)
|
|
let getLibraryListInputTime:any = ref()
|
|
const options:any = ref([
|
|
]);
|
|
let prop = {
|
|
multiple: true,
|
|
checkStrictly: true,
|
|
emitPath:true,
|
|
children:'childList',
|
|
value:'id',
|
|
label:'classificationName',
|
|
}
|
|
let isTextarea = ref(false)
|
|
let workspace:any = computed(()=>{
|
|
return store?.state?.Workspace?.probjects
|
|
})
|
|
let generateLevel2:any = {}
|
|
let isSloganHint:any = ref('')
|
|
let printModelList:any = ref([])
|
|
let speed = reactive({
|
|
speedList:[
|
|
{
|
|
title:'Picture quality is average, speed is fast',
|
|
label:'Low Quality',
|
|
value:'fast',
|
|
|
|
},{
|
|
title:'Picture quality is high, speed is slow',
|
|
label:'High Quality',
|
|
value:'high',
|
|
},
|
|
],
|
|
speedState:false,
|
|
speedData:{
|
|
title:'Picture quality is average, speed is fast',
|
|
label:'Low Quality',
|
|
value:'fast',
|
|
},
|
|
})
|
|
const openSpeed = ()=>{
|
|
speed.speedState = !speed.speedState
|
|
if(speed.speedState){
|
|
document.addEventListener('click',openSpeed)
|
|
}else{
|
|
document.removeEventListener('click',openSpeed)
|
|
}
|
|
}
|
|
const setSpeed = (item:any)=>{
|
|
speed.speedData = item
|
|
}
|
|
let getSex = () =>{
|
|
sex.value = store.state.UserHabit.sex.value[0].value
|
|
getPosition()
|
|
}
|
|
let getPosition = ()=>{
|
|
store.commit('setPosition',sex.value)
|
|
designType.value = designTypeList.value.Sketchboard?.[0].value
|
|
}
|
|
let getLibraryList = (str:any)=>{
|
|
let labelArr:any = []
|
|
value.value.labelValue.forEach((item:any)=>{
|
|
labelArr.push(item[item.length-1])
|
|
})
|
|
let design = ''
|
|
if(selectCode.value == 'Sketchboard' || selectCode.value == 'DesignElements' || selectCode.value == 'Printboard'){
|
|
design = designType.value
|
|
}
|
|
let data = {
|
|
classificationIdList:labelArr,
|
|
level1Type:selectCode.value,
|
|
level2Type:design,
|
|
page:1,
|
|
ageGroup:pageData.ageGroup,
|
|
modelSex:sex.value?sex.value:'',
|
|
pictureName:searchPictureName.value,
|
|
size:pageSize.value,
|
|
intersection:intersection.value,
|
|
}
|
|
if(str == 'page'){
|
|
data.page = currentPage.value
|
|
}else{
|
|
currentPage.value = 1
|
|
}
|
|
isShowMark.value = true
|
|
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
|
(rv: any) => {
|
|
if(rv.content?.length == 0 && currentPage.value != 1){
|
|
currentPage.value = 1
|
|
getLibraryList('')
|
|
}else{
|
|
imgList.value = rv.content
|
|
total.value = rv.total
|
|
isShowMark.value = false
|
|
}
|
|
}
|
|
).catch((res)=>{
|
|
isShowMark.value = false
|
|
});
|
|
}
|
|
let getClass = ()=>{
|
|
let data = {
|
|
"classificationIdList": [],
|
|
"classificationName": "",
|
|
"createTime": "",
|
|
"deleteConfirm": '',
|
|
"id": '',
|
|
"libraryId": '',
|
|
"parentId": '',
|
|
"type": selectCode.value,
|
|
"updateTime": "",
|
|
"userId": ''
|
|
}
|
|
Https.axiosPost(Https.httpUrls.queryClassification, data).then(
|
|
(rv: any) => {
|
|
options.value = rv
|
|
rv.forEach((rvItem:any,rvIndex:number) => {
|
|
options.value[rvIndex].value = rvItem.id
|
|
options.value[rvIndex].label = rvItem.classificationName
|
|
rvItem.childList.forEach((childItem:any,index:number) => {
|
|
options.value[rvIndex].childList[index].value = childItem.id
|
|
options.value[rvIndex].childList[index].label = childItem.classificationName
|
|
});
|
|
});
|
|
}
|
|
).catch((res)=>{
|
|
});
|
|
}
|
|
const openBrandDetail = (item:any)=>{
|
|
pageData.isBrandDetail = true
|
|
nextTick(()=>{
|
|
dataDom.brandDetail.getBranDetailData(item)
|
|
})
|
|
}
|
|
const addBrand = ()=>{
|
|
dataDom.createBrand.openAddBrand()
|
|
}
|
|
|
|
return {
|
|
...toRefs(dataDom),
|
|
...toRefs(pageData),
|
|
menuList,
|
|
selectImgList,
|
|
selectCode,
|
|
searchPictureName,
|
|
searchPictureSeed,
|
|
sexList,
|
|
sex,
|
|
positionType,
|
|
SketchGenerateType,
|
|
SketchGenerateTypeList,
|
|
designTypeList,
|
|
designType,
|
|
imgList,
|
|
currentPage,
|
|
pageSize,
|
|
total,
|
|
uploadUrl,
|
|
currentUploadFileNum,
|
|
isShowMark,
|
|
store,
|
|
uploadGenerate,
|
|
inputShow,
|
|
generateCheckbox,
|
|
captionGeneration,
|
|
inputTime,
|
|
generateList,
|
|
selectGenerateList,
|
|
printModel,
|
|
value,
|
|
t,
|
|
intersection,
|
|
isTest,
|
|
driver__,
|
|
userDetail,
|
|
generateTime,
|
|
generateProceedList,
|
|
isGenerate,
|
|
remGenerate,
|
|
remGenerateTime,
|
|
scene,
|
|
dragIdx,
|
|
getLibraryListInputTime,
|
|
prop,
|
|
options,
|
|
isTextarea,
|
|
workspace,
|
|
generateLevel2,
|
|
isSloganHint,
|
|
getSex,
|
|
getPosition,
|
|
getLibraryList,
|
|
getClass,
|
|
printModelList,
|
|
...toRefs(speed),
|
|
openSpeed,
|
|
setSpeed,
|
|
openBrandDetail,
|
|
addBrand,
|
|
}
|
|
},
|
|
data(this_) {
|
|
return {
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
upload: {
|
|
isPin: 0,
|
|
gender:this_.sex,
|
|
level1Type: this_.selectCode,
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token: "",
|
|
isInputFocus:false,
|
|
deleteSelectManneuin:false,
|
|
};
|
|
},
|
|
watch:{
|
|
scene:{
|
|
handler(newVal,oldVal){
|
|
if(this.selectCode == '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 = ''
|
|
}
|
|
}
|
|
},
|
|
'$route.query':{
|
|
handler(query, oldQuery) {
|
|
if(oldQuery && query?.library == oldQuery?.library)return
|
|
let str = query.library
|
|
if(!this.ageGroup)this.ageGroup = this.ageGroupList[0].value
|
|
if(!str)str = 'Moodboard'
|
|
nextTick(()=>{
|
|
this.selectMenuItem({code:str})
|
|
// setWorksSelect(str)
|
|
})
|
|
},
|
|
immediate: true,
|
|
}
|
|
},
|
|
async mounted(){
|
|
this.upload.gender = this.sex
|
|
let isTest:any = getCookie('isTest')
|
|
this.isTest =JSON.parse(isTest)
|
|
this.uploadUrl = getUploadUrl()
|
|
this.token = getCookie("token") || "";
|
|
this.getClass()
|
|
this.getSex()
|
|
},
|
|
|
|
methods:{
|
|
|
|
|
|
|
|
likeFile(item:any,str:string){
|
|
let designType = ''
|
|
if(this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
|
|
designType = this.designType
|
|
}else if(this.selectCode == 'Sketchboard'){
|
|
designType = item.categoryValue
|
|
}
|
|
if(str == 'like'){
|
|
let data = {
|
|
generateDetailId:item.id,
|
|
level1Type:this.selectCode,
|
|
level2Type: designType,
|
|
gender:this.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=>{
|
|
});
|
|
}
|
|
},
|
|
selectMenuItem(menu:any){
|
|
if(menu.code != this.upload.level1Type){
|
|
this.selectCode = menu.code
|
|
this.currentPage = 1
|
|
this.total = 0
|
|
if(menu.code == 'MyBrand'){
|
|
this.getBrandDNAList()
|
|
this.upload.level1Type = menu.code
|
|
return
|
|
}
|
|
this.searchPictureName = ''
|
|
this.imgList = [],
|
|
this.selectImgList = []
|
|
this.isTextarea = false
|
|
this.value.labelValue = []
|
|
if(this.designTypeList[this.selectCode].length >= 1){
|
|
this.designType = this.designTypeList[this.selectCode][0].value
|
|
}else{
|
|
this.designType = ''
|
|
}
|
|
if(this.selectCode != 'DesignElements'){
|
|
this.getClass()
|
|
}
|
|
if(this.selectCode == 'Sketchboard' || this.selectCode == 'Models')this.getSex()
|
|
if(this.selectCode == 'Sketchboard'){
|
|
this.positionType = computed(() => {
|
|
return this.store.state.UserHabit.Position;
|
|
});
|
|
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.selectCode == 'Printboard'){
|
|
this.printModelList = [
|
|
{
|
|
num:1,
|
|
optype:false,
|
|
value:'Painting Style',
|
|
label:this.t('Generate.Model1')
|
|
},{
|
|
num:2,
|
|
optype:false,
|
|
value:'Illustration Style',
|
|
label:this.t('Generate.Model2')
|
|
},{
|
|
num:3,
|
|
optype:false,
|
|
value:'Real Style',
|
|
label:this.t('Generate.Model3')
|
|
},
|
|
]
|
|
}
|
|
if(this.printModelList[0])this.printModel = this.printModelList[0]
|
|
this.captionGeneration = ''
|
|
this.selectGenerateList = []
|
|
this.inputShow = false
|
|
this.uploadGenerateOpen('Upload')
|
|
}
|
|
this.upload.level1Type = menu.code
|
|
},
|
|
|
|
async sexChange(){
|
|
// if(this.uploadGenerate == 'Generate' && this.selectCode == 'Sketchboard'){
|
|
// }else{
|
|
// // this.scene = this.designTypeList[this.selectCode].filter((item:any)=>item.value == this.designType)[0]
|
|
// await this.getPosition()
|
|
// }
|
|
await this.getPosition()
|
|
|
|
if(this.uploadGenerate == 'Generate')return
|
|
this.currentPage = 1
|
|
this.getLibraryList('')
|
|
},
|
|
handleChange(){
|
|
this.scene = this.designTypeList[this.selectCode].filter((item:any)=>item.value == this.designType)[0]
|
|
this.selectGenerateList = []
|
|
if(this.uploadGenerate == 'Generate'){
|
|
if(this.selectCode == 'Printboard'){
|
|
this.captionGeneration = ''
|
|
}
|
|
return
|
|
}
|
|
this.currentPage = 1
|
|
this.getLibraryList('')
|
|
},
|
|
setSketchGenerateType (){
|
|
this.selectGenerateList = []
|
|
this.scene = this.SketchGenerateTypeList.filter((item:any)=>item.value == this.SketchGenerateType)[0]
|
|
},
|
|
fileUploadChange(data:any){
|
|
let file = data.file
|
|
// let Cropper:any = this.$refs.Cropper
|
|
|
|
if(this.selectCode == 'Models'){
|
|
let reader = new FileReader();
|
|
//试用用户上传限制
|
|
// if(this.imgList.length+this.currentUploadFileNum > 10 && this.isTest){
|
|
// message.info(this.t('isTest.image'));
|
|
// return
|
|
// }
|
|
reader.onload = (e:any) => {
|
|
let data_new;
|
|
if (typeof e.target.result === 'object') {
|
|
// 把Array Buffer转化为blob 如果是base64不需要
|
|
data_new = window.URL.createObjectURL(new Blob([e.target.result]));
|
|
} else {
|
|
data_new = e.target.result;
|
|
}
|
|
this.placementClick({url:data_new,file:file.originFileObj})
|
|
|
|
};
|
|
// 转化为base64
|
|
// reader.readAsDataURL(file)
|
|
// 转化为blob
|
|
reader.readAsArrayBuffer(file.originFileObj);
|
|
}
|
|
|
|
},
|
|
|
|
//改变页码
|
|
changePage(current: number, pageSize: number){
|
|
this.currentPage = current
|
|
this.pageSize = pageSize
|
|
if(this.selectCode == 'MyBrand'){
|
|
this.currentPage = 1
|
|
this.getBrandDNAList()
|
|
}else{
|
|
this.getLibraryList('page')
|
|
}
|
|
},
|
|
getBrandDNAList(){
|
|
let data = {
|
|
page:this.currentPage,
|
|
size:this.pageSize,
|
|
}
|
|
this.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.brandDNAPage,data).then(
|
|
(rv: any) => {
|
|
console.log(rv);
|
|
this.brandDNAList = rv.content
|
|
this.total = rv.total
|
|
this.isShowMark = false
|
|
}
|
|
).catch((res)=>{
|
|
this.isShowMark = false
|
|
});
|
|
},
|
|
//选择图片
|
|
selectImgItem(imgData:any){
|
|
if(imgData.level2Type == "DesignElements")return
|
|
if(this.selectImgList.indexOf(imgData.id) === -1){
|
|
this.selectImgList.push(imgData.id)
|
|
}else{
|
|
let index = this.selectImgList.indexOf(imgData.id)
|
|
this.selectImgList.splice(index,1)
|
|
}
|
|
},
|
|
|
|
//选择所有的图片
|
|
selectAllImg(){
|
|
if(this.selectImgList.length == this.imgList.length){
|
|
this.selectImgList = []
|
|
}else{
|
|
this.selectImgList = this.imgList.map((v:any) => v.id)
|
|
}
|
|
},
|
|
//打开修改名称弹窗
|
|
showRenameModal(data:any,type:any){
|
|
let searchLabel:any = this.$refs.searchLabel
|
|
searchLabel.init(data,type)
|
|
return
|
|
},
|
|
uploadGenerateOpen(str:any){
|
|
// if(str == 'Generate'){
|
|
// if(this.selectCode == 'Printboard'){
|
|
// this.scene = this.designTypeList[this.selectCode][0]
|
|
// }
|
|
// }
|
|
// if(this.selectCode == 'Sketchboard' && str == 'Generate'){
|
|
// this.designTypeList.Sketchboard = computed(()=>{
|
|
// return this.store.state.UserHabit.SketchGenerateType
|
|
// })
|
|
// }else if(this.selectCode == 'Sketchboard'){
|
|
// this.designTypeList.Sketchboard = computed(() => {
|
|
// return this.store.state.UserHabit.Position;
|
|
// });
|
|
// }
|
|
if(this.designTypeList[this.selectCode][0]){
|
|
this.scene = this.designTypeList[this.selectCode][0]
|
|
this.designType = this.designTypeList[this.selectCode][0].value
|
|
}
|
|
if(str == 'Generate' && this.selectCode == 'Sketchboard'){
|
|
this.scene = this.SketchGenerateTypeList[0]
|
|
this.SketchGenerateType = this.SketchGenerateTypeList[0].value
|
|
}
|
|
if(str != 'Generate'){
|
|
this.getLibraryList('')
|
|
}
|
|
this.uploadGenerate = str
|
|
},
|
|
//删除单个图片
|
|
deleteSinglePic(data:any,index:any){
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: this.t('LibraryPage.jsContent1'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
_this.confirmDeletePic(data,index,'')
|
|
}
|
|
});
|
|
},
|
|
deleteGenerate(index:any){
|
|
// if(this.isGenerate[this.selectCode])return
|
|
let num = this.generateList[this.selectCode].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.generateList[_this.selectCode].length - num
|
|
_this.generateList[_this.selectCode].splice(index-a,1)
|
|
}
|
|
});
|
|
},
|
|
startDrag(event:any, index:any) {
|
|
this.dragIdx = index
|
|
},
|
|
drop(event:any, index:any) {
|
|
let _teams = this.generateList[this.selectCode] //将hotteams存起来
|
|
let _dragitem = _teams[this.dragIdx] //将被拖拽的那条数据存起来
|
|
_teams.splice(this.dragIdx, 1) //删除被拖拽的那条数据
|
|
_teams.splice(index, 0, _dragitem)
|
|
},
|
|
//批量删除图片
|
|
deleteBatchPic(){
|
|
if(!this.selectImgList.length){
|
|
return
|
|
}
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: this.t('LibraryPage.jsContent2'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
centered:true,
|
|
onOk() {
|
|
_this.confirmDeletePic('',0,'')
|
|
}
|
|
});
|
|
},
|
|
|
|
//确定删除图片 有data则是单个
|
|
confirmDeletePic(data:any,index:any,nData:any){
|
|
let libraryIds = data ? [data.id] : this.selectImgList
|
|
let newData = {
|
|
libraryIds:libraryIds,
|
|
deleteModelConfirm:this.selectCode == 'Models' ? data.deleteModelConfirm?data.deleteModelConfirm : 0:'',
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
}
|
|
if(nData)newData = nData
|
|
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
|
(rv: any) => {
|
|
if(data && data.id){
|
|
this.imgList.splice(index, 1)
|
|
}else{
|
|
this.selectImgList = []
|
|
this.getLibraryList('')
|
|
}
|
|
if(!this.deleteSelectManneuin)return
|
|
let id = this.store.state.Workspace.workspace.id
|
|
Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
|
|
if (rv) {
|
|
if(rv.position == "Overall"){
|
|
rv.overallSingle = false
|
|
}else{
|
|
rv.overallSingle = true
|
|
}
|
|
if(rv.sexEnum.name == 'Female'){
|
|
rv.mannequinUrl = rv.femalePresignedUrl
|
|
rv.mannequinType = rv.mannequinFemaleType
|
|
rv.mannequinId = rv.mannequinFemaleId
|
|
}else if(rv.sexEnum.name == 'Male'){
|
|
rv.mannequinUrl = rv.malePresignedUrl
|
|
rv.mannequinType = rv.mannequinMaleType
|
|
rv.mannequinId = rv.mannequinMaleId
|
|
}
|
|
this.store.commit("setWorkspace", rv);
|
|
this.deleteSelectManneuin = false
|
|
}
|
|
})
|
|
}
|
|
).catch((res)=>{
|
|
if(this.selectCode == "Models" && res.errCode === 2){
|
|
let _this = this
|
|
this.deleteSelectManneuin = true
|
|
Modal.confirm({
|
|
title: res.errMsg,
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
zIndex:99999,
|
|
centered:true,
|
|
onOk () {
|
|
newData.deleteModelConfirm = 1
|
|
_this.confirmDeletePic('',index,newData)
|
|
},
|
|
onCancel(){
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
beforeUpload(file:any,fileList: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('LibraryPage.jsContent3'));
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 5;
|
|
if (!isLt2M) {
|
|
message.info(this.t('LibraryPage.jsContent4'));
|
|
}
|
|
if(isJpgOrPng && isLt2M){
|
|
this.currentUploadFileNum = fileList.length
|
|
}else{
|
|
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
|
}
|
|
},
|
|
|
|
|
|
|
|
customRequest(event:any){
|
|
if(this.selectCode == "Models"){
|
|
return
|
|
}
|
|
//试用用户上传限制
|
|
// if(this.imgList.length+this.currentUploadFileNum > 10 && this.isTest){
|
|
// message.info(this.t('isTest.image'));
|
|
// return
|
|
// }
|
|
let designType = ''
|
|
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
|
|
designType = this.designType
|
|
}
|
|
let new_data = {
|
|
file:event.file,
|
|
level1Type:this.selectCode,
|
|
level2Type:designType,
|
|
sex:this.selectCode == 'Sketchboard' ? this.sex:'',
|
|
modelType:'',
|
|
checkMd5:1,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
}
|
|
this.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
|
(rv: any) => {
|
|
if(!rv.checkMd5){
|
|
this.affirmCstomRequest(new_data)
|
|
}else{
|
|
this.currentUploadFileNum --
|
|
if(!this.currentUploadFileNum){
|
|
this.getLibraryList('')
|
|
}
|
|
}
|
|
}
|
|
).catch((res)=>{
|
|
this.currentUploadFileNum --
|
|
if(!this.currentUploadFileNum){
|
|
this.getLibraryList('')
|
|
}
|
|
});
|
|
},
|
|
affirmCstomRequest(data:any){
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: this.t('LibraryPage.jsContent5'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
zIndex:99999,
|
|
centered:true,
|
|
onOk() {
|
|
data.checkMd5 = 0
|
|
Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
|
(rv: any) => {
|
|
_this.currentUploadFileNum --
|
|
if(!_this.currentUploadFileNum){
|
|
_this.getLibraryList('')
|
|
}
|
|
}
|
|
).catch((res)=>{
|
|
_this.currentUploadFileNum --
|
|
if(!_this.currentUploadFileNum){
|
|
_this.getLibraryList('')
|
|
}
|
|
});
|
|
},
|
|
onCancel(){
|
|
_this.currentUploadFileNum --
|
|
if(!_this.currentUploadFileNum){
|
|
_this.getLibraryList('')
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
|
|
//编辑模特打点
|
|
editPlacementClick(data:any){
|
|
let name = data.name + '.'+data.url.split("?")[0].split(".").pop()
|
|
let newData = {
|
|
...data.libraryModelPoint,
|
|
url:data.url,
|
|
name:name,
|
|
}
|
|
this.placementClick(data)
|
|
},
|
|
|
|
//给模特打点编辑
|
|
placementClick(data:any){
|
|
// let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
|
|
let placementModal:any = this.$refs.ModelPlacement
|
|
placementModal.mannEditMask = false
|
|
placementModal.showPlacementModal(data,this.sex,'Library')
|
|
},
|
|
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.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
|
|
str = ','
|
|
}
|
|
this.captionGeneration += str + value
|
|
},
|
|
ifSeedValue(e:any){
|
|
if(this.searchPictureSeed == ''){
|
|
this.searchPictureSeed = 0
|
|
}
|
|
},
|
|
ifMaximumLength(){
|
|
clearTimeout(this.inputTime)
|
|
this.inputTime = setTimeout(()=>{
|
|
if(this.captionGeneration?.split(/\s+/).length > 250){
|
|
(this.$refs.inputShowText as any).innerHTML = this.t('LibraryPage.maximumLength')
|
|
this.inputShow = true
|
|
}else{
|
|
this.inputShow = false
|
|
}
|
|
},500)
|
|
},
|
|
setSlogan(){
|
|
let createSlogan:any = this.$refs.createSlogan
|
|
createSlogan.init()
|
|
},
|
|
setSloganData(data:any){
|
|
this.selectGenerateList = data
|
|
},
|
|
inputFocus(){
|
|
if(this.isInputFocus) return
|
|
this.isInputFocus = true
|
|
let setDomCli = ()=>{
|
|
this.isInputFocus = false
|
|
document.removeEventListener('click',setDomCli)
|
|
}
|
|
setTimeout(()=>{
|
|
document.addEventListener('click',setDomCli)
|
|
},200)
|
|
},
|
|
generateFileUploadChange(data:any){
|
|
let file = data.file;
|
|
let bor = true
|
|
if (file.status === "done") {
|
|
let res:any = JSON.parse(file.xhr.response);
|
|
if(res.errCode == 0){
|
|
let category:any={
|
|
value:'',
|
|
name:'',
|
|
}
|
|
file.id = res.data.id;
|
|
file.imgUrl = res.data.url;
|
|
file.resData = res.data;
|
|
file.type_ = "upload";
|
|
if(this.designTypeList[this.selectCode] && this.selectCode == 'Sketchboard'){
|
|
this.designTypeList[this.selectCode].forEach((item:any) => {
|
|
if(item.name == res.data.level2Type){
|
|
category.value = item?.value
|
|
category.name = item?.name
|
|
}
|
|
});
|
|
}
|
|
file.categoryValue = category?.value;
|
|
file.category = category?.name;
|
|
let paste = this.selectGenerateList.filter((v: any) => v.id === file.id);
|
|
if(paste.length == 0)this.selectGenerateList.push(file);
|
|
this.selectGenerateList = this.selectGenerateList.filter((v: any) => v.status === "done");
|
|
}else{
|
|
bor = false
|
|
}
|
|
} else if (file.status === "error") {
|
|
bor = false
|
|
}
|
|
if(!bor){
|
|
let res:any = JSON.parse(file.xhr.response);
|
|
let index = -1;
|
|
this.selectGenerateList.forEach((ele: any, index1: any) => {
|
|
if (file.uid === ele.uid) {
|
|
index = index1;
|
|
}
|
|
});
|
|
if (index > -1) {
|
|
this.selectGenerateList.splice(index, 1);
|
|
}
|
|
// message.warning(file.name + this.t('LibraryPage.jsContent8'));
|
|
message.warning(res.errMsg);
|
|
}
|
|
},
|
|
deleteFile(index: any) {
|
|
if(this.scene?.value == 'Slogan' && this.selectCode == 'Printboard'){
|
|
let createSlogan:any = this.$refs.createSlogan
|
|
createSlogan.isDeleteSlogan = true
|
|
}
|
|
this.selectGenerateList.splice(index, 1);
|
|
|
|
},
|
|
PrintModel(){
|
|
if(!this.printModel.optype){
|
|
document.addEventListener('click',this.removePrintModel)
|
|
}
|
|
this.printModel.optype = !this.printModel.optype
|
|
},
|
|
removePrintModel(){
|
|
this.printModel.optype = false
|
|
document.removeEventListener('click',this.removePrintModel)
|
|
},
|
|
setprintModel(item:any){
|
|
this.printModel = item
|
|
// this.printModel = {
|
|
// num : num,
|
|
// optype:false,
|
|
// name:this.t('LibraryPage.Model'+num)
|
|
// }
|
|
},
|
|
imageToSketch(){
|
|
if((!this.printModel?.id && !this.printModel?.value) || !this.selectGenerateList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
|
|
this.isShowMark = true
|
|
let data = {
|
|
"elementId": this.selectGenerateList[0].id,
|
|
gender:this.sex,
|
|
"style": this.printModel.value,
|
|
"styleImageId": this.printModel.id?this.printModel.id:''
|
|
}
|
|
Https.axiosPost(Https.httpUrls.imageToSketch, data).then((rv)=>{
|
|
if(rv){
|
|
this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
|
|
if(itemCategory.value == rv.category){
|
|
rv.categoryValue = itemCategory?.value
|
|
rv.category = itemCategory?.name
|
|
}
|
|
});
|
|
this.generateList[this.selectCode].push({
|
|
imgUrl:rv.url,
|
|
categoryValue:rv.categoryValue,
|
|
category:rv.category,
|
|
id:rv.id,
|
|
status:'Success',
|
|
})
|
|
this.isShowMark = false
|
|
}
|
|
}).catch(()=>{
|
|
this.isShowMark = false
|
|
})
|
|
},
|
|
getgenerate(){
|
|
if(this.scene?.value == 'extract'){
|
|
this.imageToSketch()
|
|
return
|
|
}
|
|
this.isInputFocus = false
|
|
this.isTextarea = false
|
|
let selectCodeStr = JSON.parse(JSON.stringify(this.selectCode))
|
|
if(this.isGenerate[selectCodeStr]){
|
|
return
|
|
}
|
|
clearInterval(this.remGenerateTime[selectCodeStr])
|
|
this.remGenerate[selectCodeStr] = false
|
|
|
|
let level2Type = ''
|
|
let collectionElementId = ''
|
|
let base64 = ''
|
|
if(this.selectGenerateList?.[0]){
|
|
collectionElementId = this.selectGenerateList[0].id
|
|
if(this.selectGenerateList[0].base64){
|
|
base64 = this.selectGenerateList[0].imgUrl
|
|
}
|
|
}
|
|
|
|
let sloganText = ''
|
|
let arr = ["Painting Style","Illustration Style","Real Style"]
|
|
sloganText = this.captionGeneration
|
|
if(this.selectCode == "Sketchboard"){
|
|
level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
|
|
if(this.workspace.styleName){
|
|
sloganText = `${this.workspace.styleName},${sloganText}`
|
|
}
|
|
}else if(this.selectCode == "Printboard"){
|
|
level2Type = this.scene?.value
|
|
if(level2Type == 'Slogan' && this.captionGeneration == ''){
|
|
sloganText = this.isSloganHint
|
|
}else if(level2Type == 'Pattern'){
|
|
sloganText = `${arr[this.printModel.num-1]},${sloganText}`
|
|
}
|
|
if(!base64 && level2Type == 'Slogan'){
|
|
message.info(this.t('Generate.jsContent10'));
|
|
return
|
|
}
|
|
}
|
|
let data = {
|
|
generateType:'text',
|
|
designType:'collection',
|
|
collectionElementId:collectionElementId,
|
|
level1Type:selectCodeStr,
|
|
level2Type:level2Type,
|
|
userId:(this?.userDetail as any).userId,
|
|
isTestUser:this.driver__.driver?false:this.isTest,
|
|
text:sloganText,
|
|
seed:this.searchPictureSeed,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
version:this.speedData.value,//为1就是Print
|
|
gender:selectCodeStr == 'Sketchboard'?this.sex:'',
|
|
sloganBase64:base64,
|
|
}
|
|
this.generateLevel2[selectCodeStr] = data.level2Type
|
|
this.isGenerate[selectCodeStr] = true
|
|
this.isTextarea = false
|
|
this.remGenerateTime[selectCodeStr] = setTimeout(()=>{
|
|
this.remGenerate[selectCodeStr] = true
|
|
},10000)
|
|
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
|
|
(rv) => {
|
|
if(data.isTestUser){
|
|
let str:any
|
|
if(selectCodeStr == 'Moodboard'){
|
|
str = this.t('collectionModal.Moodboard')
|
|
}else if(selectCodeStr == 'Printboard'){
|
|
str = this.t('collectionModal.Printboard')
|
|
}else if(selectCodeStr == 'Sketchboard'){
|
|
str = this.t('collectionModal.Sketchboard')
|
|
}
|
|
// if(rv.leftUsageCount >= 1){
|
|
// message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:str}));
|
|
// }else if(rv.leftUsageCount == 0){
|
|
// message.warning(this.t('Generate.jsContent9',{str:str}));
|
|
// this.isGenerate[selectCodeStr] = false
|
|
// // this.isShowMark = false
|
|
// return
|
|
// }
|
|
}
|
|
this.setGenerate(selectCodeStr,rv.uniqueId)
|
|
|
|
}
|
|
).catch(res=>{
|
|
// this.isShowMark = false
|
|
this.generateLevel2[selectCodeStr] = ''
|
|
this.isGenerate[selectCodeStr] = false
|
|
clearInterval(this.remGenerateTime[selectCodeStr])
|
|
this.remGenerate[selectCodeStr] = false
|
|
if(res.errCode === 2){
|
|
let this_ = this
|
|
Modal.confirm({
|
|
title: res.errMsg,
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
zIndex:99999,
|
|
centered:true,
|
|
onOk() {
|
|
let UpgradePlan:any = this_.$refs.UpgradePlan
|
|
UpgradePlan.init()
|
|
},
|
|
onCancel(){
|
|
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
setGenerate(str:any,dataList:any){
|
|
|
|
let data = dataList
|
|
let dataNum = dataList.length
|
|
let state = true
|
|
this.generateTime[str] = setInterval(()=>{
|
|
// let data = this.generateList[str].filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
|
|
if(!state)return
|
|
state = false
|
|
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
|
(rv) => {
|
|
state = true
|
|
if(this.isGenerate[str]){//防止取消后有正在执行的获取状态
|
|
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
|
|
this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
|
|
if(itemCategory.value == element.category){
|
|
element.categoryValue = itemCategory?.value
|
|
element.category = itemCategory?.name
|
|
}
|
|
});
|
|
// element.categoryValue = this.scene?.name
|
|
// element.category = this.scene?.value
|
|
this.generateList[str].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'));
|
|
}
|
|
this.store.dispatch('getCredits')
|
|
clearInterval(this.generateTime[str])
|
|
clearInterval(this.remGenerateTime[str])
|
|
this.remGenerate[str] = false
|
|
this.isGenerate[str] = false
|
|
this.generateLevel2[str] = ''
|
|
}
|
|
}
|
|
}
|
|
).catch(res=>{
|
|
clearInterval(this.generateTime[str])
|
|
clearInterval(this.remGenerateTime[str])
|
|
// this.isShowMark = false
|
|
this.isGenerate[str] = false
|
|
this.remGenerate[str] = false
|
|
this.generateLevel2[str] = ''
|
|
});
|
|
},1000)
|
|
},
|
|
removeGenerate(){
|
|
// this.isShowMark = false
|
|
this.isGenerate[this.selectCode] = false
|
|
this.remGenerate[this.selectCode] = false
|
|
clearInterval(this.generateTime[this.selectCode])
|
|
if(this.generateProceedList){
|
|
let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
|
|
let type = 'Generate'
|
|
if(this.generateLevel2[str] == 'Logo'){
|
|
type = 'Logo'
|
|
}
|
|
let data = {
|
|
uniqueId:str,
|
|
userId:(this?.userDetail as any)?.userId,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
type: type
|
|
}
|
|
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
|
(rv) => {
|
|
this.generateProceedList = []
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
}
|
|
},
|
|
dropdownVisibleChange(){
|
|
let element:any = this.$refs.cascader
|
|
nextTick().then(()=>{
|
|
let cascader = document.getElementsByClassName('libraryPageCascader')[0]
|
|
let cascaderChild = cascader
|
|
let element:any = this.$refs.cascader
|
|
if(cascader.children.length > 3 ){
|
|
}else{
|
|
let button1:any = document.createElement("span")
|
|
button1.classList.add('started_btn','cascader_btn1')
|
|
let button2:any = document.createElement("span")
|
|
button2.classList.add('started_btn','cascader_btn2')
|
|
let divMax:any = document.createElement("div")
|
|
divMax.classList.add('cascader_btn_max')
|
|
button1.textContent = 'Edit'
|
|
// button2.textContent = '删除'
|
|
button1.addEventListener('click',this.removeLabel,false)
|
|
divMax.appendChild(button1)
|
|
// divMax.appendChild(button2)
|
|
cascaderChild?.insertAdjacentElement("afterbegin", divMax);
|
|
|
|
// cascader.addEventListener('click',this.cascaderClick)
|
|
}
|
|
})
|
|
let el = element.contentRef?.getElementsByClassName('el-cascader-menu__empty-text')?.[0]
|
|
if(el){
|
|
el.innerHTML = this.t('LibraryPage.NoLabel')
|
|
}
|
|
},
|
|
// cascaderClick(e:Event){
|
|
// console.log(e.target)
|
|
// },
|
|
|
|
removeLabel(){
|
|
let setLabel:any = this.$refs.setLabel
|
|
let cascader:any = this.$refs.cascader
|
|
cascader.togglePopperVisible()
|
|
let event = new Event('click', {"bubbles":true, "cancelable":true});
|
|
document.dispatchEvent(event);
|
|
setLabel.init('add',this.options)
|
|
},
|
|
labelSearch(){
|
|
nextTick().then(()=>{
|
|
let cascader = document.getElementsByClassName('editLabel')[0]
|
|
cascader.addEventListener('click',(event)=>{
|
|
event.stopPropagation()
|
|
})
|
|
})
|
|
|
|
|
|
},
|
|
scaleImage(index:any,list:any,str:any){
|
|
let scaleImage:any = this.$refs.scaleImage
|
|
scaleImage.scaleImageMask = true
|
|
str == 'library'?scaleImage.isLike = false:scaleImage.isLike = true
|
|
scaleImage.init(list,index)
|
|
},
|
|
onPaste(e:any){
|
|
if(e.clipboardData.files[0] && !this.isTextarea && this.selectCode !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
|
|
let param = new FormData();
|
|
param.append('inPin','0')
|
|
param.append('gender',this.sex)
|
|
param.append('level1Type',this.selectCode)
|
|
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
|
param.append('file',e.clipboardData.files[0]);
|
|
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
|
|
let value = {data:v,errCode : 0}
|
|
v.status = 'done'
|
|
let data = {
|
|
file:{
|
|
status: 'done',
|
|
xhr:{
|
|
response:JSON.stringify(value)
|
|
}
|
|
}
|
|
}
|
|
this.generateFileUploadChange(data)
|
|
|
|
})
|
|
}
|
|
},
|
|
deleteBrand(item:any,index:any){
|
|
let this_ = this
|
|
Modal.confirm({
|
|
title: this.t('LibraryPage.jsContent11'),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
let data = {
|
|
id:item.id,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.brandDNADelete, data).then(
|
|
(rv) => {
|
|
this_.brandDNAList.splice(index,1)
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.el-icon{
|
|
font-size: 14px;
|
|
}
|
|
.library_page {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
// min-width: 1440px;
|
|
position: relative;
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
.page_content {
|
|
position: relative;
|
|
.el-cascader .el-input .icon-arrow-down{
|
|
font-size: 2.4rem;
|
|
}
|
|
.page_content_bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.page_content_body {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.library_page_body{
|
|
overflow: hidden;
|
|
width: 100%;
|
|
// height: 100%;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
.printModel{
|
|
font-size: 1.4rem;
|
|
font-weight: 500;
|
|
margin-right: 2rem;
|
|
}
|
|
.library_body_left{
|
|
// width: 27.5rem;
|
|
// width: 36.5rem;
|
|
width: 25rem;
|
|
height: 100%;
|
|
margin-right: 3rem;
|
|
background: #f7f8fa;
|
|
>div{
|
|
border-radius: 2rem;
|
|
overflow: hidden;
|
|
padding: 2rem 0;
|
|
}
|
|
.library_menu_list{
|
|
.menu_item{
|
|
width: 100%;
|
|
display: flex;
|
|
font-weight: 900;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 3rem;
|
|
border-left: 0.5rem solid transparent;
|
|
// font-size: 1.6rem;
|
|
font-size: var(--aida-fsize1-8);
|
|
color: #030303;
|
|
cursor: pointer;
|
|
transition: all .3s;
|
|
|
|
&.child_menu_item{
|
|
padding-left: 6.5rem;
|
|
}
|
|
|
|
&.select_menu_item{
|
|
background: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
.menu_item_left{
|
|
display: flex;
|
|
align-items: center;
|
|
user-select: none;
|
|
|
|
.fi{
|
|
font-size: 2.2rem;
|
|
display: flex;
|
|
margin-right: 1.8rem;
|
|
}
|
|
}
|
|
|
|
.icon_rotate{
|
|
-moz-transform:rotate(180deg);
|
|
-webkit-transform:rotate(180deg);
|
|
transform: rotate(180deg);
|
|
animation-direction: 0.5s;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.library_body_right{
|
|
width: 100%;
|
|
// width: calc(100% - 23.5rem);
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.header_operate_item{
|
|
margin-right: 5rem;
|
|
color: #C2C2C2;
|
|
font-size: var(--aida-fsize1-8);
|
|
.ant-upload{
|
|
// font-size: 1.6rem;
|
|
// font-weight: 900;
|
|
}
|
|
.ant-upload-list-text{
|
|
display: none;
|
|
}
|
|
|
|
&.operate_select{
|
|
color:#333333;
|
|
cursor: pointer;
|
|
font-weight: 900;
|
|
}
|
|
&.fontSize{
|
|
font-size: 1.4rem;
|
|
}
|
|
&.active{
|
|
color:#333333;
|
|
cursor: pointer;
|
|
}
|
|
&.pointer{
|
|
cursor: pointer;
|
|
}
|
|
&:last-child{
|
|
margin-right: 7rem;
|
|
}
|
|
}
|
|
|
|
.content_search_block{
|
|
// width: 85rem;
|
|
margin-left: auto;
|
|
|
|
.generalModel_state_item,.gallery_btn{
|
|
margin-right: 3rem;
|
|
}
|
|
.search_cascader{
|
|
// width: 53%;
|
|
width: 37rem;
|
|
}
|
|
.intersection{
|
|
cursor: pointer;
|
|
margin-right: 3rem;
|
|
>div{
|
|
font-size: 3rem;
|
|
font-weight: 900;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.library_right_header{
|
|
display: flex;
|
|
padding: 0 3.5rem 0 2.8rem;
|
|
align-items: center;
|
|
background: rgba(255,255,255,0.4);
|
|
box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);
|
|
margin: 2rem 0;
|
|
.library_header_left{
|
|
height: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
.librart_headr_right{
|
|
display: flex;
|
|
align-items: center;
|
|
.generalModel_state_item{
|
|
margin-right: 2rem;
|
|
.ant-select-selector{
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.libray_right_content{
|
|
width:100%;
|
|
// height:calc(100% - 12rem);
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 0.1rem 0 0 0.3rem;
|
|
box-sizing: border-box;
|
|
&.myBrand{
|
|
height:calc(100% - 4rem);
|
|
margin: 2rem 0;
|
|
}
|
|
.right_content_body{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f7f8fa;
|
|
padding: 2rem 4rem;
|
|
border-radius: 2rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
> .list{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .addBrand{
|
|
display: inline-block;
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
.content_body_header{
|
|
// height: 10rem;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
// padding: 2rem 0 2rem 3rem;
|
|
box-sizing: content-box;
|
|
justify-content: space-between;
|
|
.content_body_header_left{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
.content_body_header_right{
|
|
display: flex;
|
|
width: 43rem;
|
|
}
|
|
.check_all_block{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.6rem;
|
|
color: #64686D;
|
|
cursor: pointer;
|
|
|
|
&.check_all{
|
|
color: #1A1A1A;
|
|
}
|
|
|
|
.check_block{
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
background: #EBECF4;
|
|
border: 0.1rem solid #64686D;
|
|
padding: 0.3rem;
|
|
margin-right: 0.7rem;
|
|
|
|
.check_block_body{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #343579;
|
|
}
|
|
}
|
|
}
|
|
&.content_body_header_generate{
|
|
justify-content: flex-start;
|
|
.checkboxItem {
|
|
margin-right: 4rem;
|
|
label {
|
|
display: flex;
|
|
cursor: pointer;
|
|
input {
|
|
margin-right: 0.5rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
span {
|
|
font-size: 1.4rem;
|
|
font-weight: 500;
|
|
bottom: -.5rem;
|
|
}
|
|
}
|
|
}
|
|
.input_border{
|
|
padding-bottom: 0;
|
|
background: rgba(0, 0, 0, 0);
|
|
width: 55rem;
|
|
--width:65%;
|
|
.input_box_btnBox{
|
|
background: #fff;
|
|
align-items: center;
|
|
.search_input{
|
|
height: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.content_body_table{
|
|
width: 100%;
|
|
height: calc(100% - 12rem);
|
|
overflow-y:auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
align-content: flex-start;
|
|
position: relative;
|
|
flex: 1;
|
|
&.content_body_table::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.content_img_item{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: 0 1.4rem;
|
|
margin-bottom: 2.8rem;
|
|
width: 16.6%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
&.myBrandItem{
|
|
width: calc(100% / 5 - 1rem);
|
|
margin: 1rem;
|
|
border-radius: 2rem;
|
|
// border: 2px solid #000;
|
|
position: relative;
|
|
aspect-ratio: 1 / .566;
|
|
cursor: pointer;
|
|
// background: #fff;
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
> .bg{
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0);
|
|
transition: all .3s;
|
|
}
|
|
i{
|
|
display: flex;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
font-size: 3rem;
|
|
display: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
&:hover{
|
|
> .bg{
|
|
background: rgba(0,0,0,0.2);
|
|
}
|
|
> i{
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
.content_img_item_block{
|
|
border: 0.1rem solid transparent;
|
|
// width: 16.5rem;
|
|
// height: 16.5rem;
|
|
width: 17rem;
|
|
height: 17rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
background: #fff;
|
|
&.select_item_img{
|
|
// border-color: #343579;
|
|
opacity: 0.5;
|
|
border-radius: 1rem;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.content_img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.board_content_img{
|
|
// width: 100%;
|
|
// height: 100%;
|
|
}
|
|
|
|
&:hover .img_item_hover{
|
|
// display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.img_item_hover{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top:0;
|
|
background: rgba(0,0,0,0.2);
|
|
// display: none;
|
|
opacity: 0;
|
|
|
|
.img_operate_content{
|
|
position: absolute;
|
|
// top: 50%;
|
|
// left: 50%;
|
|
// transform: translate(-50%,-50%);
|
|
// max-width: 90%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
top: 1rem;
|
|
&.left{
|
|
left: 1rem;
|
|
right: auto;
|
|
}
|
|
&.right{
|
|
right: 1rem;
|
|
left: auto;
|
|
}
|
|
>div{
|
|
margin-bottom: .5rem;
|
|
margin-right: .5rem;
|
|
}
|
|
}
|
|
.img_operate_block{
|
|
width: 3.6rem;
|
|
height: 3.6rem;
|
|
background: rgba(0,0,0,0.6);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 3.6rem;
|
|
cursor: pointer;
|
|
margin-bottom: 0.4rem;
|
|
.operate_icon,i{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.operate_icon{
|
|
font-size: 1.8rem;
|
|
color: #fff;
|
|
&.fi-sr-heart{
|
|
color: red;
|
|
}
|
|
}
|
|
i{
|
|
font-size: 1.8rem;
|
|
color: #fff;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.content_img_name{
|
|
width: 16.5rem;
|
|
height: 3.5rem;
|
|
line-height: 3.5rem;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 1.4rem;
|
|
color: #030303;
|
|
}
|
|
}
|
|
|
|
.no_data_block{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.table_pagination{
|
|
text-align: center;
|
|
// height: 5.2rem;
|
|
// flex: 1;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.library_rename_modal_component{
|
|
|
|
.collection_rename_content{
|
|
padding:0 6.8rem 1.8rem;
|
|
|
|
.collection_rename_title{
|
|
margin: 2rem 0rem 1rem 0;
|
|
font-size: var(--aida-fsize1-8);
|
|
}
|
|
.rename_form_content{
|
|
|
|
.rename_form_input{
|
|
width: 100%;
|
|
height: 4.6rem;
|
|
border: 0.1rem solid #d9d9d9;
|
|
padding-left: 2.1rem;
|
|
line-height: 4.6rem;
|
|
font-size: 1.8rem;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
|
|
&::placeholder {
|
|
color:#adabb9
|
|
}
|
|
}
|
|
}
|
|
|
|
.rename_button_list{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-top: 3rem;
|
|
|
|
.rename_button_item{
|
|
width: 8.6rem;
|
|
height: 3.2rem;
|
|
line-height: 3.2rem;
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rename_cancel_button{
|
|
background: #E4E5EB;
|
|
color: #030303;
|
|
margin-right: 1.8rem;
|
|
}
|
|
|
|
.rename_submit_button{
|
|
background: #343579;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
</style> |