Commit 404e3c93e1a444d69e9da13ce53e76cd8ef0e8b6
1 parent
8b389c18
feat(dynamic request): 新增动态接口body参数和header参数
Showing
10 changed files
with
248 additions
and
97 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!), | ... | ... |
| 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, | ... | ... |