From c64166a7c07b8619070f329b21b1109da9be5a3a Mon Sep 17 00:00:00 2001
From: Maple <869445424@qq.com>
Date: Mon, 4 Aug 2025 17:27:42 +0800
Subject: [PATCH] =?UTF-8?q?add=EF=BC=9A=E6=B7=BB=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E5=B2=97=E4=BD=8D=E4=BF=A1=E6=81=AF=EF=BC=8C=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E4=BA=86=E9=80=9A=E8=BF=87=E5=B2=97=E4=BD=8D=E6=9F=A5=E8=AF=A2?=
 =?UTF-8?q?=E5=88=B0=E8=AF=A5=E5=B2=97=E4=BD=8D=E7=9A=84=E8=A7=92=E8=89=B2?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/system/post.ts         |   7 ++
 src/views/system/post/index.vue | 214 +++++++++++++++++++++++++++++---
 2 files changed, 207 insertions(+), 14 deletions(-)

diff --git a/src/apis/system/post.ts b/src/apis/system/post.ts
index 967736b..387438f 100644
--- a/src/apis/system/post.ts
+++ b/src/apis/system/post.ts
@@ -43,3 +43,10 @@ export function updatePost(postId: string, data: T.PostUpdateReq) {
  */
 export function deletePost(postId: string) {
 }
+
+/**
+ * 查询岗位下的用户信息
+ */
+export function getPostUsers(postId: string) {
+  return http.get<T.UserNewResp[]>(`${BASE_URL}/${postId}/user`);
+}
\ No newline at end of file
diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue
index 64cff0a..1d698d9 100644
--- a/src/views/system/post/index.vue
+++ b/src/views/system/post/index.vue
@@ -1,14 +1,14 @@
 <template>
   <GiPageLayout>
     <GiTable
-      row-key="postId"
-      :data="dataList"
-      :columns="tableColumns"
-      :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
-      :pagination="pagination"
-      :disabled-tools="['size']"
-      @refresh="search"
+        row-key="postId"
+        :data="dataList"
+        :columns="tableColumns"
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
+        :pagination="pagination"
+        :disabled-tools="['size']"
+        @refresh="search"
     >
       <template #top>
         <GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
@@ -24,15 +24,59 @@
           {{ Number(record.status) === 1 ? '正常' : '停用' }}
         </a-tag>
       </template>
+      <template #postName="{ record }">
+        <a-dropdown trigger="hover" @visible-change="(visible) => onDropdownVisibleChange(visible, record)">
+          <a-link type="primary" :title="`点击查询 ${record.postName} 岗位下的用户信息`" @click="onPostClick(record)">
+            {{ record.postName }}
+            <template #icon>
+              <icon-user style="margin-right: 4px; font-size: 12px; color: #666;" />
+              <icon-down />
+            </template>
+          </a-link>
+          <template #content>
+            <a-doption
+                :value="record.postId"
+                :disabled="userLoadingMap[record.postId]"
+            >
+              <div v-if="userLoadingMap[record.postId]" class="loading-container">
+                <a-spin size="mini" />
+                <span style="margin-left: 8px;">加载中...</span>
+              </div>
+              <div v-else-if="postUsersMap[record.postId]?.length">
+                <div class="user-list">
+                  <div class="user-list-header">
+                    <span class="user-count">该岗位下有 {{ postUsersMap[record.postId].length }} 个用户</span>
+                  </div>
+                  <div class="user-item" v-for="user in postUsersMap[record.postId]" :key="user.userId">
+                    <a-avatar :size="24" :src="user.avatar">
+                      {{ user.name?.charAt(0) || user.account?.charAt(0) || 'U' }}
+                    </a-avatar>
+                    <div class="user-info">
+                      <div class="user-name clickable" @click="onUserClick(user)" :title="`点击查看 ${user.name || user.account} 的详细信息`">{{ user.name || user.account }}</div>
+                      <div class="user-detail">
+                        <span v-if="user.mobile">手机: {{ user.mobile }}</span>
+                        <span v-if="user.email">邮箱: {{ user.email }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div v-else class="no-users">
+                该岗位暂无用户
+              </div>
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </template>
       <template #action="{ record }">
         <a-space>
           <a-link v-permission="['system:post:query']" title="详情" @click="onDetail(record)">详情</a-link>
           <a-link v-permission="['system:post:update']" title="修改" @click="onUpdate(record)">修改</a-link>
           <a-link
-            v-permission="['system:post:delete']"
-            status="danger"
-            title="删除"
-            @click="onDelete(record)"
+              v-permission="['system:post:delete']"
+              status="danger"
+              title="删除"
+              @click="onDelete(record)"
           >
             删除
           </a-link>
@@ -42,6 +86,7 @@
 
     <PostAddModal ref="PostAddModalRef" @save-success="search" />
     <PostDetailDrawer ref="PostDetailDrawerRef" />
+    <UserDetailDrawer ref="UserDetailDrawerRef" />
   </GiPageLayout>
 </template>
 
@@ -49,8 +94,10 @@
 import type { TableColumnData } from '@arco-design/web-vue'
 import PostAddModal from './PostAddModal.vue'
 import PostDetailDrawer from './PostDetailDrawer.vue'
-import { deletePost, listPost } from '@/apis/system/post'
+import UserDetailDrawer from '../user/UserDetailDrawer.vue'
+import { deletePost, listPost, getPostUsers } from '@/apis/system/post'
 import type { PostVO } from '@/apis/system/type'
+import type { UserNewResp } from '@/apis/system/type'
 import { useResetReactive, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
@@ -98,6 +145,10 @@ const {
   ...queryForm,
 }), { immediate: true })
 
+// 岗位用户数据
+const postUsersMap = ref<Record<string, UserNewResp[]>>({})
+const userLoadingMap = ref<Record<string, boolean>>({})
+
 const tableColumns = ref<TableColumnData[]>([
   {
     title: '序号',
@@ -109,6 +160,7 @@ const tableColumns = ref<TableColumnData[]>([
   {
     title: '岗位名称',
     dataIndex: 'postName',
+    slotName: 'postName',
     minWidth: 140,
     ellipsis: true,
     tooltip: true,
@@ -169,8 +221,66 @@ const onDelete = (record: PostVO) => {
   })
 }
 
+
+
+// 下拉框显示状态变化时自动加载数据
+const onDropdownVisibleChange = async (visible: boolean, record: PostVO) => {
+  if (visible && !postUsersMap.value[record.postId] && !userLoadingMap.value[record.postId]) {
+    // 设置加载状态
+    userLoadingMap.value[record.postId] = true
+
+    try {
+      const response = await getPostUsers(record.postId)
+
+      if (response.success && response.data) {
+        postUsersMap.value[record.postId] = response.data
+      } else {
+        postUsersMap.value[record.postId] = []
+      }
+    } catch (error) {
+      console.error('获取岗位用户信息失败:', error)
+      postUsersMap.value[record.postId] = []
+    } finally {
+      userLoadingMap.value[record.postId] = false
+    }
+  }
+}
+
+// 点击岗位名称触发用户查询
+const onPostClick = async (record: PostVO) => {
+  // 如果已经加载过该岗位的用户数据，直接返回
+  if (postUsersMap.value[record.postId]) {
+    return
+  }
+
+  // 设置加载状态
+  userLoadingMap.value[record.postId] = true
+
+  try {
+    const response = await getPostUsers(record.postId)
+
+    if (response.success && response.data) {
+      postUsersMap.value[record.postId] = response.data
+    } else {
+      postUsersMap.value[record.postId] = []
+    }
+  } catch (error) {
+    console.error('获取岗位用户信息失败:', error)
+    postUsersMap.value[record.postId] = []
+  } finally {
+    userLoadingMap.value[record.postId] = false
+  }
+}
+
+// 点击用户详情
+const onUserClick = (user: UserNewResp) => {
+  UserDetailDrawerRef.value?.onOpen(user.userId)
+}
+
+
 const PostAddModalRef = ref<InstanceType<typeof PostAddModal>>()
 const PostDetailDrawerRef = ref<InstanceType<typeof PostDetailDrawer>>()
+const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()
 
 // 新增
 const onAdd = () => {
@@ -188,4 +298,80 @@ const onDetail = (record: PostVO) => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.loading-container {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+}
+
+.user-list {
+  min-width: 300px;
+  max-width: 400px;
+
+  .user-list-header {
+    padding: 8px 12px;
+    border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 8px;
+
+    .user-count {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+
+  .user-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-bottom: 1px solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .user-info {
+      margin-left: 8px;
+      flex: 1;
+
+      .user-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 2px;
+
+        &.clickable {
+          cursor: pointer;
+          color: #165dff;
+          transition: color 0.2s ease;
+
+          &:hover {
+            color: #0e42d2;
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .user-detail {
+        font-size: 12px;
+        color: #666;
+
+        span {
+          margin-right: 8px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.no-users {
+  padding: 16px;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
+</style>