Merge branch 'perf/third-interface-05-7' into 'main_dev'

perf(src/views): 优化第三方接口

See merge request yunteng/thingskit-view!269

@@ -147,6 +147,7 @@ export const customRequest = async (request: RequestConfigType) => {
     pondRequestOriginUrl,
     pondRequestGlobalTokenKey,
     pondRequestGlobalTokenSuffix,
+    pondRequestGlobalIsToken
   } = request as ExtraRequestConfigType
   const chartEditStore = useChartEditStore()
   
@@ -175,7 +176,7 @@ export const customRequest = async (request: RequestConfigType) => {
     {
       url:
         requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`,
-      baseURL: requestVerificationToken ? pondRequestOriginUrl : globalRequestOriginUrl ? globalRequestOriginUrl : getOriginUrl(requestOriginUrl!),
+      baseURL: pondRequestGlobalIsToken ? requestVerificationToken ? pondRequestOriginUrl : globalRequestOriginUrl ? globalRequestOriginUrl : getOriginUrl(requestOriginUrl!): pondRequestOriginUrl,
       method: requestHttpType,
       params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null,
       data: body,

@@ -59,6 +59,13 @@ onMounted(() => {
 watch(
   () => props.modelValue,
   (val: string) => {
+    if(props.language === 'json') {
+      try {
+        JSON.parse(val)
+      } catch (_) {
+        window.$message.error('JSON格式有误，请仔细检查！')
+      }
+    }
     val !== getEditor()?.getValue() && updateMonacoVal(val)
   }
 )

@@ -63,7 +63,8 @@ export const requestConfig: RequestConfigType = {
       },
     "Header": {},
     "Params": {}
-   }
+   },
+   pondRequestGlobalIsToken: true
 }
 
 // 单实例类

@@ -223,7 +223,7 @@ export interface RequestConfigType extends RequestPublicConfigType {
     sql: string
   }
 
-   // Token
+   // 三方Token相关
    requestVerificationToken?: string
    // 请求头里的Token键
    requestTokenKey?: string
@@ -250,6 +250,8 @@ export interface RequestConfigType extends RequestPublicConfigType {
   thirdSelectCascaderLabel?: string
   publicInterfaceSelectId?: string
   thirdRequestDataPondId?: string
+  pondRequestGlobalIsToken?: boolean
+  //
 }
 
 // Store 类型

@@ -59,15 +59,23 @@
               <div class="editor-data-show">
                 <NSpace>
                   <NText depth="3">接口返回数据(res)：</NText>
-                  <NScrollbar style="max-height: 300px;">
-                    <NCode :code="toString(isSocketRequest ? targetData.wsOriginalMessage : sourceData) || '暂无'" language="json" :word-wrap="true"></NCode>
-                  </NScrollbar>
+                    <n-collapse :default-expanded-names="['1']">
+                      <n-collapse-item title="res" name="1">
+                        <NScrollbar style="max-height: 300px;">
+                          <NCode :code="toString(isSocketRequest ? targetData.wsOriginalMessage : sourceData) || '暂无'" language="json" :word-wrap="true"></NCode>
+                        </NScrollbar>
+                      </n-collapse-item>
+                    </n-collapse>
                 </NSpace>
               </div>
               <div class="editor-data-show">
                 <NSpace>
                   <NText depth="3">过滤器结果：</NText>
-                  <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode>
+                   <n-collapse>
+                      <n-collapse-item title="结果" name="2">
+                        <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode>
+                      </n-collapse-item>
+                    </n-collapse>
                 </NSpace>
               </div>
             </NSpace>

@@ -52,7 +52,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 { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum } from '@/enums/httpEnum'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
 import { getUUID, goDialog } from '@/utils'
 import { cloneDeep } from 'lodash'
@@ -108,57 +108,10 @@ watch(
 const openPond = (isEditFlag = false) => {
   isEdit.value = !!isEditFlag
   requestShow.value = true
-  editData.value = cacheEditData.value || {
-    dataPondId: getUUID(),
-    dataPondName: getUUID(),
-    dataPondRequestConfig: {
-    requestDataPondId: '',
-    requestInterval: 0,
-    requestDataType: RequestDataTypeEnum.AJAX,
-    requestHttpType: RequestHttpEnum.GET,
-    requestUrl: '',
-    requestContentType: RequestContentTypeEnum.DEFAULT,
-    requestParamsBodyType: RequestBodyEnum.NONE,
-    requestSQLContent: {
-      sql: ''
-    },
-    requestVerificationToken: '',
-    requestTokenKey: '',
-    requestTokenSuffix: '',
-    requestParams: {
-      "Body": {
-          "form-data": {},
-          "x-www-form-urlencoded": {},
-            "json": "",
-          "xml": ""
-        },
-      "Header": {},
-      "Params": {}
-     },  
-    pondRequestOriginUrl: '',
-    pondRequestInterval: 0,
-    pondRequestIntervalUnit: '',
-    pondRequestGlobalTokenSuffix: '',
-    pondRequestGlobalTokenKey: '',
-    pondRequestHttpType:'',
-    pondRequestUrl:'',
-    pondRequestContentType:RequestContentTypeEnum.DEFAULT,
-    pondRequestSQLContent: {
-      sql: ''
-    },
-    pondRequestParamsBodyType: RequestBodyEnum.NONE,
-    pondRequestParams: {
-      "Body": {
-          "form-data": {},
-          "x-www-form-urlencoded": {},
-            "json": "",
-          "xml": ""
-        },
-      "Header": {},
-      "Params": {}
-     }
-    }
-  } as unknown as RequestDataPondItemType
+  if (isEditFlag) {
+    editData.value = cacheEditData.value
+    targetData.value.request.pondRequestGlobalIsToken =  editData.value?.dataPondRequestConfig.pondRequestGlobalIsToken
+  }
 }
 
 // 创建
@@ -167,9 +120,9 @@ const createPond = () => {
   editData.value = {
     dataPondId: id,
     dataPondName: id,
-    dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.Pond })
+    dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.AJAX })
   }
-  cacheEditData.value =  editData.value
+  targetData.value.request.pondRequestGlobalIsToken = true
   openPond()
 }
 
@@ -248,10 +201,10 @@ const deletePond = (targetData: RequestDataPondItemType) => {
 const closeHandle = () => {
   // 将所选内容赋值给对象
   if (pondData.value) {
-    targetData.value.request = {
-      ...toRaw(pondData.value.dataPondRequestConfig),
-      requestDataPondId: pondData.value.dataPondId
-    }
+    // targetData.value.request = {
+    //   ...toRaw(pondData.value.dataPondRequestConfig),
+    //   requestDataPondId: pondData.value.dataPondId
+    // }
   }
   emit('update:modelShow', false)
 }

@@ -100,6 +100,7 @@ const deletePond = (target: Event, targetData: RequestDataPondItemType) => {
 // 选中
 const clickHandle = (item: RequestDataPondItemType) => {
   targetData.value.request.requestDataPondId = item.dataPondId
+  targetData.value.request.pondRequestGlobalIsToken = item.dataPondRequestConfig.pondRequestGlobalIsToken
 }
 </script>
 

 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount, watchEffect, unref } from 'vue'
+import { ref, computed, onBeforeUnmount, watchEffect, unref, watch } from 'vue'
 import { icon } from '@/plugins'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
@@ -99,6 +99,10 @@ const controlModel = ref(false)
 
 const handleOpenChartDataPondModal = () => controlModel.value = true
 
+watch(()=>targetData.value, (newValue) => {
+  selectedRequestType.value = newValue?.request?.requestDataType as unknown as any
+})
+
 </script>
 
 <template>

@@ -18,14 +18,14 @@ import {
   CascaderOption,
   NCascader,
 } from 'naive-ui'
-import { computed, onMounted, reactive, ref, unref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, unref } from 'vue'
 import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
 import { ChevronDown, ChevronUp } from '@vicons/carbon'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { selectTimeOptions } from '../../../index.d'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum'
-import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { convertToCascadingData } from '@/utils/external/utils'
 import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest'
 
@@ -52,6 +52,8 @@ const themeColor = computed(() => {
 
 const selectGlobalPondValue = ref('')
 
+const selectGlobalPondIsToken = ref(true)
+
 const cacheSelectOption = ref<Recordable>({
   dataPondRequestConfig:{
     pondRequestOriginUrl:'',
@@ -104,6 +106,7 @@ const findCurrentPond = () => {
 }
 
 const handleSelectGlobalPond = (_:string, options:RequestDataPondItemType & {label: string, value: string}) => {
+  selectGlobalPondIsToken.value = options.dataPondRequestConfig.pondRequestGlobalIsToken!
   cacheSelectOption.value = options
   targetData.value.request = options.dataPondRequestConfig
   targetData.value.request.requestDataPondId = options.dataPondId
@@ -136,8 +139,12 @@ const handleExecuteRequest = async () => {
 onMounted(()=>{
   getTokenString.value = targetData.value?.request?.requestVerificationToken
   selectGlobalPondValue.value = findCurrentPond()?.dataPondId as string
+  selectGlobalPondIsToken.value = findCurrentPond()?.dataPondRequestConfig.pondRequestGlobalIsToken as boolean
   cacheSelectOption.value = findCurrentPond() as RequestDataPondItemType
   resValue.value = targetData.value?.request?.thirdSelectCascaderLabel
+  targetData.value.request.pondRequestOriginUrl = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl
+  targetData.value.request.pondRequestGlobalTokenKey = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenKey
+  targetData.value.request.pondRequestGlobalTokenSuffix = findCurrentPond()?.dataPondRequestConfig?.pondRequestGlobalTokenSuffix
   handleExecuteRequest()
 })
 </script>
@@ -245,7 +252,7 @@ onMounted(()=>{
            </SettingItem>
         </SettingItemBox>
         <NDivider />
-        <div style="margin:0 70px" v-if="selectGlobalPondValue">
+        <div style="margin:0 70px" v-if="selectGlobalPondValue && selectGlobalPondIsToken">
           <n-space vertical>
             <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button>
             <NCascader

@@ -13,7 +13,6 @@
         <div class="go-pr-3">
           <n-space vertical>
              <PondPublicConfiguration ref="pondPublicConfigurationRef" />
-             <NDivider />
              <PondRequestConfiguration ref="pondRequestConfigurationRef" />
           </n-space>
         </div>
@@ -48,11 +47,10 @@
 
 <script script lang="ts" setup>
 import { PropType, ref, watch, onMounted, nextTick } from 'vue'
-import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { goDialog } from '@/utils'
 import PondPublicConfiguration from './PondPublicConfiguration.vue'
 import PondRequestConfiguration from './PondRequestConfiguration.vue'
-import { merge } from 'lodash'
 import { useTargetData } from '../../../../hooks/useTargetData.hook'
 
 const props = defineProps({
@@ -78,7 +76,7 @@ watch(
     modelShowRef.value = newValue
     if(newValue) {
       nextTick(() => {
-        pondPublicConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestDataPondItemType)
+        pondPublicConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestConfigType)
         pondRequestConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestDataPondItemType)
       })
     }
@@ -97,14 +95,15 @@ const closeAndSendHandle = () => {
   }
   const pondPublicData = pondPublicConfigurationRef?.value?.getConfigurationData()
   const pondRequestData = pondRequestConfigurationRef?.value?.getConfigurationData()
-  merge(props.targetDataRequest.dataPondRequestConfig, pondRequestData, pondPublicData)
+  const mergeTargetDataRequestData = Object.assign(props.targetDataRequest.dataPondRequestConfig, pondPublicData, pondRequestData)
+  props.targetDataRequest.dataPondRequestConfig = mergeTargetDataRequestData
   goDialog({
     message: '保存内容将同步修改所有使用此接口的组件, 是否继续?',
     isMaskClosable: true,
     transformOrigin: 'center',
     onPositiveCallback: () => {
       emit('update:modelShow', false)
-      emit('editSaveHandle', props.targetDataRequest)
+      emit('editSaveHandle',  props.targetDataRequest)
     }
   })
 }

@@ -21,11 +21,15 @@ import { ChevronDown, ChevronUp } from '@vicons/carbon'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { selectTimeOptions } from '../../../index.d'
 import { RequestHttpIntervalEnum } from '@/enums/httpEnum'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
 
 const { PencilIcon } = icon.ionicons5
 
 const designStore = useDesignStore()
 
+const { targetData } = useTargetData()
+
 const editDisabled = ref(false)
 
 const collapseHeaderTable = ref(false)
@@ -40,6 +44,8 @@ const pondRequestGlobalTokenSuffixRef = ref('')
 
 const pondRequestGlobalTokenKeyRef = ref('')
 
+const pondRequestGlobalIsTokenRef = ref(true)
+
 const handleCollapse = () => {
   collapseHeaderTable.value = !unref(collapseHeaderTable)
 }
@@ -49,23 +55,29 @@ const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
-const getConfigurationData = (): Recordable => {
+const handleIsTokenSwitch = (value: boolean) => {
+  targetData.value.request.pondRequestGlobalIsToken = value
+}
+
+const getConfigurationData = (): Partial<RequestConfigType> => {
   return {
     pondRequestOriginUrl: unref(pondRequestOriginUrlRef),
     pondRequestInterval: unref(pondRequestIntervalRef),
     pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef),
     pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef),
     pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef),
+    pondRequestGlobalIsToken: unref(pondRequestGlobalIsTokenRef),
   }
 }
 
-const setConfigurationData = (request: Recordable) => {
-  const { pondRequestOriginUrl, pondRequestInterval, pondRequestIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey } = request
-  pondRequestOriginUrlRef.value = pondRequestOriginUrl
+const setConfigurationData = (request: Partial<RequestConfigType>) => {
+  const { pondRequestOriginUrl, pondRequestInterval, pondRequestIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey, pondRequestGlobalIsToken } = request
+  pondRequestOriginUrlRef.value = pondRequestOriginUrl!
   pondRequestIntervalRef.value = pondRequestInterval
-  pondRequestIntervalUnitRef.value = pondRequestIntervalUnit
-  pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix
-  pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey
+  pondRequestIntervalUnitRef.value = pondRequestIntervalUnit!
+  pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix!
+  pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey!
+  pondRequestGlobalIsTokenRef.value = pondRequestGlobalIsToken!
 }
 
 defineExpose({
@@ -129,7 +141,12 @@ defineExpose({
         </NButton>
       </SettingItemBox>
       <!-- 针对第三方接口 -->
-      <SettingItemBox name="配置">
+      <SettingItemBox name="Token配置">
+        <SettingItem>
+          <n-switch @update:value="handleIsTokenSwitch" v-model:value="pondRequestGlobalIsTokenRef"/>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox v-if="pondRequestGlobalIsTokenRef" name="配置">
         <SettingItem name="请求标头">
           <n-input v-model:value.trim="pondRequestGlobalTokenKeyRef" type="text" placeholder="默认值: X-Authorization " />
         </SettingItem>

@@ -12,6 +12,9 @@ import {
 import { ref, unref } from 'vue'
 import DefaultRequestContent from './DefaultRequestContent.vue'
 import SqlConfiguration from './SqlConfiguration.vue'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+
+const { targetData } = useTargetData()
 
 const pondRequestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)
 
@@ -74,6 +77,8 @@ defineExpose({
 </script>
 
 <template>
+  <div v-if="targetData.request.pondRequestGlobalIsToken">
+  <NDivider />
   <SettingItemBox
     name="地址"
     :itemRightStyle="{
@@ -135,4 +140,5 @@ defineExpose({
       v-if="pondRequestContentTypeRef === RequestContentTypeEnum.SQL"
     />
   </SettingItemBox>
+</div>
 </template>

@@ -35,7 +35,6 @@ const openModal = async (flag = true, type: RequestDataTypeEnum) => {
   requestDataType.value = type
   showModal.value = flag
   await nextTick()
-  console.log(unref(selectTarget)!.request)
   unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
   unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
 }
@@ -98,6 +97,7 @@ const handleSaveAction = async () => {
   value.thirdSelectCascaderLabel =  targetData.value.request.thirdSelectCascaderLabel
   value.requestDataType = targetData.value.request.requestDataType
   value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId
+  value.pondRequestGlobalIsToken = targetData.value.request.pondRequestGlobalIsToken
   if (unref(selectTarget)) {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
       ...unref(selectTarget)!,