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