forked from github/dataease
Merge pull request #12535 from dataease/pr@dev-v2_st
feat(查询组件): 查询组件可以上传图片当作背景 #11585
This commit is contained in:
dataeaseShu
GitHub
commit
4c89fb4f51
@ -869,7 +869,7 @@ const componentBackgroundStyle = computed(() => {
|
||||
if (backgroundColorSelect && backgroundColor) {
|
||||
colorRGBA = backgroundColor
|
||||
}
|
||||
if (backgroundImageEnable) {
|
||||
if (backgroundImageEnable || (element.value.innerType === 'VQuery' && backgroundColorSelect)) {
|
||||
if (backgroundType === 'outerImage' && typeof outerImage === 'string') {
|
||||
style['background'] = `url(${imgUrlTrans(outerImage)}) no-repeat ${colorRGBA}`
|
||||
} else {
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
<script lang="tsx" setup>
|
||||
import { ElMessage } from 'element-plus-secondary'
|
||||
import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
|
||||
import { beforeUploadCheck, uploadFileResult } from '@/api/staticResource'
|
||||
import ImgViewDialog from '@/custom-component/ImgViewDialog.vue'
|
||||
import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
|
||||
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
|
||||
import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { PropType, toRefs, computed } from 'vue'
|
||||
import { PropType, toRefs, computed, reactive, watch, ref, onMounted } from 'vue'
|
||||
import { imgUrlTrans } from '@/utils/imgUtils'
|
||||
import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
|
||||
import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
|
||||
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
const { t } = useI18n()
|
||||
const state = {
|
||||
styleActiveNames: ['basicStyle']
|
||||
}
|
||||
const styleActiveNames = ref(['basicStyle'])
|
||||
|
||||
const props = defineProps({
|
||||
element: {
|
||||
@ -41,6 +44,71 @@ for (let i = 10; i <= 60; i = i + 2) {
|
||||
value: i + ''
|
||||
})
|
||||
}
|
||||
const snapshotStore = snapshotStoreWithOut()
|
||||
const files = ref(null)
|
||||
|
||||
const state = reactive({
|
||||
commonBackground: {},
|
||||
fileList: [],
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.commonBackgroundPop,
|
||||
() => {
|
||||
init()
|
||||
}
|
||||
)
|
||||
|
||||
const init = () => {
|
||||
state.commonBackground = cloneDeep(props.commonBackgroundPop)
|
||||
if (state.commonBackground['outerImage']) {
|
||||
state.fileList.push({ url: imgUrlTrans(state.commonBackground['outerImage']) })
|
||||
} else {
|
||||
state.fileList = []
|
||||
}
|
||||
}
|
||||
const handleRemove = () => {
|
||||
state.commonBackground['outerImage'] = null
|
||||
state.fileList = []
|
||||
onBackgroundChange()
|
||||
}
|
||||
const handlePictureCardPreview = file => {
|
||||
state.dialogImageUrl = file.url
|
||||
state.dialogVisible = true
|
||||
}
|
||||
const upload = file => {
|
||||
return uploadFileResult(file.file, fileUrl => {
|
||||
state.commonBackground['outerImage'] = fileUrl
|
||||
state.fileList = [{ url: imgUrlTrans(state.commonBackground['outerImage']) }]
|
||||
onBackgroundChange()
|
||||
})
|
||||
}
|
||||
const goFile = () => {
|
||||
files.value.click()
|
||||
}
|
||||
|
||||
const onBackgroundChange = () => {
|
||||
snapshotStore.recordSnapshotCache()
|
||||
commonBackgroundPop.value.outerImage = state.commonBackground['outerImage']
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
const reUpload = e => {
|
||||
const file = e.target.files[0]
|
||||
if (file.size > 15000000) {
|
||||
ElMessage.success('图片大小不符合')
|
||||
return
|
||||
}
|
||||
uploadFileResult(file, fileUrl => {
|
||||
state.commonBackground['outerImage'] = fileUrl
|
||||
state.fileList = [{ url: imgUrlTrans(state.commonBackground['outerImage']) }]
|
||||
onBackgroundChange()
|
||||
})
|
||||
}
|
||||
|
||||
const checkBold = type => {
|
||||
if (!chart.value.customStyle.component.labelShow) return
|
||||
@ -82,8 +150,21 @@ if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
|
||||
|
||||
<template>
|
||||
<div class="attr-style">
|
||||
<input
|
||||
id="input"
|
||||
ref="files"
|
||||
type="file"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
hidden
|
||||
@click="
|
||||
e => {
|
||||
e.target.value = ''
|
||||
}
|
||||
"
|
||||
@change="reUpload"
|
||||
/>
|
||||
<el-row class="de-collapse-style">
|
||||
<el-collapse v-model="state.styleActiveNames" class="style-collapse">
|
||||
<el-collapse v-model="styleActiveNames" class="style-collapse">
|
||||
<el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
|
||||
<el-form label-position="top">
|
||||
<el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
|
||||
@ -131,6 +212,82 @@ if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="padding-left: 20px"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<el-radio-group
|
||||
:disabled="!commonBackgroundPop.backgroundColorSelect"
|
||||
:effect="themes"
|
||||
v-model="commonBackgroundPop.backgroundType"
|
||||
>
|
||||
<el-radio
|
||||
key="innerImage"
|
||||
v-if="commonBackgroundPop.backgroundType === 'innerImage'"
|
||||
label="innerImage"
|
||||
:effect="themes"
|
||||
>
|
||||
背景颜色
|
||||
</el-radio>
|
||||
<el-radio key="color" v-else label="color" :effect="themes"> 背景颜色 </el-radio>
|
||||
<el-radio label="outerImage" :effect="themes"> 背景图片 </el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="commonBackgroundPop.backgroundType === 'outerImage'"
|
||||
style="padding-left: 20px"
|
||||
class="form-item margin-bottom-8"
|
||||
:class="'form-item-' + themes"
|
||||
>
|
||||
<div
|
||||
class="indented-item"
|
||||
:class="{
|
||||
disabled: !commonBackgroundPop.backgroundColorSelect
|
||||
}"
|
||||
>
|
||||
<div class="avatar-uploader-container" :class="`img-area_${themes}`">
|
||||
<el-upload
|
||||
action=""
|
||||
:effect="themes"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
class="avatar-uploader"
|
||||
list-type="picture-card"
|
||||
:on-preview="handlePictureCardPreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-upload="beforeUploadCheck"
|
||||
:http-request="upload"
|
||||
:file-list="state.fileList"
|
||||
:disabled="!commonBackgroundPop.backgroundColorSelect"
|
||||
>
|
||||
<el-icon><Plus /></el-icon>
|
||||
</el-upload>
|
||||
<el-row>
|
||||
<span
|
||||
style="margin-top: 2px"
|
||||
v-if="!state.commonBackground['outerImage']"
|
||||
class="image-hint"
|
||||
:class="`image-hint_${themes}`"
|
||||
>
|
||||
支持JPG、PNG、GIF、SVG
|
||||
</span>
|
||||
|
||||
<el-button
|
||||
size="small"
|
||||
style="margin: 8px 0 0 -4px"
|
||||
v-if="state.commonBackground['outerImage']"
|
||||
text
|
||||
:disabled="!commonBackgroundPop.backgroundColorSelect"
|
||||
@click="goFile"
|
||||
>
|
||||
重新上传
|
||||
</el-button>
|
||||
</el-row>
|
||||
</div>
|
||||
<img-view-dialog v-model="state.dialogVisible" :image-url="state.dialogImageUrl" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else
|
||||
class="form-item"
|
||||
style="padding-left: 20px"
|
||||
:class="'form-item-' + themes"
|
||||
@ -494,6 +651,85 @@ if (!chart.value.customStyle.component.hasOwnProperty('placeholderShow')) {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.indented-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.fill {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
color: #8f959e;
|
||||
|
||||
:deep(.avatar-uploader) {
|
||||
width: 90px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:deep(.ed-upload--picture-card) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.img-area_dark {
|
||||
:deep(.ed-upload--picture-card) {
|
||||
.ed-icon {
|
||||
color: #5f5f5f;
|
||||
}
|
||||
}
|
||||
}
|
||||
.img-area_light {
|
||||
:deep(.ed-upload--picture-card) {
|
||||
.ed-icon {
|
||||
color: #bbbfc4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ed-icon {
|
||||
color: #8f959e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
width: 90px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 90px;
|
||||
:deep(.ed-upload) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
:deep(.ed-upload-list li) {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
}
|
||||
|
||||
:deep(.ed-upload--picture-card) {
|
||||
background: #eff0f1;
|
||||
border: 1px dashed #dee0e3;
|
||||
border-radius: 4px;
|
||||
|
||||
.ed-icon {
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.ed-icon {
|
||||
color: var(--ed-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user