<script setup lang="ts">
|
import type { MenuRecordRaw } from '@vben/types';
|
import { computed, onMounted, reactive } from 'vue';
|
import { IconifyIcon } from '@vben/icons';
|
import { usePortalMenus } from '#/components/portal/use-portal-menus';
|
import { getTaskTodoPage } from '#/api/bpm/task';
|
import { getApplicationPage } from '#/api/research/application';
|
import { getGuidelinePage } from '#/api/research/guideline';
|
import { getReimbursementPage } from '#/api/finance/reimbursement';
|
|
type MetricKey = 'todo' | 'application' | 'reimbursement' | 'guideline';
|
interface Metric { key: MetricKey; menu: MenuRecordRaw; icon: string; unit: string }
|
const { features, goMenu } = usePortalMenus();
|
const states = reactive<Record<MetricKey, { loading: boolean; failed: boolean; count: number }>>({
|
todo: { loading: true, failed: false, count: 0 }, application: { loading: true, failed: false, count: 0 }, reimbursement: { loading: true, failed: false, count: 0 }, guideline: { loading: true, failed: false, count: 0 },
|
});
|
const metrics = computed<Metric[]>(() => {
|
const f = features.value;
|
return [
|
f.todo && { key: 'todo', menu: f.todo, icon: 'lucide:list-todo', unit: '项待办' },
|
f.application && { key: 'application', menu: f.application, icon: 'lucide:file-text', unit: '项申报' },
|
f.reimbursement && { key: 'reimbursement', menu: f.reimbursement, icon: 'lucide:receipt', unit: '张报销单' },
|
f.guideline && { key: 'guideline', menu: f.guideline, icon: 'lucide:book-open', unit: '份指南' },
|
].filter((item): item is Metric => Boolean(item));
|
});
|
const loaders = { todo: getTaskTodoPage, application: getApplicationPage, reimbursement: getReimbursementPage, guideline: getGuidelinePage };
|
onMounted(() => {
|
for (const metric of metrics.value) {
|
loaders[metric.key]({ pageNo: 1, pageSize: 1 }).then((result) => { states[metric.key].count = result.total ?? 0; }).catch(() => { states[metric.key].failed = true; }).finally(() => { states[metric.key].loading = false; });
|
}
|
});
|
</script>
|
|
<template>
|
<div class="portal-metrics" :style="{ '--count': metrics.length }"><button v-for="metric in metrics" :key="metric.key" type="button" @click="goMenu(metric.menu)"><span class="metric-icon"><IconifyIcon :icon="metric.icon" /></span><div><strong>{{ metric.menu.name }}</strong><div class="metric-value"><b>{{ states[metric.key].loading ? '…' : states[metric.key].failed ? '—' : states[metric.key].count }}</b><span>{{ states[metric.key].failed ? '暂时无法获取' : metric.unit }}</span></div></div><IconifyIcon class="metric-arrow" icon="lucide:chevron-right" /></button></div>
|
</template>
|
|
<style scoped>
|
.portal-metrics { display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr)); }
|
button { display: flex; min-width: 0; min-height: 80px; align-items: center; gap: 13px; padding: 8px 20px; border-right: 1px solid #e4edf5; background: #fff; text-align: left; cursor: pointer; }
|
button:last-child { border: 0; }.metric-icon { display: grid; width: 43px; height: 43px; flex: none; place-items: center; border-radius: 50%; color: #2775b9; background: #ecf4fd; font-size: 23px; }
|
strong { color: #315273; font-size: 13px; font-weight: 600; }.metric-value { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }.metric-value b { color: #173958; font-size: 26px; line-height: 1.2; }.metric-value span { color: #5c7187; font-size: 11px; }.metric-arrow { width: 15px; flex: none; margin-left: auto; color: #5c7187; }
|
button:hover { background: #f7faff; }button:focus-visible { outline: 2px solid #2c70b2; outline-offset: -2px; }
|
@media (max-width: 850px) { .portal-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }button { padding: 8px 10px; }button:nth-child(2n) { border-right: 0; } }
|
@media (max-width: 420px) { .metric-icon { width: 34px; height: 34px; font-size: 20px; }button { gap: 8px; padding: 8px 5px; }.metric-arrow { display: none; }.metric-value b { font-size: 23px; } }
|
</style>
|
