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

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);