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

gaoluyang

2 天以前 8151c3253dc287a79914bc08414af17dfb380c96

 src/views/mes/home/modules/shortcuts.vue

@@ -1,7 +1,13 @@
<script lang="ts" setup>
import { computed } from 'vue';

import { IconifyIcon } from '@vben/icons';

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

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

import { HOME_SHORTCUTS } from '../data';

defineOptions({ name: 'MesHomeShortcuts' });

@@ -9,72 +15,21 @@
  navigate: [name: string];
}>();

/** 快捷入口列表，3×3 网格布局与订单状态分布面板等高 */
const shortcuts = [
  {
    bgColor: '#409EFF',
    icon: 'lucide:file-text',
    name: '生产订单',
    routeName: 'MesProWorkOrder',
  },
  {
    bgColor: '#67C23A',
    icon: 'lucide:edit',
    name: '生产报工',
    routeName: 'MesProFeedback',
  },
  {
    bgColor: '#E6A23C',
    icon: 'lucide:search',
    name: '质量检验',
    routeName: 'MesQcIqc',
  },
  {
    bgColor: '#F56C6C',
    icon: 'lucide:box',
    name: '库存查询',
    routeName: 'MesWmMaterialStock',
  },
  {
    bgColor: '#7c3aed',
    icon: 'lucide:cpu',
    name: '设备管理',
    routeName: 'MesDvMachinery',
  },
  {
    bgColor: '#0ea5e9',
    icon: 'lucide:list',
    name: '生产任务',
    routeName: 'MesProTask',
  },
  {
    bgColor: '#14b8a6',
    icon: 'lucide:truck',
    name: '到货通知',
    routeName: 'MesWmArrivalNotice',
  },
  {
    bgColor: '#f59e0b',
    icon: 'lucide:settings-2',
    name: '设备维修',
    routeName: 'MesDvRepair',
  },
  {
    bgColor: '#ec4899',
    icon: 'lucide:tickets',
    name: '流转卡',
    routeName: 'MesProCard',
  },
];
const { canSeeMenu } = useHomeAccess();

/** 快捷入口列表，3×3 网格布局与订单状态分布面板等高；菜单没开的不展示 */
const shortcuts = computed(() =>
  HOME_SHORTCUTS.filter((item) => canSeeMenu(item.menu)),
);
</script>

<template>
  <Card title="快捷入口" class="h-full">
  <Card v-if="shortcuts.length" title="快捷入口" class="h-full">
    <Row :gutter="16">
      <Col v-for="item in shortcuts" :key="item.name" :span="8" class="mb-4">
        <div
          class="hover:bg-accent flex cursor-pointer flex-col items-center gap-2 rounded-lg py-3 transition-all hover:-translate-y-0.5"
          @click="emit('navigate', item.routeName)"
          @click="emit('navigate', item.menu)"
        >
          <div
            class="flex size-12 items-center justify-center rounded-xl text-white"