Commit 49c465bfa3a58c410de5b3f2259d8bb99a7f1c23
Merge branch 'ww' into 'main_dev'
fix(get publicInterface): 修复获取公共接口参数传递错误 See merge request yunteng/thingskit-view!27
Showing
11 changed files
with
249 additions
and
99 deletions
1 | -import { RequestBodyEnum } from "@/enums/httpEnum" | |
1 | +import { RequestBodyEnum, RequestParams } from "@/enums/httpEnum" | |
2 | 2 | import { ExternalRequestType, ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d" |
3 | 3 | import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" |
4 | 4 | import { defHttp } from "@/utils/external/http/axios" |
... | ... | @@ -16,12 +16,19 @@ const getOriginUrl = (originUrl: string) => { |
16 | 16 | const regOptionalParams = /(?={\?)/g |
17 | 17 | const regDynamicParams = /(?={).+?(?<=})/g |
18 | 18 | |
19 | +/** | |
20 | + * @description 判断是否是动态参数 | |
21 | + * @param url | |
22 | + */ | |
19 | 23 | export const isDynamicUrl = (url: string) => { |
20 | 24 | regDynamicParams.lastIndex = 0 |
21 | - | |
22 | 25 | return regDynamicParams.test(url) |
23 | 26 | } |
24 | 27 | |
28 | +/** | |
29 | + * @description 解析动态参数 | |
30 | + * @param url | |
31 | + */ | |
25 | 32 | export const decomposeDynamicParams = (url: string) => { |
26 | 33 | regDynamicParams.lastIndex = 0 |
27 | 34 | regOptionalParams.lastIndex = 0 |
... | ... | @@ -35,6 +42,48 @@ export const decomposeDynamicParams = (url: string) => { |
35 | 42 | }) |
36 | 43 | } |
37 | 44 | |
45 | +/** | |
46 | + * @description 正则替换url中的动态参数 | |
47 | + * @param requestUrl | |
48 | + * @param Params | |
49 | + */ | |
50 | +const getDynamicRequestUrl = (requestUrl = '', Params: Recordable) => { | |
51 | + requestUrl = decodeURI(requestUrl || '') | |
52 | + | |
53 | + const paramsList = decomposeDynamicParams(requestUrl) | |
54 | + requestUrl = paramsList.reduce((prev, next) => { | |
55 | + const { type, value, originValue } = next | |
56 | + if (type === ParamsType.REQUIRED) { | |
57 | + value.forEach(key => { | |
58 | + prev = prev.replace(key, Reflect.get(Params, key)) | |
59 | + Reflect.deleteProperty(Params, key) | |
60 | + }) | |
61 | + } | |
62 | + | |
63 | + if (type === ParamsType.OPTIONAL) { | |
64 | + prev = prev.replace(originValue, '') | |
65 | + } | |
66 | + | |
67 | + return prev | |
68 | + }, requestUrl) | |
69 | + | |
70 | + return requestUrl.replaceAll(/[{}?]/g, '') | |
71 | +} | |
72 | + | |
73 | +const transformBodyValue = (body: RequestParams['Body'], requestParamsBodyType: RequestBodyEnum) => { | |
74 | + let value = Reflect.get(body, requestParamsBodyType) | |
75 | + | |
76 | + if (requestParamsBodyType === RequestBodyEnum.FORM_DATA) { | |
77 | + const formData = new FormData() | |
78 | + Object.keys(value as RequestParams['Body']['form-data']).forEach(key => { | |
79 | + formData.append(key, value[key]) | |
80 | + }) | |
81 | + value = formData | |
82 | + } | |
83 | + | |
84 | + return value | |
85 | +} | |
86 | + | |
38 | 87 | export const customRequest = async (request: RequestConfigType) => { |
39 | 88 | console.log(request) |
40 | 89 | const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType |
... | ... | @@ -44,35 +93,13 @@ export const customRequest = async (request: RequestConfigType) => { |
44 | 93 | Params = JSON.parse(JSON.stringify(Params)) |
45 | 94 | const isDynamicUrlFlag = isDynamicUrl(requestUrl || '') |
46 | 95 | |
47 | - | |
48 | - | |
49 | 96 | if (isDynamicUrlFlag) { |
50 | - requestUrl = decodeURI(requestUrl || '') | |
51 | - | |
52 | - const paramsList = decomposeDynamicParams(requestUrl) | |
53 | - requestUrl = paramsList.reduce((prev, next) => { | |
54 | - const { type, value, originValue } = next | |
55 | - if (type === ParamsType.REQUIRED) { | |
56 | - value.forEach(key => { | |
57 | - prev = prev.replace(key, Reflect.get(Params, key)) | |
58 | - Reflect.deleteProperty(Params, key) | |
59 | - }) | |
60 | - } | |
61 | - | |
62 | - if (type === ParamsType.OPTIONAL) { | |
63 | - prev = prev.replace(originValue, '') | |
64 | - } | |
65 | - | |
66 | - return prev | |
67 | - }, requestUrl) | |
68 | - | |
69 | - requestUrl = requestUrl.replaceAll(/[{}?]/g, '') | |
97 | + requestUrl = getDynamicRequestUrl(requestUrl, Params) | |
70 | 98 | } |
71 | 99 | |
72 | - const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>] | |
100 | + const body = transformBodyValue(Body, requestParamsBodyType) | |
101 | + console.log({ body, requestParamsBodyType, Params }) | |
73 | 102 | |
74 | - Reflect.deleteProperty(Params, 'date') | |
75 | - console.log(Header) | |
76 | 103 | return defHttp.request<any>({ |
77 | 104 | url: requestUrl, |
78 | 105 | baseURL: getOriginUrl(requestOriginUrl!), | ... | ... |
... | ... | @@ -55,7 +55,6 @@ export const getDeviceInterfaceDetail = async (interfaces: string[]) => { |
55 | 55 | |
56 | 56 | export const getAllPublicInterface = async (params?: { state: PublicInterfaceStateEnum }) => { |
57 | 57 | return defHttp.get<PublicInterfaceRecord[]>({ |
58 | - // url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}`, | |
59 | - url: Api.GET_PUBLIC_INTERFACE_ALL, | |
58 | + url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}` | |
60 | 59 | }) |
61 | 60 | } | ... | ... |
1 | -import { RequestParams as OriginRequestParams } from "@/enums/httpEnum" | |
1 | +import { RequestBodyEnum, RequestParams as OriginRequestParams } from "@/enums/httpEnum" | |
2 | 2 | |
3 | 3 | export enum PublicInterfaceStateEnum { |
4 | 4 | PUBLISH = 1, |
5 | 5 | UN_PUBLISH = 0 |
6 | 6 | } |
7 | 7 | |
8 | -export interface RequestParams { | |
9 | - Body: Recordable | |
10 | - Header: Recordable | |
11 | - Params: { | |
12 | - key: string | |
13 | - required: boolean | |
14 | - value: string | |
15 | - }[] | |
8 | +export interface ParamsItemType { | |
9 | + key: string | |
10 | + required: boolean | |
11 | + value: string | |
12 | +} | |
13 | + | |
14 | +export interface PublicInterfaceRequestParams { | |
15 | + Body: { | |
16 | + requestParamsBodyType?: RequestBodyEnum | |
17 | + [RequestBodyEnum.XML]: string | |
18 | + [RequestBodyEnum.JSON]: string | |
19 | + [RequestBodyEnum.FORM_DATA]: ParamsItemType[] | |
20 | + [RequestBodyEnum.X_WWW_FORM_URLENCODED]: ParamsItemType[] | |
21 | + } | |
22 | + Header: ParamsItemType[] | |
23 | + Params: ParamsItemType[] | |
16 | 24 | } |
17 | 25 | |
18 | 26 | export interface PublicInterfaceRecord { |
... | ... | @@ -29,7 +37,7 @@ export interface PublicInterfaceRecord { |
29 | 37 | requestHttpType: string, |
30 | 38 | requestParamsBodyType: string, |
31 | 39 | requestUrl: string, |
32 | - requestParams: string | OriginRequestParams, | |
40 | + requestParams: string, | |
33 | 41 | } |
34 | 42 | |
35 | 43 | ... | ... |
src/views/chart/ContentConfigurations/components/ChartData/external/components/DynamicForm/index.vue
1 | 1 | <script lang="ts" setup> |
2 | -import { PublicInterfaceRecord } from '@/api/external/dynamicRequest/model'; | |
2 | +import { ParamsItemType, PublicInterfaceRecord } from '@/api/external/dynamicRequest/model'; | |
3 | 3 | import { RequestParams } from '@/enums/httpEnum'; |
4 | 4 | import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSelect } from 'naive-ui' |
5 | -import { computed, ref, unref, watch } from 'vue'; | |
6 | -import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | |
7 | -import { transferData } from './utils'; | |
5 | +import { computed, nextTick, ref, unref, watch } from 'vue'; | |
6 | +import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | |
8 | 7 | |
9 | 8 | const props = defineProps<{ |
10 | - publicInterfaceRecord: PublicInterfaceRecord | |
9 | + paramsItemList: ParamsItemType[] | |
11 | 10 | }>() |
12 | 11 | |
13 | 12 | const componentMap: { [key in ComponentType]?: any } = { |
... | ... | @@ -17,15 +16,16 @@ const componentMap: { [key in ComponentType]?: any } = { |
17 | 16 | [ComponentType.DATE_PICKER]: NDatePicker |
18 | 17 | } |
19 | 18 | |
20 | -const getPublicInterfaceRecord = computed(() => { | |
21 | - return props.publicInterfaceRecord | |
19 | +const getParamsItemList = computed(() => { | |
20 | + return props.paramsItemList | |
22 | 21 | }) |
22 | + | |
23 | 23 | const dynamicFormItemEl = ref<FormItemInst[]>() |
24 | 24 | |
25 | -const { getDynamicFormSchemas, validFlag, getValue, createForm, clearParams, setDynamicFormValue } = useDynamicPublicForm(getPublicInterfaceRecord) | |
25 | +const { getDynamicFormSchemas, validFlag, getValue, createForm, clearParams, setDynamicFormValue } = useDynamicPublicForm(getParamsItemList) | |
26 | 26 | |
27 | 27 | const getConfigurationData = () => { |
28 | - return transferData(unref(getPublicInterfaceRecord), unref(getValue)) | |
28 | + return unref(getValue) | |
29 | 29 | } |
30 | 30 | |
31 | 31 | const validate = async () => { |
... | ... | @@ -34,12 +34,13 @@ const validate = async () => { |
34 | 34 | } |
35 | 35 | return unref(validFlag) |
36 | 36 | } |
37 | -const setConfigurationData = async (requestParams: RequestParams) => { | |
38 | - setDynamicFormValue(requestParams) | |
37 | +const setConfigurationData = async (params: Recordable) => { | |
38 | + await nextTick() | |
39 | + setDynamicFormValue(params) | |
39 | 40 | } |
40 | 41 | |
41 | 42 | watch( |
42 | - () => props.publicInterfaceRecord, | |
43 | + () => props.paramsItemList, | |
43 | 44 | (newValue) => { |
44 | 45 | if (newValue) { |
45 | 46 | clearParams() | ... | ... |
1 | 1 | import { getDictItemByCode } from "@/api/external/common" |
2 | 2 | import { DictItem } from "@/api/external/common/model" |
3 | 3 | import { getDeviceAttrList, getDeviceList, getDeviceProfileList, getOrgList } from "@/api/external/dynamicRequest" |
4 | -import { PublicInterfaceRecord, RequestParams } from "@/api/external/dynamicRequest/model" | |
4 | +import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams } from "@/api/external/dynamicRequest/model" | |
5 | 5 | import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" |
6 | 6 | import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui" |
7 | -import { computed, onMounted, reactive, Ref, ref, unref, watch } from "vue" | |
7 | +import { computed, onMounted, reactive, Ref, ref, unref } from "vue" | |
8 | 8 | import { DictEnum } from '@/enums/external/dictEnum' |
9 | 9 | |
10 | 10 | const GROUP_SEPARATOR = ',' |
... | ... | @@ -41,12 +41,10 @@ const isDateComponent = (type: BuiltInVariable) => { |
41 | 41 | return [BuiltInVariable.DATE_FIXED, BuiltInVariable.DATE_RANGE].includes(type) |
42 | 42 | } |
43 | 43 | |
44 | -export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => { | |
44 | +export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | |
45 | 45 | |
46 | - const getParams = computed(() => { | |
47 | - let params = (publicInterfaceRef.value.requestParams as unknown as RequestParams).Params || [] | |
48 | - if (!Array.isArray(params)) params = [] | |
49 | - return params | |
46 | + const getParams = computed<ParamsItemType[]>(() => { | |
47 | + return unref(paramsItemList) || [] | |
50 | 48 | }) |
51 | 49 | |
52 | 50 | const getUsedBuiltInVariable = computed(() => { |
... | ... | @@ -312,8 +310,8 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco |
312 | 310 | |
313 | 311 | } |
314 | 312 | |
315 | - const getDynamicFormSchemas = computed(() => { | |
316 | - return unref(getParams).reduce((prev, { key, value, required }) => { | |
313 | + const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => { | |
314 | + return unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required }) => { | |
317 | 315 | const schemas = toFormSchemas(key, required, value) |
318 | 316 | return [...prev, ...schemas] |
319 | 317 | }, [] as DynamicFormSchema[]) |
... | ... | @@ -342,7 +340,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco |
342 | 340 | for (const temp of splitKeys) { |
343 | 341 | params[temp] = Params[temp] |
344 | 342 | } |
345 | - } | |
343 | + } | |
346 | 344 | } |
347 | 345 | |
348 | 346 | const clearParams = () => { |
... | ... | @@ -351,9 +349,8 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco |
351 | 349 | }) |
352 | 350 | } |
353 | 351 | |
354 | - const setDynamicFormValue = (requestParams: RequestConfigType['requestParams']) => { | |
355 | - const { Params } = requestParams | |
356 | - setParams(Params) | |
352 | + const setDynamicFormValue = (params: Recordable) => { | |
353 | + setParams(params) | |
357 | 354 | getOrgOption() |
358 | 355 | getDeviceProfileOption() |
359 | 356 | getDeviceOption() | ... | ... |
1 | -import { PublicInterfaceRecord } from "@/api/external/dynamicRequest/model" | |
1 | +import { PublicInterfaceRecord, PublicInterfaceRequestParams } from "@/api/external/dynamicRequest/model" | |
2 | 2 | import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum" |
3 | -import { ExternalRequestType } from "@/store/external/modules/extraComponentInfo.d" | |
3 | +import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d" | |
4 | 4 | import { unref } from "vue" |
5 | 5 | |
6 | -export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, fillParams: Recordable, fillBody: Recordable = {}) => { | |
7 | - const { requestContentType, requestHttpType, id, requestUrl, requestOriginUrl, requestParams } = publicInterfaceRecord | |
8 | - const { Header, Body } = requestParams as RequestParams | |
6 | +export const extraPublicInterfaceInfo = (publicInterfaceRecord: PublicInterfaceRecord) => { | |
7 | + const { requestContentType, requestHttpType, id, requestUrl, requestOriginUrl, requestParams = {} } = unref(publicInterfaceRecord) | |
8 | + const { Body = {} } = requestParams as unknown as PublicInterfaceRequestParams | |
9 | 9 | const { requestParamsBodyType } = Body as Recordable |
10 | 10 | return { |
11 | 11 | requestDataPondId: id, |
... | ... | @@ -28,10 +28,15 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, fillP |
28 | 28 | // } |
29 | 29 | // requestIntervalUnit |
30 | 30 | requestParams: { |
31 | - Header, | |
32 | - Body: unref(fillBody), | |
33 | - Params: unref(fillParams) | |
34 | - } | |
31 | + Header: {}, | |
32 | + Body: { | |
33 | + 'form-data': {}, | |
34 | + 'json': '', | |
35 | + 'x-www-form-urlencoded': {}, | |
36 | + xml: '' | |
37 | + }, | |
38 | + Params: {} | |
39 | + } as RequestParams | |
35 | 40 | |
36 | - } as ExternalRequestType | |
41 | + } as ExtraRequestConfigType | |
37 | 42 | } | ... | ... |
1 | +<script lang="ts" setup> | |
2 | +import { ParamsItemType, PublicInterfaceRequestParams } from '@/api/external/dynamicRequest/model'; | |
3 | +import { MonacoEditor } from '@/components/Pages/MonacoEditor'; | |
4 | +import { RequestBodyEnum, RequestBodyEnumList, RequestParams } from '@/enums/httpEnum'; | |
5 | +import { NCard, NText, NRadioGroup, NRadio, NSpace } from 'naive-ui'; | |
6 | +import { computed, ref, unref } from 'vue'; | |
7 | +import { DynamicForm } from '../DynamicForm'; | |
8 | + | |
9 | +const editorValue = ref('') | |
10 | + | |
11 | +const requestParamsBodyType = ref(RequestBodyEnum.X_WWW_FORM_URLENCODED) | |
12 | + | |
13 | +const paramsItemList = ref<ParamsItemType[]>([]) | |
14 | + | |
15 | +const dynamicFormEl = ref<Nullable<InstanceType<typeof DynamicForm>>>(null) | |
16 | + | |
17 | +const getLanguage = computed(() => { | |
18 | + return unref(requestParamsBodyType) === RequestBodyEnum.JSON | |
19 | + ? 'json' | |
20 | + : unref(requestParamsBodyType) === RequestBodyEnum.XML | |
21 | + ? 'xml' | |
22 | + : 'json' | |
23 | +}) | |
24 | + | |
25 | +const isDynamicForm = computed(() => { | |
26 | + return [RequestBodyEnum.FORM_DATA, RequestBodyEnum.X_WWW_FORM_URLENCODED].includes(unref(requestParamsBodyType)) | |
27 | +}) | |
28 | + | |
29 | +const isEditor = computed(() => { | |
30 | + return [RequestBodyEnum.XML, RequestBodyEnum.JSON].includes(unref(requestParamsBodyType)) | |
31 | +}) | |
32 | + | |
33 | +const setConfigurationData = (params: PublicInterfaceRequestParams['Body'], value: Recordable) => { | |
34 | + const { requestParamsBodyType: type, } = params || {} | |
35 | + if (!type) return | |
36 | + requestParamsBodyType.value = type | |
37 | + | |
38 | + const paramsValue = Reflect.get(params, type) | |
39 | + if (unref(isEditor)) { | |
40 | + editorValue.value = paramsValue | |
41 | + } else if (unref(isDynamicForm)) { | |
42 | + paramsItemList.value = paramsValue | |
43 | + const needSetValue = Reflect.get(value, type) | |
44 | + unref(dynamicFormEl)?.setConfigurationData(needSetValue) | |
45 | + } | |
46 | + | |
47 | +} | |
48 | + | |
49 | +const getConfigurationData = () => { | |
50 | + const value = unref(dynamicFormEl)?.getConfigurationData() | |
51 | + const getValue = unref(isDynamicForm) ? value : unref(isEditor) ? unref(editorValue) : {} | |
52 | + const record = { | |
53 | + 'form-data': {}, | |
54 | + 'x-www-form-urlencoded': {}, | |
55 | + xml: '', | |
56 | + json: '' | |
57 | + } as RequestParams['Body'] | |
58 | + | |
59 | + Reflect.set(record, unref(requestParamsBodyType), getValue) | |
60 | + return record | |
61 | +} | |
62 | + | |
63 | +defineExpose({ | |
64 | + getConfigurationData, | |
65 | + setConfigurationData | |
66 | +}) | |
67 | + | |
68 | +</script> | |
69 | + | |
70 | +<template> | |
71 | + <section> | |
72 | + <NRadioGroup :value="requestParamsBodyType" style="margin-bottom: 20px;"> | |
73 | + <NSpace> | |
74 | + <NRadio v-for="item in RequestBodyEnumList" :key="item" :value="item" :disabled="item !== requestParamsBodyType"> | |
75 | + {{ item }} | |
76 | + </NRadio> | |
77 | + </NSpace> | |
78 | + </NRadioGroup> | |
79 | + <NCard> | |
80 | + <NCard v-if="requestParamsBodyType === RequestBodyEnum.NONE"> | |
81 | + <NText depth="3">该接口没有 Body 体</NText> | |
82 | + </NCard> | |
83 | + <DynamicForm v-if="isDynamicForm" ref="dynamicFormEl" :paramsItemList="paramsItemList" /> | |
84 | + <MonacoEditor v-if="isEditor" v-model:modelValue="editorValue" width="600px" height="200px" | |
85 | + :language="getLanguage" /> | |
86 | + </NCard> | |
87 | + </section> | |
88 | +</template> | ... | ... |
1 | 1 | <script lang="ts" setup> |
2 | 2 | import { getAllPublicInterface } from '@/api/external/dynamicRequest' |
3 | -import { PublicInterfaceRecord, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model'; | |
3 | +import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model'; | |
4 | 4 | import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'; |
5 | 5 | import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum'; |
6 | 6 | import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum'; |
... | ... | @@ -8,9 +8,11 @@ import { NCard, NEmpty, NInputGroup, NInputNumber, NScrollbar, NSelect, NTabPane |
8 | 8 | import { ref, computed, unref, nextTick } from 'vue' |
9 | 9 | import { selectTimeOptions, selectTypeOptions } from '../../../index.d'; |
10 | 10 | import ParamsTable from '../RequestModal/ParamsTable.vue'; |
11 | -import RequestBody from '../RequestModal/RequestBody.vue'; | |
11 | +import BodyContent from './BodyContent.vue' | |
12 | 12 | import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d'; |
13 | 13 | import { DynamicForm } from '../DynamicForm'; |
14 | +import { extraPublicInterfaceInfo } from '../DynamicForm/utils'; | |
15 | +import { isArray } from '@/utils'; | |
14 | 16 | |
15 | 17 | const publicInterfaceList = ref<PublicInterfaceRecord[]>([]) |
16 | 18 | |
... | ... | @@ -31,6 +33,14 @@ const getSelectedInterface = computed<PublicInterfaceRecord>(() => { |
31 | 33 | return _record |
32 | 34 | }) |
33 | 35 | |
36 | +const getSelectedInterfaceBody = computed<PublicInterfaceRequestParams['Body']>(() => { | |
37 | + return (unref(getSelectedInterface).requestParams as unknown as PublicInterfaceRequestParams).Body || {} | |
38 | + | |
39 | +}) | |
40 | +const getSelectedInterfaceParams = computed(() => { | |
41 | + return (unref(getSelectedInterface).requestParams as unknown as PublicInterfaceRequestParams).Params || [] | |
42 | +}) | |
43 | + | |
34 | 44 | const getPublicInterfaceList = async () => { |
35 | 45 | if (unref(publicInterfaceList).length) return |
36 | 46 | const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH }) |
... | ... | @@ -58,12 +68,16 @@ const requestParamsBodyTypeRef = ref<RequestBodyEnum>(RequestBodyEnum.X_WWW_FORM |
58 | 68 | |
59 | 69 | const headerRef = ref() |
60 | 70 | |
61 | -const paramsDynamicFormEl = ref<InstanceType<typeof DynamicForm>>() | |
62 | -const socketDynamicFormEl = ref<InstanceType<typeof DynamicForm>>() | |
71 | +const paramsDynamicFormEl = ref<Nullable<InstanceType<typeof DynamicForm>>>(null) | |
72 | +const bodyContentEl = ref<Nullable<InstanceType<typeof BodyContent>>>(null) | |
73 | +const socketDynamicFormEl = ref<Nullable<InstanceType<typeof DynamicForm>>>(null) | |
63 | 74 | |
64 | -const handleSelectedInterfaceChange = (value: string, option: PublicInterfaceRecord) => { | |
75 | +const handleSelectedInterfaceChange = (_value: string, option: PublicInterfaceRecord) => { | |
65 | 76 | requestContentTypeRef.value = option.requestContentType as RequestContentTypeEnum |
66 | 77 | requestHttpTypeRef.value = option.requestHttpType as RequestHttpEnum |
78 | + const { Header = [], Body } = JSON.parse(option.requestParams) as PublicInterfaceRequestParams | |
79 | + headerRef.value = isArray(Header) ? (Header as ParamsItemType[]).reduce((prev, next) => ({ ...prev, [next.key]: next.value }), {}) : {} | |
80 | + unref(bodyContentEl)?.setConfigurationData(Body) | |
67 | 81 | } |
68 | 82 | |
69 | 83 | const getGetRequestTypeName = (key: RequestContentTypeEnum) => { |
... | ... | @@ -75,15 +89,28 @@ const validate = async () => { |
75 | 89 | if (unref(socketDynamicFormEl)) return await unref(socketDynamicFormEl)?.validate() |
76 | 90 | } |
77 | 91 | |
78 | -const setDynamicFormValue = (requestParams: RequestParams) => { | |
79 | - if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData(requestParams) | |
80 | - if (unref(socketDynamicFormEl)) unref(socketDynamicFormEl)?.setConfigurationData(requestParams) | |
92 | +const setDynamicFormValue = (request: ExtraRequestConfigType) => { | |
93 | + const { requestParams: { Params, Body } } = request | |
94 | + if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData(Params) | |
95 | + if (unref(socketDynamicFormEl)) unref(socketDynamicFormEl)?.setConfigurationData(Params) | |
96 | + if (unref(bodyContentEl)) { | |
97 | + unref(bodyContentEl)?.setConfigurationData(unref(getSelectedInterfaceBody), Body) | |
98 | + } | |
81 | 99 | } |
82 | 100 | |
101 | +const getDynamicFormValue = (): Recordable => { | |
102 | + if (unref(paramsDynamicFormEl)) return unref(paramsDynamicFormEl)?.getConfigurationData() || {} | |
103 | + if (unref(socketDynamicFormEl)) return unref(socketDynamicFormEl)?.getConfigurationData() || {} | |
104 | + return {} | |
105 | +} | |
83 | 106 | |
84 | 107 | const getConfigurationData = () => { |
85 | - if (unref(paramsDynamicFormEl)) return unref(paramsDynamicFormEl)?.getConfigurationData() | |
86 | - if (unref(socketDynamicFormEl)) return unref(socketDynamicFormEl)?.getConfigurationData() | |
108 | + const record = extraPublicInterfaceInfo(unref(getSelectedInterface)) | |
109 | + const bodyValue = unref(bodyContentEl)?.getConfigurationData() || {} as RequestParams['Body'] | |
110 | + record.requestParams[RequestParamsTypeEnum.PARAMS] = getDynamicFormValue() | |
111 | + record.requestParams[RequestParamsTypeEnum.HEADER] = unref(headerRef) | |
112 | + record.requestParams[RequestParamsTypeEnum.BODY] = bodyValue | |
113 | + return record | |
87 | 114 | } |
88 | 115 | |
89 | 116 | const setConfigurationData = async (request: ExtraRequestConfigType) => { |
... | ... | @@ -97,7 +124,8 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => { |
97 | 124 | requestParamsBodyTypeRef.value = requestParamsBodyType |
98 | 125 | requestBodyRef.value = requestParams |
99 | 126 | await nextTick() |
100 | - setDynamicFormValue(requestParams) | |
127 | + console.log(request) | |
128 | + setDynamicFormValue(request) | |
101 | 129 | } |
102 | 130 | |
103 | 131 | defineExpose({ |
... | ... | @@ -156,13 +184,12 @@ defineExpose({ |
156 | 184 | :item-right-style="{ gridTemplateColumns: '7fr 1fr' }"> |
157 | 185 | <NCard v-show="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form"> |
158 | 186 | <NScrollbar style="max-height: 400px; box-sizing: border-box;"> |
159 | - <DynamicForm ref="paramsDynamicFormEl" :public-interface-record="getSelectedInterface" /> | |
187 | + <DynamicForm ref="paramsDynamicFormEl" :paramsItemList="getSelectedInterfaceParams" /> | |
160 | 188 | <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" /> |
161 | 189 | </NScrollbar> |
162 | 190 | </NCard> |
163 | 191 | |
164 | - <RequestBody v-show="requestParamsTypeRef === RequestParamsTypeEnum.BODY" | |
165 | - v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestBodyRef" /> | |
192 | + <BodyContent v-show="requestParamsTypeRef === RequestParamsTypeEnum.BODY" ref="bodyContentEl" /> | |
166 | 193 | |
167 | 194 | <ParamsTable v-show="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" |
168 | 195 | :disabled="true" /> |
... | ... | @@ -172,7 +199,7 @@ defineExpose({ |
172 | 199 | <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET"> |
173 | 200 | <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form"> |
174 | 201 | <NScrollbar style="max-height: 400px; box-sizing: border-box;"> |
175 | - <DynamicForm ref="socketDynamicFormEl" :public-interface-record="getSelectedInterface" /> | |
202 | + <DynamicForm ref="socketDynamicFormEl" :paramsItemList="getSelectedInterfaceParams" /> | |
176 | 203 | <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" /> |
177 | 204 | </NScrollbar> |
178 | 205 | </NCard> | ... | ... |
... | ... | @@ -89,7 +89,7 @@ const columns: DataTableColumns<DataSource> = [ |
89 | 89 | size: 'small', |
90 | 90 | ghost: true, |
91 | 91 | onClick: () => handleSubtractRow(row), |
92 | - disabled: props.disabled || !unref(canDeleteRow) | |
92 | + // disabled: props.disabled || !unref(canDeleteRow) | |
93 | 93 | } as ButtonProps, |
94 | 94 | { |
95 | 95 | default: () => h(NIcon, () => h(Subtract)) |
... | ... | @@ -124,13 +124,7 @@ const props = withDefaults( |
124 | 124 | maxRow: 50, |
125 | 125 | } |
126 | 126 | ) |
127 | - | |
128 | -watch( | |
129 | - () => props.value, | |
130 | - () => { | |
131 | - console.log(props.value) | |
132 | - } | |
133 | -) | |
127 | + | |
134 | 128 | |
135 | 129 | const emit = defineEmits(['update:value']) |
136 | 130 | |
... | ... | @@ -172,6 +166,11 @@ const handleAddRow = (record: DataSource) => { |
172 | 166 | |
173 | 167 | const handleSubtractRow = (record: DataSource) => { |
174 | 168 | const index = unref(dataSource).findIndex(item => item.id === record.id) |
169 | + if (unref(dataSource).length === 1) { | |
170 | + unref(dataSource)[index].keyName = '' | |
171 | + unref(dataSource)[index].value = '' | |
172 | + return | |
173 | + } | |
175 | 174 | unref(dataSource).splice(index, 1) |
176 | 175 | } |
177 | 176 | ... | ... |
... | ... | @@ -70,6 +70,7 @@ const getResult = () => { |
70 | 70 | const handleSaveAction = async () => { |
71 | 71 | if (!(await validate())) return |
72 | 72 | const value = getResult() |
73 | + console.log(value) | |
73 | 74 | if (unref(selectTarget)) { |
74 | 75 | chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), { |
75 | 76 | ...unref(selectTarget)!, | ... | ... |
... | ... | @@ -44,7 +44,6 @@ export const useSyncRemote = () => { |
44 | 44 | * @returns |
45 | 45 | */ |
46 | 46 | const updateStoreInfo = (projectData: DateViewConfigurationInfoType) => { |
47 | - console.log(projectData) | |
48 | 47 | projectInfoStore.setProjectInfo(projectData) |
49 | 48 | } |
50 | 49 | |
... | ... | @@ -102,7 +101,6 @@ export const useSyncRemote = () => { |
102 | 101 | |
103 | 102 | // 保存预览图 |
104 | 103 | if (uploadRes) { |
105 | - console.log(projectInfoStore.getProjectInfo) | |
106 | 104 | await saveDataViewList({ |
107 | 105 | name: dataViewName, |
108 | 106 | organizationId, | ... | ... |