Appearance
岗位管理
概述
岗位管理是系统中用于管理和维护组织结构中的岗位信息的核心模块。通过该模块,管理员可以对岗位进行添加、编辑、删除等操作,并且可以配置岗位的层级关系和权限。岗位管理模块确保了系统的组织架构清晰、易于扩展,并且能够根据用户角色动态展示不同的岗位内容。
主要功能
1. 岗位列表查看
功能描述:以表格形式展示所有岗位的详细信息,包括岗位名称、所属部门、创建时间、更新时间等。
字段说明:
- 岗位ID:唯一标识符。
- 岗位名称:岗位的显示名称。
- 所属部门ID:关联所属部门(0表示未分配部门)。
- 创建时间:岗位的创建时间。
- 更新时间:岗位的最后更新时间。
操作按钮:
- 编辑:进入编辑模式,修改岗位信息。
- 删除:删除选中的岗位。
- 排序:调整岗位的显示顺序。
2. 添加岗位
功能描述:管理员可以新增一个岗位。
字段说明:
- 岗位名称:必填,岗位的显示名称。
- 所属部门:选择所属部门(可选,默认为未分配部门)。
- 状态:选择岗位的状态(启用/禁用)。
操作按钮:
- 保存:保存新增的岗位。
- 取消:放弃新增并返回岗位列表。
3. 编辑岗位
功能描述:管理员可以编辑现有岗位的信息。
字段说明:
- 岗位名称:可修改,岗位的显示名称。
- 所属部门:可修改,选择所属部门。
- 状态:可修改,选择岗位的状态(启用/禁用)。
操作按钮:
- 保存:保存修改后的岗位信息。
- 取消:放弃修改并返回岗位列表。
4. 删除岗位
- 功能描述:管理员可以删除指定的岗位。
- 确认提示:删除前会弹出确认对话框,提醒管理员是否继续删除。
- 级联删除:如果删除的是父级岗位,可以选择是否同时删除其所有子岗位。
5. 排序岗位
- 功能描述:管理员可以通过拖拽或手动输入序号来调整岗位的显示顺序。
- 操作方式:
- 拖拽排序:通过鼠标拖拽岗位进行排序。
- 手动输入:直接在排序序号字段中输入新的序号。
6. 权限配置
功能描述:管理员可以为每个岗位配置访问权限,确保只有授权用户才能访问。
字段说明:
- 角色列表:选择允许访问该岗位的角色。
- 权限类型:选择具体的权限类型(如只读、编辑等)。
操作按钮:
- 保存:保存权限配置。
- 取消:放弃修改并返回岗位列表。
技术实现
数据库设计
岗位表 (
positions):id:主键,自增。name:岗位名称。department_id:外键,关联部门表(0表示未分配部门)。status:岗位状态(0: 禁用, 1: 启用)。created_at:创建时间。updated_at:更新时间。
岗位权限表 (
position_permissions):position_id:外键,关联岗位表。role_id:外键,关联角色表。permission_type:权限类型(如只读、编辑等)。
前端实现
技术栈
- 框架:Vue.js 3.x
- UI库:Naive UI
- 状态管理:Pinia
- 路由管理:Vue Router
- API请求:Axios
页面结构
岗位列表页
- 组件:
PositionList.vue - 功能:
- 使用 Naive UI 的
n-data-table组件展示岗位列表。 - 支持分页、排序和筛选功能。
- 提供搜索栏,使用
n-input和n-button组件实现模糊查询。 - 提供批量操作按钮(如批量删除)。
- 提供操作列,包含编辑、删除、排序等功能按钮。
- 使用 Naive UI 的
- 组件:
添加岗位页
- 组件:
AddPosition.vue - 功能:
- 使用 Naive UI 的
n-form和n-form-item组件构建岗位添加表单。 - 表单字段包括岗位名称、所属部门、状态。
- 提交表单时,调用后端 API 新增岗位。
- 使用 Naive UI 的
- 组件:
编辑岗位页
- 组件:
EditPosition.vue - 功能:
- 使用 Naive UI 的
n-form和n-form-item组件构建岗位编辑表单。 - 表单字段包括岗位名称、所属部门、状态。
- 提交表单时,调用后端 API 更新岗位信息。
- 使用 Naive UI 的
- 组件:
排序岗位页
- 组件:
SortPosition.vue - 功能:
- 使用 Naive UI 的
n-draggable组件实现拖拽排序。 - 提供手动输入排序序号的功能。
- 提交排序结果时,调用后端 API 更新岗位的排序序号。
- 使用 Naive UI 的
- 组件:
权限配置页
- 组件:
PositionPermissions.vue - 功能:
- 使用 Naive UI 的
n-select组件选择允许访问该岗位的角色。 - 使用
n-radio-group组件选择具体的权限类型。 - 提交权限配置时,调用后端 API 更新岗位的权限信息。
- 使用 Naive UI 的
- 组件:
接口列表
1. 获取岗位列表
- URL:
/api/positions - 方法:
GET
请求参数
| 参数名 | 类型 | 是否必填 | 默认值 | 描述 |
|---|---|---|---|---|
page | int | 否 | 1 | 当前页码 |
pageSize | int | 否 | 10 | 每页显示条数 |
search | string | 否 | 搜索关键字(岗位名称等) |
成功响应
json
{
"total": 100,
"data": [
{
"id": 1,
"name": "研发工程师",
"departmentId": 1,
"status": 1,
"createdAt": "2023-09-01T08:00:00Z",
"updatedAt": "2023-09-01T08:00:00Z"
},
...
]
}2. 添加岗位
- URL:
/api/positions - 方法:
POST - 请求头:
Content-Type: application/json
请求体
json
{
"name": "新岗位",
"departmentId": 1,
"status": 1
}成功响应
json
{
"id": 101,
"name": "新岗位",
"departmentId": 1,
"status": 1,
"createdAt": "2023-09-01T08:00:00Z",
"updatedAt": "2023-09-01T08:00:00Z"
}3. 编辑岗位
- URL:
/api/positions/{id} - 方法:
PUT - 路径参数:
id:岗位ID
- 请求头:
Content-Type: application/json
请求体
json
{
"name": "更新后的岗位",
"departmentId": 1,
"status": 1
}成功响应
json
{
"id": 101,
"name": "更新后的岗位",
"departmentId": 1,
"status": 1,
"updatedAt": "2023-09-01T08:00:00Z"
}4. 删除岗位
- URL:
/api/positions/{id} - 方法:
DELETE - 路径参数:
id:岗位ID
成功响应
json
{
"message": "删除成功"
}5. 排序岗位
- URL:
/api/positions/sort - 方法:
POST - 请求头:
Content-Type: application/json
请求体
json
{
"positionIds": [1, 2, 3, 4]
}成功响应
json
{
"message": "排序成功"
}6. 配置岗位权限
- URL:
/api/positions/{id}/permissions - 方法:
POST - 路径参数:
id:岗位ID
- 请求头:
Content-Type: application/json
请求体
json
{
"roleId": 1,
"permissionType": "edit"
}成功响应
json
{
"message": "权限配置成功"
}附录
接口规范
HTTP状态码:
200 OK:请求成功。201 Created:资源创建成功。204 No Content:请求成功但无返回内容。400 Bad Request:客户端请求有误。404 Not Found:请求的资源不存在。409 Conflict:请求冲突,例如资源已存在。
错误响应格式:
json{ "error": "Error message", "details": ["Detail 1", "Detail 2"] }时间格式:
- 使用 ISO 8601 标准格式,例如
2023-01-01T00:00:00Z。
- 使用 ISO 8601 标准格式,例如
总结
岗位管理模块是系统中不可或缺的一部分,它不仅提供了对岗位信息的全面管理,还确保了系统的组织架构清晰和可扩展性。通过合理的权限配置和岗位信息的增删改查功能,管理员可以有效地管理和调整岗位结构,保障系统的稳定运行和用户体验。如果有其他问题或需要进一步的帮助,请随时联系技术支持团队。