Merge branch 'ww' into 'main_dev'

fix(get publicInterface): 修复获取公共接口参数传递错误

See merge request yunteng/thingskit-view!27

(cherry picked from commit 49c465bf)

8b389c18 fix(get publicInterface): 修复获取公共接口参数传递错误
404e3c93 feat(dynamic request): 新增动态接口body参数和header参数

-import { RequestBodyEnum } from "@/enums/httpEnum"
+import { RequestBodyEnum, RequestParams } from "@/enums/httpEnum"
 import { ExternalRequestType, ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
 import { ExternalRequestType, ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
 import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { defHttp } from "@/utils/external/http/axios"
 import { defHttp } from "@/utils/external/http/axios"
@@ -16,12 +16,19 @@ const getOriginUrl = (originUrl: string) => {
 const regOptionalParams = /(?={\?)/g
 const regOptionalParams = /(?={\?)/g
 const regDynamicParams = /(?={).+?(?<=})/g
 const regDynamicParams = /(?={).+?(?<=})/g
 
 
+/**
+ * @description 判断是否是动态参数
+ * @param url 
+ */
 export const isDynamicUrl = (url: string) => {
 export const isDynamicUrl = (url: string) => {
   regDynamicParams.lastIndex = 0
   regDynamicParams.lastIndex = 0
-
   return regDynamicParams.test(url)
   return regDynamicParams.test(url)
 }
 }
 
 
+/**
+ * @description 解析动态参数
+ * @param url 
+ */
 export const decomposeDynamicParams = (url: string) => {
 export const decomposeDynamicParams = (url: string) => {
   regDynamicParams.lastIndex = 0
   regDynamicParams.lastIndex = 0
   regOptionalParams.lastIndex = 0
   regOptionalParams.lastIndex = 0
@@ -35,6 +42,48 @@ export const decomposeDynamicParams = (url: string) => {
   })
   })
 }
 }
 
 
+/**
+ * @description 正则替换url中的动态参数
+ * @param requestUrl 
+ * @param Params 
+ */
+const getDynamicRequestUrl = (requestUrl = '', Params: Recordable) => {
+  requestUrl = decodeURI(requestUrl || '')
+
+  const paramsList = decomposeDynamicParams(requestUrl)
+  requestUrl = paramsList.reduce((prev, next) => {
+    const { type, value, originValue } = next
+    if (type === ParamsType.REQUIRED) {
+      value.forEach(key => {
+        prev = prev.replace(key, Reflect.get(Params, key))
+        Reflect.deleteProperty(Params, key)
+      })
+    }
+
+    if (type === ParamsType.OPTIONAL) {
+      prev = prev.replace(originValue, '')
+    }
+
+    return prev
+  }, requestUrl)
+
+  return requestUrl.replaceAll(/[{}?]/g, '')
+}
+
+const transformBodyValue = (body: RequestParams['Body'], requestParamsBodyType: RequestBodyEnum) => {
+  let value = Reflect.get(body, requestParamsBodyType)
+
+  if (requestParamsBodyType === RequestBodyEnum.FORM_DATA) {
+    const formData = new FormData()
+    Object.keys(value as RequestParams['Body']['form-data']).forEach(key => {
+      formData.append(key, value[key])
+    })
+    value = formData
+  }
+
+  return value
+}
+
 export const customRequest = async (request: RequestConfigType) => {
 export const customRequest = async (request: RequestConfigType) => {
   console.log(request)
   console.log(request)
   const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
   const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
@@ -44,35 +93,13 @@ export const customRequest = async (request: RequestConfigType) => {
   Params = JSON.parse(JSON.stringify(Params))
   Params = JSON.parse(JSON.stringify(Params))
   const isDynamicUrlFlag = isDynamicUrl(requestUrl || '')
   const isDynamicUrlFlag = isDynamicUrl(requestUrl || '')
 
 
-
-
   if (isDynamicUrlFlag) {
   if (isDynamicUrlFlag) {
-    requestUrl = decodeURI(requestUrl || '')
-
-    const paramsList = decomposeDynamicParams(requestUrl)
-    requestUrl = paramsList.reduce((prev, next) => {
-      const { type, value, originValue } = next
-      if (type === ParamsType.REQUIRED) {
-        value.forEach(key => {
-          prev = prev.replace(key, Reflect.get(Params, key))
-          Reflect.deleteProperty(Params, key)
-        })
-      }
-
-      if (type === ParamsType.OPTIONAL) {
-        prev = prev.replace(originValue, '')
-      }
-
-      return prev
-    }, requestUrl)
-
-    requestUrl = requestUrl.replaceAll(/[{}?]/g, '')
+    requestUrl = getDynamicRequestUrl(requestUrl, Params)
   }
   }
 
 
-  const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>]
+  const body = transformBodyValue(Body, requestParamsBodyType)
+  console.log({ body, requestParamsBodyType, Params })
 
 
-  Reflect.deleteProperty(Params, 'date')
-  console.log(Header)
   return defHttp.request<any>({
   return defHttp.request<any>({
     url: requestUrl,
     url: requestUrl,
     baseURL: getOriginUrl(requestOriginUrl!),
     baseURL: getOriginUrl(requestOriginUrl!),

@@ -55,7 +55,6 @@ export const getDeviceInterfaceDetail = async (interfaces: string[]) => {
 
 
 export const getAllPublicInterface = async (params?: { state: PublicInterfaceStateEnum }) => {
 export const getAllPublicInterface = async (params?: { state: PublicInterfaceStateEnum }) => {
   return defHttp.get<PublicInterfaceRecord[]>({
   return defHttp.get<PublicInterfaceRecord[]>({
-    // url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}`,
-    url: Api.GET_PUBLIC_INTERFACE_ALL,
+    url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}`
   })
   })
 }
 }

-import { RequestParams as OriginRequestParams } from "@/enums/httpEnum"
+import { RequestBodyEnum, RequestParams as OriginRequestParams } from "@/enums/httpEnum"
 
 
 export enum PublicInterfaceStateEnum {
 export enum PublicInterfaceStateEnum {
   PUBLISH = 1,
   PUBLISH = 1,
   UN_PUBLISH = 0
   UN_PUBLISH = 0
 }
 }
 
 
-export interface RequestParams {
-  Body: Recordable
-  Header: Recordable
-  Params: {
-    key: string
-    required: boolean
-    value: string
-  }[]
+export interface ParamsItemType {
+  key: string
+  required: boolean
+  value: string
+}
+
+export interface PublicInterfaceRequestParams {
+  Body: {
+    requestParamsBodyType?: RequestBodyEnum
+    [RequestBodyEnum.XML]: string
+    [RequestBodyEnum.JSON]: string
+    [RequestBodyEnum.FORM_DATA]: ParamsItemType[]
+    [RequestBodyEnum.X_WWW_FORM_URLENCODED]: ParamsItemType[]
+  }
+  Header: ParamsItemType[]
+  Params: ParamsItemType[]
 }
 }
 
 
 export interface PublicInterfaceRecord {
 export interface PublicInterfaceRecord {
@@ -29,7 +37,7 @@ export interface PublicInterfaceRecord {
   requestHttpType: string,
   requestHttpType: string,
   requestParamsBodyType: string,
   requestParamsBodyType: string,
   requestUrl: string,
   requestUrl: string,
-  requestParams: string | OriginRequestParams,
+  requestParams: string,
 }
 }
 
 
 
 

 <script lang="ts" setup>
 <script lang="ts" setup>
-import { PublicInterfaceRecord } from '@/api/external/dynamicRequest/model';
+import { ParamsItemType, PublicInterfaceRecord } from '@/api/external/dynamicRequest/model';
 import { RequestParams } from '@/enums/httpEnum';
 import { RequestParams } from '@/enums/httpEnum';
 import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSelect } from 'naive-ui'
 import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSelect } from 'naive-ui'
-import { computed, ref, unref, watch } from 'vue';
-import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
-import { transferData } from './utils';
+import { computed, nextTick, ref, unref, watch } from 'vue';
+import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; 
 
 
 const props = defineProps<{
 const props = defineProps<{
-  publicInterfaceRecord: PublicInterfaceRecord
+  paramsItemList: ParamsItemType[]
 }>()
 }>()
 
 
 const componentMap: { [key in ComponentType]?: any } = {
 const componentMap: { [key in ComponentType]?: any } = {
@@ -17,15 +16,16 @@ const componentMap: { [key in ComponentType]?: any } = {
   [ComponentType.DATE_PICKER]: NDatePicker
   [ComponentType.DATE_PICKER]: NDatePicker
 }
 }
 
 
-const getPublicInterfaceRecord = computed(() => {
-  return props.publicInterfaceRecord
+const getParamsItemList = computed(() => {
+  return props.paramsItemList
 })
 })
+
 const dynamicFormItemEl = ref<FormItemInst[]>()
 const dynamicFormItemEl = ref<FormItemInst[]>()
 
 
-const { getDynamicFormSchemas, validFlag, getValue, createForm, clearParams, setDynamicFormValue } = useDynamicPublicForm(getPublicInterfaceRecord)
+const { getDynamicFormSchemas, validFlag, getValue, createForm, clearParams, setDynamicFormValue } = useDynamicPublicForm(getParamsItemList)
 
 
 const getConfigurationData = () => {
 const getConfigurationData = () => {
-  return transferData(unref(getPublicInterfaceRecord), unref(getValue))
+  return unref(getValue)
 }
 }
 
 
 const validate = async () => {
 const validate = async () => {
@@ -34,12 +34,13 @@ const validate = async () => {
   }
   }
   return unref(validFlag)
   return unref(validFlag)
 }
 }
-const setConfigurationData = async (requestParams: RequestParams) => {
-  setDynamicFormValue(requestParams)
+const setConfigurationData = async (params: Recordable) => {
+  await nextTick()
+  setDynamicFormValue(params)
 }
 }
 
 
 watch(
 watch(
-  () => props.publicInterfaceRecord,
+  () => props.paramsItemList,
   (newValue) => {
   (newValue) => {
     if (newValue) {
     if (newValue) {
       clearParams()
       clearParams()

 import { getDictItemByCode } from "@/api/external/common"
 import { getDictItemByCode } from "@/api/external/common"
 import { DictItem } from "@/api/external/common/model"
 import { DictItem } from "@/api/external/common/model"
 import { getDeviceAttrList, getDeviceList, getDeviceProfileList, getOrgList } from "@/api/external/dynamicRequest"
 import { getDeviceAttrList, getDeviceList, getDeviceProfileList, getOrgList } from "@/api/external/dynamicRequest"
-import { PublicInterfaceRecord, RequestParams } from "@/api/external/dynamicRequest/model"
+import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams } from "@/api/external/dynamicRequest/model"
 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
 import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
-import { computed, onMounted, reactive, Ref, ref, unref, watch } from "vue"
+import { computed, onMounted, reactive, Ref, ref, unref } from "vue"
 import { DictEnum } from '@/enums/external/dictEnum'
 import { DictEnum } from '@/enums/external/dictEnum'
 
 
 const GROUP_SEPARATOR = ','
 const GROUP_SEPARATOR = ','
@@ -41,12 +41,10 @@ const isDateComponent = (type: BuiltInVariable) => {
   return [BuiltInVariable.DATE_FIXED, BuiltInVariable.DATE_RANGE].includes(type)
   return [BuiltInVariable.DATE_FIXED, BuiltInVariable.DATE_RANGE].includes(type)
 }
 }
 
 
-export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => {
+export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => {
 
 
-  const getParams = computed(() => {
-    let params = (publicInterfaceRef.value.requestParams as unknown as RequestParams).Params || []
-    if (!Array.isArray(params)) params = []
-    return params
+  const getParams = computed<ParamsItemType[]>(() => {
+    return unref(paramsItemList) || []
   })
   })
 
 
   const getUsedBuiltInVariable = computed(() => {
   const getUsedBuiltInVariable = computed(() => {
@@ -312,8 +310,8 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
 
 
   }
   }
 
 
-  const getDynamicFormSchemas = computed(() => {
-    return unref(getParams).reduce((prev, { key, value, required }) => {
+  const getDynamicFormSchemas = computed<DynamicFormSchema[]>(() => {
+    return unref(getParams).reduce((prev: DynamicFormSchema[], { key, value, required }) => {
       const schemas = toFormSchemas(key, required, value)
       const schemas = toFormSchemas(key, required, value)
       return [...prev, ...schemas]
       return [...prev, ...schemas]
     }, [] as DynamicFormSchema[])
     }, [] as DynamicFormSchema[])
@@ -342,7 +340,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
       for (const temp of splitKeys) {
       for (const temp of splitKeys) {
         params[temp] = Params[temp]
         params[temp] = Params[temp]
       }
       }
-    } 
+    }
   }
   }
 
 
   const clearParams = () => {
   const clearParams = () => {
@@ -351,9 +349,8 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
     })
     })
   }
   }
 
 
-  const setDynamicFormValue = (requestParams: RequestConfigType['requestParams']) => {
-    const { Params } = requestParams
-    setParams(Params)
+  const setDynamicFormValue = (params: Recordable) => {
+    setParams(params)
     getOrgOption()
     getOrgOption()
     getDeviceProfileOption()
     getDeviceProfileOption()
     getDeviceOption()
     getDeviceOption()

-import { PublicInterfaceRecord } from "@/api/external/dynamicRequest/model"
+import { PublicInterfaceRecord, PublicInterfaceRequestParams } from "@/api/external/dynamicRequest/model"
 import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum"
 import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum"
-import { ExternalRequestType } from "@/store/external/modules/extraComponentInfo.d"
+import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
 import { unref } from "vue"
 import { unref } from "vue"
 
 
-export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, fillParams: Recordable, fillBody: Recordable = {}) => {
-  const { requestContentType, requestHttpType, id, requestUrl, requestOriginUrl, requestParams } = publicInterfaceRecord
-  const { Header, Body } = requestParams as RequestParams
+export const extraPublicInterfaceInfo = (publicInterfaceRecord: PublicInterfaceRecord) => {
+  const { requestContentType, requestHttpType, id, requestUrl, requestOriginUrl, requestParams = {} } = unref(publicInterfaceRecord)
+  const { Body = {} } = requestParams as unknown as PublicInterfaceRequestParams
   const { requestParamsBodyType } = Body as Recordable
   const { requestParamsBodyType } = Body as Recordable
   return {
   return {
     requestDataPondId: id,
     requestDataPondId: id,
@@ -28,10 +28,15 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, fillP
     // }
     // }
     // requestIntervalUnit
     // requestIntervalUnit
     requestParams: {
     requestParams: {
-      Header,
-      Body: unref(fillBody),
-      Params: unref(fillParams)
-    }
+      Header: {},
+      Body: {
+        'form-data': {},
+        'json': '',
+        'x-www-form-urlencoded': {},
+        xml: ''
+      },
+      Params: {}
+    } as RequestParams
 
 
-  } as ExternalRequestType
+  } as ExtraRequestConfigType
 }
 }

+<script lang="ts" setup>
+import { ParamsItemType, PublicInterfaceRequestParams } from '@/api/external/dynamicRequest/model';
+import { MonacoEditor } from '@/components/Pages/MonacoEditor';
+import { RequestBodyEnum, RequestBodyEnumList, RequestParams } from '@/enums/httpEnum';
+import { NCard, NText, NRadioGroup, NRadio, NSpace } from 'naive-ui';
+import { computed, ref, unref } from 'vue';
+import { DynamicForm } from '../DynamicForm';
+
+const editorValue = ref('')
+
+const requestParamsBodyType = ref(RequestBodyEnum.X_WWW_FORM_URLENCODED)
+
+const paramsItemList = ref<ParamsItemType[]>([])
+
+const dynamicFormEl = ref<Nullable<InstanceType<typeof DynamicForm>>>(null)
+
+const getLanguage = computed(() => {
+  return unref(requestParamsBodyType) === RequestBodyEnum.JSON
+    ? 'json'
+    : unref(requestParamsBodyType) === RequestBodyEnum.XML
+      ? 'xml'
+      : 'json'
+})
+
+const isDynamicForm = computed(() => {
+  return [RequestBodyEnum.FORM_DATA, RequestBodyEnum.X_WWW_FORM_URLENCODED].includes(unref(requestParamsBodyType))
+})
+
+const isEditor = computed(() => {
+  return [RequestBodyEnum.XML, RequestBodyEnum.JSON].includes(unref(requestParamsBodyType))
+})
+
+const setConfigurationData = (params: PublicInterfaceRequestParams['Body'], value: Recordable) => {
+  const { requestParamsBodyType: type, } = params || {}
+  if (!type) return
+  requestParamsBodyType.value = type
+
+  const paramsValue = Reflect.get(params, type)
+  if (unref(isEditor)) {
+    editorValue.value = paramsValue
+  } else if (unref(isDynamicForm)) {
+    paramsItemList.value = paramsValue
+    const needSetValue = Reflect.get(value, type)
+    unref(dynamicFormEl)?.setConfigurationData(needSetValue)
+  }
+
+}
+
+const getConfigurationData = () => {
+  const value = unref(dynamicFormEl)?.getConfigurationData()
+  const getValue = unref(isDynamicForm) ? value : unref(isEditor) ? unref(editorValue) : {}
+  const record = {
+    'form-data': {},
+    'x-www-form-urlencoded': {},
+    xml: '',
+    json: ''
+  } as RequestParams['Body']
+
+  Reflect.set(record, unref(requestParamsBodyType), getValue)
+  return record
+}
+
+defineExpose({
+  getConfigurationData,
+  setConfigurationData
+})
+
+</script>
+
+<template>
+  <section>
+    <NRadioGroup :value="requestParamsBodyType" style="margin-bottom: 20px;">
+      <NSpace>
+        <NRadio v-for="item in RequestBodyEnumList" :key="item" :value="item" :disabled="item !== requestParamsBodyType">
+          {{ item }}
+        </NRadio>
+      </NSpace>
+    </NRadioGroup>
+    <NCard>
+      <NCard v-if="requestParamsBodyType === RequestBodyEnum.NONE">
+        <NText depth="3">该接口没有 Body 体</NText>
+      </NCard>
+      <DynamicForm v-if="isDynamicForm" ref="dynamicFormEl" :paramsItemList="paramsItemList" />
+      <MonacoEditor v-if="isEditor" v-model:modelValue="editorValue" width="600px" height="200px"
+        :language="getLanguage" />
+    </NCard>
+  </section>
+</template>

 <script lang="ts" setup>
 <script lang="ts" setup>
 import { getAllPublicInterface } from '@/api/external/dynamicRequest'
 import { getAllPublicInterface } from '@/api/external/dynamicRequest'
-import { PublicInterfaceRecord, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model';
+import { ParamsItemType, PublicInterfaceRecord, PublicInterfaceRequestParams, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model';
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum';
 import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
@@ -8,9 +8,11 @@ import { NCard, NEmpty, NInputGroup, NInputNumber, NScrollbar, NSelect, NTabPane
 import { ref, computed, unref, nextTick } from 'vue'
 import { ref, computed, unref, nextTick } from 'vue'
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
-import RequestBody from '../RequestModal/RequestBody.vue';
+import BodyContent from './BodyContent.vue'
 import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d';
 import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d';
 import { DynamicForm } from '../DynamicForm';
 import { DynamicForm } from '../DynamicForm';
+import { extraPublicInterfaceInfo } from '../DynamicForm/utils';
+import { isArray } from '@/utils';
 
 
 const publicInterfaceList = ref<PublicInterfaceRecord[]>([])
 const publicInterfaceList = ref<PublicInterfaceRecord[]>([])
 
 
@@ -31,6 +33,14 @@ const getSelectedInterface = computed<PublicInterfaceRecord>(() => {
   return _record
   return _record
 })
 })
 
 
+const getSelectedInterfaceBody = computed<PublicInterfaceRequestParams['Body']>(() => {
+  return (unref(getSelectedInterface).requestParams as unknown as PublicInterfaceRequestParams).Body || {}
+
+})
+const getSelectedInterfaceParams = computed(() => {
+  return (unref(getSelectedInterface).requestParams as unknown as PublicInterfaceRequestParams).Params || []
+})
+
 const getPublicInterfaceList = async () => {
 const getPublicInterfaceList = async () => {
   if (unref(publicInterfaceList).length) return
   if (unref(publicInterfaceList).length) return
   const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH })
   const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH })
@@ -58,12 +68,16 @@ const requestParamsBodyTypeRef = ref<RequestBodyEnum>(RequestBodyEnum.X_WWW_FORM
 
 
 const headerRef = ref()
 const headerRef = ref()
 
 
-const paramsDynamicFormEl = ref<InstanceType<typeof DynamicForm>>()
-const socketDynamicFormEl = ref<InstanceType<typeof DynamicForm>>()
+const paramsDynamicFormEl = ref<Nullable<InstanceType<typeof DynamicForm>>>(null)
+const bodyContentEl = ref<Nullable<InstanceType<typeof BodyContent>>>(null)
+const socketDynamicFormEl = ref<Nullable<InstanceType<typeof DynamicForm>>>(null)
 
 
-const handleSelectedInterfaceChange = (value: string, option: PublicInterfaceRecord) => {
+const handleSelectedInterfaceChange = (_value: string, option: PublicInterfaceRecord) => {
   requestContentTypeRef.value = option.requestContentType as RequestContentTypeEnum
   requestContentTypeRef.value = option.requestContentType as RequestContentTypeEnum
   requestHttpTypeRef.value = option.requestHttpType as RequestHttpEnum
   requestHttpTypeRef.value = option.requestHttpType as RequestHttpEnum
+  const { Header = [], Body } = JSON.parse(option.requestParams) as PublicInterfaceRequestParams
+  headerRef.value = isArray(Header) ? (Header as ParamsItemType[]).reduce((prev, next) => ({ ...prev, [next.key]: next.value }), {}) : {}
+  unref(bodyContentEl)?.setConfigurationData(Body)
 }
 }
 
 
 const getGetRequestTypeName = (key: RequestContentTypeEnum) => {
 const getGetRequestTypeName = (key: RequestContentTypeEnum) => {
@@ -75,15 +89,28 @@ const validate = async () => {
   if (unref(socketDynamicFormEl)) return await unref(socketDynamicFormEl)?.validate()
   if (unref(socketDynamicFormEl)) return await unref(socketDynamicFormEl)?.validate()
 }
 }
 
 
-const setDynamicFormValue = (requestParams: RequestParams) => {
-  if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData(requestParams)
-  if (unref(socketDynamicFormEl)) unref(socketDynamicFormEl)?.setConfigurationData(requestParams)
+const setDynamicFormValue = (request: ExtraRequestConfigType) => {
+  const { requestParams: { Params, Body } } = request
+  if (unref(paramsDynamicFormEl)) unref(paramsDynamicFormEl)?.setConfigurationData(Params)
+  if (unref(socketDynamicFormEl)) unref(socketDynamicFormEl)?.setConfigurationData(Params)
+  if (unref(bodyContentEl)) {
+    unref(bodyContentEl)?.setConfigurationData(unref(getSelectedInterfaceBody), Body)
+  }
 }
 }
 
 
+const getDynamicFormValue = (): Recordable => {
+  if (unref(paramsDynamicFormEl)) return unref(paramsDynamicFormEl)?.getConfigurationData() || {}
+  if (unref(socketDynamicFormEl)) return unref(socketDynamicFormEl)?.getConfigurationData() || {}
+  return {}
+}
 
 
 const getConfigurationData = () => {
 const getConfigurationData = () => {
-  if (unref(paramsDynamicFormEl)) return unref(paramsDynamicFormEl)?.getConfigurationData()
-  if (unref(socketDynamicFormEl)) return unref(socketDynamicFormEl)?.getConfigurationData()
+  const record = extraPublicInterfaceInfo(unref(getSelectedInterface))
+  const bodyValue = unref(bodyContentEl)?.getConfigurationData() || {} as RequestParams['Body']
+  record.requestParams[RequestParamsTypeEnum.PARAMS] = getDynamicFormValue()
+  record.requestParams[RequestParamsTypeEnum.HEADER] = unref(headerRef)
+  record.requestParams[RequestParamsTypeEnum.BODY] = bodyValue
+  return record
 }
 }
 
 
 const setConfigurationData = async (request: ExtraRequestConfigType) => {
 const setConfigurationData = async (request: ExtraRequestConfigType) => {
@@ -97,7 +124,8 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
   requestParamsBodyTypeRef.value = requestParamsBodyType
   requestParamsBodyTypeRef.value = requestParamsBodyType
   requestBodyRef.value = requestParams
   requestBodyRef.value = requestParams
   await nextTick()
   await nextTick()
-  setDynamicFormValue(requestParams)
+  console.log(request)
+  setDynamicFormValue(request)
 }
 }
 
 
 defineExpose({
 defineExpose({
@@ -156,13 +184,12 @@ defineExpose({
     :item-right-style="{ gridTemplateColumns: '7fr 1fr' }">
     :item-right-style="{ gridTemplateColumns: '7fr 1fr' }">
     <NCard v-show="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
     <NCard v-show="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
-        <DynamicForm ref="paramsDynamicFormEl" :public-interface-record="getSelectedInterface" />
+        <DynamicForm ref="paramsDynamicFormEl" :paramsItemList="getSelectedInterfaceParams" />
         <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" />
         <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" />
       </NScrollbar>
       </NScrollbar>
     </NCard>
     </NCard>
 
 
-    <RequestBody v-show="requestParamsTypeRef === RequestParamsTypeEnum.BODY"
-      v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestBodyRef" />
+    <BodyContent v-show="requestParamsTypeRef === RequestParamsTypeEnum.BODY" ref="bodyContentEl" />
 
 
     <ParamsTable v-show="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef"
     <ParamsTable v-show="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef"
       :disabled="true" />
       :disabled="true" />
@@ -172,7 +199,7 @@ defineExpose({
   <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET">
   <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET">
     <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
     <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
-        <DynamicForm ref="socketDynamicFormEl" :public-interface-record="getSelectedInterface" />
+        <DynamicForm ref="socketDynamicFormEl" :paramsItemList="getSelectedInterfaceParams" />
         <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" />
         <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" />
       </NScrollbar>
       </NScrollbar>
     </NCard>
     </NCard>

@@ -89,7 +89,7 @@ const columns: DataTableColumns<DataSource> = [
                   size: 'small',
                   size: 'small',
                   ghost: true,
                   ghost: true,
                   onClick: () => handleSubtractRow(row),
                   onClick: () => handleSubtractRow(row),
-                  disabled: props.disabled || !unref(canDeleteRow)
+                  // disabled: props.disabled || !unref(canDeleteRow)
                 } as ButtonProps,
                 } as ButtonProps,
                 {
                 {
                   default: () => h(NIcon, () => h(Subtract))
                   default: () => h(NIcon, () => h(Subtract))
@@ -124,13 +124,7 @@ const props = withDefaults(
     maxRow: 50,
     maxRow: 50,
   }
   }
 )
 )
-
-watch(
-  () => props.value,
-  () => {
-    console.log(props.value)
-  }
-)
+ 
 
 
 const emit = defineEmits(['update:value'])
 const emit = defineEmits(['update:value'])
 
 
@@ -172,6 +166,11 @@ const handleAddRow = (record: DataSource) => {
 
 
 const handleSubtractRow = (record: DataSource) => {
 const handleSubtractRow = (record: DataSource) => {
   const index = unref(dataSource).findIndex(item => item.id === record.id)
   const index = unref(dataSource).findIndex(item => item.id === record.id)
+  if (unref(dataSource).length === 1) {
+    unref(dataSource)[index].keyName = ''
+    unref(dataSource)[index].value = ''
+    return
+  }
   unref(dataSource).splice(index, 1)
   unref(dataSource).splice(index, 1)
 }
 }
 
 

@@ -70,6 +70,7 @@ const getResult = () => {
 const handleSaveAction = async () => {
 const handleSaveAction = async () => {
   if (!(await validate())) return
   if (!(await validate())) return
   const value = getResult()
   const value = getResult()
+  console.log(value)
   if (unref(selectTarget)) {
   if (unref(selectTarget)) {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
       ...unref(selectTarget)!,
       ...unref(selectTarget)!,

@@ -44,7 +44,6 @@ export const useSyncRemote = () => {
    * @returns
    * @returns
    */
    */
   const updateStoreInfo = (projectData: DateViewConfigurationInfoType) => {
   const updateStoreInfo = (projectData: DateViewConfigurationInfoType) => {
-    console.log(projectData)
     projectInfoStore.setProjectInfo(projectData)
     projectInfoStore.setProjectInfo(projectData)
   }
   }
 
 
@@ -102,7 +101,6 @@ export const useSyncRemote = () => {
 
 
         // 保存预览图
         // 保存预览图
         if (uploadRes) {
         if (uploadRes) {
-          console.log(projectInfoStore.getProjectInfo)
           await saveDataViewList({
           await saveDataViewList({
             name: dataViewName,
             name: dataViewName,
             organizationId,
             organizationId,