消息=发起群聊-组织架构-查看用户调整

src/views/message/components/CreateGroupDialog.vue

@@ -22,7 +22,11 @@
           />
 
           <!-- 无搜索时展示标签页 -->
-          <el-tabs v-if="!isSearching" v-model="activeName" @tab-click="handleClick">
+          <el-tabs
+            v-if="!isSearching"
+            v-model="activeName"
+            @tab-click="handleClick"
+          >
             <!-- 最近联系人 -->
             <el-tab-pane label="最近联系人" name="recentContacts">
               <div
@@ -173,6 +177,7 @@
                   node-key="id"
                   :expand-on-click-node="false"
                   @node-click="handleOrgNodeClick"
+                  @node-expand="handleOrgNodeClick"
                 >
                   <template #default="{ node, data }">
                     <div class="custom-tree-node">
@@ -192,7 +197,16 @@
                         </el-checkbox>
                       </template>
                       <!-- 用户节点 -->
-                      <div v-else-if="data.type === 'user'" class="userline">
+                      <div
+                        v-else-if="data.type === 'user'"
+                        :class="[
+                          'member-item',
+                          {
+                            offline: !data.online,
+                          },
+                        ]"
+                        @click="toggleSelect(data)"
+                      >
                         <el-checkbox
                           :value="isSelected(data.id)"
                           @change="toggleSelect(data)"
@@ -397,7 +411,6 @@ export default {
       this.resetPage();
       this.loadData();
     },
-    // 重置分页、无更多标记、列表数据
     resetPage() {
       this.contactPage = 1;
       this.groupPage = 1;
@@ -414,17 +427,10 @@ export default {
       ]);
     },
 
