add:添加了岗位信息,实现了通过岗位查询到该岗位的角色的功能
This commit is contained in:
parent
1307eaf651
commit
c64166a7c0
|
@ -43,3 +43,10 @@ export function updatePost(postId: string, data: T.PostUpdateReq) {
|
||||||
*/
|
*/
|
||||||
export function deletePost(postId: string) {
|
export function deletePost(postId: string) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询岗位下的用户信息
|
||||||
|
*/
|
||||||
|
export function getPostUsers(postId: string) {
|
||||||
|
return http.get<T.UserNewResp[]>(`${BASE_URL}/${postId}/user`);
|
||||||
|
}
|
|
@ -1,14 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<GiPageLayout>
|
<GiPageLayout>
|
||||||
<GiTable
|
<GiTable
|
||||||
row-key="postId"
|
row-key="postId"
|
||||||
:data="dataList"
|
:data="dataList"
|
||||||
:columns="tableColumns"
|
:columns="tableColumns"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
:scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
|
:scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
|
||||||
:pagination="pagination"
|
:pagination="pagination"
|
||||||
:disabled-tools="['size']"
|
:disabled-tools="['size']"
|
||||||
@refresh="search"
|
@refresh="search"
|
||||||
>
|
>
|
||||||
<template #top>
|
<template #top>
|
||||||
<GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
|
<GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
|
||||||
|
@ -24,15 +24,59 @@
|
||||||
{{ Number(record.status) === 1 ? '正常' : '停用' }}
|
{{ Number(record.status) === 1 ? '正常' : '停用' }}
|
||||||
</a-tag>
|
</a-tag>
|
||||||
</template>
|
</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 }">
|
<template #action="{ record }">
|
||||||
<a-space>
|
<a-space>
|
||||||
<a-link v-permission="['system:post:query']" title="详情" @click="onDetail(record)">详情</a-link>
|
<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:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||||
<a-link
|
<a-link
|
||||||
v-permission="['system:post:delete']"
|
v-permission="['system:post:delete']"
|
||||||
status="danger"
|
status="danger"
|
||||||
title="删除"
|
title="删除"
|
||||||
@click="onDelete(record)"
|
@click="onDelete(record)"
|
||||||
>
|
>
|
||||||
删除
|
删除
|
||||||
</a-link>
|
</a-link>
|
||||||
|
@ -42,6 +86,7 @@
|
||||||
|
|
||||||
<PostAddModal ref="PostAddModalRef" @save-success="search" />
|
<PostAddModal ref="PostAddModalRef" @save-success="search" />
|
||||||
<PostDetailDrawer ref="PostDetailDrawerRef" />
|
<PostDetailDrawer ref="PostDetailDrawerRef" />
|
||||||
|
<UserDetailDrawer ref="UserDetailDrawerRef" />
|
||||||
</GiPageLayout>
|
</GiPageLayout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -49,8 +94,10 @@
|
||||||
import type { TableColumnData } from '@arco-design/web-vue'
|
import type { TableColumnData } from '@arco-design/web-vue'
|
||||||
import PostAddModal from './PostAddModal.vue'
|
import PostAddModal from './PostAddModal.vue'
|
||||||
import PostDetailDrawer from './PostDetailDrawer.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 { PostVO } from '@/apis/system/type'
|
||||||
|
import type { UserNewResp } from '@/apis/system/type'
|
||||||
import { useResetReactive, useTable } from '@/hooks'
|
import { useResetReactive, useTable } from '@/hooks'
|
||||||
import { isMobile } from '@/utils'
|
import { isMobile } from '@/utils'
|
||||||
import has from '@/utils/has'
|
import has from '@/utils/has'
|
||||||
|
@ -98,6 +145,10 @@ const {
|
||||||
...queryForm,
|
...queryForm,
|
||||||
}), { immediate: true })
|
}), { immediate: true })
|
||||||
|
|
||||||
|
// 岗位用户数据
|
||||||
|
const postUsersMap = ref<Record<string, UserNewResp[]>>({})
|
||||||
|
const userLoadingMap = ref<Record<string, boolean>>({})
|
||||||
|
|
||||||
const tableColumns = ref<TableColumnData[]>([
|
const tableColumns = ref<TableColumnData[]>([
|
||||||
{
|
{
|
||||||
title: '序号',
|
title: '序号',
|
||||||
|
@ -109,6 +160,7 @@ const tableColumns = ref<TableColumnData[]>([
|
||||||
{
|
{
|
||||||
title: '岗位名称',
|
title: '岗位名称',
|
||||||
dataIndex: 'postName',
|
dataIndex: 'postName',
|
||||||
|
slotName: 'postName',
|
||||||
minWidth: 140,
|
minWidth: 140,
|
||||||
ellipsis: true,
|
ellipsis: true,
|
||||||
tooltip: 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 PostAddModalRef = ref<InstanceType<typeof PostAddModal>>()
|
||||||
const PostDetailDrawerRef = ref<InstanceType<typeof PostDetailDrawer>>()
|
const PostDetailDrawerRef = ref<InstanceType<typeof PostDetailDrawer>>()
|
||||||
|
const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()
|
||||||
|
|
||||||
// 新增
|
// 新增
|
||||||
const onAdd = () => {
|
const onAdd = () => {
|
||||||
|
@ -188,4 +298,80 @@ const onDetail = (record: PostVO) => {
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
||||||
|
|
Loading…
Reference in New Issue