---
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