Commit c835e78b915f6eb590bd5af483e16f638e59cd1d

Authored by xp.Huang
2 parents 76a4385f 1aa344a2

Merge branch 'revert-76a4385f' into 'main_dev'

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

See merge request yunteng/thingskit-view!263
Showing 24 changed files with 140 additions and 1674 deletions
@@ -143,10 +143,8 @@ export const customRequest = async (request: RequestConfigType) => { @@ -143,10 +143,8 @@ export const customRequest = async (request: RequestConfigType) => {
143 requestParamsBodyType, 143 requestParamsBodyType,
144 requestOriginUrl, 144 requestOriginUrl,
145 requestVerificationToken, 145 requestVerificationToken,
146 - pondRequestOriginUrl,  
147 - pondRequestGlobalTokenKey,  
148 - pondRequestGlobalTokenSuffix,  
149 - 146 + requestTokenKey,
  147 + requestTokenSuffix
150 } = request as ExtraRequestConfigType 148 } = request as ExtraRequestConfigType
151 let { requestUrl } = request as ExtraRequestConfigType 149 let { requestUrl } = request as ExtraRequestConfigType
152 const { Header, Body } = requestParams 150 const { Header, Body } = requestParams
@@ -171,7 +169,7 @@ export const customRequest = async (request: RequestConfigType) => { @@ -171,7 +169,7 @@ export const customRequest = async (request: RequestConfigType) => {
171 { 169 {
172 url: 170 url:
173 requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`, 171 requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`,
174 - baseURL: requestVerificationToken ? pondRequestOriginUrl : getOriginUrl(requestOriginUrl!), 172 + baseURL: requestVerificationToken ? '' : getOriginUrl(requestOriginUrl!), // 如果是第三方接口,则无需添加baseURL
175 method: requestHttpType, 173 method: requestHttpType,
176 params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null, 174 params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null,
177 data: body, 175 data: body,
@@ -182,8 +180,8 @@ export const customRequest = async (request: RequestConfigType) => { @@ -182,8 +180,8 @@ export const customRequest = async (request: RequestConfigType) => {
182 apiUrl: '', 180 apiUrl: '',
183 withShareToken: isShareMode(), 181 withShareToken: isShareMode(),
184 withThirdTokenString: requestVerificationToken, 182 withThirdTokenString: requestVerificationToken,
185 - withThirdTokenKey: pondRequestGlobalTokenKey,  
186 - withThirdTokenPrefix: pondRequestGlobalTokenSuffix 183 + withThirdTokenKey: requestTokenKey,
  184 + withThirdTokenPrefix: requestTokenSuffix
187 } 185 }
188 ) 186 )
189 //ft 187 //ft
1 import {ref, toRefs, toRaw, watch} from 'vue' 1 import {ref, toRefs, toRaw, watch} from 'vue'
2 import type VChart from 'vue-echarts' 2 import type VChart from 'vue-echarts'
  3 +import {useChartDataPondFetch} from '@/hooks/'
3 import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d' 4 import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d'
4 import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore' 5 import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
5 import {isPreview, intervalUnitHandle} from '@/utils' 6 import {isPreview, intervalUnitHandle} from '@/utils'
6 import {setOption} from '@/packages/public/chart' 7 import {setOption} from '@/packages/public/chart'
7 import {useChartDataSocket} from './useChartDataSocket' 8 import {useChartDataSocket} from './useChartDataSocket'
8 -import {customRequest, customThirdInterfaceRequest, thirdInterfaceRequest} from '@/api/external/customRequest' 9 +import {customRequest} from '@/api/external/customRequest'
9 import {useFilterFn} from './useFilterFn' 10 import {useFilterFn} from './useFilterFn'
10 import {RequestContentTypeEnum} from '@/enums/external/httpEnum' 11 import {RequestContentTypeEnum} from '@/enums/external/httpEnum'
11 import dayjs from 'dayjs' 12 import dayjs from 'dayjs'
12 -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'  
13 -import { convertToCascadingData, findItemByLabel } from '@/utils/external/utils'  
14 -import { CascaderOption } from 'naive-ui'  
15 13
16 14
17 // 获取类型 15 // 获取类型
@@ -94,38 +92,6 @@ export const useChartDataFetch = ( @@ -94,38 +92,6 @@ export const useChartDataFetch = (
94 (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number 92 (toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTs as unknown as number
95 (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number 93 (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number
96 } 94 }
97 - //处理过期  
98 - const findCurrentPond = () => {  
99 - return chartEditStore.getRequestGlobalConfig.requestDataPond.find((pondItem: RequestDataPondItemType) =>  
100 - pondItem.dataPondId === targetComponent?.request?.requestDataPondId && targetComponent.request.thirdTokenIsExp)  
101 - }  
102 - const handleExecuteRequest = async () => {  
103 - try {  
104 - if(findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl){  
105 - const originUrlString = findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl  
106 - const requestUrlString = findCurrentPond()?.dataPondRequestConfig?.pondRequestUrl  
107 - const body = findCurrentPond()?.dataPondRequestConfig?.pondRequestParams!['Body']['json']  
108 - const request = {  
109 - requestOriginUrl: `${originUrlString}${requestUrlString}`,  
110 - body  
111 - }  
112 - const res = await customThirdInterfaceRequest(request as unknown as thirdInterfaceRequest)  
113 - const resOptions = convertToCascadingData(res) as unknown as CascaderOption[]  
114 - const findLabel = findItemByLabel(resOptions, targetComponent.request.thirdSelectCascaderLabel as string)  
115 - if(findLabel) {  
116 - targetComponent.request.requestVerificationToken = findLabel?.value  
117 - }  
118 - }  
119 - } catch (e) {  
120 - console.error(e)  
121 - }  
122 - }  
123 - // 定时时间  
124 - const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value  
125 - // 单位  
126 - const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value  
127 - setInterval(handleExecuteRequest, intervalUnitHandle(time, unit))  
128 - //  
129 const res = await customRequest(toRaw(targetComponent.request)) 95 const res = await customRequest(toRaw(targetComponent.request))
130 if (res) { 96 if (res) {
131 try { 97 try {
@@ -160,8 +126,6 @@ export const useChartDataFetch = ( @@ -160,8 +126,6 @@ export const useChartDataFetch = (
160 const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value 126 const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
161 // 开启轮询 127 // 开启轮询
162 if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit)) 128 if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
163 -  
164 -  
165 } 129 }
166 // eslint-disable-next-line no-empty 130 // eslint-disable-next-line no-empty
167 } catch (error) { 131 } catch (error) {
@@ -41,29 +41,7 @@ export const requestConfig: RequestConfigType = { @@ -41,29 +41,7 @@ export const requestConfig: RequestConfigType = {
41 }, 41 },
42 Header: {}, 42 Header: {},
43 Params: {} 43 Params: {}
44 - },  
45 - pondRequestOriginUrl: '',  
46 - pondRequestInterval: 0,  
47 - pondRequestIntervalUnit: '',  
48 - pondRequestGlobalTokenSuffix: '',  
49 - pondRequestGlobalTokenKey: '',  
50 - pondRequestHttpType: RequestHttpEnum.GET,  
51 - pondRequestContentType: RequestContentTypeEnum.DEFAULT,  
52 - pondRequestUrl:'',  
53 - pondRequestSQLContent: {  
54 - sql: ''  
55 - },  
56 - pondRequestParamsBodyType: RequestBodyEnum.NONE,  
57 - pondRequestParams: {  
58 - "Body": {  
59 - "form-data": {},  
60 - "x-www-form-urlencoded": {},  
61 - "json": "",  
62 - "xml": ""  
63 - },  
64 - "Header": {},  
65 - "Params": {}  
66 - } 44 + }
67 } 45 }
68 46
69 // 单实例类 47 // 单实例类
@@ -196,10 +196,6 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType { @@ -196,10 +196,6 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType {
196 requestTokenKey?: string 196 requestTokenKey?: string
197 // 请求头里的Token前缀 197 // 请求头里的Token前缀
198 requestTokenSuffix?: string, 198 requestTokenSuffix?: string,
199 - // 全局配置Token前缀  
200 - requestGlobalTokenSuffix?: string,  
201 - // 全局配置Token键  
202 - requestGlobalTokenKey?: string,  
203 } 199 }
204 200
205 // 单个图表请求配置 201 // 单个图表请求配置
@@ -222,34 +218,12 @@ export interface RequestConfigType extends RequestPublicConfigType { @@ -222,34 +218,12 @@ export interface RequestConfigType extends RequestPublicConfigType {
222 requestSQLContent: { 218 requestSQLContent: {
223 sql: string 219 sql: string
224 } 220 }
225 -  
226 // Token 221 // Token
227 requestVerificationToken?: string 222 requestVerificationToken?: string
228 // 请求头里的Token键 223 // 请求头里的Token键
229 requestTokenKey?: string 224 requestTokenKey?: string
230 // 请求头里的Token前缀 225 // 请求头里的Token前缀
231 requestTokenSuffix?: string 226 requestTokenSuffix?: string
232 - pondRequestOriginUrl?: string  
233 - pondRequestInterval?: number  
234 - pondRequestIntervalUnit?: string  
235 - pondRequestGlobalTokenSuffix?: string  
236 - pondRequestGlobalTokenKey?: string  
237 - pondRequestGlobalCascaderOption?: Recordable  
238 - pondRequestGlobalCascaderKey?: string  
239 - pondRequestHttpType?: string  
240 - pondRequestInterval?: number  
241 - pondRequestIntervalUnit?: string  
242 - pondRequestContentType?: number  
243 - pondRequestHttpType?: string  
244 - pondRequestParams?: RequestParams  
245 - pondRequestParamsBodyType?: RequestBodyEnum  
246 - pondRequestUrl?: string  
247 - pondRequestSQLContent?: {  
248 - sql: string  
249 - }  
250 - thirdTokenIsExp?: boolean  
251 - thirdSelectCascaderLabel?: string  
252 - publicInterfaceSelectId?: string  
253 } 227 }
254 228
255 // Store 类型 229 // Store 类型
@@ -11,7 +11,6 @@ import { ContentTypeEnum, RequestEnum } from '@/enums/external/httpEnum'; @@ -11,7 +11,6 @@ import { ContentTypeEnum, RequestEnum } from '@/enums/external/httpEnum';
11 import omit from 'lodash/omit'; 11 import omit from 'lodash/omit';
12 import cloneDeep from 'lodash/cloneDeep'; 12 import cloneDeep from 'lodash/cloneDeep';
13 import { useUserStore } from '@/store/external/modules/user'; 13 import { useUserStore } from '@/store/external/modules/user';
14 -import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook';  
15 14
16 export * from './axiosTransform'; 15 export * from './axiosTransform';
17 16
@@ -116,8 +115,6 @@ export class VAxios { @@ -116,8 +115,6 @@ export class VAxios {
116 this.axiosInstance.interceptors.request.use(async (config: AxiosRequestConfig) => { 115 this.axiosInstance.interceptors.request.use(async (config: AxiosRequestConfig) => {
117 // If cancel repeat request is turned on, then cancel repeat request is prohibited 116 // If cancel repeat request is turned on, then cancel repeat request is prohibited
118 const userStore = useUserStore(); 117 const userStore = useUserStore();
119 - const { targetData } = useTargetData()  
120 -  
121 // if (userStore && (userStore.jwtToken || userStore.shareJwtToken)) { 118 // if (userStore && (userStore.jwtToken || userStore.shareJwtToken)) {
122 if (userStore) { 119 if (userStore) {
123 try { 120 try {
@@ -128,7 +125,7 @@ export class VAxios { @@ -128,7 +125,7 @@ export class VAxios {
128 const res = jwt_decode(withThirdTokenString) as Recordable; 125 const res = jwt_decode(withThirdTokenString) as Recordable;
129 const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000; 126 const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000;
130 if (currentTime >= res?.exp) { 127 if (currentTime >= res?.exp) {
131 - targetData.value.request.thirdTokenIsExp = true 128 + window['$message'].warning('第三方平台Token已经失效,请您重新返回设计页面点击执行请求获取最新Token')
132 } 129 }
133 } else { 130 } else {
134 //此平台逻辑 131 //此平台逻辑
@@ -65,19 +65,3 @@ export const convertToCascadingData = (obj: Recordable): cascadingData[] => { @@ -65,19 +65,3 @@ export const convertToCascadingData = (obj: Recordable): cascadingData[] => {
65 } 65 }
66 return result 66 return result
67 } 67 }
68 -  
69 -// 递归查找  
70 -export const findItemByLabel = (list:Recordable[], label:string) :Recordable | null => {  
71 - let res = list.find((item) => item.label == label) as Recordable | null;  
72 - if (res) {  
73 - return res;  
74 - } else {  
75 - for (let i = 0; i < list.length; i++) {  
76 - if (list[i].children instanceof Array && list[i].children.length > 0) {  
77 - res = findItemByLabel(list[i].children, label);  
78 - if (res) return res;  
79 - }  
80 - }  
81 - return null;  
82 - }  
83 -};  
@@ -101,7 +101,7 @@ watch( @@ -101,7 +101,7 @@ watch(
101 ) 101 )
102 102
103 // 打开/编辑 103 // 打开/编辑
104 -const openPond = (isEditFlag = false) => { 104 +const openPond = (isEditFlag: boolean = false) => {
105 isEdit.value = !!isEditFlag 105 isEdit.value = !!isEditFlag
106 requestShow.value = true 106 requestShow.value = true
107 } 107 }
@@ -41,14 +41,6 @@ @@ -41,14 +41,6 @@
41 编辑配置 41 编辑配置
42 </n-button> 42 </n-button>
43 </setting-item-box> 43 </setting-item-box>
44 - <setting-item-box name="配置">  
45 - <setting-item name="Token前缀">  
46 - <n-input :disabled="editDisabled" v-model:value.trim="requestGlobalTokenSuffix" type="text" placeholder="例如:Bearer" />  
47 - </setting-item>  
48 - <setting-item name="Token键值">  
49 - <n-input :disabled="editDisabled" v-model:value.trim="requestGlobalTokenKey" type="text" placeholder="例如:Token" />  
50 - </setting-item>  
51 - </setting-item-box>  
52 <!-- table 内容体 --> 44 <!-- table 内容体 -->
53 <n-collapse-transition :show="showTable"> 45 <n-collapse-transition :show="showTable">
54 <request-global-header-table :editDisabled="editDisabled"></request-global-header-table> 46 <request-global-header-table :editDisabled="editDisabled"></request-global-header-table>
@@ -77,13 +69,13 @@ import { ref, toRefs, computed } from 'vue' @@ -77,13 +69,13 @@ import { ref, toRefs, computed } from 'vue'
77 import { useDesignStore } from '@/store/modules/designStore/designStore' 69 import { useDesignStore } from '@/store/modules/designStore/designStore'
78 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' 70 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
79 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook' 71 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
80 -import { selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d' 72 +import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
81 import { RequestGlobalHeaderTable } from '../RequestGlobalHeaderTable' 73 import { RequestGlobalHeaderTable } from '../RequestGlobalHeaderTable'
82 import { icon } from '@/plugins' 74 import { icon } from '@/plugins'
83 75
84 const { PencilIcon, ChevronDownOutlineIcon, ChevronUpOutlineIcon } = icon.ionicons5 76 const { PencilIcon, ChevronDownOutlineIcon, ChevronUpOutlineIcon } = icon.ionicons5
85 const { chartEditStore } = useTargetData() 77 const { chartEditStore } = useTargetData()
86 -const { requestOriginUrl, requestInterval, requestIntervalUnit, requestGlobalTokenSuffix, requestGlobalTokenKey } = toRefs(chartEditStore.getRequestGlobalConfig) 78 +const { requestOriginUrl, requestInterval, requestIntervalUnit } = toRefs(chartEditStore.getRequestGlobalConfig)
87 const editDisabled = ref(true) 79 const editDisabled = ref(true)
88 80
89 const designStore = useDesignStore() 81 const designStore = useDesignStore()
1 -<template>  
2 - <n-table  
3 - :bordered="false"  
4 - :single-line="false"  
5 - size="small"  
6 - style="border-bottom-right-radius: 7px; border-bottom-left-radius: 7px"  
7 - >  
8 - <thead>  
9 - <tr>  
10 - <th>key</th>  
11 - <th>value</th>  
12 - </tr>  
13 - </thead>  
14 - <tbody>  
15 - <tr v-for="(item, index) in tableArray.content" :key="index">  
16 - <td>  
17 - {{ item.key || '暂无'}}  
18 - </td>  
19 - <td>  
20 - {{ item.value || '暂无'}}  
21 - </td>  
22 - </tr>  
23 - </tbody>  
24 - </n-table>  
25 -</template>  
26 -  
27 -<script setup lang="ts">  
28 -import { PropType, reactive, ref, toRefs, watch } from 'vue'  
29 -import { RequestParamsObjType } from '@/enums/httpEnum'  
30 -import noData from '@/assets/images/canvas/noData.png'  
31 -  
32 -const props = defineProps({  
33 - target: Object as PropType<RequestParamsObjType>  
34 -})  
35 -  
36 -// 默认表格  
37 -const defaultItem = {  
38 - key: '',  
39 - value: ''  
40 -}  
41 -const tableArray = reactive<{  
42 - content: typeof defaultItem[]  
43 -}>({ content: [] })  
44 -  
45 -// 监听选项  
46 -watch(  
47 - () => props.target as RequestParamsObjType,  
48 - (target: RequestParamsObjType) => {  
49 - tableArray.content = []  
50 - for (const k in target) {  
51 - tableArray.content.push({  
52 - key: k,  
53 - value: target[k]  
54 - })  
55 - }  
56 - // 默认值  
57 - if (!tableArray.content.length) tableArray.content = [JSON.parse(JSON.stringify(defaultItem))]  
58 - },  
59 - {  
60 - immediate: true,  
61 - deep: true  
62 - }  
63 -)  
64 -</script>  
1 -import ChartDataDisplay from './index.vue'  
2 -  
3 -export { ChartDataDisplay }  
1 -<template>  
2 - <div class="go-chart-data-display">  
3 - <n-scrollbar style="max-height: 570px">  
4 - <div class="go-mr-3">  
5 - <div>  
6 - <setting-item-box name="主体信息">  
7 - <setting-item name="接口名称">  
8 - <n-input size="small" :placeholder="targetData?.dataPondName || '暂无'" :disabled="true"> </n-input>  
9 - </setting-item>  
10 - <setting-item name="接口类型">  
11 - <n-input size="small" :placeholder="pondRequestHttpType || '暂无'" :disabled="true"></n-input>  
12 - </setting-item>  
13 - </setting-item-box>  
14 -  
15 - <setting-item-box>  
16 - <setting-item name="组件间隔">  
17 - <n-input size="small" :placeholder="`${requestInterval || '暂无'}`" :disabled="true">  
18 - <template #suffix>  
19 - {{ targetData && SelectHttpTimeNameObj[requestIntervalUnit] }}  
20 - </template>  
21 - </n-input>  
22 - </setting-item>  
23 - <setting-item name="全局间隔(默认)">  
24 - <n-input size="small" :placeholder="`${globalData?.requestInterval || '暂无'}`" :disabled="true">  
25 - <template #suffix> {{ globalData && SelectHttpTimeNameObj[globalData.requestIntervalUnit] }} </template>  
26 - </n-input>  
27 - </setting-item>  
28 - </setting-item-box>  
29 -  
30 - <setting-item-box name="源地址" :alone="true">  
31 - <n-input size="small" :placeholder="pondRequestOriginUrl || '暂无'" :disabled="true">  
32 - <template #prefix>  
33 - <n-icon :component="PulseIcon" />  
34 - </template>  
35 - </n-input>  
36 - </setting-item-box>  
37 -  
38 - <setting-item-box name="接口地址" :alone="true">  
39 - <n-input  
40 - size="small"  
41 - :placeholder="pondRequestUrl || '暂无'"  
42 - :disabled="true"  
43 - >  
44 - <template #prefix>  
45 - <n-icon :component="FlashIcon" />  
46 - </template>  
47 - </n-input>  
48 - </setting-item-box>  
49 - </div>  
50 - <n-divider />  
51 - <setting-item-box name="类型">  
52 - <setting-item name="配置类型">  
53 - <n-input  
54 - size="small"  
55 - :placeholder="targetData && requestContentTypeObj[requestContentType]"  
56 - :disabled="true"  
57 - ></n-input>  
58 - </setting-item>  
59 - <setting-item name="body 类型" v-if="requestContentType === RequestContentTypeEnum.DEFAULT">  
60 - <n-input size="small" :placeholder="targetData && requestParamsBodyType" :disabled="true"></n-input>  
61 - </setting-item>  
62 - </setting-item-box>  
63 - <div v-if="requestContentType === RequestContentTypeEnum.DEFAULT">  
64 - <n-tabs type="line" animated v-model:value="tabValue">  
65 - <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>  
66 - </n-tabs>  
67 - <!-- 各个页面 -->  
68 - <div class="go-mt-3">  
69 - <div v-if="tabValue !== RequestParamsTypeEnum.BODY">  
70 - <display-table class="go-my-3" :target="requestParams[tabValue]"> </display-table>  
71 - </div>  
72 -  
73 - <!-- 选择了 body -->  
74 - <div v-else>  
75 - <!-- 为 none 时 -->  
76 - <n-card class="go-mt-3 go-pb-3" v-if="requestParamsBodyType === RequestBodyEnum['NONE']">  
77 - <n-text depth="3">该接口没有 Body 体</n-text>  
78 - </n-card>  
79 -  
80 - <!-- 具有对象属性时 -->  
81 - <template  
82 - v-else-if="  
83 - requestParamsBodyType === RequestBodyEnum['FORM_DATA'] ||  
84 - requestParamsBodyType === RequestBodyEnum['X_WWW_FORM_URLENCODED']  
85 - "  
86 - >  
87 - <display-table  
88 - class="go-my-3"  
89 - :target="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"  
90 - ></display-table>  
91 - </template>  
92 -  
93 - <!-- json -->  
94 - <template v-else-if="requestParamsBodyType === RequestBodyEnum['JSON']">  
95 - <n-card size="small" style="padding-bottom: 7px">  
96 - <n-code  
97 - :code="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType] || '暂无内容'"  
98 - language="json"  
99 - ></n-code>  
100 - </n-card>  
101 - </template>  
102 -  
103 - <!-- xml -->  
104 - <template v-else-if="requestParamsBodyType === RequestBodyEnum['XML']">  
105 - <n-code  
106 - :code="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType] || ''"  
107 - language="html"  
108 - ></n-code>  
109 - </template>  
110 - </div>  
111 - </div>  
112 - </div>  
113 - <!-- SQL 请求 -->  
114 - <div v-else>  
115 - <setting-item-box name="键名">  
116 - <n-text>sql</n-text>  
117 - </setting-item-box>  
118 - <setting-item-box name="键值">  
119 - <n-code :code="requestSQLContent.sql || ''" language="sql"></n-code>  
120 - </setting-item-box>  
121 - </div>  
122 - </div>  
123 - </n-scrollbar>  
124 - </div>  
125 -</template>  
126 -  
127 -<script setup lang="ts">  
128 -import { PropType, ref, toRefs } from 'vue'  
129 -import { icon } from '@/plugins'  
130 -import { MonacoEditor } from '@/components/Pages/MonacoEditor'  
131 -import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'  
132 -import { RequestDataPondItemType, RequestGlobalConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'  
133 -import displayTable from './displayTable.vue'  
134 -import {  
135 - RequestBodyEnum,  
136 - RequestParamsTypeEnum,  
137 - SelectHttpTimeNameObj,  
138 - RequestContentTypeEnum,  
139 - RequestBodyEnumList,  
140 - RequestParamsObjType  
141 -} from '@/enums/httpEnum'  
142 -  
143 -const props = defineProps({  
144 - globalData: Object as PropType<RequestGlobalConfigType>,  
145 - targetData: Object as PropType<RequestDataPondItemType>  
146 -})  
147 -  
148 -const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5  
149 -const {  
150 - requestUrl,  
151 - requestInterval,  
152 - requestHttpType,  
153 - requestContentType,  
154 - requestSQLContent,  
155 - requestParams,  
156 - requestParamsBodyType,  
157 - requestIntervalUnit,  
158 - pondRequestOriginUrl,  
159 - pondRequestUrl,  
160 - pondRequestHttpType  
161 -} = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)  
162 -const tabs = [RequestParamsTypeEnum.HEADER]  
163 -const requestContentTypeObj = {  
164 - [RequestContentTypeEnum.DEFAULT]: '普通请求',  
165 - [RequestContentTypeEnum.SQL]: 'SQL 请求'  
166 -}  
167 -const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)  
168 -  
169 -// 更新参数表格数据  
170 -const updateRequestParams = (paramsObj: RequestParamsObjType) => {  
171 - if (tabValue.value !== RequestParamsTypeEnum.BODY) {  
172 - requestParams.value[tabValue.value] = paramsObj  
173 - }  
174 -}  
175 -  
176 -// 更新参数表格数据  
177 -const updateRequestBodyTable = (paramsObj: RequestParamsObjType) => {  
178 - if (  
179 - tabValue.value === RequestParamsTypeEnum.BODY &&  
180 - // 仅有两种类型有 body  
181 - (requestParamsBodyType.value === RequestBodyEnum.FORM_DATA ||  
182 - requestParamsBodyType.value === RequestBodyEnum.X_WWW_FORM_URLENCODED)  
183 - ) {  
184 - requestParams.value[RequestParamsTypeEnum.BODY][requestParamsBodyType.value] = paramsObj  
185 - }  
186 -}  
187 -</script>  
188 -  
189 -<style lang="scss" scoped>  
190 -@include go('chart-data-display') {  
191 - flex: 1;  
192 -}  
193 -</style>  
1 -import ChartDataPondControl from './index.vue'  
2 -  
3 -export { ChartDataPondControl }  
1 -<template>  
2 - <n-modal class="go-chart-data-pond-control" v-model:show="modelShowRef" :mask-closable="false">  
3 - <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">  
4 - <template #header></template>  
5 - <template #header-extra> </template>  
6 - <div class="pond-content">  
7 - <!-- 展示区域 -->  
8 - <chart-data-display  
9 - v-if="pondData && !loading"  
10 - :targetData="pondData"  
11 - :globalData="chartEditStore.getRequestGlobalConfig"  
12 - ></chart-data-display>  
13 - <!-- 无数据 -->  
14 - <div v-else class="no-data go-flex-center">  
15 - <img :src="noData" alt="暂无数据" />  
16 - <n-text :depth="3">暂未选择公共接口</n-text>  
17 - </div>  
18 - <!-- 左侧列表 -->  
19 - <chart-data-pond-list @createPond="createPond" @deletePond="deletePond"></chart-data-pond-list>  
20 - </div>  
21 - <!-- 底部 -->  
22 - <template #action>  
23 - <n-space justify="space-between">  
24 - <n-button type="info" secondary :disabled="!pondData" @click="openPond(true)">  
25 - 编辑内容  
26 - <template #icon>  
27 - <n-icon>  
28 - <pencil-icon />  
29 - </n-icon>  
30 - </template>  
31 - </n-button>  
32 - <n-button type="primary" @click="closeHandle">保存 & 关闭</n-button>  
33 - </n-space>  
34 - </template>  
35 - </n-card>  
36 - </n-modal>  
37 - <!-- 请求配置model -->  
38 - <pond-data-request  
39 - v-model:modelShow="requestShow"  
40 - :targetDataRequest="editData"  
41 - :isEdit="isEdit"  
42 - @editSaveHandle="saveHandle"  
43 - ></pond-data-request>  
44 -</template>  
45 -  
46 -<script setup lang="ts">  
47 -import { ref, toRefs, computed, nextTick, watch, toRaw } from 'vue'  
48 -import noData from '@/assets/images/canvas/noData.png'  
49 -import { ChartDataPondList } from '../ChartDataPondList'  
50 -import PondDataRequest from '../../../RequestModal/PondDataRequest.vue'  
51 -import { ChartDataDisplay } from '../ChartDataDisplay'  
52 -import { requestConfig } from '@/packages/public/publicConfig'  
53 -import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'  
54 -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'  
55 -import { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum } from '@/enums/httpEnum'  
56 -import { icon } from '@/plugins'  
57 -import { getUUID, goDialog } from '@/utils'  
58 -import { cloneDeep } from 'lodash'  
59 -  
60 -const props = defineProps({  
61 - modelShow: Boolean  
62 -})  
63 -  
64 -const emit = defineEmits(['update:modelShow', 'sendHandle'])  
65 -  
66 -const { PencilIcon } = icon.ionicons5  
67 -  
68 -const { chartEditStore, targetData } = useTargetData()  
69 -  
70 -const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)  
71 -  
72 -const requestShow = ref(false)  
73 -  
74 -const modelShowRef = ref(false)  
75 -  
76 -const loading = ref(false)  
77 -  
78 -const isEdit = ref(false)  
79 -  
80 -const editData = ref<RequestDataPondItemType>()  
81 -  
82 -// 所选数据池  
83 -const pondData = computed(() => {  
84 - const selectId = targetData?.value?.request?.requestDataPondId  
85 - if (!selectId) return undefined  
86 - const data = requestDataPond.value.filter(item => {  
87 - return selectId === item.dataPondId  
88 - })  
89 - return data[0]  
90 -})  
91 -  
92 -watch(() => props.modelShow, (newValue) => {  
93 - if (newValue) {  
94 - modelShowRef.value = true  
95 - } else {  
96 - modelShowRef.value = false  
97 - }  
98 -})  
99 -  
100 -const cacheEditData = ref<RequestDataPondItemType>()  
101 -  
102 -watch(  
103 - () => pondData.value,  
104 - newValue => {  
105 - loading.value = true  
106 - editData.value = newValue  
107 - cacheEditData.value = editData.value  
108 - nextTick(() => {  
109 - loading.value = false  
110 - })  
111 - },  
112 - {  
113 - immediate: true  
114 - }  
115 -)  
116 -  
117 -// 打开/编辑  
118 -const openPond = (isEditFlag = false) => {  
119 - isEdit.value = !!isEditFlag  
120 - requestShow.value = true  
121 - editData.value = cacheEditData.value || {  
122 - dataPondId: getUUID(),  
123 - dataPondName: getUUID(),  
124 - dataPondRequestConfig: {  
125 - requestDataPondId: '',  
126 - requestInterval: 0,  
127 - requestDataType: RequestDataTypeEnum.AJAX,  
128 - requestHttpType: RequestHttpEnum.GET,  
129 - requestUrl: '',  
130 - requestContentType: RequestContentTypeEnum.DEFAULT,  
131 - requestParamsBodyType: RequestBodyEnum.NONE,  
132 - requestSQLContent: {  
133 - sql: ''  
134 - },  
135 - requestVerificationToken: '',  
136 - requestTokenKey: '',  
137 - requestTokenSuffix: '',  
138 - requestParams: {  
139 - "Body": {  
140 - "form-data": {},  
141 - "x-www-form-urlencoded": {},  
142 - "json": "",  
143 - "xml": ""  
144 - },  
145 - "Header": {},  
146 - "Params": {}  
147 - },  
148 - pondRequestOriginUrl: '',  
149 - pondRequestInterval: 0,  
150 - pondRequestIntervalUnit: '',  
151 - pondRequestGlobalTokenSuffix: '',  
152 - pondRequestGlobalTokenKey: '',  
153 - pondRequestHttpType:'',  
154 - pondRequestUrl:'',  
155 - pondRequestContentType:RequestContentTypeEnum.DEFAULT,  
156 - pondRequestSQLContent: {  
157 - sql: ''  
158 - },  
159 - pondRequestParamsBodyType: RequestBodyEnum.NONE,  
160 - pondRequestParams: {  
161 - "Body": {  
162 - "form-data": {},  
163 - "x-www-form-urlencoded": {},  
164 - "json": "",  
165 - "xml": ""  
166 - },  
167 - "Header": {},  
168 - "Params": {}  
169 - }  
170 - }  
171 - } as unknown as RequestDataPondItemType  
172 -}  
173 -  
174 -// 创建  
175 -const createPond = () => {  
176 - const id = getUUID()  
177 - editData.value = {  
178 - dataPondId: id,  
179 - dataPondName: id,  
180 - dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.Pond })  
181 - }  
182 - cacheEditData.value = editData.value  
183 - openPond()  
184 -}  
185 -  
186 -// 完成创建/编辑  
187 -const saveHandle = (newData: RequestDataPondItemType) => {  
188 - // 走创建  
189 - if (isEdit.value) {  
190 - editSaveHandle(newData)  
191 - } else {  
192 - createSaveHandle(newData)  
193 - }  
194 - isEdit.value = false  
195 - requestShow.value = false  
196 -}  
197 -  
198 -// 编辑保存之后  
199 -const editSaveHandle = (newData: RequestDataPondItemType) => {  
200 - try {  
201 - const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === newData.dataPondId)  
202 - if (targetIndex !== -1) {  
203 - requestDataPond.value.splice(targetIndex, 1, newData)  
204 - // 修改数据池后, 修改所有关联的组件  
205 - chartEditStore.getComponentList.forEach(item => {  
206 - if (  
207 - item.request.requestDataType === RequestDataTypeEnum.Pond &&  
208 - item.request.requestDataPondId === newData.dataPondId  
209 - ) {  
210 - item.request = {  
211 - ...toRaw(newData.dataPondRequestConfig),  
212 - requestDataPondId: newData.dataPondId  
213 - }  
214 - }  
215 - })  
216 - window.$message.success('保存成功!')  
217 - } else {  
218 - window.$message.error('编辑失败,请稍后重试!')  
219 - }  
220 - } catch (error) {  
221 - window.$message.error('编辑失败,请稍后重试!')  
222 - }  
223 -}  
224 -  
225 -// 创建保存成功之后  
226 -const createSaveHandle = (newData: RequestDataPondItemType) => {  
227 - try {  
228 - if (editData.value) {  
229 - requestDataPond.value.unshift(newData)  
230 - window.$message.success('创建成功!')  
231 - } else {  
232 - window.$message.error('创建失败,请稍后重试!')  
233 - }  
234 - } catch (error) {  
235 - window.$message.error('创建失败,请稍后重试!')  
236 - }  
237 -}  
238 -  
239 -// 删除数据池  
240 -const deletePond = (targetData: RequestDataPondItemType) => {  
241 - goDialog({  
242 - message: '删除数据后,需手动处理使用改接口的组件,是否继续?',  
243 - isMaskClosable: true,  
244 - transformOrigin: 'center',  
245 - onPositiveCallback: () => {  
246 - const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === targetData.dataPondId)  
247 - if (targetIndex !== -1) {  
248 - requestDataPond.value.splice(targetIndex, 1)  
249 - window.$message.success('删除成功!')  
250 - } else {  
251 - window.$message.error('删除失败,请稍后重试!')  
252 - }  
253 - }  
254 - })  
255 -}  
256 -  
257 -// 关闭  
258 -const closeHandle = () => {  
259 - // 将所选内容赋值给对象  
260 - if (pondData.value) {  
261 - targetData.value.request = {  
262 - ...toRaw(pondData.value.dataPondRequestConfig),  
263 - requestDataPondId: pondData.value.dataPondId  
264 - }  
265 - }  
266 - emit('update:modelShow', false)  
267 -}  
268 -</script>  
269 -  
270 -<style lang="scss" scoped>  
271 -@include go('chart-data-pond-control') {  
272 - /* 中间 */  
273 - .pond-content {  
274 - display: flex;  
275 - }  
276 - .no-data {  
277 - flex-direction: column;  
278 - width: 100%;  
279 - img {  
280 - width: 200px;  
281 - }  
282 - }  
283 - &.n-card.n-modal,  
284 - .n-card {  
285 - @extend .go-background-filter;  
286 - }  
287 - .n-card-shallow {  
288 - background-color: rgba(0, 0, 0, 0) !important;  
289 - }  
290 - @include deep() {  
291 - & > .n-card__content {  
292 - padding-right: 0;  
293 - }  
294 - .n-card__content {  
295 - padding-bottom: 5px;  
296 - }  
297 - }  
298 -}  
299 -</style>  
1 -import ChartDataPondList from './index.vue'  
2 -  
3 -export { ChartDataPondList }  
1 -<template>  
2 - <div class="go-chart-data-pond-list">  
3 - <n-timeline class="pond-item-timeline" style="width: 20px">  
4 - <n-timeline-item type="info"> </n-timeline-item>  
5 - <n-timeline-item type="success"></n-timeline-item>  
6 - </n-timeline>  
7 - <div class="pond-item-box">  
8 - <!-- 新增 -->  
9 - <n-button class="create-btn go-py-4" ghost @click="createPond">  
10 - <span> 创建 </span>  
11 - <template #icon>  
12 - <n-icon>  
13 - <DuplicateOutlineIcon></DuplicateOutlineIcon>  
14 - </n-icon>  
15 - </template>  
16 - </n-button>  
17 - <n-divider style="margin: 10px 0"></n-divider>  
18 - <n-space v-if="!requestDataPond.length" justify="center">  
19 - <n-text class="not-layer-text" :depth="3">  
20 - 暂无数据内容,  
21 - <n-a @click="createPond">立即创建</n-a>  
22 - </n-text>  
23 - </n-space>  
24 - <n-scrollbar style="max-height: 490px">  
25 - <div  
26 - v-for="item in requestDataPond"  
27 - :key="item.dataPondId"  
28 - :class="{ select: item.dataPondId === selectPondId }"  
29 - class="pond-item"  
30 - @click="clickHandle(item)"  
31 - >  
32 - <div class="item-content">  
33 - <div class="item-content-body">  
34 - <div>  
35 - <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false">  
36 - 名称  
37 - </n-tag>  
38 - <n-ellipsis style="max-width: 180px">  
39 - {{ item.dataPondName || '暂无' }}  
40 - </n-ellipsis>  
41 - </div>  
42 - <div>  
43 - <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false">  
44 - 地址  
45 - </n-tag>  
46 - <n-ellipsis style="max-width: 180px">  
47 - {{ item.dataPondRequestConfig.pondRequestUrl || '暂无' }}  
48 - </n-ellipsis>  
49 - </div>  
50 - </div>  
51 - <div class="item-content-icon go-transition-quick" @click="deletePond($event, item)">  
52 - <n-icon>  
53 - <trash-icon></trash-icon>  
54 - </n-icon>  
55 - </div>  
56 - </div>  
57 - <div :class="{ 'select-modal': item.dataPondId === selectPondId }"></div>  
58 - </div>  
59 - </n-scrollbar>  
60 - </div>  
61 - </div>  
62 -</template>  
63 -  
64 -<script setup lang="ts">  
65 -import { toRefs, computed } from 'vue'  
66 -import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'  
67 -import { useDesignStore } from '@/store/modules/designStore/designStore'  
68 -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'  
69 -import { icon } from '@/plugins'  
70 -  
71 -const emit = defineEmits(['createPond', 'deletePond'])  
72 -  
73 -const { DuplicateOutlineIcon, TrashIcon } = icon.ionicons5  
74 -const designStore = useDesignStore()  
75 -const { chartEditStore, targetData } = useTargetData()  
76 -const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)  
77 -  
78 -// 选中的全局数据  
79 -const selectPondId = computed(() => {  
80 - return targetData.value.request.requestDataPondId  
81 -})  
82 -  
83 -// 颜色  
84 -const themeColor = computed(() => {  
85 - return designStore.getAppTheme  
86 -})  
87 -  
88 -// 创建数据池  
89 -const createPond = () => {  
90 - emit('createPond', true)  
91 -}  
92 -  
93 -// 删除数据池  
94 -const deletePond = (target: Event, targetData: RequestDataPondItemType) => {  
95 - target.stopPropagation()  
96 - target.preventDefault()  
97 - emit('deletePond', targetData)  
98 -}  
99 -  
100 -// 选中  
101 -const clickHandle = (item: RequestDataPondItemType) => {  
102 - targetData.value.request.requestDataPondId = item.dataPondId  
103 -}  
104 -</script>  
105 -  
106 -<style scoped lang="scss">  
107 -$height: 530px;  
108 -$listWidth: 280px;  
109 -$centerHeight: 60px;  
110 -$centerMiniHeight: 28px;  
111 -$textSize: 10px;  
112 -  
113 -@include go('chart-data-pond-list') {  
114 - padding-top: 10px;  
115 - padding-bottom: 5px;  
116 - margin-right: 5px;  
117 - display: flex;  
118 - .pond-item-timeline > .n-timeline-item {  
119 - &:first-child {  
120 - height: $height;  
121 - }  
122 - }  
123 - .pond-item-box {  
124 - width: $listWidth;  
125 - position: relative;  
126 - .create-btn {  
127 - width: calc(#{$listWidth - 15px});  
128 - margin-right: 15px;  
129 - }  
130 - .pond-item {  
131 - position: relative;  
132 - height: $centerHeight;  
133 - padding: 5px;  
134 - margin-bottom: 10px;  
135 - margin-right: 15px;  
136 - border-radius: 5px;  
137 - cursor: pointer;  
138 - border: 1px solid rgba(0, 0, 0, 0);  
139 - @include fetch-bg-color('background-color3');  
140 - @extend .go-transition-quick;  
141 - &.hover,  
142 - &:hover {  
143 - @include fetch-bg-color('background-color4');  
144 - }  
145 - &:hover {  
146 - @include deep() {  
147 - .icon-item {  
148 - opacity: 1;  
149 - }  
150 - }  
151 - .item-content-icon {  
152 - opacity: 1 !important;  
153 - }  
154 - }  
155 -  
156 - &.select {  
157 - border: 1px solid v-bind('themeColor');  
158 - background-color: rgba(0, 0, 0, 0);  
159 - .item-content-icon {  
160 - display: none;  
161 - }  
162 - }  
163 -  
164 - .select-modal,  
165 - .item-content {  
166 - position: absolute;  
167 - top: 0;  
168 - left: 0;  
169 - }  
170 -  
171 - .item-content {  
172 - z-index: 1;  
173 - display: flex;  
174 - justify-content: space-between;  
175 - align-items: center;  
176 - padding: 5px;  
177 - .item-content-body {  
178 - width: 230px;  
179 - display: flex;  
180 - flex-direction: column;  
181 - gap: 5px;  
182 - }  
183 - .item-content-icon {  
184 - opacity: 0;  
185 - height: $centerHeight;  
186 - line-height: $centerHeight;  
187 - padding-left: 5px;  
188 - }  
189 - }  
190 -  
191 - .select-modal {  
192 - width: 100%;  
193 - height: 100%;  
194 - opacity: 0.3;  
195 - background-color: v-bind('themeColor');  
196 - }  
197 - }  
198 - }  
199 -}  
200 -</style>  
1 -import ChartDataPond from './index.vue'  
2 -  
3 -export { ChartDataPond }  
1 -<template>  
2 - <!-- 选中内容 -->  
3 - <div class="go-chart-data-pond">  
4 - <n-card class="n-card-shallow">  
5 - <setting-item-box name="请求名称" :alone="true">  
6 - <n-input size="small" :placeholder="pondData?.dataPondName || '暂无'" :disabled="true">  
7 - <template #prefix>  
8 - <n-icon :component="FishIcon" />  
9 - </template>  
10 - </n-input>  
11 - </setting-item-box>  
12 -  
13 - <setting-item-box name="接口地址" :alone="true">  
14 - <n-input size="small" :placeholder="pondData?.dataPondRequestConfig.requestUrl || '暂无'" :disabled="true">  
15 - <template #prefix>  
16 - <n-icon :component="FlashIcon" />  
17 - </template>  
18 - </n-input>  
19 - </setting-item-box>  
20 -  
21 - <div class="edit-text" @click="controlModelHandle">  
22 - <div class="go-absolute-center">  
23 - <n-button type="primary" secondary>编辑配置</n-button>  
24 - </div>  
25 - </div>  
26 - </n-card>  
27 - </div>  
28 -  
29 - <setting-item-box :alone="true">  
30 - <template #name>  
31 - 测试  
32 - <n-tooltip trigger="hover">  
33 - <template #trigger>  
34 - <n-icon size="21" :depth="3">  
35 - <help-outline-icon></help-outline-icon>  
36 - </n-icon>  
37 - </template>  
38 - 默认赋值给 dataset 字段  
39 - </n-tooltip>  
40 - </template>  
41 - <n-button type="primary" ghost @click="sendHandle">  
42 - <template #icon>  
43 - <n-icon>  
44 - <flash-icon />  
45 - </n-icon>  
46 - </template>  
47 - 发送请求  
48 - </n-button>  
49 - </setting-item-box>  
50 -  
51 - <!-- 底部数据展示 -->  
52 - <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>  
53 -  
54 - <!-- 骨架图 -->  
55 - <go-skeleton :load="loading" :repeat="3"></go-skeleton>  
56 -  
57 - <!-- 编辑 / 新增弹窗 -->  
58 - <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>  
59 -</template>  
60 -  
61 -<script setup lang="ts">  
62 -import { ref, toRefs, toRaw, onBeforeUnmount, computed, watchEffect } from 'vue'  
63 -import { icon } from '@/plugins'  
64 -import { http, customizeHttp } from '@/api/http'  
65 -import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'  
66 -import { ChartDataPondControl } from './components/ChartDataPondControl'  
67 -import { useDesignStore } from '@/store/modules/designStore/designStore'  
68 -import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'  
69 -import { newFunctionHandle } from '@/utils'  
70 -import { useTargetData } from '../../../../hooks/useTargetData.hook'  
71 -  
72 -const designStore = useDesignStore()  
73 -const { HelpOutlineIcon, FlashIcon, PulseIcon, FishIcon } = icon.ionicons5  
74 -const { targetData, chartEditStore } = useTargetData()  
75 -  
76 -const {  
77 - requestDataPond,  
78 - requestInterval: GlobalRequestInterval,  
79 - requestIntervalUnit: GlobalRequestIntervalUnit  
80 -} = toRefs(chartEditStore.getRequestGlobalConfig)  
81 -  
82 -const loading = ref(false)  
83 -const controlModel = ref(false)  
84 -const showMatching = ref(false)  
85 -  
86 -let firstFocus = 0  
87 -let lastFilter: any = undefined  
88 -  
89 -// 所选数据池  
90 -const pondData = computed(() => {  
91 - const selectId = targetData.value.request.requestDataPondId  
92 - if (!selectId) return undefined  
93 - const data = requestDataPond.value.filter((item: Recordable) => {  
94 - return selectId === item.dataPondId  
95 - })  
96 - return data[0]  
97 -})  
98 -  
99 -// 颜色  
100 -const themeColor = computed(() => {  
101 - return designStore.getAppTheme  
102 -})  
103 -  
104 -// 请求配置 model  
105 -const controlModelHandle = () => {  
106 - controlModel.value = true  
107 -}  
108 -  
109 -// 发送请求  
110 -const sendHandle = async () => {  
111 - if (!targetData.value?.request) {  
112 - window.$message.warning('请选择一个公共接口!')  
113 - return  
114 - }  
115 - loading.value = true  
116 - try {  
117 - const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))  
118 - loading.value = false  
119 - if (res) {  
120 - if (!res?.data && !targetData.value.filter) {  
121 - window['$message'].warning('您的数据不符合默认格式,请配置过滤器!')  
122 - showMatching.value = true  
123 - return  
124 - }  
125 - targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)  
126 - showMatching.value = true  
127 - return  
128 - }  
129 - window['$message'].warning('没有拿到返回值,请检查接口!')  
130 - } catch (error) {  
131 - console.error(error);  
132 - loading.value = false  
133 - window['$message'].warning('数据异常,请检查参数!')  
134 - }  
135 -}  
136 -  
137 -watchEffect(() => {  
138 - const filter = targetData.value?.filter  
139 - if (lastFilter !== filter && firstFocus) {  
140 - lastFilter = filter  
141 - sendHandle()  
142 - }  
143 - firstFocus++  
144 -})  
145 -  
146 -onBeforeUnmount(() => {  
147 - lastFilter = null  
148 -})  
149 -</script>  
150 -  
151 -<style scoped lang="scss">  
152 -@include go('chart-data-pond') {  
153 - position: relative;  
154 - display: flex;  
155 - flex-direction: column;  
156 - align-items: center;  
157 - .n-card-shallow {  
158 - &.n-card {  
159 - @extend .go-background-filter;  
160 - @include deep() {  
161 - .n-card__content {  
162 - padding: 10px;  
163 - }  
164 - }  
165 - }  
166 - .edit-text {  
167 - position: absolute;  
168 - top: 0px;  
169 - left: 0px;  
170 - width: 325px;  
171 - height: 136px;  
172 - cursor: pointer;  
173 - opacity: 0;  
174 - transition: all 0.3s;  
175 - @extend .go-background-filter;  
176 - backdrop-filter: blur(2px) !important;  
177 - }  
178 - &:hover {  
179 - border-color: v-bind('themeColor');  
180 - .edit-text {  
181 - opacity: 1;  
182 - }  
183 - }  
184 - }  
185 -}  
186 -</style>  
@@ -4,7 +4,6 @@ import { icon } from '@/plugins' @@ -4,7 +4,6 @@ import { icon } from '@/plugins'
4 import { useDesignStore } from '@/store/modules/designStore/designStore' 4 import { useDesignStore } from '@/store/modules/designStore/designStore'
5 import { SettingItemBox } from '@/components/Pages/ChartItemSetting' 5 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
6 import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow' 6 import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow'
7 -import { ChartDataPondControl } from '../ChartDataPond/components/ChartDataPondControl'  
8 import { useTargetData } from '../../../../hooks/useTargetData.hook' 7 import { useTargetData } from '../../../../hooks/useTargetData.hook'
9 import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui' 8 import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui'
10 import { RequestInfoPanel } from '../RequestInfoPanel' 9 import { RequestInfoPanel } from '../RequestInfoPanel'
@@ -94,11 +93,6 @@ watchEffect(() => { @@ -94,11 +93,6 @@ watchEffect(() => {
94 onBeforeUnmount(() => { 93 onBeforeUnmount(() => {
95 lastFilter = null 94 lastFilter = null
96 }) 95 })
97 -  
98 -const controlModel = ref(false)  
99 -  
100 -const handleOpenChartDataPondModal = () => controlModel.value = true  
101 -  
102 </script> 96 </script>
103 97
104 <template> 98 <template>
@@ -107,10 +101,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true @@ -107,10 +101,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true
107 <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" /> 101 <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" />
108 </SettingItemBox> 102 </SettingItemBox>
109 103
110 - <SettingItemBox v-if="selectedRequestType === RequestDataTypeEnum.AJAX" name="全局配置" :alone="true">  
111 - <NButton @click="handleOpenChartDataPondModal" type="success">配置</NButton>  
112 - </SettingItemBox>  
113 -  
114 <RequestInfoPanel @clickPanel="handleClickPanel" /> 104 <RequestInfoPanel @clickPanel="handleClickPanel" />
115 105
116 <SettingItemBox :alone="true"> 106 <SettingItemBox :alone="true">
@@ -142,8 +132,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true @@ -142,8 +132,6 @@ const handleOpenChartDataPondModal = () => controlModel.value = true
142 <go-skeleton :load="loading" :repeat="3"></go-skeleton> 132 <go-skeleton :load="loading" :repeat="3"></go-skeleton>
143 133
144 <RequestModal ref="requestModal" /> 134 <RequestModal ref="requestModal" />
145 -  
146 - <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>  
147 </div> 135 </div>
148 </template> 136 </template>
149 137
@@ -99,7 +99,6 @@ const handleSelectedInterfaceChange = async (_value: string, option: PublicInter @@ -99,7 +99,6 @@ const handleSelectedInterfaceChange = async (_value: string, option: PublicInter
99 const { filter } = option 99 const { filter } = option
100 const { targetData } = useTargetData() 100 const { targetData } = useTargetData()
101 targetData.value.filter = filter ?? 'return res' 101 targetData.value.filter = filter ?? 'return res'
102 - targetData.value.request.publicInterfaceSelectId = option.id as string  
103 //ft 102 //ft
104 setDynamicFormValue(option as unknown as ExtraRequestConfigType) 103 setDynamicFormValue(option as unknown as ExtraRequestConfigType)
105 } 104 }
@@ -155,7 +154,7 @@ const getConfigurationData = () => { @@ -155,7 +154,7 @@ const getConfigurationData = () => {
155 154
156 const setConfigurationData = async (request: ExtraRequestConfigType) => { 155 const setConfigurationData = async (request: ExtraRequestConfigType) => {
157 await getPublicInterfaceList() 156 await getPublicInterfaceList()
158 - const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType, requestIntervalUnit, requestInterval, publicInterfaceSelectId } = request 157 + const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType, requestIntervalUnit, requestInterval } = request
159 const { Header } = requestParams 158 const { Header } = requestParams
160 /** 159 /**
161 * ft 修改 160 * ft 修改
@@ -163,8 +162,7 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => { @@ -163,8 +162,7 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
163 * 源代码 selectedPublicInterface.value = requestDataPondId 162 * 源代码 selectedPublicInterface.value = requestDataPondId
164 * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||'' 163 * 修改后代码 selectedPublicInterface.value = publicInterfaceList.value.find(it=>it.id === requestDataPondId)?.id||''
165 */ 164 */
166 - console.log(publicInterfaceList.value)  
167 - selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === publicInterfaceSelectId)?.id || '' 165 + selectedPublicInterface.value = publicInterfaceList.value.find(it => it.id === requestDataPondId)?.id || ''
168 //ft 166 //ft
169 requestContentTypeRef.value = requestContentType 167 requestContentTypeRef.value = requestContentType
170 requestHttpTypeRef.value = requestHttpType 168 requestHttpTypeRef.value = requestHttpType
@@ -14,27 +14,23 @@ import { @@ -14,27 +14,23 @@ import {
14 NTag, 14 NTag,
15 NTooltip, 15 NTooltip,
16 SelectOption, 16 SelectOption,
17 - NDivider,  
18 - CascaderOption,  
19 - NCascader, 17 + NCascader
20 } from 'naive-ui' 18 } from 'naive-ui'
21 -import { computed, onMounted, reactive, ref, unref } from 'vue' 19 +import { computed, ref, unref, onMounted, reactive } from 'vue'
22 import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue' 20 import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
23 import { ChevronDown, ChevronUp } from '@vicons/carbon' 21 import { ChevronDown, ChevronUp } from '@vicons/carbon'
24 import { useDesignStore } from '@/store/modules/designStore/designStore' 22 import { useDesignStore } from '@/store/modules/designStore/designStore'
25 import { selectTimeOptions } from '../../../index.d' 23 import { selectTimeOptions } from '../../../index.d'
26 import { useTargetData } from '../../../../hooks/useTargetData.hook' 24 import { useTargetData } from '../../../../hooks/useTargetData.hook'
27 import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum' 25 import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum'
28 -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'  
29 -import { convertToCascadingData } from '@/utils/external/utils' 26 +import { TokenNameEnum, TokenEnum } from '@/enums/external/tokenEnum'
30 import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest' 27 import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest'
  28 +import { CascaderOption } from 'naive-ui'
  29 +import { convertToCascadingData } from '@/utils/external/utils'
31 30
32 const { PencilIcon } = icon.ionicons5 31 const { PencilIcon } = icon.ionicons5
33 -  
34 const designStore = useDesignStore() 32 const designStore = useDesignStore()
35 -  
36 const editDisabled = ref(false) 33 const editDisabled = ref(false)
37 -  
38 const collapseHeaderTable = ref(false) 34 const collapseHeaderTable = ref(false)
39 35
40 const { targetData, chartEditStore } = useTargetData() 36 const { targetData, chartEditStore } = useTargetData()
@@ -43,41 +39,15 @@ const handleCollapse = () => { @@ -43,41 +39,15 @@ const handleCollapse = () => {
43 collapseHeaderTable.value = !unref(collapseHeaderTable) 39 collapseHeaderTable.value = !unref(collapseHeaderTable)
44 } 40 }
45 41
46 -const requestDataPondLength = computed(()=>chartEditStore.getRequestGlobalConfig.requestDataPond.length)  
47 -  
48 // 颜色 42 // 颜色
49 const themeColor = computed(() => { 43 const themeColor = computed(() => {
50 return designStore.getAppTheme 44 return designStore.getAppTheme
51 }) 45 })
52 46
53 -const selectGlobalPondValue = ref('')  
54 -  
55 -const cacheSelectOption = ref<Recordable>({  
56 - dataPondRequestConfig:{  
57 - pondRequestOriginUrl:'',  
58 - pondRequestUrl:'',  
59 - pondRequestHttpType:'',  
60 - pondRequestParams: {  
61 - "Body": {  
62 - "form-data": {},  
63 - "x-www-form-urlencoded": {},  
64 - "json": "",  
65 - "xml": ""  
66 - },  
67 - "Header": {},  
68 - "Params": {}  
69 - },  
70 - requestVerificationToken:'',  
71 - }  
72 -}) 47 +//第三方接口相关代码
  48 +const verifiationValue = ref(TokenEnum.DEFAULT_TOKEN)
73 49
74 -const selectGlobalPondOptions = computed(() => {  
75 - return chartEditStore.getRequestGlobalConfig.requestDataPond.map(dataPond=>({  
76 - value:dataPond.dataPondId,  
77 - label:dataPond.dataPondName,  
78 - ...dataPond  
79 - }))  
80 -}) 50 +const tokenString = ref('')
81 51
82 const getTokenString = ref() 52 const getTokenString = ref()
83 53
@@ -92,53 +62,76 @@ const cascaderConfig = reactive({ @@ -92,53 +62,76 @@ const cascaderConfig = reactive({
92 showPath: true 62 showPath: true
93 }) 63 })
94 64
95 -const handleResCascader = (value: string | number, options: Recordable) => {  
96 - targetData.value.request.thirdSelectCascaderLabel = options.label  
97 - getTokenString.value = value as string | number  
98 - targetData.value.request.requestVerificationToken = value as string  
99 - targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX  
100 -} 65 +const requestTokenSuffix = ref('Bearer')
101 66
102 -const findCurrentPond = () => {  
103 - return selectGlobalPondOptions.value.find((pondItem: RequestDataPondItemType & {label: string, value: string}) => pondItem.dataPondId === targetData.value?.request?.requestDataPondId)  
104 -} 67 +const requestTokenKey = ref('Token')
105 68
106 -const handleSelectGlobalPond = (_:string, options:RequestDataPondItemType & {label: string, value: string}) => {  
107 - cacheSelectOption.value = options  
108 - targetData.value.request = options.dataPondRequestConfig  
109 - targetData.value.request.requestDataPondId = options.dataPondId  
110 - getTokenString.value ='' 69 +//验证方式
  70 +const verificationMethods = [
  71 + {
  72 + label: TokenNameEnum.DEFAULT_TOKEN,
  73 + value: TokenEnum.DEFAULT_TOKEN
  74 + },
  75 + {
  76 + label: TokenNameEnum.TOKEN_STRING,
  77 + value: TokenEnum.TOKEN_STRING
  78 + },
  79 + {
  80 + label: TokenNameEnum.NO_VERIFICATION,
  81 + value: TokenEnum.NO_VERIFICATION
  82 + }
  83 +]
  84 +
  85 +const hasDefaultToken = (value: string[]) => value.includes(TokenEnum.DEFAULT_TOKEN)
  86 +
  87 +const hasTokenString = (value: string[]) => value.includes(TokenEnum.TOKEN_STRING)
  88 +
  89 +const handleVerificationUpdate = (value: string) => {
  90 + chartEditStore.getRequestGlobalConfig.requestVerificationMethods = value
  91 + hasTokenString([value])
  92 + hasDefaultToken([value])
  93 + resValue.value = null
111 resOptions.value = [] 94 resOptions.value = []
112 - resValue.value=null  
113 - handleExecuteRequest() 95 + getTokenString.value = ''
  96 + requestTokenKey.value = ''
  97 + requestTokenSuffix.value = ''
  98 +}
  99 +
  100 +const handleResCascader = (value: string | number) => {
  101 + getTokenString.value = value as string | number
  102 + chartEditStore.getRequestGlobalConfig.requestVerificationToken = value as string
  103 + targetData.value.request.requestVerificationToken = value as string
  104 + targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX
114 } 105 }
115 106
116 //执行请求获取三方Token 107 //执行请求获取三方Token
117 const handleExecuteRequest = async () => { 108 const handleExecuteRequest = async () => {
118 try { 109 try {
119 - const originUrlString = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestOriginUrl  
120 - const requestUrlString = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestUrl  
121 - const body = cacheSelectOption.value?.dataPondRequestConfig?.pondRequestParams['Body']['json']  
122 - if(originUrlString && requestUrlString){  
123 - const request = {  
124 - requestOriginUrl: `${originUrlString}${requestUrlString}`,  
125 - body  
126 - }  
127 - const res = await customThirdInterfaceRequest(request as unknown as thirdInterfaceRequest)  
128 - resOptions.value = convertToCascadingData(res) as unknown as CascaderOption[] 110 + const request = {
  111 + requestOriginUrl: chartEditStore.getRequestGlobalConfig.requestOriginUrl,
  112 + body: chartEditStore.getRequestGlobalConfig.requestParams.Header
129 } 113 }
  114 + const res = await customThirdInterfaceRequest(request as thirdInterfaceRequest)
  115 + resOptions.value = convertToCascadingData(res) as unknown as CascaderOption[]
  116 + chartEditStore.getRequestGlobalConfig.requestVerificationMethods = verifiationValue.value
  117 + chartEditStore.getRequestGlobalConfig.requestVerificationToken = resValue.value as string
  118 + chartEditStore.getRequestGlobalConfig.requestTokenKey = requestTokenKey.value
  119 + chartEditStore.getRequestGlobalConfig.requestTokenSuffix = requestTokenSuffix.value
  120 + //存储到当前组件的请求对象里
  121 + targetData.value.request.requestTokenSuffix = requestTokenSuffix.value
  122 + targetData.value.request.requestTokenKey = requestTokenKey.value
130 } catch (e) { 123 } catch (e) {
131 getTokenString.value = JSON.stringify(e) as string 124 getTokenString.value = JSON.stringify(e) as string
132 } 125 }
133 } 126 }
134 127
135 -onMounted(()=>{  
136 - getTokenString.value = targetData.value?.request?.requestVerificationToken  
137 - selectGlobalPondValue.value = findCurrentPond()?.dataPondId as string  
138 - cacheSelectOption.value = findCurrentPond() as RequestDataPondItemType  
139 - resValue.value = targetData.value?.request?.thirdSelectCascaderLabel  
140 - handleExecuteRequest() 128 +onMounted(() => {
  129 + getTokenString.value = chartEditStore.getRequestGlobalConfig.requestVerificationToken
  130 + verifiationValue.value = chartEditStore.getRequestGlobalConfig.requestVerificationMethods || TokenEnum.DEFAULT_TOKEN
  131 + requestTokenKey.value = chartEditStore.getRequestGlobalConfig.requestTokenKey!
  132 + requestTokenSuffix.value = chartEditStore.getRequestGlobalConfig.requestTokenSuffix!
141 }) 133 })
  134 +//
142 </script> 135 </script>
143 136
144 <template> 137 <template>
@@ -146,7 +139,7 @@ onMounted(()=>{ @@ -146,7 +139,7 @@ onMounted(()=>{
146 <template #header> 139 <template #header>
147 <NTag type="info">全局公共配置</NTag> 140 <NTag type="info">全局公共配置</NTag>
148 </template> 141 </template>
149 - <NSpace v-if="requestDataPondLength<=0" vertical> 142 + <NSpace vertical>
150 <SettingItemBox 143 <SettingItemBox
151 name="服务" 144 name="服务"
152 :itemRightStyle="{ 145 :itemRightStyle="{
@@ -195,56 +188,43 @@ onMounted(()=>{ @@ -195,56 +188,43 @@ onMounted(()=>{
195 编辑配置 188 编辑配置
196 </NButton> 189 </NButton>
197 </SettingItemBox> 190 </SettingItemBox>
  191 + <!-- 针对第三方接口 -->
  192 + <SettingItemBox
  193 + name="验证方式"
  194 + :itemRightStyle="{
  195 + gridTemplateColumns: '5fr 2fr 1fr'
  196 + }"
  197 + >
  198 + <n-radio-group v-model:value="verifiationValue" name="radiogroup" @update:value="handleVerificationUpdate">
  199 + <n-space>
  200 + <n-radio
  201 + v-for="verificationItem in verificationMethods"
  202 + :key="verificationItem.value"
  203 + :value="verificationItem.value"
  204 + >
  205 + {{ verificationItem.label }}
  206 + </n-radio>
  207 + </n-space>
  208 + </n-radio-group>
  209 + </SettingItemBox>
  210 + <SettingItemBox v-if="hasDefaultToken([verifiationValue])" name="配置">
  211 + <SettingItem name="Token前缀">
  212 + <n-input v-model:value.trim="requestTokenSuffix" type="text" placeholder="例如:Bearer" />
  213 + </SettingItem>
  214 + <SettingItem name="Token键">
  215 + <n-input v-model:value.trim="requestTokenKey" type="text" placeholder="例如:X-Authorization" />
  216 + </SettingItem>
  217 + </SettingItemBox>
198 <NCollapseTransition :show="collapseHeaderTable"> 218 <NCollapseTransition :show="collapseHeaderTable">
199 - <GlobalParamsConfiguration />  
200 - </NCollapseTransition>  
201 - <section class="arrow">  
202 - <NTooltip>  
203 - <template #trigger>  
204 - <NIcon @click="handleCollapse" size="30">  
205 - <ChevronDown v-show="!collapseHeaderTable" />  
206 - <ChevronUp v-show="collapseHeaderTable" />  
207 - </NIcon>  
208 - </template>  
209 - <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span>  
210 - </NTooltip>  
211 - </section>  
212 - </NSpace>  
213 - <div v-else>  
214 - <NSelect  
215 - v-model:value="selectGlobalPondValue"  
216 - placeholder="请选择全局公共配置"  
217 - class="select-time-options"  
218 - size="small"  
219 - clearable  
220 - :options="selectGlobalPondOptions"  
221 - @update:value="handleSelectGlobalPond" 219 + <GlobalParamsConfiguration v-if="hasDefaultToken([verifiationValue])" />
  220 + <n-input
  221 + v-else-if="hasTokenString([verifiationValue])"
  222 + v-model:value="tokenString"
  223 + type="text"
  224 + placeholder="请输入令牌字符串"
222 /> 225 />
223 - <NDivider />  
224 - <SettingItemBox name="配置信息" v-if="selectGlobalPondValue" :itemRightStyle="{  
225 - gridTemplateColumns: '5fr 2fr 1fr'  
226 - }">  
227 - <SettingItem name="源地址">  
228 - <NInput  
229 - v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestOriginUrl"  
230 - disabled  
231 - ></NInput>  
232 - </SettingItem>  
233 - <SettingItem name="url地址">  
234 - <NInput  
235 - v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestUrl"  
236 - disabled  
237 - ></NInput>  
238 - </SettingItem>  
239 - <SettingItem name="请求方式">  
240 - <NInput  
241 - v-model:value="cacheSelectOption.dataPondRequestConfig.pondRequestHttpType"  
242 - disabled  
243 - ></NInput>  
244 - </SettingItem>  
245 - </SettingItemBox>  
246 - <NDivider />  
247 - <div style="margin:0 70px" v-if="selectGlobalPondValue"> 226 + <n-empty v-else description="无"> </n-empty>
  227 + <div style="margin-top: 10px">
248 <n-space vertical> 228 <n-space vertical>
249 <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button> 229 <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button>
250 <NCascader 230 <NCascader
@@ -268,7 +248,20 @@ onMounted(()=>{ @@ -268,7 +248,20 @@ onMounted(()=>{
268 /> 248 />
269 </n-space> 249 </n-space>
270 </div> 250 </div>
271 - </div> 251 + <!-- 针对第三方接口 -->
  252 + </NCollapseTransition>
  253 + <section class="arrow">
  254 + <NTooltip>
  255 + <template #trigger>
  256 + <NIcon @click="handleCollapse" size="30">
  257 + <ChevronDown v-show="!collapseHeaderTable" />
  258 + <ChevronUp v-show="collapseHeaderTable" />
  259 + </NIcon>
  260 + </template>
  261 + <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span>
  262 + </NTooltip>
  263 + </section>
  264 + </NSpace>
272 </NCard> 265 </NCard>
273 </template> 266 </template>
274 267
1 -<template>  
2 - <n-modal  
3 - class="go-chart-data-request"  
4 - v-model:show="modelShowRef"  
5 - :mask-closable="false"  
6 - :closeOnEsc="true"  
7 - :onEsc="onEsc"  
8 - >  
9 - <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">  
10 - <template #header></template>  
11 - <template #header-extra> </template>  
12 - <n-scrollbar style="max-height: 718px">  
13 - <div class="go-pr-3">  
14 - <n-space vertical>  
15 - <PondPublicConfiguration ref="pondPublicConfigurationRef" />  
16 - <NDivider />  
17 - <PondRequestConfiguration ref="pondRequestConfigurationRef" />  
18 - </n-space>  
19 - </div>  
20 - </n-scrollbar>  
21 - <!-- 底部 -->  
22 - <template #action>  
23 - <n-space justify="space-between">  
24 - <n-space v-if="targetDataRequest">  
25 - <n-tag :bordered="false" type="primary">名称:</n-tag>  
26 - <n-input  
27 - v-model:value="targetDataRequest.dataPondName"  
28 - ref="inputInstRef"  
29 - type="text"  
30 - size="small"  
31 - :autofocus="true"  
32 - :clearable="true"  
33 - :minlength="1"  
34 - :maxlength="16"  
35 - placeholder="请输入名称"  
36 - ></n-input>  
37 - </n-space>  
38 - <span v-else></span>  
39 - <n-space>  
40 - <n-button @click="closeHandle">取消</n-button>  
41 - <n-button type="primary" @click="closeAndSendHandle">保存</n-button>  
42 - </n-space>  
43 - </n-space>  
44 - </template>  
45 - </n-card>  
46 - </n-modal>  
47 -</template>  
48 -  
49 -<script script lang="ts" setup>  
50 -import { PropType, ref, watch, onMounted, nextTick } from 'vue'  
51 -import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'  
52 -import { goDialog } from '@/utils'  
53 -import PondPublicConfiguration from './PondPublicConfiguration.vue'  
54 -import PondRequestConfiguration from './PondRequestConfiguration.vue'  
55 -import { merge } from 'lodash'  
56 -import { useTargetData } from '../../../../hooks/useTargetData.hook'  
57 -  
58 -const props = defineProps({  
59 - modelShow: Boolean,  
60 - targetDataRequest: Object as PropType<RequestDataPondItemType>,  
61 -})  
62 -  
63 -const { targetData } = useTargetData()  
64 -  
65 -const pondPublicConfigurationRef = ref<InstanceType<typeof PondPublicConfiguration>>()  
66 -  
67 -const pondRequestConfigurationRef = ref<InstanceType<typeof PondRequestConfiguration>>()  
68 -  
69 -const emit = defineEmits(['update:modelShow', 'editSaveHandle'])  
70 -  
71 -const inputInstRef = ref()  
72 -  
73 -const modelShowRef = ref(false)  
74 -  
75 -watch(  
76 - () => props.modelShow,  
77 - newValue => {  
78 - modelShowRef.value = newValue  
79 - if(newValue) {  
80 - nextTick(() => {  
81 - pondPublicConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestDataPondItemType)  
82 - pondRequestConfigurationRef?.value?.setConfigurationData(props.targetDataRequest?.dataPondRequestConfig as unknown as RequestDataPondItemType)  
83 - })  
84 - }  
85 - }  
86 -)  
87 -  
88 -const closeHandle = () => {  
89 - emit('update:modelShow', false)  
90 -}  
91 -  
92 -const closeAndSendHandle = () => {  
93 - if (!props.targetDataRequest?.dataPondName) {  
94 - window.$message.warning('请在左下角输入名称!')  
95 - inputInstRef.value?.focus()  
96 - return  
97 - }  
98 - const pondPublicData = pondPublicConfigurationRef?.value?.getConfigurationData()  
99 - const pondRequestData = pondRequestConfigurationRef?.value?.getConfigurationData()  
100 - merge(props.targetDataRequest.dataPondRequestConfig, pondRequestData, pondPublicData)  
101 - goDialog({  
102 - message: '保存内容将同步修改所有使用此接口的组件, 是否继续?',  
103 - isMaskClosable: true,  
104 - transformOrigin: 'center',  
105 - onPositiveCallback: () => {  
106 - emit('update:modelShow', false)  
107 - emit('editSaveHandle', props.targetDataRequest)  
108 - }  
109 - })  
110 -}  
111 -  
112 -const onEsc = () => {  
113 - closeHandle()  
114 -}  
115 -  
116 -onMounted(()=>{  
117 - pondPublicConfigurationRef?.value?.setConfigurationData(targetData.value.request)  
118 -})  
119 -</script>  
120 -  
121 -<style lang="scss" scoped>  
122 -@include go('chart-data-request') {  
123 - &.n-card.n-modal,  
124 - .n-card {  
125 - @extend .go-background-filter;  
126 - }  
127 - .n-card-shallow {  
128 - background-color: rgba(0, 0, 0, 0) !important;  
129 - }  
130 - @include deep() {  
131 - & > .n-card__content {  
132 - padding-right: 0;  
133 - }  
134 - .n-card__content {  
135 - padding-bottom: 5px;  
136 - }  
137 - }  
138 -}  
139 -</style>  
1 -<script lang="ts" setup name="PondPublicConfiguration">  
2 -import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'  
3 -import { icon } from '@/plugins'  
4 -import {  
5 - NButton,  
6 - NCard,  
7 - NCollapseTransition,  
8 - NIcon,  
9 - NInput,  
10 - NInputGroup,  
11 - NInputNumber,  
12 - NSelect,  
13 - NSpace,  
14 - NTag,  
15 - NTooltip,  
16 - SelectOption,  
17 -} from 'naive-ui'  
18 -import { computed, ref, unref } from 'vue'  
19 -import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'  
20 -import { ChevronDown, ChevronUp } from '@vicons/carbon'  
21 -import { useDesignStore } from '@/store/modules/designStore/designStore'  
22 -import { selectTimeOptions } from '../../../index.d'  
23 -import { RequestHttpIntervalEnum } from '@/enums/httpEnum'  
24 -  
25 -const { PencilIcon } = icon.ionicons5  
26 -  
27 -const designStore = useDesignStore()  
28 -  
29 -const editDisabled = ref(false)  
30 -  
31 -const collapseHeaderTable = ref(false)  
32 -  
33 -const pondRequestOriginUrlRef= ref('')  
34 -  
35 -const pondRequestIntervalRef = ref()  
36 -  
37 -const pondRequestIntervalUnitRef = ref('')  
38 -  
39 -const pondRequestGlobalTokenSuffixRef = ref('')  
40 -  
41 -const pondRequestGlobalTokenKeyRef = ref('')  
42 -  
43 -const handleCollapse = () => {  
44 - collapseHeaderTable.value = !unref(collapseHeaderTable)  
45 -}  
46 -  
47 -// 颜色  
48 -const themeColor = computed(() => {  
49 - return designStore.getAppTheme  
50 -})  
51 -  
52 -const getConfigurationData = (): Recordable => {  
53 - return {  
54 - pondRequestOriginUrl: unref(pondRequestOriginUrlRef),  
55 - pondRequestInterval: unref(pondRequestIntervalRef),  
56 - pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef),  
57 - pondRequestGlobalTokenSuffix: unref(pondRequestGlobalTokenSuffixRef),  
58 - pondRequestGlobalTokenKey: unref(pondRequestGlobalTokenKeyRef),  
59 - }  
60 -}  
61 -  
62 -const setConfigurationData = (request: Recordable) => {  
63 - const { pondRequestOriginUrl, pondRequestInterval, pondRequestIntervalUnit, pondRequestGlobalTokenSuffix, pondRequestGlobalTokenKey } = request  
64 - pondRequestOriginUrlRef.value = pondRequestOriginUrl  
65 - pondRequestIntervalRef.value = pondRequestInterval  
66 - pondRequestIntervalUnitRef.value = pondRequestIntervalUnit  
67 - pondRequestGlobalTokenSuffixRef.value = pondRequestGlobalTokenSuffix  
68 - pondRequestGlobalTokenKeyRef.value = pondRequestGlobalTokenKey  
69 -}  
70 -  
71 -defineExpose({  
72 - getConfigurationData,  
73 - setConfigurationData  
74 -})  
75 -</script>  
76 -  
77 -<template>  
78 - <NCard>  
79 - <template #header>  
80 - <NTag type="info">全局公共配置</NTag>  
81 - </template>  
82 - <NSpace vertical>  
83 - <SettingItemBox  
84 - name="服务"  
85 - :itemRightStyle="{  
86 - gridTemplateColumns: '5fr 2fr 1fr'  
87 - }"  
88 - >  
89 - <!-- 源地址 -->  
90 - <SettingItem name="前置 URL">  
91 - <NInput  
92 - v-model:value="pondRequestOriginUrlRef"  
93 - default-value="http://127.0.0.1"  
94 - :disabled="editDisabled"  
95 - size="small"  
96 - placeholder="例:http://127.0.0.1"  
97 - ></NInput>  
98 - </SettingItem>  
99 - <SettingItem name="更新间隔,为 0 只会初始化">  
100 - <NInputGroup>  
101 - <NInputNumber  
102 - v-model:value="pondRequestIntervalRef"  
103 - class="select-time-number"  
104 - size="small"  
105 - min="0"  
106 - :show-button="false"  
107 - :disabled="editDisabled"  
108 - placeholder="请输入数字"  
109 - >  
110 - </NInputNumber>  
111 - <!-- 单位 -->  
112 - <NSelect  
113 - v-model:value="pondRequestIntervalUnitRef"  
114 - class="select-time-options"  
115 - size="small"  
116 - :default-value="RequestHttpIntervalEnum.SECOND"  
117 - :options="selectTimeOptions as SelectOption[]"  
118 - :disabled="editDisabled"  
119 - />  
120 - </NInputGroup>  
121 - </SettingItem>  
122 - <NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false">  
123 - <template #icon>  
124 - <NIcon>  
125 - <PencilIcon />  
126 - </NIcon>  
127 - </template>  
128 - 编辑配置  
129 - </NButton>  
130 - </SettingItemBox>  
131 - <!-- 针对第三方接口 -->  
132 - <SettingItemBox name="配置">  
133 - <SettingItem name="Token前缀">  
134 - <n-input v-model:value.trim="pondRequestGlobalTokenSuffixRef" type="text" placeholder="例如:Bearer" />  
135 - </SettingItem>  
136 - <SettingItem name="Token键值">  
137 - <n-input v-model:value.trim="pondRequestGlobalTokenKeyRef" type="text" placeholder="例如:Token" />  
138 - </SettingItem>  
139 - </SettingItemBox>  
140 - <NCollapseTransition :show="collapseHeaderTable">  
141 - <GlobalParamsConfiguration />  
142 - <!-- 针对第三方接口 -->  
143 - </NCollapseTransition>  
144 - <section class="arrow">  
145 - <NTooltip>  
146 - <template #trigger>  
147 - <NIcon @click="handleCollapse" size="30">  
148 - <ChevronDown v-show="!collapseHeaderTable" />  
149 - <ChevronUp v-show="collapseHeaderTable" />  
150 - </NIcon>  
151 - </template>  
152 - <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span>  
153 - </NTooltip>  
154 - </section>  
155 - </NSpace>  
156 - </NCard>  
157 -</template>  
158 -  
159 -<style lang="scss" scoped>  
160 -.arrow {  
161 - display: flex;  
162 - justify-content: center;  
163 - align-items: center;  
164 - cursor: pointer;  
165 -  
166 - &:hover {  
167 - color: v-bind('themeColor');  
168 - }  
169 -}  
170 -</style>  
1 -<script setup lang="ts">  
2 -import { NInput, NInputNumber, NInputGroup, NSelect, SelectOption, NTabs, NTabPane } from 'naive-ui'  
3 -import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'  
4 -import { selectTimeOptions, selectTypeOptions } from '../../../index.d'  
5 -import {  
6 - RequestBodyEnum,  
7 - RequestContentTypeEnum,  
8 - RequestHttpEnum,  
9 - RequestHttpIntervalEnum,  
10 - RequestParams  
11 -} from '@/enums/httpEnum'  
12 -import { ref, unref } from 'vue'  
13 -import DefaultRequestContent from './DefaultRequestContent.vue'  
14 -import SqlConfiguration from './SqlConfiguration.vue'  
15 -  
16 -const pondRequestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)  
17 -  
18 -const pondRequestHttpTypeRef = ref(RequestHttpEnum.GET)  
19 -  
20 -const pondRequestIntervalRef = ref<number | undefined>(20)  
21 -  
22 -const pondRequestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)  
23 -  
24 -const pondRequestSQLContentRef = ref('select * from where')  
25 -  
26 -const pondRequestParamsRef = ref({  
27 - Header: {},  
28 - Params: {},  
29 - Body: { 'form-data': {}, json: '', 'x-www-form-urlencoded': {}, xml: '' }  
30 -} as RequestParams)  
31 -  
32 -const pondRequestParamsBodyTypeRef = ref(RequestBodyEnum.NONE)  
33 -  
34 -const pondRequestUrlRef = ref<string>()  
35 -  
36 -const getConfigurationData = (): Recordable => {  
37 - return {  
38 - pondRequestInterval: unref(pondRequestIntervalRef),  
39 - pondRequestIntervalUnit: unref(pondRequestIntervalUnitRef),  
40 - pondRequestHttpType: unref(pondRequestHttpTypeRef),  
41 - pondRequestUrl: unref(pondRequestUrlRef),  
42 - pondRequestContentType: unref(pondRequestContentTypeRef),  
43 - pondRequestSQLContent: unref(pondRequestSQLContentRef),  
44 - pondRequestParamsBodyType: unref(pondRequestParamsBodyTypeRef),  
45 - pondRequestParams: unref(pondRequestParamsRef)  
46 - }  
47 -}  
48 -  
49 -const setConfigurationData = (request: Recordable) => {  
50 - const {  
51 - pondRequestInterval,  
52 - pondRequestIntervalUnit,  
53 - pondRequestHttpType,  
54 - pondRequestUrl,  
55 - pondRequestContentType,  
56 - pondRequestSQLContent,  
57 - pondRequestParamsBodyType,  
58 - pondRequestParams  
59 - } = request  
60 - pondRequestIntervalRef.value = pondRequestInterval  
61 - pondRequestIntervalUnitRef.value = pondRequestIntervalUnit  
62 - pondRequestHttpTypeRef.value = pondRequestHttpType  
63 - pondRequestUrlRef.value = pondRequestUrl  
64 - pondRequestContentTypeRef.value = pondRequestContentType  
65 - pondRequestSQLContentRef.value = pondRequestSQLContent  
66 - pondRequestParamsBodyTypeRef.value = pondRequestParamsBodyType  
67 - pondRequestParamsRef.value = pondRequestParams  
68 -}  
69 -  
70 -defineExpose({  
71 - getConfigurationData,  
72 - setConfigurationData  
73 -})  
74 -</script>  
75 -  
76 -<template>  
77 - <SettingItemBox  
78 - name="地址"  
79 - :itemRightStyle="{  
80 - gridTemplateColumns: '5fr 2fr 1fr'  
81 - }"  
82 - >  
83 - <SettingItem name="请求方式 & URL地址">  
84 - <NInputGroup>  
85 - <NSelect  
86 - v-model:value="pondRequestHttpTypeRef"  
87 - style="width: 150px"  
88 - size="small"  
89 - :options="(selectTypeOptions as SelectOption[])"  
90 - />  
91 - <NInput  
92 - v-model:value="pondRequestUrlRef"  
93 - class="select-time-number"  
94 - size="small"  
95 - min="0"  
96 - :show-button="false"  
97 - placeholder="请输入URL地址"  
98 - />  
99 - </NInputGroup>  
100 - </SettingItem>  
101 - <SettingItem name="更新间隔,为 0 只会初始化">  
102 - <NInputGroup>  
103 - <NInputNumber  
104 - v-model:value="pondRequestIntervalRef"  
105 - class="select-time-number"  
106 - size="small"  
107 - min="0"  
108 - :show-button="false"  
109 - placeholder="请输入数字"  
110 - />  
111 - <!-- 单位 -->  
112 - <NSelect  
113 - v-model:value="pondRequestIntervalUnitRef"  
114 - class="select-time-options"  
115 - size="small"  
116 - :options="(selectTimeOptions as SelectOption[])"  
117 - />  
118 - </NInputGroup>  
119 - </SettingItem>  
120 - </SettingItemBox>  
121 - <SettingItemBox name="选择方式">  
122 - <NTabs v-model:value="pondRequestContentTypeRef" type="segment" size="small">  
123 - <NTabPane :name="RequestContentTypeEnum.DEFAULT" tab="普通请求" />  
124 - <NTabPane :name="RequestContentTypeEnum.SQL" tab="SQL请求" />  
125 - </NTabs>  
126 - </SettingItemBox>  
127 - <SettingItemBox>  
128 - <DefaultRequestContent  
129 - v-if="pondRequestContentTypeRef === RequestContentTypeEnum.DEFAULT"  
130 - v-model:value="pondRequestParamsRef"  
131 - v-model:request-params-body-type="pondRequestParamsBodyTypeRef"  
132 - />  
133 - <SqlConfiguration  
134 - v-model:value="pondRequestSQLContentRef"  
135 - v-if="pondRequestContentTypeRef === RequestContentTypeEnum.SQL"  
136 - />  
137 - </SettingItemBox>  
138 -</template>  
@@ -35,7 +35,7 @@ const openModal = async (flag = true, type: RequestDataTypeEnum) => { @@ -35,7 +35,7 @@ const openModal = async (flag = true, type: RequestDataTypeEnum) => {
35 requestDataType.value = type 35 requestDataType.value = type
36 showModal.value = flag 36 showModal.value = flag
37 await nextTick() 37 await nextTick()
38 - console.log(unref(selectTarget)!.request) 38 +
39 unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {}) 39 unref(componentConfigurationEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
40 unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {}) 40 unref(publicInterfaceFormEl as any)?.setConfigurationData(unref(selectTarget)!.request || {})
41 } 41 }
@@ -85,19 +85,20 @@ const sendHandle = async () => { @@ -85,19 +85,20 @@ const sendHandle = async () => {
85 } 85 }
86 } 86 }
87 87
  88 +const setRequestKey = (value: Recordable, key: string) => {
  89 + value[key] =
  90 + targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
  91 + ? (targetData.value.request as unknown as Recordable)[key] ||
  92 + (chartEditStore.getRequestGlobalConfig as unknown as Recordable)[key]
  93 + : null
  94 +}
  95 +
88 const handleSaveAction = async () => { 96 const handleSaveAction = async () => {
89 if (!(await validate())) return 97 if (!(await validate())) return
90 - let value = getResult()  
91 - value.pondRequestGlobalTokenKey = targetData.value.request.pondRequestGlobalTokenKey  
92 - value.pondRequestGlobalTokenSuffix = targetData.value.request.pondRequestGlobalTokenSuffix  
93 - value.pondRequestInterval = targetData.value.request.pondRequestInterval  
94 - value.pondRequestIntervalUnit= targetData.value.request.pondRequestIntervalUnit  
95 - value.pondRequestOriginUrl= targetData.value.request.pondRequestOriginUrl  
96 - value.requestVerificationToken = targetData.value.request.requestVerificationToken  
97 - value.requestDataPondId = targetData.value.request.requestDataPondId  
98 - value.thirdSelectCascaderLabel = targetData.value.request.thirdSelectCascaderLabel  
99 - value.requestDataType = targetData.value.request.requestDataType  
100 - value.publicInterfaceSelectId = targetData.value.request.publicInterfaceSelectId 98 + const value = getResult()
  99 + setRequestKey(value, 'requestTokenSuffix')
  100 + setRequestKey(value, 'requestTokenKey')
  101 + setRequestKey(value, 'requestVerificationToken')
101 if (unref(selectTarget)) { 102 if (unref(selectTarget)) {
102 chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), { 103 chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
103 ...unref(selectTarget)!, 104 ...unref(selectTarget)!,