feat(scrm): organization query wecom users with selected department

Author: Matrix-X

src/api/scrm/wecom/department/index.ts

@@ -93,11 +93,14 @@ export function deleteDepartment(request: DeleteDepartmentRequest) {
 
 export interface WeComDepartment {
   id: number;
-  depName: string;
-  leader: DepartmentLeader;
-  phoneNumber: string;
-  email: string;
-  remark: string;
+  departmentLeader: null;
+  name: string;
+  nameEn: string;
+  order: number;
+  refDepartmentId: number;
+  weComDepId: number;
+  weComParentId: number;
+  children: WeComDepartment[];
 }
 
 export interface GetDepartmentRequest {

src/api/scrm/wecom/user/index.ts

@@ -50,20 +50,20 @@ export interface listUsersPageRequest {
   alias?: number[];
   status?: string[];
   WeComUserId?: string | number | null;
-  WeComMainDepartmentId?: any;
   roleCodes?: string[];
   isEnable?: any;
   pageIndex?: number;
   pageSize?: number;
   likeName?: string;
+  departmentId?: number;
+  departmentIds?: number[];
 }
 
 export interface listUsersPageReply {
   list: WeComUser[];
   pageIndex: number;
   pageSize: number;
   total: number;
-  children?: any[];
 }
 
 export function listUsersPage(request: listUsersPageRequest) {

src/store/modules/scrm/wecom/user.ts

@@ -1,42 +1,66 @@
 import { defineStore } from 'pinia';
 import { getDepartment, WeComDepartment } from '@/api/scrm/wecom/department';
 import { Message } from '@arco-design/web-vue';
+import { listUsersPage } from '@/api/scrm/wecom/user';
 
 type TagTree = any;
 type UserList = any;
 
 export type ViewType = 'department' | 'tag';
 
 interface UserState {
-  departmentTree: WeComDepartment | null;
+  departmentTree: WeComDepartment[];
   tagTree: TagTree | null;
   userList: UserList | null;
-  selectedDepartment: number | null;
+  selectedDepartmentId: number;
+  selectedDepartmentIds: number[];
   selectedTag: number | null;
   selectedViewType: ViewType;
 }
 
 const useWeComUserStore = defineStore('weComUser', {
   state: (): UserState => ({
-    departmentTree: null,
+    departmentTree: [],
     tagTree: null,
     userList: null,
-    selectedDepartment: null,
+    selectedDepartmentId: 0,
+    selectedDepartmentIds: [0],
     selectedTag: null,
     selectedViewType: 'department',
   }),
   actions: {
     setDepartmentTree(tree: WeComDepartment) {
-      this.departmentTree = tree;
+      this.departmentTree = [tree];
     },
     setTagTree(tree: TagTree) {
       this.tagTree = tree;
     },
     setUserList(list: UserList) {
       this.userList = list;
     },
-    setSelectedDepartment(id: number) {
-      this.selectedDepartment = id;
+    setSelectedDepartment(departmentId: number) {
+      this.selectedDepartmentId = departmentId;
+      // 清空 selectedDepartmentIds 数组，只保留当前选中的部门 ID
+      this.selectedDepartmentIds = [departmentId];
+
+      // 遍历 departmentTree 中的所有部门
+      const findDepartments = (departments: WeComDepartment[]) => {
+        departments.forEach((department) => {
+          // 检查当前部门的 weComParentId 是否与 selectedDepartmentId 匹配
+          if (department.weComParentId === this.selectedDepartmentId) {
+            // 如果匹配，将部门的 ID 添加到 selectedDepartmentIds 中
+            this.selectedDepartmentIds.push(department.weComDepId);
+          }
+
+          // 如果有子部门，递归调用 findDepartments 处理子部门
+          if (department.children && department.children.length > 0) {
+            findDepartments(department.children);
+          }
+        });
+      };
+
+      // 启动查找
+      findDepartments(this.departmentTree);
     },
     setSelectedTag(id: number) {
       this.selectedTag = id;
@@ -48,13 +72,26 @@ const useWeComUserStore = defineStore('weComUser', {
     async loadDepartmentTree(departmentId: number) {
       const res = await getDepartment({ departmentId });
       if (res.data) {
-        this.departmentTree = res.data.department;
+        this.departmentTree = [res.data.department];
       } else {
         Message.error('获取部门信息失败');
       }
     },
-    async loadCurrentUserByDepartmentId(departmentId: number) {
-      const res = await getDepartment({ departmentId });
+    async loadUsersByDepartmentId(departmentId: number) {
+      const res = await listUsersPage({ departmentId });
+      if (res.data) {
+        this.userList = [res.data.list];
+      } else {
+        Message.error('获取部门用户列表失败');
+      }
+    },
+    async loadUsersByDepartmentIds(departmentIds: number[]) {
+      const res = await listUsersPage({ departmentIds });
+      if (res.data) {
+        this.userList = [res.data.list];
+      } else {
+        Message.error('获取部门用户列表失败');
+      }
     },
   },
 });

src/views/scrm/wecom/organization/user/components/department-side/index.module.less

@@ -1,7 +1,10 @@
 .container{
-  //@apply flex flex-row justify-center items-center min-w-[768px] border border-red-500 m-20 rounded-6 bg-white gap-120;
-  //border: 1px solid green;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
   max-width: 320px;
   width: 100%;
   height: 100%;
+  //border:1px solid red;
 }

src/views/scrm/wecom/organization/user/components/department-side/index.vue

@@ -1,11 +1,7 @@
 <script lang="ts" setup>
   import { computed, onMounted, PropType, ref } from 'vue';
-  import {
-    DepartmentNode,
-    getDepartmentTree,
-    GetDepartmentTreeReply,
-  } from '@/api/scrm/wecom/department';
   import useWeComUserStore from '@/store/modules/scrm/wecom/user';
+  import { consola } from 'consola';
   import styles from './index.module.less';
 
   const prop = defineProps({
@@ -26,55 +22,44 @@
     },
   });
 
-  const departmentTree = ref<GetDepartmentTreeReply>({
-    total: 0,
-    pageIndex: 0,
-    pageSize: 10,
-    list: [],
-  });
-
-  const onSelect = (selectedKeys: any) => {
-    depId.value = selectedKeys[0] === 1 ? 0 : selectedKeys[0];
+  const onSelect = (selectedKeys: number[]) => {
+    depId.value = selectedKeys[0] === 1 ? 1 : selectedKeys[0];
   };
-  const departNodes = (data: DepartmentNode[], parentId = 0) => {
-    const departNodesList: DepartmentNode[] = [];
-    data.forEach((item) => {
-      if (item.WeComParentId === parentId) {
-        const children = departNodes(data, item.WeComDepId);
-        if (children.length > 0) {
-          item.children = children;
+
+  const expandedKeys = ref<number[]>([]);
+
+  const getAllKeys = (tree: any[]) => {
+    const keys: number[] = [];
+    const traverse = (nodes: any[]) => {
+      nodes.forEach((node) => {
+        keys.push(node.weComDepId);
+        if (Array.isArray(node.children)) {
+          traverse(node.children);
         }
-        departNodesList.push(item);
-      }
-    });
-    return departNodesList;
+      });
+    };
+    traverse(tree);
+    return keys;
   };
-  // function fetchDepartmentTree() {
-  //   getDepartmentTree().then((res: any) => {
-  //     const list: DepartmentNode | any = res.data.list || [];
-  //     const departNodesList = departNodes(list);
-  //     res.data.list = departNodesList;
-  //     departmentTree.value = res.data;
-  //   });
-  // }
 
   onMounted(async () => {
-    // fetchDepartmentTree();
-    await useWeComUser.loadDepartmentTree(0);
+    // 默认拉取根目录的部门树
+    await useWeComUser.loadDepartmentTree(1);
+    // consola.log(useWeComUser.departmentTree);
+    expandedKeys.value = getAllKeys(useWeComUser.departmentTree);
   });
 </script>
 
 <template>
   <div :class="styles.container">
     <a-tree
-      v-if="
-        departmentTree && departmentTree.list && departmentTree.list.length > 0
-      "
-      :data="departmentTree.list"
+      :data="useWeComUser.departmentTree"
+      :expanded-keys="expandedKeys"
       :show-line="true"
+      :default-expand-all="true"
       :field-names="{
         title: 'name',
-        key: 'WeComDepId',
+        key: 'weComDepId',
         children: 'children',
       }"
       checked-strategy="child"
@@ -83,8 +68,13 @@
       <template #title="nodeData">
         <span>{{ nodeData.name }}</span>
       </template>
-      <template #switcher-icon>
-        <icon-user-group />
+      <template #switcher-icon="{ children }">
+        <icon-caret-down
+          v-if="Array.isArray(children) && children.length > 0"
+        />
+      </template>
+      <template #icon>
+        <icon-folder />
       </template>
     </a-tree>
   </div>

src/views/scrm/wecom/organization/user/components/user-list/index.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-  import { onMounted, reactive, ref } from 'vue';
+  import { onMounted, reactive, ref, watch } from 'vue';
   import {
     listUsersPage,
     listUsersPageReply,
     listUsersPageRequest,
   } from '@/api/scrm/wecom/user';
+  import useWeComUserStore from '@/store/modules/scrm/wecom/user';
+  import { consola } from 'consola';
   import styles from './index.module.less';
 
-  const queryForm = reactive({
-    WeComMainDepartmentId: null,
-  } as listUsersPageRequest);
+  const useWeComUser = useWeComUserStore();
+
   const state = reactive({
     tableLoading: false,
     deleteUserLoading: false,
@@ -27,7 +28,9 @@
       return;
     }
     state.tableLoading = true;
-    listUsersPage(queryForm)
+    listUsersPage({
+      departmentIds: useWeComUser.selectedDepartmentIds,
+    } as listUsersPageRequest)
       .then((res) => {
         pageData.value = res.data;
       })
@@ -42,6 +45,14 @@
     onlyCurrent: false,
   });
 
+  watch(
+    () => useWeComUser.selectedDepartmentIds,
+    () => {
+      // consola.log('changed:', useWeComUser.selectedDepartmentIds);
+      queryChange();
+    },
+  );
+
   const onAddUser = () => {
     console.log('add user');
   };

src/views/scrm/wecom/organization/user/index.module.less

@@ -5,6 +5,7 @@
   margin: 2px 6px;
   //background: #fff;
   border-radius: 4px;
+  height: 100%;
 
   .departmentList {
     display: flex;

src/views/scrm/wecom/organization/user/index.vue

@@ -7,14 +7,16 @@
   import { pullSyncWeComDepartmentsAndUsers } from '@/api/scrm/wecom/user';
   import { Message } from '@arco-design/web-vue';
   import useLoadingStore from '@/store/modules/loading';
+  import { consola } from 'consola';
   import styles from './index.module.less';
 
   const useWeComUser = useWeComUserStore();
   const loadingStore = useLoadingStore();
 
   const checkedViewType = ref('department');
-  const handleDepartmentChange = (data: number | undefined) => {
-    useWeComUser.setSelectedDepartment(data!);
+  const handleDepartmentChange = (data: number) => {
+    useWeComUser.setSelectedDepartment(data);
+    // consola.log(data, useWeComUser.selectedDepartmentId);
     // queryChange();
   };
 
@@ -34,8 +36,8 @@
       });
       if (res) {
         Message.success('同步成功');
-        // await useWeComUser.loadDepartmentTree(0);
-        // await useWeComUser.loadCurrentUserByDepartmentId(0);
+        await useWeComUser.loadDepartmentTree(1);
+        // await useWeComUser.loadUsersByDepartmentId(0);
       }
     } catch (err: any) {
       Message.error(err.message);
@@ -105,12 +107,7 @@
         >
       </a-radio-group>
       <a-divider :margin="8" />
-      <a-scrollbar>
-        <DepartmentSide
-          style="min-height: 65vh"
-          @update:model-value="handleDepartmentChange"
-        />
-      </a-scrollbar>
+      <DepartmentSide @update:model-value="handleDepartmentChange" />
     </div>
     <div :class="styles.userTable">
       <UserList v-if="useWeComUser.selectedViewType === 'department'" />