aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

library generate增加删除和拖拽移动位置功能 图片放大添加键盘事件调整按钮大小

Browse Source
This commit is contained in:
X1627315083
2024-04-30 11:45:19 +08:00
parent 09c9b13f0a
commit 05fa4318c3
10 changed files with 179 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/assets/style/style.css
View File

@@ -256,28 +256,35 @@ li {
}
.delete_like_file_block {
display: none;
width: 2.5rem;
height: 2.5rem;
width: 3rem;
height: 3rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 0.4rem;
border-radius: calc(0.4rem*1.2);
position: absolute;
top: 0rem;
right: 0rem;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: 2.5rem;
line-height: 3rem;
left: auto;
cursor: pointer;
}
.delete_like_file_block.left {
left: calc(0.9rem*1.2);
}
.delete_like_file_block.left1 {
left: calc(0.9rem*1.2);
top: 5rem;
}
.delete_like_file_block .icon-shanchu {
font-size: calc(1.6rem*1.2);
color: #fff;
}
.delete_like_file_block i {
font-size: 1.6rem;
font-size: calc(1.4rem);
color: #fff;
}
.delete_like_file_block i.fi-sr-heart {
color: red;
}
.delete_like_file_block.left {
left: 0rem;
}
.progress_mark .mark_content .ant-progress .ant-progress-text .anticon-check {
color: #7a61dc;
}

29
src/assets/style/style.less
View File

