Commit 4b5a14e31458826e25e33c74772aaa7ade306b4f

Authored by ww
1 parent 6ce66876

perf(dynamicParams): 公共接口自定义参数为entityType时增加tooltip提示

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