|
|
# 员工管理页面
|
|
|
|
|
|
> 最后更新：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：
|
|
|
```json
|
|
|
{ "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：
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": { "id": 4, "name": "赵六" }}
|
|
|
```
|
|
|
|
|
|
**机床列表（穿梭框数据源）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "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：
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": null }
|
|
|
```
|
|
|
|
|
|
### 11. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 工人列表（含分页） | cnc_worker | 主表，需JOIN绑定机床数+机床名称 |
|
|
|
| 工号唯一性校验 | cnc_worker.uk_code | 新增时实时校验 |
|
|
|
| 可绑定机床下拉 | cnc_machine | 调用机床列表API获取全部机床，前端按isOnline/isEnabled渲染状态色点 |
|