refactor: 重构用户管理部门树，支持部门管理

src/views/system/user/dept/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="left-tree">
+    <div class="left-tree__search">
+      <a-input v-model="inputValue" :placeholder="props.placeholder" allow-clear>
+        <template #prefix><icon-search /></template>
+      </a-input>
+    </div>
+    <div class="left-tree__container">
+      <div class="left-tree__tree">
+        <a-tree
+          ref="treeRef"
+          :data="(treeData as unknown as TreeNodeData[])"
+          :field-names="{ key: 'id' }"
+          show-line
+          block-node
+          default-expand-all
+          :selected-keys="selectedKeys"
+          @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 }}</div>
+              </a-tooltip>
+              <div v-else @contextmenu="onContextmenu(node)">{{ node.name }}</div>
+              <template #content>
+                <RightMenu
+                  v-if="has.hasPermOr(['system:dept:update', 'system:dept:delete'])"
+                  :data="node"
+                  @on-menu-item-click="onMenuItemClick"
+                />
+              </template>
+            </a-trigger>
+          </template>
+        </a-tree>
+      </div>
+    </div>
+  </div>
+  <DeptAddModal ref="DeptAddModalRef" @save-success="getTreeData" />
+</template>
+
+<script setup lang="tsx">
+import type { Message, Modal, TreeInstance, TreeNodeData } from '@arco-design/web-vue'
+import { mapTree } from 'xe-utils'
+import DeptAddModal from '../../dept/DeptAddModal.vue'
+import RightMenu from './RightMenu.vue'
+import { type DeptQuery, type DeptResp, deleteDept, listDept } from '@/apis'
+import has from '@/utils/has'
+
+interface Props {
+  placeholder?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '请输入关键词'
+})
+const emit = defineEmits<{
+  (e: 'node-click', keys: Array<any>): void
+}>()
+// 选中节点
+const selectedKeys = ref()
+const select = (keys: Array<any>) => {
+  selectedKeys.value = keys
+  emit('node-click', keys)
+}
+
+const queryForm = reactive<DeptQuery>({
+  sort: ['parentId,asc', 'sort,asc', 'createTime,desc']
+})
+
+interface TreeItem extends DeptResp {
+  popupVisible: boolean
+}
+const treeRef = ref<TreeInstance>()
+const treeData = ref<TreeItem[]>([])
+const loading = ref(false)
+// 查询树列表
+const getTreeData = async (query: DeptQuery = { ...queryForm }) => {
+  try {
+    loading.value = true
+    const { data } = await listDept(query)
+    treeData.value = mapTree(data, (i) => ({
+      ...i,
+      popupVisible: false,
+      switcherIcon: (node: any) => {
+        if (!node.isLeaf) {
+          if (node.expanded) {
+            return <icon-down />
+          } else {
+            return <icon-down />
+          }
+        }
+        return <icon-idcard />
+      }
+    }))
+    await nextTick(() => {
+      treeRef.value?.expandAll(true)
+      select([data[0].id])
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+// 树查询
+const inputValue = ref('')
+watch(inputValue, (val) => {
+  queryForm.description = 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 DeptAddModalRef = ref<InstanceType<typeof DeptAddModal>>()
+// 右键菜单项点击
+const onMenuItemClick = (mode: string, node: DeptResp) => {
+  closeRightMenuPopup()
+  if (mode === 'add') {
+    DeptAddModalRef.value?.onAdd(node.id)
+  } else if (mode === 'update') {
+    DeptAddModalRef.value?.onUpdate(node.id)
+  } else if (mode === 'delete') {
+    Modal.warning({
+      title: '提示',
+      content: `是否确定删除 [${node.name}]？`,
+      hideCancel: false,
+      okButtonProps: { status: 'danger' },
+      onBeforeOk: async () => {
+        try {
+          const res = await deleteDept(node.id)
+          if (res.success) {
+            Message.success('删除成功')
+            getTreeData()
+          }
+          return res.success
+        } catch (error) {
+          return false
+        }
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  getTreeData()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-tree-node-title-text) {
+  width: 100%;
+  white-space: nowrap;
+}
+
+:deep(.arco-tree-node) {
+  line-height: normal;
+  .arco-tree-node-title {
+    border-radius: var(--border-radius-medium);
+
+    &:hover {
+      background-color: var(--color-secondary-hover);
+    }
+  }
+}
+
+:deep(.arco-tree-node-selected) {
+  .arco-tree-node-title {
+    background-color: rgba(var(--primary-6), 0.1);
+
+    &:hover {
+      background-color: rgba(var(--primary-6), 0.1);
+    }
+  }
+}
+
+.left-tree {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+
+  &__search {
+    margin-bottom: 10px;
+  }
+
+  &__container {
+    flex: 1;
+    overflow: hidden;
+    background-color: var(--color-bg-1);
+    position: relative;
+    height: 100%;
+    margin-bottom:10px;
+  }
+
+  &__tree {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: auto
+  }
+}
+</style>