|
|
@@ -0,0 +1,277 @@
|
|
|
+# 预签约列表京东式状态筛选 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:** 继续使用 Vant `van-dropdown-menu`;删除重置按钮与 `resetFilters`;用 CSS 把下拉条改成左对齐文字+三角的轻量样式。筛选参数与列表加载逻辑不变。
|
|
|
+
|
|
|
+**Tech Stack:** Vue 3、Vant 4、`mobile-oa-h5`、Node `node:test` 源码契约测试
|
|
|
+
|
|
|
+**Spec:** `docs/superpowers/specs/2026-10-14-presign-list-jd-status-filter-design.md`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## File map
|
|
|
+
|
|
|
+| File | Responsibility |
|
|
|
+|------|----------------|
|
|
|
+| `mobile-oa-h5/src/market/mobile-parity-ui.test.js` | 契约:有状态筛选、无重置 |
|
|
|
+| `mobile-oa-h5/src/views/market/presign/PresignOrderList.vue` | 去掉重置 UI 与 `resetFilters` |
|
|
|
+| `mobile-oa-h5/src/styles/market.css` | 京东式左侧轻量下拉样式 |
|
|
|
+
|
|
|
+无新文件;后端 / `mobile-h5` 不改。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 1: 更新契约测试(先红)
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `mobile-oa-h5/src/market/mobile-parity-ui.test.js:113-119`
|
|
|
+
|
|
|
+- [ ] **Step 1: 改写预签约筛选用例**
|
|
|
+
|
|
|
+将:
|
|
|
+
|
|
|
+```js
|
|
|
+test('dedicated presign list wires orderStatus filtering and reset on mobile', () => {
|
|
|
+ const presignList = source('../views/market/presign/PresignOrderList.vue')
|
|
|
+ assert.match(presignList, /v-model="orderStatus"/)
|
|
|
+ assert.match(presignList, /buildPresignListParams/)
|
|
|
+ assert.match(presignList, /resetFilters/)
|
|
|
+ assert.match(presignList, /orderStatusOptions/)
|
|
|
+})
|
|
|
+```
|
|
|
+
|
|
|
+替换为:
|
|
|
+
|
|
|
+```js
|
|
|
+test('dedicated presign list wires orderStatus dropdown without reset on mobile', () => {
|
|
|
+ const presignList = source('../views/market/presign/PresignOrderList.vue')
|
|
|
+ const styles = source('../styles/market.css')
|
|
|
+
|
|
|
+ assert.match(presignList, /v-model="orderStatus"/)
|
|
|
+ assert.match(presignList, /buildPresignListParams/)
|
|
|
+ assert.match(presignList, /orderStatusOptions/)
|
|
|
+ assert.match(presignList, /van-dropdown-menu/)
|
|
|
+ assert.doesNotMatch(presignList, /resetFilters/)
|
|
|
+ assert.doesNotMatch(presignList, />重置</)
|
|
|
+ assert.match(styles, /\.presign-order-page__filter-row\s*\{/)
|
|
|
+ assert.match(styles, /\.presign-order-page__filter-row\s+\.van-dropdown-menu__bar/)
|
|
|
+ assert.doesNotMatch(styles, /\.presign-order-page__filter-row\s+\.van-button\s*\{/)
|
|
|
+})
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 2: 跑测试确认失败**
|
|
|
+
|
|
|
+Run:
|
|
|
+
|
|
|
+```bash
|
|
|
+cd /Users/wuzilong/work/00code/zkxw/mobile-oa-h5 && node --test src/market/mobile-parity-ui.test.js
|
|
|
+```
|
|
|
+
|
|
|
+Expected: FAIL — 仍匹配到 `resetFilters` / `>重置<`,且样式尚未出现 `.van-dropdown-menu__bar` 规则(或仍有 `.van-button` 规则)。
|
|
|
+
|
|
|
+- [ ] **Step 3: Commit(仅测试)**
|
|
|
+
|
|
|
+```bash
|
|
|
+git add mobile-oa-h5/src/market/mobile-parity-ui.test.js
|
|
|
+git commit -m "$(cat <<'EOF'
|
|
|
+test(mobile-oa-h5): expect JD-style presign status filter without reset
|
|
|
+
|
|
|
+EOF
|
|
|
+)"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 2: 去掉重置按钮与 `resetFilters`
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `mobile-oa-h5/src/views/market/presign/PresignOrderList.vue`
|
|
|
+
|
|
|
+- [ ] **Step 1: 更新模板筛选区**
|
|
|
+
|
|
|
+将搜索下方筛选行改为仅保留下拉(无重置按钮):
|
|
|
+
|
|
|
+```vue
|
|
|
+ <div class="presign-order-page__filter-row">
|
|
|
+ <van-dropdown-menu active-color="#0a9f6d">
|
|
|
+ <van-dropdown-item
|
|
|
+ v-model="orderStatus"
|
|
|
+ :options="orderStatusOptions"
|
|
|
+ @change="reload"
|
|
|
+ />
|
|
|
+ </van-dropdown-menu>
|
|
|
+ </div>
|
|
|
+```
|
|
|
+
|
|
|
+- [ ] **Step 2: 删除 `resetFilters` 函数**
|
|
|
+
|
|
|
+删除:
|
|
|
+
|
|
|
+```js
|
|
|
+function resetFilters() {
|
|
|
+ keyword.value = ''
|
|
|
+ orderStatus.value = ''
|
|
|
+ return reload()
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+保留 `keyword`、`orderStatus`、`orderStatusOptions`、`reload`;搜索框 `@clear="reload"` 不变。
|
|
|
+
|
|
|
+- [ ] **Step 3: Commit**
|
|
|
+
|
|
|
+```bash
|
|
|
+git add mobile-oa-h5/src/views/market/presign/PresignOrderList.vue
|
|
|
+git commit -m "$(cat <<'EOF'
|
|
|
+fix(mobile-oa-h5): remove reset button from presign list filters
|
|
|
+
|
|
|
+EOF
|
|
|
+)"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 3: 京东式左侧轻量下拉样式
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `mobile-oa-h5/src/styles/market.css`(约 `.presign-order-page__filter-row` 一段)
|
|
|
+
|
|
|
+- [ ] **Step 1: 替换筛选行样式**
|
|
|
+
|
|
|
+将现有:
|
|
|
+
|
|
|
+```css
|
|
|
+.presign-order-page__filter-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(0, 1fr) auto;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu,
|
|
|
+.presign-order-page__filter-row .van-button {
|
|
|
+ min-height: 44px;
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-button {
|
|
|
+ min-width: 84px;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+替换为:
|
|
|
+
|
|
|
+```css
|
|
|
+.presign-order-page__filter-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 2px;
|
|
|
+ margin-left: -4px;
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu {
|
|
|
+ width: auto;
|
|
|
+ height: 40px;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu__bar {
|
|
|
+ height: 40px;
|
|
|
+ box-shadow: none;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu__item {
|
|
|
+ flex: none;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu__title {
|
|
|
+ padding: 0;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--presign-text);
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu__title::after {
|
|
|
+ margin-top: -2px;
|
|
|
+ border-color: transparent transparent currentColor currentColor;
|
|
|
+ opacity: 0.7;
|
|
|
+}
|
|
|
+
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu__title--active,
|
|
|
+.presign-order-page__filter-row .van-dropdown-menu__title--down {
|
|
|
+ color: var(--presign-primary);
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+说明:去掉描边盒与右侧按钮占位;标题左对齐、字号偏小,接近京东筛选条。
|
|
|
+
|
|
|
+- [ ] **Step 2: 跑测试确认通过**
|
|
|
+
|
|
|
+Run:
|
|
|
+
|
|
|
+```bash
|
|
|
+cd /Users/wuzilong/work/00code/zkxw/mobile-oa-h5 && node --test src/market/mobile-parity-ui.test.js
|
|
|
+```
|
|
|
+
|
|
|
+Expected: PASS(全部用例,尤其 `dedicated presign list wires orderStatus dropdown without reset on mobile`)
|
|
|
+
|
|
|
+- [ ] **Step 3: Commit**
|
|
|
+
|
|
|
+```bash
|
|
|
+git add mobile-oa-h5/src/styles/market.css
|
|
|
+git commit -m "$(cat <<'EOF'
|
|
|
+style(mobile-oa-h5): JD-style left status dropdown on presign list
|
|
|
+
|
|
|
+EOF
|
|
|
+)"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 4: 手工验收
|
|
|
+
|
|
|
+- [ ] **Step 1: 本地打开预签约列表**
|
|
|
+
|
|
|
+市场专员或地区经理进入【预签约订单】:
|
|
|
+
|
|
|
+1. 搜索框下仅有「全部状态 ▾」,无「重置」
|
|
|
+2. 点开可选草稿 / 进行中 / 已转正式 / 已作废
|
|
|
+3. 选中后列表刷新;选「全部状态」恢复全部
|
|
|
+4. 搜索 clear 仍可清空 keyword 并刷新
|
|
|
+
|
|
|
+- [ ] **Step 2: 若验收通过,无需额外提交**(代码已在 Task 2–3 提交)
|
|
|
+
|
|
|
+若样式与 demo B 偏差较大,微调 `market.css` 后追加 commit:
|
|
|
+
|
|
|
+```bash
|
|
|
+git add mobile-oa-h5/src/styles/market.css
|
|
|
+git commit -m "$(cat <<'EOF'
|
|
|
+style(mobile-oa-h5): tweak presign status dropdown spacing
|
|
|
+
|
|
|
+EOF
|
|
|
+)"
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Spec coverage checklist
|
|
|
+
|
|
|
+| Spec 要求 | Task |
|
|
|
+|-----------|------|
|
|
|
+| 去掉重置按钮 | Task 2 |
|
|
|
+| 京东式左侧轻量下拉 | Task 3 |
|
|
|
+| 选项与筛选语义不变 | Task 2(保留 options / reload) |
|
|
|
+| 更新契约测试 | Task 1 |
|
|
|
+| 不改其他市场模块 / 后端 | 全计划未触碰 |
|
|
|
+
|
|
|
+## Self-review notes
|
|
|
+
|
|
|
+- 无 TBD / 占位步骤
|
|
|
+- 测试命令与期望失败/通过条件明确
|
|
|
+- Vant 类名以 Vant 4 为准:`van-dropdown-menu__bar` / `__title` / `__title--active`
|