feat(user-management-relation): 创建带人关系页面、编写各组件代码，完善诸多细节

src/locales/langs/en-us.ts

@@ -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',

src/locales/langs/zh-cn.ts

@@ -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',

src/service/api/system-manage.ts

@@ -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'
+  });
+}

src/typings/api/system-manage.d.ts

@@ -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;
+    }
   }
 }

src/typings/components.d.ts

@@ -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']

src/views/system/user-management-relation/index.vue

@@ -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>

src/views/system/user-management-relation/modules/relation-operate-dialog.vue

@@ -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>

src/views/system/user-management-relation/modules/relation-search.vue

@@ -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>