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.
haoliang-net/docs/02-功能清单/管理后台/04-品牌模板/04-01-品牌列表页面.md

3.5 KiB

品牌列表页面

最后更新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 品牌列表:

{ "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计数 |