feat(dashboard): 首页改为「人力资源+售后管理」模块入口

tuqin

3 天以前 52d8fdefc85591abe9ee6c8cd382f91698013ebf

 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>