feat: design界面printboard选择generate时可从Library选择图片
This commit is contained in:
@@ -39,6 +39,41 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-dropdown>
|
||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<a-upload
|
||||
class="search_upImg"
|
||||
:capture="null"
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:maxCount='1'
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="sketchboardList"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<div class="drop-container">
|
||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
|
||||
<div>{{ $t('PrintboardUpload.Upload') }}</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<div class="drop-container" @click.stop="handleOpenLibrarySelect">
|
||||
<i class="fi fi-rr-followcollection"></i>
|
||||
<div>{{ $t('PrintboardUpload.Library') }}</div>
|
||||
</div>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<textarea
|
||||
class="textarea"
|
||||
@input="ifMaximumLength"
|
||||
@@ -50,25 +85,7 @@
|
||||
@paste="onPaste"
|
||||
|
||||
></textarea>
|
||||
<i class="fi fi-rr-followcollection"></i>
|
||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
||||
<a-upload
|
||||
class="search_upImg"
|
||||
:capture="null"
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:maxCount='1'
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="sketchboardList"
|
||||
:before-upload="beforeUpload"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
</a-upload>
|
||||
</i>
|
||||
|
||||
<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
|
||||
<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
|
||||
@@ -204,6 +221,13 @@
|
||||
</div>
|
||||
<scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
|
||||
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
||||
<SelectImages
|
||||
radio
|
||||
full-data
|
||||
ref="selectImages"
|
||||
@select="handleImageSelect"
|
||||
:api="Https.httpUrls.queryLibraryPage"
|
||||
isLibrary/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -223,6 +247,7 @@ import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
||||
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
import SelectImages from '@/component/common/SelectImages.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -230,6 +255,7 @@ export default defineComponent({
|
||||
generalMenu,
|
||||
createSlogan,
|
||||
sketchCategory,
|
||||
SelectImages
|
||||
},
|
||||
props: ["msg",'sketchCatecoryList','scene','gender'],
|
||||
emits:['setLibrary'],
|
||||
@@ -393,6 +419,7 @@ export default defineComponent({
|
||||
openSpeed,
|
||||
setSpeed,
|
||||
upload,
|
||||
Https
|
||||
};
|
||||
},
|
||||
data(prop) {
|
||||
@@ -898,6 +925,7 @@ export default defineComponent({
|
||||
let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
|
||||
if(paste.length == 0)this.sketchboardList.push(file);
|
||||
this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
|
||||
console.log('插入图片',this.sketchboardList)
|
||||
nextTick().then(()=>{
|
||||
if(this.driver__.driver && this.type_.type2 == 'Printboard'){
|
||||
driverObj__.moveNext()
|
||||
@@ -1038,6 +1066,22 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
handleOpenLibrarySelect(){
|
||||
let selectImages:any = this.$refs.selectImages
|
||||
selectImages.init()
|
||||
},
|
||||
handleImageSelect(data:any){
|
||||
const file={
|
||||
status: 'done',
|
||||
...data,
|
||||
errCode:0,
|
||||
imgUrl:data.url,
|
||||
xhr:{
|
||||
response:JSON.stringify({...data,errCode:0,imgUrl:data.url,status:'done'})
|
||||
}
|
||||
}
|
||||
this.sketchboardList = [file]
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -1180,6 +1224,22 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search_upImg :deep(.ant-upload.ant-upload-select-picture-card){
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drop-container{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
padding: 0.25rem 0.3rem 0.25rem;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -102,6 +102,14 @@ const props = defineProps({
|
||||
isLibrary: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
radio: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
fullData: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@@ -236,11 +244,18 @@ watch(
|
||||
|
||||
// 处理图片点击
|
||||
const handleImageClick = item => {
|
||||
// 已选中,取消选中
|
||||
if (selectList.value.includes(item.url)) {
|
||||
selectList.value = selectList.value.filter(url => url !== item.url)
|
||||
const isSelected = selectList.value.includes(item.url)
|
||||
|
||||
if (props.radio) {
|
||||
// 单选模式:选中当前图片或取消选中
|
||||
selectList.value = isSelected ? [] : [item.url]
|
||||
} else {
|
||||
selectList.value.push(item.url)
|
||||
// 多选模式:切换选中状态
|
||||
if (isSelected) {
|
||||
selectList.value = selectList.value.filter(url => url !== item.url)
|
||||
} else {
|
||||
selectList.value.push(item.url)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -262,7 +277,15 @@ const handleImageError = event => {
|
||||
}
|
||||
|
||||
const confirm = () => {
|
||||
emits('select', selectList.value)
|
||||
// console.log('selectList.value',selectList.value,'list.value',list.value)
|
||||
let emitData = null
|
||||
if (props.fullData) {
|
||||
const selected = list.value.filter(item => selectList.value.includes(item.url))
|
||||
emitData = props.radio ? selected[0] : selected
|
||||
} else {
|
||||
emitData = selectList.value
|
||||
}
|
||||
emits('select', emitData)
|
||||
showPanel.value = false
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user