2023-10-20
This commit is contained in:
@@ -31,14 +31,14 @@
|
||||
showQuickJumper:true,
|
||||
bordered:false
|
||||
}">
|
||||
<template v-slot:action="{record, index}" >
|
||||
<div class="operate_list">
|
||||
<div class="operate_item" @click="turnToDetail(record)">Detail</div>
|
||||
<div class="operate_item" @click="renameCollection(record,index)">Rename</div>
|
||||
<div class="operate_item" @click="retrieveHome(record)">Retrieve</div>
|
||||
<div class="operate_item" @click="deleteGroup(record, index)">Delete</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #bodyCell="{ column, text, record ,index}">
|
||||
<div class="operate_list" v-if="column.title === 'Operations'">
|
||||
<div class="operate_item" @click="turnToDetail(record)">Detail</div>
|
||||
<div class="operate_item" @click="renameCollection(record,index)">Rename</div>
|
||||
<div class="operate_item" @click="retrieveHome(record)">Retrieve</div>
|
||||
<div class="operate_item" @click="deleteGroup(record, index)">Delete</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -95,7 +95,7 @@ export default defineComponent({
|
||||
align:'center',
|
||||
fixed: 'right',
|
||||
width: 150,
|
||||
slots:{customRender:'action'}
|
||||
// slots:{customRender:'action'}
|
||||
},
|
||||
]);
|
||||
let collectionList:any = ref([])
|
||||
@@ -228,6 +228,10 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
overflow: hidden;
|
||||
min-width: 1024px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.page_content {
|
||||
position: relative;
|
||||
|
||||
|
||||
@@ -922,6 +922,7 @@ export default defineComponent({
|
||||
|
||||
//通过url 转为blob格式的数据
|
||||
getImgArrayBuffer(url: any) {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
//通过请求获取文件blob格式
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
@@ -963,7 +964,7 @@ export default defineComponent({
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
_this.message.warning("Failed to export the file");
|
||||
message.warning("Failed to export the file");
|
||||
this.isShowMark = false;
|
||||
});
|
||||
},
|
||||
@@ -976,6 +977,11 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
overflow: hidden;
|
||||
min-width: 1024px;
|
||||
position: relative;
|
||||
// left: 50%;
|
||||
// margin-left: -50%;
|
||||
// transform: translateX(-50%);
|
||||
.page_content {
|
||||
position: relative;
|
||||
.page_content_body {
|
||||
@@ -1012,7 +1018,7 @@ export default defineComponent({
|
||||
position: relative;
|
||||
background: #f7f8fa;
|
||||
border: 1px solid #f2f2f9;
|
||||
border-radius: 10px;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
|
||||
.home_null_icon {
|
||||
@@ -1141,7 +1147,7 @@ export default defineComponent({
|
||||
.right_content_img_block {
|
||||
// overflow-y: auto;
|
||||
background: #f6f6fa;
|
||||
border-radius: 1rem;
|
||||
border-radius: 2rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: auto;
|
||||
@@ -1271,6 +1277,7 @@ export default defineComponent({
|
||||
|
||||
.ant-modal-mask{
|
||||
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
|
||||
min-width: 1024px;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
height: calc(100% - 7rem);
|
||||
@@ -1280,6 +1287,13 @@ export default defineComponent({
|
||||
}
|
||||
.ant-modal-centered{
|
||||
top: 7rem;
|
||||
min-width: 1024px;
|
||||
// left: 50%;
|
||||
// margin-left: -50%;
|
||||
.ant-modal{
|
||||
min-width: .65*1024px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,37 +1,40 @@
|
||||
<template>
|
||||
<div class="library_page">
|
||||
<div class="page_content">
|
||||
<img
|
||||
<!-- <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 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">
|
||||
<div :class="['icon','iconfont',menu.icon,'type_icon']"></div>
|
||||
<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 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 operate_select">
|
||||
<div class="header_operate_item pointer" :class="{operate_select:uploadGenerate == 'Upload'}" @click="uploadGenerateOpen('Upload')">
|
||||
<a-upload
|
||||
v-show="uploadGenerate == 'Upload'"
|
||||
:before-upload="beforeUpload"
|
||||
:customRequest="selectCode != 'Models' ? customRequest : function(){}"
|
||||
:customRequest="customRequest "
|
||||
:multiple="selectCode != 'Models'"
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@@ -39,15 +42,9 @@
|
||||
>
|
||||
<div>Upload</div>
|
||||
</a-upload>
|
||||
<div v-show="uploadGenerate != 'Upload'">Upload</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div :class="['header_operate_item',selectImgList.length>0?'operate_select':'']" @click="deleteBatchPic()">Delete</div>
|
||||
<div :class="['header_operate_item',selectImgList.length>0?'operate_select':'']" @click="showRenameModal('','batch')">Rename</div>
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Search by your style code" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||
</div>
|
||||
<div v-show="selectCode != 'Models'" class='header_operate_item pointer' :class="{operate_select:uploadGenerate == 'Generate'}" @click="uploadGenerateOpen('Generate')">Generate</div>
|
||||
</div>
|
||||
|
||||
<div class="librart_headr_right">
|
||||
@@ -83,8 +80,20 @@
|
||||
</div>
|
||||
|
||||
<div class="libray_right_content">
|
||||
<div class="right_content_body">
|
||||
<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()">Delete</div>
|
||||
<div :class="['header_operate_item' , 'fontSize',selectImgList.length>0?'active':'']" @click="showRenameModal('','batch')">Rename</div>
|
||||
</div>
|
||||
<div class="content_search_block">
|
||||
<input class="search_input" placeholder="Search by your style code" 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>all</div>
|
||||
@@ -128,6 +137,131 @@
|
||||
/>
|
||||
</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>Image Only</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxItem">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[1].type"
|
||||
@click="setKeyword(1)"
|
||||
/>
|
||||
<span>Text Only</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxItem">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="checkbox[2].type"
|
||||
@click="setKeyword(2)"
|
||||
/>
|
||||
<span>Text-Image</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="Promopt input" v-model="captionGeneration">
|
||||
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
|
||||
<span>The entered content exceeds the maximum length.</span>
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -167,7 +301,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent ,ref,createVNode} from 'vue'
|
||||
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';
|
||||
@@ -177,6 +312,7 @@ 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";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
HeaderComponent,
|
||||
@@ -186,18 +322,19 @@ export default defineComponent({
|
||||
},
|
||||
setup() {
|
||||
let menuList = ref([
|
||||
{title:'Moodboard',code:'Moodboard',icon:'icon-moban',showChildren:false,children:[]},
|
||||
{title:'Printboard',code:'Printboard',icon:'icon-dayin-dayinji',showChildren:false,children:[]},
|
||||
{title:'Sketchboard',code:'SketchboardFirst',icon:'icon-sumiao',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
|
||||
{title:'Moodboard',code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
|
||||
{title:'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:'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:'Mannequin',code:'Models',icon:'icon-mote',showChildren:false,children:[]},
|
||||
{title:'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('Outwear')
|
||||
let sex:any = ref('Meal')
|
||||
let sexList:any = [
|
||||
|
||||
]
|
||||
@@ -216,6 +353,27 @@ export default defineComponent({
|
||||
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([])
|
||||
let selectGenerateList:any = ref([])
|
||||
return {
|
||||
menuList,
|
||||
selectImgList,
|
||||
@@ -236,13 +394,40 @@ export default defineComponent({
|
||||
currentUploadFileNum,
|
||||
isShowMark,
|
||||
selectSingleImg,
|
||||
store
|
||||
store,
|
||||
uploadGenerate,
|
||||
checkbox,
|
||||
inputShow,
|
||||
generateCheckbox,
|
||||
captionGeneration,
|
||||
inputTime,
|
||||
generateList,
|
||||
selectGenerateList,
|
||||
}
|
||||
},
|
||||
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:{
|
||||
|
||||
@@ -291,6 +476,7 @@ export default defineComponent({
|
||||
menu.showChildren = !menu.showChildren
|
||||
}else{
|
||||
this.selectCode = menu.code
|
||||
this.upload.level1Type = menu.code
|
||||
this.currentPage = 1,
|
||||
this.total = 0,
|
||||
this.searchPictureName = ''
|
||||
@@ -300,6 +486,9 @@ export default defineComponent({
|
||||
this.selectImgList = []
|
||||
this.selectSingleImg = {}
|
||||
this.getLibraryList()
|
||||
this.uploadGenerate = 'Upload'
|
||||
this.captionGeneration = ''
|
||||
this.selectGenerateList = []
|
||||
}
|
||||
},
|
||||
|
||||
@@ -397,7 +586,16 @@ export default defineComponent({
|
||||
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
|
||||
@@ -459,30 +657,41 @@ export default defineComponent({
|
||||
if (!isLt2M) {
|
||||
message.warning('Image must smaller than 2MB!');
|
||||
}
|
||||
this.currentUploadFileNum = fileList.length
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
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.sex,
|
||||
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) => {
|
||||
this.currentUploadFileNum --
|
||||
if(!this.currentUploadFileNum){
|
||||
this.getLibraryList()
|
||||
}
|
||||
|
||||
if(!rv.checkMd5){
|
||||
this.affirmCstomRequest(new_data)
|
||||
}else{
|
||||
this.currentUploadFileNum --
|
||||
if(!this.currentUploadFileNum){
|
||||
this.getLibraryList()
|
||||
}
|
||||
}
|
||||
}
|
||||
).catch((res)=>{
|
||||
this.currentUploadFileNum --
|
||||
@@ -491,7 +700,39 @@ export default defineComponent({
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
affirmCstomRequest(data:any){
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: 'This picture has been uploaded whether to continue uploading？ ',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
// 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 = {
|
||||
@@ -528,7 +769,130 @@ export default defineComponent({
|
||||
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 + "upload failed");
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
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:2,//为1就是Print
|
||||
gender:this.selectCode == 'Sketchboard'?this.sex:'',
|
||||
}
|
||||
if(generateType == 'image'||generateType == 'text-image'){
|
||||
if(generageImg.id){
|
||||
|
||||
}else{
|
||||
message.warning(
|
||||
"Please select a picture"
|
||||
);
|
||||
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(
|
||||
"The entered content exceeds the maximum length."
|
||||
);
|
||||
return
|
||||
|
||||
}
|
||||
}else{
|
||||
message.warning(
|
||||
"Please enter content"
|
||||
);
|
||||
return
|
||||
}
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
(rv) => {
|
||||
if(rv){
|
||||
this.generateList = []
|
||||
let arr
|
||||
rv.generatedCollectionItems.forEach((v:any,index:number)=>{
|
||||
arr = {
|
||||
id:rv.generatedCollectionItems[index].generateItemId,
|
||||
imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
|
||||
}
|
||||
this.generateList.push(arr)
|
||||
})
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -538,6 +902,10 @@ export default defineComponent({
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
padding: 0 9rem;
|
||||
min-width: 1024px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.page_content {
|
||||
position: relative;
|
||||
|
||||
@@ -552,39 +920,53 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.library_page_body{
|
||||
width: 100%;
|
||||
height: calc(100% - 7rem);
|
||||
// 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.8rem;
|
||||
font-size: 1.6rem;
|
||||
color: #030303;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
|
||||
&.child_menu_item{
|
||||
padding-left: 6.5rem;
|
||||
}
|
||||
|
||||
&.select_menu_item{
|
||||
background: #E6E6F6;
|
||||
border-color: #343579;;
|
||||
background: #fff;
|
||||
border-radius: 2rem;
|
||||
transform: translateX(2rem);
|
||||
// background: #E6E6F6;
|
||||
// border-color: #343579;;
|
||||
}
|
||||
|
||||
.menu_item_left{
|
||||
@@ -592,8 +974,9 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
.type_icon{
|
||||
.fi{
|
||||
font-size: 2.2rem;
|
||||
display: flex;
|
||||
color: #030303;
|
||||
margin-right: 1.8rem;
|
||||
}
|
||||
@@ -613,6 +996,80 @@ export default defineComponent({
|
||||
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;
|
||||
@@ -622,64 +1079,15 @@ export default defineComponent({
|
||||
box-shadow: 0 0.2rem 0.8rem 0 rgba(238,238,244,0.25);
|
||||
|
||||
.library_header_left{
|
||||
height: 8rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header_operate_item{
|
||||
margin-right: 5rem;
|
||||
color: #C2C2C2;
|
||||
font-size: 1.6rem;
|
||||
|
||||
.ant-upload-list-text{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.operate_select{
|
||||
color:#333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-right: 11rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content_search_block{
|
||||
margin-left: 4rem;
|
||||
display: flex;
|
||||
|
||||
.search_input{
|
||||
width: 32.8rem;
|
||||
padding-left: 1.5rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.6rem;
|
||||
background: #FFFFFF;
|
||||
border: 0.1rem solid #F1F1F1;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
&::placeholder {
|
||||
color: #C2C2C2;
|
||||
}
|
||||
}
|
||||
|
||||
.search_icon_block{
|
||||
width: 7.2rem;
|
||||
height: 4.8rem;
|
||||
line-height: 4.8rem;
|
||||
text-align: center;
|
||||
background: #343579;
|
||||
cursor: pointer;
|
||||
|
||||
.icon-sousuo{
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.librart_headr_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -687,6 +1095,9 @@ export default defineComponent({
|
||||
.select_block{
|
||||
// background: #FFFFFF;
|
||||
color: #1A1A1A !important;
|
||||
.ant-select-selector{
|
||||
border: 2px solid !important;
|
||||
}
|
||||
.ant-select{
|
||||
.ant-select-arrow{
|
||||
.icon-xiala{
|
||||
@@ -711,15 +1122,28 @@ export default defineComponent({
|
||||
.right_content_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(246,246,250,0.4);
|
||||
background: #f6f5fa;
|
||||
padding: 0 2rem 5rem 1rem;
|
||||
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.content_body_header{
|
||||
height: 7.5rem;
|
||||
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: 40rem;
|
||||
}
|
||||
.check_all_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -746,29 +1170,83 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
&.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-left: 3rem;
|
||||
}
|
||||
}
|
||||
.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_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: 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;
|
||||
}
|
||||
@@ -844,6 +1322,7 @@ export default defineComponent({
|
||||
.table_pagination{
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user