Commit 4b5a14e31458826e25e33c74772aaa7ade306b4f
1 parent
6ce66876
perf(dynamicParams): 公共接口自定义参数为entityType时增加tooltip提示
Showing
1 changed file
with
34 additions
and
7 deletions
src/views/chart/ContentConfigurations/components/ChartData/external/components/DynamicForm/index.vue
1 | <script lang="ts" setup> | 1 | <script lang="ts" setup> |
2 | -import { ParamsItemType, PublicInterfaceRecord } from '@/api/external/dynamicRequest/model'; | ||
3 | -import { RequestParams } from '@/enums/httpEnum'; | ||
4 | -import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSelect } from 'naive-ui' | 2 | +import { ParamsItemType } from '@/api/external/dynamicRequest/model'; |
3 | +import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSelect, NIcon, NTooltip } from 'naive-ui' | ||
5 | import { computed, nextTick, ref, unref, watch } from 'vue'; | 4 | import { computed, nextTick, ref, unref, watch } from 'vue'; |
6 | -import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | 5 | +import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; |
6 | +import { Help } from '@vicons/ionicons5' | ||
7 | 7 | ||
8 | const props = defineProps<{ | 8 | const props = defineProps<{ |
9 | paramsItemList: ParamsItemType[] | 9 | paramsItemList: ParamsItemType[] |
@@ -16,7 +16,7 @@ const componentMap: { [key in ComponentType]?: any } = { | @@ -16,7 +16,7 @@ const componentMap: { [key in ComponentType]?: any } = { | ||
16 | [ComponentType.DATE_PICKER]: NDatePicker | 16 | [ComponentType.DATE_PICKER]: NDatePicker |
17 | } | 17 | } |
18 | 18 | ||
19 | -const getParamsItemList = computed(() => { | 19 | +const getParamsItemList = computed(() => { |
20 | return props.paramsItemList | 20 | return props.paramsItemList |
21 | }) | 21 | }) |
22 | 22 | ||
@@ -35,7 +35,7 @@ const validate = async () => { | @@ -35,7 +35,7 @@ const validate = async () => { | ||
35 | return unref(validFlag) | 35 | return unref(validFlag) |
36 | } | 36 | } |
37 | const setConfigurationData = async (params: Recordable) => { | 37 | const setConfigurationData = async (params: Recordable) => { |
38 | - await nextTick() | 38 | + await nextTick() |
39 | setDynamicFormValue(params) | 39 | setDynamicFormValue(params) |
40 | } | 40 | } |
41 | 41 | ||
@@ -60,9 +60,36 @@ defineExpose({ | @@ -60,9 +60,36 @@ defineExpose({ | ||
60 | <template> | 60 | <template> |
61 | <NForm> | 61 | <NForm> |
62 | <template v-for="item in getDynamicFormSchemas" :key="item.key"> | 62 | <template v-for="item in getDynamicFormSchemas" :key="item.key"> |
63 | - <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules"> | 63 | + <NFormItem ref="dynamicFormItemEl" :required="item.required" :rule="item.rules"> |
64 | + <template #label> | ||
65 | + <div class="label-container"> | ||
66 | + <span>{{ item.name }}</span> | ||
67 | + <NTooltip v-if="item.name === 'entityType'" trigger="hover"> | ||
68 | + <template #trigger> | ||
69 | + <NIcon> | ||
70 | + <Help /> | ||
71 | + </NIcon> | ||
72 | + </template> | ||
73 | + 请填入DEVICE | ||
74 | + </NTooltip> | ||
75 | + </div> | ||
76 | + </template> | ||
64 | <component :is="componentMap[item.component]" v-bind="item.props" clearable /> | 77 | <component :is="componentMap[item.component]" v-bind="item.props" clearable /> |
65 | </NFormItem> | 78 | </NFormItem> |
66 | </template> | 79 | </template> |
67 | </NForm> | 80 | </NForm> |
68 | </template> | 81 | </template> |
82 | + | ||
83 | +<style scoped lang="scss"> | ||
84 | +.label-container { | ||
85 | + display: flex; | ||
86 | + align-items: center; | ||
87 | + cursor: pointer; | ||
88 | + gap: 5px; | ||
89 | + | ||
90 | + i { | ||
91 | + border: 1px solid #000; | ||
92 | + border-radius: 50%; | ||
93 | + } | ||
94 | +} | ||
95 | +</style> |