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 | 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 | 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 | 8 | const props = defineProps<{ |
9 | 9 | paramsItemList: ParamsItemType[] |
... | ... | @@ -16,7 +16,7 @@ const componentMap: { [key in ComponentType]?: any } = { |
16 | 16 | [ComponentType.DATE_PICKER]: NDatePicker |
17 | 17 | } |
18 | 18 | |
19 | -const getParamsItemList = computed(() => { | |
19 | +const getParamsItemList = computed(() => { | |
20 | 20 | return props.paramsItemList |
21 | 21 | }) |
22 | 22 | |
... | ... | @@ -35,7 +35,7 @@ const validate = async () => { |
35 | 35 | return unref(validFlag) |
36 | 36 | } |
37 | 37 | const setConfigurationData = async (params: Recordable) => { |
38 | - await nextTick() | |
38 | + await nextTick() | |
39 | 39 | setDynamicFormValue(params) |
40 | 40 | } |
41 | 41 | |
... | ... | @@ -60,9 +60,36 @@ defineExpose({ |
60 | 60 | <template> |
61 | 61 | <NForm> |
62 | 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 | 77 | <component :is="componentMap[item.component]" v-bind="item.props" clearable /> |
65 | 78 | </NFormItem> |
66 | 79 | </template> |
67 | 80 | </NForm> |
68 | 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> | ... | ... |