Merge pull request #12535 from dataease/pr@dev-v2_st

feat(查询组件): 查询组件可以上传图片当作背景 #11585

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -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 {

core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue

@@ -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 = {
+const styleActiveNames = ref(['basicStyle'])
-  styleActiveNames: ['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 {