From ca05fabdec277965057f7901317edefca74cb258 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Mon, 20 May 2024 21:20:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E9=83=A8=E9=97=A8=E6=A0=91=EF=BC=8C?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=83=A8=E9=97=A8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/dept/index.vue          |   2 +-
 src/views/system/user/dept/RightMenu.vue |  67 +++++++
 src/views/system/user/dept/index.vue     | 225 +++++++++++++++++++++++
 src/views/system/user/index.vue          |  63 +++----
 4 files changed, 317 insertions(+), 40 deletions(-)
 create mode 100644 src/views/system/user/dept/RightMenu.vue
 create mode 100644 src/views/system/user/dept/index.vue

diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 5e4c151..aa44605 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -59,7 +59,7 @@
             v-permission="['system:dept:delete']"
             status="danger"
             :title="record.isSystem ? '系统内置数据不能删除' : undefined"
-            :disabled="record.disabled"
+            :disabled="record.isSystem"
             @click="onDelete(record)"
           >
             删除
diff --git a/src/views/system/user/dept/RightMenu.vue b/src/views/system/user/dept/RightMenu.vue
new file mode 100644
index 0000000..935fc5e
--- /dev/null
+++ b/src/views/system/user/dept/RightMenu.vue
@@ -0,0 +1,67 @@
+<template>
+  <a-menu class="right-menu">
+    <a-menu-item @click="onClick('add')">
+      <template #icon><icon-plus-circle :size="16" :stroke-width="3" /></template>
+      <span>新增</span>
+    </a-menu-item>
+
+    <a-menu-item v-permission="['system:dept: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:dept:delete']" :title="data.isSystem ? '系统内置数据不能删除' : undefined" :disabled="data.isSystem" @click="onClick('delete')">
+      <template #icon><icon-delete :size="16" :stroke-width="3" /></template>
+      <span>删除</span>
+    </a-menu-item>
+  </a-menu>
+</template>
+
+<script lang="ts" setup>
+import type { DeptResp } from '@/apis'
+
+interface Props {
+  data: DeptResp
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const emit = defineEmits<{
+  (e: 'on-menu-item-click', mode: string, data: DeptResp): void
+}>()
+
+// 点击菜单项
+const onClick = (mode: string) => {
+  emit('on-menu-item-click', mode, props.data)
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.arco-menu-inner) {
+  padding: 4px;
+
+  .arco-menu-item {
+    height: 34px;
+
+    &:not(.arco-menu-selected) {
+      color: $color-text-1;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.right-menu {
+  width: 120px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  border: 1px solid var(--color-border-2);
+  box-sizing: border-box;
+
+  .arrow-icon {
+    margin-right: 0;
+  }
+}
+</style>
diff --git a/src/views/system/user/dept/index.vue b/src/views/system/user/dept/index.vue
new file mode 100644
index 0000000..2fccd2a
--- /dev/null
+++ b/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>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 1176a15..32de531 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -7,25 +7,34 @@
         </slot>
       </a-space>
     </a-row>
-    <a-row :gutter="16" class="h-full">
-      <a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
-        <a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
-          <template #prefix><icon-search /></template>
-        </a-input>
-        <a-tree ref="treeRef" :data="deptList" :selected-keys="selectedKeys" default-expand-all show-line block-node
-          @select="handleSelectDept">
-        </a-tree>
+    <a-row align="stretch" :gutter="14" class="h-full">
+      <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden">
+        <DeptTree placeholder="请输入关键词" @node-click="handleSelectDept" />
       </a-col>
-      <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20" class="h-full">
-        <GiTable row-key="id" :data="dataList" :columns="columns" :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }" :pagination="pagination" :disabled-tools="['size']"
-          :disabled-column-keys="['username']" @refresh="search">
+      <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
+        <GiTable
+          row-key="id"
+          :data="dataList"
+          :columns="columns"
+          :loading="loading"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+          :pagination="pagination"
+          :disabled-tools="['size']"
+          :disabled-column-keys="['username']"
+          @refresh="search"
+        >
           <template #custom-left>
             <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
               <template #prefix><icon-search /></template>
             </a-input>
-            <a-select v-model="queryForm.status" :options="DisEnableStatusList" placeholder="请选择状态" allow-clear
-              style="width: 150px" @change="search" />
+            <a-select
+              v-model="queryForm.status"
+              :options="DisEnableStatusList"
+              placeholder="请选择状态"
+              allow-clear
+              style="width: 150px"
+              @change="search"
+            />
             <a-button @click="reset">重置</a-button>
           </template>
           <template #custom-right>
@@ -84,14 +93,13 @@
 </template>
 
 <script setup lang="ts">
-import type { TreeInstance } from '@arco-design/web-vue'
+import DeptTree from './dept/index.vue'
 import UserAddModal from './UserAddModal.vue'
 import UserDetailDrawer from './UserDetailDrawer.vue'
 import UserResetPwdModal from './UserResetPwdModal.vue'
 import { type UserQuery, type UserResp, deleteUser, exportUser, listUser } from '@/apis'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useDownload, useTable } from '@/hooks'
-import { useDept } from '@/hooks/app'
 import { isMobile } from '@/utils'
 import getAvatar from '@/utils/avatar'
 import has from '@/utils/has'
@@ -170,25 +178,6 @@ const onExport = () => {
   useDownload(() => exportUser(queryForm))
 }
 
-const treeRef = ref<TreeInstance>()
-const deptName = ref('')
-// 查询部门列表
-const { deptList, getDeptList } = useDept({
-  onSuccess: () => {
-    nextTick(() => {
-      treeRef.value?.expandAll(true)
-      queryForm.deptId = deptList.value[0]?.key as string
-      search()
-    })
-  }
-})
-const selectedKeys = computed(() => {
-  return [queryForm.deptId ? queryForm.deptId : '']
-})
-watch(deptName, (val) => {
-  getDeptList(val)
-})
-
 // 根据选中部门查询
 const handleSelectDept = (keys: Array<any>) => {
   queryForm.deptId = keys.length === 1 ? keys[0] : undefined
@@ -217,10 +206,6 @@ const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()
 const onResetPwd = (item: UserResp) => {
   UserResetPwdModalRef.value?.onReset(item.id)
 }
-
-onMounted(() => {
-  getDeptList()
-})
 </script>
 
 <style lang="scss" scoped></style>