-    /**
-     * 获取联系人列表
-     * @param {Boolean} isReset true=首页刷新，false=滚动追加
-     */
     async fetchRecentContacts(isReset = false) {
-      // 已经无更多且不是刷新首页，直接return
       if (this.contactNoMore && !isReset) return;
-
       if (isReset) this.loading = true;
       else this.loadMoreLoading = true;
-
       try {
         const res = await getMessagesLatestContacts({
           scene: 1,
@@ -445,14 +451,11 @@ export default {
           online: item.online === 1 || item.online === true,
           selected: this.isSelected(item.id),
         }));
-
         if (isReset) {
           this.memberList = formatList;
         } else {
           this.memberList.push(...formatList);
         }
-
-        // 核心判断：返回条数 < 每页条数，标记无更多，后续不再触底加载
         if (list.length < this.pageSize) {
           this.contactNoMore = true;
         } else {
@@ -467,9 +470,7 @@ export default {
       }
     },
 
-    // 触底加载更多联系人
     loadMoreContacts() {
-      // 正在加载 / 无更多 直接阻断
       if (this.loadMoreLoading || this.contactNoMore) return;
       this.contactPage++;
       this.fetchRecentContacts(false);
@@ -477,7 +478,6 @@ export default {
 
     async fetchRecentGroups(isReset = false) {
       if (this.groupNoMore && !isReset) return;
-
       try {
         const res = await getMessagesLatestContacts({
           scene: 4,
@@ -493,14 +493,11 @@ export default {
           allSelected: false,
           members: [],
         }));
-
         if (isReset) {
           this.recentGroups = formatGroups;
         } else {
           this.recentGroups.push(...formatGroups);
         }
-
-        // 核心判断：返回条数不足一页，关闭触底加载
         if (list.length < this.pageSize) {
           this.groupNoMore = true;
         } else {
@@ -512,7 +509,6 @@ export default {
       }
     },
 
-    // 触底加载更多群组
     loadMoreGroups() {
       if (this.loadMoreLoading || this.groupNoMore) return;
       this.groupPage++;
@@ -530,13 +526,11 @@ export default {
       }
     },
 
-    // 滚动触底统一处理
     handleScroll(e) {
       const target = e.target;
       const scrollTop = target.scrollTop;
       const scrollHeight = target.scrollHeight;
       const clientHeight = target.clientHeight;
-      // 距离底部50px触发加载
       if (scrollTop + clientHeight >= scrollHeight - 50) {
         if (this.activeName === "recentContacts") {
           this.loadMoreContacts();
@@ -552,21 +546,22 @@ export default {
         id: item.id,
         name: item.name,
         type: "org",
-        isLoaded: false,
+        isLoaded: false, // 是否加载过本部门人员
         hasChildren: item.child && item.child.length > 0,
         children:
           item.child && item.child.length > 0
             ? this.buildOrgTree(item.child)
             : [],
+        userList: [], // 存储当前部门下的用户
       }));
     },
 
+    // 【重写】任意层级组织节点点击加载人员，不再判断是否有子部门
     async loadOrgUsers(node) {
-      if (node.isLoaded || node.type === "user" || node.type === "all") return;
+      // 已经加载过直接返回缓存
-      if (node.hasChildren && node.children && node.children.length > 0) {
+      if (node.isLoaded) return;
-        node.isLoaded = true;
+      // 只处理组织节点
-        return;
+      if (node.type !== "org") return;
-      }
       try {
         const res = await getGroupsListUser({ group_id: node.id });
         const list = res.data?.list || [];
@@ -578,6 +573,9 @@ export default {
           type: "user",
           selected: this.isSelected(item.id),
         }));
+        // 保存当前部门人员到userList缓存
+        node.userList = [...users];
+        // 拼接全选节点
         if (users.length > 0) {
           const allSelected = users.every((u) => u.selected);
           const selectedCount = users.filter((u) => u.selected).length;
@@ -589,11 +587,14 @@ export default {
             indeterminate: selectedCount > 0 && selectedCount < users.length,
           });
         }
-        node.children = users;
+
+        // 【关键改动】先展示原有下级部门，再展示本部门全选、人员
+        const originChildNodes = node.children || [];
+        node.children = [...originChildNodes, ...users];
         node.isLoaded = true;
       } catch (e) {
         console.error(`获取组织 ${node.name} 下的用户失败`, e);
-        node.children = [];
+        node.userList = [];
         node.isLoaded = true;
       }
     },
@@ -629,7 +630,6 @@ export default {
           online: item.online === 1 || item.online === true,
           selected: this.isSelected(item.id),
         }));
-        // 搜索结果一次性返回，关闭分页加载
         this.contactNoMore = true;
       } catch (e) {
         console.error("搜索联系人失败", e);
@@ -688,12 +688,12 @@ export default {
       }
     },
 
+    // 树节点点击：任意部门都加载人员
     async handleOrgNodeClick(data) {
       if (data.type === "org") {
         this.$refs.orgTree.setCurrentKey(data.id);
-        if (!data.isLoaded) {
+        // 不管有没有子部门，都执行加载人员接口
-          await this.loadOrgUsers(data);
+        await this.loadOrgUsers(data);
-        }
       }
     },
 
@@ -1029,19 +1029,63 @@ export default {
     padding: 5px;
   }
 
-  // 组织树用户行修复复选框下沉
+  // 组织树用户行样式 - 与member-item保持一致
   .userline {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding: 8px 16px;
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background 0.2s;
+    height: 40px;
+    box-sizing: border-box;
+
+    // 修复el-checkbox内部垂直偏移
     ::v-deep .el-checkbox {
       display: flex;
       align-items: center;
+      height: 24px;
     }
     ::v-deep .el-checkbox__inner {
       margin-top: 0 !important;
     }
+    ::v-deep .el-checkbox__label {
+      line-height: 24px;
+    }
+
+    &:hover {
+      background: #f5f7fa;
+    }
+
+    &.offline {
+      .member-name {
+        color: #909399;
+      }
+    }
+
+    .member-item-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      height: 24px;
+
+      .member-name {
+        font-size: 14px;
+        color: #303133;
+        line-height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .online-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #67c23a;
+      }
+    }
   }
 
   .org-icon {