fix(dynamic request): 修复动态请求header回显

+export { default as DynamicForm } from './index.vue'

+<script lang="ts" setup>
+import { PublicInterfaceRecord } from '@/api/external/dynamicRequest/model';
+import { RequestParams } from '@/enums/httpEnum';
+import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d';
+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';
+
+const props = defineProps<{
+  publicInterfaceRecord: PublicInterfaceRecord
+}>()
+
+const componentMap: { [key in ComponentType]?: any } = {
+  [ComponentType.SELECT_TREE]: NTreeSelect,
+  [ComponentType.SELECT]: NSelect,
+  [ComponentType.INPUT]: NInput,
+  [ComponentType.DATE_PICKER]: NDatePicker
+}
+
+const getPublicInterfaceRecord = computed(() => {
+  return props.publicInterfaceRecord
+})
+const dynamicFormItemEl = ref<FormItemInst[]>()
+
+const { getDynamicFormSchemas, validFlag, getValue, createForm, clearParams, setDynamicFormValue } = useDynamicPublicForm(getPublicInterfaceRecord)
+
+const getConfigurationData = () => {
+  return transferData(unref(getPublicInterfaceRecord), unref(getValue))
+}
+
+const validate = async () => {
+  for (const item of unref(dynamicFormItemEl) || []) {
+    await item.validate()
+  }
+  return unref(validFlag)
+}
+const setConfigurationData = async (requestParams: RequestParams) => {
+  setDynamicFormValue(requestParams)
+}
+
+watch(
+  () => props.publicInterfaceRecord,
+  (newValue) => {
+      if (newValue) {
+        clearParams()
+        createForm()
+      }
+  }
+)
+
+defineExpose({
+  validate,
+  getConfigurationData,
+  setConfigurationData,
+})
+
+</script>
+
+<template>
+  <NForm>
+    <template v-for="item in getDynamicFormSchemas" :key="item.key">
+      <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules">
+        <component :is="componentMap[item.component]" v-bind="item.props" clearable />
+      </NFormItem>
+    </template>
+  </NForm>
+</template>

@@ -46,7 +46,6 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
   const getParams = computed(() => {
     let params = (publicInterfaceRef.value.requestParams as unknown as RequestParams).Params || []
     if (!Array.isArray(params)) params = []
-    console.log(params)
     return params
   })
 
@@ -131,7 +130,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
     if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) {
       const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE)
       const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR)
-      const [startValue, endValue] = value[BuiltInVariable.DATE_RANGE]
+      const [startValue, endValue] = value[BuiltInVariable.DATE_RANGE] || []
       value[start] = startValue
       value[end] = endValue
 
@@ -333,17 +332,23 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
       const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR)
       if (isDateComponent(key as BuiltInVariable)) {
         if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) {
-          params[key] = Params[splitKeys[0]]
+          params[key] = Params[splitKeys[0]] || null
           continue
         }
-        params[key] = [Params[splitKeys[0]], Params[splitKeys[1]]]
+        const value = [Params[splitKeys[0]], Params[splitKeys[1]]]
+        params[key] = value.every(Boolean) ? value : null
         continue
       }
       for (const temp of splitKeys) {
         params[temp] = Params[temp]
       }
-    }
+    } 
+  }
 
+  const clearParams = () => {
+    Object.keys(params).forEach(key => {
+      Reflect.deleteProperty(params, key)
+    })
   }
 
   const setDynamicFormValue = (requestParams: RequestConfigType['requestParams']) => {
@@ -364,7 +369,8 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
     getValue,
     getDynamicFormSchemas,
     setDynamicFormValue,
-    createForm
+    createForm,
+    clearParams
   }
 }
 

@@ -3,9 +3,10 @@ import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum"
 import { ExternalRequestType } from "@/store/external/modules/extraComponentInfo.d"
 import { unref } from "vue"
 
