frontend: 景区/游玩项目 list 加季节标签列 (后端 seasons[] 字段早就返了)
mmg: 后端 PR #2229/#2234 已部署, /admin/scenic/spots + /admin/activity/items records 已含 seasons 字段。但前端 list 表格没显示季节列。 精确改法已给: - 景区列表 D:/work2/hl-ui/src/views/resource/scenic/index.vue line 417-456 columns 加 '季节' 列 - 游玩项目列表 D:/work2/hl-ui/src/views/resource/playservice/index.vue line 495 同款 - 渲染逻辑可读字典 product_season (含 4 季 dictValue+dictLabel+icon+color) notify @mmg
这个提交包含在:
父节点
65f019ddb5
当前提交
f957215002
@ -0,0 +1,122 @@
|
||||
# [前端] 景区/游玩项目 list 列表加"季节"标签列
|
||||
|
||||
> **服务**: 前端 hl-ui (管理端)
|
||||
> **后端 PR**: 无新 PR (能力 PR #2229/#2234 已上线)
|
||||
> **日期**: 2026-05-14
|
||||
> **影响范围**: 管理端 资源管理 → 景区管理 + 游玩项目管理 列表表格
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 关键变化
|
||||
|
||||
后端 `/admin/scenic/spots` 和 `/admin/activity/items` 列表 records 已包含 `seasons: ["spring","summer","autumn","winter"]` 字段(PR #2229/#2234 已上线测试服真测 PASS),但前端 list 表格**没有显示季节列**。
|
||||
|
||||
需要加 "季节" 标签列,4 季用色块展示,未配置的季节灰色 disabled。
|
||||
|
||||
---
|
||||
|
||||
## 后端字段证据
|
||||
|
||||
```bash
|
||||
GET /admin/scenic/spots?page=1&pageSize=3&status=1
|
||||
→ records[0].seasons = ["spring","summer","autumn","winter"] // 中俄边境公路 4 季全配
|
||||
→ records[1].seasons = ["spring","autumn"] // 只配了春秋两季
|
||||
→ records[2].seasons = [] // 未配任何季节
|
||||
```
|
||||
|
||||
字典 `product_season` 已含 4 季 dictValue + dictLabel + icon + color,前端直接读字典渲染色块(与产品编辑页"季节标签"组件一致)。
|
||||
|
||||
---
|
||||
|
||||
## 精确改法
|
||||
|
||||
### 1. 景区列表
|
||||
|
||||
**文件**: `D:/work2/hl-ui/src/views/resource/scenic/index.vue` line 417-456
|
||||
|
||||
在 `columns` 数组里加一列(建议放在"标签"列后面):
|
||||
|
||||
```js
|
||||
const columns = [
|
||||
{ type: 'selection', width: 50 },
|
||||
{ title: '景区名称', key: 'name', width: 220, render: ... },
|
||||
{ title: '城市', key: 'cityName', width: 100 },
|
||||
{ title: '标签', key: 'tags', width: 160, render: ... },
|
||||
// === 新增季节列 ===
|
||||
{
|
||||
title: '季节',
|
||||
key: 'seasons',
|
||||
width: 140,
|
||||
render: (row) => renderSeasonTags(row.seasons), // 复用产品编辑页弹窗的 SeasonTags 组件
|
||||
},
|
||||
{ title: '状态', key: 'status', width: 80, render: ... },
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
### 2. 游玩项目列表
|
||||
|
||||
**文件**: `D:/work2/hl-ui/src/views/resource/playservice/index.vue` line 495
|
||||
|
||||
同款加列。
|
||||
|
||||
### 3. 复用现有 SeasonTags 组件
|
||||
|
||||
弹窗 `ResourcePickerModal.vue` 应该已有渲染 4 季色块的逻辑(弹窗里景区右侧"春 夏 秋 冬"已配/未配色块),直接抽组件复用。
|
||||
|
||||
如果还没抽,可参考字典 `product_season` 渲染:
|
||||
```js
|
||||
const seasonDict = dictStore.get('product_season')
|
||||
// seasonDict = [
|
||||
// { dictValue: 'spring', dictLabel: '春', color: '#5A8C3C', icon: '<svg>...' },
|
||||
// { dictValue: 'summer', dictLabel: '夏', color: '...' },
|
||||
// ...
|
||||
// ]
|
||||
|
||||
function renderSeasonTags(seasons = []) {
|
||||
const set = new Set(seasons)
|
||||
return h('div', { style: 'display:flex;gap:4px' },
|
||||
seasonDict.map(s =>
|
||||
h('span', {
|
||||
style: {
|
||||
background: set.has(s.dictValue) ? s.color : '#e0e0e0',
|
||||
color: '#fff',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
opacity: set.has(s.dictValue) ? 1 : 0.5,
|
||||
}
|
||||
}, s.dictLabel)
|
||||
)
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
效果同产品编辑页弹窗的季节色块:已配的彩色,未配的灰色。
|
||||
|
||||
---
|
||||
|
||||
## 验证
|
||||
|
||||
改完后:
|
||||
- 景区列表 → 中俄边境公路(卡线)那行"季节"列显示 "春 夏 秋 冬" 4 个彩色色块
|
||||
- 中俄边境公路季节内容已配齐, 4 个色块都彩色高亮
|
||||
- 未配任何季节的景区, 4 个色块全灰
|
||||
|
||||
游玩项目同款。
|
||||
|
||||
---
|
||||
|
||||
## 不影响范围
|
||||
|
||||
- 仅前端表格列增加, 后端字段已就绪
|
||||
- 不影响其他列 / 操作按钮 / 弹窗 / 编辑页
|
||||
|
||||
---
|
||||
|
||||
## 相关后端 PR / 文档
|
||||
|
||||
- PR #2229 (Closes #2227): 景区列表加 seasons 字段
|
||||
- PR #2234 (Closes #2232): 游玩项目同款
|
||||
- 字典 `product_season`: GET /admin/dict/all 已含 4 季 + icon + color + remark
|
||||
- 相关 changelog: [14_frontend_admin_list_should_pass_seasons_param.md](./14_frontend_admin_list_should_pass_seasons_param.md) (弹窗补传 seasons 参数, 与本任务正交可独立做)
|
||||
正在加载...
x
在新工单中引用
屏蔽一个用户