style: 调整字典的操作菜单弹出方式，由右键弹出调整为点击更多按钮弹出

continew-org · Oct 15, 2024 · e29cf88 · e29cf88
1 parent 47a5c44
commit e29cf88
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 42 deletions.
diff --git a/src/views/system/dict/tree/RightMenu.vue b/src/views/system/dict/tree/RightMenu.vue
@@ -1,12 +1,9 @@
 <template>
   <a-menu class="right-menu">
     <a-menu-item v-permission="['system:dict:update']" @click="onClick('update')">
-      <template #icon><icon-edit :size="16" :stroke-width="3" /></template>
       <span>修改</span>
     </a-menu-item>
-
-    <a-menu-item v-permission="['system:dict:delete']" :title="data.isSystem ? '系统内置数据不能删除' : undefined" :disabled="data.isSystem" @click="onClick('delete')">
-      <template #icon><icon-delete :size="16" :stroke-width="3" /></template>
+    <a-menu-item v-permission="['system:dict:delete']" class="danger" :title="data.isSystem ? '系统内置数据不能删除' : undefined" :disabled="data.isSystem" @click="onClick('delete')">
       <span>删除</span>
     </a-menu-item>
   </a-menu>
@@ -38,14 +35,18 @@ const onClick = (mode: string) => {
   .arco-menu-item {
     height: 34px;
 
-    &:not(.arco-menu-selected) {
-      color: $color-text-1;
-    }
-
     &:last-child {
       margin-bottom: 0;
     }
   }
+
+  .danger {
+    color: rgb(var(--danger-6));
+  }
+
+  .danger.arco-menu-disabled {
+    color: var(--color-danger-light-3);
+  }
 }
 
 .right-menu {

diff --git a/src/views/system/dict/tree/index.vue b/src/views/system/dict/tree/index.vue
@@ -8,26 +8,36 @@
         <template #icon><icon-plus /></template>
       </a-button>
     </div>
-    <div class="dict-tree__container">
-      <div class="dict-tree__tree">
+    <a class="dict-tree__container">
+      <a class="dict-tree__tree">
         <a-tree :data="(treeData as unknown as TreeNodeData[])" :field-names="{ key: 'id' }" block-node
           @select="select">
           <template #title="node">
-            <a-trigger v-model:popup-visible="node.popupVisible" trigger="contextMenu" align-point
-              animation-name="slide-dynamic-origin" auto-fit-transform-origin position="bl" scroll-to-close>
-              <a-tooltip v-if="node.description" :content="node.description" background-color="rgb(var(--primary-6))" position="right">
-                <div @contextmenu="onContextmenu(node)">{{ node.name }} ({{ node.code }})</div>
-              </a-tooltip>
-              <div v-else @contextmenu="onContextmenu(node)">{{ node.name }} ({{ node.code }})</div>
+            <a-typography-paragraph
+              :ellipsis="{
+                rows: 1,
+                showTooltip: true,
+                css: true,
+              }"
+            >
+              {{ node.name }} ({{ node.code }})
+            </a-typography-paragraph>
+          </template>
+          <template #extra="node">
+            <a-trigger trigger="click" align-point animation-name="slide-dynamic-origin" auto-fit-transform-origin position="bl" scroll-to-close>
+              <icon-more-vertical class="action" />
               <template #content>
-                <RightMenu v-if="has.hasPermOr(['system:dict:update', 'system:dict:delete'])" :data="node"
-                  @on-menu-item-click="onMenuItemClick" />
+                <RightMenu
+                  v-if="has.hasPermOr(['system:dict:update', 'system:dict:delete'])"
+                  :data="node"
+                  @on-menu-item-click="onMenuItemClick"
+                />
               </template>
             </a-trigger>
           </template>
         </a-tree>
-      </div>
-    </div>
+      </a>
+    </a>
   </div>
 
   <DictAddModal ref="DictAddModalRef" @save-success="getTreeData" />
@@ -51,8 +61,14 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   (e: 'node-click', keys: Array<any>): void
 }>()
+
+const selectKey = ref()
 // 选中节点
 const select = (keys: Array<any>) => {
+  if (selectKey.value === keys[0]) {
+    return
+  }
+  selectKey.value = keys[0]
   emit('node-click', keys)
 }
 
@@ -89,28 +105,14 @@ watch(inputValue, (val) => {
   getTreeData()
 })
 
-// 保存当前右键的节点
-const contextmenuNode = ref<TreeItem | null>(null)
-const onContextmenu = (node: TreeItem) => {
-  contextmenuNode.value = node
-}
-
-// 关闭右键菜单弹框
-const closeRightMenuPopup = () => {
-  if (contextmenuNode.value?.popupVisible) {
-    contextmenuNode.value.popupVisible = false
-  }
-}
-
 const DictAddModalRef = ref<InstanceType<typeof DictAddModal>>()
 // 新增
 const onAdd = () => {
   DictAddModalRef.value?.onAdd()
 }
 
-// 右键菜单项点击
+// 点击菜单项
 const onMenuItemClick = (mode: string, node: DictResp) => {
-  closeRightMenuPopup()
   if (mode === 'update') {
     DictAddModalRef.value?.onUpdate(node.id)
   } else if (mode === 'delete') {
@@ -141,16 +143,18 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-:deep(.arco-tree-node-title-text) {
-  width: 100%;
-  white-space: nowrap;
-}
-
 :deep(.arco-tree-node) {
   line-height: normal;
   border-radius: var(--border-radius-medium);
+  margin: 5px 0;
+  .action {
+    opacity: 0;
+  }
   &:hover {
     background-color: var(--color-secondary-hover);
+    .action {
+      opacity: 1;
+    }
   }
 
   .arco-tree-node-switcher {
@@ -163,13 +167,19 @@ onMounted(() => {
       background-color: transparent;
     }
   }
+
+  .arco-tree-node-title-text {
+    width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
 }
 
 :deep(.arco-tree-node-selected) {
   font-weight: bold;
   background-color: rgba(var(--primary-6), 0.1);
-  &:hover {
-    background-color: rgba(var(--primary-6), 0.1);
+  .arco-typography {
+    color: rgb(var(--primary-6));
   }
 }