-export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, requestParams: RequestParams, fillParams: Recordable) => {
-  const { requestContentType, requestHttpType, id, requestUrl, requestParamsBodyType, requestOriginUrl } = publicInterfaceRecord
-  const { Header, Body } = requestParams
+export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, fillParams: Recordable, fillBody: Recordable = {}) => {
+  const { requestContentType, requestHttpType, id, requestUrl, requestOriginUrl, requestParams } = publicInterfaceRecord
+  const { Header, Body } = requestParams as RequestParams
+  const { requestParamsBodyType } = Body as Recordable
   return {
     requestDataPondId: id,
     // requestInterval  
@@ -28,7 +29,7 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, reque
     // requestIntervalUnit
     requestParams: {
       Header,
-      Body,
+      Body: unref(fillBody),
       Params: unref(fillParams)
     }
 

@@ -4,21 +4,14 @@ import { PublicInterfaceRecord, PublicInterfaceStateEnum } from '@/api/external/
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
-import { NForm, NCard, NDatePicker, NEmpty, NFormItem, NInput, NInputGroup, NInputNumber, NScrollbar, NSelect, NTabPane, NTabs, NTreeSelect, SelectOption, FormItemInst } from 'naive-ui';
-import { ref, computed, unref } from 'vue'
+import { NCard, NEmpty, NInputGroup, NInputNumber, NScrollbar, NSelect, NTabPane, NTabs, SelectOption } from 'naive-ui';
+import { ref, computed, unref, nextTick } from 'vue'
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import ParamsTable from '../RequestModal/ParamsTable.vue';
 import RequestBody from '../RequestModal/RequestBody.vue';
-import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
-import { transferData } from './utils';
 import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d';
+import { DynamicForm } from '../DynamicForm';
 
-const componentMap: { [key in ComponentType]?: any } = {
-  [ComponentType.SELECT_TREE]: NTreeSelect,
-  [ComponentType.SELECT]: NSelect,
-  [ComponentType.INPUT]: NInput,
-  [ComponentType.DATE_PICKER]: NDatePicker
-}
 const publicInterfaceList = ref<PublicInterfaceRecord[]>([])
 
 const selectedPublicInterface = ref<string>()
@@ -31,7 +24,7 @@ const toJSON = (string: string) => {
   }
 }
 
-const getSelectedInterface = computed(() => {
+const getSelectedInterface = computed<PublicInterfaceRecord>(() => {
   const record = unref(publicInterfaceList).find(item => item.id === unref(selectedPublicInterface))! || {}
   const _record = JSON.parse(JSON.stringify(record))
   _record.requestParams = toJSON(_record.requestParams)
@@ -48,12 +41,6 @@ const handleFilter = (query: string, option: SelectOption) => {
   return ((option as Recordable).interfaceName).includes(query)
 }
 
-const { getDynamicFormSchemas, getValue, createForm, validFlag, setDynamicFormValue } = useDynamicPublicForm(getSelectedInterface)
-
-const getConfigurationData = () => {
-  const value = transferData(unref(getSelectedInterface), unref(getSelectedInterface).requestParams as unknown as RequestParams, unref(getValue))
-  return value
-}
 
 const requestHttpTypeRef = ref<RequestHttpEnum>()
 
@@ -65,16 +52,17 @@ const requestContentTypeRef = ref<RequestContentTypeEnum>()
 
 const requestParamsTypeRef = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)
 
-const requestParamsRef = ref<RequestParams>({ Body: { [RequestBodyEnum.FORM_DATA]: {}, [RequestBodyEnum.JSON]: '', [RequestBodyEnum.XML]: '', [RequestBodyEnum.X_WWW_FORM_URLENCODED]: {} }, Header: {}, Params: {} })
+const requestBodyRef = ref<RequestParams>({ Body: { [RequestBodyEnum.FORM_DATA]: {}, [RequestBodyEnum.JSON]: '', [RequestBodyEnum.XML]: '', [RequestBodyEnum.X_WWW_FORM_URLENCODED]: {} }, Header: {}, Params: {} })
 
 const requestParamsBodyTypeRef = ref<RequestBodyEnum>(RequestBodyEnum.X_WWW_FORM_URLENCODED)
 
 const headerRef = ref()
 
-const dynamicFormItemEl = ref<FormItemInst[]>()
+
+const paramsDynamicFormEl = ref<InstanceType<typeof DynamicForm>>()
+const socketDynamicFormEl = ref<InstanceType<typeof DynamicForm>>()
 
 const handleSelectedInterfaceChange = (value: string, option: PublicInterfaceRecord) => {
-  createForm()
   requestContentTypeRef.value = option.requestContentType as RequestContentTypeEnum
   requestHttpTypeRef.value = option.requestHttpType as RequestHttpEnum
 }
@@ -83,6 +71,22 @@ const getGetRequestTypeName = (key: RequestContentTypeEnum) => {
   return RequestContentTypeNameEnum[RequestContentTypeEnum[key] as keyof typeof RequestContentTypeEnum]
 }
 
+const validate = async () => {
+  if (unref(paramsDynamicFormEl)) return await unref(paramsDynamicFormEl)?.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 getConfigurationData = () => {
+  if (unref(paramsDynamicFormEl)) return unref(paramsDynamicFormEl)?.getConfigurationData()
+  if (unref(socketDynamicFormEl)) return unref(socketDynamicFormEl)?.getConfigurationData()
+}
+
 const setConfigurationData = async (request: ExtraRequestConfigType) => {
   await getPublicInterfaceList()
   const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType } = request
@@ -92,19 +96,11 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => {
   requestHttpTypeRef.value = requestHttpType
   headerRef.value = Header
   requestParamsBodyTypeRef.value = requestParamsBodyType
-  requestParamsRef.value = requestParams
+  requestBodyRef.value = requestParams
+  await nextTick()
   setDynamicFormValue(requestParams)
 }
 
-
-const validate = async () => {
-  for (const item of unref(dynamicFormItemEl) || []) {
-    await item.validate()
-  }
-  return unref(validFlag)
-}
-
-
 defineExpose({
   getConfigurationData,
   setConfigurationData,
@@ -159,55 +155,26 @@ defineExpose({
 
   <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.DEFAULT"
     :item-right-style="{ gridTemplateColumns: '7fr 1fr' }">
-    <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
+    <NCard v-show="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
-        <NForm>
-          <template v-for="item in getDynamicFormSchemas" :key="item.key">
-            <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules">
-              <component :is="componentMap[item.component]" v-bind="item.props" clearable />
-            </NFormItem>
-          </template>
-        </NForm>
-        <NEmpty v-if="!selectedPublicInterface || !getDynamicFormSchemas.length" description="请选择公共接口" />
+        <DynamicForm ref="paramsDynamicFormEl" :public-interface-record="getSelectedInterface" />
+        <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" />
       </NScrollbar>
     </NCard>
 
-    <!-- <section v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS">
-                              <NCard>
-                                <NSpace vertical>
-                                  <NTag type="info">
-                                    <span class="func-keyword">function</span>&nbsp;&nbsp;filter(res)&nbsp;&nbsp;{
-                                  </NTag>
-                                  <MonacoEditor v-model:modelValue="filter" width="380px" height="300px" language="javascript" />
-                                  <NTag type="info">}</NTag>
-                                </NSpace>
-                              </NCard>
-                              <NCard style="margin-top: 20px;">
-                                <NText>转换结果:</NText>
-                                <section>
-                                  <NText>{{ params }}</NText>
-                                </section>
-                              </NCard>
-                            </section> -->
-
-    <RequestBody v-if="requestParamsTypeRef === RequestParamsTypeEnum.BODY"
-      v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestParamsRef" />
-
-    <ParamsTable v-if="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" />
+    <RequestBody v-show="requestParamsTypeRef === RequestParamsTypeEnum.BODY"
+      v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestBodyRef" />
+
+    <ParamsTable v-show="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef"
+      :disabled="true" />
 
   </SettingItemBox>
 
   <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET">
     <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
-        <NForm>
-          <template v-for="item in getDynamicFormSchemas" :key="item.key">
-            <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules">
-              <component :is="componentMap[item.component]" v-bind="item.props" clearable />
-            </NFormItem>
-          </template>
-        </NForm>
-        <NEmpty v-if="!selectedPublicInterface || !getDynamicFormSchemas.length" description="请选择公共接口" />
+        <DynamicForm ref="socketDynamicFormEl" :public-interface-record="getSelectedInterface" />
+        <NEmpty v-if="!selectedPublicInterface" description="请选择公共接口" />
       </NScrollbar>
     </NCard>
   </SettingItemBox>

@@ -125,6 +125,13 @@ const props = withDefaults(
   }
 )
 
+watch(
+  () => props.value,
+  () => {
+    console.log(props.value)
+  }
+)
+
 const emit = defineEmits(['update:value'])
 
 const createNewRow = () => {

 <script lang="ts" setup>
 import { MonacoEditor } from '@/components/Pages/MonacoEditor';
 import { RequestBodyEnum, RequestBodyEnumList, RequestParams } from '@/enums/httpEnum';
-import { NCard } from 'naive-ui';
+import { NCard } from 'naive-ui'; 
 import ParamsTable from './ParamsTable.vue';
 
 defineProps<{
@@ -12,14 +12,15 @@ defineProps<{
 const emit = defineEmits(['update:requestParamsBodyType'])
 
 const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
-  emit('update:requestParamsBodyType', value)
+  emit('update:requestParamsBodyType', value || RequestBodyEnum.X_WWW_FORM_URLENCODED)
 }
 
 </script>
 
 <template>
   <section>
-    <NRadioGroup v-model:value="requestParamsBodyType" @update:value="handleSyncRequestParamsBodyType">
+    <NRadioGroup :value="requestParamsBodyType || RequestBodyEnum.X_WWW_FORM_URLENCODED"
+      @update:value="handleSyncRequestParamsBodyType">
       <NSpace>
         <NRadio v-for="item in RequestBodyEnumList" :key="item" :value="item">
           {{ item }}
@@ -36,7 +37,7 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
       <ParamsTable v-if="requestParamsBodyType === RequestBodyEnum.FORM_DATA"
         v-model:value="value.Body[RequestBodyEnum.FORM_DATA]" />
 
-      <ParamsTable v-if="requestParamsBodyType === RequestBodyEnum.X_WWW_FORM_URLENCODED"
+      <ParamsTable v-if="requestParamsBodyType === RequestBodyEnum.X_WWW_FORM_URLENCODED || !requestParamsBodyType"
         v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" />
 
       <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON"
@@ -49,7 +50,7 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
 </template>
 
 <style lang="scss" scoped>
-  .body-container {
-    margin-top: 20px;
-  }
+.body-container {
+  margin-top: 20px;
+}
 </style>