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> |