<script lang="ts" setup>
|
import { computed, onMounted, ref } from 'vue';
|
|
import { CountTo } from '@vben/common-ui';
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Col, Row } from 'ant-design-vue';
|
|
import { getAttendanceExceptionPage } from '#/api/hrm/attendance/exception';
|
import { getEmployeePage } from '#/api/hrm/employee';
|
import { getLeavePage } from '#/api/hrm/leave';
|
import { getSalaryPaymentPage } from '#/api/hrm/salary/payment';
|
import { getItemReceiptPage } from '#/api/mes/wm/itemreceipt';
|
import { getMaterialStockPage } from '#/api/mes/wm/materialstock';
|
import { getProductIssuePage } from '#/api/mes/wm/productissue';
|
import { getWarehousePage } from '#/api/mes/wm/warehouse';
|
|
import { useHomeAccess } from '#/utils/use-home-access';
|
|
defineOptions({ name: 'DashboardWarehouseHrCards' });
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
/** 统计卡片定义：取数只调各自列表接口拿总数，菜单没开的卡不显示 */
|
interface StatCard {
|
/** 卡片标题 */
|
label: string;
|
/** 单位 */
|
unit: string;
|
/** 副标题：数据来源 */
|
hint: string;
|
icon: string;
|
/** 图标底色渐变（Tailwind） */
|
gradient: string;
|
/** 数值颜色（Tailwind） */
|
color: string;
|
/** 卡片归属的菜单（路由 name），关着就不用展示 */
|
menu: string;
|
/** 菜单对应的查询权限码，没有按钮权限的菜单留空 */
|
permission?: string;
|
/** 取数方法 */
|
load: () => Promise<number>;
|
}
|
|
/** 查询参数：只要 total，分页大小取 1，避免拉回整页明细 */
|
const pageParam = { pageNo: 1, pageSize: 1 };
|
|
/** 从分页结果里取总数 */
|
async function totalOf(promise: Promise<{ total?: number }>) {
|
const result = await promise;
|
return result.total ?? 0;
|
}
|
|
/** 仓储物流 */
|
const WAREHOUSE_CARDS: StatCard[] = [
|
{
|
color: 'text-amber-600 dark:text-amber-400',
|
gradient: 'from-amber-500 to-yellow-400',
|
hint: '仓储物流 · 库存现有量',
|
icon: 'lucide:package-search',
|
label: '库存物料',
|
load: () => totalOf(getMaterialStockPage(pageParam)),
|
menu: 'MesWmMaterialStock',
|
permission: 'mes:wm-material-stock:query',
|
unit: '条',
|
},
|
{
|
color: 'text-blue-600 dark:text-blue-400',
|
gradient: 'from-blue-500 to-indigo-400',
|
hint: '仓储物流 · 仓库设置',
|
icon: 'lucide:warehouse',
|
label: '仓库数量',
|
load: () => totalOf(getWarehousePage(pageParam)),
|
menu: 'MesWmWarehouse',
|
permission: 'mes:wm-warehouse:query',
|
unit: '个',
|
},
|
{
|
color: 'text-cyan-600 dark:text-cyan-400',
|
gradient: 'from-cyan-500 to-teal-400',
|
hint: '仓储物流 · 采购入库',
|
icon: 'lucide:package-open',
|
label: '采购入库单',
|
load: () => totalOf(getItemReceiptPage(pageParam)),
|
menu: 'MesWmItemReceipt',
|
permission: 'mes:wm-item-receipt:query',
|
unit: '笔',
|
},
|
{
|
color: 'text-violet-600 dark:text-violet-400',
|
gradient: 'from-violet-500 to-purple-400',
|
hint: '仓储物流 · 生产领料',
|
icon: 'lucide:package',
|
label: '生产领料单',
|
load: () => totalOf(getProductIssuePage(pageParam)),
|
menu: 'MesWmProductIssue',
|
permission: 'mes:wm-product-issue:query',
|
unit: '笔',
|
},
|
];
|
|
/** 人力资源 */
|
const HR_CARDS: StatCard[] = [
|
{
|
color: 'text-emerald-600 dark:text-emerald-400',
|
gradient: 'from-emerald-500 to-green-400',
|
hint: '人力资源 · 员工管理',
|
icon: 'lucide:users',
|
label: '员工总数',
|
load: () => totalOf(getEmployeePage(pageParam)),
|
menu: 'HrmEmployee',
|
permission: 'hrm:employee:query',
|
unit: '人',
|
},
|
{
|
color: 'text-orange-600 dark:text-orange-400',
|
gradient: 'from-orange-500 to-amber-400',
|
hint: '人力资源 · 请假申请',
|
icon: 'lucide:calendar-range',
|
label: '请假申请',
|
load: () => totalOf(getLeavePage(pageParam)),
|
menu: 'HrmLeaveApplication',
|
permission: 'hrm:leave:query',
|
unit: '单',
|
},
|
{
|
color: 'text-rose-600 dark:text-rose-400',
|
gradient: 'from-rose-500 to-pink-400',
|
hint: '人力资源 · 考勤异常',
|
icon: 'lucide:circle-alert',
|
label: '考勤异常',
|
load: () => totalOf(getAttendanceExceptionPage(pageParam)),
|
menu: 'HrmAttendanceException',
|
unit: '条',
|
},
|
{
|
color: 'text-fuchsia-600 dark:text-fuchsia-400',
|
gradient: 'from-fuchsia-500 to-pink-400',
|
hint: '人力资源 · 薪资发放',
|
icon: 'lucide:wallet',
|
label: '薪资发放单',
|
load: () => totalOf(getSalaryPaymentPage(pageParam)),
|
menu: 'HrmSalaryPayment',
|
unit: '单',
|
},
|
];
|
|
const { canQuery, canSeeMenu } = useHomeAccess();
|
|
/** 菜单开着（有查询按钮权限时一并校验）才展示这张卡 */
|
function isVisible(card: StatCard) {
|
return (
|
canSeeMenu(card.menu) && (!card.permission || canQuery(card.permission))
|
);
|
}
|
|
const warehouseCards = computed(() => WAREHOUSE_CARDS.filter(isVisible));
|
const hrCards = computed(() => HR_CARDS.filter(isVisible));
|
|
/** 按分组渲染，分组内无卡片时整组不渲染 */
|
const groups = computed(() =>
|
[
|
{ cards: warehouseCards.value, title: '仓储物流' },
|
{ cards: hrCards.value, title: '人力资源' },
|
].filter((group) => group.cards.length > 0),
|
);
|
|
const values = ref<Record<string, number>>({});
|
|
/** 并发拉取所有可见卡片的统计值，单张失败只影响它自己 */
|
async function loadValues() {
|
const cards = [...warehouseCards.value, ...hrCards.value];
|
await Promise.all(
|
cards.map(async (card) => {
|
try {
|
values.value[card.label] = await card.load();
|
} catch {
|
/* 无权限或接口异常时保持 0 */
|
}
|
}),
|
);
|
}
|
|
/** 3D 倾斜 */
|
const tilts = ref<Record<string, { x: number; y: number }>>({});
|
|
function onMouseMove(e: MouseEvent, label: string) {
|
const el = e.currentTarget as HTMLElement;
|
const rect = el.getBoundingClientRect();
|
const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
|
const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
|
tilts.value[label] = { x: x * -5, y: y * 5 };
|
}
|
|
function onMouseLeave(label: string) {
|
tilts.value[label] = { x: 0, y: 0 };
|
}
|
|
function tiltStyle(label: string) {
|
const t = tilts.value[label] ?? { x: 0, y: 0 };
|
return {
|
transform: `perspective(500px) rotateX(${t.y}deg) rotateY(${t.x}deg)`,
|
transition:
|
t.x === 0 && t.y === 0 ? 'transform 0.5s ease' : 'transform 0.1s ease',
|
};
|
}
|
|
onMounted(() => {
|
loadValues();
|
});
|
</script>
|
|
<template>
|
<template v-for="group in groups" :key="group.title">
|
<h3
|
class="mb-3 text-base font-semibold text-gray-800 dark:text-gray-100"
|
>
|
{{ group.title }}
|
</h3>
|
<Row :gutter="16">
|
<Col
|
v-for="card in group.cards"
|
:key="card.label"
|
: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(card.label)"
|
@mousemove="(e: MouseEvent) => onMouseMove(e, card.label)"
|
@mouseleave="onMouseLeave(card.label)"
|
@click="emit('navigate', card.menu)"
|
>
|
<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 shadow-lg transition-transform duration-300 group-hover:scale-110"
|
:class="card.gradient"
|
>
|
<IconifyIcon class="size-6 text-white" :icon="card.icon" />
|
</div>
|
<div class="min-w-0 flex-1">
|
<div
|
class="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400"
|
>
|
{{ card.label }}
|
</div>
|
<div class="flex items-baseline gap-1">
|
<CountTo
|
class="text-2xl font-bold leading-tight"
|
:class="card.color"
|
:end-val="values[card.label] ?? 0"
|
:duration="1200"
|
/>
|
<span class="text-xs text-gray-400">{{ card.unit }}</span>
|
</div>
|
<div class="mt-1 text-xs text-gray-400">{{ card.hint }}</div>
|
</div>
|
</div>
|
<div
|
class="absolute inset-0 -z-0 bg-gradient-to-br from-gray-500/5 to-gray-400/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
/>
|
<div
|
class="absolute -right-6 -top-6 size-24 rounded-full bg-gray-400/10 blur-xl transition-all duration-300 group-hover:scale-150"
|
/>
|
</div>
|
</Col>
|
</Row>
|
</template>
|
</template>
|
|
<style scoped>
|
.glass-tilt {
|
background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
|
backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
border: 1px solid rgba(255,255,255,0.6);
|
box-shadow:
|
0 4px 24px rgba(0,0,0,0.04),
|
0 1px 4px rgba(0,0,0,0.02),
|
inset 0 1px 0 rgba(255,255,255,0.8);
|
transform-style: preserve-3d;
|
}
|
|
.dark .glass-tilt {
|
background: linear-gradient(135deg, rgba(30,30,55,0.75), rgba(20,20,40,0.5));
|
border: 1px solid rgba(255,255,255,0.08);
|
box-shadow:
|
0 4px 24px rgba(0,0,0,0.3),
|
0 2px 8px rgba(0,0,0,0.2),
|
inset 0 1px 0 rgba(255,255,255,0.05);
|
}
|
</style>
|
