1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <script lang="ts" setup>
| import { IconifyIcon } from '..\..\..\..\packages\icons\src';
|
| import { Card, Col, Row } from 'ant-design-vue';
|
| defineOptions({ name: 'MesHomeShortcuts' });
|
| const emit = defineEmits<{
| 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',
| },
| ];
| </script>
|
| <template>
| <Card 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)"
| >
| <div
| class="flex size-12 items-center justify-center rounded-xl text-white"
| :style="{ background: item.bgColor }"
| >
| <IconifyIcon class="size-6" :icon="item.icon" />
| </div>
| <span class="text-sm">{{ item.name }}</span>
| </div>
| </Col>
| </Row>
| </Card>
| </template>
|
|
