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

fix(数据源): 修复API数据源数据量较大时页面发生卡顿导致页面直接跳转到完成，随后没有创建成功的问题

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

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

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;
       }
     }

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;
+    min-height: 300px;
-    height: 200px;
     .ed-table-v2__header-cell {
       background-color: #f5f6f7;
     }