refactor(首页): 展示模块跟随菜单权限自动隐藏

gaoluyang

15 小时以前 5c1e0a47eea514f59f697133fe8a01bcbf6f7a78

 src/views/dashboard/analytics/modules/kpi-cards.vue

@@ -8,6 +8,8 @@

import { Col, Row } from 'ant-design-vue';

import { useHomeAccess } from '#/utils/use-home-access';

defineOptions({ name: 'DashboardKpiCards' });

const props = defineProps<{
@@ -17,6 +19,38 @@
const emit = defineEmits<{
  navigate: [name: string];
}>();

const { canQuery, canSeeMenu } = useHomeAccess();

/** 四张卡的数据都来自首页汇总接口，没有该权限时取下的是空值 */
const canViewSummary = computed(() => canQuery('mes:home:query'));
const showOrder = computed(
  () => canViewSummary.value && canSeeMenu('MesProWorkOrder'),
);
const showOutput = computed(
  () => canViewSummary.value && canSeeMenu('MesProFeedback'),
);
const showQuality = computed(
  () => canViewSummary.value && canSeeMenu('MesQcIqc'),
);
const showEquipment = computed(
  () => canViewSummary.value && canSeeMenu('MesDvMachinery'),
);

const visibleCards = computed(
  () =>
    [showOrder, showOutput, showQuality, showEquipment].filter(
      (card) => card.value,
    ).length,
);

/** 可见卡片数量决定列宽，避免只剩一两张时挤在左上角 */
const colSpan = computed(() => {
  if (visibleCards.value >= 4) return 6;
  if (visibleCards.value === 3) return 8;
  if (visibleCards.value === 2) return 12;
  return 24;
});

const qualityRate = computed(() => {
  const total =
@@ -57,9 +91,17 @@
</script>

<template>
  <Row :gutter="16">
  <Row v-if="visibleCards > 0" :gutter="16">
    <!-- 生产订单 -->
    <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
    <Col
      v-if="showOrder"
      :lg="colSpan"
      :md="colSpan"
      :sm="colSpan"
      :xl="colSpan"
      :xs="24"
      class="mb-4"
    >
      <div
        class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
        :style="tiltStyle('order')"
@@ -90,7 +132,15 @@
    </Col>

    <!-- 今日产量 -->
    <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
    <Col
      v-if="showOutput"
      :lg="colSpan"
      :md="colSpan"
      :sm="colSpan"
      :xl="colSpan"
      :xs="24"
      class="mb-4"
    >
      <div
        class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
        :style="tiltStyle('output')"
@@ -121,13 +171,21 @@
    </Col>

    <!-- 质量合格率 -->
    <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
    <Col
      v-if="showQuality"
      :lg="colSpan"
      :md="colSpan"
      :sm="colSpan"
      :xl="colSpan"
      :xs="24"
      class="mb-4"
    >
      <div
        class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
        :style="tiltStyle('quality')"
        @mousemove="(e: MouseEvent) => onMouseMove(e, 'quality')"
        @mouseleave="onMouseLeave('quality')"
        @click="emit('navigate', 'MesQcRecord')"
        @click="emit('navigate', 'MesQcIqc')"
      >
        <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-orange-500 to-amber-400 shadow-lg shadow-orange-500/25 transition-transform duration-300 group-hover:scale-110">
@@ -154,7 +212,15 @@
    </Col>

    <!-- 设备运行率 -->
    <Col :lg="6" :md="12" :sm="12" :xl="6" :xs="24" class="mb-4">
    <Col
      v-if="showEquipment"
      :lg="colSpan"
      :md="colSpan"
      :sm="colSpan"
      :xl="colSpan"
      :xs="24"
      class="mb-4"
    >
      <div
        class="glass-tilt group cursor-pointer overflow-hidden rounded-2xl border-0"
        :style="tiltStyle('equip')"