933 lines
33 KiB
Vue
933 lines
33 KiB
Vue
<template>
|
|
<header class="topbar" :class="{ 'chat-mode': isChat, 'detail-mode': isRequestDetail }">
|
|
<div class="title-group">
|
|
<div class="eyebrow">{{ eyebrowLabel }}</div>
|
|
<h1>{{ currentView.title }}</h1>
|
|
<p>{{ currentView.desc }}</p>
|
|
</div>
|
|
|
|
<div class="top-actions">
|
|
<template v-if="isChat">
|
|
<div class="kpi-chips">
|
|
<div v-for="kpi in chatKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
|
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="isOverview">
|
|
<div class="range-combo" aria-label="首页时间范围">
|
|
<div class="range-shell">
|
|
<span class="range-meta">
|
|
<i class="mdi mdi-calendar"></i>
|
|
<span>{{ activeDateLabel }}</span>
|
|
</span>
|
|
|
|
<div class="range-tabs" role="tablist" aria-label="时间范围">
|
|
<button
|
|
v-for="option in rangeOptions"
|
|
:key="option.value"
|
|
type="button"
|
|
role="tab"
|
|
:aria-selected="activeRange === option.value"
|
|
:class="{ active: activeRange === option.value }"
|
|
@click="setRange(option.value)"
|
|
>
|
|
{{ option.label }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-range-wrap">
|
|
<button
|
|
class="custom-range-btn"
|
|
type="button"
|
|
:class="{ active: isCustomRange }"
|
|
:aria-expanded="calendarOpen"
|
|
aria-haspopup="dialog"
|
|
@click="calendarOpen = !calendarOpen"
|
|
>
|
|
<i class="mdi mdi-calendar-plus"></i>
|
|
<span>选择时间段</span>
|
|
</button>
|
|
|
|
<div v-if="calendarOpen" class="calendar-popover" role="dialog" aria-label="选择看板时间段">
|
|
<header>
|
|
<strong>选择看板时间段</strong>
|
|
<button type="button" aria-label="关闭日期选择" @click="calendarOpen = false">
|
|
<i class="mdi mdi-close"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="date-fields">
|
|
<label>
|
|
<span>开始日期</span>
|
|
<input v-model="draftStart" type="date" />
|
|
</label>
|
|
<label>
|
|
<span>结束日期</span>
|
|
<input v-model="draftEnd" type="date" />
|
|
</label>
|
|
</div>
|
|
|
|
<footer>
|
|
<button class="ghost-btn" type="button" @click="calendarOpen = false">取消</button>
|
|
<button class="apply-btn" type="button" :disabled="!canApplyCustomRange" @click="applyCustomRange">
|
|
应用
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-switch-wrap">
|
|
<EnterpriseSelect
|
|
v-model="overviewDashboardValue"
|
|
class="dashboard-switch-select"
|
|
:options="overviewDashboardOptions"
|
|
aria-label="选择看板类型"
|
|
size="default"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="isRequestDetail">
|
|
<div class="detail-topbar-actions">
|
|
<div v-if="detailKpis.length" class="kpi-chips detail-kpi-chips">
|
|
<div
|
|
v-for="kpi in detailKpis"
|
|
:key="kpi.label"
|
|
class="kpi-chip detail-kpi-chip"
|
|
:style="{ '--chip-color': kpi.color }"
|
|
>
|
|
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="detailAlerts.length" class="detail-alert-strip">
|
|
<span
|
|
v-for="alert in detailAlerts"
|
|
:key="alert.label"
|
|
class="detail-alert-pill"
|
|
:class="alert.tone"
|
|
>
|
|
<i :class="alert.icon || 'mdi mdi-alert-circle-outline'"></i>
|
|
<span>{{ alert.label }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="isWorkbench">
|
|
<div class="topbar-toolset" aria-label="工作台快捷工具">
|
|
<div ref="notificationWrapRef" class="notification-wrap" :class="{ 'is-open': notificationOpen }">
|
|
<button
|
|
class="topbar-icon-btn notification-btn"
|
|
type="button"
|
|
aria-label="通知"
|
|
:aria-expanded="notificationOpen"
|
|
aria-haspopup="dialog"
|
|
@click="toggleNotification"
|
|
>
|
|
<i class="mdi mdi-bell-outline"></i>
|
|
<span v-if="topbarNotificationCount" class="notification-badge">{{ topbarNotificationCount }}</span>
|
|
</button>
|
|
|
|
<Transition name="notification-panel">
|
|
<div v-if="notificationOpen" class="notification-popover" role="dialog" aria-label="通知中心">
|
|
<header class="notification-head">
|
|
<div class="notification-head-brand">
|
|
<span class="notification-head-icon" aria-hidden="true">
|
|
<i class="mdi mdi-bell-ring-outline"></i>
|
|
</span>
|
|
<span class="notification-head-copy">
|
|
<strong>通知中心</strong>
|
|
<small>{{ unreadNotifications.length ? `${unreadNotifications.length} 条待处理` : '暂无待处理通知' }}</small>
|
|
</span>
|
|
</div>
|
|
<span class="notification-head-actions">
|
|
<button
|
|
class="notification-clear-btn"
|
|
type="button"
|
|
:disabled="notificationItems.length === 0"
|
|
@click="clearAllNotifications"
|
|
>
|
|
清空通知
|
|
</button>
|
|
<button
|
|
class="notification-close-btn"
|
|
type="button"
|
|
aria-label="关闭通知"
|
|
@click="closeNotification"
|
|
>
|
|
<i class="mdi mdi-close"></i>
|
|
</button>
|
|
</span>
|
|
</header>
|
|
|
|
<div class="notification-tabs" role="tablist" aria-label="通知状态">
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
:aria-selected="notificationTab === 'unread'"
|
|
:class="{ active: notificationTab === 'unread' }"
|
|
@click="notificationTab = 'unread'"
|
|
>
|
|
<span>未读</span>
|
|
<em>{{ unreadNotifications.length }}</em>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
:aria-selected="notificationTab === 'read'"
|
|
:class="{ active: notificationTab === 'read' }"
|
|
@click="notificationTab = 'read'"
|
|
>
|
|
<span>已读</span>
|
|
<em>{{ readNotifications.length }}</em>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="activeNotifications.length" class="notification-list">
|
|
<button
|
|
v-for="item in activeNotifications"
|
|
:key="item.id"
|
|
type="button"
|
|
class="notification-row"
|
|
:class="{ unread: item.unread }"
|
|
@click="openNotification(item)"
|
|
>
|
|
<span class="notification-type-icon" :class="item.tone">
|
|
<i :class="resolveNotificationIcon(item)"></i>
|
|
</span>
|
|
<span class="notification-copy">
|
|
<span class="notification-title-line">
|
|
<strong>{{ item.title }}</strong>
|
|
<b v-if="item.badge">{{ item.badge }}</b>
|
|
</span>
|
|
<small>{{ item.description }}</small>
|
|
<span class="notification-meta">
|
|
<em>{{ item.category || '系统通知' }}</em>
|
|
<time>{{ item.time }}</time>
|
|
</span>
|
|
</span>
|
|
<i class="mdi mdi-chevron-right notification-row-arrow"></i>
|
|
</button>
|
|
</div>
|
|
<div v-else class="notification-empty">
|
|
<span class="notification-empty-icon" aria-hidden="true">
|
|
<i class="mdi mdi-bell-check-outline"></i>
|
|
</span>
|
|
<strong>{{ notificationTab === 'unread' ? '暂无未读通知' : '暂无已读通知' }}</strong>
|
|
<span>新的单据与待办会在这里汇总展示</span>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<div ref="helpWrapRef" class="help-wrap" :class="{ 'is-open': helpOpen }">
|
|
<button
|
|
class="topbar-icon-btn help-btn"
|
|
type="button"
|
|
aria-label="帮助"
|
|
:aria-expanded="helpOpen"
|
|
aria-haspopup="dialog"
|
|
@click="toggleHelp"
|
|
>
|
|
<i class="mdi mdi-help-circle-outline"></i>
|
|
</button>
|
|
|
|
<Transition name="help-panel">
|
|
<div v-if="helpOpen" class="help-popover" role="dialog" aria-label="产品信息">
|
|
<header class="help-head">
|
|
<span class="help-head-icon" aria-hidden="true">
|
|
<i class="mdi mdi-information-outline"></i>
|
|
</span>
|
|
<span class="help-head-copy">
|
|
<strong>{{ topbarHelpDemo.productName }}</strong>
|
|
<small>产品版本与版权信息</small>
|
|
</span>
|
|
<button
|
|
class="help-close-btn"
|
|
type="button"
|
|
aria-label="关闭帮助"
|
|
@click="closeHelp"
|
|
>
|
|
<i class="mdi mdi-close"></i>
|
|
</button>
|
|
</header>
|
|
|
|
<dl class="help-meta">
|
|
<div class="help-meta-row">
|
|
<dt>版本号</dt>
|
|
<dd>{{ topbarHelpDemo.version }}</dd>
|
|
</div>
|
|
<div class="help-meta-row">
|
|
<dt>更新时间</dt>
|
|
<dd>{{ topbarHelpDemo.updatedAt }}</dd>
|
|
</div>
|
|
<div class="help-meta-row help-meta-row--block">
|
|
<dt>Copyright</dt>
|
|
<dd>{{ topbarHelpDemo.copyright }}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
|
|
<button class="company-switcher" type="button" aria-label="切换公司">
|
|
<span>{{ displayCompanyName }}</span>
|
|
<i class="mdi mdi-chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="isDocuments">
|
|
<div class="kpi-chips">
|
|
<div v-for="kpi in documentKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
|
<span class="chip-value">{{ kpi.value }}<small>单</small></span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="isRequests">
|
|
<div class="kpi-chips">
|
|
<div v-for="kpi in requestKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
|
<span class="chip-value">{{ kpi.value }}<small>单</small></span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="showDigitalEmployeeWorkRecordKpis">
|
|
<div class="kpi-chips">
|
|
<div
|
|
v-for="kpi in digitalEmployeeWorkRecordKpis"
|
|
:key="kpi.label"
|
|
class="kpi-chip"
|
|
:style="{ '--chip-color': kpi.color }"
|
|
>
|
|
<span class="chip-value">{{ kpi.value }}<small>条</small></span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span class="chip-delta" :class="kpi.trend">{{ kpi.delta }} <i :class="kpi.arrow"></i></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="isApproval">
|
|
<div class="kpi-chips">
|
|
<div v-for="kpi in approvalKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
|
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="topbar-spacer"></div>
|
|
<button class="create-top-btn" type="button">
|
|
<i class="mdi mdi-check-circle"></i>
|
|
<span>批量通过</span>
|
|
</button>
|
|
</template>
|
|
|
|
<template v-else-if="isPolicies">
|
|
<div class="kpi-chips">
|
|
<div v-for="kpi in knowledgeKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
|
<span class="chip-value">{{ kpi.value }}</span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span v-if="kpi.meta" class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="isEmployees">
|
|
<div class="kpi-chips">
|
|
<div v-for="kpi in employeeKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
|
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
|
|
<span class="chip-label">{{ kpi.label }}</span>
|
|
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
|
|
|
import { useDocumentCenterInbox } from '../../composables/useDocumentCenterInbox.js'
|
|
import { useTopBarNotificationStates } from '../../composables/useTopBarNotificationStates.js'
|
|
import { useTopBarWorkbenchPopovers } from '../../composables/useTopBarWorkbenchPopovers.js'
|
|
import { createCurrentYearDateRange, formatDateValue } from '../../utils/dateRangeDefaults.js'
|
|
import EnterpriseSelect from '../shared/EnterpriseSelect.vue'
|
|
|
|
const props = defineProps({
|
|
currentView: { type: Object, required: true },
|
|
search: { type: String, default: '' },
|
|
activeView: { type: String, default: '' },
|
|
ranges: { type: Array, default: () => [] },
|
|
activeRange: { type: String, default: '' },
|
|
employeeSummary: {
|
|
type: Object,
|
|
default: () => null
|
|
},
|
|
knowledgeSummary: {
|
|
type: Object,
|
|
default: () => null
|
|
},
|
|
requestSummary: {
|
|
type: Object,
|
|
default: () => null
|
|
},
|
|
documentSummary: {
|
|
type: Object,
|
|
default: () => null
|
|
},
|
|
digitalEmployeeSummary: {
|
|
type: Object,
|
|
default: () => null
|
|
},
|
|
workbenchSummary: {
|
|
type: Object,
|
|
default: () => null
|
|
},
|
|
companyName: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
detailMode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
detailAlerts: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
detailKpis: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
customRange: {
|
|
type: Object,
|
|
default: createCurrentYearDateRange
|
|
},
|
|
overviewDashboard: {
|
|
type: String,
|
|
default: 'finance'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits([
|
|
'update:search',
|
|
'update:activeRange',
|
|
'update:customRange',
|
|
'update:overviewDashboard',
|
|
'batchApprove',
|
|
'openChat',
|
|
'newApplication',
|
|
'openDocument',
|
|
'navigate'
|
|
])
|
|
const isChat = computed(() => props.activeView === 'chat')
|
|
const isOverview = computed(() => props.activeView === 'overview')
|
|
const isWorkbench = computed(() => props.activeView === 'workbench')
|
|
const isRequestDetail = computed(() => ['requests', 'documents', 'audit', 'digitalEmployees', 'receiptFolder', 'budget'].includes(props.activeView) && props.detailMode)
|
|
const isDocuments = computed(() => props.activeView === 'documents' && !props.detailMode)
|
|
const isRequests = computed(() => props.activeView === 'requests')
|
|
const isDigitalEmployees = computed(() => props.activeView === 'digitalEmployees')
|
|
const isApproval = computed(() => props.activeView === 'approval')
|
|
const isPolicies = computed(() => props.activeView === 'policies')
|
|
const isEmployees = computed(() => props.activeView === 'employees')
|
|
const eyebrowLabel = computed(() => (
|
|
String(props.currentView?.eyebrow || '').trim()
|
|
|| (isChat.value ? 'Smart Finance Q&A' : 'Smart Expense Operations')
|
|
))
|
|
const displayCompanyName = computed(() => String(props.companyName || '远光软件股份有限公司').trim() || '远光软件股份有限公司')
|
|
const MAX_NOTIFICATION_ITEMS = 30
|
|
const {
|
|
markDocumentInboxRowRead,
|
|
markDocumentInboxRowsRead,
|
|
notificationRows: documentInboxNotificationRows,
|
|
refreshDocumentInbox,
|
|
startDocumentInboxPolling,
|
|
stopDocumentInboxPolling
|
|
} = useDocumentCenterInbox()
|
|
let documentInboxInitialRefreshTimer = null
|
|
const {
|
|
notificationOpen,
|
|
helpOpen,
|
|
notificationWrapRef,
|
|
helpWrapRef,
|
|
topbarHelpDemo,
|
|
toggleNotification,
|
|
toggleHelp,
|
|
closeNotification,
|
|
closeHelp
|
|
} = useTopBarWorkbenchPopovers()
|
|
const {
|
|
readNotificationIds,
|
|
hideNotificationStates,
|
|
isNotificationHidden,
|
|
isNotificationRead,
|
|
loadNotificationStates,
|
|
markNotificationStateRead
|
|
} = useTopBarNotificationStates()
|
|
const notificationTab = ref('unread')
|
|
|
|
function normalizeNotificationId(value) {
|
|
return String(value || '').trim()
|
|
}
|
|
|
|
function formatNotificationTime(value) {
|
|
const date = new Date(value)
|
|
if (!Number.isFinite(date.getTime())) {
|
|
return '最近更新'
|
|
}
|
|
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
const hour = String(date.getHours()).padStart(2, '0')
|
|
const minute = String(date.getMinutes()).padStart(2, '0')
|
|
return `${month}-${day} ${hour}:${minute}`
|
|
}
|
|
|
|
function resolveDocumentNotificationTone(row) {
|
|
if (row?.source === 'approval') {
|
|
return 'warning'
|
|
}
|
|
|
|
return row?.isUnread ? 'info' : 'success'
|
|
}
|
|
|
|
function resolveDocumentNotificationDescription(row) {
|
|
return [
|
|
row?.title,
|
|
row?.initiatorName ? `发起人 ${row.initiatorName}` : '',
|
|
row?.statusLabel ? `状态 ${row.statusLabel}` : ''
|
|
].filter(Boolean).join(' · ') || '单据中心有新的单据状态'
|
|
}
|
|
|
|
function resolveWorkbenchNotificationId(item, index) {
|
|
return normalizeNotificationId(`workbench:${item?.id || [item?.title, item?.description, item?.time, index].join('|')}`)
|
|
}
|
|
|
|
const documentNotificationItems = computed(() =>
|
|
documentInboxNotificationRows.value
|
|
.map((row) => {
|
|
const id = normalizeNotificationId(`document:${row.documentKey || row.claimId || row.documentNo}`)
|
|
if (!id || isNotificationHidden(id)) {
|
|
return null
|
|
}
|
|
const unread = Boolean(row.isUnread) && !isNotificationRead(id)
|
|
|
|
return {
|
|
id,
|
|
kind: 'document',
|
|
title: `${row.documentTypeLabel || '单据'} ${row.documentNo || row.claimId || '待生成'}`,
|
|
description: resolveDocumentNotificationDescription(row),
|
|
time: formatNotificationTime(row.updatedAt || row.createdAt),
|
|
category: row.sourceLabel || '单据中心',
|
|
tone: resolveDocumentNotificationTone({ ...row, isUnread: unread }),
|
|
unread,
|
|
icon: row.source === 'approval' ? 'mdi mdi-clipboard-text-clock-outline' : 'mdi mdi-file-document-outline',
|
|
badge: unread ? '新' : '',
|
|
target: {
|
|
type: 'document',
|
|
id: row.claimId,
|
|
claimNo: row.documentNo
|
|
},
|
|
documentRow: row
|
|
}
|
|
})
|
|
.filter(Boolean)
|
|
)
|
|
|
|
const workbenchNotificationItems = computed(() => (
|
|
Array.isArray(props.workbenchSummary?.notifications)
|
|
? props.workbenchSummary.notifications.map((item, index) => {
|
|
const id = resolveWorkbenchNotificationId(item, index)
|
|
if (!id || isNotificationHidden(id)) {
|
|
return null
|
|
}
|
|
|
|
return {
|
|
...item,
|
|
id,
|
|
kind: 'workbench',
|
|
category: item.category || '个人工作台',
|
|
unread: Boolean(item.unread) && !readNotificationIds.value.has(id),
|
|
icon: item.icon || resolveNotificationIcon(item)
|
|
}
|
|
}).filter(Boolean)
|
|
: []
|
|
))
|
|
const notificationItems = computed(() =>
|
|
[...documentNotificationItems.value, ...workbenchNotificationItems.value].slice(0, MAX_NOTIFICATION_ITEMS)
|
|
)
|
|
const unreadNotifications = computed(() => notificationItems.value.filter((item) => item.unread))
|
|
const readNotifications = computed(() => notificationItems.value.filter((item) => !item.unread))
|
|
const activeNotifications = computed(() => (
|
|
notificationTab.value === 'unread' ? unreadNotifications.value : readNotifications.value
|
|
))
|
|
const topbarNotificationCount = computed(() => {
|
|
const count = unreadNotifications.value.length
|
|
return count > 0 ? Math.min(count, 99) : 0
|
|
})
|
|
|
|
function clearDocumentInboxInitialRefreshTimer() {
|
|
if (documentInboxInitialRefreshTimer && typeof window !== 'undefined') {
|
|
window.clearTimeout(documentInboxInitialRefreshTimer)
|
|
documentInboxInitialRefreshTimer = null
|
|
}
|
|
}
|
|
|
|
function scheduleDocumentInboxInitialRefresh() {
|
|
if (typeof window === 'undefined') {
|
|
return
|
|
}
|
|
|
|
clearDocumentInboxInitialRefreshTimer()
|
|
documentInboxInitialRefreshTimer = window.setTimeout(() => {
|
|
documentInboxInitialRefreshTimer = null
|
|
void refreshDocumentInbox()
|
|
}, props.activeView === 'workbench' ? 1200 : 6000)
|
|
}
|
|
|
|
function resolveNotificationIcon(item) {
|
|
if (item?.icon) {
|
|
return item.icon
|
|
}
|
|
|
|
if (item?.tone === 'danger') {
|
|
return 'mdi mdi-alert-circle-outline'
|
|
}
|
|
|
|
if (item?.tone === 'warning') {
|
|
return 'mdi mdi-alert-outline'
|
|
}
|
|
|
|
if (item?.tone === 'success') {
|
|
return 'mdi mdi-check-circle-outline'
|
|
}
|
|
|
|
return 'mdi mdi-bell-outline'
|
|
}
|
|
|
|
function markNotificationRead(item) {
|
|
if (!item?.id || !item.unread) {
|
|
return
|
|
}
|
|
|
|
if (item.kind === 'document' && item.documentRow) {
|
|
markDocumentInboxRowRead(item.documentRow)
|
|
}
|
|
|
|
void markNotificationStateRead(item)
|
|
}
|
|
|
|
function clearAllNotifications() {
|
|
const currentItems = notificationItems.value
|
|
if (!currentItems.length) {
|
|
return
|
|
}
|
|
|
|
const documentRows = currentItems
|
|
.filter((item) => item.kind === 'document' && item.documentRow)
|
|
.map((item) => item.documentRow)
|
|
|
|
if (documentRows.length) {
|
|
markDocumentInboxRowsRead(documentRows)
|
|
}
|
|
|
|
void hideNotificationStates(currentItems)
|
|
notificationTab.value = 'unread'
|
|
}
|
|
|
|
function openNotification(item) {
|
|
markNotificationRead(item)
|
|
closeNotification()
|
|
const target = item?.target || {}
|
|
if (target.type === 'document' && (target.id || target.claimNo)) {
|
|
emit('openDocument', {
|
|
claimId: target.id,
|
|
id: target.id || target.claimNo,
|
|
claimNo: target.claimNo
|
|
})
|
|
}
|
|
}
|
|
|
|
const requestKpis = computed(() => {
|
|
const summary = props.requestSummary ?? {}
|
|
const total = Number(summary.total ?? 0)
|
|
const draft = Number(summary.draft ?? 0)
|
|
const inProgress = Number(summary.inProgress ?? 0)
|
|
const completed = Number(summary.completed ?? 0)
|
|
|
|
return [
|
|
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: 'var(--theme-primary)' },
|
|
{ label: '草稿', value: draft, delta: '待提交', trend: draft > 0 ? 'down' : 'up', arrow: draft > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#f59e0b' },
|
|
{ label: '审批中', value: inProgress, delta: '处理中', trend: inProgress > 0 ? 'up' : 'down', arrow: inProgress > 0 ? 'mdi mdi-arrow-up' : 'mdi mdi-minus', color: '#3b82f6' },
|
|
{ label: '已完成', value: completed, delta: '已归档', trend: 'up', arrow: 'mdi mdi-arrow-up' , color: 'var(--success)' }
|
|
]
|
|
})
|
|
|
|
const documentKpis = computed(() => {
|
|
const summary = props.documentSummary ?? {}
|
|
const total = Number(summary.total ?? 0)
|
|
const toSubmit = Number(summary.toSubmit ?? 0)
|
|
const toProcess = Number(summary.toProcess ?? 0)
|
|
const archived = Number(summary.archived ?? 0)
|
|
|
|
return [
|
|
{ label: '全部单据', value: total, delta: '当前', trend: 'up', arrow: 'mdi mdi-minus', color: 'var(--theme-primary)' },
|
|
{ label: '待提交', value: toSubmit, delta: '草稿待办', trend: toSubmit > 0 ? 'down' : 'up', arrow: toSubmit > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#f59e0b' },
|
|
{ label: '待我处理', value: toProcess, delta: '审批待办', trend: toProcess > 0 ? 'down' : 'up', arrow: toProcess > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus', color: '#3b82f6' },
|
|
{ label: '已归档', value: archived, delta: '归档入账', trend: 'up', arrow: 'mdi mdi-arrow-up', color: 'var(--success)' }
|
|
]
|
|
})
|
|
|
|
const showDigitalEmployeeWorkRecordKpis = computed(() => {
|
|
const summary = props.digitalEmployeeSummary ?? {}
|
|
return isDigitalEmployees.value && summary.section === 'workRecords'
|
|
})
|
|
|
|
const digitalEmployeeWorkRecordKpis = computed(() => {
|
|
const summary = props.digitalEmployeeSummary ?? {}
|
|
const total = Number(summary.total ?? 0)
|
|
const succeeded = Number(summary.succeeded ?? 0)
|
|
const failed = Number(summary.failed ?? 0)
|
|
|
|
return [
|
|
{
|
|
label: '日志总数',
|
|
value: total,
|
|
delta: '当前',
|
|
trend: 'up',
|
|
arrow: 'mdi mdi-minus',
|
|
color: 'var(--theme-primary)'
|
|
},
|
|
{
|
|
label: '成功数量',
|
|
value: succeeded,
|
|
delta: total ? `占比 ${Math.round((succeeded / total) * 100)}%` : '等待数据',
|
|
trend: 'up',
|
|
arrow: succeeded > 0 ? 'mdi mdi-arrow-up' : 'mdi mdi-minus',
|
|
color: 'var(--success)'
|
|
},
|
|
{
|
|
label: '失败数量',
|
|
value: failed,
|
|
delta: failed > 0 ? '需要关注' : '暂无失败',
|
|
trend: failed > 0 ? 'down' : 'up',
|
|
arrow: failed > 0 ? 'mdi mdi-arrow-down' : 'mdi mdi-minus',
|
|
color: '#ef4444'
|
|
}
|
|
]
|
|
})
|
|
|
|
const chatKpis = [
|
|
{ label: '今日已问数', value: 86, unit: '次', meta: '较昨日 +18', trend: 'up', color: 'var(--theme-primary)' },
|
|
{ label: '已解决问题', value: 72, unit: '条', meta: '解决率 83.7%', trend: 'up', color: '#3b82f6' },
|
|
{ label: '知识命中率', value: '92.3', unit: '%', meta: '较昨日 +2.6%', trend: 'up', color: '#8b5cf6' },
|
|
{ label: '平均响应时长', value: 2.1, unit: 's', meta: '较昨日 -0.3s', trend: 'down', color: '#f59e0b' }
|
|
]
|
|
|
|
const approvalKpis = [
|
|
{ label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', trend: 'up', color: 'var(--theme-primary)' },
|
|
{ label: '高风险单据', value: 4, unit: '单', meta: '较昨日 +1', trend: 'up', color: '#ef4444' },
|
|
{ label: '即将超时', value: 3, unit: '单', meta: '30 分钟内', trend: 'down', color: '#f59e0b' },
|
|
{ label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', trend: 'up', color: 'var(--success)' }
|
|
]
|
|
|
|
const knowledgeKpis = computed(() => {
|
|
const summary = props.knowledgeSummary ?? {}
|
|
const totalDocuments = Number(summary.totalDocuments ?? 0)
|
|
|
|
return [
|
|
{
|
|
label: '文档总数',
|
|
value: String(totalDocuments),
|
|
meta: '',
|
|
trend: 'up',
|
|
color: 'var(--theme-primary)'
|
|
}
|
|
]
|
|
})
|
|
|
|
const employeeKpis = computed(() => {
|
|
const summary = props.employeeSummary ?? {}
|
|
const total = Number(summary.total ?? 0)
|
|
const active = Number(summary.active ?? 0)
|
|
const onboarding = Number(summary.onboarding ?? 0)
|
|
const disabled = Number(summary.disabled ?? 0)
|
|
const followUp = Number(summary.followUp ?? 0)
|
|
const departments = Number(summary.departments ?? 0)
|
|
|
|
return [
|
|
{
|
|
label: '员工总数',
|
|
value: total,
|
|
unit: '人',
|
|
meta: `覆盖 ${departments} 个部门`,
|
|
trend: 'up',
|
|
color: 'var(--theme-primary)'
|
|
},
|
|
{
|
|
label: '在职账号',
|
|
value: active,
|
|
unit: '人',
|
|
meta: total ? `占比 ${Math.round((active / total) * 100)}%` : '等待数据',
|
|
trend: 'up',
|
|
color: '#3b82f6'
|
|
},
|
|
{
|
|
label: '待处理状态',
|
|
value: onboarding + disabled,
|
|
unit: '人',
|
|
meta: `试用 ${onboarding} / 停用 ${disabled}`,
|
|
trend: onboarding + disabled > 0 ? 'down' : 'up',
|
|
color: '#f59e0b'
|
|
},
|
|
{
|
|
label: '同步待处理',
|
|
value: followUp,
|
|
unit: '人',
|
|
meta: followUp > 0 ? '存在待同步账号' : '资料已同步',
|
|
trend: followUp > 0 ? 'down' : 'up',
|
|
color: '#8b5cf6'
|
|
}
|
|
]
|
|
})
|
|
const calendarOpen = ref(false)
|
|
const draftStart = ref(props.customRange.start)
|
|
const draftEnd = ref(props.customRange.end)
|
|
const overviewDashboardOptions = [
|
|
{ label: '财务看板', value: 'finance' },
|
|
{ label: '风险看板', value: 'risk' },
|
|
{ label: '数字员工看板', value: 'digitalEmployee' },
|
|
{ label: '系统看板', value: 'system' }
|
|
]
|
|
const overviewDashboardValue = computed({
|
|
get: () => props.overviewDashboard,
|
|
set: (value) => emit('update:overviewDashboard', value)
|
|
})
|
|
|
|
const rangeOptions = computed(() =>
|
|
props.ranges.map((range, index) => ({
|
|
value: range,
|
|
label: String(range)
|
|
}))
|
|
)
|
|
|
|
const activeOption = computed(() =>
|
|
rangeOptions.value.find((option) => option.value === props.activeRange) ?? rangeOptions.value[0]
|
|
)
|
|
|
|
const isCustomRange = computed(() => props.activeRange === 'custom')
|
|
const activeDateLabel = computed(() => {
|
|
if (isCustomRange.value) return formatRangeLabel(props.customRange.start, props.customRange.end)
|
|
return buildPresetRangeLabel(activeOption.value?.label)
|
|
})
|
|
|
|
const canApplyCustomRange = computed(() =>
|
|
Boolean(draftStart.value && draftEnd.value && draftStart.value <= draftEnd.value)
|
|
)
|
|
|
|
watch(
|
|
() => props.customRange,
|
|
(range) => {
|
|
draftStart.value = range.start
|
|
draftEnd.value = range.end
|
|
},
|
|
{ deep: true }
|
|
)
|
|
|
|
watch(
|
|
() => props.activeView,
|
|
(activeView, previousView) => {
|
|
if (activeView === 'workbench' && previousView !== 'workbench') {
|
|
clearDocumentInboxInitialRefreshTimer()
|
|
void loadNotificationStates()
|
|
void refreshDocumentInbox({ force: true })
|
|
}
|
|
if (activeView !== 'workbench') {
|
|
closeNotification()
|
|
closeHelp()
|
|
}
|
|
}
|
|
)
|
|
|
|
watch(notificationOpen, (open) => {
|
|
if (open) {
|
|
void loadNotificationStates()
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
void loadNotificationStates()
|
|
scheduleDocumentInboxInitialRefresh()
|
|
startDocumentInboxPolling()
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
clearDocumentInboxInitialRefreshTimer()
|
|
stopDocumentInboxPolling()
|
|
})
|
|
|
|
function setRange(range) {
|
|
emit('update:activeRange', range)
|
|
calendarOpen.value = false
|
|
}
|
|
|
|
function applyCustomRange() {
|
|
if (!canApplyCustomRange.value) return
|
|
emit('update:customRange', { start: draftStart.value, end: draftEnd.value })
|
|
emit('update:activeRange', 'custom')
|
|
calendarOpen.value = false
|
|
}
|
|
|
|
function formatRangeLabel(start, end) {
|
|
if (!start || !end) return '选择时间段'
|
|
if (start === end) return start
|
|
return `${start} ~ ${end}`
|
|
}
|
|
|
|
function buildPresetRangeLabel(label) {
|
|
const now = new Date()
|
|
const today = formatDateValue(now)
|
|
|
|
if (label === '今日') {
|
|
return today
|
|
}
|
|
|
|
if (label === '近10日') {
|
|
const start = new Date(now)
|
|
start.setHours(0, 0, 0, 0)
|
|
start.setDate(start.getDate() - 9)
|
|
return `${formatDateValue(start)} ~ ${today}`
|
|
}
|
|
|
|
if (label === '本周') {
|
|
const start = new Date(now)
|
|
const day = start.getDay() || 7
|
|
start.setHours(0, 0, 0, 0)
|
|
start.setDate(start.getDate() - day + 1)
|
|
return `${formatDateValue(start)} ~ ${today}`
|
|
}
|
|
|
|
if (label === '本月') {
|
|
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
|
|
}
|
|
|
|
return today
|
|
}
|
|
</script>
|
|
|
|
<style scoped src="../../assets/styles/components/top-bar.css"></style>
|