273 lines
9.2 KiB
Markdown
273 lines
9.2 KiB
Markdown
# 备货单 / 终版列表「全部 / 我的」视图切换 实现计划
|
||
|
||
> **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:** 在 `stocking_list.vue` 与 `final_list.vue` 给 `userId === 73` 的特权用户增加「全部 / 我的」视图切换，切换时给列表接口传 `view_scope=all|self`。
|
||
|
||
**Architecture:** 纯前端 UI + 传参改动。新增本地状态 `viewScope`，工具栏渲染条件 `canViewAll = userStore.getUserInfo.userId === 73`；`getList` 把 `viewScope.value` 作为 `view_scope` 随请求发出；切换时重置页码并重新请求。是否返回全量数据由后端按 token 鉴权决定（后端改造见 spec 第 3.4 节，不在本计划内）。
|
||
|
||
**Tech Stack:** Vue 3 `<script setup>` + TypeScript、element-plus 2.8、Pinia（`useUserStore`）、`unplugin-auto-import`（`ref/reactive/computed/onMounted/watch` 自动导入，无需手写 import）。
|
||
|
||
## Global Constraints
|
||
|
||
- **无前端单元测试框架**：本项目 `package.json` 无 `test` 脚本。验收方式 = `lint` 通过 + 本地 `dev` 手动核对，不写自动化测试。
|
||
- **后端是前置依赖**：前端「全部」真正生效需后端 `GET /crm/stock/order/list` 支持 `view_scope` 参数（见 spec 3.4）。前端可先行独立完成 UI 与传参；完整功能联调待后端就绪。
|
||
- **安全边界在后端**：前端 `userId === 73` 仅控制按钮显隐，非授权依据。
|
||
- **代码风格**：遵循现有写法——`<script setup lang="ts">`、element-plus 组件、snake_case 请求参数。
|
||
- **commit 规范**：每任务一次 commit，信息以 `feat:` 开头。
|
||
|
||
## 文件结构
|
||
|
||
| 文件 | 责任 | 改动类型 |
|
||
|---|---|---|
|
||
| `src/views/crmpc/stocking/stocking_list.vue` | 备货单列表，加视图切换 + `view_scope` 传参 | Modify |
|
||
| `src/views/crmpc/stocking/final_list.vue` | 终版列表，同构改动 | Modify |
|
||
|
||
两文件改动完全同构，仅 `is_final`（0 vs 1）不同。不新建文件。
|
||
|
||
---
|
||
|
||
## Task 1: stocking_list.vue 增加视图切换
|
||
|
||
**Files:**
|
||
- Modify: `src/views/crmpc/stocking/stocking_list.vue`
|
||
- 模板工具栏（约 `line 9-22` 的 `toolbar-right`）
|
||
- `getList` 参数（约 `line 339-344`）
|
||
- script 状态（约 `line 280-281` `useAuth` 之后）
|
||
- script import（约 `line 264-274`）
|
||
|
||
**Interfaces:**
|
||
- Consumes: `useUserStore`（来自 `@/store/modules/user`），其 `getUserInfo: computed => Partial<{ userId: number }>`；`CrmService.getStockList(params)`（已存在）。
|
||
- Produces: 列表请求新增参数字段 `view_scope: 'all' | 'self'`。
|
||
|
||
- [ ] **Step 1: 添加 import**
|
||
|
||
在 `<script setup lang="ts">` 顶部 import 区（`import { useAuth } from '@/composables/useAuth'` 同处）增加一行：
|
||
|
||
```ts
|
||
import { useUserStore } from '@/store/modules/user'
|
||
```
|
||
|
||
- [ ] **Step 2: 添加状态与切换处理**
|
||
|
||
在 `const { hasAuth } = useAuth()`（约 line 281）之后插入：
|
||
|
||
```ts
|
||
const userStore = useUserStore()
|
||
// 仅 userId=73 的特权用户可切换「全部/我的」
|
||
const canViewAll = computed(() => userStore.getUserInfo.userId === 73)
|
||
const viewScope = ref<'all' | 'self'>('self')
|
||
const onScopeChange = () => {
|
||
pagination.currentPage = 1
|
||
getList()
|
||
}
|
||
```
|
||
|
||
说明：`computed` / `ref` 由 `unplugin-auto-import` 提供，无需 import。`getUserInfo.userId` 类型为 `number | undefined`，`undefined === 73` 为 `false`，判空安全。
|
||
|
||
- [ ] **Step 3: 修改 `getList` 请求参数**
|
||
|
||
定位 `getList` 内（约 line 339-344）：
|
||
|
||
```ts
|
||
const params = {
|
||
current: currentPage,
|
||
size: pageSize,
|
||
is_final: 0, // 只获取备货单，非终版
|
||
keyword: keyword.value
|
||
}
|
||
```
|
||
|
||
改为（增加 `view_scope`）：
|
||
|
||
```ts
|
||
const params = {
|
||
current: currentPage,
|
||
size: pageSize,
|
||
is_final: 0, // 只获取备货单，非终版
|
||
keyword: keyword.value,
|
||
view_scope: viewScope.value
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 4: 工具栏添加切换控件**
|
||
|
||
定位模板 `toolbar-right`（约 line 9-21），在 `<el-input>` 之前插入 `el-radio-group`：
|
||
|
||
原：
|
||
|
||
```html
|
||
<div class="toolbar-right">
|
||
<el-input
|
||
v-model="keyword"
|
||
```
|
||
|
||
改为：
|
||
|
||
```html
|
||
<div class="toolbar-right">
|
||
<el-radio-group
|
||
v-if="canViewAll"
|
||
v-model="viewScope"
|
||
@change="onScopeChange"
|
||
style="margin-right: 12px"
|
||
>
|
||
<el-radio-button value="self">我的</el-radio-button>
|
||
<el-radio-button value="all">全部</el-radio-button>
|
||
</el-radio-group>
|
||
<el-input
|
||
v-model="keyword"
|
||
```
|
||
|
||
说明：用 `value`（element-plus 2.6+ 推荐）而非 `label` 作值，避免 2.8 的 label 弃用告警。文字走默认插槽。
|
||
|
||
- [ ] **Step 5: Lint 校验**
|
||
|
||
Run: `npm run fix -- src/views/crmpc/stocking/stocking_list.vue`
|
||
Expected: 无 error。若有，按提示修复（常见：prettier 格式）。
|
||
|
||
- [ ] **Step 6: 手动核对（前端独立部分）**
|
||
|
||
Run: `npm run dev`，浏览器打开备货单列表页。
|
||
|
||
核对项：
|
||
1. 用**非 73 账号**登录：工具栏**不出现**「全部/我的」控件，列表行为同改动前。
|
||
2. 打开 DevTools Network，看 `/crm/stock/order/list` 请求 Payload：无论是否 73，都应带上 `view_scope=self`（默认值）。
|
||
3. （需 73 登录态）用 73 账号登录：出现「全部/我的」，默认选中「我的」；点「全部」后 Network 请求带 `view_scope=all`，点回「我的」带 `view_scope=self`，且每次切换分页回到第 1 页。
|
||
4. 「全部」是否真返回全量数据，取决于后端是否已支持——后端未就绪时，切到「全部」数据可能不变，属预期。
|
||
|
||
- [ ] **Step 7: Commit**
|
||
|
||
```bash
|
||
git add src/views/crmpc/stocking/stocking_list.vue
|
||
git commit -m "feat(stocking): 备货单列表为特权用户增加「全部/我的」视图切换
|
||
|
||
Co-Authored-By: Claude <noreply@anthropic.com>"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 2: final_list.vue 增加视图切换（同构）
|
||
|
||
**Files:**
|
||
- Modify: `src/views/crmpc/stocking/final_list.vue`
|
||
- 模板工具栏（约 `line 7-19` 的 `toolbar-right`）
|
||
- `getList` 参数（约 `line 278-283`）
|
||
- script 状态（约 `line 229` `useAuth` 之后）
|
||
- script import（约 `line 206-216`）
|
||
|
||
**Interfaces:**
|
||
- Consumes: 同 Task 1（`useUserStore`、`CrmService.getStockList`）。
|
||
- Produces: 同 Task 1（`view_scope` 参数）。
|
||
|
||
- [ ] **Step 1: 添加 import**
|
||
|
||
在 `<script setup lang="ts">` 顶部 import 区增加：
|
||
|
||
```ts
|
||
import { useUserStore } from '@/store/modules/user'
|
||
```
|
||
|
||
- [ ] **Step 2: 添加状态与切换处理**
|
||
|
||
在 `const { hasAuth } = useAuth()`（约 line 229）之后插入：
|
||
|
||
```ts
|
||
const userStore = useUserStore()
|
||
// 仅 userId=73 的特权用户可切换「全部/我的」
|
||
const canViewAll = computed(() => userStore.getUserInfo.userId === 73)
|
||
const viewScope = ref<'all' | 'self'>('self')
|
||
const onScopeChange = () => {
|
||
pagination.currentPage = 1
|
||
getList()
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: 修改 `getList` 请求参数**
|
||
|
||
定位 `getList` 内（约 line 278-283）：
|
||
|
||
```ts
|
||
const params = {
|
||
current: currentPage,
|
||
size: pageSize,
|
||
is_final: 1, // 只获取备货单，非终版
|
||
keyword: keyword.value
|
||
}
|
||
```
|
||
|
||
改为：
|
||
|
||
```ts
|
||
const params = {
|
||
current: currentPage,
|
||
size: pageSize,
|
||
is_final: 1, // 终版
|
||
keyword: keyword.value,
|
||
view_scope: viewScope.value
|
||
}
|
||
```
|
||
|
||
（注：原代码注释「非终版」是笔误，此处顺手修正为「终版」。）
|
||
|
||
- [ ] **Step 4: 工具栏添加切换控件**
|
||
|
||
定位模板 `toolbar-right`（约 line 7-19），在 `<el-input>` 之前插入：
|
||
|
||
原：
|
||
|
||
```html
|
||
<div class="toolbar-right">
|
||
<el-input
|
||
v-model="keyword"
|
||
```
|
||
|
||
改为：
|
||
|
||
```html
|
||
<div class="toolbar-right">
|
||
<el-radio-group
|
||
v-if="canViewAll"
|
||
v-model="viewScope"
|
||
@change="onScopeChange"
|
||
style="margin-right: 12px"
|
||
>
|
||
<el-radio-button value="self">我的</el-radio-button>
|
||
<el-radio-button value="all">全部</el-radio-button>
|
||
</el-radio-group>
|
||
<el-input
|
||
v-model="keyword"
|
||
```
|
||
|
||
- [ ] **Step 5: Lint 校验**
|
||
|
||
Run: `npm run fix -- src/views/crmpc/stocking/final_list.vue`
|
||
Expected: 无 error。
|
||
|
||
- [ ] **Step 6: 手动核对（前端独立部分）**
|
||
|
||
Run: `npm run dev`，浏览器打开终版列表页。核对项同 Task 1 Step 6（注意此处是 `is_final=1` 的终版页）。
|
||
|
||
- [ ] **Step 7: Commit**
|
||
|
||
```bash
|
||
git add src/views/crmpc/stocking/final_list.vue
|
||
git commit -m "feat(stocking): 终版列表为特权用户增加「全部/我的」视图切换
|
||
|
||
Co-Authored-By: Claude <noreply@anthropic.com>"
|
||
```
|
||
|
||
---
|
||
|
||
## 后端联调清单（交付后端，不在本计划执行范围）
|
||
|
||
接口 `GET /crm/stock/order/list` 增加可选参数 `view_scope`：
|
||
|
||
| 请求 | 后端行为 |
|
||
|---|---|
|
||
| 不传 / `view_scope=self` | 按现状：依 token 用户过滤 |
|
||
| `view_scope=all` 且 token 用户 id ∈ {73} | 返回全量 |
|
||
| `view_scope=all` 且 token 用户 id ∉ {73} | 降级为 `self`（返回该用户自己的） |
|
||
|
||
要点：**只信 token，忽略前端任何用户标识**，防 IDOR。
|