122 行
6.9 KiB
Markdown
122 行
6.9 KiB
Markdown
---
|
||
schema: "hl-changelog/v2"
|
||
ticket: "8446"
|
||
title: "订单列表「订单类型」下拉改为「核心 / 定制 / 团期」页签"
|
||
consumer: "admin"
|
||
author: "wx(GIT)"
|
||
change_type: "前端优化"
|
||
backend_status: "deployed"
|
||
gateway_status: "verified"
|
||
frontend_status: "verified"
|
||
frontend_owner: "mmg"
|
||
frontend_ref: "ab3b6be1268721e56ed809da9329b367d8b890e9"
|
||
target_release: "v2.1"
|
||
verified_at: "2026-09-28"
|
||
status_note: "后端查询参数 productType 已部署测试服并实测（#8446，PR #8454）。前端：订单列表「订单类型」下拉改为「核心 / 定制 / 团期」页签，默认核心；列表与状态计数请求传 productType，不再传 orderKind。与 27_8446 接口件同一交付(ab3b6be1):页签落 ProTable 工具条,:value+@update:value 触发列表+计数同刷(不用 v-model);默认核心页签。"
|
||
updated_at: "2026-09-27"
|
||
base: "dev-v3"
|
||
---
|
||
|
||
# 前端优化：订单列表「订单类型」下拉改为「核心 / 定制 / 团期」页签
|
||
|
||
## ⚠️ 关键变化
|
||
|
||
1. **订单管理v2 › 订单列表**：删除搜索区「订单类型」下拉（散客 / 团单 / 全部，默认散客），改为表格工具栏左侧的页签「核心 / 定制 / 团期」，默认「核心」。样式同「财务管理 › 核单列表」的「常规产品 / 团期产品」页签。
|
||
2. **列表请求与状态计数请求都传当前页签的 `productType=CORE|CUSTOM|GROUP`，不再传 `orderKind`。**
|
||
- 限定：如果请求里还带着 `orderKind=NORMAL`，后端会与 `productType` 取 AND，「团期」页签恒为空（团期订单都挂了团期）。
|
||
|
||
---
|
||
|
||
## 一、背景
|
||
|
||
wx 2026-09-27：「把订单列表的页面的类型也换成tab 也是 核心/定制/团期」。页签按订单**产品类型**切分，与同日房务管家订单列表的页签口径一致。原「散客 / 团单」按「订单有没有挂团期」切分，和产品类型不是一回事。
|
||
|
||
后端新增查询参数 `productType`（#8446，PR #8454），契约详见同日接口 changelog `27_8446_订单列表按产品类型筛选-修改接口-管理后台.md`。
|
||
|
||
---
|
||
|
||
## 二、现状（hl-ui `origin/v2.1` @ `1c555f5`，逐行核过）
|
||
|
||
文件 `src/views/order-v2/list/index.vue`：
|
||
|
||
| 位置 | 现状 |
|
||
|------|------|
|
||
| `:55-64` | 搜索区「订单类型」`n-select`：`v-model:value="searchForm.orderKind"`、`:options="orderKindOptions"`、`@update:value="handleSearch"` |
|
||
| `:139` | `import { …, ORDER_KIND_OPTIONS } from '@/api/orderV2'` |
|
||
| `:234-235` | `const orderKindOptions = ORDER_KIND_OPTIONS` 及 #7635 注释 |
|
||
| `:236-255` | `adaptedApi.getPage`：`searchForm` 除日期 / 定制师 / 标签外的字段经 `...rest` 原样透传给 `getOrderPage` |
|
||
| `:279-280` | `useListPage` 的 `searchFields`：`{ key: 'orderKind', default: 'NORMAL' }` |
|
||
| `:306-308`、`:322-323` | `fetchGroupCounts` 手工拼参数：`if (searchForm.orderKind) params.orderKind = searchForm.orderKind`，以及描述入参的注释 |
|
||
| `:344-347` | `handleSearch()`：`doSearch()` 刷列表 + `fetchGroupCounts()` 刷状态计数 |
|
||
| `:103-120` | ProTable `#toolbar`：左「共 N 条」，右「新增订单」按钮 |
|
||
|
||
`src/api/orderV2.js`：`:25-33` 定义 `ORDER_KIND` / `ORDER_KIND_OPTIONS`；`getOrderPage`（`:114`）与 `getOrderStatusGroupCounts`（`:137`）的 jsdoc 列了 `orderKind`（`:108`、`:133`）。
|
||
|
||
---
|
||
|
||
## 三、改动要点
|
||
|
||
1. **删除下拉**：删掉 `index.vue:55-64` 整个「订单类型」`form-item`、`:234-235` 的 `orderKindOptions`、`:139` 的 `ORDER_KIND_OPTIONS` import。
|
||
2. **搜索字段**：`:279-280` 的 `{ key: 'orderKind', default: 'NORMAL' }` 改为 `{ key: 'productType', default: 'CORE' }`。列表请求经 `...rest` 自动带上 `productType`，`adaptedApi.getPage` 不用改。
|
||
3. **状态计数**：`:322-323` 改为 `if (searchForm.productType) params.productType = searchForm.productType`，`:306-308` 注释里的 `orderKind` 同步改成 `productType`。
|
||
4. **页签**：放在 ProTable `#toolbar` 左侧，写法照核单列表 `src/views/finance/settlement/index.vue:52-66`：外层 `<n-flex justify="space-between" align="center" class="table-summary">`，左边页签，右边放现有的「共 N 条」和「新增订单」按钮。样式照该文件 `:213-219`：`.table-summary { width: 100%; }`、`.product-tabs { width: 280px; }`。
|
||
|
||
```vue
|
||
<n-tabs
|
||
:value="searchForm.productType"
|
||
type="line"
|
||
size="small"
|
||
class="product-tabs"
|
||
@update:value="onProductTypeChange"
|
||
>
|
||
<n-tab name="CORE">核心</n-tab>
|
||
<n-tab name="CUSTOM">定制</n-tab>
|
||
<n-tab name="GROUP">团期</n-tab>
|
||
</n-tabs>
|
||
```
|
||
|
||
```js
|
||
// 切页签 = 原下拉的 @update:value="handleSearch"：列表与状态计数一起刷新
|
||
function onProductTypeChange(v) {
|
||
searchForm.productType = v
|
||
handleSearch()
|
||
}
|
||
```
|
||
|
||
核单列表用的是 `v-model:value`，切换时不发请求，这里不能照抄。
|
||
5. **重置**：「重置」走 `doReset`，按 `searchFields` 默认值把页签恢复为「核心」，与原下拉重置回「散客」同构，不用额外处理。
|
||
6. **`src/api/orderV2.js`**：`getOrderPage` 与 `getOrderStatusGroupCounts` 的 jsdoc 补 `productType`。`ORDER_KIND` / `ORDER_KIND_OPTIONS` 列表页不再使用；如果删除，同步删 `src/api/__tests__/orderV2.spec.js:444-448` 的断言，保留也不影响功能。
|
||
|
||
---
|
||
|
||
## 四、调用时会撞上的限定
|
||
|
||
- `productType` 取 `CORE` / `CUSTOM` / `GROUP`。后端还接受 `ROUTE`（自驾路书），本次不设页签。非法值返回 HTTP 200 + `code=100001`。
|
||
- 不传 `orderKind` 时，后端不再按「是否挂团期」过滤，只按产品类型分。状态计数「全部」的取消口径与不传 `productType` 时一致。
|
||
- **「团期」关键词输入框**（`groupBatchKeyword`，`index.vue:67-76`）：填了关键词时，后端只查挂了命中团期的订单，再与 `productType` 取 AND。在「核心 / 定制」页签下填团期关键词，结果基本为空（测试服当前没有「核心产品却挂了团期」的订单）。建议该输入框只在「团期」页签显示，由前端决定。
|
||
- 响应结构不变：列表后端返回 `{ records, total, page, pageSize }`，`src/utils/request.js:445` 拦截器已映射为 `list`，前端照旧读 `res.list`；状态计数 `[{ group, label, orderCount }]` 固定 6 项。
|
||
|
||
---
|
||
|
||
## 五、验证清单（前端改完自查）
|
||
|
||
- [ ] 订单列表不再有「订单类型」下拉，工具栏左侧出现「核心 / 定制 / 团期」页签，默认「核心」
|
||
- [ ] 切换页签时，列表与顶部状态分组计数一起刷新；两个请求的 query 都带 `productType`，不带 `orderKind`
|
||
- [ ] 「团期」页签有数据；「核心」页签不再混入团期订单
|
||
- [ ] 点「重置」回到「核心」
|
||
- [ ] 若删了 `ORDER_KIND_OPTIONS`，`orderV2.spec.js` 断言同步删除，单测绿
|
||
|
||
---
|
||
|
||
## 六、不影响范围
|
||
|
||
- 订单详情、出团管理、房务管家订单列表不涉及
|
||
- 小程序、H5 不涉及
|
||
|
||
---
|
||
|
||
## 联系人
|
||
|
||
- **后端负责人**: @wx
|
||
- **前端负责人**: @mmg
|