<script lang="ts" setup>
|
import type { MesBagCodeHomeApi } from '#/api/mes/bag-code-home';
|
import type { MesTraceCrossRegionApi } from '#/api/mes/trace-cross-region';
|
|
import { computed } from 'vue';
|
|
import { IconifyIcon } from '@vben/icons';
|
|
import { Badge, Card } from 'ant-design-vue';
|
|
defineOptions({ name: 'BagCodeHomeAlertPanel' });
|
|
const props = defineProps<{
|
summary: MesBagCodeHomeApi.Summary;
|
crossRegion: MesTraceCrossRegionApi.Summary;
|
}>();
|
|
const emit = defineEmits<{
|
navigate: [name: string];
|
}>();
|
|
/** 待办与预警列表 */
|
const alertItems = computed(() => [
|
{
|
count: props.crossRegion.pending ?? 0,
|
desc: '待处理的窜货预警',
|
icon: 'lucide:shield-alert',
|
iconClass: 'bg-[rgba(239,68,68,0.12)] text-[#ef4444]',
|
label: '窜货预警',
|
routeName: 'MesTraceCrossRegion',
|
},
|
{
|
count: props.summary.stockWarningPendingCount ?? 0,
|
desc: '未处理的库存预警',
|
icon: 'lucide:bell-alert',
|
iconClass: 'bg-[rgba(245,158,11,0.14)] text-[#f59e0b]',
|
label: '库存预警',
|
routeName: 'MesWmStockWarning',
|
},
|
{
|
count: props.summary.ncrPendingCount ?? 0,
|
desc: '待评审的不合格品单',
|
icon: 'lucide:shield-x',
|
iconClass: 'bg-[rgba(16,185,129,0.14)] text-[#10b981]',
|
label: '不合格品',
|
routeName: 'MesQcNcr',
|
},
|
]);
|
</script>
|
|
<template>
|
<Card title="待办与预警" class="h-full">
|
<div class="flex flex-col">
|
<div
|
v-for="item in alertItems"
|
:key="item.label"
|
class="flex cursor-pointer items-center gap-3 border-b border-[rgba(16,185,129,0.16)] px-2 py-4 transition-colors last:border-b-0 hover:bg-[rgba(16,185,129,0.08)]"
|
@click="emit('navigate', item.routeName)"
|
>
|
<div
|
class="flex size-10 flex-shrink-0 items-center justify-center rounded-lg"
|
:class="item.iconClass"
|
>
|
<IconifyIcon class="size-5" :icon="item.icon" />
|
</div>
|
<div class="flex flex-1 flex-col gap-0.5">
|
<span class="text-sm font-medium">{{ item.label }}</span>
|
<span class="text-muted-foreground text-xs">{{ item.desc }}</span>
|
</div>
|
<Badge :count="item.count" :show-zero="false" />
|
</div>
|
</div>
|
</Card>
|
</template>
|
