direv/admin_new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(F006-W3xC): P2 升级 - 4 个无后端页 改 redirect 到真数据\n\n用户反馈 P2 占位页只列字段不能交付. 重探测后端发现 /supplier/good/search 返 16080 行真数据, 重新设计.\n\n改动:\n- /supplier/good 走 /supplier/good/search 真数据 (16080 行, 10 字段: id/title/icon/brandName/3 级分类/onShelf/type/remark), 含客户端 title 模糊筛选 + 分页 + 封面缩略图\n- /product/shop redirect to /supplier/good (后端 404)\n- /supplier/servicegood redirect to /supplier/good (后端 404)\n- /api/feedback redirect to /other/operateguide (后端 404, 内容列表是真数据页)\n- 3 菜单项 path 改 redirect 后目标, label 加 重定向提示 提示用户合并关系\n- 占位 view 文件保留 (src/modules/{product/shop,supplier/servicegood,api/feedback}/*.vue), 未来后端实现时升级\n\n铁律: 任何占位必须真能用. P0/P1 简单 el-result OK 但要看真数据, P2 用 redirect 模式更友好. 后续 P3+P4 推进前先全量重探测 API, 能 redirect 就 redirect, 不能就升级真数据或保留极简 el-result.

Browse Source
This commit is contained in:
Sisyphus 2026-07-05 10:31:13 +08:00
parent 932a0520f1
commit d842182b17
3 changed files with 135 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/config/menu-labels.ts
View File

@ -80,7 +80,7 @@ export const MENU_LABELS: MenuLabel[] = [
// ===== 供应商模块 =====
{ url: 'supplier/good', label: '实物商品', icon: 'Box', path: '/supplier/good', sort: 300 },
{ url: 'supplier/servicegood', label: '服务商品', icon: 'Box', path: '/supplier/service', sort: 301 },
{ url: 'supplier/servicegood', label: '服务商品(→实物商品)', icon: 'Box', path: '/supplier/good', sort: 301 },
{ url: 'supplier/activityzone', label: '活动专区', icon: 'Promotion', path: '/supplier/activity', sort: 302 },
{ url: 'supplier/coupon', label: '优惠券', icon: 'Ticket', path: '/supplier/coupon', sort: 303 },
{ url: 'supplier/promoter', label: '推广返佣', icon: 'UserFilled', path: '/supplier/promoter', sort: 304 },
@ -107,7 +107,7 @@ export const MENU_LABELS: MenuLabel[] = [
// ===== API 模块 =====
{ url: 'api/lunbo', label: '轮播管理', icon: 'Picture', path: '/api/lunbo', sort: 600 },
{ url: 'api/feedback', label: '意见反馈', icon: 'ChatLineRound', path: '/api/feedback', sort: 601 },
{ url: 'api/feedback', label: '意见反馈(→内容列表)', icon: 'ChatLineRound', path: '/other/operateguide', sort: 601 },
{ url: 'api/help', label: '帮助中心', icon: 'Notebook', path: '/api/help', sort: 602 },
// ===== 其它模块(老版本"其它"分组) =====
@ -156,7 +156,7 @@ export const MENU_LABELS: MenuLabel[] = [
{ url: 'sys/excel', label: 'Excel导出', icon: 'Download', path: '/sys/excel', sort: 417 },
{ url: 'sys/charts', label: '图表示例', icon: 'TrendCharts', path: '/sys/charts', sort: 418 },
{ url: 'sys/product', label: '商品示例', icon: 'Box', path: '/sys/product', sort: 419 },
{ url: 'product/shop', label: '店铺管理', icon: 'Shop', path: '/product/shop', sort: 350 },
{ url: 'product/shop', label: '店铺管理(→商品管理)', icon: 'Shop', path: '/supplier/good', sort: 350 },
{ url: 'orderMake/index-admin', label: '开单(管理端)', icon: 'Edit', path: '/order/create-admin', sort: 6 },
{ url: 'villageManage/farmerList', label: '农户列表', icon: 'User', path: '/village/farmer', sort: 7 },
{ url: 'villageManage/resourceList', label: '资源列表', icon: 'List', path: '/village/resource', sort: 8 },

185
src/modules/supplier/good/GoodListView.vue
View File

@ -1,86 +1,159 @@
<script setup lang="ts">
/**
* F006 商品管理 - W3.x C P2
* 后端 /supplier/good/page 端点状态: 404 / 400 (端点不存在或参数错)
* 走 el-result 优雅占位 + 展示参考老 /vue 后台的预期字段
* F006 商品管理 - W3.x C P2 升级
* 走 /supplier/good/search 真 API (返 {total, list}, 16080 行)
* 字段: id/title/icon/brandName/firstCategoryName/secondCategoryName/thirdCategoryName/onShelf/type/remark
* 后端限制: 不支持 server-side 筛选 (title/checkStatus 参数被忽略), 客户端按 title 模糊筛选
*/
import { onMounted, ref } from 'vue'
import { onMounted, ref, computed } from 'vue'
import { httpGet } from '@/utils/request'
import DataTable from '@/components/DataTable/DataTable.vue'
interface FieldSpec { key: string; label: string; desc: string }
interface Good {
id: string
title: string
icon: string | null
brandName: string | null
firstCategoryName: string | null
secondCategoryName: string | null
thirdCategoryName: string | null
onShelf: number
type: number
remark: string | null
raw: any
}
const status = ref<'checking' | '404' | '200' | 'error'>('checking')
const errorMsg = ref('')
const ONSHELF_MAP: Record<number, { label: string; type: string }> = {
0: { label: '未铺货', type: 'info' },
1: { label: '已铺货', type: 'success' }
}
const expectedFields: FieldSpec[] = [
{ key: 'icon', label: '封面', desc: '图片缩略图 40x40' },
{ key: 'title', label: '商品名称', desc: '商品标题' },
{ key: 'enterpriseName', label: '供应商', desc: '所属企业名' },
{ key: 'firstCategoryName', label: '一级分类', desc: '一级分类名' },
{ key: 'secondCategoryName', label: '二级分类', desc: '二级分类名' },
{ key: 'thirdCategoryName', label: '三级分类', desc: '三级分类名' },
{ key: 'brandName', label: '品牌', desc: '品牌名' },
{ key: 'unitName', label: '单位', desc: '计量单位' },
{ key: 'createDate', label: '申请时间', desc: '提交时间' },
{ key: 'onShelf', label: '铺货', desc: '0=未铺货/1=已铺货' },
{ key: 'checkOpinion', label: '审核意见', desc: '审核备注' },
{ key: 'checkStatus', label: '状态', desc: '1=待审核/2=出售中/3=已驳回' }
]
const TYPE_MAP: Record<number, string> = {
1: '实物商品',
2: '服务商品'
}
onMounted(async () => {
const list = ref<Good[]>([])
const total = ref(0)
const loading = ref(false)
const error = ref<string | null>(null)
const page = ref(1)
const limit = ref(20)
const filterKw = ref('')
async function load() {
loading.value = true
error.value = null
try {
const r: any = await httpGet('/supplier/good/page', { page: 1, limit: 1 })
if (r?.code === 0) status.value = '200'
else { status.value = 'error'; errorMsg.value = r?.msg || '未知错误' }
const data: any = await httpGet<{ total: number; list: any[] }>('/supplier/good/search', {
page: page.value,
limit: limit.value
})
list.value = (data?.list || []).map((it: any) => ({
id: String(it.id),
title: it.title || '--',
icon: it.icon || null,
brandName: it.brandName || null,
firstCategoryName: it.firstCategoryName || null,
secondCategoryName: it.secondCategoryName || null,
thirdCategoryName: it.thirdCategoryName || null,
onShelf: it.onShelf ?? 0,
type: it.type ?? 1,
remark: it.remark || null,
raw: it
}))
total.value = Number(data?.total || 0)
} catch (e: any) {
if (e?.response?.status === 404 || e?.message?.includes('404')) {
status.value = '404'
errorMsg.value = '后端 API 未实现 (/supplier/good/page 返回 404)'
} else {
status.value = 'error'
errorMsg.value = e?.msg || e?.message || '请求失败'
}
error.value = e?.msg || e?.message || '加载失败'
list.value = []
total.value = 0
} finally {
loading.value = false
}
}
const filtered = computed(() => {
const kw = filterKw.value.trim().toLowerCase()
if (!kw) return list.value
return list.value.filter(it => (it.title || '').toLowerCase().includes(kw))
})
function onSearch() { page.value = 1; load() }
function onReset() { filterKw.value = ''; page.value = 1; load() }
function onPageChange(p: number) { page.value = p; load() }
function onLimitChange(l: number) { limit.value = l; page.value = 1; load() }
onMounted(load)
</script>
<template>
<div class="rr-page">
<div class="rr-page-header">
<h2 class="rr-page-title">商品管理</h2>
<p class="rr-page-sub">实物商品审核管理 - 数据接口未实现, 占位页展示预期字段</p>
<p class="rr-page-sub">实物商品审核管理(共 {{ total }} 个, 当前页 {{ filtered.length }} 个)</p>
</div>
<div class="rr-card rr-status-card">
<el-result
:icon="status === '200' ? 'success' : 'warning'"
:title="status === '200' ? 'API 已就绪' : '后端 API 未实现'"
:sub-title="status === '200' ? '商品管理 数据接口已通, 可正常加载' : (errorMsg || '请联系后端实现 /supplier/good/page 接口')"
<div class="rr-filters">
<el-input v-model="filterKw" placeholder="按商品名称筛选" clearable class="rr-filter-input" size="default" @keyup.enter="onSearch" />
<el-button class="rr-btn-secondary" size="default" @click="onSearch">查询</el-button>
<el-button class="rr-btn-secondary" size="default" @click="onReset">重置</el-button>
</div>
<div class="rr-card">
<DataTable
:columns="[
{ prop: 'id', label: 'ID', width: 80 },
{ prop: 'icon', label: '封面', width: 80, slot: 'icon' },
{ prop: 'title', label: '商品名称', minWidth: 240 },
{ prop: 'brandName', label: '品牌', width: 140 },
{ prop: 'firstCategoryName', label: '一级分类', width: 140 },
{ prop: 'secondCategoryName', label: '二级分类', width: 140 },
{ prop: 'thirdCategoryName', label: '三级分类', width: 140 },
{ prop: 'type', label: '类型', width: 100, slot: 'type' },
{ prop: 'onShelf', label: '铺货', width: 100, slot: 'onShelf' },
{ prop: 'remark', label: '备注', minWidth: 200, slot: 'remark' }
]"
:data="filtered"
:loading="loading"
:total="total"
:page="page"
:limit="limit"
:show-pagination="true"
:error="error"
empty-text="暂无商品"
borderless
row-key="id"
@page-change="onPageChange"
@limit-change="onLimitChange"
>
<template #extra>
<el-tag v-if="status === 'checking'" type="info">检测中...</el-tag>
<el-tag v-else-if="status === '404'" type="warning">404 Not Found</el-tag>
<el-tag v-else-if="status === '200'" type="success">200 OK</el-tag>
<el-tag v-else type="danger">Error</el-tag>
<template #icon="{ row }">
<el-image v-if="row.icon" :src="row.icon" style="width: 40px; height: 40px; border-radius: 4px" fit="cover" />
<span v-else class="rr-no-img">无图</span>
</template>
</el-result>
</div>
<div class="rr-card rr-fields-card">
<h3 class="rr-section-title">预期字段 (参考老 /vue 后台)</h3>
<el-table :data="expectedFields" border size="small" :show-header="true" empty-text="无字段">
<el-table-column prop="key" label="字段名 (key)" width="220" />
<el-table-column prop="label" label="表头 (label)" width="180" />
<el-table-column prop="desc" label="说明" />
</el-table>
<template #type="{ row }">
<el-tag size="small" effect="plain">{{ TYPE_MAP[row.type] || `类型${row.type}` }}</el-tag>
</template>
<template #onShelf="{ row }">
<el-tag :type="(ONSHELF_MAP[row.onShelf]?.type as any) || 'info'" size="small" effect="light">
{{ ONSHELF_MAP[row.onShelf]?.label || `状态${row.onShelf}` }}
</el-tag>
</template>
<template #remark="{ row }">
<span class="rr-remark">{{ row.remark || '--' }}</span>
</template>
</DataTable>
</div>
</div>
</template>
<style scoped lang="scss">
.rr-page { max-width: 1400px; }
.rr-page-header { margin-bottom: 20px; }
.rr-page-header { margin-bottom: 16px; }
.rr-page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; }
.rr-page-sub { color: var(--ink-3); font-size: 13px; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.rr-status-card { padding: 20px 20px 8px; }
.rr-section-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.rr-filters { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
.rr-filter-input { width: 280px; }
.rr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rr-no-img { color: var(--ink-3); font-size: 12px; }
.rr-remark { color: var(--ink-2); font-size: 12.5px; }
</style>

12
src/router/index.ts
View File

@ -281,9 +281,7 @@ const routes: RouteRecordRaw[] = [
// groupbuy + seckill 走真数据, 其它 4 个后端未实现走占位
{
path: '/product/shop',
name: 'ShopList',
component: () => import('@/modules/product/shop/ShopListView.vue'),
meta: { title: '商品店铺' }
redirect: '/supplier/good'
},
{
path: '/supplier/good',
@ -293,9 +291,7 @@ const routes: RouteRecordRaw[] = [
},
{
path: '/supplier/servicegood',
name: 'ServiceGoodList',
component: () => import('@/modules/supplier/servicegood/ServiceGoodListView.vue'),
meta: { title: '服务商品' }
redirect: '/supplier/good'
},
{
path: '/other/groupbuy',
@ -311,9 +307,7 @@ const routes: RouteRecordRaw[] = [
},
{
path: '/api/feedback',
name: 'FeedbackList',
component: () => import('@/modules/api/feedback/FeedbackListView.vue'),
meta: { title: '意见反馈' }
redirect: '/other/operateguide'
},
// W3.1 通用通配占位 — 覆盖菜单 70 个 url(两层路径,如 /admin/user/finance/recharge)