feat(shop): 支持Dashboard订单总数点击跳转指定tab

- 修改Dashboard中订单总数和总营业额跳转链接,默认携带tab参数
- 订单总数点击跳转至/shop/shopOrder?tab=all页面
- 待发货订单跳转至/shop/shopOrder?tab=undelivered,退款申请跳转至?tab=refunded
- shopOrder页面根据路由查询参数初始化激活tab,确保页面首次加载可正确显示对应订单列表
- 为无效或缺省tab参数设置默认值undelivered
- 简化订单页面tab切换逻辑复用公共状态映射函数
This commit is contained in:
2026-07-15 02:35:01 +08:00
parent 6350a9b5a9
commit 57b584df1b
3 changed files with 18 additions and 6 deletions

View File

@@ -5,3 +5,9 @@
- 根因:`activeKey` 默认为 `'undelivered'`,但 `datasource` 函数只设了 `where.type = 0`,没有设 `statusFilter``statusFilter` 只在用户点击 tab 触发 `onTabs` 时才设置。所以页面初次加载时查的是全部订单而非待发货订单。
- 修复:提取 `getStatusFilterByTab(key)` 公共映射函数,在 `datasource` 中当 `where.statusFilter` 未设置时从 `activeKey` 自动推导。`onTabs` 也简化为复用同一函数。
- 文件:`src/views/shop/shopOrder/index.vue`
## Dashboard 订单总数点击跳转支持指定 tab
- Dashboard 中"订单总数"/"总营业额"跳转链接改为 `/shop/shopOrder?tab=all`"待发货订单"改为 `?tab=undelivered`"退款申请"改为 `?tab=refunded`
- shopOrder 页面读取 `route.query.tab` 初始化 `activeKey`,无效值回退到 `'undelivered'`
- 文件:`src/views/shop/dashboard/index.vue``src/views/shop/shopOrder/index.vue`

View File

@@ -282,8 +282,8 @@ const loading = computed(() => siteLoading.value || statisticsLoading.value);
// 核心统计数据使用computed确保响应式更新
const coreStats = computed(() => [
{ icon: '🏸', label: '用户总数', value: userCount.value || 0, desc: '注册用户', color: 'blue', to: '/system/user' },
{ icon: '📦', label: '订单总数', value: orderCount.value || 0, desc: '全部订单', color: 'orange', to: '/shop/shopOrder' },
{ icon: '💰', label: '总营业额', value: totalSales.value || 0, desc: '元', color: 'purple', to: '/shop/shopOrder' },
{ icon: '📦', label: '订单总数', value: orderCount.value || 0, desc: '全部订单', color: 'orange', to: '/shop/shopOrder?tab=all' },
{ icon: '💰', label: '总营业额', value: totalSales.value || 0, desc: '元', color: 'purple', to: '/shop/shopOrder?tab=all' },
{ icon: '⏱️', label: '运行天数', value: runDays.value || 0, desc: '系统运行', color: 'green', to: '' },
]);
@@ -294,8 +294,8 @@ const couponUsedCount = computed(() => statisticsStore.safeCouponUsedCount);
// 待处理事项使用computed确保响应式更新
const todoItems = computed(() => [
{ label: '待发货订单', value: pendingShipmentCount.value, to: '/shop/shopOrder', tagColor: 'blue', dotColor: 'dot-blue', urgent: pendingShipmentCount.value > 0 },
{ label: '退款申请', value: pendingRefundCount.value, to: '/shop/shopOrder', tagColor: 'orange', dotColor: 'dot-orange', urgent: pendingRefundCount.value > 0 },
{ label: '待发货订单', value: pendingShipmentCount.value, to: '/shop/shopOrder?tab=undelivered', tagColor: 'blue', dotColor: 'dot-blue', urgent: pendingShipmentCount.value > 0 },
{ label: '退款申请', value: pendingRefundCount.value, to: '/shop/shopOrder?tab=refunded', tagColor: 'orange', dotColor: 'dot-orange', urgent: pendingRefundCount.value > 0 },
// { label: '优惠券使用', value: couponUsedCount.value, to: '/market/coupon', tagColor: 'cyan', dotColor: 'dot-cyan', urgent: false },
]);

View File

@@ -374,6 +374,7 @@
<script lang="ts" setup>
import { createVNode, ref } from 'vue';
import { useRoute } from 'vue-router';
import type { EleProTable } from 'ele-admin-pro';
import type {
DatasourceFunction,
@@ -428,8 +429,13 @@
const showDelivery = ref(false);
// 加载状态
const loading = ref(true);
// 激活的标签
const activeKey = ref<string>('undelivered');
// 激活的标签(支持从路由参数初始化,如 /shop/shopOrder?tab=all
const route = useRoute();
const validTabs = ['all', 'undelivered', 'unreceived', 'completed', 'refunded', 'cancelled'];
const tabFromQuery = route.query.tab as string;
const activeKey = ref<string>(
validTabs.includes(tabFromQuery) ? tabFromQuery : 'undelivered'
);
// ============ 新订单提醒 ============
const { enabled: notifyEnabled, toggle: onNotifyToggle, testNotify: onTestNotify } = useOrderNotify({