feat: 完成自定义请求功能

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

@@ -1,16 +1,28 @@
 <template>
   <div class="go-chart-configurations-data-ajax">
     <n-card class="n-card-shallow">
-      <setting-item-box name="基础配置">
-        <setting-item name="请求方式">
+      <setting-item-box name="请求配置">
+        <setting-item name="类型">
+          <n-tag :bordered="false" type="primary">
+            {{ requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
+          </n-tag>
+        </setting-item>
+
+        <setting-item name="方式">
           <n-input size="small" :placeholder="requestHttpType || '暂无'" :disabled="true"></n-input>
         </setting-item>
 
-        <setting-item name="请求间隔">
-          <n-input size="small" :placeholder="requestInterval || '暂无'" :disabled="true">
+        <setting-item name="组件间隔（高级）">
+          <n-input size="small" :placeholder="`${requestInterval}` || '暂无'" :disabled="true">
             <template #suffix> {{ SelectHttpTimeNameObj[requestIntervalUnit] }} </template>
           </n-input>
         </setting-item>
+
+        <setting-item name="全局间隔（默认）">
+          <n-input size="small" :placeholder="`${GlobalRequestInterval}` || '暂无'" :disabled="true">
+            <template #suffix> {{ SelectHttpTimeNameObj[GlobalRequestIntervalUnit] }} </template>
+          </n-input>
+        </setting-item>
       </setting-item-box>
 
       <setting-item-box name="源地址" :alone="true">
@@ -35,7 +47,7 @@
 
       <div class="edit-text" @click="requestModelHandle">
         <div class="go-absolute-center">
-          <n-button type="primary" secondary>点击配置</n-button>
+          <n-button type="primary" secondary>查看更多</n-button>
         </div>
       </div>
     </n-card>
@@ -72,14 +84,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, onBeforeUnmount, watchEffect } from 'vue'
+import { ref, toRefs, onBeforeUnmount, watchEffect, toRaw } from 'vue'
 import { icon } from '@/plugins'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { ChartDataRequest } from '../ChartDataRequest/index'
-import { RequestHttpEnum, ResultEnum, SelectHttpTimeNameObj } from '@/enums/httpEnum'
+import { RequestHttpEnum, ResultEnum, SelectHttpTimeNameObj, RequestContentTypeEnum } from '@/enums/httpEnum'
 import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
-import { http } from '@/api/http'
+import { http, customizeHttp } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
@@ -87,8 +99,14 @@ import { isDev, newFunctionHandle } from '@/utils'
 
 const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
-const { requestUrl, requestHttpType, requestInterval, requestIntervalUnit } = toRefs(targetData.value.request)
-const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
+const { requestUrl, requestHttpType, requestInterval, requestIntervalUnit, requestContentType } = toRefs(
+  targetData.value.request
+)
+const {
+  requestOriginUrl,
+  requestInterval: GlobalRequestInterval,
+  requestIntervalUnit: GlobalRequestIntervalUnit
+} = toRefs(chartEditStore.getRequestGlobalConfig)
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
@@ -106,21 +124,19 @@ const requestModelHandle = () => {
 // 发送请求
 const sendHandle = async () => {
   loading.value = true
-  if (!targetData.value) return
-  const { requestUrl, requestHttpType } = targetData.value.request
-  if (!requestUrl) {
-    window['$message'].warning('请求参数不正确，请检查！')
-    return
+  try {
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
+    loading.value = false
+    if (res && res.status === ResultEnum.SUCCESS) {
+      targetData.value.option.dataset = newFunctionHandle(res.data, targetData.value.filter)
+      showMatching.value = true
+      return
+    }
+    window['$message'].warning('数据异常，请检查参数！')
+  } catch (error) {
+    loading.value = false
+    window['$message'].warning('数据异常，请检查参数！')
   }
-  const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl
-  const res = await http(requestHttpType)(completePath || '', {})
-  loading.value = false
-  if (res.status === ResultEnum.SUCCESS) {
-    targetData.value.option.dataset = newFunctionHandle(res.data, targetData.value.filter)
-    showMatching.value = true
-    return
-  }
-  window['$message'].warning('数据异常，请检查接口数据！')
 }
 
 watchEffect(() => {
@@ -152,7 +168,7 @@ onBeforeUnmount(() => {
       top: 0px;
       left: 0px;
       width: 325px;
-      height: 235px;
+      height: 292px;
       cursor: pointer;
       opacity: 0;
       transition: all 0.3s;

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

@@ -97,13 +97,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, toRefs } from 'vue'
+import { ref, computed, watch, toRefs, toRaw } from 'vue'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestHttpEnum, RequestDataTypeEnum, ResultEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
 import { goDialog, toString } from '@/utils'
-import { http } from '@/api/http'
+import { http, customizeHttp } from '@/api/http'
 import cloneDeep from 'lodash/cloneDeep'
 
 const { DocumentTextIcon } = icon.ionicons5
@@ -124,19 +124,14 @@ const sourceData = ref<any>('')
 // 动态获取数据
 const fetchTargetData = async () => {
   try {
-    const { requestUrl, requestHttpType } = targetData.value.request
-    if (!requestUrl) {
-      sourceData.value = '请求参数不正确，请检查！'
-      return
-    }
-    const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl
-    const res = await http(requestHttpType)(completePath || '', {})
-    if (res.status === ResultEnum.SUCCESS) {
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.requestGlobalConfig))
+    if (res && res.status === ResultEnum.SUCCESS) {
       sourceData.value = res.data
       return
     }
+    window['$message'].warning('数据异常，请检查参数！')
   } catch (error) {
-    window['$message'].warning('数据异常，请检查接口数据！')
+    window['$message'].warning('数据异常，请检查参数！')
   }
 }
 

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalHeaderTable/index.vue

@@ -19,11 +19,11 @@ const { chartEditStore } = useTargetData()
 const { requestParams } = toRefs(chartEditStore.getRequestGlobalConfig)
 
 const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.HEADER)
-const tabs = [RequestParamsTypeEnum.HEADER, RequestParamsTypeEnum.COOKIE]
+const tabs = [RequestParamsTypeEnum.HEADER]
 
 // 更新表格参数
 const updateRequestParams = (paramsObj: RequestParamsObjType) => {
-  if (tabValue.value === RequestParamsTypeEnum.HEADER || tabValue.value === RequestParamsTypeEnum.COOKIE) {
+  if (tabValue.value === RequestParamsTypeEnum.HEADER) {
     requestParams.value[tabValue.value] = paramsObj
   }
 }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue

@@ -28,7 +28,7 @@
           </n-radio-group>
 
           <!-- 为 none 时 -->
-          <n-card class="go-mt-3" v-if="requestParamsBodyType === RequestBodyEnum['NONE']">
+          <n-card class="go-mt-3 go-pb-3" v-if="requestParamsBodyType === RequestBodyEnum['NONE']">
             <n-text depth="3">该请求没有 Body 体</n-text>
           </n-card>
 
@@ -69,12 +69,17 @@
       </div>
     </div>
     <div v-show="requestContentType === RequestContentTypeEnum.SQL">
-      <setting-item-box name="键名">
-        <n-tag type="primary" :bordered="false" style="width: 40px; font-size: 16px"> sql </n-tag>
-      </setting-item-box>
-      <setting-item-box name="键值">
-        <monaco-editor v-model:modelValue="requestSQLContent['sql']" width="600px" height="200px" language="sql" />
-      </setting-item-box>
+      <template v-if="requestHttpType === RequestHttpEnum.GET">
+        <n-text>SQL 类型不支持 Get 请求，请使用其它方式</n-text>
+      </template>
+      <template v-else>
+        <setting-item-box name="键名">
+          <n-tag type="primary" :bordered="false" style="width: 40px; font-size: 16px"> sql </n-tag>
+        </setting-item-box>
+        <setting-item-box name="键值">
+          <monaco-editor v-model:modelValue="requestSQLContent['sql']" width="600px" height="200px" language="sql" />
+        </setting-item-box>
+      </template>
     </div>
   </n-space>
 </template>
@@ -92,12 +97,13 @@ import {
   RequestContentTypeEnum,
   RequestParamsObjType,
   RequestBodyEnumList,
-  RequestBodyEnum
+  RequestBodyEnum,
+  RequestHttpEnum
 } from '@/enums/httpEnum'
 
 const { targetData } = useTargetData()
 
-const { requestContentType, requestSQLContent, requestParams, requestParamsBodyType } = toRefs(targetData.value.request)
+const { requestHttpType, requestContentType, requestSQLContent, requestParams, requestParamsBodyType } = toRefs(targetData.value.request)
 
 const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)