feat(user-management-relation): 创建带人关系页面、编写各组件代码，完善诸多细节
This commit is contained in:
@@ -176,6 +176,7 @@ const local: App.I18n.Schema = {
|
||||
system_menu: 'Menu Management',
|
||||
system_post: 'Post Management',
|
||||
system_dict: 'Dictionary Management',
|
||||
'system_user-management-relation': 'User Management Relation',
|
||||
exception: 'Exception',
|
||||
exception_403: '403',
|
||||
exception_404: '404',
|
||||
|
||||
@@ -176,6 +176,7 @@ const local: App.I18n.Schema = {
|
||||
system_menu: '菜单管理',
|
||||
system_post: '岗位管理',
|
||||
system_dict: '字典管理',
|
||||
'system_user-management-relation': '带人关系',
|
||||
exception: '异常页',
|
||||
exception_403: '403',
|
||||
exception_404: '404',
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { SYSTEM_SERVICE_PREFIX } from '@/constants/service';
|
||||
import { request } from '../request';
|
||||
import type { ServiceRequestResult } from './shared';
|
||||
import UserManagementRelationQueryReqVO = Api.SystemManage.UserManagementRelationQueryReqVO;
|
||||
|
||||
const ROLE_PREFIX = `${SYSTEM_SERVICE_PREFIX}/role`;
|
||||
const MENU_PREFIX = `${SYSTEM_SERVICE_PREFIX}/menu`;
|
||||
@@ -9,6 +10,7 @@ const USER_PREFIX = `${SYSTEM_SERVICE_PREFIX}/user`;
|
||||
const DEPT_PREFIX = `${SYSTEM_SERVICE_PREFIX}/dept`;
|
||||
const POST_PREFIX = `${SYSTEM_SERVICE_PREFIX}/post`;
|
||||
const ORG_LEADER_PREFIX = `${SYSTEM_SERVICE_PREFIX}/org-leader`;
|
||||
const USER_MANAGEMENT_RELATION_PREFIX = `${SYSTEM_SERVICE_PREFIX}/user-management-relation`;
|
||||
|
||||
function createRolePageQuery(params?: Api.SystemManage.RoleSearchParams) {
|
||||
const query = new URLSearchParams();
|
||||
@@ -296,6 +298,14 @@ export function fetchBatchDeletePost(ids: number[]) {
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取用户简单列表（用于用户选择下拉框） */
|
||||
export function fetchGetUserSimpleList() {
|
||||
return request<Api.SystemManage.UserSimple[]>({
|
||||
url: `${USER_PREFIX}/simple-list`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取用户分页 */
|
||||
export function fetchGetUserPage(params?: Api.SystemManage.UserSearchParams) {
|
||||
return request<Api.SystemManage.UserList>({
|
||||
@@ -466,3 +476,108 @@ export function fetchAssignUserRoles(data: Api.SystemManage.AssignUserRoleParams
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
// ==================== 用户带人关系相关 API ====================
|
||||
/**
|
||||
* 获取用户带人关系树形结构
|
||||
*
|
||||
* 用于树形控件展示，包含用户的上下级层级关系
|
||||
* 树形结构特点：
|
||||
* - 根节点：最高领导，没有上级
|
||||
* - 中间节点：有上级也有下级
|
||||
* - 叶子节点：基层员工，没有下级
|
||||
*/
|
||||
export function fetchGetUserManagementRelationTree() {
|
||||
return request<Api.SystemManage.UserManagementRelationTreeRespVO[]>({
|
||||
url: `${USER_MANAGEMENT_RELATION_PREFIX}/tree`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 通过搜索框的查询条件，获取用户带人关系树形结构
|
||||
* 用于树形控件展示，包含用户的上下级层级关系
|
||||
*/
|
||||
export function fetchGetUserManagementRelationQuery(query: UserManagementRelationQueryReqVO) {
|
||||
return request<Api.SystemManage.UserManagementRelationTreeRespVO[]>({
|
||||
url: `${USER_MANAGEMENT_RELATION_PREFIX}/query`,
|
||||
method: 'get',
|
||||
params: query
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户带人关系详情
|
||||
*
|
||||
* 根据主键 ID 查询单条用户带人关系记录
|
||||
*
|
||||
* @param id 关系记录主键 ID
|
||||
*/
|
||||
export function fetchGetUserManagementRelation(id: number) {
|
||||
return request<Api.SystemManage.UserManagementRelation>({
|
||||
url: `${USER_MANAGEMENT_RELATION_PREFIX}/get`,
|
||||
method: 'get',
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建用户带人关系
|
||||
*
|
||||
* 创建新的用户带人关系记录
|
||||
*
|
||||
* @param data 创建请求参数
|
||||
*/
|
||||
export function fetchCreateUserManagementRelation(data: Api.SystemManage.UserManagementRelationSaveReqVO) {
|
||||
return request<number>({
|
||||
url: `${USER_MANAGEMENT_RELATION_PREFIX}/create`,
|
||||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新用户带人关系
|
||||
*
|
||||
* 更新已有的用户带人关系记录
|
||||
*
|
||||
* @param data 更新请求参数（包含 id）
|
||||
*/
|
||||
export function fetchUpdateUserManagementRelation(
|
||||
data: { id: number } & Api.SystemManage.UserManagementRelationSaveReqVO
|
||||
) {
|
||||
return request<boolean>({
|
||||
url: `${USER_MANAGEMENT_RELATION_PREFIX}/update`,
|
||||
method: 'put',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除用户带人关系
|
||||
*
|
||||
* 根据主键 ID 删除单条用户带人关系记录
|
||||
*
|
||||
* @param id 关系记录主键 ID
|
||||
*/
|
||||
export function fetchDeleteUserManagementRelation(id: number | null) {
|
||||
return request<boolean>({
|
||||
url: `${USER_MANAGEMENT_RELATION_PREFIX}/delete`,
|
||||
method: 'delete',
|
||||
params: { id }
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除用户带人关系
|
||||
*
|
||||
* 根据主键 ID 列表批量删除用户带人关系记录
|
||||
*
|
||||
* @param ids 关系记录主键 ID 列表
|
||||
*/
|
||||
export function fetchBatchDeleteUserManagementRelation(ids: number[]) {
|
||||
return request<boolean>({
|
||||
url: `${USER_MANAGEMENT_RELATION_PREFIX}/delete-list?${createBatchDeleteQuery(ids)}`,
|
||||
method: 'delete'
|
||||
});
|
||||
}
|
||||
|
||||
87
src/typings/api/system-manage.d.ts
vendored
87
src/typings/api/system-manage.d.ts
vendored
@@ -314,5 +314,92 @@ declare namespace Api {
|
||||
roleId: number;
|
||||
menuIds: number[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户带人关系记录
|
||||
*
|
||||
* 用于管理用户之间的带人关系，支持多层级上下级关系
|
||||
* 对应后端 UserManagementRelationRespVO
|
||||
*/
|
||||
interface UserManagementRelation {
|
||||
/** 主键 ID */
|
||||
id: any;
|
||||
/** 管理者用户 ID */
|
||||
managerUserId: any;
|
||||
/** 被管理用户 ID */
|
||||
subordinateUserId: any;
|
||||
/** 生效开始时间 */
|
||||
effectiveFrom?: number | null;
|
||||
/** 生效结束时间 */
|
||||
effectiveUntil?: number | null;
|
||||
/** 备注 */
|
||||
remark?: string | null;
|
||||
/** 创建时间 */
|
||||
createTime: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户带人关系树形响应 VO
|
||||
*
|
||||
* 专门用于树形结构展示的响应对象
|
||||
* 对应后端 UserManagementRelationTreeRespVO
|
||||
*/
|
||||
interface UserManagementRelationTreeRespVO {
|
||||
/** 关系记录主键 ID（最高领导为 null） */
|
||||
id: number | null;
|
||||
/** 用户 ID */
|
||||
userId: number;
|
||||
/** 用户昵称 */
|
||||
userNickname: string;
|
||||
/** 上级用户 ID（最高领导为 null） */
|
||||
managerUserId: number | null;
|
||||
/** 上级用户昵称（最高领导为 null） */
|
||||
managerNickname: string | null;
|
||||
/** 下级用户列表（基层员工为空列表） */
|
||||
children?: UserManagementRelationTreeRespVO[] | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户带人关系保存参数
|
||||
*
|
||||
* 用于创建和更新操作
|
||||
* 对应后端 UserManagementRelationSaveReqVO
|
||||
*/
|
||||
interface UserManagementRelationSaveReqVO {
|
||||
/** 主键 ID（更新时需要） */
|
||||
id?: number;
|
||||
/** 管理者用户 ID */
|
||||
managerUserId: any;
|
||||
/** 被管理用户 ID */
|
||||
subordinateUserId: any;
|
||||
/** 生效开始时间 */
|
||||
effectiveFrom?: number | null;
|
||||
/** 生效结束时间 */
|
||||
effectiveUntil?: number | null;
|
||||
/** 备注 */
|
||||
remark?: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户带人关系查询参数（列表）
|
||||
*
|
||||
* 用于搜索框的查询和导出
|
||||
* 对应后端 UserManagementRelationQueryReqVO
|
||||
*/
|
||||
type UserManagementRelationQueryReqVO = CommonType.RecordNullable<
|
||||
Pick<UserManagementRelation, 'managerUserId' | 'subordinateUserId'>
|
||||
>;
|
||||
|
||||
/**
|
||||
* 用户简单信息
|
||||
*
|
||||
* 用于用户选择下拉框
|
||||
*/
|
||||
interface UserSimple {
|
||||
/** 用户 ID */
|
||||
id: number;
|
||||
/** 用户昵称 */
|
||||
nickname: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1
src/typings/components.d.ts
vendored
1
src/typings/components.d.ts
vendored
@@ -94,6 +94,7 @@ declare module 'vue' {
|
||||
'IconIc:roundPlus': typeof import('~icons/ic/round-plus')['default']
|
||||
'IconIconParkOutline:equalRatio': typeof import('~icons/icon-park-outline/equal-ratio')['default']
|
||||
IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
|
||||
IconIcRoundEdit: typeof import('~icons/ic/round-edit')['default']
|
||||
IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
|
||||
IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
|
||||
IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
|
||||
|
||||
@@ -1,11 +1,429 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 用户带人关系管理 - 主页面
|
||||
*
|
||||
* 功能说明：
|
||||
* - 展示用户带人关系的树形结构
|
||||
* - 支持节点的展开/折叠
|
||||
* - 支持单选/多选节点
|
||||
* - 提供新增、编辑、删除（单个/批量）功能
|
||||
* - 支持按管理者用户 ID 和被管理用户 ID 搜索
|
||||
*
|
||||
* 树形结构特点：
|
||||
* - 根节点：最高领导，没有上级
|
||||
* - 中间节点：有上级也有下级
|
||||
* - 叶子节点：基层员工，没有下级
|
||||
*/
|
||||
|
||||
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import type { ElTree } from 'element-plus';
|
||||
import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import {
|
||||
fetchBatchDeleteUserManagementRelation,
|
||||
fetchDeleteUserManagementRelation,
|
||||
fetchGetUserManagementRelationQuery,
|
||||
fetchGetUserManagementRelationTree,
|
||||
fetchGetUserSimpleList
|
||||
} from '@/service/api';
|
||||
import RelationOperateDialog from './modules/relation-operate-dialog.vue';
|
||||
import RelationSearch from './modules/relation-search.vue';
|
||||
|
||||
defineOptions({ name: 'UserManagementRelation' });
|
||||
|
||||
/**
|
||||
* 初始化搜索参数
|
||||
*
|
||||
* @returns 搜索参数对象
|
||||
*/
|
||||
function getInitSearchParams(): Api.SystemManage.UserManagementRelationQueryReqVO {
|
||||
return {
|
||||
managerUserId: undefined,
|
||||
subordinateUserId: undefined
|
||||
};
|
||||
}
|
||||
|
||||
// 搜索参数
|
||||
const searchParams = reactive(getInitSearchParams());
|
||||
|
||||
// 用户列表（供搜索组件和对话框组件共享）
|
||||
const userList = ref<Api.SystemManage.UserSimple[]>([]);
|
||||
|
||||
// 树形组件引用
|
||||
const relationTreeRef = ref<InstanceType<typeof ElTree>>();
|
||||
|
||||
// 已选中的节点 ID 列表
|
||||
const checkedNodeKeys = ref<number[]>([]);
|
||||
|
||||
// 树形数据
|
||||
const treeData = ref<Api.SystemManage.UserManagementRelationTreeRespVO[]>([]);
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 树形配置
|
||||
const treeProps: any = {
|
||||
children: 'children',
|
||||
label: 'userNickname',
|
||||
isLeaf: (data: Api.SystemManage.UserManagementRelationTreeRespVO) => !data.children || data.children.length === 0
|
||||
};
|
||||
|
||||
/**
|
||||
* 加载用户列表
|
||||
*
|
||||
* 获取用户简单列表，供搜索组件和对话框组件共享使用
|
||||
*/
|
||||
async function loadUserList() {
|
||||
const { data, error } = await fetchGetUserSimpleList();
|
||||
if (!error) {
|
||||
userList.value = data || [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载树形数据
|
||||
*
|
||||
* 调用后端接口获取完整的用户带人关系树
|
||||
*/
|
||||
async function loadTreeData() {
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const { data, error } = await fetchGetUserManagementRelationTree();
|
||||
|
||||
if (!error) {
|
||||
treeData.value = data || [];
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据搜索条件查询树形数据
|
||||
*
|
||||
* 调用后端接口获取符合条件的用户带人关系树
|
||||
*
|
||||
* @param query 查询参数
|
||||
*/
|
||||
async function loadTreeDataByQuery(query: Api.SystemManage.UserManagementRelationQueryReqVO) {
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const { data, error } = await fetchGetUserManagementRelationQuery(query);
|
||||
|
||||
if (!error) {
|
||||
treeData.value = data || [];
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新树形数据
|
||||
*
|
||||
* 清空选中状态并重新加载数据
|
||||
*/
|
||||
async function reloadTreeData() {
|
||||
checkedNodeKeys.value = [];
|
||||
await loadTreeData();
|
||||
await nextTick();
|
||||
relationTreeRef.value?.setCheckedKeys([]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理搜索
|
||||
*
|
||||
* 根据搜索条件查询树形数据
|
||||
* 如果有搜索条件，调用 query 接口；否则调用 tree 接口
|
||||
*/
|
||||
async function handleSearch() {
|
||||
checkedNodeKeys.value = [];
|
||||
|
||||
// 判断是否有搜索条件
|
||||
const hasSearchCondition = searchParams.subordinateUserId !== undefined && searchParams.subordinateUserId !== null;
|
||||
|
||||
if (hasSearchCondition) {
|
||||
// 有搜索条件，调用查询接口
|
||||
const query: Api.SystemManage.UserManagementRelationQueryReqVO = {
|
||||
subordinateUserId: searchParams.subordinateUserId
|
||||
};
|
||||
console.log('查询参数 query:', query);
|
||||
await loadTreeDataByQuery(query);
|
||||
} else {
|
||||
// 无搜索条件，加载完整树
|
||||
await loadTreeData();
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
relationTreeRef.value?.setCheckedKeys([]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置搜索
|
||||
*
|
||||
* 清空搜索条件并重新加载数据
|
||||
*/
|
||||
function resetSearchParams() {
|
||||
Object.assign(searchParams, getInitSearchParams());
|
||||
reloadTreeData();
|
||||
}
|
||||
|
||||
// 对话框相关状态
|
||||
const { bool: operateVisible, setTrue: openOperateModal, setFalse: closeOperateModal } = useBoolean();
|
||||
const operateType = ref<UI.TableOperateType>('add');
|
||||
const editingData = ref<Api.SystemManage.UserManagementRelation | null>(null);
|
||||
|
||||
/**
|
||||
* 打开新增对话框
|
||||
*
|
||||
* @param item 当前节点数据，用于设置默认管理者为此节点用户
|
||||
*/
|
||||
function openAdd(item?: Api.SystemManage.UserManagementRelationTreeRespVO) {
|
||||
operateType.value = 'add';
|
||||
// 如果是从某一行的新增按钮触发，则默认管理者为当前节点用户
|
||||
// 否则默认管理者为当前登录用户（在对话框组件中处理）
|
||||
editingData.value = item
|
||||
? {
|
||||
id: null,
|
||||
managerUserId: item.userId,
|
||||
subordinateUserId: null,
|
||||
effectiveFrom: null,
|
||||
effectiveUntil: null,
|
||||
remark: null,
|
||||
createTime: Date.now()
|
||||
}
|
||||
: null;
|
||||
openOperateModal();
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开编辑对话框
|
||||
*
|
||||
* @param item 要编辑的关系记录
|
||||
*/
|
||||
function openEdit(item: Api.SystemManage.UserManagementRelationTreeRespVO) {
|
||||
operateType.value = 'edit';
|
||||
// 构建树节点数据为编辑所需格式
|
||||
editingData.value = item.id
|
||||
? {
|
||||
id: item.id,
|
||||
managerUserId: item.managerUserId,
|
||||
subordinateUserId: item.userId,
|
||||
effectiveFrom: null,
|
||||
effectiveUntil: null,
|
||||
remark: null,
|
||||
createTime: Date.now()
|
||||
}
|
||||
: null;
|
||||
openOperateModal();
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除单个节点的关系记录
|
||||
*
|
||||
* @param item 要删除的关系记录
|
||||
*/
|
||||
async function handleDelete(item: Api.SystemManage.UserManagementRelationTreeRespVO) {
|
||||
const { error } = await fetchDeleteUserManagementRelation(item.id);
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.$message?.success('删除成功');
|
||||
await reloadTreeData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除关系记录
|
||||
*
|
||||
* 删除所有选中的节点
|
||||
*/
|
||||
async function handleBatchDelete() {
|
||||
if (!checkedNodeKeys.value.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await fetchBatchDeleteUserManagementRelation(checkedNodeKeys.value);
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.$message?.success('删除成功');
|
||||
await reloadTreeData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理树节点勾选变化
|
||||
*
|
||||
* @param checkedData 当前选中的节点数据
|
||||
* @param checkedInfo 包含 checkedKeys 和 halfCheckedKeys 的对象
|
||||
*/
|
||||
function handleNodeCheck(checkedData: any, checkedInfo: any) {
|
||||
checkedNodeKeys.value = checkedInfo.checkedNodes.map((node: any) => node.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理对话框提交事件
|
||||
*
|
||||
* @param relationId 提交后的关系 ID
|
||||
*/
|
||||
function handleSubmitted(relationId: number) {
|
||||
closeOperateModal();
|
||||
reloadTreeData();
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断节点是否有子节点
|
||||
*
|
||||
* 有子节点的节点不允许删除
|
||||
*
|
||||
* @param node 树节点
|
||||
*/
|
||||
function hasChildren(node: Api.SystemManage.UserManagementRelationTreeRespVO): boolean {
|
||||
return Boolean(node.children && node.children.length > 0);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await loadUserList();
|
||||
await reloadTreeData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>带人关系</h1>
|
||||
<div class="flex-col-stretch gap-16px overflow-hidden">
|
||||
<!-- 搜索区域 -->
|
||||
<RelationSearch
|
||||
v-model:model="searchParams"
|
||||
:user-list="userList"
|
||||
@reset="resetSearchParams"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
|
||||
<!-- 树形卡片区域 -->
|
||||
<ElCard class="flex-1-hidden card-wrapper">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-12px">
|
||||
<div class="flex items-center gap-10px">
|
||||
<p>用户带人关系树</p>
|
||||
<ElTag effect="plain">{{ treeData.length }}</ElTag>
|
||||
</div>
|
||||
<div class="flex items-center gap-10px">
|
||||
<ElButton plain type="primary" @click="openAdd()">
|
||||
<template #icon>
|
||||
<icon-ic-round-plus class="text-icon" />
|
||||
</template>
|
||||
新增
|
||||
</ElButton>
|
||||
<ElPopconfirm title="确认删除选中的关系吗？" @confirm="handleBatchDelete">
|
||||
<template #reference>
|
||||
<ElButton type="danger" plain :disabled="checkedNodeKeys.length === 0">
|
||||
<template #icon>
|
||||
<icon-ic-round-delete class="text-icon" />
|
||||
</template>
|
||||
批量删除
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<ElButton @click="reloadTreeData">
|
||||
<template #icon>
|
||||
<icon-ic-round-refresh class="text-icon" />
|
||||
</template>
|
||||
刷新
|
||||
</ElButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 树形组件 -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<ElTree
|
||||
ref="relationTreeRef"
|
||||
v-loading="loading"
|
||||
:data="treeData"
|
||||
:props="treeProps"
|
||||
node-key="userId"
|
||||
show-checkbox
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
@check="handleNodeCheck"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div class="flex flex-1 items-center justify-between">
|
||||
<span class="flex items-center gap-8px">
|
||||
<span>{{ node.label }}</span>
|
||||
<ElTag v-if="data.managerNickname" size="small" type="info">上级：{{ data.managerNickname }}</ElTag>
|
||||
</span>
|
||||
<div class="flex items-center">
|
||||
<ElButton link type="primary" size="default" @click.stop="openAdd(data)">
|
||||
<template #icon>
|
||||
<icon-ic-round-plus class="text-icon" />
|
||||
</template>
|
||||
新增
|
||||
</ElButton>
|
||||
<ElButton link type="primary" size="small" @click.stop="openEdit(data)">
|
||||
<template #icon>
|
||||
<icon-ic-round-edit class="text-icon" />
|
||||
</template>
|
||||
编辑
|
||||
</ElButton>
|
||||
<ElPopconfirm
|
||||
v-if="!hasChildren(data) && data.id"
|
||||
title="确认删除当前关系吗？"
|
||||
@confirm="handleDelete(data)"
|
||||
>
|
||||
<template #reference>
|
||||
<ElButton link type="danger" size="small">
|
||||
<template #icon>
|
||||
<icon-ic-round-delete class="text-icon" />
|
||||
</template>
|
||||
删除
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<ElTag v-else-if="hasChildren(data)" size="small" type="info" style="margin-left: 6px">有下级</ElTag>
|
||||
<ElTag v-else size="small" type="warning">不可删除</ElTag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ElTree>
|
||||
</div>
|
||||
</ElCard>
|
||||
|
||||
<!-- 操作对话框 -->
|
||||
<RelationOperateDialog
|
||||
v-model:visible="operateVisible"
|
||||
:operate-type="operateType"
|
||||
:row-data="editingData"
|
||||
:user-list="userList"
|
||||
@submitted="handleSubmitted"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-card__body) {
|
||||
height: calc(100% - 56px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content) {
|
||||
height: auto;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-fill-color-light);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__label) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,316 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 用户带人关系操作对话框
|
||||
*
|
||||
* 功能说明：
|
||||
* - 新增用户带人关系
|
||||
* - 编辑用户带人关系
|
||||
* - 表单验证和提交
|
||||
*
|
||||
* 表单字段：
|
||||
* - 管理者用户：必填，下拉选择，默认当前登录用户
|
||||
* - 被管理用户：必填，下拉选择，默认空
|
||||
* - 生效开始时间：可选
|
||||
* - 生效结束时间：可选
|
||||
* - 备注：可选
|
||||
*
|
||||
* 用户列表通过 props 传入，由父组件统一管理
|
||||
*/
|
||||
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import {
|
||||
fetchCreateUserManagementRelation,
|
||||
fetchGetUserManagementRelation,
|
||||
fetchUpdateUserManagementRelation
|
||||
} from '@/service/api';
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import { useForm, useFormRules } from '@/hooks/common/form';
|
||||
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
|
||||
|
||||
defineOptions({ name: 'RelationOperateDialog' });
|
||||
|
||||
/**
|
||||
* 组件 Props 定义
|
||||
*/
|
||||
interface Props {
|
||||
/** 操作类型：新增或编辑 */
|
||||
operateType: UI.TableOperateType;
|
||||
/** 编辑时的行数据 */
|
||||
rowData?: Api.SystemManage.UserManagementRelation | null;
|
||||
/** 用户列表，由父组件统一提供 */
|
||||
userList: Api.SystemManage.UserSimple[];
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
/**
|
||||
* 组件 Emits 定义
|
||||
*
|
||||
* 使用 Vue 3.5 标准语法
|
||||
*/
|
||||
const emit = defineEmits<{
|
||||
/** 提交事件：返回提交后的关系 ID */
|
||||
submitted: [relationId: number];
|
||||
}>();
|
||||
|
||||
/**
|
||||
* 对话框可见性，支持 v-model 双向绑定
|
||||
*/
|
||||
const visible = defineModel<boolean>('visible', {
|
||||
default: false
|
||||
});
|
||||
|
||||
// 表单相关
|
||||
const { formRef, validate } = useForm();
|
||||
const { createRequiredRule } = useFormRules();
|
||||
|
||||
// 获取当前登录用户信息
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 加载和提交状态
|
||||
const detailLoading = ref(false);
|
||||
const submitting = ref(false);
|
||||
|
||||
// 计算属性：是否为编辑模式
|
||||
const isEdit = computed(() => props.operateType === 'edit');
|
||||
|
||||
/**
|
||||
* 计算对话框标题
|
||||
*/
|
||||
const title = computed(() => {
|
||||
const titleMap: Record<UI.TableOperateType, string> = {
|
||||
add: '新增用户带人关系',
|
||||
edit: '编辑用户带人关系'
|
||||
};
|
||||
|
||||
return titleMap[props.operateType];
|
||||
});
|
||||
|
||||
/**
|
||||
* 表单模型类型
|
||||
*/
|
||||
type Model = Api.SystemManage.UserManagementRelationSaveReqVO;
|
||||
|
||||
/**
|
||||
* 表单模型
|
||||
*/
|
||||
const model = ref(createDefaultModel());
|
||||
|
||||
/**
|
||||
* 创建默认表单模型
|
||||
*
|
||||
* @returns 默认模型对象
|
||||
*/
|
||||
function createDefaultModel(): Model {
|
||||
return {
|
||||
managerUserId: null,
|
||||
subordinateUserId: null,
|
||||
effectiveFrom: null,
|
||||
effectiveUntil: null,
|
||||
remark: null
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单验证规则
|
||||
*/
|
||||
const rules = {
|
||||
managerUserId: createRequiredRule('请选择管理者用户'),
|
||||
subordinateUserId: createRequiredRule('请选择被管理用户')
|
||||
} satisfies Record<string, App.Global.FormRule>;
|
||||
|
||||
/**
|
||||
* 关闭对话框
|
||||
*/
|
||||
function closeModal() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化表单模型
|
||||
*
|
||||
* 编辑模式下加载详情数据，新增模式下设置默认值
|
||||
*/
|
||||
async function initModel() {
|
||||
model.value = createDefaultModel();
|
||||
|
||||
if (!isEdit.value) {
|
||||
// 新增模式：设置管理者用户
|
||||
// 优先使用 rowData 中传入的管理者用户 ID（如从树形节点新增）
|
||||
// 否则使用当前登录用户
|
||||
let managerUserIdToSet: number | undefined;
|
||||
|
||||
if (props.rowData && props.rowData.managerUserId) {
|
||||
// 从树形节点点击新增，管理者为当前节点用户
|
||||
managerUserIdToSet = props.rowData.managerUserId;
|
||||
} else if (authStore.userInfo.userId) {
|
||||
// 头部新增，管理者为当前登录用户
|
||||
const currentUserId = Number(authStore.userInfo.userId);
|
||||
const currentUserName = authStore.userInfo.userName;
|
||||
|
||||
// 先尝试通过 ID 匹配
|
||||
let currentUser = props.userList.find(user => Number(user.id) === currentUserId);
|
||||
|
||||
// 如果 ID 匹配失败，尝试通过用户名匹配
|
||||
if (!currentUser && currentUserName) {
|
||||
currentUser = props.userList.find(user => user.nickname === currentUserName);
|
||||
}
|
||||
|
||||
if (currentUser) {
|
||||
managerUserIdToSet = currentUser.id;
|
||||
}
|
||||
}
|
||||
|
||||
if (managerUserIdToSet) {
|
||||
model.value.managerUserId = managerUserIdToSet;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
formRef.value?.clearValidate();
|
||||
return;
|
||||
}
|
||||
|
||||
// 编辑模式：加载详情数据
|
||||
if (!props.rowData) {
|
||||
await nextTick();
|
||||
formRef.value?.clearValidate();
|
||||
return;
|
||||
}
|
||||
|
||||
detailLoading.value = true;
|
||||
|
||||
try {
|
||||
const { error, data } = await fetchGetUserManagementRelation(props.rowData.id);
|
||||
|
||||
if (data !== null && !error) {
|
||||
model.value = {
|
||||
id: data.id,
|
||||
managerUserId: data.managerUserId,
|
||||
subordinateUserId: data.subordinateUserId,
|
||||
effectiveFrom: data.effectiveFrom ? new Date(data.effectiveFrom).getTime() : null,
|
||||
effectiveUntil: data.effectiveUntil ? new Date(data.effectiveUntil).getTime() : null,
|
||||
remark: data.remark ?? null
|
||||
};
|
||||
}
|
||||
} finally {
|
||||
detailLoading.value = false;
|
||||
}
|
||||
|
||||
await nextTick();
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理表单提交
|
||||
*
|
||||
* 验证通过后调用创建或更新接口
|
||||
*/
|
||||
async function handleSubmit() {
|
||||
await validate();
|
||||
|
||||
submitting.value = true;
|
||||
|
||||
try {
|
||||
const submitData: Api.SystemManage.UserManagementRelationSaveReqVO = {
|
||||
...model.value
|
||||
};
|
||||
|
||||
const request =
|
||||
isEdit.value && props.rowData
|
||||
? await fetchUpdateUserManagementRelation({ id: props.rowData.id, ...submitData })
|
||||
: await fetchCreateUserManagementRelation(submitData);
|
||||
|
||||
const { error, data } = request;
|
||||
|
||||
if (error) {
|
||||
return;
|
||||
}
|
||||
|
||||
const relationId = isEdit.value && props.rowData ? props.rowData.id : Number(data);
|
||||
|
||||
window.$message?.success(isEdit.value ? '修改成功' : '新增成功');
|
||||
|
||||
closeModal();
|
||||
emit('submitted', relationId);
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听对话框可见性
|
||||
*
|
||||
* 打开时初始化表单
|
||||
*/
|
||||
watch(visible, value => {
|
||||
if (value) {
|
||||
initModel();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BusinessFormDialog
|
||||
v-model="visible"
|
||||
:title="title"
|
||||
preset="md"
|
||||
:loading="detailLoading"
|
||||
:confirm-loading="submitting"
|
||||
:scrollbar="false"
|
||||
@confirm="handleSubmit"
|
||||
>
|
||||
<ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
|
||||
<ElRow :gutter="16">
|
||||
<ElCol :span="12">
|
||||
<ElFormItem label="管理者用户" prop="managerUserId">
|
||||
<ElSelect v-model="model.managerUserId" class="w-full" placeholder="请选择管理者用户" filterable>
|
||||
<ElOption v-for="user in props.userList" :key="user.id" :label="user.nickname" :value="user.id" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="12">
|
||||
<ElFormItem label="被管理用户" prop="subordinateUserId">
|
||||
<ElSelect
|
||||
v-model="model.subordinateUserId"
|
||||
class="w-full"
|
||||
placeholder="请选择被管理用户"
|
||||
filterable
|
||||
:disabled="isEdit"
|
||||
>
|
||||
<ElOption v-for="user in props.userList" :key="user.id" :label="user.nickname" :value="user.id" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="12">
|
||||
<ElFormItem label="生效开始时间" prop="effectiveFrom">
|
||||
<ElDatePicker
|
||||
v-model="model.effectiveFrom"
|
||||
class="w-full"
|
||||
type="datetime"
|
||||
placeholder="请选择生效开始时间"
|
||||
value-format="x"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="12">
|
||||
<ElFormItem label="生效结束时间" prop="effectiveUntil">
|
||||
<ElDatePicker
|
||||
v-model="model.effectiveUntil"
|
||||
class="w-full"
|
||||
type="datetime"
|
||||
placeholder="请选择生效结束时间"
|
||||
value-format="x"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
<ElCol :span="24">
|
||||
<ElFormItem label="备注" prop="remark">
|
||||
<ElInput v-model="model.remark" type="textarea" :rows="4" placeholder="请输入备注" />
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElForm>
|
||||
</BusinessFormDialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* 用户带人关系搜索组件
|
||||
*
|
||||
* 功能说明：
|
||||
* - 提供管理者和被管理者用户下拉选择
|
||||
* - 支持搜索和重置操作
|
||||
* - 与树形结构数据联动
|
||||
*
|
||||
* 组件特性：
|
||||
* - 使用 TableSearchPanel 统一样式
|
||||
* - 支持 v-model 双向绑定
|
||||
* - 触发 search 和 reset 事件
|
||||
* - 用户列表通过 props 传入，由父组件统一管理
|
||||
*/
|
||||
|
||||
import { defineEmits, defineModel, defineOptions } from 'vue';
|
||||
|
||||
defineOptions({ name: 'RelationSearch' });
|
||||
|
||||
/**
|
||||
* 组件 Emits 定义
|
||||
*
|
||||
* 使用 Vue 3.5 标准语法
|
||||
*/
|
||||
const emit = defineEmits<{
|
||||
/** 重置事件：清空搜索条件 */
|
||||
reset: [];
|
||||
/** 搜索事件：执行搜索 */
|
||||
search: [];
|
||||
}>();
|
||||
|
||||
/**
|
||||
* 组件 Props 定义
|
||||
*/
|
||||
interface Props {
|
||||
/** 用户列表，由父组件统一提供 */
|
||||
userList: Api.SystemManage.UserSimple[];
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
/**
|
||||
* 搜索参数模型，支持双向绑定
|
||||
*/
|
||||
const model = defineModel<Api.SystemManage.UserManagementRelationQueryReqVO>('model', { required: true });
|
||||
|
||||
/**
|
||||
* 重置搜索
|
||||
*/
|
||||
function reset() {
|
||||
emit('reset');
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行搜索
|
||||
*/
|
||||
function search() {
|
||||
emit('search');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TableSearchPanel :model="model" :action-col-lg="8" @reset="reset" @search="search">
|
||||
<!-- <ElCol :lg="8" :md="12" :sm="12">-->
|
||||
<!-- <ElFormItem label="管理者用户" prop="managerUserId">-->
|
||||
<!-- <ElSelect-->
|
||||
<!-- v-model="model.managerUserId"-->
|
||||
<!-- class="w-full"-->
|
||||
<!-- placeholder="请选择管理者用户"-->
|
||||
<!-- clearable-->
|
||||
<!-- filterable-->
|
||||
<!-- >-->
|
||||
<!-- <ElOption-->
|
||||
<!-- v-for="user in userList"-->
|
||||
<!-- :key="user.id"-->
|
||||
<!-- :label="user.nickname"-->
|
||||
<!-- :value="user.id"-->
|
||||
<!-- />-->
|
||||
<!-- </ElSelect>-->
|
||||
<!-- </ElFormItem>-->
|
||||
<!-- </ElCol>-->
|
||||
<ElCol :lg="8" :md="12" :sm="12">
|
||||
<ElFormItem label="用户名" prop="subordinateUserId">
|
||||
<ElSelect v-model="model.subordinateUserId" class="w-full" placeholder="请选择用户名" clearable filterable>
|
||||
<ElOption v-for="user in userList" :key="user.id" :label="user.nickname" :value="user.id" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</ElCol>
|
||||
</TableSearchPanel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-form-item__label) {
|
||||
width: 100px !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user