feat: 用户/部门树

apps/web-antd/src/views/system/user/dept-tree.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { DeptTree } from '#/api/system/user/model';
+
+import { onMounted, type PropType, ref } from 'vue';
+
+import { Empty, Skeleton, Tree } from 'ant-design-vue';
+
+import { getDeptTree } from '#/api/system/user';
+
+defineEmits<{ select: [] }>();
+
+const selectDeptId = defineModel('selectDeptId', {
+  required: true,
+  type: Array as PropType<string[]>,
+});
+
+/** 部门数据源 */
+type DeptTreeArray = DeptTree[];
+const deptTreeArray = ref<DeptTreeArray>([]);
+/** 骨架屏加载 */
+const showTreeSkeleton = ref<boolean>(true);
+
+onMounted(async () => {
+  const ret = await getDeptTree();
+  deptTreeArray.value = ret;
+  showTreeSkeleton.value = false;
+});
+</script>
+
+<template>
+  <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
+    <Tree
+      v-bind="$attrs"
+      v-if="deptTreeArray.length > 0"
+      v-model:selected-keys="selectDeptId"
+      :field-names="{ title: 'label', key: 'id' }"
+      :show-line="{ showLeafIcon: false }"
+      :tree-data="deptTreeArray"
+      class="p-[8px]"
+      default-expand-all
+      @select="$emit('select')"
+    />
+    <!-- 仅本人数据权限 可以考虑直接不显示 -->
+    <div v-else class="mt-5">
+      <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" />
+    </div>
+  </Skeleton>
+</template>

apps/web-antd/src/views/system/user/index.vue

@@ -1,13 +1,26 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
+import { message } from 'ant-design-vue';
+
 import { userExport } from '#/api/system/user';
 import { downloadExcel } from '#/utils/file/download';
 
+import DeptTree from './dept-tree.vue';
 import userDrawer from './user-drawer.vue';
 import userImportModal from './user-import-modal.vue';
 
+// 左边部门用
+const selectDeptId = ref<string[]>([]);
+
+function handleSelect() {
+  console.log(selectDeptId.value);
+  message.info(`选择了 ${selectDeptId.value.join(', ')}`);
+}
+
 const [UserImpotModal, userImportModalApi] = useVbenModal({
   connectedComponent: userImportModal,
 });
@@ -27,13 +40,28 @@ function handleAdd() {
 </script>
 
 <template>
-  <Page>
+  <Page content-class="flex gap-[8px]">
+    <DeptTree
+      v-model:select-dept-id="selectDeptId"
+      :height="300"
+      class="w-[260px]"
+      @select="handleSelect"
+    />
     <div class="flex gap-[8px]">
-      <a-button @click="downloadExcel(userExport, '用户管理', {})">
+      <a-button
+        v-access:code="['system:user:export']"
+        @click="downloadExcel(userExport, '用户管理', {})"
+      >
         {{ $t('pages.common.export') }}
       </a-button>
-      <a-button @click="handleImport">{{ $t('pages.common.import') }}</a-button>
+      <a-button v-access:code="['system:user:import']" @click="handleImport">
-      <a-button type="primary" @click="handleAdd">
+        {{ $t('pages.common.import') }}
+      </a-button>
+      <a-button
+        type="primary"
+        v-access:code="['system:user:add']"
+        @click="handleAdd"
+      >
         {{ $t('pages.common.add') }}
       </a-button>
     </div>