feat: design界面printboard选择generate时可从Library选择图片
This commit is contained in:
@@ -39,6 +39,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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
|
<textarea
|
||||||
class="textarea"
|
class="textarea"
|
||||||
@input="ifMaximumLength"
|
@input="ifMaximumLength"
|
||||||
@@ -50,25 +85,7 @@
|
|||||||
@paste="onPaste"
|
@paste="onPaste"
|
||||||
|
|
||||||
></textarea>
|
></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="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-br-expand" @click.stop="setTextareaShow"></i>
|
||||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
|
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
|
||||||
@@ -204,6 +221,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
|
<scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
|
||||||
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
|
||||||
|
<SelectImages
|
||||||
|
radio
|
||||||
|
full-data
|
||||||
|
ref="selectImages"
|
||||||
|
@select="handleImageSelect"
|
||||||
|
:api="Https.httpUrls.queryLibraryPage"
|
||||||
|
isLibrary/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -223,6 +247,7 @@ import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
|||||||
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
import createSlogan from "@/component/HomePage/createSlogan.vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||||
|
import SelectImages from '@/component/common/SelectImages.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
@@ -230,6 +255,7 @@ export default defineComponent({
|
|||||||
generalMenu,
|
generalMenu,
|
||||||
createSlogan,
|
createSlogan,
|
||||||
sketchCategory,
|
sketchCategory,
|
||||||
|
SelectImages
|
||||||
},
|
},
|
||||||
props: ["msg",'sketchCatecoryList','scene','gender'],
|
props: ["msg",'sketchCatecoryList','scene','gender'],
|
||||||
emits:['setLibrary'],
|
emits:['setLibrary'],
|
||||||
@@ -393,6 +419,7 @@ export default defineComponent({
|
|||||||
openSpeed,
|
openSpeed,
|
||||||
setSpeed,
|
setSpeed,
|
||||||
upload,
|
upload,
|
||||||
|
Https
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data(prop) {
|
data(prop) {
|
||||||
@@ -898,6 +925,7 @@ export default defineComponent({
|
|||||||
let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
|
let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
|
||||||
if(paste.length == 0)this.sketchboardList.push(file);
|
if(paste.length == 0)this.sketchboardList.push(file);
|
||||||
this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
|
this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
|
||||||
|
console.log('插入图片',this.sketchboardList)
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
if(this.driver__.driver && this.type_.type2 == 'Printboard'){
|
if(this.driver__.driver && this.type_.type2 == 'Printboard'){
|
||||||
driverObj__.moveNext()
|
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>
|
</style>
|
||||||
|
|||||||
@@ -102,6 +102,14 @@ const props = defineProps({
|
|||||||
isLibrary: {
|
isLibrary: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
radio: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
fullData: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -236,11 +244,18 @@ watch(
|
|||||||
|
|
||||||
// 处理图片点击
|
// 处理图片点击
|
||||||
const handleImageClick = item => {
|
const handleImageClick = item => {
|
||||||
// 已选中,取消选中
|
const isSelected = selectList.value.includes(item.url)
|
||||||
if (selectList.value.includes(item.url)) {
|
|
||||||
selectList.value = selectList.value.filter(url => url !== item.url)
|
if (props.radio) {
|
||||||
|
// 单选模式:选中当前图片或取消选中
|
||||||
|
selectList.value = isSelected ? [] : [item.url]
|
||||||
} else {
|
} 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 = () => {
|
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
|
showPanel.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user