1600 lines
65 KiB
Vue
1600 lines
65 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 v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></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">
|
|
<div class="library_header_left">
|
|
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
|
|
<a-upload
|
|
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 v-show="uploadGenerate != 'Upload'">{{ $t('LibraryPage.Upload') }}</div>
|
|
</div>
|
|
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">{{ $t('LibraryPage.Generate') }}</div>
|
|
</div>
|
|
|
|
<div class="librart_headr_right">
|
|
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'MarketingSketch'">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="sex"
|
|
:options="sexList"
|
|
@change="sexChange"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="designType"
|
|
:options="disignTypeList"
|
|
@change="handleChange"
|
|
>
|
|
<template #suffixIcon
|
|
><span
|
|
class="icon iconfont icon-xiala"
|
|
style="color: #343579"
|
|
></span
|
|
></template>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="libray_right_content">
|
|
<div class="right_content_body" v-show="uploadGenerate =='Upload'">
|
|
<div class="content_body_header">
|
|
<div class="content_body_header_left">
|
|
<div class="content_body_header_right">
|
|
<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('','batch')">{{ $t('LibraryPage.Rename') }}</div>
|
|
</div>
|
|
<div class="content_search_block">
|
|
<input class="search_input" :placeholder="$t('LibraryPage.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
|
<!-- <div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div> -->
|
|
<div class="generage_btn search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
|
|
|
</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 class="content_body_table scroll_style">
|
|
<div class="content_img_item" v-for="(img,index) in imgList" :key="img.id" @click="selectImgItem(img)">
|
|
<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">
|
|
<div class="img_operate_content">
|
|
<div class="img_operate_block" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
|
|
<span class="icon iconfont icon-tianxie operate_icon"></span>
|
|
</div>
|
|
<div class="img_operate_block" @click.stop="showRenameModal(img,'single')">
|
|
<span class="icon iconfont icon-zhongmingming operate_icon"></span>
|
|
</div>
|
|
<div class="img_operate_block" @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>
|
|
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
|
|
<div class="content_body_header content_body_header_generate">
|
|
<div class="content_body_header_right">
|
|
<div class="checkboxItem">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
v-model="checkbox[0].type"
|
|
@click="setKeyword(0)"
|
|
/>
|
|
<span>{{ $t('LibraryPage.ImageOnly') }}</span>
|
|
</label>
|
|
</div>
|
|
<div class="checkboxItem">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
v-model="checkbox[1].type"
|
|
@click="setKeyword(1)"
|
|
/>
|
|
<span>{{ $t('LibraryPage.TextOnly') }}</span>
|
|
</label>
|
|
</div>
|
|
<div class="checkboxItem">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
v-model="checkbox[2].type"
|
|
@click="setKeyword(2)"
|
|
/>
|
|
<span>{{ $t('LibraryPage.TextImage') }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input_box" :class="{active:inputShow}">
|
|
<input class="search_input" @input="ifMaximumLength" :maxlength='inputShow?0:9999' :class="{active:checkbox[0].type}" :readonly="checkbox[0].type" :placeholder="$t('LibraryPage.inputContent2')" v-model="captionGeneration">
|
|
<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('LibraryPage.Generate') }}</div>
|
|
<span>{{ $t('LibraryPage.maximumLength') }}</span>
|
|
</div>
|
|
<div v-show="selectCode == 'Printboard'" 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>
|
|
</ul>
|
|
</div>
|
|
<div class="upload_item">
|
|
<div
|
|
class="upload_file_item"
|
|
v-for="(file, index) in selectGenerateList"
|
|
:key="file"
|
|
:class="[file?.checked?'active':'']"
|
|
>
|
|
<div
|
|
class="upload_file_item_content"
|
|
v-show="file?.status === 'uploading'"
|
|
>
|
|
<a-spin :indicator="indicator" tip="Uploading..." />
|
|
</div>
|
|
<div class="upload_file_item_content" @click.stop="setSketchboardItem(file)" v-show="file?.status === 'done'">
|
|
<img :src="file?.imgUrl" class="upload_img" />
|
|
<div class="delete_file_block rightTop" @click="deleteFile(index)" >
|
|
<span class="icon iconfont icon-shanchu"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="upload_component upload_file_item"
|
|
v-show="selectGenerateList.length <= 3"
|
|
>
|
|
<a-upload
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:before-upload="beforeUpload"
|
|
:disabled="checkbox[1].type"
|
|
:data="{
|
|
...upload
|
|
}"
|
|
:headers="{Authorization:token}"
|
|
v-model:file-list="selectGenerateList"
|
|
multiple
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
@change="generateFileUploadChange"
|
|
>
|
|
<div class="upload_tip_block">
|
|
<i class="fi fi-br-upload"></i>
|
|
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
|
</div>
|
|
</a-upload>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content_body_table scroll_style">
|
|
<div class="content_img_item" v-for="(img,index) in generateList" :key="img.id" @click="selectImgItem(img)">
|
|
<div :class="['content_img_item_block', selectImgList.indexOf(img.id) > -1 ? 'select_item_img' :'']">
|
|
<img v-lazy="img.imgUrl" :key="img.imgUrl" :class="['content_img', ['Moodboard','Printboard'].indexOf(selectCode) > -1 ? 'board_content_img' :'']"/>
|
|
<!-- <div class="img_item_hover">
|
|
<div class="img_operate_content">
|
|
<div class="img_operate_block" @click.stop="editPlacementClick(img)" v-show="selectCode === 'Models'">
|
|
<span class="icon iconfont icon-tianxie operate_icon"></span>
|
|
</div>
|
|
<div class="img_operate_block" @click.stop="showRenameModal(img,'single')">
|
|
<span class="icon iconfont icon-zhongmingming operate_icon"></span>
|
|
</div>
|
|
<div class="img_operate_block" @click.stop="deleteSinglePic(img,index)">
|
|
<span class="icon iconfont icon-shanchu operate_icon"></span>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="content_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="generateList.length">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a-modal class="library_rename_modal_component"
|
|
v-model:visible="renameVisivle"
|
|
:footer="null"
|
|
title="Rename Pic"
|
|
width="56rem"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
@onCancel="closeRenameModal"
|
|
>
|
|
<div class="collection_rename_content">
|
|
<div class="rename_form_content">
|
|
<input class="rename_form_input" :placeholder="$t('LibraryPage.inputContent3')" v-model="newPicName" @keydown.enter="confrimRename()">
|
|
</div>
|
|
<div class="rename_button_list">
|
|
<div class="rename_button_item rename_cancel_button" @click="closeRenameModal()">{{ $t('LibraryPage.Cancel') }}</div>
|
|
<div class="rename_button_item rename_submit_button" @click="confrimRename()">{{ $t('LibraryPage.Sure') }}</div>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
|
|
<ModelPlacement ref="ModelPlacement" @submitModelPlacement="getLibraryList"></ModelPlacement>
|
|
<ModelPlacementMobile ref="ModelPlacementMobile"></ModelPlacementMobile>
|
|
|
|
<!-- 蒙层 start-->
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<!-- 蒙层 end-->
|
|
<RobotAssist></RobotAssist>
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { defineComponent,h ,ref,createVNode,nextTick} from 'vue'
|
|
import HeaderComponent from "@/component/HomePage/Header.vue";
|
|
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
|
|
import ModelPlacementMobile from '@/component/LibraryPage/ModelPlacementMobile.vue';
|
|
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
|
import { Modal,message,Upload} 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 { useI18n } from "vue-i18n";
|
|
export default defineComponent({
|
|
components: {
|
|
HeaderComponent,
|
|
ModelPlacement,
|
|
ModelPlacementMobile,
|
|
RobotAssist
|
|
},
|
|
setup() {
|
|
let menuList = ref([
|
|
{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:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
|
|
{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
|
|
|
|
])
|
|
let selectImgList:any = ref([])
|
|
let selectCode:any = ref('Moodboard')
|
|
let searchPictureName = ref('')
|
|
let designType:any = ref('Outwear')
|
|
let sex:any = ref('Meal')
|
|
let sexList:any = [
|
|
|
|
]
|
|
let disignTypeList:any = [
|
|
|
|
]
|
|
let imgList = ref([])
|
|
let currentPage:any = ref(1)
|
|
let pageSize:any = ref(18)
|
|
let total:any = ref(20)
|
|
let renameVisivle:any = ref(false)
|
|
let renameType:any = ref('single')//修改名字的方式single-单个 batch-批量
|
|
let newPicName:any = ref('')
|
|
let uploadUrl:any = ref('')
|
|
let currentUploadFileNum:any = ref(0) //当次上传文件数量
|
|
let isShowMark:any = ref(false) //蒙层
|
|
let selectSingleImg:any = ref({}) //保存单个图片数据
|
|
let store = useStore();
|
|
let uploadGenerate:any = ref('Upload')
|
|
let checkbox = ref([
|
|
{
|
|
name: "image",
|
|
type: false,
|
|
},
|
|
{
|
|
name: "text",
|
|
type: true,
|
|
},
|
|
{
|
|
name: "text-image",
|
|
type: false,
|
|
},
|
|
]);
|
|
let inputShow = ref(false)
|
|
let generateCheckbox:any = ref()
|
|
let captionGeneration:any = ref()
|
|
let inputTime = ref()
|
|
let generateList:any = ref([
|
|
// {
|
|
// "id": 266,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735547_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065908Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=910634477c4188db039cfddfa69147c02d354200989a6515ee80dc9b939e6b83"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// },
|
|
// {
|
|
// "id": 267,
|
|
// "imgUrl": "http://18.167.251.121:9000/aida-users/83/moodboard/1698735554_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=minioadmin%2F20231031%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20231031T065915Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=1d9928c2568398267ab75e74a00ad054ddffb7953859f8bc285db57718953b64"
|
|
// }
|
|
])
|
|
let selectGenerateList:any = ref([])
|
|
let printModel = ref({
|
|
num:1,
|
|
optype:false,
|
|
name:useI18n().t('LibraryPage.model')+'1'
|
|
})
|
|
let {t} = useI18n()
|
|
|
|
return {
|
|
menuList,
|
|
selectImgList,
|
|
selectCode,
|
|
searchPictureName,
|
|
sexList,
|
|
sex,
|
|
disignTypeList,
|
|
designType,
|
|
imgList,
|
|
currentPage,
|
|
pageSize,
|
|
total,
|
|
renameVisivle,
|
|
renameType,
|
|
newPicName,
|
|
uploadUrl,
|
|
currentUploadFileNum,
|
|
isShowMark,
|
|
selectSingleImg,
|
|
store,
|
|
uploadGenerate,
|
|
checkbox,
|
|
inputShow,
|
|
generateCheckbox,
|
|
captionGeneration,
|
|
inputTime,
|
|
generateList,
|
|
selectGenerateList,
|
|
printModel,
|
|
t,
|
|
}
|
|
},
|
|
data(this_) {
|
|
console.log(this_);
|
|
|
|
return {
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
upload: {
|
|
isPin: 0,
|
|
level1Type: this_.selectCode,
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
token: "",
|
|
};
|
|
},
|
|
async mounted(){
|
|
this.uploadUrl = getUploadUrl()
|
|
this.getLibraryList()
|
|
this.getSex()
|
|
this.token = getCookie("token") || "";
|
|
},
|
|
methods:{
|
|
|
|
getSex(){
|
|
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
|
|
if (rv) {
|
|
let arr:any = []
|
|
rv.forEach((item:any) => {
|
|
let obj = {
|
|
value:item.name,
|
|
label:item.name,
|
|
}
|
|
arr.push(obj)
|
|
});
|
|
this.sex = arr[0].value
|
|
this.sexList = arr
|
|
this.getPosition()
|
|
}
|
|
})
|
|
},
|
|
async getPosition(){
|
|
let params
|
|
if(this.sex == 'Female'){
|
|
params = 'FemalePosition'
|
|
}else{
|
|
params = 'MalePosition'
|
|
}
|
|
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
|
|
if (rv) {
|
|
let arr:any = []
|
|
rv.forEach((item:any) => {
|
|
let obj = {
|
|
value:item.name,
|
|
label:item.name,
|
|
}
|
|
arr.push(obj)
|
|
});
|
|
this.designType = arr[0].value
|
|
this.disignTypeList = arr
|
|
// this.workspaceItem.position = this.singleTypeList[0].label
|
|
}
|
|
})
|
|
},
|
|
selectMenuItem(menu:any,index:any){
|
|
if(menu.children?.length){ //证明是有子菜单
|
|
menu.showChildren = !menu.showChildren
|
|
}else{
|
|
this.selectCode = menu.code
|
|
this.upload.level1Type = menu.code
|
|
this.currentPage = 1,
|
|
this.total = 0,
|
|
this.searchPictureName = ''
|
|
this.imgList = [],
|
|
this.sex = 'Female',
|
|
this.designType = 'Outwear',
|
|
this.selectImgList = []
|
|
this.selectSingleImg = {}
|
|
this.getLibraryList()
|
|
this.uploadGenerate = 'Upload'
|
|
this.captionGeneration = ''
|
|
this.selectGenerateList = []
|
|
}
|
|
},
|
|
|
|
async sexChange(){
|
|
await this.getPosition()
|
|
this.getLibraryList()
|
|
},
|
|
handleChange(){
|
|
this.getLibraryList()
|
|
},
|
|
|
|
fileUploadChange(data:any){
|
|
let file = data.file
|
|
// let Cropper:any = this.$refs.Cropper
|
|
if(this.selectCode == 'Models'){
|
|
let reader = new FileReader();
|
|
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
|
|
this.getLibraryList()
|
|
},
|
|
|
|
//选择图片
|
|
selectImgItem(imgData:any){
|
|
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)
|
|
}
|
|
},
|
|
|
|
closeRenameModal(){
|
|
this.renameVisivle= false;
|
|
this.newPicName = ''
|
|
},
|
|
|
|
//确定修改名称
|
|
confrimRename(){
|
|
let data = {
|
|
libraryIds:this.renameType === 'single' ? [this.selectSingleImg.id] : this.selectImgList,
|
|
libraryName:this.newPicName,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
}
|
|
Https.axiosPost(Https.httpUrls.batchUpdateLibraryName, data).then(
|
|
(rv: any) => {
|
|
if(this.renameType ==='batch'){
|
|
this.selectImgList = []
|
|
}
|
|
this.getLibraryList()
|
|
this.closeRenameModal()
|
|
}
|
|
).catch((res)=>{
|
|
this.closeRenameModal()
|
|
});
|
|
},
|
|
|
|
//打开修改名称弹窗
|
|
showRenameModal(data:any,type:any){
|
|
if(type =='batch' && !this.selectImgList.length){ //批量但未选中
|
|
return
|
|
}
|
|
if(type === 'single'){
|
|
this.selectSingleImg = data
|
|
}
|
|
this.renameType = type
|
|
this.renameVisivle = true
|
|
},
|
|
upLoad(){
|
|
|
|
},
|
|
uploadGenerateOpen(str:any){
|
|
if(this.uploadGenerate == str){
|
|
this.uploadGenerate = str
|
|
}else{
|
|
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)
|
|
}
|
|
});
|
|
},
|
|
|
|
//批量删除图片
|
|
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){
|
|
let libraryIds = data ? [data.id] : this.selectImgList
|
|
let newData = {
|
|
libraryIds:libraryIds
|
|
}
|
|
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
|
(rv: any) => {
|
|
if(data && data.id){
|
|
this.imgList.splice(index, 1)
|
|
}else{
|
|
this.selectImgList = []
|
|
this.getLibraryList()
|
|
}
|
|
}
|
|
).catch((res)=>{
|
|
});
|
|
},
|
|
|
|
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.warning(this.t('LibraryPage.jsContent3'));
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isLt2M) {
|
|
message.warning(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
|
|
}
|
|
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
|
|
let new_data = {
|
|
file:event.file,
|
|
level1Type:this.selectCode,
|
|
level2Type:designType,
|
|
sex:this.selectCode == 'Models' ? 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()
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getLibraryList(){
|
|
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType : ''
|
|
let data = {
|
|
level1Type:this.selectCode,
|
|
level2Type:designType,
|
|
page:this.currentPage,
|
|
modelSex:this.sex?this.sex:'',
|
|
pictureName:this.searchPictureName,
|
|
size:this.pageSize,
|
|
}
|
|
this.isShowMark = true
|
|
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
|
|
(rv: any) => {
|
|
this.imgList = rv.content
|
|
this.total = rv.total
|
|
this.isShowMark = false
|
|
}
|
|
).catch((res)=>{
|
|
this.isShowMark = false
|
|
});
|
|
},
|
|
|
|
//编辑模特打点
|
|
editPlacementClick(data:any){
|
|
let newData = {
|
|
...data.libraryModelPoint,
|
|
url:data.url,
|
|
}
|
|
this.placementClick(newData)
|
|
},
|
|
|
|
//给模特打点编辑
|
|
placementClick(data:any){
|
|
let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
|
|
placementModal.showPlacementModal(data)
|
|
},
|
|
//generate
|
|
setKeyword(num: any) {
|
|
this.checkbox.forEach((v: any) => {
|
|
v.type = false;
|
|
});
|
|
nextTick().then(()=>{
|
|
this.checkbox[num].type = true
|
|
if(this.checkbox[1].type){
|
|
this.selectGenerateList.forEach((v:any)=>{
|
|
v.checked = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
ifMaximumLength(){
|
|
clearTimeout(this.inputTime)
|
|
this.inputTime = setTimeout(()=>{
|
|
if(this.captionGeneration.split(/\s+/).length > 75){
|
|
this.inputShow = true
|
|
}else{
|
|
this.inputShow = false
|
|
}
|
|
},500)
|
|
},
|
|
generateFileUploadChange(data:any){
|
|
let file = data.file;
|
|
if (file.status === "done") {
|
|
let res = JSON.parse(file.xhr.response);
|
|
file.id = res.data.id;
|
|
file.imgUrl = res.data.url;
|
|
file.resData = res.data;
|
|
file.type_ = "upload";
|
|
} else if (file.status === "error") {
|
|
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.error(file.name + this.t('LibraryPage.jsContent8'));
|
|
}
|
|
},
|
|
deleteFile(index: any) {
|
|
this.selectGenerateList.splice(index, 1);
|
|
|
|
},
|
|
setSketchboardItem(item:any){
|
|
if(this.checkbox[1].type){
|
|
return
|
|
}
|
|
if(item.checked){
|
|
item.checked = false
|
|
}else{
|
|
this.selectGenerateList.forEach((v:any)=>{
|
|
if(v.checked){
|
|
v.checked = false
|
|
}
|
|
})
|
|
item.checked = true
|
|
}
|
|
},
|
|
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(num:any){
|
|
this.printModel = {
|
|
num : num,
|
|
optype:false,
|
|
name:this.t('LibraryPage.model')+num
|
|
}
|
|
},
|
|
getgenerate(){
|
|
let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
|
|
let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
|
|
let data = {
|
|
generateType:generateType,
|
|
designType:'',
|
|
collectionElementId:generageImg?.id,
|
|
level1Type:this.selectCode,
|
|
level2Type:this.selectCode == 'Sketchboard'?this.designType:'',
|
|
text:this.captionGeneration,
|
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
version:this.selectCode == 'Printboard'?this.printModel.num:1,//为1就是Print
|
|
gender:this.selectCode == 'Sketchboard'?this.sex:'',
|
|
}
|
|
if(generateType == 'image'||generateType == 'text-image'){
|
|
if(generageImg?.id){
|
|
|
|
}else{
|
|
message.warning(
|
|
this.t('LibraryPage.jsContent9')
|
|
);
|
|
return
|
|
}
|
|
}else if(generateType == 'text'){
|
|
data.collectionElementId = ''
|
|
data.level2Type = ''
|
|
// this.beforeUpload(false)
|
|
if(this.captionGeneration){
|
|
let arr = this.captionGeneration.split(/\s+/).length
|
|
if(arr > 75){
|
|
message.warning(
|
|
this.t('LibraryPage.jsContent6')
|
|
);
|
|
return
|
|
|
|
}
|
|
}else{
|
|
message.warning(
|
|
this.t('LibraryPage.jsContent7')
|
|
);
|
|
return
|
|
}
|
|
}
|
|
// this.isShowMark = true
|
|
// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
|
// (rv) => {
|
|
// if(rv){
|
|
// let arr
|
|
// rv.generatedCollectionItems.forEach((v:any,index:number)=>{
|
|
// arr = {
|
|
// id:v.generateItemId,
|
|
// imgUrl:v.generateItemUrl,
|
|
// }
|
|
// this.generateList.push(arr)
|
|
// console.log(this.generateList);
|
|
|
|
// })
|
|
// this.isShowMark = false
|
|
// }
|
|
// }
|
|
// ).catch(res=>{
|
|
// this.isShowMark = false
|
|
// });
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less">
|
|
.library_page {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
padding: 0 9rem;
|
|
min-width: 1024px;
|
|
position: relative;
|
|
.page_content {
|
|
position: relative;
|
|
|
|
.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: calc(100% - 7rem);
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
padding-top: 2rem;
|
|
.library_body_left{
|
|
width: 23.5rem;
|
|
height: 100%;
|
|
background: rgba(255,255,255,0.4);
|
|
margin-right: 8rem;
|
|
>div{
|
|
background: #f7f8fa;
|
|
border-radius: 2rem;
|
|
overflow: hidden;
|
|
padding: 2rem 0;
|
|
}
|
|
.library_menu_list{
|
|
padding-left: 2rem;
|
|
.menu_item{
|
|
width: 100%;
|
|
height: 6.8rem;
|
|
display: flex;
|
|
font-weight: 900;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 1rem 0 2.5rem;
|
|
border-left: 0.5rem solid transparent;
|
|
font-size: 1.6rem;
|
|
color: #030303;
|
|
cursor: pointer;
|
|
transition: all .3s;
|
|
|
|
&.child_menu_item{
|
|
padding-left: 6.5rem;
|
|
}
|
|
|
|
&.select_menu_item{
|
|
background: #fff;
|
|
border-radius: 2rem;
|
|
transform: translateX(2rem);
|
|
// background: #E6E6F6;
|
|
// border-color: #343579;;
|
|
}
|
|
|
|
.menu_item_left{
|
|
display: flex;
|
|
align-items: center;
|
|
user-select: none;
|
|
|
|
.fi{
|
|
font-size: 2.2rem;
|
|
display: flex;
|
|
color: #030303;
|
|
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: calc(100% - 23.5rem);
|
|
height: 100%;
|
|
|
|
.header_operate_item{
|
|
margin-right: 5rem;
|
|
color: #C2C2C2;
|
|
font-size: 1.6rem;
|
|
.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: 11rem;
|
|
}
|
|
}
|
|
|
|
.content_search_block{
|
|
display: flex;
|
|
align-items: center;
|
|
.search_input{
|
|
// width: 20.8rem;
|
|
// padding-left: 1.5rem;
|
|
// height: 2.8rem;
|
|
// line-height: 3.6rem;
|
|
// background: #FFFFFF;
|
|
// border: 0.1rem solid #F1F1F1;
|
|
// font-size: 1.6rem;
|
|
// font-weight: 400;
|
|
height: 3rem;
|
|
border-radius: 0.5rem;
|
|
width: 30rem;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
padding-left: 1.5rem;
|
|
border: 0.1rem solid #F1F1F1;
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
&::placeholder {
|
|
color: #C2C2C2;
|
|
}
|
|
}
|
|
|
|
.search_icon_block{
|
|
width: 5.2rem;
|
|
height: 2.8rem;
|
|
line-height: 2.8rem;
|
|
text-align: center;
|
|
background: #343579;
|
|
background-color: #39215b;
|
|
cursor: pointer;
|
|
border-radius: 2rem;
|
|
margin-left: 3rem;
|
|
.icon-sousuo{
|
|
font-size: 1.6rem;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.library_right_header{
|
|
display: flex;
|
|
padding: 0 3.5rem 0 2.8rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(255,255,255,0.4);
|
|
box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);
|
|
|
|
.library_header_left{
|
|
height: 4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.librart_headr_right{
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.select_block{
|
|
// background: #FFFFFF;
|
|
color: #1A1A1A !important;
|
|
.ant-select-selector{
|
|
border: 2px solid !important;
|
|
}
|
|
.ant-select{
|
|
.ant-select-arrow{
|
|
.icon-xiala{
|
|
margin-left: -2rem;
|
|
zoom: .7;
|
|
}
|
|
}
|
|
}
|
|
.icon-xiala{
|
|
color: #1A1A1A !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.libray_right_content{
|
|
width:100%;
|
|
height:calc(100% - 8rem);
|
|
padding: 0.1rem 0 0 0.3rem;
|
|
box-sizing: border-box;
|
|
|
|
.right_content_body{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f6f5fa;
|
|
padding: 0 2rem 5rem 1rem;
|
|
border-radius: 2rem;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.content_body_header{
|
|
height: 10rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
// padding: 2rem 0 2rem 3rem;
|
|
padding-left: 3rem;
|
|
box-sizing: content-box;
|
|
justify-content: space-between;
|
|
.content_body_header_left{
|
|
display: flex;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.input_box{
|
|
background:initial;
|
|
padding: 1.5rem 0;
|
|
input{
|
|
width: 30rem;
|
|
height: 3rem;
|
|
&.active{
|
|
cursor: no-drop;
|
|
}
|
|
}
|
|
.generage_btn{
|
|
margin: 0 3rem;
|
|
}
|
|
}
|
|
.printModel{
|
|
font-size: 1.4rem;
|
|
font-weight: 500;
|
|
>div{
|
|
width: 7rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-radius: 1rem;
|
|
margin: 0;
|
|
border: 2px solid;
|
|
cursor: pointer;
|
|
|
|
}
|
|
ul{
|
|
position: absolute;
|
|
width: 7rem;
|
|
text-align: center;
|
|
margin-top: .3rem;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
z-index: 3;
|
|
li{
|
|
background: #c5c4c8;
|
|
line-height: 2;
|
|
cursor: pointer;
|
|
&.printModel_item:hover{
|
|
background: #949396;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.upload_item{
|
|
margin-left: 4rem;
|
|
.upload_file_item{
|
|
width: 8rem;
|
|
height: 8rem;
|
|
margin: 0;
|
|
margin-right: 2rem;
|
|
}
|
|
.upload_component{
|
|
margin: 0;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
&.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;
|
|
.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;
|
|
}
|
|
|
|
.content_img{
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.board_content_img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&:hover .img_item_hover{
|
|
display: block;
|
|
}
|
|
|
|
.img_item_hover{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top:0;
|
|
background: rgba(0,0,0,0.2);
|
|
display: none;
|
|
|
|
.img_operate_content{
|
|
position: absolute;
|
|
right: 0.6rem;
|
|
top: 0.6rem;
|
|
}
|
|
|
|
.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{
|
|
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;
|
|
|
|
|
|
.rename_form_content{
|
|
|
|
.rename_form_input{
|
|
width: 100%;
|
|
height: 4.6rem;
|
|
margin-top: 1rem;
|
|
border: 0.1rem solid #B4BED7;
|
|
padding-left: 2.1rem;
|
|
line-height: 4.6rem;
|
|
font-size: 1.8rem;
|
|
box-sizing: border-box;
|
|
|
|
&::placeholder {
|
|
color:#A5B0C2,
|
|
}
|
|
}
|
|
}
|
|
|
|
.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> |