|
|
# 设备列表页面
|
|
|
|
|
|
> 最后更新：2026-04-25
|
|
|
> 状态：已设计
|
|
|
|
|
|
---
|
|
|
|
|
|
### 1. 基本信息
|
|
|
|
|
|
| 项 | 值 |
|
|
|
|----|-----|
|
|
|
| 路由 | /machine |
|
|
|
| 权限 | admin |
|
|
|
| 入口 | 侧边栏设备管理 |
|
|
|
| 面包屑 | 首页 / 设备管理 |
|
|
|
|
|
|
### 2. 界面布局
|
|
|
|
|
|
┌──────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 首页 / 设备管理 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [操作栏] [+ 新增机床] [导入] [导出] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [查询条件区] │
|
|
|
│ 车间[▼全部] 在线状态[▼全部] 品牌[▼全部] 搜索[____] │
|
|
|
│ [查询] [重置] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [列表区] │
|
|
|
│ [x] | 机床名称 | device_code | 车间 | 品牌 | IP地址 | 在线 | 绑定工人 | 操作 │
|
|
|
│ [x] | 西-1.8 | fanake_1.8 | A栋 | FANUC| 10.1.1.8| 在线 | 张三 | [编辑][删除] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [分页] 共160条 每页[20▼] < 1 2 3 ... 8 > │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [批量操作栏] 已选2项 [批量停用] [批量启用] │
|
|
|
└──────────────────────────────────────────────────────────┘
|
|
|
|
|
|
### 3. 查询条件
|
|
|
|
|
|
| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|
|
|
|------|------|------|--------|------|------|
|
|
|
| 车间 | el-select | 否 | 全部 | - | 无 |
|
|
|
| 在线状态 | el-select(在线/离线/全部) | 否 | 全部 | - | 无 |
|
|
|
| 品牌 | el-select | 否 | 全部 | - | 无 |
|
|
|
| 关键字 | el-input placeholder=机床名称/device_code | 否 | 空 | - | 无 |
|
|
|
|
|
|
### 4. 列表字段
|
|
|
|
|
|
| 字段名 | 列宽 | 排序 | 筛选 | 固定 | 超长处理 | 对齐 |
|
|
|
|--------|------|------|------|------|---------|------|
|
|
|
| 选择框 | 40px | - | - | left | - | center |
|
|
|
| 机床名称 | 120px | y | - | left | tooltip | left |
|
|
|
| device_code | 140px | y | - | - | tooltip | left |
|
|
|
| 车间 | 80px | y | 下拉 | - | - | center |
|
|
|
| 品牌 | 100px | y | 下拉 | - | - | center |
|
|
|
| IP地址 | 120px | - | - | - | - | left |
|
|
|
| 在线状态 | 80px | - | - | - | - | center |
|
|
|
| 绑定工人 | 100px | - | - | - | - | center |
|
|
|
| 操作 | 120px | - | - | right | - | center |
|
|
|
|
|
|
### 5. 操作按钮
|
|
|
|
|
|
| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|
|
|
|------|---------|------|---------|---------|
|
|
|
| 新增机床 | machine:create | 页头 | 始终 | 打开新增弹窗 |
|
|
|
| 导入 | machine:import | 页头 | 始终 | 打开导入弹窗 |
|
|
|
| 导出 | machine:export | 页头 | 始终 | 调API下载Excel |
|
|
|
| 编辑 | machine:update | 行操作 | 始终 | 打开编辑弹窗 |
|
|
|
| 删除 | machine:delete | 行操作 | 始终 | 确认->软删除 |
|
|
|
| 批量停用 | machine:disable | 底部栏 | 已选含启用项 | 确认->批量 |
|
|
|
| 批量启用 | machine:enable | 底部栏 | 已选含停用项 | 确认->批量 |
|
|
|
| 机床名称链接 | - | 行内 | 始终 | 跳转详情页 |
|
|
|
|
|
|
### 6. 弹窗规格
|
|
|
|
|
|
**新增/编辑机床弹窗：**
|
|
|
- 宽度600px，遮罩有，ESC关闭是(脏数据检测)，标题=新增机床/编辑机床
|
|
|
|
|
|
表单字段：
|
|
|
|
|
|
| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|
|
|
|------|------|------|--------|------|------|
|
|
|
| 机床名称 | el-input maxlength=100 | 是 | - | 必填 | - |
|
|
|
| device_code | el-input maxlength=100 | 是 | - | 必填+唯一性(新增时) | - |
|
|
|
| 所属车间 | el-select | 是 | - | 必填 | - |
|
|
|
| 采集地址 | el-select | 是 | - | 必填 | 选定后品牌自动填充(只读) |
|
|
|
| 品牌(只读) | el-input disabled | - | 由采集地址联动 | - | 采集地址变化时自动填充 |
|
|
|
| IP地址 | el-input | 是 | - | 必填+IP格式 | - |
|
|
|
| 绑定工人 | el-select | 否 | 空 | - | - |
|
|
|
|
|
|
**导入弹窗：**
|
|
|
- 宽度500px，标题=导入机床
|
|
|
|
|
|
| 字段 | 控件 | 说明 |
|
|
|
|------|------|------|
|
|
|
| 模板下载 | el-button link | 下载Excel模板 |
|
|
|
| 文件上传 | el-upload | accept=.xlsx, limit=1, auto-upload=false |
|
|
|
| 确认导入 | el-button primary | 手动触发上传 |
|
|
|
|
|
|
### 7. 状态机
|
|
|
|
|
|
机床is_enabled：
|
|
|
- 1(启用): el-tag success -> 可编辑/删除/停用
|
|
|
- 0(停用): el-tag danger -> 可编辑/启用
|
|
|
|
|
|
### 8. 交互流程
|
|
|
|
|
|
- 加载：请求机床列表API(含分页)->渲染表格
|
|
|
- 查询：点查询->重置page=1->请求列表API
|
|
|
- 重置：清空所有筛选条件->请求列表API
|
|
|
- 新增：弹窗->填写->保存->关闭弹窗->刷新列表
|
|
|
- 编辑：弹窗(回填数据)->修改->保存->关闭->刷新
|
|
|
- 删除：确认框->调API->成功->刷新列表
|
|
|
- 批量：勾选->底部栏显示->点操作->确认->批量API->刷新
|
|
|
- 导出：调API->下载文件
|
|
|
- 导入：选文件->确认->上传->返回结果(成功N条/失败N条)->刷新列表
|
|
|
- 机床名称链接：跳转机床详情页
|
|
|
|
|
|
### 9. 空状态
|
|
|
|
|
|
列表无数据：el-empty 暂无机床数据，点击新增机床添加
|
|
|
|
|
|
### 10. Mock数据
|
|
|
|
|
|
**GET /api/admin/machine 机床列表：**
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "id": 1, "name": "西-1.8", "deviceCode": "fanake_1.8", "workshopName": "A栋", "brandName": "FANUC", "ipAddress": "10.1.1.8", "isOnline": 1, "workerName": "张三", "isEnabled": 1 },
|
|
|
{ "id": 2, "name": "西-1.10", "deviceCode": "fanake_1.10", "workshopName": "A栋", "brandName": "FANUC", "ipAddress": "10.1.1.10", "isOnline": 1, "workerName": "李四", "isEnabled": 1 },
|
|
|
{ "id": 3, "name": "东-2.0", "deviceCode": "fanake_2.0", "workshopName": "B栋", "brandName": "FANUC", "ipAddress": "10.1.2.0", "isOnline": 0, "workerName": "王五", "isEnabled": 1 },
|
|
|
{ "id": 4, "name": "东-2.5", "deviceCode": "siemens_2.5", "workshopName": "B栋", "brandName": "SIEMENS", "ipAddress": "10.1.2.5", "isOnline": 0, "workerName": null, "isEnabled": 0 }
|
|
|
], "total": 160, "page": 1, "pageSize": 20 }}
|
|
|
```
|
|
|
|
|
|
**POST /api/admin/machine 新增机床成功：**
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": { "id": 161, "name": "新机床" }}
|
|
|
```
|
|
|
|
|
|
**GET /api/admin/machine/export 导出（返回文件流）：**
|
|
|
二进制Excel文件，Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
|
|
|
|
|
|
**POST /api/admin/machine/import 导入结果：**
|
|
|
```json
|
|
|
{ "code": 0, "data": { "successCount": 15, "failCount": 2, "failDetails": ["第3行：device_code重复", "第8行：车间不存在"] }}
|
|
|
```
|
|
|
|
|
|
### 10. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 机床列表（含分页） | cnc_machine | 主表，需JOIN车间/品牌/工人 |
|
|
|
| 车间下拉 | cnc_workshop | 查询条件+表单 |
|
|
|
| 品牌下拉 | cnc_brand | 查询条件 |
|
|
|
| 采集地址下拉 | cnc_collect_address | 表单联动（选地址→填充品牌） |
|
|
|
| 工人下拉 | cnc_worker | 表单绑定工人 |
|
|
|
| 机床唯一性校验 | cnc_machine.device_code | 新增时实时校验 |
|
|
|
| 设备code唯一性 | cnc_machine.uk_device_code | 新增时校验 |
|