Commit 0de36dc037cfaadbb69d5c9ca6356a2091d2a29e
Merge branch 'dev-fix-ww' into 'main_dev'
fix(动态请求/公共接口): DEFECT-1269修复动态请求切换公共接口为清空表单 See merge request yunteng/thingskit-view!54
Showing
2 changed files
with
15 additions
and
9 deletions
src/views/chart/ContentConfigurations/components/ChartData/external/components/DynamicForm/index.vue
@@ -4,7 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele | @@ -4,7 +4,7 @@ import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSele | ||
4 | import { computed, nextTick, ref, unref, watch } from 'vue'; | 4 | import { computed, nextTick, ref, unref, watch } from 'vue'; |
5 | import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | 5 | import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; |
6 | import { Help } from '@vicons/ionicons5' | 6 | import { Help } from '@vicons/ionicons5' |
7 | -import { SelectTimeAggregation } from '../SelectTImeAggregation'; | 7 | +import { SelectTimeAggregation } from '../SelectTImeAggregation'; |
8 | 8 | ||
9 | const props = defineProps<{ | 9 | const props = defineProps<{ |
10 | paramsItemList: ParamsItemType[] | 10 | paramsItemList: ParamsItemType[] |
@@ -41,12 +41,16 @@ const setConfigurationData = async (params: Recordable) => { | @@ -41,12 +41,16 @@ const setConfigurationData = async (params: Recordable) => { | ||
41 | setDynamicFormValue(params) | 41 | setDynamicFormValue(params) |
42 | } | 42 | } |
43 | 43 | ||
44 | +const recreate = ref(false) | ||
45 | + | ||
44 | watch( | 46 | watch( |
45 | () => props.paramsItemList, | 47 | () => props.paramsItemList, |
46 | (newValue) => { | 48 | (newValue) => { |
47 | if (newValue) { | 49 | if (newValue) { |
50 | + recreate.value = true | ||
48 | clearParams() | 51 | clearParams() |
49 | createForm() | 52 | createForm() |
53 | + recreate.value = false | ||
50 | } | 54 | } |
51 | } | 55 | } |
52 | ) | 56 | ) |
@@ -61,8 +65,8 @@ defineExpose({ | @@ -61,8 +65,8 @@ defineExpose({ | ||
61 | 65 | ||
62 | <template> | 66 | <template> |
63 | <NForm> | 67 | <NForm> |
64 | - <template v-for="item in getDynamicFormSchemas" :key="item.key"> | ||
65 | - <NFormItem ref="dynamicFormItemEl" :required="item.required" :rule="item.rules"> | 68 | + <template v-for="item in getDynamicFormSchemas" :key="item.uuid"> |
69 | + <NFormItem v-if="!recreate" ref="dynamicFormItemEl" :required="item.required" :rule="item.rules"> | ||
66 | <template #label> | 70 | <template #label> |
67 | <div class="label-container"> | 71 | <div class="label-container"> |
68 | <span>{{ item.name }}</span> | 72 | <span>{{ item.name }}</span> |
@@ -31,6 +31,7 @@ export enum ComponentType { | @@ -31,6 +31,7 @@ export enum ComponentType { | ||
31 | 31 | ||
32 | 32 | ||
33 | export interface DynamicFormSchema { | 33 | export interface DynamicFormSchema { |
34 | + uuid?: string | ||
34 | key: string | 35 | key: string |
35 | name?: string | 36 | name?: string |
36 | component: ComponentType, | 37 | component: ComponentType, |
@@ -336,6 +337,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -336,6 +337,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
336 | }] as FormItemRule | 337 | }] as FormItemRule |
337 | } | 338 | } |
338 | 339 | ||
340 | + const uuid = () => Number(Math.random().toString().substring(2)).toString(32) | ||
339 | const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any, mores: boolean) => { | 341 | const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any, mores: boolean) => { |
340 | const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR) | 342 | const groupList = (builtInVariableKey || '').split(GROUP_SEPARATOR) |
341 | return groupList.reduce((prev, next) => { | 343 | return groupList.reduce((prev, next) => { |
@@ -351,6 +353,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -351,6 +353,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
351 | 353 | ||
352 | schema = { | 354 | schema = { |
353 | ...result, | 355 | ...result, |
356 | + // uuid: uuid(), | ||
354 | props, | 357 | props, |
355 | name, | 358 | name, |
356 | required, | 359 | required, |
@@ -358,6 +361,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -358,6 +361,7 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
358 | } as DynamicFormSchema | 361 | } as DynamicFormSchema |
359 | } else { | 362 | } else { |
360 | schema = { | 363 | schema = { |
364 | + // uuid: uuid(), | ||
361 | key: value, | 365 | key: value, |
362 | name: value, | 366 | name: value, |
363 | component: ComponentType.INPUT, | 367 | component: ComponentType.INPUT, |
@@ -377,22 +381,19 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -377,22 +381,19 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
377 | const schemas = toFormSchemas(key, required, value, mores) | 381 | const schemas = toFormSchemas(key, required, value, mores) |
378 | return [...prev, ...schemas] | 382 | return [...prev, ...schemas] |
379 | }, [] as DynamicFormSchema[]) | 383 | }, [] as DynamicFormSchema[]) |
380 | - console.log(result) | ||
381 | return result | 384 | return result |
382 | }) | 385 | }) |
383 | 386 | ||
384 | const createForm = async () => { | 387 | const createForm = async () => { |
385 | - console.log('enter') | ||
386 | await getBuiltInVariable() | 388 | await getBuiltInVariable() |
387 | await getOrgOption() | 389 | await getOrgOption() |
388 | getDeviceProfileOption() | 390 | getDeviceProfileOption() |
389 | getDeviceOption() | 391 | getDeviceOption() |
390 | - clearParams() | ||
391 | } | 392 | } |
392 | 393 | ||
393 | const setParams = (Params: Recordable = {}) => { | 394 | const setParams = (Params: Recordable = {}) => { |
394 | for (const { key, value, mores } of unref(getParams)) { | 395 | for (const { key, value, mores } of unref(getParams)) { |
395 | - const splitKeys = value ? value.split(GROUP_SEPARATOR) : key.split(GROUP_SEPARATOR) | 396 | + const splitKeys = value ? value.split(GROUP_SEPARATOR) : (key || '').split(GROUP_SEPARATOR) |
396 | if (isDateComponent(key as BuiltInVariable)) { | 397 | if (isDateComponent(key as BuiltInVariable)) { |
397 | if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) { | 398 | if (key as BuiltInVariable === BuiltInVariable.DATE_FIXED) { |
398 | params[key] = Params[splitKeys[0]] || null | 399 | params[key] = Params[splitKeys[0]] || null |
@@ -417,9 +418,10 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | @@ -417,9 +418,10 @@ export const useDynamicPublicForm = (paramsItemList: Ref<ParamsItemType[]>) => { | ||
417 | 418 | ||
418 | const clearParams = () => { | 419 | const clearParams = () => { |
419 | Object.keys(params).forEach(key => { | 420 | Object.keys(params).forEach(key => { |
420 | - // Reflect.deleteProperty(params, key) | ||
421 | - params[key] = null | 421 | + Reflect.deleteProperty(params, key) |
422 | + // params[key] = null | ||
422 | }) | 423 | }) |
424 | + // params[BuiltInVariable.SELECT_TIME_AGGREGATION] = { startTs: null, endTs: null, limit: null, interval: null } | ||
423 | params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {} | 425 | params[BuiltInVariable.SELECT_TIME_AGGREGATION] = {} |
424 | } | 426 | } |
425 | 427 |