@@ -285,19 +285,29 @@ input:focus{
//爱心
.delete_like_file_block{
display: none;
width: 2.5rem;
height: 2.5rem;
width: 3rem;
height: 3rem;
background: rgba(0,0,0,0.6);
border-radius: 0.4rem;
border-radius: calc(0.4rem*1.2);
position: absolute;
top: 0rem;
right: 0rem;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: 2.5rem;
line-height: 3rem;
left: auto;
cursor: pointer;
&.left{
left: calc(.9rem*1.2);
}
&.left1{
left: calc(.9rem*1.2);
top: 5rem;
}
.icon-shanchu{
font-size: calc(1.6rem*1.2);
color: #fff;
}
i{
font-size: 1.6rem;
font-size: calc(1.4rem);
color: #fff;
&.fi-rr-heart{
@@ -306,9 +316,6 @@ input:focus{
color: red;
}
}
&.left{
left: 0rem;
}
}
//design进度100

11
src/component/Detail/DesignDetail.vue
View File

@@ -414,6 +414,7 @@ export default defineComponent({
async (rv: any) => {
rv.clothes.forEach((item:any)=>{
let a
item.designType='Library'
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
a = item.layersObject[0]
item.layersObject[0] = item.layersObject[1]
@@ -421,6 +422,12 @@ export default defineComponent({
}
if(item.printObject.prints == null){
item.printObject.prints = [{}]
}else{
item.printObject.prints.forEach((element:any) => {
if(!element.designType){
element.designType = 'Library'
}
});
}
})
this.currentIndex = 0
@@ -931,6 +938,8 @@ export default defineComponent({
clothesDetail(clothes:any, index:number){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
console.log(designItemDetail);
this.designOrder = true
this.current = designItemDetail.clothes[index]
if(this.current.id && !designItemDetail.clothes[designItemDetail.clothes.length-1].id){
@@ -950,7 +959,7 @@ export default defineComponent({
color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
id:this.current.id?this.current.id:'',
changed:this.current.changed?this.current.changed:false,
designType:this.current.designType?this.current.designType:'Library',
path:this.current.minIOPath?this.current.minIOPath:'',
offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
priority:this.current.priority,

4
src/component/Detail/DesignDetailEnd.vue
View File

@@ -311,7 +311,7 @@ export default defineComponent({
let color = `${this.$parent.selectColor.rgba.r} ${this.$parent.selectColor.rgba.g} ${this.$parent.selectColor.rgba.b}`
data.designSingleItemDTOList[index].color = color
}
data.designSingleItemDTOList[index].designType = this.sketchImg.designType?this.sketchImg.designType:"Library"
data.designSingleItemDTOList[index].designType = this.sketchImg.designType?this.sketchImg.designType:this.current.designType
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
@@ -321,7 +321,7 @@ export default defineComponent({
if(item.type != 'body'){
if(item.id == designItemDetail.clothes[index].id || item.id == this.sketchImg.id_){
designItemDetail.clothes[index].color = item.color
designItemDetail.clothes[index].designType = this.sketchImg.designType?this.sketchImg.designType:'Library'
designItemDetail.clothes[index].designType = item.designType
designItemDetail.clothes[index].layersObject = item.layersObject
designItemDetail.clothes[index].minIOPath = item.minIOPath
designItemDetail.clothes[index].path = item.path

8
src/component/Detail/setDesignItem.vue
View File

@@ -299,7 +299,7 @@ export default defineComponent({
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num+'px'
// height = w*num+'px'
}else if(this.direction == 'top'){
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
@@ -309,19 +309,19 @@ export default defineComponent({
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
height = h+'px'
width = h*num+'px'
// width = h*num+'px'
}else if(this.direction == 'bottom'){
num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
// width = h*num+'px'
}else if(this.direction == 'left'){
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
width = w+'px'
height = w*num+'px'
// height = w*num+'px'
}
//判断尺寸是否到边
this.frontBack.front[this.imgDomIndex].style.width = width

45
src/component/HomePage/Generate.vue
View File

@@ -137,7 +137,7 @@
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<div
class="delete_like_file_block"
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
@@ -146,7 +146,9 @@
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
</div>
@@ -160,8 +162,8 @@
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { message, Upload } from "ant-design-vue";
import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
import { message, Upload, Modal } from "ant-design-vue";
import { defineComponent, computed, createVNode, h, ref, nextTick, inject } from "vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import GO from "@/tool/GO";
@@ -169,6 +171,7 @@ import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
// import { forEach } from "jszip";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
export default defineComponent({
@@ -784,7 +787,21 @@ export default defineComponent({
).catch(res=>{
});
}
},
deleteGenerate(index:any){
if(this.isGenerate)return
let _this = this
Modal.confirm({
title: this.t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.fileList.splice(index,1)
}
});
},
scaleImage(index:any){
let scaleImage:any = this.$refs.scaleImage
@@ -914,24 +931,6 @@ export default defineComponent({
width: calc(10rem*1.2);
height: calc(10rem*1.2);
}
.delete_like_file_block{
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
&.left{
left: calc(.9rem*1.2);
}
i{
font-size: calc(1.6rem*1.2);
color: #fff;
&.fi-rr-heart{
}
&.fi-sr-heart{
color: red;
}
}
}
&:hover .delete_like_file_block{
display: block;
}

56
src/component/HomePage/PrintboardUpload.vue
View File

@@ -132,7 +132,7 @@
<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<div
class="delete_like_file_block"
class="delete_like_file_block left1"
:class="[driver__.driver?'hideEvents':'']"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
@@ -141,6 +141,9 @@
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
</div>
@@ -160,13 +163,13 @@
</div>
</template>
<script lang="ts">
import { defineComponent,h,ref,computed,inject, nextTick } from 'vue'
import { defineComponent,h,ref,computed,inject,createVNode, nextTick } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';
import {getCookie} from '@/tool/cookie'
import {getUploadUrl} from '@/tool/util'
import {useStore} from 'vuex'
import { Https } from "@/tool/https";
import { message,Upload} from 'ant-design-vue';
import { Modal,message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
@@ -174,6 +177,7 @@ import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n';
import { openGuide,driverObj__ } from "@/tool/guide";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import axios from 'axios'
import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
@@ -467,7 +471,21 @@ export default defineComponent({
}
},
deleteGenerate(index:any){
if(this.isGenerate)return
let _this = this
Modal.confirm({
title: this.t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.generateList.splice(index,1)
}
});
},
customRequest(data:any){
let new_data = {
@@ -1110,36 +1128,6 @@ export default defineComponent({
}
}
}
.delete_like_file_block{
display: none;
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6);
border-radius: calc(0.4rem*1.2);
position: absolute;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: calc(3.2rem*1.2);
left: auto;
&.left{
left: calc(.9rem*1.2);
}
.icon-shanchu{
font-size: calc(1.6rem*1.2);
color: #fff;
}
i{
font-size: calc(1.6rem*1.2);
color: #fff;
&.fi-rr-heart{
}
&.fi-sr-heart{
color: red;
}
}
}
.modal_right{
flex: 1;

56
src/component/HomePage/SketchboardUpload.vue
View File

@@ -163,7 +163,7 @@
<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
<div
class="delete_like_file_block"
class="delete_like_file_block left1"
>
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
@@ -171,6 +171,9 @@
<div class="delete_like_file_block left" :class="[driver__.driver?'hideEvents':'']">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
</div>
@@ -193,19 +196,20 @@
</div>
</template>
<script lang="ts">
import { defineComponent, h, ref ,computed,inject, nextTick } from "vue";
import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { getCookie } from "@/tool/cookie";
import { getUploadUrl } from "@/tool/util";
import GO from "@/tool/GO";
import { useStore } from "vuex";
import { message, Upload } from "ant-design-vue";
import { message, Upload, Modal } from "ant-design-vue";
import Material from "@/component/HomePage/Material.vue";
import Generate from "@/component/HomePage/Generate.vue";
import scaleImage from "@/component/HomePage/scaleImage.vue";
import { Https } from "@/tool/https";
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
export default defineComponent({
@@ -567,6 +571,21 @@ export default defineComponent({
});
}
},
deleteGenerate(index:any){
if(this.isGenerate)return
let _this = this
Modal.confirm({
title: this.t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.generateList.splice(index,1)
}
});
},
recollection() {
this.isUseGenerate = false
this.useGenerate = {
@@ -980,37 +999,6 @@ export default defineComponent({
}
}
}
.delete_like_file_block{
display: none;
width: calc(3.2rem*1.2);
height: calc(3.2rem*1.2);
background: rgba(0,0,0,0.6);
border-radius: calc(0.4rem*1.2);
position: absolute;
top: calc(0.9rem*1.2);
right: calc(0.9rem*1.2);
text-align: center;
line-height: calc(3.2rem*1.2);
left: auto;
&.left{
left: calc(.9rem*1.2);
}
.icon-shanchu{
font-size: calc(1.6rem*1.2);
color: #fff;
}
i{
font-size: calc(1.6rem*1.2);
color: #fff;
&.fi-rr-heart{
}
&.fi-sr-heart{
color: red;
}
}
}
.modal_right{
flex: 1;

30
src/component/HomePage/scaleImage.vue
View File

@@ -25,8 +25,10 @@
<i v-if="!scaleImageList[scaleImageIndex]?.like" class="fi fi-rr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'like')"></i>
<i v-else class="fi fi-sr-heart operate_icon" @click.stop="LikeFile(scaleImageList[scaleImageIndex],'noLike')"></i>
</div>
</div>
<div class="scaleImage_nav">
<div class="scaleImage_nav" @keydown="handleKeyDown">
<div class="nav_left">
<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
</div>
@@ -118,11 +120,13 @@ export default defineComponent({
this.scaleImageIndex = index
if(dialogueIndex)this.robotAssits = dialogueIndex
// let scaleImageList = this.store.state.UploadFilesModule.moodboard
document.addEventListener('keydown',this.setKeydown)
},
cancelDsign(){
this.scaleImage = false
this.scaleImageList = []
this.scaleImageIndex = 0
document.removeEventListener('keydown',this.setKeydown)
},
lastStep(){
@@ -150,7 +154,13 @@ export default defineComponent({
}else{
parent.likeFile(item,str)
}
},
setKeydown(event:any){
if(event.keyCode == 37){
this.lastStep()
}else if(event.keyCode == 39){
this.nextStep()
}
}
},
});
@@ -177,6 +187,9 @@ export default defineComponent({
.ant-modal-btn{
}
.fi-rr-down-to-line,.fi-rr-arrow-small-right,.fi-rr-arrow-small-left{
font-size: 2rem;
}
.scaleImage_btn {
.collection_closeIcon{
position: absolute;
@@ -219,7 +232,6 @@ export default defineComponent({
margin-top: calc(5rem*1.2);
position: relative;
max-width: calc(50rem*1.2);
img{
width: auto;
height: 100%;
@@ -249,6 +261,7 @@ export default defineComponent({
color: #fff;
}
}
}
.scaleImage_content:hover{
.img_operate_block{
@@ -264,11 +277,22 @@ export default defineComponent({
width: 100%;
.nav_left,.nav_right{
cursor: pointer;
top: 50%;
i{
display: flex;
font-size: 4rem;
transition: .3s all;
color: rgba(0, 0, 0, .5);
}
}
// .nav_left{
// left: 0;
// transform: translate(-200%,-50%);
// }
// .nav_right{
// right: 0;
// transform: translate(200%,-50%);
// }
.nav_left:hover,.nav_right:hover{
i{
color: rgba(0, 0, 0, 1);

39
src/views/HomeView/library.vue
View File

@@ -287,21 +287,25 @@
</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'">
<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">
<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" @click.stop="likeFile(img,'noLike')"></i>
<div class="img_operate_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
<span class="icon iconfont icon-shanchu operate_icon"></span>
</div>
</div>
<div class="img_operate_content left" :class="[driver__.driver?'hideEvents':'']">
<div class="img_operate_block">
<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
</div>
<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" @click.stop="likeFile(img,'noLike')"></i>
</div>
</div>
</div>
@@ -474,6 +478,7 @@ export default defineComponent({
Printboard:'',
Models:''
})
let dragIdx:any=ref(0)
let getLibraryListInputTime:any = ref()
const options:any = ref([
]);
@@ -522,6 +527,7 @@ export default defineComponent({
isGenerate,
remGenerate,
remGenerateTime,
dragIdx,
getLibraryListInputTime,
props,
options,
@@ -785,7 +791,30 @@ export default defineComponent({
}
});
},
deleteGenerate(index:any){
if(this.isGenerate[this.selectCode])return
let _this = this
Modal.confirm({
title: this.t('LibraryPage.jsContent1'),
icon: createVNode(ExclamationCircleOutlined),
okText: 'Yes',
cancelText: 'No',
mask:false,
centered:true,
onOk() {
_this.generateList[_this.selectCode].splice(index,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){