fix(dynamicForm): 修复公共接口日期类型组件无法回显值

 import { RequestBodyEnum } from "@/enums/httpEnum"
+import { ExternalRequestType, ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
 import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
 import { defHttp } from "@/utils/external/http/axios"
 
@@ -7,19 +8,9 @@ export enum ParamsType {
   OPTIONAL
 }
 
-export const isFullUrl = (url = '') => {
-  try {
-    new URL(url)
-    return true
-  } catch (error) {
-    return false
-  }
-}
-
-export const getUrl = (url = '') => {
-  const isFullUrlFlag = isFullUrl(url)
-  const { origin } = window.location
-  return isFullUrlFlag ? new URL(url) : { pathname: url, origin }
+const getOriginUrl = (originUrl: string) => {
+  const locationUrl = 'localhost'
+  return originUrl === locationUrl ? location.origin : originUrl
 }
 
 const regOptionalParams = /(?={\?)/g
@@ -45,21 +36,21 @@ export const decomposeDynamicParams = (url: string) => {
 }
 
 export const customRequest = async (request: RequestConfigType) => {
-  const { requestHttpType, requestParams, requestParamsBodyType, requestUrl } = request as RequestGlobalConfigType & RequestConfigType
+  console.log(request)
+  const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
+  let { requestUrl } = request as ExtraRequestConfigType
   const { Header, Body } = requestParams
   let { Params } = requestParams
   Params = JSON.parse(JSON.stringify(Params))
-
   const isDynamicUrlFlag = isDynamicUrl(requestUrl || '')
-  const url = getUrl(requestUrl!)
-  const { origin } = url
-  let { pathname } = url
+
+
 
   if (isDynamicUrlFlag) {
-    pathname = decodeURI(pathname || '')
+    requestUrl = decodeURI(requestUrl || '')
 
-    const paramsList = decomposeDynamicParams(pathname)
-    pathname = paramsList.reduce((prev, next) => {
+    const paramsList = decomposeDynamicParams(requestUrl)
+    requestUrl = paramsList.reduce((prev, next) => {
       const { type, value, originValue } = next
       if (type === ParamsType.REQUIRED) {
         value.forEach(key => {
@@ -73,19 +64,18 @@ export const customRequest = async (request: RequestConfigType) => {
       }
 
       return prev
-    }, pathname)
+    }, requestUrl)
 
-    pathname = pathname.replaceAll(/[{}?]/g, '')
+    requestUrl = requestUrl.replaceAll(/[{}?]/g, '')
   }
 
   const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>]
 
-  // Object.assign(Params, { startTs: Params.date[0], endTs: Params.date[1] })
   Reflect.deleteProperty(Params, 'date')
-
+  console.log(Header)
   return defHttp.request<any>({
-    url: pathname,
-    baseURL: origin,
+    url: requestUrl,
+    baseURL: getOriginUrl(requestOriginUrl!),
     method: requestHttpType,
     params: Params,
     data: body,

- import { defHttp } from '@/utils/external/http/axios';
-import { DeviceAttributesRecord, GetDeviceListParams, PublicInterfaceRecord } from './model';
+import { defHttp } from '@/utils/external/http/axios';
+import { DeviceAttributesRecord, GetDeviceListParams, PublicInterfaceRecord, PublicInterfaceStateEnum } from './model';
 import { PaginationResult } from '/#/external/axios';
 
 enum Api {
@@ -53,8 +53,9 @@ export const getDeviceInterfaceDetail = async (interfaces: string[]) => {
   })
 }
 
-export const getAllPublicInterface = async () => {
+export const getAllPublicInterface = async (params?: { state: PublicInterfaceStateEnum }) => {
   return defHttp.get<PublicInterfaceRecord[]>({
-    url: Api.GET_PUBLIC_INTERFACE_ALL
+    // url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}`,
+    url: Api.GET_PUBLIC_INTERFACE_ALL,
   })
 }

 import { RequestParams as OriginRequestParams } from "@/enums/httpEnum"
 
+export enum PublicInterfaceStateEnum {
+  PUBLISH = 1,
+  UN_PUBLISH = 0
+}
+
 export interface RequestParams {
   Body: Recordable
   Header: Recordable

-import { ChartEditStoreType } from '../../modules/chartEditStore/chartEditStore.d'
+import { ChartEditStoreType, RequestConfigType, } from '../../modules/chartEditStore/chartEditStore.d'
+import { CreateComponentType } from '../../../packages/index.d'
 
 export enum ExtraComponentInfoStoreEnum {
   COMPONENT_LIST = 'componentList'
-} 
+}
 
 export interface ExtraComponentInfoStoreType {
   [ExtraComponentInfoStoreEnum.COMPONENT_LIST]: ChartEditStoreType['componentList']
 }
+
+export interface ExternalRequestType {
+  requestOriginUrl?: string
+}
+
+export type ExtraRequestConfigType = RequestConfigType & ExternalRequestType
+
+export interface ECreateComponentType extends CreateComponentType {
+  request: ExtraRequestConfigType
+}

-import { CreateComponentType, CreateComponentGroupType } from "@/packages/index.d";
-import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d";
 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 import { defineStore } from "pinia";
+import { pinia } from "@/store";
+import { ECreateComponentType } from '@/store/external/modules/extraComponentInfo.d'
 
-export interface ExternalRequestType {
-  test: string
-}
 
-export interface ECreateComponentType extends CreateComponentType {
-  request: RequestConfigType & ExternalRequestType
-}
 
-const chartEditStore = useChartEditStore()
+const chartEditStore = useChartEditStore(pinia)
+
 export const useExternalChartEditStore = defineStore({
   id: 'useExtraComponentInfo',
   actions: {
-    updateComponentList(index: number, newData: CreateComponentType) {
+    updateComponentList(index: number, newData: ECreateComponentType) {
       chartEditStore.updateComponentList(index, newData)
     },
+
+    /**
+     * 新增加属性
+     * @description 更新组件请求源地址
+     * @param targetComponentId 
+     * @param requestOriginUrl 
+     */
+    setComponentRequestOriginUrl(targetComponentId: string, requestOriginUrl: string) {
+      const index = chartEditStore.fetchTargetIndex(targetComponentId)
+      const info = chartEditStore.getComponentList[index];
+      (info.request as ECreateComponentType['request']).requestOriginUrl = requestOriginUrl
+      this.updateComponentList(index, info)
+    }
   }
 })

@@ -71,7 +71,6 @@ const handleClickPanel = () => {
 // TODO socket 请求时会触发
 watchEffect(() => {
   const filter = targetData.value?.filter
-  console.log({ lastFilter, filter, firstFocus })
   if (lastFilter !== filter && firstFocus) {
     lastFilter = filter
     sendHandle()

 <script lang="ts" setup>
-import { getAllPublicInterface, getPublicInterface } from '@/api/external/dynamicRequest'
-import { PublicInterfaceRecord } from '@/api/external/dynamicRequest/model';
+import { getAllPublicInterface } from '@/api/external/dynamicRequest'
+import { PublicInterfaceRecord, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model';
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum';
 import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
-import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { NForm, NCard, NDatePicker, NEmpty, NFormItem, NInput, NInputGroup, NInputNumber, NScrollbar, NSelect, NSpin, NTabPane, NTabs, NTreeSelect, SelectOption, FormInst, NButton, FormItemInst, NText, NSpace, NTag } from 'naive-ui';
-import { ref, reactive, onMounted, computed, unref } from 'vue'
+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 { 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 { MonacoEditor } from '@/components/Pages/MonacoEditor';
+import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d';
 
 const componentMap: { [key in ComponentType]?: any } = {
   [ComponentType.SELECT_TREE]: NTreeSelect,
@@ -42,7 +40,7 @@ const getSelectedInterface = computed(() => {
 
 const getPublicInterfaceList = async () => {
   if (unref(publicInterfaceList).length) return
-  const result = await getAllPublicInterface()
+  const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH })
   publicInterfaceList.value = result
 }
 
@@ -50,10 +48,10 @@ const handleFilter = (query: string, option: SelectOption) => {
   return ((option as Recordable).interfaceName).includes(query)
 }
 
-const { getDynamicFormSchemas, params, createForm, validFlag, setDynamicFormValue } = useDynamicPublicForm(getSelectedInterface)
+const { getDynamicFormSchemas, getValue, createForm, validFlag, setDynamicFormValue } = useDynamicPublicForm(getSelectedInterface)
 
 const getConfigurationData = () => {
-  const value = transferData(unref(getSelectedInterface), unref(getSelectedInterface).requestParams as unknown as RequestParams, params)
+  const value = transferData(unref(getSelectedInterface), unref(getSelectedInterface).requestParams as unknown as RequestParams, unref(getValue))
   return value
 }
 
@@ -67,7 +65,7 @@ const requestContentTypeRef = ref<RequestContentTypeEnum>()
 
 const requestParamsTypeRef = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)
 
-const requestParams = ref<RequestParams>({ Body: { [RequestBodyEnum.FORM_DATA]: {}, [RequestBodyEnum.JSON]: '', [RequestBodyEnum.XML]: '', [RequestBodyEnum.X_WWW_FORM_URLENCODED]: {} }, Header: {}, Params: {} })
+const requestParamsRef = 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)
 
@@ -85,17 +83,17 @@ const getGetRequestTypeName = (key: RequestContentTypeEnum) => {
   return RequestContentTypeNameEnum[RequestContentTypeEnum[key] as keyof typeof RequestContentTypeEnum]
 }
 
-const setConfigurationData = async (request: RequestConfigType) => {
+const setConfigurationData = async (request: ExtraRequestConfigType) => {
   await getPublicInterfaceList()
-  const { requestDataPondId, requestParams: params, requestParamsBodyType, requestContentType, requestHttpType, } = request
-  const { Header } = params
+  const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType } = request
+  const { Header } = requestParams
   selectedPublicInterface.value = requestDataPondId
   requestContentTypeRef.value = requestContentType
   requestHttpTypeRef.value = requestHttpType
   headerRef.value = Header
   requestParamsBodyTypeRef.value = requestParamsBodyType
-  requestParams.value = params
-  setDynamicFormValue(params)
+  requestParamsRef.value = requestParams
+  setDynamicFormValue(requestParams)
 }
 
 
@@ -113,9 +111,6 @@ defineExpose({
   validate
 })
 
-onMounted(() => {
-  getPublicInterfaceList()
-})
 
 </script>
 
@@ -178,25 +173,25 @@ onMounted(() => {
     </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> -->
+                              <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="requestParams" />
+      v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestParamsRef" />
 
     <ParamsTable v-if="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" />
 

@@ -10,18 +10,19 @@ import { DictEnum } from '@/enums/external/dictEnum'
 const GROUP_SEPARATOR = ','
 
 export enum BuiltInVariable {
-  DATE = 'date',
   KEYS = 'keys',
   ENTITY_ID = 'entityId',
   ORGANIZATION_ID = 'organizationId',
   DEVICE_PROFILE_ID = 'deviceProfileId',
+  DATE_FIXED = 'fixed_date',
+  DATE_RANGE = 'date_range'
 }
 
 export enum ComponentType {
   SELECT = 'select',
   SELECT_TREE = 'selectTree',
   DATE_PICKER = 'datePicker',
-  INPUT = 'input'
+  INPUT = 'input',
 }
 
 
@@ -36,12 +37,16 @@ export interface DynamicFormSchema {
 
 export type BuiltInVariableRecord = { [key in BuiltInVariable]: DictItem }
 
+const isDateComponent = (type: BuiltInVariable) => {
+  return [BuiltInVariable.DATE_FIXED, BuiltInVariable.DATE_RANGE].includes(type)
+}
 
 export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => {
 
   const getParams = computed(() => {
     let params = (publicInterfaceRef.value.requestParams as unknown as RequestParams).Params || []
     if (!Array.isArray(params)) params = []
+    console.log(params)
     return params
   })
 
@@ -115,6 +120,27 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
     if (Array.isArray(result)) optionsSet[BuiltInVariable.KEYS] = result
   }
 
+  const getValue = computed(() => {
+    const value = { ...unref(params) }
+    if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) {
+      const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED)
+      Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED])
+      Reflect.deleteProperty(value, BuiltInVariable.DATE_FIXED)
+    }
+
+    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]
+      value[start] = startValue
+      value[end] = endValue
+
+      Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE)
+    }
+
+    return value
+  })
+
   const getSelectOrgTree = computed<TreeSelectProps>(() => {
     return {
       ...basicPreset('name'),
@@ -174,15 +200,25 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
   const getSelectDate = computed(() => {
     return {
       size: 'small',
-      value: params[BuiltInVariable.DATE],
+      value: params[BuiltInVariable.DATE_FIXED],
+      type: 'datetime',
+      clearable: true,
+      defaultTime: '00:00:00',
+      onUpdateValue(value) {
+        params[BuiltInVariable.DATE_FIXED] = value
+      }
+    } as DatePickerProps
+  })
+
+  const getSelectDateRange = computed(() => {
+    return {
+      size: 'small',
+      value: params[BuiltInVariable.DATE_RANGE],
       type: 'datetimerange',
       clearable: true,
       defaultTime: ['00:00:00', '00:00:00'],
       onUpdateValue(value) {
-        // params[BuiltInVariable.DATE] = value
-        params.startTs = value[0]
-        params.endTs = value[1]
-        console.log(params)
+        params[BuiltInVariable.DATE_RANGE] = value
       }
     } as DatePickerProps
   })
@@ -218,9 +254,14 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
       key: BuiltInVariable.KEYS,
       props: getSelectDeviceAttr
     },
-    [BuiltInVariable.DATE]: {
+    [BuiltInVariable.DATE_RANGE]: {
       component: ComponentType.DATE_PICKER,
-      key: BuiltInVariable.DATE,
+      key: BuiltInVariable.DATE_RANGE,
+      props: getSelectDateRange
+    },
+    [BuiltInVariable.DATE_FIXED]: {
+      component: ComponentType.DATE_PICKER,
+      key: BuiltInVariable.DATE_FIXED,
       props: getSelectDate
     }
   }
@@ -287,16 +328,22 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
   }
 
   const setParams = (Params: Recordable) => {
-    unref(getParams).forEach(({ key, value }) => {
-      const splitKeys = key.split(GROUP_SEPARATOR)
-      splitKeys.forEach(temp => {
-        if (unref(getUsedBuiltInVariable).includes(temp)) {
-          params[temp] = Params[temp]
+
+    for (const { key, value } of unref(getParams)) {
+      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]]
+          continue
         }
-      })
+        params[key] = [Params[splitKeys[0]], Params[splitKeys[1]]]
+        continue
+      }
+      for (const temp of splitKeys) {
+        params[temp] = Params[temp]
+      }
+    }
 
-      params[value] = Params[value]
-    })
   }
 
   const setDynamicFormValue = (requestParams: RequestConfigType['requestParams']) => {
@@ -314,7 +361,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco
 
   return {
     validFlag,
-    params,
+    getValue,
     getDynamicFormSchemas,
     setDynamicFormValue,
     createForm

 import { PublicInterfaceRecord } from "@/api/external/dynamicRequest/model"
 import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum"
-import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
+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
@@ -12,8 +13,10 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, reque
     requestDataType: RequestDataTypeEnum.Pond,
     // 请求方式 get/post/del/put/patch
     requestHttpType,
+    // 公共接口的源地址
+    requestOriginUrl,
     // 源后续的 url
-    requestUrl: `${requestOriginUrl}${requestUrl}`,
+    requestUrl,
     // 请求内容主体方式 普通/sql
     requestContentType,
     // 请求体类型
@@ -26,8 +29,8 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, reque
     requestParams: {
       Header,
       Body,
-      Params: fillParams
+      Params: unref(fillParams)
     }
 
-  } as RequestConfigType
+  } as ExternalRequestType
 }

@@ -7,8 +7,7 @@ import { ref, unref } from 'vue';
 import DefaultRequestContent from './DefaultRequestContent.vue';
 import SqlConfiguration from './SqlConfiguration.vue';
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { getUrl } from '@/api/external/customRequest'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; 
 
 const chartEditStore = useChartEditStore()
 
@@ -53,9 +52,8 @@ const setConfigurationData = (request: RequestConfigType) => {
   requestIntervalUnitRef.value = requestIntervalUnit
   requestParamsBodyTypeRef.value = requestParamsBodyType
   requestSQLContentRef.value = requestSQLContent.sql
-  requestParamsRef.value = requestParams
-  const { pathname } = getUrl(requestUrl!)
-  requestUrlRef.value = pathname
+  requestParamsRef.value = requestParams 
+  requestUrlRef.value = requestUrl
 }
 
 defineExpose({