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.

8.4 KiB

Raw Blame History Unescape Escape

设备列表页面

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

1. 基本信息

项	值
路由	/machine
权限	admin
入口	侧边栏设备管理
面包屑	首页 / 设备管理

2. 界面布局

┌──────────────────────────────────────────────────────────┐ │ [面包屑] 首页 / 设备管理 │ ├──────────────────────────────────────────────────────────┤ │ [操作栏] [+ 新增机床] [导入] [导出] [批量停用(N)] [批量启用(N)] │ ├──────────────────────────────────────────────────────────┤ │ [查询条件区] │ │ 车间[▼全部] 在线状态[▼全部] 品牌[▼全部] 搜索[____] │ │ [查询] [重置] │ ├──────────────────────────────────────────────────────────┤ │ [列表区] │ │ [x] | 机床名称 | device_code | 车间 | 品牌 | IP地址 | 在线 | 绑定工人 | 操作 │ │ [x] | 西-1.8 | fanake_1.8 | A栋 | FANUC| 10.1.1.8| 在线 | 张三 | [编辑][删除] │ ├──────────────────────────────────────────────────────────┤ │ [分页] 共160条每页[20▼] < 1 2 3 ... 8 > │ └──────────────────────────────────────────────────────────┘

3. 查询条件

字段	控件	必填	默认值	校验	联动
车间	el-select	否	全部	-	无
在线状态	el-select(在线/离线/全部)	否	全部	-	无
品牌	el-select	否	全部	-	无
关键字	el-input placeholder=机床名称/device_code	否	空	-	无

4. 列表字段

字段名	列宽	排序	筛选	固定	超长处理	对齐
选择框	50	-	-	left	-	center
机床名称	-	y	-	left	tooltip	center
device_code	-	y	-	-	tooltip	center
车间	-	y	下拉	-	-	center
品牌	-	y	下拉	-	-	center
IP地址	-	-	-	-	-	center
在线状态	-	-	-	-	-	center
绑定工人	-	-	-	-	-	center
操作	180	-	-	right	-	center

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

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

接口引用

接口名称	端点编号	界面用途
机床列表	§3.3 #1	表格数据，分页渲染
新增机床	§3.3 #3	新增弹窗保存
编辑机床	§3.3 #4	编辑弹窗保存
删除机床	§3.3 #5	删除操作
启停机床	§3.3 #6	启停切换
车间下拉	§3.13 #1	查询条件+表单下拉
品牌下拉	§3.13 #2	查询条件+表单下拉
采集地址下拉	§3.13 #5	表单下拉
工人下拉	§3.13 #4	表单下拉

数据结构

机床列表（§3.3 #1）：

Response：

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

新增机床（§3.3 #3）：

Request body：

{ "deviceCode": "fanake_1.8", "name": "西-1.8", "workshopId": 1, "collectAddressId": 1, "ipAddress": "10.1.1.8", "brandId": 1 }

Response：

{ "code": 0, "message": "success", "data": { "id": 161, "name": "新机床" }}

编辑机床（§3.3 #4）/ 删除机床（§3.3 #5）/ 启停机床（§3.3 #6）：

Response：

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

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	新增时校验

8.4 KiB Raw Blame History Unescape Escape

设备列表页面

1. 基本信息

2. 界面布局

3. 查询条件

4. 列表字段

5. 操作按钮

6. 弹窗规格

7. 状态机

8. 交互流程

9. 空状态

10. 接口引用与数据结构

接口引用

数据结构

10. 数据需求

8.4 KiB

Raw Blame History Unescape Escape