feat: 处理全局接口编辑请求

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -72,8 +72,10 @@
 
     <!-- 底部数据展示 -->
     <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
+
     <!-- 骨架图 -->
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+    
     <!-- 请求配置model -->
     <chart-data-request
       v-model:modelShow="requestShow"
@@ -95,7 +97,7 @@ import { http, customizeHttp } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { isDev, newFunctionHandle } from '@/utils'
+import { newFunctionHandle } from '@/utils'
 
 const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -117,7 +117,7 @@ const { uploadFileListRef, customRequest, beforeUpload, download } = useFile(tar
 
 // 是否展示过滤器
 const filterShow = computed(() => {
-  return targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
+  return targetData.value.request.requestDataType !== RequestDataTypeEnum.STATIC
 })
 
 // 是支持 dataset 的图表类型

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/index.vue

@@ -157,8 +157,6 @@ const {
   requestIntervalUnit
 } = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
 
-console.log((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
-
 const tabs = [RequestParamsTypeEnum.HEADER]
 const requestContentTypeObj = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed, nextTick, watch } from 'vue'
+import { ref, toRefs, computed, nextTick, watch, toRaw } from 'vue'
 import noData from '@/assets/images/canvas/noData.png'
 import { ChartDataPondList } from '../ChartDataPondList'
 import { PondDataRequest } from '../../../ChartDataRequest'
@@ -54,6 +54,7 @@ import { ChartDataDisplay } from '../ChartDataDisplay'
 import { requestConfig } from '@/packages/public/publicConfig'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
 import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
 import { getUUID, goDialog } from '@/utils'
 import { cloneDeep } from 'lodash'
@@ -107,7 +108,7 @@ const createPond = () => {
   editData.value = {
     dataPondId: id,
     dataPondName: id,
-    dataPondRequestConfig: cloneDeep(requestConfig)
+    dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.Pond })
   }
   openPond()
 }
@@ -118,7 +119,6 @@ const saveHandle = (newData: RequestDataPondItemType) => {
   if (isEdit.value) {
     editSaveHandle(newData)
   } else {
-    console.log(editData.value)
     createSaveHandle(newData)
   }
   isEdit.value = false
@@ -173,6 +173,13 @@ const deletePond = (targetData: RequestDataPondItemType) => {
 
 // 关闭
 const closeHandle = () => {
+  // 将所选内容赋值给对象
+  if (pondData.value) {
+    targetData.value.request = {
+      ...toRaw(pondData.value.dataPondRequestConfig),
+      requestDataPondId: pondData.value.dataPondId
+    }
+  }
   emit('update:modelShow', false)
   emit('sendHandle')
 }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue

@@ -26,17 +26,48 @@
     </n-card>
   </div>
 
+  <setting-item-box :alone="true">
+    <template #name>
+      测试
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="21" :depth="3">
+            <help-outline-icon></help-outline-icon>
+          </n-icon>
+        </template>
+        默认赋值给 dataset 字段
+      </n-tooltip>
+    </template>
+    <n-button type="primary" ghost @click="sendHandle">
+      <template #icon>
+        <n-icon>
+          <flash-icon />
+        </n-icon>
+      </template>
+      发送请求
+    </n-button>
+  </setting-item-box>
+
+  <!-- 底部数据展示 -->
+  <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
+
+  <!-- 骨架图 -->
+  <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+
   <!-- 编辑 / 新增弹窗 -->
-  <chart-data-pond-control v-model:modelShow="controlModel"></chart-data-pond-control>
+  <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed } from 'vue'
+import { ref, toRefs, toRaw, onBeforeUnmount, computed, watchEffect } from 'vue'
 import { icon } from '@/plugins'
+import { http, customizeHttp } from '@/api/http'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { ChartDataPondControl } from './components/ChartDataPondControl'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
+import { newFunctionHandle } from '@/utils'
 
 const designStore = useDesignStore()
 const { HelpOutlineIcon, FlashIcon, PulseIcon, FishIcon } = icon.ionicons5
@@ -48,7 +79,12 @@ const {
   requestIntervalUnit: GlobalRequestIntervalUnit
 } = toRefs(chartEditStore.getRequestGlobalConfig)
 
+const loading = ref(false)
 const controlModel = ref(false)
+const showMatching = ref(false)
+
+let firstFocus = 0
+let lastFilter: any = undefined
 
 // 所选数据池
 const pondData = computed(() => {
@@ -69,6 +105,46 @@ const themeColor = computed(() => {
 const controlModelHandle = () => {
   controlModel.value = true
 }
+
+// 发送请求
+const sendHandle = async () => {
+  if (!targetData.value?.request) {
+    window.$message.warning('请选择一个公共接口！')
+    return
+  }
+  loading.value = true
+  try {
+    // const res = await customizeHttp(
+    //   toRaw(pondData.value?.dataPondRequestConfig),
+    //   toRaw(chartEditStore.getRequestGlobalConfig)
+    // )
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
+    loading.value = false
+    if (res) {
+      if (!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
+      targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
+      showMatching.value = true
+      return
+    }
+    window['$message'].warning('数据异常，请检查参数！')
+  } catch (error) {
+    loading.value = false
+    window['$message'].warning('数据异常，请检查参数！')
+  }
+}
+
+watchEffect(() => {
+  const filter = targetData.value?.filter
+  if (lastFilter !== filter && firstFocus) {
+    lastFilter = filter
+    sendHandle()
+  }
+  firstFocus++
+})
+
+onBeforeUnmount(() => {
+  lastFilter = null
+})
 </script>
 
 <style scoped lang="scss">