feat: 用户/部门树

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 type="primary" @click="handleAdd">
+      <a-button v-access:code="['system:user:import']" @click="handleImport">
+        {{ $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>