fix: fix classification incomplete dropdown display

xtreme1-io · Feb 23, 2024 · 89fb916 · 89fb916
1 parent 06d7759
commit 89fb916
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/frontend/main/src/views/ontology/classes/create/CreateClass.vue b/frontend/main/src/views/ontology/classes/create/CreateClass.vue
@@ -40,10 +40,12 @@
                     :open="showToolTypeDropdown"
                   >
                     <Select.Option v-for="item in toolTypeOption" :key="item.id" :value="item.type">
-                      <div class="img-tool" @click.stop="handleChangeToolType(item.type)">
-                        <img :src="item.img" alt="" />
-                        <span>{{ item.text }}</span>
-                      </div>
+                      <Tooltip :title="item.text">
+                        <div class="img-tool" @click.stop="handleChangeToolType(item.type)">
+                          <img :src="item.img" alt="" />
+                          <span>{{ item.text }}</span>
+                        </div>
+                      </Tooltip>
                     </Select.Option>
                     <template #suffixIcon>
                       <DownOutlined @click.stop="showToolTypeDropdown = !showToolTypeDropdown" />

diff --git a/frontend/main/src/views/ontology/classes/create/CreateClassification.vue b/frontend/main/src/views/ontology/classes/create/CreateClassification.vue
@@ -33,10 +33,12 @@
                       :key="item.key"
                       :value="item.value"
                     >
-                      <div class="img-tool">
-                        <img :src="item.img" alt="" />
-                        <span>{{ item.label }}</span>
-                      </div>
+                      <Tooltip :title="item.label">
+                        <div class="img-tool">
+                          <img :src="item.img" alt="" />
+                          <span>{{ item.label }}</span>
+                        </div>
+                      </Tooltip>
                     </Select.Option>
                   </Select>
                 </Form.Item>
@@ -83,7 +85,7 @@
 <script lang="ts" setup>
   import { ref, reactive, watch, unref, inject, computed } from 'vue';
   // components
-  import { Form, Select, Switch, Input } from 'ant-design-vue';
+  import { Form, Select, Switch, Input, Tooltip } from 'ant-design-vue';
   // import { RuleObject } from 'ant-design-vue/es/form/interface';
   import { useModal, BasicModal, useModalInner } from '/@/components/Modal';
   import { Button } from '/@@/Button';

diff --git a/frontend/main/src/views/ontology/classes/create/TheRelated.vue b/frontend/main/src/views/ontology/classes/create/TheRelated.vue
@@ -5,15 +5,19 @@
         <span>Ontology</span>
         <Select :value="props.ontologyId" @change="handleChangeOntology">
           <Select.Option v-for="item in ontologyList" :key="item.id" :value="item.id">
-            <span>{{ item.name }}</span>
+            <Tooltip :title="item.name">
+              <span>{{ item.name }}</span>
+            </Tooltip>
           </Select.Option>
         </Select>
       </div>
       <div class="related__select-class">
         <span>Class</span>
         <Select :value="props.classId" @change="handleChangeClass">
           <Select.Option v-for="item in classList" :key="item.id" :value="item.id">
-            <span>{{ item.name }}</span>
+            <Tooltip :title="item.name">
+              <span>{{ item.name }}</span>
+            </Tooltip>
           </Select.Option>
         </Select>
       </div>
@@ -38,7 +42,7 @@
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, watch, inject } from 'vue';
-  import { Select, message } from 'ant-design-vue';
+  import { Select, message, Tooltip } from 'ant-design-vue';
   import { useModal } from '/@/components/Modal';
   import TheAttributes from '../attributes/TheAttributes.vue';
   import emitter from 'tiny-emitter/instance';