From ee6a6e437d8f0806137ab49252c8d6f34337d3cd Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Thu, 1 Aug 2024 22:52:45 +0800
Subject: [PATCH] =?UTF-8?q?revert:=20=E5=9B=9E=E9=80=80=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=83=A8=E9=97=A8=E6=A0=91=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=88=E6=AD=A4=E6=A0=91=E6=9F=A5=E8=AF=A2=E4=B8=8D=E5=BA=94?=
 =?UTF-8?q?=E8=AF=A5=E6=A0=A1=E9=AA=8C=E5=8A=9F=E8=83=BD=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/user/dept/RightMenu.vue |  67 -------------
 src/views/system/user/dept/index.vue     | 119 +++--------------------
 2 files changed, 14 insertions(+), 172 deletions(-)
 delete mode 100644 src/views/system/user/dept/RightMenu.vue

diff --git a/src/views/system/user/dept/RightMenu.vue b/src/views/system/user/dept/RightMenu.vue
deleted file mode 100644
index 935fc5e..0000000
--- a/src/views/system/user/dept/RightMenu.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<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
index 7a4941a..cf2021f 100644
--- a/src/views/system/user/dept/index.vue
+++ b/src/views/system/user/dept/index.vue
@@ -9,51 +9,27 @@
       <div class="left-tree__tree">
         <a-tree
           ref="treeRef"
-          :data="(treeData as unknown as TreeNodeData[])"
-          :field-names="{ key: 'id' }"
+          :data="deptList"
           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 #switcher-icon="node, { isLeaf }">
+            <IconCaretDown v-if="!isLeaf" />
+            <IconIdcard v-else />
           </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'
+import type { TreeInstance } from '@arco-design/web-vue'
+import { ref } from 'vue'
+import { useDept } from '@/hooks/app'
 
 interface Props {
   placeholder?: string
@@ -71,92 +47,25 @@ const select = (keys: Array<any>) => {
   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) {
-          return <icon-caret-down />
-        }
-        return <icon-idcard />
-      }
-    }))
-    await nextTick(() => {
+const { deptList, getDeptList } = useDept({
+  onSuccess: () => {
+    nextTick(() => {
       treeRef.value?.expandAll(true)
-      select([data[0].id])
+      select([deptList.value[0]?.key])
     })
-  } finally {
-    loading.value = false
   }
-}
+})
 
 // 树查询
 const inputValue = ref('')
 watch(inputValue, (val) => {
-  queryForm.description = val
-  getTreeData()
+  getDeptList(val)
 })
 
-// 保存当前右键的节点
-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()
+  getDeptList()
 })
 </script>