From 52d8fdefc85591abe9ee6c8cd382f91698013ebf Mon Sep 17 00:00:00 2001
From: tuqin <tuqin@tuqin.cn>
Date: 星期三, 14 十月 2026 11:01:59 +0800
Subject: [PATCH] feat(dashboard): 首页改为「人力资源+售后管理」模块入口
---
src/views/dashboard/analytics/modules/biz-cards.vue | 170 +++++++++-----------------------------------------------
1 files changed, 28 insertions(+), 142 deletions(-)
diff --git a/src/views/dashboard/analytics/modules/biz-cards.vue b/src/views/dashboard/analytics/modules/biz-cards.vue
index 95a9e63..82ed984 100644
--- a/src/views/dashboard/analytics/modules/biz-cards.vue
+++ b/src/views/dashboard/analytics/modules/biz-cards.vue
@@ -1,54 +1,33 @@
<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
-import { CountTo } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { Col, Row } from 'ant-design-vue';
-import { getPurchaseOrderPage } from '#/api/erp/purchase/order';
-import { getSaleOrderPage } from '#/api/erp/sale/order';
-import { getMaterialStockPage } from '#/api/mes/wm/materialstock';
-import { getTaskTodoPage } from '#/api/bpm/task';
-
defineOptions({ name: 'DashboardBizCards' });
const emit = defineEmits<{
- navigate: [name: string];
+ navigate: [path: string];
}>();
-const purchaseCount = ref(0);
-const saleCount = ref(0);
-const stockCount = ref(0);
-const bpmTodoCount = ref(0);
-
-async function loadPurchase() {
- try {
- const result = await getPurchaseOrderPage({ pageNo: 1, pageSize: 1 });
- purchaseCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
+interface ModuleCard {
+ id: string;
+ title: string;
+ desc: string;
+ path: string;
+ icon: string;
+ gradient: string;
+ shadow: string;
+ textColor: string;
}
-async function loadSale() {
- try {
- const result = await getSaleOrderPage({ pageNo: 1, pageSize: 1 });
- saleCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
-}
-
-async function loadStock() {
- try {
- const result = await getMaterialStockPage({ pageNo: 1, pageSize: 1 });
- stockCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
-}
-
-async function loadBpmTodo() {
- try {
- const result = await getTaskTodoPage({ pageNo: 1, pageSize: 1 });
- bpmTodoCount.value = result.total ?? 0;
- } catch { /* 鏃犳潈闄愭垨鎺ュ彛寮傚父 */ }
-}
+/** 鍞悗绠＄悊妯″潡鍏ュ彛 */
+const cards: ModuleCard[] = [
+ { id: 'ticket', title: '鍞悗宸ュ崟', desc: '鍞悗绠＄悊', path: '/aftersales/ticket', icon: 'lucide:wrench', gradient: 'from-cyan-500 to-teal-400', shadow: 'shadow-cyan-500/25', textColor: 'text-cyan-600 dark:text-cyan-400' },
+ { id: 'return', title: '閫�璐х敵璇�', desc: '鍞悗绠＄悊', path: '/aftersales/return', icon: 'lucide:undo-2', gradient: 'from-pink-500 to-rose-400', shadow: 'shadow-pink-500/25', textColor: 'text-pink-600 dark:text-pink-400' },
+ { id: 'problem', title: '闂搴�', desc: '鍞悗绠＄悊', path: '/aftersales/problem', icon: 'lucide:book-open', gradient: 'from-amber-500 to-yellow-400', shadow: 'shadow-amber-500/25', textColor: 'text-amber-600 dark:text-amber-400' },
+];
/** 3D 鍊炬枩 */
interface TiltState { x: number; y: number }
@@ -73,122 +52,29 @@
transition: t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
};
}
-
-onMounted(() => {
- loadPurchase();
- loadSale();
- loadStock();
- loadBpmTodo();
-});
</script>
<template>
<Row :gutter="16">
- <!-- 閲囪喘璁㈠崟 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
+ <Col v-for="c in cards" :key="c.id" :lg="8" :md="8" :sm="12" :xl="8" :xs="24" class="mb-4">
<div
class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('purchase')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'purchase')"
- @mouseleave="onMouseLeave('purchase')"
- @click="emit('navigate', 'ErpPurchaseOrder')"
+ :style="tiltStyle(c.id)"
+ @mousemove="(e: MouseEvent) => onMouseMove(e, c.id)"
+ @mouseleave="onMouseLeave(c.id)"
+ @click="emit('navigate', c.path)"
>
<div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-cyan-500 to-teal-400 shadow-lg shadow-cyan-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:shopping-cart" />
+ <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br transition-transform duration-300 group-hover:scale-110" :class="[c.gradient, c.shadow]">
+ <IconifyIcon class="size-6 text-white" :icon="c.icon" />
</div>
<div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">閲囪喘璁㈠崟</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-cyan-600 dark:text-cyan-400" :end-val="purchaseCount" :duration="1200" />
- <span class="text-xs text-gray-400">绗�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">ERP 閲囪喘绠＄悊</div>
+ <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">{{ c.desc }}</div>
+ <div class="text-2xl font-bold leading-tight" :class="c.textColor">{{ c.title }}</div>
+ <div class="mt-1 text-xs text-gray-400">鐐瑰嚮杩涘叆</div>
</div>
</div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-cyan-500/5 to-teal-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-cyan-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 閿�鍞鍗� -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('sale')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'sale')"
- @mouseleave="onMouseLeave('sale')"
- @click="emit('navigate', 'ErpSaleOrder')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-pink-500 to-rose-400 shadow-lg shadow-pink-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:trending-up" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">閿�鍞鍗�</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-pink-600 dark:text-pink-400" :end-val="saleCount" :duration="1200" />
- <span class="text-xs text-gray-400">绗�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">ERP 閿�鍞鐞�</div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-pink-500/5 to-rose-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
<div class="absolute -right-6 -top-6 size-24 rounded-full bg-pink-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- 鐗╂枡搴撳瓨 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('stock')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'stock')"
- @mouseleave="onMouseLeave('stock')"
- @click="emit('navigate', 'MesWmMaterialStock')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-yellow-400 shadow-lg shadow-amber-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:package-search" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">鐗╂枡搴撳瓨</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-amber-600 dark:text-amber-400" :end-val="stockCount" :duration="1200" />
- <span class="text-xs text-gray-400">鏉�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">MES 搴撳瓨鍙拌处</div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-amber-500/5 to-yellow-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-amber-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
- </div>
- </Col>
-
- <!-- BPM 寰呭姙 -->
- <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
- <div
- class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
- :style="tiltStyle('bpm')"
- @mousemove="(e: MouseEvent) => onMouseMove(e, 'bpm')"
- @mouseleave="onMouseLeave('bpm')"
- @click="emit('navigate', 'BpmTaskTodo')"
- >
- <div class="relative z-10 flex items-center gap-4 p-5">
- <div class="flex size-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-red-500 to-rose-400 shadow-lg shadow-red-500/25 transition-transform duration-300 group-hover:scale-110">
- <IconifyIcon class="size-6 text-white" icon="lucide:clipboard-check" />
- </div>
- <div class="min-w-0 flex-1">
- <div class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">鎴戠殑寰呭姙</div>
- <div class="flex items-baseline gap-1">
- <CountTo class="text-2xl font-bold leading-tight text-red-600 dark:text-red-400" :end-val="bpmTodoCount" :duration="1200" />
- <span class="text-xs text-gray-400">椤�</span>
- </div>
- <div class="mt-1 text-xs text-gray-400">BPM 寰呭鎵�</div>
- </div>
- </div>
- <div class="absolute inset-0 -z-0 bg-gradient-to-br from-red-500/5 to-rose-500/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
- <div class="absolute -right-6 -top-6 size-24 rounded-full bg-red-400/10 blur-xl transition-all duration-300 group-hover:scale-150" />
</div>
</Col>
</Row>
@@ -213,6 +99,6 @@
box-shadow:
0 4px 24px rgba(0,0,0,0.3),
0 1px 4px rgba(0,0,0,0.2),
- inset 0 1px 0 rgba(255,255,255,0.04);
+ inset 0 1px 0 rgba(255,255,255,0.05);
}
</style>
--
Gitblit v1.9.3