haoliang-net/docs/02-功能清单/管理后台/06-员工管理/06-01-员工管理页面.md

员工管理页面

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

---

1. 基本信息

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

2. 界面布局

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

3. 查询条件

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

4. 列表字段

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

列宽规则见 02-前端全局规范.md el-table列宽均分规则：选择框固定50，数据列不设width自动均分，操作列固定120。

5. 操作按钮

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

6. 弹窗规格

新增/编辑工人弹窗：

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

表单字段：

字段	控件	必填	默认值	校验	联动
工号	el-input maxlength=50	是	-	必填+唯一性(新增时)	-
姓名	el-input maxlength=50	是	-	必填	-
绑定机床	el-transfer 穿梭框	否	空	-	左侧显示全部机床（带状态色点），右侧显示已绑定机床

说明：

• 弹窗中不设"状态"字段，新增默认启用
• 绑定机床使用穿梭框（el-transfer）：左侧列出全部机床，右侧显示已绑定机床
• 穿梭框数据源：调用机床列表API（/admin/machine）获取全部机床，不按状态筛选
• 每项机床名称前显示状态色点：🟢在线（绿色）、⚪离线（灰色）、🔴停用（红色）
• 穿梭框下方显示图例：绿色=在线 | 灰色=离线 | 红色=停用
• 机床不论在线/离线/停用状态均可绑定（绑定关系不受机床状态限制）
• 穿梭框每项显示格式：[状态点] 机床名称 (device_code) - 车间

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/正式API的URL、HTTP方法均定义在 03-API接口设计.md §3.6 端点清单，本节仅引用编号并定义返回数据结构。

接口引用

接口名称	端点编号	界面用途
工人列表	§3.6 #1	表格数据，分页渲染
新增工人	§3.6 #3	新增弹窗保存
编辑工人	§3.6 #4	编辑弹窗保存
删除工人	§3.6 #5	删除操作
启停工人	§3.6 #6	启停切换
机床列表	§3.6 机床列表	弹窗中穿梭框数据源（全部机床，含在线/离线/停用状态）

数据结构

工人列表（§3.6 #1）：

Response：

{ "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 }}

新增工人（§3.6 #3）：

Response：

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

机床列表（穿梭框数据源）：

Response：

{ "code": 0, "data": { "items": [
  { "id": 1, "name": "西-1.8", "deviceCode": "fanake_1.8", "workshopName": "A栋", "isOnline": 1, "isEnabled": 1 },
  { "id": 2, "name": "西-1.10", "deviceCode": "fanake_1.10", "workshopName": "A栋", "isOnline": 1, "isEnabled": 1 },
  { "id": 3, "name": "东-2.0", "deviceCode": "fanake_2.0", "workshopName": "B栋", "isOnline": 0, "isEnabled": 1 },
  { "id": 4, "name": "东-2.5", "deviceCode": "siemens_2.5", "workshopName": "B栋", "isOnline": 0, "isEnabled": 0 }
], "total": 4, "page": 1, "pageSize": 999 }}

调用机床列表API（GET /admin/machine?pageSize=999），获取全部机床。前端根据isOnline和isEnabled渲染状态色点。

编辑工人（§3.6 #4）/ 删除工人（§3.6 #5）/ 启停工人（§3.6 #6）：

Response：

{ "code": 0, "message": "success", "data": null }

11. 数据需求

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

数据需求	草案对应	说明
工人列表（含分页）	cnc_worker	主表，需JOIN绑定机床数+机床名称
工号唯一性校验	cnc_worker.uk_code	新增时实时校验
可绑定机床下拉	cnc_machine	调用机床列表API获取全部机床，前端按isOnline/isEnabled渲染状态色点