|
|
# 品牌列表页面
|
|
|
|
|
|
> 最后更新：2026-04-25
|
|
|
> 状态：已设计
|
|
|
|
|
|
---
|
|
|
|
|
|
### 1. 基本信息
|
|
|
|
|
|
| 项 | 值 |
|
|
|
|----|-----|
|
|
|
| 路由 | /brand |
|
|
|
| 权限 | admin |
|
|
|
| 入口 | 侧边栏品牌模板 |
|
|
|
| 面包屑 | 首页 / 品牌模板管理 |
|
|
|
|
|
|
### 2. 界面布局
|
|
|
|
|
|
┌──────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 首页 / 品牌模板管理 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [操作栏] [+ 新增品牌] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [列表区] │
|
|
|
│ 品牌名称 | 状态 | 映射字段数 | 操作 │
|
|
|
│ FANUC | 启用 | 16 | [编辑][禁用][复制] │
|
|
|
│ SIEMENS | 启用 | 12 | [编辑][禁用][复制] │
|
|
|
│ MITSUBISHI | 停用 | 8 | [编辑][启用][复制] │
|
|
|
└──────────────────────────────────────────────────────────┘
|
|
|
|
|
|
### 3. 查询条件
|
|
|
|
|
|
无（品牌数量少，无需筛选）。
|
|
|
|
|
|
### 4. 列表字段
|
|
|
|
|
|
| 字段名 | 列宽 | 排序 | 超长处理 | 对齐 |
|
|
|
|--------|------|------|---------|------|
|
|
|
| 品牌名称 | 150px | y | tooltip | left |
|
|
|
| 状态 | 80px | - | - | center |
|
|
|
| 映射字段数 | 100px | - | - | center |
|
|
|
| 操作 | 180px | - | - | center |
|
|
|
|
|
|
### 5. 操作按钮
|
|
|
|
|
|
| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|
|
|
|------|---------|------|---------|---------|
|
|
|
| 新增品牌 | brand:create | 页头 | 始终 | 打开新增页 |
|
|
|
| 编辑 | brand:update | 行操作 | 始终 | 跳转编辑页 |
|
|
|
| 启用/禁用 | brand:toggle | 行操作 | 始终 | 确认->切换状态 |
|
|
|
| 复制 | brand:copy | 行操作 | 始终 | 复制模板到新增页 |
|
|
|
|
|
|
### 6. 弹窗规格
|
|
|
|
|
|
无弹窗，使用独立编辑页。
|
|
|
|
|
|
### 7. 状态机
|
|
|
|
|
|
品牌is_enabled：
|
|
|
- 1(启用): el-tag success -> 可编辑/禁用/复制
|
|
|
- 0(停用): el-tag danger -> 可编辑/启用/复制
|
|
|
|
|
|
### 8. 交互流程
|
|
|
|
|
|
- 加载：请求品牌列表->渲染表格
|
|
|
- 新增：跳转新增编辑页(/brand/create)
|
|
|
- 编辑：跳转编辑页(/brand/:id/edit)
|
|
|
- 启用/禁用：确认框->调API->刷新列表
|
|
|
- 复制：复制品牌模板数据到新增页
|
|
|
|
|
|
### 9. 空状态
|
|
|
|
|
|
列表无数据：el-empty 暂无品牌数据，点击新增品牌添加
|
|
|
|
|
|
### 10. Mock数据
|
|
|
|
|
|
**GET /api/admin/brand 品牌列表：**
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "id": 1, "brandName": "FANUC", "deviceField": "device", "tagsPath": "tags", "isEnabled": 1, "fieldCount": 16 },
|
|
|
{ "id": 2, "brandName": "SIEMENS", "deviceField": "device", "tagsPath": "tags", "isEnabled": 1, "fieldCount": 12 },
|
|
|
{ "id": 3, "brandName": "MITSUBISHI", "deviceField": "device", "tagsPath": "tags", "isEnabled": 0, "fieldCount": 8 }
|
|
|
]}}
|
|
|
|
|
|
### 10. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 品牌列表 | cnc_brand | 主表 |
|
|
|
| 映射字段数 | cnc_brand_field_mapping | 按brand_id计数 |
|