diff --git a/src/views/system/post/index.vue b/src/views/system/post/index.vue index e8a06da..8f59872 100644 --- a/src/views/system/post/index.vue +++ b/src/views/system/post/index.vue @@ -24,6 +24,50 @@ {{ Number(record.status) === 1 ? '正常' : '停用' }} + + onDropdownVisibleChange(visible, record)"> + + {{ record.postName }} + + + + + + + + + + 加载中... + + + + + 该岗位下有 {{ postUsersMap[record.postId].length }} 个用户 + + + + {{ user.name?.charAt(0) || user.account?.charAt(0) || 'U' }} + + + {{ user.name || user.account }} + + 手机: {{ user.mobile }} + 邮箱: {{ user.email }} + + + + + + + 该岗位暂无用户 + + + + + 修改 @@ -41,6 +85,7 @@ + @@ -48,8 +93,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' @@ -97,6 +144,10 @@ const { ...queryForm, }), { immediate: true }) +// 岗位用户数据 +const postUsersMap = ref>({}) +const userLoadingMap = ref>({}) + const tableColumns = ref([ { title: '序号', @@ -108,6 +159,7 @@ const tableColumns = ref([ { title: '岗位名称', dataIndex: 'postName', + slotName: 'postName', minWidth: 140, ellipsis: true, tooltip: true, @@ -168,8 +220,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>() const PostDetailDrawerRef = ref>() +const UserDetailDrawerRef = ref>() // 新增 const onAdd = () => { @@ -187,4 +297,80 @@ const onDetail = (record: PostVO) => { } - +