You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
haoliang-net/docs/02-功能清单/管理后台/06-员工管理/06-01-员工管理页面.md

6.7 KiB

员工管理页面

最后更新2026-04-26 状态:已设计


1. 基本信息

路由 /worker
权限 admin
入口 侧边栏员工管理
面包屑 首页 / 员工管理

2. 界面布局

┌──────────────────────────────────────────────────────────┐
│ [面包屑] 首页 / 员工管理                                   │
├──────────────────────────────────────────────────────────┤
│ [操作栏]  [+ 新增工人]                                     │
├──────────────────────────────────────────────────────────┤
│ [查询条件区]                                              │
│ 状态[▼全部]  搜索[__________]                [查询] [重置]  │
├──────────────────────────────────────────────────────────┤
│ [列表区]                                                  │
│ [x] | 工号   | 姓名  | 状态 | 绑定机床数 | 绑定机床       | 操作         │
│ [x] | W001  | 张三  | 启用 | 2         | 西-1.8,西-2.0  | [编辑][删除] │
│ [x] | W002  | 李四  | 启用 | 1         | 西-1.10        | [编辑][删除] │
│ [x] | W003  | 王五  | 停用 | 0         | -              | [编辑][启用] │
├──────────────────────────────────────────────────────────┤
│ [分页]  共50条  每页[20▼]  < 1 2 3 >                     │
├──────────────────────────────────────────────────────────┤
│ [批量操作栏]  已选2项  [批量停用]  [批量启用]                │
└──────────────────────────────────────────────────────────┘

3. 查询条件

字段 控件 必填 默认值 校验 联动
状态 el-select(启用/停用/全部) 全部 -
关键字 el-input placeholder=工号/姓名 -

4. 列表字段

字段名 列宽 排序 筛选 固定 超长处理 对齐
选择框 40px - - left - center
工号 120px y - - tooltip left
姓名 120px y - - tooltip left
状态 80px - - - - center
绑定机床数 100px y - - - center
绑定机床 auto - - - tooltip(逗号分隔) left
操作 120px - - right - center

5. 操作按钮

名称 权限编码 位置 显示条件 点击行为
新增工人 worker:create 页头 始终 打开新增弹窗
编辑 worker:update 行操作 始终 打开编辑弹窗
删除 worker:delete 行操作 启用状态且无绑定机床 确认->软删除
批量停用 worker:disable 底部栏 已选含启用项 确认->批量
批量启用 worker:enable 底部栏 已选含停用项 确认->批量
姓名链接 - 行内 始终 跳转工人详情页(/worker/:id)

6. 弹窗规格

新增/编辑工人弹窗:

  • 宽度500px遮罩有ESC关闭是(脏数据检测),标题=新增工人/编辑工人

表单字段:

字段 控件 必填 默认值 校验 联动
工号 el-input maxlength=50 - 必填+唯一性(新增时) -
姓名 el-input maxlength=50 - 必填 -
绑定机床 el-select multiple filterable - 仅显示未绑定其他工人的机床

说明:

  • 弹窗中不设"状态"字段,新增默认启用
  • 绑定机床下拉查询cnc_machine中未绑定其他工人的机床uk_machine约束确保一对一
  • 编辑时回填当前已绑定机床+可选未绑定机床

7. 状态机

工人is_enabled

  • 1(启用): el-tag success -> 可编辑/删除(无绑定机床时)/停用
  • 0(停用): el-tag danger -> 可编辑/启用

删除前提:绑定机床数=0有绑定机床的工人不可删除需先解绑

8. 交互流程

  • 加载请求工人列表API(含分页)->渲染表格
  • 查询:点查询->重置page=1->请求列表API
  • 重置:清空所有筛选条件->请求列表API
  • 新增:弹窗->填写工号+姓名+选择绑定机床->保存->关闭弹窗->刷新列表
  • 编辑:弹窗(回填数据)->修改->保存->关闭->刷新
  • 删除:确认框"确定删除工人【{姓名}】?此操作不可恢复。 "->调API->成功->刷新列表
  • 批量启停:勾选->底部栏显示->点操作->确认->批量API->刷新
  • 姓名链接:跳转工人详情页

9. 空状态

列表无数据el-empty 暂无工人数据,点击新增工人添加

10. Mock数据

GET /api/admin/worker 工人列表:

{ "code": 0, "data": { "items": [
  { "id": 1, "code": "W001", "name": "张三", "isEnabled": 1, "machineCount": 2, "machineNames": "西-1.8,西-2.0" },
  { "id": 2, "code": "W002", "name": "李四", "isEnabled": 1, "machineCount": 1, "machineNames": "西-1.10" },
  { "id": 3, "code": "W003", "name": "王五", "isEnabled": 0, "machineCount": 0, "machineNames": "-" }
], "total": 50, "page": 1, "pageSize": 20 }}

POST /api/admin/worker 新增工人成功:

{ "code": 0, "message": "success", "data": { "id": 4, "name": "赵六" }}

GET /api/admin/worker/available-machines 可绑定机床下拉:

{ "code": 0, "data": { "items": [
  { "id": 5, "name": "东-2.5", "deviceCode": "siemens_2.5", "workshopName": "B栋" },
  { "id": 8, "name": "北-4.1", "deviceCode": "fanake_4.1", "workshopName": "C栋" }
]}}

11. 数据需求

以下为本页面需要的数据,数据库设计定稿时需覆盖。参考 01-数据库设计.md 草案。

数据需求 草案对应 说明
工人列表(含分页) cnc_worker 主表需JOIN绑定机床数+机床名称
工号唯一性校验 cnc_worker.uk_code 新增时实时校验
可绑定机床下拉 cnc_machine LEFT JOIN cnc_worker_machine 查未绑定工人(not exists in cnc_worker_machine)的机床