Commit 5dda291dc121573b9deee087625e69c88bd14f1f
1 parent
f76ce29a
fix(dynamicForm): 修复公共接口日期类型组件无法回显值
Showing
10 changed files
with
164 additions
and
107 deletions
1 | import { RequestBodyEnum } from "@/enums/httpEnum" | 1 | import { RequestBodyEnum } from "@/enums/httpEnum" |
2 | +import { ExternalRequestType, ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d" | ||
2 | import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" | 3 | import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" |
3 | import { defHttp } from "@/utils/external/http/axios" | 4 | import { defHttp } from "@/utils/external/http/axios" |
4 | 5 | ||
@@ -7,19 +8,9 @@ export enum ParamsType { | @@ -7,19 +8,9 @@ export enum ParamsType { | ||
7 | OPTIONAL | 8 | OPTIONAL |
8 | } | 9 | } |
9 | 10 | ||
10 | -export const isFullUrl = (url = '') => { | ||
11 | - try { | ||
12 | - new URL(url) | ||
13 | - return true | ||
14 | - } catch (error) { | ||
15 | - return false | ||
16 | - } | ||
17 | -} | ||
18 | - | ||
19 | -export const getUrl = (url = '') => { | ||
20 | - const isFullUrlFlag = isFullUrl(url) | ||
21 | - const { origin } = window.location | ||
22 | - return isFullUrlFlag ? new URL(url) : { pathname: url, origin } | 11 | +const getOriginUrl = (originUrl: string) => { |
12 | + const locationUrl = 'localhost' | ||
13 | + return originUrl === locationUrl ? location.origin : originUrl | ||
23 | } | 14 | } |
24 | 15 | ||
25 | const regOptionalParams = /(?={\?)/g | 16 | const regOptionalParams = /(?={\?)/g |
@@ -45,21 +36,21 @@ export const decomposeDynamicParams = (url: string) => { | @@ -45,21 +36,21 @@ export const decomposeDynamicParams = (url: string) => { | ||
45 | } | 36 | } |
46 | 37 | ||
47 | export const customRequest = async (request: RequestConfigType) => { | 38 | export const customRequest = async (request: RequestConfigType) => { |
48 | - const { requestHttpType, requestParams, requestParamsBodyType, requestUrl } = request as RequestGlobalConfigType & RequestConfigType | 39 | + console.log(request) |
40 | + const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType | ||
41 | + let { requestUrl } = request as ExtraRequestConfigType | ||
49 | const { Header, Body } = requestParams | 42 | const { Header, Body } = requestParams |
50 | let { Params } = requestParams | 43 | let { Params } = requestParams |
51 | Params = JSON.parse(JSON.stringify(Params)) | 44 | Params = JSON.parse(JSON.stringify(Params)) |
52 | - | ||
53 | const isDynamicUrlFlag = isDynamicUrl(requestUrl || '') | 45 | const isDynamicUrlFlag = isDynamicUrl(requestUrl || '') |
54 | - const url = getUrl(requestUrl!) | ||
55 | - const { origin } = url | ||
56 | - let { pathname } = url | 46 | + |
47 | + | ||
57 | 48 | ||
58 | if (isDynamicUrlFlag) { | 49 | if (isDynamicUrlFlag) { |
59 | - pathname = decodeURI(pathname || '') | 50 | + requestUrl = decodeURI(requestUrl || '') |
60 | 51 | ||
61 | - const paramsList = decomposeDynamicParams(pathname) | ||
62 | - pathname = paramsList.reduce((prev, next) => { | 52 | + const paramsList = decomposeDynamicParams(requestUrl) |
53 | + requestUrl = paramsList.reduce((prev, next) => { | ||
63 | const { type, value, originValue } = next | 54 | const { type, value, originValue } = next |
64 | if (type === ParamsType.REQUIRED) { | 55 | if (type === ParamsType.REQUIRED) { |
65 | value.forEach(key => { | 56 | value.forEach(key => { |
@@ -73,19 +64,18 @@ export const customRequest = async (request: RequestConfigType) => { | @@ -73,19 +64,18 @@ export const customRequest = async (request: RequestConfigType) => { | ||
73 | } | 64 | } |
74 | 65 | ||
75 | return prev | 66 | return prev |
76 | - }, pathname) | 67 | + }, requestUrl) |
77 | 68 | ||
78 | - pathname = pathname.replaceAll(/[{}?]/g, '') | 69 | + requestUrl = requestUrl.replaceAll(/[{}?]/g, '') |
79 | } | 70 | } |
80 | 71 | ||
81 | const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>] | 72 | const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>] |
82 | 73 | ||
83 | - // Object.assign(Params, { startTs: Params.date[0], endTs: Params.date[1] }) | ||
84 | Reflect.deleteProperty(Params, 'date') | 74 | Reflect.deleteProperty(Params, 'date') |
85 | - | 75 | + console.log(Header) |
86 | return defHttp.request<any>({ | 76 | return defHttp.request<any>({ |
87 | - url: pathname, | ||
88 | - baseURL: origin, | 77 | + url: requestUrl, |
78 | + baseURL: getOriginUrl(requestOriginUrl!), | ||
89 | method: requestHttpType, | 79 | method: requestHttpType, |
90 | params: Params, | 80 | params: Params, |
91 | data: body, | 81 | data: body, |
1 | - import { defHttp } from '@/utils/external/http/axios'; | ||
2 | -import { DeviceAttributesRecord, GetDeviceListParams, PublicInterfaceRecord } from './model'; | 1 | +import { defHttp } from '@/utils/external/http/axios'; |
2 | +import { DeviceAttributesRecord, GetDeviceListParams, PublicInterfaceRecord, PublicInterfaceStateEnum } from './model'; | ||
3 | import { PaginationResult } from '/#/external/axios'; | 3 | import { PaginationResult } from '/#/external/axios'; |
4 | 4 | ||
5 | enum Api { | 5 | enum Api { |
@@ -53,8 +53,9 @@ export const getDeviceInterfaceDetail = async (interfaces: string[]) => { | @@ -53,8 +53,9 @@ export const getDeviceInterfaceDetail = async (interfaces: string[]) => { | ||
53 | }) | 53 | }) |
54 | } | 54 | } |
55 | 55 | ||
56 | -export const getAllPublicInterface = async () => { | 56 | +export const getAllPublicInterface = async (params?: { state: PublicInterfaceStateEnum }) => { |
57 | return defHttp.get<PublicInterfaceRecord[]>({ | 57 | return defHttp.get<PublicInterfaceRecord[]>({ |
58 | - url: Api.GET_PUBLIC_INTERFACE_ALL | 58 | + // url: `${Api.GET_PUBLIC_INTERFACE_ALL}${params?.state ? `/${params.state}` : ''}`, |
59 | + url: Api.GET_PUBLIC_INTERFACE_ALL, | ||
59 | }) | 60 | }) |
60 | } | 61 | } |
1 | import { RequestParams as OriginRequestParams } from "@/enums/httpEnum" | 1 | import { RequestParams as OriginRequestParams } from "@/enums/httpEnum" |
2 | 2 | ||
3 | +export enum PublicInterfaceStateEnum { | ||
4 | + PUBLISH = 1, | ||
5 | + UN_PUBLISH = 0 | ||
6 | +} | ||
7 | + | ||
3 | export interface RequestParams { | 8 | export interface RequestParams { |
4 | Body: Recordable | 9 | Body: Recordable |
5 | Header: Recordable | 10 | Header: Recordable |
1 | -import { ChartEditStoreType } from '../../modules/chartEditStore/chartEditStore.d' | 1 | +import { ChartEditStoreType, RequestConfigType, } from '../../modules/chartEditStore/chartEditStore.d' |
2 | +import { CreateComponentType } from '../../../packages/index.d' | ||
2 | 3 | ||
3 | export enum ExtraComponentInfoStoreEnum { | 4 | export enum ExtraComponentInfoStoreEnum { |
4 | COMPONENT_LIST = 'componentList' | 5 | COMPONENT_LIST = 'componentList' |
5 | -} | 6 | +} |
6 | 7 | ||
7 | export interface ExtraComponentInfoStoreType { | 8 | export interface ExtraComponentInfoStoreType { |
8 | [ExtraComponentInfoStoreEnum.COMPONENT_LIST]: ChartEditStoreType['componentList'] | 9 | [ExtraComponentInfoStoreEnum.COMPONENT_LIST]: ChartEditStoreType['componentList'] |
9 | } | 10 | } |
11 | + | ||
12 | +export interface ExternalRequestType { | ||
13 | + requestOriginUrl?: string | ||
14 | +} | ||
15 | + | ||
16 | +export type ExtraRequestConfigType = RequestConfigType & ExternalRequestType | ||
17 | + | ||
18 | +export interface ECreateComponentType extends CreateComponentType { | ||
19 | + request: ExtraRequestConfigType | ||
20 | +} |
1 | -import { CreateComponentType, CreateComponentGroupType } from "@/packages/index.d"; | ||
2 | -import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"; | ||
3 | import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"; | 1 | import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"; |
4 | import { defineStore } from "pinia"; | 2 | import { defineStore } from "pinia"; |
3 | +import { pinia } from "@/store"; | ||
4 | +import { ECreateComponentType } from '@/store/external/modules/extraComponentInfo.d' | ||
5 | 5 | ||
6 | -export interface ExternalRequestType { | ||
7 | - test: string | ||
8 | -} | ||
9 | 6 | ||
10 | -export interface ECreateComponentType extends CreateComponentType { | ||
11 | - request: RequestConfigType & ExternalRequestType | ||
12 | -} | ||
13 | 7 | ||
14 | -const chartEditStore = useChartEditStore() | 8 | +const chartEditStore = useChartEditStore(pinia) |
9 | + | ||
15 | export const useExternalChartEditStore = defineStore({ | 10 | export const useExternalChartEditStore = defineStore({ |
16 | id: 'useExtraComponentInfo', | 11 | id: 'useExtraComponentInfo', |
17 | actions: { | 12 | actions: { |
18 | - updateComponentList(index: number, newData: CreateComponentType) { | 13 | + updateComponentList(index: number, newData: ECreateComponentType) { |
19 | chartEditStore.updateComponentList(index, newData) | 14 | chartEditStore.updateComponentList(index, newData) |
20 | }, | 15 | }, |
16 | + | ||
17 | + /** | ||
18 | + * 新增加属性 | ||
19 | + * @description 更新组件请求源地址 | ||
20 | + * @param targetComponentId | ||
21 | + * @param requestOriginUrl | ||
22 | + */ | ||
23 | + setComponentRequestOriginUrl(targetComponentId: string, requestOriginUrl: string) { | ||
24 | + const index = chartEditStore.fetchTargetIndex(targetComponentId) | ||
25 | + const info = chartEditStore.getComponentList[index]; | ||
26 | + (info.request as ECreateComponentType['request']).requestOriginUrl = requestOriginUrl | ||
27 | + this.updateComponentList(index, info) | ||
28 | + } | ||
21 | } | 29 | } |
22 | }) | 30 | }) |
@@ -71,7 +71,6 @@ const handleClickPanel = () => { | @@ -71,7 +71,6 @@ const handleClickPanel = () => { | ||
71 | // TODO socket 请求时会触发 | 71 | // TODO socket 请求时会触发 |
72 | watchEffect(() => { | 72 | watchEffect(() => { |
73 | const filter = targetData.value?.filter | 73 | const filter = targetData.value?.filter |
74 | - console.log({ lastFilter, filter, firstFocus }) | ||
75 | if (lastFilter !== filter && firstFocus) { | 74 | if (lastFilter !== filter && firstFocus) { |
76 | lastFilter = filter | 75 | lastFilter = filter |
77 | sendHandle() | 76 | sendHandle() |
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | -import { getAllPublicInterface, getPublicInterface } from '@/api/external/dynamicRequest' | ||
3 | -import { PublicInterfaceRecord } from '@/api/external/dynamicRequest/model'; | 2 | +import { getAllPublicInterface } from '@/api/external/dynamicRequest' |
3 | +import { PublicInterfaceRecord, PublicInterfaceStateEnum } from '@/api/external/dynamicRequest/model'; | ||
4 | import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'; | 4 | import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'; |
5 | import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum'; | 5 | import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum'; |
6 | import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum'; | 6 | import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum'; |
7 | -import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'; | ||
8 | -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; | ||
9 | -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'; | ||
10 | -import { ref, reactive, onMounted, computed, unref } from 'vue' | 7 | +import { NForm, NCard, NDatePicker, NEmpty, NFormItem, NInput, NInputGroup, NInputNumber, NScrollbar, NSelect, NTabPane, NTabs, NTreeSelect, SelectOption, FormItemInst } from 'naive-ui'; |
8 | +import { ref, computed, unref } from 'vue' | ||
11 | import { selectTimeOptions, selectTypeOptions } from '../../../index.d'; | 9 | import { selectTimeOptions, selectTypeOptions } from '../../../index.d'; |
12 | import ParamsTable from '../RequestModal/ParamsTable.vue'; | 10 | import ParamsTable from '../RequestModal/ParamsTable.vue'; |
13 | import RequestBody from '../RequestModal/RequestBody.vue'; | 11 | import RequestBody from '../RequestModal/RequestBody.vue'; |
14 | import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | 12 | import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; |
15 | import { transferData } from './utils'; | 13 | import { transferData } from './utils'; |
16 | -import { MonacoEditor } from '@/components/Pages/MonacoEditor'; | 14 | +import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d'; |
17 | 15 | ||
18 | const componentMap: { [key in ComponentType]?: any } = { | 16 | const componentMap: { [key in ComponentType]?: any } = { |
19 | [ComponentType.SELECT_TREE]: NTreeSelect, | 17 | [ComponentType.SELECT_TREE]: NTreeSelect, |
@@ -42,7 +40,7 @@ const getSelectedInterface = computed(() => { | @@ -42,7 +40,7 @@ const getSelectedInterface = computed(() => { | ||
42 | 40 | ||
43 | const getPublicInterfaceList = async () => { | 41 | const getPublicInterfaceList = async () => { |
44 | if (unref(publicInterfaceList).length) return | 42 | if (unref(publicInterfaceList).length) return |
45 | - const result = await getAllPublicInterface() | 43 | + const result = await getAllPublicInterface({ state: PublicInterfaceStateEnum.PUBLISH }) |
46 | publicInterfaceList.value = result | 44 | publicInterfaceList.value = result |
47 | } | 45 | } |
48 | 46 | ||
@@ -50,10 +48,10 @@ const handleFilter = (query: string, option: SelectOption) => { | @@ -50,10 +48,10 @@ const handleFilter = (query: string, option: SelectOption) => { | ||
50 | return ((option as Recordable).interfaceName).includes(query) | 48 | return ((option as Recordable).interfaceName).includes(query) |
51 | } | 49 | } |
52 | 50 | ||
53 | -const { getDynamicFormSchemas, params, createForm, validFlag, setDynamicFormValue } = useDynamicPublicForm(getSelectedInterface) | 51 | +const { getDynamicFormSchemas, getValue, createForm, validFlag, setDynamicFormValue } = useDynamicPublicForm(getSelectedInterface) |
54 | 52 | ||
55 | const getConfigurationData = () => { | 53 | const getConfigurationData = () => { |
56 | - const value = transferData(unref(getSelectedInterface), unref(getSelectedInterface).requestParams as unknown as RequestParams, params) | 54 | + const value = transferData(unref(getSelectedInterface), unref(getSelectedInterface).requestParams as unknown as RequestParams, unref(getValue)) |
57 | return value | 55 | return value |
58 | } | 56 | } |
59 | 57 | ||
@@ -67,7 +65,7 @@ const requestContentTypeRef = ref<RequestContentTypeEnum>() | @@ -67,7 +65,7 @@ const requestContentTypeRef = ref<RequestContentTypeEnum>() | ||
67 | 65 | ||
68 | const requestParamsTypeRef = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS) | 66 | const requestParamsTypeRef = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS) |
69 | 67 | ||
70 | -const requestParams = ref<RequestParams>({ Body: { [RequestBodyEnum.FORM_DATA]: {}, [RequestBodyEnum.JSON]: '', [RequestBodyEnum.XML]: '', [RequestBodyEnum.X_WWW_FORM_URLENCODED]: {} }, Header: {}, Params: {} }) | 68 | +const requestParamsRef = ref<RequestParams>({ Body: { [RequestBodyEnum.FORM_DATA]: {}, [RequestBodyEnum.JSON]: '', [RequestBodyEnum.XML]: '', [RequestBodyEnum.X_WWW_FORM_URLENCODED]: {} }, Header: {}, Params: {} }) |
71 | 69 | ||
72 | const requestParamsBodyTypeRef = ref<RequestBodyEnum>(RequestBodyEnum.X_WWW_FORM_URLENCODED) | 70 | const requestParamsBodyTypeRef = ref<RequestBodyEnum>(RequestBodyEnum.X_WWW_FORM_URLENCODED) |
73 | 71 | ||
@@ -85,17 +83,17 @@ const getGetRequestTypeName = (key: RequestContentTypeEnum) => { | @@ -85,17 +83,17 @@ const getGetRequestTypeName = (key: RequestContentTypeEnum) => { | ||
85 | return RequestContentTypeNameEnum[RequestContentTypeEnum[key] as keyof typeof RequestContentTypeEnum] | 83 | return RequestContentTypeNameEnum[RequestContentTypeEnum[key] as keyof typeof RequestContentTypeEnum] |
86 | } | 84 | } |
87 | 85 | ||
88 | -const setConfigurationData = async (request: RequestConfigType) => { | 86 | +const setConfigurationData = async (request: ExtraRequestConfigType) => { |
89 | await getPublicInterfaceList() | 87 | await getPublicInterfaceList() |
90 | - const { requestDataPondId, requestParams: params, requestParamsBodyType, requestContentType, requestHttpType, } = request | ||
91 | - const { Header } = params | 88 | + const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType } = request |
89 | + const { Header } = requestParams | ||
92 | selectedPublicInterface.value = requestDataPondId | 90 | selectedPublicInterface.value = requestDataPondId |
93 | requestContentTypeRef.value = requestContentType | 91 | requestContentTypeRef.value = requestContentType |
94 | requestHttpTypeRef.value = requestHttpType | 92 | requestHttpTypeRef.value = requestHttpType |
95 | headerRef.value = Header | 93 | headerRef.value = Header |
96 | requestParamsBodyTypeRef.value = requestParamsBodyType | 94 | requestParamsBodyTypeRef.value = requestParamsBodyType |
97 | - requestParams.value = params | ||
98 | - setDynamicFormValue(params) | 95 | + requestParamsRef.value = requestParams |
96 | + setDynamicFormValue(requestParams) | ||
99 | } | 97 | } |
100 | 98 | ||
101 | 99 | ||
@@ -113,9 +111,6 @@ defineExpose({ | @@ -113,9 +111,6 @@ defineExpose({ | ||
113 | validate | 111 | validate |
114 | }) | 112 | }) |
115 | 113 | ||
116 | -onMounted(() => { | ||
117 | - getPublicInterfaceList() | ||
118 | -}) | ||
119 | 114 | ||
120 | </script> | 115 | </script> |
121 | 116 | ||
@@ -178,25 +173,25 @@ onMounted(() => { | @@ -178,25 +173,25 @@ onMounted(() => { | ||
178 | </NCard> | 173 | </NCard> |
179 | 174 | ||
180 | <!-- <section v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS"> | 175 | <!-- <section v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS"> |
181 | - <NCard> | ||
182 | - <NSpace vertical> | ||
183 | - <NTag type="info"> | ||
184 | - <span class="func-keyword">function</span> filter(res) { | ||
185 | - </NTag> | ||
186 | - <MonacoEditor v-model:modelValue="filter" width="380px" height="300px" language="javascript" /> | ||
187 | - <NTag type="info">}</NTag> | ||
188 | - </NSpace> | ||
189 | - </NCard> | ||
190 | - <NCard style="margin-top: 20px;"> | ||
191 | - <NText>转换结果:</NText> | ||
192 | - <section> | ||
193 | - <NText>{{ params }}</NText> | ||
194 | - </section> | ||
195 | - </NCard> | ||
196 | - </section> --> | 176 | + <NCard> |
177 | + <NSpace vertical> | ||
178 | + <NTag type="info"> | ||
179 | + <span class="func-keyword">function</span> filter(res) { | ||
180 | + </NTag> | ||
181 | + <MonacoEditor v-model:modelValue="filter" width="380px" height="300px" language="javascript" /> | ||
182 | + <NTag type="info">}</NTag> | ||
183 | + </NSpace> | ||
184 | + </NCard> | ||
185 | + <NCard style="margin-top: 20px;"> | ||
186 | + <NText>转换结果:</NText> | ||
187 | + <section> | ||
188 | + <NText>{{ params }}</NText> | ||
189 | + </section> | ||
190 | + </NCard> | ||
191 | + </section> --> | ||
197 | 192 | ||
198 | <RequestBody v-if="requestParamsTypeRef === RequestParamsTypeEnum.BODY" | 193 | <RequestBody v-if="requestParamsTypeRef === RequestParamsTypeEnum.BODY" |
199 | - v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestParams" /> | 194 | + v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestParamsRef" /> |
200 | 195 | ||
201 | <ParamsTable v-if="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" /> | 196 | <ParamsTable v-if="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" /> |
202 | 197 |
@@ -10,18 +10,19 @@ import { DictEnum } from '@/enums/external/dictEnum' | @@ -10,18 +10,19 @@ import { DictEnum } from '@/enums/external/dictEnum' | ||
10 | const GROUP_SEPARATOR = ',' | 10 | const GROUP_SEPARATOR = ',' |
11 | 11 | ||
12 | export enum BuiltInVariable { | 12 | export enum BuiltInVariable { |
13 | - DATE = 'date', | ||
14 | KEYS = 'keys', | 13 | KEYS = 'keys', |
15 | ENTITY_ID = 'entityId', | 14 | ENTITY_ID = 'entityId', |
16 | ORGANIZATION_ID = 'organizationId', | 15 | ORGANIZATION_ID = 'organizationId', |
17 | DEVICE_PROFILE_ID = 'deviceProfileId', | 16 | DEVICE_PROFILE_ID = 'deviceProfileId', |
17 | + DATE_FIXED = 'fixed_date', | ||
18 | + DATE_RANGE = 'date_range' | ||
18 | } | 19 | } |
19 | 20 | ||
20 | export enum ComponentType { | 21 | export enum ComponentType { |
21 | SELECT = 'select', | 22 | SELECT = 'select', |
22 | SELECT_TREE = 'selectTree', | 23 | SELECT_TREE = 'selectTree', |
23 | DATE_PICKER = 'datePicker', | 24 | DATE_PICKER = 'datePicker', |
24 | - INPUT = 'input' | 25 | + INPUT = 'input', |
25 | } | 26 | } |
26 | 27 | ||
27 | 28 | ||
@@ -36,12 +37,16 @@ export interface DynamicFormSchema { | @@ -36,12 +37,16 @@ export interface DynamicFormSchema { | ||
36 | 37 | ||
37 | export type BuiltInVariableRecord = { [key in BuiltInVariable]: DictItem } | 38 | export type BuiltInVariableRecord = { [key in BuiltInVariable]: DictItem } |
38 | 39 | ||
40 | +const isDateComponent = (type: BuiltInVariable) => { | ||
41 | + return [BuiltInVariable.DATE_FIXED, BuiltInVariable.DATE_RANGE].includes(type) | ||
42 | +} | ||
39 | 43 | ||
40 | export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => { | 44 | export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => { |
41 | 45 | ||
42 | const getParams = computed(() => { | 46 | const getParams = computed(() => { |
43 | let params = (publicInterfaceRef.value.requestParams as unknown as RequestParams).Params || [] | 47 | let params = (publicInterfaceRef.value.requestParams as unknown as RequestParams).Params || [] |
44 | if (!Array.isArray(params)) params = [] | 48 | if (!Array.isArray(params)) params = [] |
49 | + console.log(params) | ||
45 | return params | 50 | return params |
46 | }) | 51 | }) |
47 | 52 | ||
@@ -115,6 +120,27 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | @@ -115,6 +120,27 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | ||
115 | if (Array.isArray(result)) optionsSet[BuiltInVariable.KEYS] = result | 120 | if (Array.isArray(result)) optionsSet[BuiltInVariable.KEYS] = result |
116 | } | 121 | } |
117 | 122 | ||
123 | + const getValue = computed(() => { | ||
124 | + const value = { ...unref(params) } | ||
125 | + if (Reflect.has(value, BuiltInVariable.DATE_FIXED)) { | ||
126 | + const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_FIXED) | ||
127 | + Reflect.set(value, fieldMapping?.value || '', value[BuiltInVariable.DATE_FIXED]) | ||
128 | + Reflect.deleteProperty(value, BuiltInVariable.DATE_FIXED) | ||
129 | + } | ||
130 | + | ||
131 | + if (Reflect.has(value, BuiltInVariable.DATE_RANGE)) { | ||
132 | + const fieldMapping = unref(getParams).find(item => item.key === BuiltInVariable.DATE_RANGE) | ||
133 | + const [start, end] = ((fieldMapping || {}).value || '').split(GROUP_SEPARATOR) | ||
134 | + const [startValue, endValue] = value[BuiltInVariable.DATE_RANGE] | ||
135 | + value[start] = startValue | ||
136 | + value[end] = endValue | ||
137 | + | ||
138 | + Reflect.deleteProperty(value, BuiltInVariable.DATE_RANGE) | ||
139 | + } | ||
140 | + | ||
141 | + return value | ||
142 | + }) | ||
143 | + | ||
118 | const getSelectOrgTree = computed<TreeSelectProps>(() => { | 144 | const getSelectOrgTree = computed<TreeSelectProps>(() => { |
119 | return { | 145 | return { |
120 | ...basicPreset('name'), | 146 | ...basicPreset('name'), |
@@ -174,15 +200,25 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | @@ -174,15 +200,25 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | ||
174 | const getSelectDate = computed(() => { | 200 | const getSelectDate = computed(() => { |
175 | return { | 201 | return { |
176 | size: 'small', | 202 | size: 'small', |
177 | - value: params[BuiltInVariable.DATE], | 203 | + value: params[BuiltInVariable.DATE_FIXED], |
204 | + type: 'datetime', | ||
205 | + clearable: true, | ||
206 | + defaultTime: '00:00:00', | ||
207 | + onUpdateValue(value) { | ||
208 | + params[BuiltInVariable.DATE_FIXED] = value | ||
209 | + } | ||
210 | + } as DatePickerProps | ||
211 | + }) | ||
212 | + | ||
213 | + const getSelectDateRange = computed(() => { | ||
214 | + return { | ||
215 | + size: 'small', | ||
216 | + value: params[BuiltInVariable.DATE_RANGE], | ||
178 | type: 'datetimerange', | 217 | type: 'datetimerange', |
179 | clearable: true, | 218 | clearable: true, |
180 | defaultTime: ['00:00:00', '00:00:00'], | 219 | defaultTime: ['00:00:00', '00:00:00'], |
181 | onUpdateValue(value) { | 220 | onUpdateValue(value) { |
182 | - // params[BuiltInVariable.DATE] = value | ||
183 | - params.startTs = value[0] | ||
184 | - params.endTs = value[1] | ||
185 | - console.log(params) | 221 | + params[BuiltInVariable.DATE_RANGE] = value |
186 | } | 222 | } |
187 | } as DatePickerProps | 223 | } as DatePickerProps |
188 | }) | 224 | }) |
@@ -218,9 +254,14 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | @@ -218,9 +254,14 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | ||
218 | key: BuiltInVariable.KEYS, | 254 | key: BuiltInVariable.KEYS, |
219 | props: getSelectDeviceAttr | 255 | props: getSelectDeviceAttr |
220 | }, | 256 | }, |
221 | - [BuiltInVariable.DATE]: { | 257 | + [BuiltInVariable.DATE_RANGE]: { |
222 | component: ComponentType.DATE_PICKER, | 258 | component: ComponentType.DATE_PICKER, |
223 | - key: BuiltInVariable.DATE, | 259 | + key: BuiltInVariable.DATE_RANGE, |
260 | + props: getSelectDateRange | ||
261 | + }, | ||
262 | + [BuiltInVariable.DATE_FIXED]: { | ||
263 | + component: ComponentType.DATE_PICKER, | ||
264 | + key: BuiltInVariable.DATE_FIXED, | ||
224 | props: getSelectDate | 265 | props: getSelectDate |
225 | } | 266 | } |
226 | } | 267 | } |
@@ -287,16 +328,22 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | @@ -287,16 +328,22 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | ||
287 | } | 328 | } |
288 | 329 | ||
289 | const setParams = (Params: Recordable) => { | 330 | const setParams = (Params: Recordable) => { |
290 | - unref(getParams).forEach(({ key, value }) => { | ||
291 | - const splitKeys = key.split(GROUP_SEPARATOR) | ||
292 | - splitKeys.forEach(temp => { | ||
293 | - if (unref(getUsedBuiltInVariable).includes(temp)) { | ||
294 | - params[temp] = Params[temp] | 331 | + |
332 | + for (const { key, value } of unref(getParams)) { | ||
333 | + const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR) | ||
334 | + if (isDateComponent(key as BuiltInVariable)) { | ||
335 | + if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) { | ||
336 | + params[key] = Params[splitKeys[0]] | ||
337 | + continue | ||
295 | } | 338 | } |
296 | - }) | 339 | + params[key] = [Params[splitKeys[0]], Params[splitKeys[1]]] |
340 | + continue | ||
341 | + } | ||
342 | + for (const temp of splitKeys) { | ||
343 | + params[temp] = Params[temp] | ||
344 | + } | ||
345 | + } | ||
297 | 346 | ||
298 | - params[value] = Params[value] | ||
299 | - }) | ||
300 | } | 347 | } |
301 | 348 | ||
302 | const setDynamicFormValue = (requestParams: RequestConfigType['requestParams']) => { | 349 | const setDynamicFormValue = (requestParams: RequestConfigType['requestParams']) => { |
@@ -314,7 +361,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | @@ -314,7 +361,7 @@ export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceReco | ||
314 | 361 | ||
315 | return { | 362 | return { |
316 | validFlag, | 363 | validFlag, |
317 | - params, | 364 | + getValue, |
318 | getDynamicFormSchemas, | 365 | getDynamicFormSchemas, |
319 | setDynamicFormValue, | 366 | setDynamicFormValue, |
320 | createForm | 367 | createForm |
1 | import { PublicInterfaceRecord } from "@/api/external/dynamicRequest/model" | 1 | import { PublicInterfaceRecord } from "@/api/external/dynamicRequest/model" |
2 | import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum" | 2 | import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum" |
3 | -import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d" | 3 | +import { ExternalRequestType } from "@/store/external/modules/extraComponentInfo.d" |
4 | +import { unref } from "vue" | ||
4 | 5 | ||
5 | export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, requestParams: RequestParams, fillParams: Recordable) => { | 6 | export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, requestParams: RequestParams, fillParams: Recordable) => { |
6 | const { requestContentType, requestHttpType, id, requestUrl, requestParamsBodyType, requestOriginUrl } = publicInterfaceRecord | 7 | const { requestContentType, requestHttpType, id, requestUrl, requestParamsBodyType, requestOriginUrl } = publicInterfaceRecord |
@@ -12,8 +13,10 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, reque | @@ -12,8 +13,10 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, reque | ||
12 | requestDataType: RequestDataTypeEnum.Pond, | 13 | requestDataType: RequestDataTypeEnum.Pond, |
13 | // 请求方式 get/post/del/put/patch | 14 | // 请求方式 get/post/del/put/patch |
14 | requestHttpType, | 15 | requestHttpType, |
16 | + // 公共接口的源地址 | ||
17 | + requestOriginUrl, | ||
15 | // 源后续的 url | 18 | // 源后续的 url |
16 | - requestUrl: `${requestOriginUrl}${requestUrl}`, | 19 | + requestUrl, |
17 | // 请求内容主体方式 普通/sql | 20 | // 请求内容主体方式 普通/sql |
18 | requestContentType, | 21 | requestContentType, |
19 | // 请求体类型 | 22 | // 请求体类型 |
@@ -26,8 +29,8 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, reque | @@ -26,8 +29,8 @@ export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, reque | ||
26 | requestParams: { | 29 | requestParams: { |
27 | Header, | 30 | Header, |
28 | Body, | 31 | Body, |
29 | - Params: fillParams | 32 | + Params: unref(fillParams) |
30 | } | 33 | } |
31 | 34 | ||
32 | - } as RequestConfigType | 35 | + } as ExternalRequestType |
33 | } | 36 | } |
@@ -7,8 +7,7 @@ import { ref, unref } from 'vue'; | @@ -7,8 +7,7 @@ import { ref, unref } from 'vue'; | ||
7 | import DefaultRequestContent from './DefaultRequestContent.vue'; | 7 | import DefaultRequestContent from './DefaultRequestContent.vue'; |
8 | import SqlConfiguration from './SqlConfiguration.vue'; | 8 | import SqlConfiguration from './SqlConfiguration.vue'; |
9 | import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'; | 9 | import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'; |
10 | -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; | ||
11 | -import { getUrl } from '@/api/external/customRequest' | 10 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; |
12 | 11 | ||
13 | const chartEditStore = useChartEditStore() | 12 | const chartEditStore = useChartEditStore() |
14 | 13 | ||
@@ -53,9 +52,8 @@ const setConfigurationData = (request: RequestConfigType) => { | @@ -53,9 +52,8 @@ const setConfigurationData = (request: RequestConfigType) => { | ||
53 | requestIntervalUnitRef.value = requestIntervalUnit | 52 | requestIntervalUnitRef.value = requestIntervalUnit |
54 | requestParamsBodyTypeRef.value = requestParamsBodyType | 53 | requestParamsBodyTypeRef.value = requestParamsBodyType |
55 | requestSQLContentRef.value = requestSQLContent.sql | 54 | requestSQLContentRef.value = requestSQLContent.sql |
56 | - requestParamsRef.value = requestParams | ||
57 | - const { pathname } = getUrl(requestUrl!) | ||
58 | - requestUrlRef.value = pathname | 55 | + requestParamsRef.value = requestParams |
56 | + requestUrlRef.value = requestUrl | ||
59 | } | 57 | } |
60 | 58 | ||
61 | defineExpose({ | 59 | defineExpose({ |