From 7370a66c91e66ce7d691f6fb108ca236acabb2d5 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 14 May 2024 14:21:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E6=BA=90):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8DAPI=E6=95=B0=E6=8D=AE=E6=BA=90=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=87=8F=E8=BE=83=E5=A4=A7=E6=97=B6=E9=A1=B5=E9=9D=A2=E5=8F=91?=
 =?UTF-8?q?=E7=94=9F=E5=8D=A1=E9=A1=BF=E5=AF=BC=E8=87=B4=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E8=B7=B3=E8=BD=AC=E5=88=B0=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=EF=BC=8C=E9=9A=8F=E5=90=8E=E6=B2=A1=E6=9C=89=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E6=88=90=E5=8A=9F=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/editor-style/VQueryChartStyle.vue  | 31 +++++++++++++++++--
 .../views/chart/components/editor/index.vue   |  6 +++-
 .../visualized/data/dataset/form/AddSql.vue   |  2 ++
 .../datasource/form/ApiHttpRequestDraw.vue    | 14 +++++++--
 4 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index 4d914de2eb..08dcd0a708 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -13,6 +13,10 @@ const props = defineProps({
     type: Object,
     required: true
   },
+  commonBackgroundPop: {
+    type: Object,
+    required: true
+  },
   themes: {
     type: String as PropType<EditorTheme>,
     default: 'dark'
@@ -20,7 +24,7 @@ const props = defineProps({
 })
 const predefineColors = COLOR_PANEL
 
-const { chart } = toRefs(props)
+const { chart, commonBackgroundPop } = toRefs(props)
 </script>
 
 <template>
@@ -64,6 +68,29 @@ const { chart } = toRefs(props)
                 :predefine="COLOR_PANEL"
               />
             </el-form-item>
+            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
+              <el-checkbox
+                :effect="themes"
+                size="small"
+                v-model="commonBackgroundPop.backgroundColorSelect"
+              >
+                自定义组件背景
+              </el-checkbox>
+            </el-form-item>
+            <el-form-item
+              class="form-item"
+              style="padding-left: 20px"
+              :class="'form-item-' + themes"
+            >
+              <el-color-picker
+                :effect="themes"
+                :trigger-width="108"
+                is-custom
+                v-model="commonBackgroundPop.backgroundColor"
+                :disabled="!commonBackgroundPop.backgroundColorSelect"
+                :predefine="predefineColors"
+              />
+            </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"
@@ -139,7 +166,7 @@ const { chart } = toRefs(props)
                 size="small"
                 v-model="chart.customStyle.component.bgColorShow"
               >
-                {{ t('chart.custom_case') + t('chart.backgroundColor') }}
+                自定义查询条件背景
               </el-checkbox>
             </el-form-item>
             <el-form-item
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index f8ef28dcc3..5112ae7d92 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1517,7 +1517,11 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
           <el-row style="height: calc(100vh - 110px); overflow-y: auto">
             <div class="query-style-tab" v-if="view.type === 'VQuery'">
               <div style="padding-top: 1px">
-                <VQueryChartStyle :chart="view" :themes="themes" />
+                <VQueryChartStyle
+                  :common-background-pop="curComponent?.commonBackground"
+                  :chart="view"
+                  :themes="themes"
+                />
               </div>
             </div>
             <el-tabs
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index fa5f8090d2..a28565f4aa 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -1211,7 +1211,9 @@ const mousedownDrag = () => {
 
     .ed-input-group__prepend {
       padding: 0 11px;
+      margin-right: -1px;
       .ed-select {
+        width: 178px !important;
         margin: 0 -10px 0 -10px;
       }
     }
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
index 28de74dae1..268705ecd7 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
@@ -12,6 +12,7 @@ import { checkApiItem } from '@/api/datasource'
 import { cloneDeep } from 'lodash-es'
 import { fieldType } from '@/utils/attr'
 import type { ApiConfiguration } from '@/views/visualized/data/datasource/form/option'
+import { cancelMap } from '@/config/axios/service'
 
 export interface Field {
   name: string
@@ -138,6 +139,7 @@ const showApiData = () => {
     if (valid) {
       const data = Base64.encode(JSON.stringify(apiItem))
       loading.value = true
+      cancelMap['/datasource/checkApiDatasource']?.()
       checkApiItem({ data: data, type: 'apiStructure' }).then(response => {
         originFieldItem.jsonFields = response.data.jsonFields
       })
@@ -202,6 +204,7 @@ const next = () => {
           return
         }
       }
+      cancelMap['/datasource/checkApiDatasource']?.()
       checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) }).then(response => {
         apiItem.jsonFields = response.data.jsonFields
         apiItem.fields = []
@@ -220,6 +223,7 @@ const validate = () => {
         ElMessage.error(t('datasource.please_input_dataPath'))
         return
       }
+      cancelMap['/datasource/checkApiDatasource']?.()
       checkApiItem({ data: Base64.encode(JSON.stringify(apiItem)) })
         .then(response => {
           apiItem.jsonFields = response.data.jsonFields
@@ -235,6 +239,7 @@ const validate = () => {
   })
 }
 const closeEditItem = () => {
+  cancelMap['/datasource/checkApiDatasource']?.()
   edit_api_item.value = false
 }
 
@@ -571,7 +576,11 @@ defineExpose({
           </el-icon>
           <span class="name">{{ t('datasource.data_preview') }}</span>
         </p>
-        <div v-show="activeDataPreview" class="info-table">
+        <div
+          v-show="activeDataPreview"
+          class="info-table"
+          :style="{ height: Math.min(tableData.length, 20) * 40 + 'px' }"
+        >
           <empty-background
             v-if="showEmpty"
             description="暂无数据，请在数据结构勾选字段"
@@ -725,8 +734,7 @@ defineExpose({
   }
 
   .info-table {
-    max-height: 300px;
-    height: 200px;
+    min-height: 300px;
     .ed-table-v2__header-cell {
       background-color: #f5f6f7;
     }