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

gaoluyang

5 天以前 8151c3253dc287a79914bc08414af17dfb380c96

 src/views/mes/home/index.vue

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { MesHomeApi } from '#/api/mes/home';

import { onMounted, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page } from '@vben/common-ui';
@@ -9,8 +9,14 @@
import { Col, Row } from 'ant-design-vue';

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

import { defaultSummary } from './data';
import {
  ALERT_MENUS,
  defaultSummary,
  HOME_BLOCK_MENUS,
  HOME_SHORTCUTS,
} from './data';
import AlertPanel from './modules/alert-panel.vue';
import KpiCards from './modules/kpi-cards.vue';
import ProductionTrend from './modules/production-trend.vue';
@@ -19,6 +25,19 @@

const router = useRouter();
const summary = ref<MesHomeApi.Summary>(defaultSummary); // 首页汇总统计

// 首页模块跟随侧边栏菜单：菜单没开的模块整块不展示
const { canSeeMenu } = useHomeAccess();
/** 生产趋势（取自生产报工） */
const showTrend = computed(() => canSeeMenu(HOME_BLOCK_MENUS.feedback));
/** 待办与异常：任意一条的菜单开着就渲染这一列 */
const showAlert = computed(() => ALERT_MENUS.some((menu) => canSeeMenu(menu)));
/** 订单状态分布（取自生产订单） */
const showChart = computed(() => canSeeMenu(HOME_BLOCK_MENUS.workOrder));
/** 快捷入口：任意一个入口的菜单开着就渲染这一列 */
const showShortcuts = computed(() =>
  HOME_SHORTCUTS.some((item) => canSeeMenu(item.menu)),
);

/** 跳转到目标页面（按路由 name） */
function handleNavigate(name: string) {
@@ -40,21 +59,53 @@
    <KpiCards :summary="summary" class="mb-4" @navigate="handleNavigate" />

    <!-- 第二行：生产趋势 + 待办异常 -->
    <Row :gutter="16" class="mb-4">
      <Col :lg="16" :md="24" :sm="24" :xl="16" :xs="24" class="mb-4">
    <Row v-if="showTrend || showAlert" :gutter="16" class="mb-4">
      <Col
        v-if="showTrend"
        :lg="showAlert ? 16 : 24"
        :md="24"
        :sm="24"
        :xl="showAlert ? 16 : 24"
        :xs="24"
        class="mb-4"
      >
        <ProductionTrend />
      </Col>
      <Col :lg="8" :md="24" :sm="24" :xl="8" :xs="24" class="mb-4">
      <Col
        v-if="showAlert"
        :lg="showTrend ? 8 : 24"
        :md="24"
        :sm="24"
        :xl="showTrend ? 8 : 24"
        :xs="24"
        class="mb-4"
      >
        <AlertPanel :summary="summary" @navigate="handleNavigate" />
      </Col>
    </Row>

    <!-- 第三行：订单分布 + 快捷入口 -->
    <Row :gutter="16">
      <Col :lg="12" :md="24" :sm="24" :xl="12" :xs="24" class="mb-4">
    <Row v-if="showChart || showShortcuts" :gutter="16">
      <Col
        v-if="showChart"
        :lg="showShortcuts ? 12 : 24"
        :md="24"
        :sm="24"
        :xl="showShortcuts ? 12 : 24"
        :xs="24"
        class="mb-4"
      >
        <WorkOrderChart />
      </Col>
      <Col :lg="12" :md="24" :sm="24" :xl="12" :xs="24" class="mb-4">
      <Col
        v-if="showShortcuts"
        :lg="showChart ? 12 : 24"
        :md="24"
        :sm="24"
        :xl="showChart ? 12 : 24"
        :xs="24"
        class="mb-4"
      >
        <Shortcuts @navigate="handleNavigate" />
      </Col>
    </Row>