# 管理端渠道列表页改造 Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 在管理端渠道列表页新增「渠道码」列、「二维码」列，以及「生成二维码」操作按钮。

**Architecture:** 仅修改 `src/views/modules/supplier/channel.vue` 一个文件。在现有 `el-table` 中插入两列，操作列新增按钮，用 `loadingIds` 数组实现 per-row loading，用 `el-image` 的 `preview-src-list` 实现图片放大预览。

**Tech Stack:** Vue 2.6、Element UI、axios（通过 `this.$http`）

---

## 文件变更清单

| 操作 | 文件 |
|------|------|
| Modify | `src/views/modules/supplier/channel.vue` |

---

### Task 1: 新增「渠道码」列

**Files:**
- Modify: `src/views/modules/supplier/channel.vue`

- [ ] **Step 1: 在「渠道方名称」列后插入「渠道码」列**

在 `channel.vue` 的 `<el-table>` 中，找到：
```html
<el-table-column prop="channelName" label="渠道方名称"></el-table-column>
```
在其后插入：
```html
<el-table-column prop="code" label="渠道码" width="120"></el-table-column>
```

- [ ] **Step 2: 手动验证**

启动开发服务器（`npm run serve`），打开渠道方列表页，确认表格出现「渠道码」列，展示后端返回的 `code` 字段值（8位字母数字）。若后端暂未部署，可在 `getDataList` 的 mock 数据中临时加 `code: 'ab3x9k2m'` 验证。

- [ ] **Step 3: Commit**

```bash
git add src/views/modules/supplier/channel.vue
git commit -m "feat: 渠道列表新增渠道码列"
```

---

### Task 2: 新增「二维码」列

**Files:**
- Modify: `src/views/modules/supplier/channel.vue`

- [ ] **Step 1: 在「渠道码」列后插入「二维码」列**

在 Task 1 新增的 `code` 列后插入：
```html
<el-table-column label="二维码" width="100" align="center">
  <template slot-scope="scope">
    <el-image
      v-if="scope.row.qrUrl"
      :src="scope.row.qrUrl"
      :preview-src-list="[scope.row.qrUrl]"
      style="width: 60px; height: 60px;"
      fit="contain"
    ></el-image>
    <span v-else style="color: #999; font-size: 12px;">未生成</span>
  </template>
</el-table-column>
```

- [ ] **Step 2: 手动验证**

在列表页确认：
- 有 `qrUrl` 的行显示 60×60 缩略图，点击可放大
- `qrUrl` 为 null 的行显示灰色「未生成」文字

- [ ] **Step 3: Commit**

```bash
git add src/views/modules/supplier/channel.vue
git commit -m "feat: 渠道列表新增二维码列，支持缩略图预览"
```

---

### Task 3: 操作列新增「生成二维码」按钮

**Files:**
- Modify: `src/views/modules/supplier/channel.vue`

- [ ] **Step 1: 在 data() 中新增 loadingIds 数组**

找到 `data()` 的 `return` 对象，在 `buttonLoading: false` 后新增：
```js
loadingIds: []
```

- [ ] **Step 2: 在操作列新增「生成二维码」按钮**

找到操作列的 template：
```html
<template slot-scope="scope">
    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
```
替换为：
```html
<template slot-scope="scope">
    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
    <el-button
      type="text"
      :loading="loadingIds.includes(scope.row.id)"
      @click="handleGenerateQr(scope.row)"
    >生成二维码</el-button>
</template>
```

- [ ] **Step 3: 新增 handleGenerateQr 方法**

在 `methods` 中，在 `cancel()` 方法后新增：
```js
handleGenerateQr (row) {
  this.loadingIds.push(row.id)
  this.$http.post(`/core/channel/generateQr/${row.id}`).then(res => {
    if (res.data.code !== 0) {
      this.$message.error(res.data.msg)
    } else {
      row.qrUrl = res.data.data
      this.$message.success('二维码生成成功')
    }
  }).catch(() => {
    this.$message.error('操作失败，请重试')
  }).finally(() => {
    this.loadingIds = this.loadingIds.filter(id => id !== row.id)
  })
}
```

- [ ] **Step 4: 手动验证**

在列表页点击某行「生成二维码」：
- 按钮进入 loading 状态
- 请求成功后，该行二维码列从「未生成」变为缩略图
- 其他行按钮不受影响
- 网络失败时弹出错误提示

- [ ] **Step 5: Commit**

```bash
git add src/views/modules/supplier/channel.vue
git commit -m "feat: 渠道列表操作列新增生成二维码按钮"
```

---

## 自检清单

- [x] 规格书 §3.1「列表新增渠道码列」→ Task 1
- [x] 规格书 §3.1「列表新增二维码列，有图/无图两种状态」→ Task 2
- [x] 规格书 §3.1「操作列新增生成二维码按钮，loading 等待，成功刷新行数据」→ Task 3
- [x] 规格书 §3.2「新增表单无需改动」→ 未涉及，正确
- [x] 错误处理：失败弹 `$message.error`，网络异常 catch → Task 3 Step 3
- [x] per-row loading 避免多行互相干扰 → `loadingIds` 数组