feat(scrm): organization user list with departments merged

Author: Matrix-X

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

@@ -25,7 +25,7 @@ export interface WeComUser {
   avatar?: string;
   externalEmail?: string;
   roles: string[];
-  department?: UserDepartment;
+  departments?: string;
   position: string;
   jobTitle: string;
   isEnabled: boolean;

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

@@ -23,8 +23,8 @@ const useWeComUserStore = defineStore('weComUser', {
     departmentTree: [],
     tagTree: null,
     userList: null,
-    selectedDepartmentId: 0,
-    selectedDepartmentIds: [0],
+    selectedDepartmentId: 1,
+    selectedDepartmentIds: [],
     selectedTag: null,
     selectedViewType: 'department',
   }),

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

@@ -47,6 +47,9 @@
     await useWeComUser.loadDepartmentTree(1);
     // consola.log(useWeComUser.departmentTree);
     expandedKeys.value = getAllKeys(useWeComUser.departmentTree);
+
+    // 加载完部部树后，设置默认选中的部门
+    await useWeComUser.setSelectedDepartment(1);
   });
 </script>
 

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

@@ -22,6 +22,11 @@
   });
 
   const pageData = ref({} as listUsersPageReply);
+  const pagination = {
+    pageIndex: 1,
+    pageSize: 5,
+    total: 0,
+  };
 
   const queryChange = () => {
     if (state.tableLoading) {
@@ -30,9 +35,13 @@
     state.tableLoading = true;
     listUsersPage({
       departmentIds: useWeComUser.selectedDepartmentIds,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
     } as listUsersPageRequest)
       .then((res) => {
         pageData.value = res.data;
+        pagination.pageIndex = res.data.pageIndex;
+        pagination.total = res.data.total;
       })
       .finally(() => {
         state.tableLoading = false;
@@ -69,9 +78,15 @@
     console.log('wechat_invite');
   };
 
-  onMounted(() => {
+  const handlePageChange = (page: number) => {
+    pagination.pageIndex = page;
     queryChange();
-  });
+  };
+
+  // onMounted(async () => {
+  //   await useWeComUser.setSelectedDepartment(1);
+  //   queryChange();
+  // });
 </script>
 
 <template>
@@ -103,18 +118,30 @@
       column-resizable
       scrollbar
       :class="styles.userTable"
+      :pagination="pagination"
+      @page-change="(page: number) => handlePageChange(page)"
     >
       <template #columns>
-        <a-table-column title="用户ID" data-index="userid" :width="100" />
-        <a-table-column title="姓名">
+        <a-table-column title="用户ID" data-index="userId" :width="100" />
+        <a-table-column title="姓名" :width="100">
           <template #cell="{ record }">
             {{ record.name }}
           </template>
         </a-table-column>
-        <a-table-column title="职务" data-index="position" ellipsis />
-        <a-table-column title="部门" data-index="department" ellipsis />
-        <a-table-column title="手机" data-index="mobile" ellipsis />
-        <a-table-column title="企业邮箱" data-index="Email" ellipsis />
+        <a-table-column
+          title="职务"
+          data-index="position"
+          :width="100"
+          ellipsis
+        />
+        <a-table-column title="部门" data-index="departments" ellipsis />
+        <a-table-column
+          title="手机"
+          data-index="mobile"
+          :width="150"
+          ellipsis
+        />
+        <a-table-column title="企业邮箱" data-index="email" ellipsis />
       </template>
     </a-table>
   </div>