feat: 新增员工行为画像算法与费用风险标签体系
后端新增员工行为画像算法模块，支持标签规则引擎和评分计算， 完善员工模型、银行信息、序列化和导入逻辑，优化报销审批流 和工作流常量，增强 Hermes 同步和知识同步能力，前端新增费 用画像详情弹窗、雷达图和风险卡片组件，完善登录页和工作台 样式，优化文档中心和归档中心交互，补充单元测试。
This commit is contained in:
caoxiaozhu
BIN
web/UI/topbar.png
Normal file
BIN
web/UI/topbar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@@ -166,7 +166,8 @@
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.workarea.workbench-workarea {
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
.workarea.settings-workarea {
|
||||
@@ -191,18 +192,63 @@
|
||||
}
|
||||
|
||||
.app-sidebar {
|
||||
width: var(--sidebar-collapsed-width);
|
||||
flex: 0 0 var(--sidebar-collapsed-width);
|
||||
transition: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
width: min(320px, 80vw);
|
||||
max-width: none;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.app.mobile-sidebar-open .app-sidebar {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.app > .main {
|
||||
flex: 1 1 auto;
|
||||
width: calc(100vw - var(--sidebar-collapsed-width));
|
||||
flex: 1 1 100%;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.workarea { padding: 18px 16px 28px; }
|
||||
.workarea.workbench-workarea { overflow: auto; padding: 14px; }
|
||||
|
||||
.mobile-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.app.mobile-sidebar-open .mobile-overlay {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.mobile-hamburger-btn {
|
||||
position: fixed;
|
||||
top: 14px;
|
||||
right: 16px;
|
||||
z-index: 90;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--text-primary);
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
padding: 10px 12px;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.side-panel .section-head {
|
||||
@@ -29,17 +29,24 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 24px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
min-height: 26px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--workbench-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background-color 180ms var(--ease),
|
||||
color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.detail-action:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.18);
|
||||
background: var(--workbench-primary-soft);
|
||||
color: var(--workbench-primary-active);
|
||||
}
|
||||
|
||||
@@ -58,6 +65,7 @@
|
||||
.insight-profile-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -69,13 +77,20 @@
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 0;
|
||||
padding: 6px 0;
|
||||
border-top: 1px solid var(--workbench-line-soft);
|
||||
padding: 7px 9px;
|
||||
border: 1px solid var(--workbench-line-soft);
|
||||
border-left: 2px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.3);
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background-color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.insight-metric-row:first-child,
|
||||
.insight-profile-card:first-child {
|
||||
border-top: 0;
|
||||
.insight-metric-row:hover,
|
||||
.insight-profile-card:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.22);
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.insight-metric-label,
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
/* 1080p / 小高度屏：进一步压缩 AI 助手卡片高度 */
|
||||
@media (max-height: 980px) {
|
||||
/* 1080p / 小高度屏：进一步压缩 AI 助手卡片高度 (排除手机端) */
|
||||
@media (max-height: 980px) and (min-width: 761px) {
|
||||
.workbench {
|
||||
--hero-padding-top: 20px;
|
||||
--hero-padding-bottom: 12px;
|
||||
--hero-title-size: 28px;
|
||||
--hero-copy-gap: 5px;
|
||||
--hero-title-bottom-gap: 14px;
|
||||
--composer-min-height: 108px;
|
||||
--composer-textarea-height: 48px;
|
||||
--composer-padding-block: 10px;
|
||||
@@ -71,6 +72,14 @@
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.capability-grid--privileged {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-grid--standard {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
padding: 17px 12px 17px 22px;
|
||||
}
|
||||
@@ -95,6 +104,13 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.workbench {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-art-width: min(540px, 50vw);
|
||||
--assistant-art-x: 36px;
|
||||
@@ -108,10 +124,14 @@
|
||||
width: min(820px, 92%);
|
||||
}
|
||||
|
||||
.capability-grid {
|
||||
.capability-grid--privileged {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-grid--standard {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.workbench-content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -169,6 +189,8 @@
|
||||
}
|
||||
|
||||
.capability-grid,
|
||||
.capability-grid--privileged,
|
||||
.capability-grid--standard,
|
||||
.side-column {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@@ -196,3 +218,225 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 针对低高度视口（如低于 840px，包含大部分笔记本 768px 高度），解除 height: 100% 限制，让内容流式高度，防止纵向元素被过度压扁 (排除手机端) */
|
||||
@media (max-height: 840px) and (min-width: 761px) {
|
||||
.workbench {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto var(--capability-row-height) auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端/窄屏自适应优化 (560px 以下) */
|
||||
@media (max-width: 560px) {
|
||||
/* 常用提问横向滑动展示，避免折行过多撑爆高度 */
|
||||
.quick-prompts {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.quick-prompts span {
|
||||
display: none; /* 隐藏“常用提问：”前缀，以最大化利用横向空间 */
|
||||
}
|
||||
|
||||
.quick-prompts button {
|
||||
flex-shrink: 0;
|
||||
padding: 0 10px;
|
||||
min-height: 26px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 隐藏常用提问横滑条的原生滚动条，保持精致视觉 */
|
||||
.quick-prompts::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.assistant-hero {
|
||||
--assistant-art-width: min(280px, 70vw);
|
||||
padding: 20px 14px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 手机端/窄屏自适应优化 (480px 以下) */
|
||||
@media (max-width: 480px) {
|
||||
/* 输入框更小巧 */
|
||||
.assistant-composer {
|
||||
padding: 10px 12px;
|
||||
min-height: 94px;
|
||||
}
|
||||
|
||||
.assistant-composer textarea {
|
||||
font-size: 14px;
|
||||
height: 42px;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.composer-toolbar {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-related-button,
|
||||
.composer-send-button {
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.composer-icon-button {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.composer-related-button {
|
||||
padding: 0 10px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
width: 46px;
|
||||
}
|
||||
|
||||
/* 限制上传的附件文件芯片的最大宽度，防止溢出 */
|
||||
.assistant-file-chip {
|
||||
max-width: 110px;
|
||||
}
|
||||
|
||||
/* AI 财务助手卡片尺寸更精致 */
|
||||
.capability-card {
|
||||
padding: 12px 10px 12px 14px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.capability-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
padding-left: 6px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.capability-copy strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.capability-copy small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 我的待办列表项更精致 */
|
||||
.todo-row {
|
||||
padding: 5px 0;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.todo-copy strong {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.todo-copy small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.todo-status {
|
||||
font-size: 11px;
|
||||
min-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.todo-meta small {
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
/* 重点优化：费用进度行的网格区域（Grid Area）双行重构 */
|
||||
.progress-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"identity result"
|
||||
"steps steps";
|
||||
gap: 8px;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-identity {
|
||||
grid-area: identity;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-identity strong {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.progress-identity small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.progress-result {
|
||||
grid-area: result;
|
||||
width: 100%;
|
||||
justify-items: end; /* 金额和状态右对齐 */
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.progress-result strong {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.progress-status {
|
||||
font-size: 11px;
|
||||
min-height: 18px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.progress-steps {
|
||||
grid-area: steps;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 缩小步骤图图标与连线 */
|
||||
.progress-step i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.progress-step small {
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.progress-step::before {
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
/* 侧边分析栏优化 */
|
||||
.side-panel {
|
||||
padding: 8px 10px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.insight-metric-row,
|
||||
.insight-profile-card {
|
||||
padding: 6px 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.insight-metric-label,
|
||||
.insight-profile-label {
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.insight-metric-value,
|
||||
.insight-profile-value {
|
||||
font-size: 13.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
--hero-padding-bottom: 14px;
|
||||
--hero-title-size: 30px;
|
||||
--hero-copy-gap: 6px;
|
||||
--hero-title-bottom-gap: 18px;
|
||||
--composer-min-height: 122px;
|
||||
--composer-textarea-height: 54px;
|
||||
--composer-padding-block: 12px;
|
||||
@@ -61,11 +62,11 @@
|
||||
overflow: visible;
|
||||
padding: var(--hero-padding-top) 20px var(--hero-padding-bottom) 52px;
|
||||
border: 1px solid color-mix(in srgb, var(--workbench-primary) 14%, var(--workbench-line));
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.9) 44%, rgba(255, 255, 255, 0.16) 66%, rgba(255, 255, 255, 0.02) 100%),
|
||||
linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--workbench-primary-soft) 56%, #ffffff) 62%, color-mix(in srgb, var(--workbench-secondary) 8%, #ffffff) 100%);
|
||||
box-shadow: 0 8px 20px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.06);
|
||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@@ -87,8 +88,7 @@
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 58%),
|
||||
radial-gradient(circle at 84% 62%, rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08), transparent 36%);
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 58%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.assistant-copy h1 {
|
||||
margin: 0;
|
||||
margin: 0 0 var(--hero-title-bottom-gap);
|
||||
color: var(--workbench-ink);
|
||||
font-size: var(--hero-title-size);
|
||||
line-height: 1.18;
|
||||
@@ -130,11 +130,9 @@
|
||||
min-height: var(--composer-min-height);
|
||||
padding: var(--composer-padding-block) 18px 10px;
|
||||
border: 1px solid rgba(var(--theme-primary-rgb, 58, 124, 165), 0.28);
|
||||
border-radius: 9px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow:
|
||||
0 8px 18px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@@ -173,7 +171,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
border-radius: 7px;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -204,10 +202,10 @@
|
||||
|
||||
.composer-send-button {
|
||||
width: 56px;
|
||||
background: var(--theme-gradient-primary);
|
||||
background: var(--workbench-primary-active);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
box-shadow: 0 10px 20px var(--theme-primary-shadow);
|
||||
box-shadow: 0 6px 14px rgba(var(--theme-primary-rgb, 58, 124, 165), 0.16);
|
||||
}
|
||||
|
||||
.assistant-file-strip {
|
||||
@@ -224,7 +222,7 @@
|
||||
max-width: 220px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
@@ -265,7 +263,7 @@
|
||||
min-height: 28px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--workbench-line);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
color: var(--workbench-text);
|
||||
font-size: 13px;
|
||||
@@ -286,11 +284,18 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.capability-grid--privileged {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-grid--standard {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.capability-card {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
@@ -302,12 +307,11 @@
|
||||
padding: 17px 12px 17px 26px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--workbench-line);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid color-mix(in srgb, var(--capability-color) 54%, var(--workbench-line));
|
||||
border-radius: 4px;
|
||||
background: var(--workbench-surface);
|
||||
text-align: left;
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.98) inset,
|
||||
0 6px 16px rgba(15, 23, 42, 0.035);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
|
||||
}
|
||||
|
||||
.capability-card::after {
|
||||
@@ -319,12 +323,12 @@
|
||||
height: 40px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 9px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid color-mix(in srgb, var(--capability-color) 20%, #ffffff);
|
||||
background: var(--capability-soft);
|
||||
color: var(--capability-color);
|
||||
font-size: 24px;
|
||||
box-shadow: 0 6px 14px color-mix(in srgb, var(--capability-color) 10%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.capability-copy {
|
||||
@@ -364,23 +368,23 @@
|
||||
}
|
||||
|
||||
.capability-card--blue {
|
||||
--capability-color: var(--workbench-chart-blue);
|
||||
--capability-soft: color-mix(in srgb, var(--workbench-chart-blue) 10%, #ffffff);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--emerald {
|
||||
--capability-color: var(--success);
|
||||
--capability-soft: var(--success-soft);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--violet {
|
||||
--capability-color: var(--workbench-chart-purple);
|
||||
--capability-soft: color-mix(in srgb, var(--workbench-chart-purple) 10%, #ffffff);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--cyan {
|
||||
--capability-color: var(--workbench-secondary);
|
||||
--capability-soft: color-mix(in srgb, var(--workbench-secondary) 10%, #ffffff);
|
||||
--capability-color: var(--workbench-primary);
|
||||
--capability-soft: var(--workbench-primary-soft);
|
||||
}
|
||||
|
||||
.capability-card--amber {
|
||||
@@ -403,9 +407,9 @@
|
||||
overflow: hidden;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--workbench-line);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--workbench-surface);
|
||||
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.035);
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
|
||||
}
|
||||
|
||||
.todo-panel,
|
||||
@@ -446,7 +450,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
border-radius: 4px;
|
||||
background: var(--workbench-primary-soft);
|
||||
color: var(--workbench-primary-active);
|
||||
font-size: 13px;
|
||||
@@ -498,7 +502,7 @@
|
||||
}
|
||||
|
||||
.todo-row :deep(.workbench-list-icon__panel) {
|
||||
border-radius: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.todo-row :deep(.workbench-list-icon__art),
|
||||
|
||||
@@ -555,13 +555,41 @@
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
@media (max-width: 980px) and (min-width: 761px) {
|
||||
.rail {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.rail {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 100dvh;
|
||||
min-height: 100dvh;
|
||||
box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.rail-collapse-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rail-nav {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-height: 52px;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rail *,
|
||||
.rail *::before,
|
||||
|
||||
@@ -288,6 +288,98 @@
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.topbar-toolset {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 18px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topbar-icon-btn {
|
||||
position: relative;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: #111827;
|
||||
font-size: 23px;
|
||||
line-height: 1;
|
||||
transition:
|
||||
color 160ms var(--ease),
|
||||
background 160ms var(--ease);
|
||||
}
|
||||
|
||||
.topbar-icon-btn:hover {
|
||||
background: var(--theme-primary-light-9);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 1px;
|
||||
min-width: 13px;
|
||||
height: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 3px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 8px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
box-shadow: 0 5px 10px rgba(239, 68, 68, .22);
|
||||
}
|
||||
|
||||
.company-switcher {
|
||||
max-width: min(220px, 28vw);
|
||||
height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 14px 0 16px;
|
||||
border: 1px solid #edf1f5;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #111827;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(15, 23, 42, .04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, .92);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
border-color 160ms var(--ease),
|
||||
box-shadow 160ms var(--ease),
|
||||
color 160ms var(--ease);
|
||||
}
|
||||
|
||||
.company-switcher:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), .26);
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb, 58, 124, 165), .08);
|
||||
}
|
||||
|
||||
.company-switcher span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.company-switcher .mdi {
|
||||
flex: 0 0 auto;
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.kpi-chip {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
@@ -370,6 +462,7 @@
|
||||
.top-actions,
|
||||
.search-wrap,
|
||||
.search-wrap.wide,
|
||||
.topbar-toolset,
|
||||
.detail-alert-strip,
|
||||
.month-chip,
|
||||
.qa-filter,
|
||||
@@ -381,6 +474,10 @@
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.topbar-toolset {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.range-shell {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -400,6 +497,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.title-group {
|
||||
padding-right: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar {
|
||||
gap: 14px;
|
||||
@@ -427,6 +530,16 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topbar-toolset {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.company-switcher {
|
||||
flex: 1 1 auto;
|
||||
max-width: none;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.range-combo {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
|
||||
@@ -433,7 +433,8 @@
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.field input {
|
||||
.field input,
|
||||
.field select {
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
padding: 0 50px 0 48px;
|
||||
@@ -445,17 +446,35 @@
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
|
||||
}
|
||||
|
||||
.field select {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.field input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.field input:focus {
|
||||
.field input:focus,
|
||||
.field select:focus {
|
||||
border-color: var(--theme-primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring, rgba(58, 124, 165, .14));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.field-select-chevron {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
color: #64748b;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.field-icon-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
|
||||
590
web/src/components/business/ExpenseProfileDetailModal.vue
Normal file
590
web/src/components/business/ExpenseProfileDetailModal.vue
Normal file
@@ -0,0 +1,590 @@
|
||||
<template>
|
||||
<ElDialog
|
||||
:model-value="visible"
|
||||
append-to-body
|
||||
align-center
|
||||
width="min(1040px, calc(100vw - 48px))"
|
||||
:show-close="false"
|
||||
:lock-scroll="true"
|
||||
:destroy-on-close="false"
|
||||
class="expense-profile-dialog"
|
||||
modal-class="expense-profile-dialog-overlay"
|
||||
body-class="expense-profile-dialog-body"
|
||||
transition="expense-profile-dialog-zoom"
|
||||
aria-labelledby="expense-profile-modal-title"
|
||||
@update:model-value="handleVisibleChange"
|
||||
>
|
||||
<template #header>
|
||||
<header class="profile-dialog-header">
|
||||
<div class="profile-dialog-title-block">
|
||||
<span class="profile-dialog-eyebrow">Expense Behavior Profile</span>
|
||||
<h2 id="expense-profile-modal-title">{{ userName }}的费用画像详情</h2>
|
||||
<p>基于近 30 天费用操作、AI 协作、提单效率和预审质量形成。</p>
|
||||
</div>
|
||||
|
||||
<ElButton
|
||||
class="profile-dialog-close"
|
||||
text
|
||||
aria-label="关闭费用画像详情"
|
||||
@click="emitClose"
|
||||
>
|
||||
<i class="mdi mdi-close"></i>
|
||||
</ElButton>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<section class="profile-dialog-content" aria-label="费用画像分析">
|
||||
<section class="profile-summary-grid" aria-label="画像核心指标">
|
||||
<article v-for="metric in metrics" :key="metric.key" class="profile-summary-item">
|
||||
<span>{{ metric.label }}</span>
|
||||
<strong>{{ metric.value }}<small>{{ metric.unit }}</small></strong>
|
||||
<em>{{ metric.hint }}</em>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<div class="profile-analysis-grid">
|
||||
<section class="profile-panel profile-tags-panel" aria-label="画像标签">
|
||||
<div class="profile-section-title">
|
||||
<div>
|
||||
<span>画像标签</span>
|
||||
<small>按分数和业务解释排序</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-tag-list">
|
||||
<article
|
||||
v-for="tag in tags"
|
||||
:key="tag.code"
|
||||
:class="['profile-tag-item', `profile-tag-item--${tag.tone}`]"
|
||||
>
|
||||
<div class="profile-tag-copy">
|
||||
<strong>{{ tag.displayLabel || tag.label }}</strong>
|
||||
<span>{{ tag.reason }}</span>
|
||||
</div>
|
||||
<ElTag
|
||||
class="profile-score-tag"
|
||||
:type="resolveProfileTagType(tag.tone)"
|
||||
effect="light"
|
||||
>
|
||||
{{ tag.score }}
|
||||
</ElTag>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="profile-panel profile-radar-panel" aria-label="行为雷达图">
|
||||
<div class="profile-section-title">
|
||||
<div>
|
||||
<span>行为雷达</span>
|
||||
<small>使用项目图表组件组织，分数越高特征越明显</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-radar-layout">
|
||||
<RadarChart
|
||||
class="profile-radar-chart"
|
||||
:items="radarDimensions"
|
||||
label="费用画像评分"
|
||||
/>
|
||||
|
||||
<ul class="profile-radar-list">
|
||||
<li v-for="dimension in radarDimensions" :key="dimension.code">
|
||||
<span>{{ dimension.label }}</span>
|
||||
<strong>{{ dimension.score }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="profile-panel profile-operation-panel" aria-label="最近 5 次操作内容">
|
||||
<div class="profile-section-title">
|
||||
<div>
|
||||
<span>最近 5 次操作内容</span>
|
||||
<small>用于理解画像标签的近期行为依据</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-operation-list">
|
||||
<article v-for="operation in operations" :key="operation.id" class="profile-operation-row">
|
||||
<time>{{ operation.time }}</time>
|
||||
<div class="profile-operation-copy">
|
||||
<strong>{{ operation.action }}</strong>
|
||||
<span>{{ operation.target }} · {{ operation.channel }}</span>
|
||||
</div>
|
||||
<ElTag
|
||||
class="profile-operation-status"
|
||||
:type="resolveOperationStatusType(operation.tone)"
|
||||
effect="light"
|
||||
>
|
||||
{{ operation.status }}
|
||||
</ElTag>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<template #footer>
|
||||
<footer class="profile-dialog-footer">
|
||||
<span>画像仅用于辅助分析，不作为自动审批或处罚依据。</span>
|
||||
<ElButton class="profile-dialog-explain" type="primary" @click="emitExplain">
|
||||
<i class="mdi mdi-robot-outline"></i>
|
||||
<span>让 AI 解读画像</span>
|
||||
</ElButton>
|
||||
</footer>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ElButton, ElDialog, ElTag } from 'element-plus'
|
||||
|
||||
import RadarChart from '../charts/RadarChart.vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
userName: { type: String, default: '同事' },
|
||||
metrics: { type: Array, default: () => [] },
|
||||
tags: { type: Array, default: () => [] },
|
||||
radarDimensions: { type: Array, default: () => [] },
|
||||
operations: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'explain'])
|
||||
|
||||
function emitClose() {
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function emitExplain() {
|
||||
emit('explain')
|
||||
}
|
||||
|
||||
function handleVisibleChange(value) {
|
||||
if (!value) {
|
||||
emitClose()
|
||||
}
|
||||
}
|
||||
|
||||
function resolveProfileTagType(tone) {
|
||||
const normalized = String(tone || '').trim()
|
||||
|
||||
if (['warning', 'risk', 'amber'].includes(normalized)) {
|
||||
return 'warning'
|
||||
}
|
||||
if (['danger', 'high'].includes(normalized)) {
|
||||
return 'danger'
|
||||
}
|
||||
return 'primary'
|
||||
}
|
||||
|
||||
function resolveOperationStatusType(tone) {
|
||||
const normalized = String(tone || '').trim()
|
||||
|
||||
if (['success', 'positive', 'emerald'].includes(normalized)) {
|
||||
return 'success'
|
||||
}
|
||||
if (['warning', 'risk', 'amber'].includes(normalized)) {
|
||||
return 'warning'
|
||||
}
|
||||
if (['danger', 'high'].includes(normalized)) {
|
||||
return 'danger'
|
||||
}
|
||||
return 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:global(.expense-profile-dialog-overlay) {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(15, 23, 42, 0.34), rgba(15, 23, 42, 0.4)),
|
||||
rgba(15, 23, 42, 0.36);
|
||||
}
|
||||
|
||||
:global(.expense-profile-dialog.el-dialog) {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(148, 163, 184, 0.34);
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
|
||||
}
|
||||
|
||||
:global(.expense-profile-dialog .el-dialog__header),
|
||||
:global(.expense-profile-dialog .expense-profile-dialog-body),
|
||||
:global(.expense-profile-dialog .el-dialog__footer) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(.expense-profile-dialog-zoom-enter-active),
|
||||
:global(.expense-profile-dialog-zoom-leave-active) {
|
||||
transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1);
|
||||
}
|
||||
|
||||
:global(.expense-profile-dialog-zoom-enter-active .expense-profile-dialog),
|
||||
:global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog) {
|
||||
transform-origin: center center;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
:global(.expense-profile-dialog-zoom-enter-active .expense-profile-dialog) {
|
||||
animation: expenseProfileDialogIn 240ms cubic-bezier(0.2, 0, 0, 1) both;
|
||||
}
|
||||
|
||||
:global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog) {
|
||||
animation: expenseProfileDialogOut 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
:global(.expense-profile-dialog-zoom-enter-from),
|
||||
:global(.expense-profile-dialog-zoom-leave-to) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.profile-dialog-header,
|
||||
.profile-dialog-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 16px 18px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.profile-dialog-header {
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.profile-dialog-footer {
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.profile-dialog-title-block {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-dialog-eyebrow,
|
||||
.profile-section-title small {
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.profile-dialog-header h2 {
|
||||
margin: 3px 0 4px;
|
||||
color: #0f172a;
|
||||
font-size: 19px;
|
||||
line-height: 1.25;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.profile-dialog-header p,
|
||||
.profile-dialog-footer span {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.profile-dialog-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
color: #334155;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.profile-dialog-close:hover {
|
||||
background: #eef4fb;
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.profile-dialog-content {
|
||||
max-height: min(660px, calc(100vh - 190px));
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
overflow: auto;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.profile-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.profile-summary-item,
|
||||
.profile-panel,
|
||||
.profile-tag-item {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.profile-summary-item {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.profile-summary-item span,
|
||||
.profile-operation-copy span,
|
||||
.profile-operation-row time {
|
||||
color: #64748b;
|
||||
font-size: 11.5px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.profile-summary-item strong {
|
||||
color: #0f172a;
|
||||
font-size: 18px;
|
||||
line-height: 1.15;
|
||||
font-weight: 850;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.profile-summary-item small {
|
||||
margin-left: 2px;
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.profile-summary-item em {
|
||||
overflow: hidden;
|
||||
color: #94a3b8;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
font-weight: 650;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-analysis-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profile-panel {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.profile-section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.profile-section-title > div {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.profile-section-title span {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.profile-tag-list,
|
||||
.profile-operation-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profile-tag-item {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 10px;
|
||||
transition:
|
||||
border-color 180ms var(--ease),
|
||||
background-color 180ms var(--ease);
|
||||
}
|
||||
|
||||
.profile-tag-item:hover {
|
||||
border-color: rgba(var(--theme-primary-rgb, 58, 124, 165), 0.24);
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
.profile-tag-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.profile-tag-copy strong,
|
||||
.profile-operation-copy strong {
|
||||
overflow: hidden;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-tag-copy span {
|
||||
overflow: hidden;
|
||||
color: #64748b;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.4;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-score-tag,
|
||||
.profile-operation-status {
|
||||
border-radius: 4px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.profile-radar-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.72fr);
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.profile-radar-chart {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.profile-radar-list {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.profile-radar-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.profile-radar-list strong {
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.profile-operation-row {
|
||||
display: grid;
|
||||
grid-template-columns: 88px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 9px 0;
|
||||
border-top: 1px solid #e8eef5;
|
||||
}
|
||||
|
||||
.profile-operation-row:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.profile-operation-copy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.profile-operation-status {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.profile-dialog-explain {
|
||||
min-height: 32px;
|
||||
border-radius: 4px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.profile-dialog-explain i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
@keyframes expenseProfileDialogIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.94, 0.94, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes expenseProfileDialogOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.96, 0.96, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
:global(.expense-profile-dialog.el-dialog) {
|
||||
width: calc(100vw - 24px) !important;
|
||||
}
|
||||
|
||||
.profile-summary-grid,
|
||||
.profile-analysis-grid,
|
||||
.profile-radar-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profile-dialog-content {
|
||||
max-height: calc(100vh - 170px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.profile-dialog-header,
|
||||
.profile-dialog-footer {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.profile-dialog-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.profile-operation-row {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.profile-operation-status {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
:global(.expense-profile-dialog-zoom-enter-active .expense-profile-dialog),
|
||||
:global(.expense-profile-dialog-zoom-leave-active .expense-profile-dialog) {
|
||||
animation-duration: 1ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,8 +9,7 @@
|
||||
|
||||
<article class="panel assistant-hero" :style="{ '--assistant-bg-image': `url(${homepageBackground})` }">
|
||||
<div class="assistant-copy">
|
||||
<h1>你的专属 <span>AI 财务助手</span></h1>
|
||||
<p>智能理解财务业务，提供数据洞察与方案建议，高效处理日常事务</p>
|
||||
<h1>嗨，{{ displayUserName }}，我是您的 <span>AI 费用助手</span></h1>
|
||||
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
@@ -92,10 +91,10 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="capability-grid" aria-label="AI 财务助手能力">
|
||||
<div :class="['capability-grid', capabilityGridClass]" aria-label="AI 财务助手能力">
|
||||
<button
|
||||
v-for="item in assistantCapabilities"
|
||||
:key="item.title"
|
||||
v-for="item in visibleAssistantCapabilities"
|
||||
:key="item.key"
|
||||
type="button"
|
||||
class="capability-card panel"
|
||||
:class="`capability-card--${item.tone}`"
|
||||
@@ -226,7 +225,9 @@
|
||||
<button
|
||||
type="button"
|
||||
class="detail-action"
|
||||
@click="openPromptAssistant('查看我的费用画像详情，并总结 AI 使用、提单效率和预审通过率。')"
|
||||
aria-haspopup="dialog"
|
||||
:aria-expanded="expenseProfileModalOpen"
|
||||
@click="openExpenseProfileModal"
|
||||
>
|
||||
<span>查看详情</span>
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
@@ -255,12 +256,24 @@
|
||||
</article>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<ExpenseProfileDetailModal
|
||||
:visible="expenseProfileModalOpen"
|
||||
:user-name="displayUserName"
|
||||
:metrics="expenseProfileModalMetrics"
|
||||
:tags="expenseProfileTags"
|
||||
:radar-dimensions="expenseProfileRadarDimensions"
|
||||
:operations="expenseProfileOperations"
|
||||
@close="closeExpenseProfileModal"
|
||||
@explain="explainExpenseProfile"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import PanelHead from '../shared/PanelHead.vue'
|
||||
import ExpenseProfileDetailModal from './ExpenseProfileDetailModal.vue'
|
||||
import WorkbenchListIcon from '../shared/WorkbenchListIcon.vue'
|
||||
import homepageBackground from '../../assets/homepage_backgraound.png'
|
||||
import { useSystemState } from '../../composables/useSystemState.js'
|
||||
@@ -268,6 +281,9 @@ import { useToast } from '../../composables/useToast.js'
|
||||
import {
|
||||
assistantCapabilities,
|
||||
buildExpenseStatItems,
|
||||
expenseProfileOperations,
|
||||
expenseProfileRadarDimensions,
|
||||
expenseProfileTags,
|
||||
progressItems,
|
||||
progressSteps,
|
||||
quickPromptItems,
|
||||
@@ -296,15 +312,45 @@ const selectedFiles = ref([])
|
||||
const pendingAction = ref('')
|
||||
const latestExpenseConversation = ref(null)
|
||||
const hasLocalExpenseSnapshot = ref(false)
|
||||
const expenseProfileModalOpen = ref(false)
|
||||
const MAX_ATTACHMENTS = 10
|
||||
const SESSION_TYPE_EXPENSE = 'expense'
|
||||
const SESSION_TYPE_KNOWLEDGE = 'knowledge'
|
||||
const FINANCIAL_CAPABILITY_KEYS = new Set(['budget-planning', 'finance-analysis'])
|
||||
const FINANCIAL_CAPABILITY_ROLE_CODES = new Set(['budget_monitor', 'executive', 'admin'])
|
||||
const FINANCIAL_CAPABILITY_ROLE_LABELS = new Set(['预算监控员', '高级财务人员', '管理员'])
|
||||
|
||||
const hasExpenseConversation = computed(() =>
|
||||
Boolean(latestExpenseConversation.value?.conversation_id || latestExpenseConversation.value?.conversationId)
|
||||
|| hasLocalExpenseSnapshot.value
|
||||
)
|
||||
const displayUserName = computed(() => {
|
||||
const user = currentUser.value || {}
|
||||
return String(user.name || user.username || '同事').trim() || '同事'
|
||||
})
|
||||
const expenseActionLabel = computed(() => (hasExpenseConversation.value ? '继续报销' : '新建报销'))
|
||||
const currentRoleCodes = computed(() => {
|
||||
const user = currentUser.value || {}
|
||||
const rawCodes = Array.isArray(user.roleCodes)
|
||||
? user.roleCodes
|
||||
: Array.isArray(user.role_codes)
|
||||
? user.role_codes
|
||||
: []
|
||||
return new Set(rawCodes.map((code) => String(code || '').trim().toLowerCase()).filter(Boolean))
|
||||
})
|
||||
const canViewFinancialCapabilities = computed(() => {
|
||||
const user = currentUser.value || {}
|
||||
const roleLabel = String(user.role || '').trim()
|
||||
return Boolean(user.isAdmin)
|
||||
|| FINANCIAL_CAPABILITY_ROLE_LABELS.has(roleLabel)
|
||||
|| Array.from(currentRoleCodes.value).some((code) => FINANCIAL_CAPABILITY_ROLE_CODES.has(code))
|
||||
})
|
||||
const visibleAssistantCapabilities = computed(() =>
|
||||
assistantCapabilities.filter((item) => canViewFinancialCapabilities.value || !FINANCIAL_CAPABILITY_KEYS.has(item.key))
|
||||
)
|
||||
const capabilityGridClass = computed(() =>
|
||||
canViewFinancialCapabilities.value ? 'capability-grid--privileged' : 'capability-grid--standard'
|
||||
)
|
||||
const expenseStatItems = computed(() => buildExpenseStatItems(props.workbenchSummary))
|
||||
const visibleExpenseStatItems = computed(() => {
|
||||
const preferredKeys = ['monthly-amount', 'monthly-count', 'in-review', 'pending-payment']
|
||||
@@ -318,6 +364,12 @@ const visibleUsageProfileMetrics = computed(() => {
|
||||
.map((key) => usageProfileMetrics.find((item) => item.key === key))
|
||||
.filter(Boolean)
|
||||
})
|
||||
const expenseProfileModalMetrics = computed(() => {
|
||||
const preferredKeys = ['stay-duration', 'ai-usage', 'auto-pass-rate', 'audit-duration']
|
||||
return preferredKeys
|
||||
.map((key) => usageProfileMetrics.find((item) => item.key === key))
|
||||
.filter(Boolean)
|
||||
})
|
||||
const visibleTodoItems = computed(() => todoItems.slice(0, 5))
|
||||
const visibleProgressItems = computed(() => progressItems.slice(0, 5))
|
||||
const todoAlertCount = computed(() => visibleTodoItems.value.length)
|
||||
@@ -417,6 +469,19 @@ function openPromptAssistant(prompt) {
|
||||
})
|
||||
}
|
||||
|
||||
function openExpenseProfileModal() {
|
||||
expenseProfileModalOpen.value = true
|
||||
}
|
||||
|
||||
function closeExpenseProfileModal() {
|
||||
expenseProfileModalOpen.value = false
|
||||
}
|
||||
|
||||
function explainExpenseProfile() {
|
||||
closeExpenseProfileModal()
|
||||
openPromptAssistant('请根据我的费用画像标签、行为雷达和最近 5 次操作，解释我的费用使用特点和可以优化的地方。')
|
||||
}
|
||||
|
||||
function handleWorkbenchEnter(event) {
|
||||
if (event.isComposing) {
|
||||
return
|
||||
|
||||
154
web/src/components/charts/RadarChart.vue
Normal file
154
web/src/components/charts/RadarChart.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div class="radar-chart">
|
||||
<Radar :data="chartData" :options="chartOptions" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { Radar } from 'vue-chartjs'
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
Filler,
|
||||
Legend,
|
||||
LineElement,
|
||||
PointElement,
|
||||
RadialLinearScale,
|
||||
Tooltip
|
||||
} from 'chart.js'
|
||||
|
||||
import { useThemeColors } from '../../composables/useThemeColors.js'
|
||||
|
||||
ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend)
|
||||
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true },
|
||||
label: { type: String, default: '行为评分' },
|
||||
max: { type: Number, default: 100 }
|
||||
})
|
||||
|
||||
const themeColors = useThemeColors()
|
||||
|
||||
const normalizedItems = computed(() =>
|
||||
props.items.map((item) => ({
|
||||
code: String(item.code || item.label || '').trim(),
|
||||
label: String(item.label || item.code || '').trim(),
|
||||
score: clampScore(item.score)
|
||||
}))
|
||||
)
|
||||
|
||||
const chartData = computed(() => {
|
||||
const primary = themeColors.value.chartPrimary
|
||||
|
||||
return {
|
||||
labels: normalizedItems.value.map((item) => item.label),
|
||||
datasets: [
|
||||
{
|
||||
label: props.label,
|
||||
data: normalizedItems.value.map((item) => item.score),
|
||||
borderColor: primary,
|
||||
backgroundColor: toRgba(primary, 0.16),
|
||||
pointBackgroundColor: '#ffffff',
|
||||
pointBorderColor: primary,
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointHoverRadius: 4,
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.18
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const chartOptions = computed(() => ({
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: 760,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.98)',
|
||||
titleColor: '#0f172a',
|
||||
bodyColor: '#475569',
|
||||
borderColor: 'rgba(148, 163, 184, 0.28)',
|
||||
borderWidth: 1,
|
||||
cornerRadius: 4,
|
||||
padding: 10,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
label: (context) => `${context.dataset.label}: ${context.parsed.r}`
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
min: 0,
|
||||
max: props.max,
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
stepSize: 25
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(148, 163, 184, 0.22)',
|
||||
circular: false
|
||||
},
|
||||
angleLines: {
|
||||
color: 'rgba(148, 163, 184, 0.18)'
|
||||
},
|
||||
pointLabels: {
|
||||
color: '#475569',
|
||||
padding: 8,
|
||||
font: {
|
||||
size: 11,
|
||||
weight: '700'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
function clampScore(value) {
|
||||
const score = Number(value || 0)
|
||||
if (!Number.isFinite(score)) {
|
||||
return 0
|
||||
}
|
||||
return Math.max(0, Math.min(props.max, score))
|
||||
}
|
||||
|
||||
function toRgba(color, alpha) {
|
||||
const normalized = String(color || '').trim()
|
||||
const hex = normalized.replace('#', '')
|
||||
|
||||
if (/^[\da-f]{3}$/i.test(hex)) {
|
||||
const [r, g, b] = hex.split('').map((part) => parseInt(part + part, 16))
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
}
|
||||
|
||||
if (/^[\da-f]{6}$/i.test(hex)) {
|
||||
const r = parseInt(hex.slice(0, 2), 16)
|
||||
const g = parseInt(hex.slice(2, 4), 16)
|
||||
const b = parseInt(hex.slice(4, 6), 16)
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`
|
||||
}
|
||||
|
||||
if (normalized.startsWith('rgb(')) {
|
||||
return normalized.replace('rgb(', 'rgba(').replace(')', `, ${alpha})`)
|
||||
}
|
||||
|
||||
return `rgba(58, 124, 165, ${alpha})`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.radar-chart {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -152,7 +152,7 @@ const {
|
||||
} = useDocumentCenterInbox()
|
||||
|
||||
const sidebarMeta = {
|
||||
overview: { label: '财务总览' },
|
||||
overview: { label: '分析看板' },
|
||||
workbench: { label: '个人工作台' },
|
||||
documents: { label: '单据中心' },
|
||||
budget: { label: '预算中心' },
|
||||
@@ -185,7 +185,7 @@ const displayUser = computed(() => ({
|
||||
avatar: props.currentUser?.avatar || '管'
|
||||
}))
|
||||
|
||||
const displayCompanyName = computed(() => props.companyName || 'X-Financial')
|
||||
const displayCompanyName = computed(() => props.companyName || '易财费控')
|
||||
const collapseTooltipContent = computed(() => (props.collapsed ? '展开侧边栏' : '折叠侧边栏'))
|
||||
const userTooltipContent = computed(() => [displayUser.value.name, displayUser.value.role].filter(Boolean).join(' · '))
|
||||
|
||||
|
||||
@@ -98,14 +98,20 @@
|
||||
</template>
|
||||
|
||||
<template v-else-if="isWorkbench">
|
||||
<div class="kpi-chips">
|
||||
<div v-for="kpi in workbenchKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
|
||||
<span class="chip-value">
|
||||
{{ kpi.value }}<small v-if="kpi.unit">{{ kpi.unit }}</small>
|
||||
</span>
|
||||
<span class="chip-label">{{ kpi.label }}</span>
|
||||
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
|
||||
</div>
|
||||
<div class="topbar-toolset" aria-label="工作台快捷工具">
|
||||
<button class="topbar-icon-btn notification-btn" type="button" aria-label="通知">
|
||||
<i class="mdi mdi-bell-outline"></i>
|
||||
<span v-if="topbarNotificationCount" class="notification-badge">{{ topbarNotificationCount }}</span>
|
||||
</button>
|
||||
|
||||
<button class="topbar-icon-btn" type="button" aria-label="帮助">
|
||||
<i class="mdi mdi-help-circle-outline"></i>
|
||||
</button>
|
||||
|
||||
<button class="company-switcher" type="button" aria-label="切换公司">
|
||||
<span>{{ displayCompanyName }}</span>
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -206,9 +212,9 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
workbenchSummary: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
companyName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
detailMode: {
|
||||
type: Boolean,
|
||||
@@ -247,48 +253,11 @@ const isLogs = computed(() => props.activeView === 'logs' && !props.logDetailMod
|
||||
const isApproval = computed(() => props.activeView === 'approval')
|
||||
const isPolicies = computed(() => props.activeView === 'policies')
|
||||
const isEmployees = computed(() => props.activeView === 'employees')
|
||||
|
||||
const workbenchKpis = computed(() => {
|
||||
const summary = props.workbenchSummary ?? {}
|
||||
const monthlyCount = Number(summary.monthlyCount ?? 0)
|
||||
const returnCount = Number(summary.returnCount ?? 0)
|
||||
const highRiskCount = Number(summary.highRiskCount ?? 0)
|
||||
const monthlyAmountLabel = String(summary.monthlyAmountLabel || '¥0')
|
||||
|
||||
return [
|
||||
{
|
||||
label: '本月报销笔数',
|
||||
value: monthlyCount,
|
||||
unit: '笔',
|
||||
meta: '本月累计',
|
||||
trend: monthlyCount > 0 ? 'up' : 'down',
|
||||
color: 'var(--theme-primary)'
|
||||
},
|
||||
{
|
||||
label: '本月报销总金额',
|
||||
value: monthlyAmountLabel,
|
||||
unit: '',
|
||||
meta: '本月累计',
|
||||
trend: monthlyCount > 0 ? 'up' : 'down',
|
||||
color: '#3b82f6'
|
||||
},
|
||||
{
|
||||
label: '退单次数',
|
||||
value: returnCount,
|
||||
unit: '次',
|
||||
meta: '累计退回',
|
||||
trend: returnCount > 0 ? 'down' : 'up',
|
||||
color: '#f59e0b'
|
||||
},
|
||||
{
|
||||
label: '高危风险次数',
|
||||
value: highRiskCount,
|
||||
unit: '次',
|
||||
meta: highRiskCount > 0 ? '本月需关注' : '本月无高危',
|
||||
trend: highRiskCount > 0 ? 'down' : 'up',
|
||||
color: '#ef4444'
|
||||
}
|
||||
]
|
||||
const displayCompanyName = computed(() => String(props.companyName || '远光软件股份有限公司').trim() || '远光软件股份有限公司')
|
||||
const topbarNotificationCount = computed(() => {
|
||||
const summary = props.documentSummary ?? {}
|
||||
const count = Number(summary.toProcess ?? summary.toSubmit ?? 8)
|
||||
return Number.isFinite(count) && count > 0 ? Math.min(count, 99) : 0
|
||||
})
|
||||
|
||||
const requestKpis = computed(() => {
|
||||
|
||||
622
web/src/components/travel/EmployeeProfileRiskCard.vue
Normal file
622
web/src/components/travel/EmployeeProfileRiskCard.vue
Normal file
@@ -0,0 +1,622 @@
|
||||
<template>
|
||||
<article class="detail-card panel employee-risk-profile-card">
|
||||
<div class="employee-risk-head">
|
||||
<div>
|
||||
<h3 class="detail-card-title-with-icon">
|
||||
<i class="mdi mdi-account-search-outline"></i>
|
||||
<span>风险审核画像</span>
|
||||
</h3>
|
||||
<p>{{ subtitle }}</p>
|
||||
</div>
|
||||
<span v-if="!loading && !error" :class="['profile-level-pill', levelTone]">
|
||||
{{ levelLabel }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="employee-risk-state">
|
||||
<i class="mdi mdi-loading mdi-spin"></i>
|
||||
<span>正在读取画像快照</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="employee-risk-state error">
|
||||
<i class="mdi mdi-alert-circle-outline"></i>
|
||||
<span>{{ error }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="emptyReason" class="employee-risk-state">
|
||||
<i class="mdi mdi-database-search-outline"></i>
|
||||
<span>{{ emptyReason }}</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="employee-risk-body">
|
||||
<div class="employee-risk-summary">
|
||||
<div>
|
||||
<span>审核优先级</span>
|
||||
<strong>{{ reviewScore }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>计算窗口</span>
|
||||
<strong>{{ profile?.window_days || 90 }} 天</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>同组样本</span>
|
||||
<strong>{{ profile?.peer_group?.sample_size || 0 }} 人</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>更新时间</span>
|
||||
<strong>{{ calculatedAtText }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tags.length" class="employee-risk-tags">
|
||||
<span>特征标签</span>
|
||||
<div>
|
||||
<span
|
||||
v-for="tag in tags"
|
||||
:key="tag.code"
|
||||
:class="['employee-risk-tag', tagTone(tag)]"
|
||||
:title="tag.reason"
|
||||
>
|
||||
{{ tag.display_label || tag.label }}
|
||||
<strong>{{ tag.score }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="radarDimensions.length" class="employee-risk-radar">
|
||||
<div class="employee-risk-radar-head">
|
||||
<span>行为雷达</span>
|
||||
<small>分数越高，表示该行为特征越明显。</small>
|
||||
</div>
|
||||
<div class="employee-risk-radar-layout">
|
||||
<svg class="employee-risk-radar-chart" viewBox="0 0 104 104" aria-hidden="true">
|
||||
<polygon
|
||||
v-for="ring in radarRings"
|
||||
:key="ring.scale"
|
||||
class="employee-risk-radar-ring"
|
||||
:points="ring.points"
|
||||
/>
|
||||
<line
|
||||
v-for="axis in radarAxes"
|
||||
:key="axis.key"
|
||||
class="employee-risk-radar-axis"
|
||||
x1="52"
|
||||
y1="52"
|
||||
:x2="axis.x"
|
||||
:y2="axis.y"
|
||||
/>
|
||||
<polygon class="employee-risk-radar-area" :points="radarPolygonPoints" />
|
||||
<circle
|
||||
v-for="point in radarValuePoints"
|
||||
:key="point.key"
|
||||
class="employee-risk-radar-point"
|
||||
:cx="point.x"
|
||||
:cy="point.y"
|
||||
r="2"
|
||||
/>
|
||||
</svg>
|
||||
<ul class="employee-risk-radar-list">
|
||||
<li v-for="item in radarDimensions" :key="item.code">
|
||||
<span>{{ item.label }}</span>
|
||||
<strong>{{ item.score }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="employee-risk-profile-list">
|
||||
<section v-for="item in profiles" :key="item.profile_type" class="employee-risk-profile">
|
||||
<div class="employee-risk-profile-title">
|
||||
<span>{{ item.profile_label }}</span>
|
||||
<strong :class="profileLevelClass(item.level)">{{ item.score }}</strong>
|
||||
</div>
|
||||
<ul v-if="item.top_contributors?.length" class="employee-risk-evidence-list">
|
||||
<li v-for="basis in item.top_contributors.slice(0, 3)" :key="basis.code">
|
||||
<span>{{ basis.label }}</span>
|
||||
<strong>{{ formatBasisValue(basis) }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else class="employee-risk-muted">暂无显著贡献项。</p>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-if="suggestions.length" class="employee-risk-suggestions">
|
||||
<span>审核建议</span>
|
||||
<ul>
|
||||
<li v-for="item in suggestions" :key="item.type || item.message">
|
||||
{{ item.message }}
|
||||
<strong v-if="item.recommended_upper">建议上限 {{ item.recommended_upper }}{{ item.unit || '' }}</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed } from 'vue'
|
||||
|
||||
export default {
|
||||
name: 'EmployeeProfileRiskCard',
|
||||
props: {
|
||||
profile: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
error: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const profiles = computed(() => Array.isArray(props.profile?.profiles) ? props.profile.profiles : [])
|
||||
const tags = computed(() => Array.isArray(props.profile?.profile_tags) ? props.profile.profile_tags.slice(0, 6) : [])
|
||||
const radarDimensions = computed(() => Array.isArray(props.profile?.radar?.dimensions) ? props.profile.radar.dimensions : [])
|
||||
const suggestions = computed(() => Array.isArray(props.profile?.review_suggestions) ? props.profile.review_suggestions : [])
|
||||
const emptyReason = computed(() => String(props.profile?.empty_reason || '').trim())
|
||||
const reviewScore = computed(() => Number(props.profile?.review_priority_score || 0))
|
||||
const level = computed(() => String(props.profile?.review_priority_level || 'normal').trim())
|
||||
const levelLabel = computed(() => String(props.profile?.review_priority_label || '正常').trim())
|
||||
const levelTone = computed(() => profileLevelClass(level.value))
|
||||
const subtitle = computed(() => {
|
||||
if (props.loading) {
|
||||
return '读取员工近期费用和流程质量画像。'
|
||||
}
|
||||
if (props.error || emptyReason.value) {
|
||||
return '当前画像不可用，审批时按单据事实继续核对。'
|
||||
}
|
||||
const windowDays = props.profile?.window_days || 90
|
||||
const sampleSize = props.profile?.peer_group?.sample_size || 0
|
||||
return `${windowDays} 天窗口，同组样本 ${sampleSize} 人，用于辅助复核费用节奏和材料质量。`
|
||||
})
|
||||
const calculatedAtText = computed(() => formatDateTime(props.profile?.calculated_at))
|
||||
const radarRings = computed(() => [0.25, 0.5, 0.75, 1].map((scale) => ({
|
||||
scale,
|
||||
points: radarDimensions.value.map((_, index) => radarPoint(index, radarDimensions.value.length, scale)).join(' ')
|
||||
})))
|
||||
const radarAxes = computed(() => radarDimensions.value.map((item, index) => ({
|
||||
key: item.code,
|
||||
...radarPointObject(index, radarDimensions.value.length, 1)
|
||||
})))
|
||||
const radarValuePoints = computed(() => radarDimensions.value.map((item, index) => ({
|
||||
key: item.code,
|
||||
...radarPointObject(index, radarDimensions.value.length, Number(item.score || 0) / 100)
|
||||
})))
|
||||
const radarPolygonPoints = computed(() => radarValuePoints.value.map((point) => `${point.x},${point.y}`).join(' '))
|
||||
|
||||
function formatDateTime(value) {
|
||||
const normalized = String(value || '').trim()
|
||||
if (!normalized) {
|
||||
return '暂无'
|
||||
}
|
||||
const date = new Date(normalized)
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return normalized.slice(0, 16)
|
||||
}
|
||||
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 profileLevelClass(value) {
|
||||
const normalized = String(value || '').trim()
|
||||
if (normalized === 'escalation') {
|
||||
return 'high'
|
||||
}
|
||||
if (normalized === 'review') {
|
||||
return 'medium'
|
||||
}
|
||||
if (normalized === 'watch') {
|
||||
return 'watch'
|
||||
}
|
||||
return 'normal'
|
||||
}
|
||||
|
||||
function radarPoint(index, total, scale) {
|
||||
const point = radarPointObject(index, total, scale)
|
||||
return `${point.x},${point.y}`
|
||||
}
|
||||
|
||||
function radarPointObject(index, total, scale) {
|
||||
if (!total) {
|
||||
return { x: 52, y: 52 }
|
||||
}
|
||||
const angle = (-90 + (360 / total) * index) * (Math.PI / 180)
|
||||
const radius = 42 * Math.max(0, Math.min(1, scale))
|
||||
return {
|
||||
x: Number((52 + Math.cos(angle) * radius).toFixed(2)),
|
||||
y: Number((52 + Math.sin(angle) * radius).toFixed(2))
|
||||
}
|
||||
}
|
||||
|
||||
function tagTone(tag) {
|
||||
const polarity = String(tag?.polarity || '').trim()
|
||||
if (polarity === 'positive') {
|
||||
return 'positive'
|
||||
}
|
||||
if (Number(tag?.score || 0) >= 80 || polarity === 'risk') {
|
||||
return 'risk'
|
||||
}
|
||||
return 'behavior'
|
||||
}
|
||||
|
||||
function formatBasisValue(basis) {
|
||||
const value = basis?.value
|
||||
const unit = String(basis?.unit || '').trim()
|
||||
if (value == null || value === '') {
|
||||
return basis?.score != null ? `${basis.score}分` : ''
|
||||
}
|
||||
if (unit === '占比') {
|
||||
const ratio = Number(value)
|
||||
return Number.isFinite(ratio) ? `${Math.round(ratio * 100)}%` : String(value)
|
||||
}
|
||||
return `${value}${unit && unit !== '比例' ? unit : ''}`
|
||||
}
|
||||
|
||||
return {
|
||||
calculatedAtText,
|
||||
emptyReason,
|
||||
formatBasisValue,
|
||||
levelLabel,
|
||||
levelTone,
|
||||
profileLevelClass,
|
||||
profiles,
|
||||
radarAxes,
|
||||
radarDimensions,
|
||||
radarPolygonPoints,
|
||||
radarRings,
|
||||
radarValuePoints,
|
||||
reviewScore,
|
||||
subtitle,
|
||||
suggestions,
|
||||
tags,
|
||||
tagTone
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.employee-risk-profile-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.employee-risk-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.employee-risk-head p {
|
||||
margin: 6px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.profile-level-pill {
|
||||
min-height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 9px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profile-level-pill.normal,
|
||||
.employee-risk-profile-title strong.normal {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.profile-level-pill.watch,
|
||||
.employee-risk-profile-title strong.watch {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.profile-level-pill.medium,
|
||||
.employee-risk-profile-title strong.medium {
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.profile-level-pill.high,
|
||||
.employee-risk-profile-title strong.high {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.employee-risk-state {
|
||||
min-height: 78px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 8px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.employee-risk-state.error {
|
||||
border-color: #fecaca;
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.employee-risk-body {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.employee-risk-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.employee-risk-summary > div {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.employee-risk-summary span,
|
||||
.employee-risk-suggestions > span {
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.employee-risk-summary strong {
|
||||
min-width: 0;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.employee-risk-tags {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.employee-risk-tags > span,
|
||||
.employee-risk-radar-head span {
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.employee-risk-tags > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.employee-risk-tag {
|
||||
min-height: 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.employee-risk-tag strong {
|
||||
color: inherit;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.employee-risk-tag.risk {
|
||||
border-color: #fed7aa;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.employee-risk-tag.behavior {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.employee-risk-tag.positive {
|
||||
border-color: #bbf7d0;
|
||||
background: #f0fdf4;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.employee-risk-radar {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.employee-risk-radar-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.employee-risk-radar-head small {
|
||||
color: #94a3b8;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.employee-risk-radar-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 112px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.employee-risk-radar-chart {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
.employee-risk-radar-ring {
|
||||
fill: none;
|
||||
stroke: #e2e8f0;
|
||||
stroke-width: 0.75;
|
||||
}
|
||||
|
||||
.employee-risk-radar-axis {
|
||||
stroke: #e2e8f0;
|
||||
stroke-width: 0.75;
|
||||
}
|
||||
|
||||
.employee-risk-radar-area {
|
||||
fill: rgba(37, 99, 235, 0.16);
|
||||
stroke: #2563eb;
|
||||
stroke-width: 1.8;
|
||||
}
|
||||
|
||||
.employee-risk-radar-point {
|
||||
fill: #2563eb;
|
||||
}
|
||||
|
||||
.employee-risk-radar-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.employee-risk-radar-list li {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.employee-risk-radar-list strong {
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.employee-risk-profile-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.employee-risk-profile {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.employee-risk-profile-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.employee-risk-profile-title strong {
|
||||
min-width: 36px;
|
||||
height: 22px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-list,
|
||||
.employee-risk-suggestions ul {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-list li,
|
||||
.employee-risk-suggestions li {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: #475569;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.employee-risk-evidence-list strong,
|
||||
.employee-risk-suggestions strong {
|
||||
color: #0f172a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.employee-risk-muted {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.employee-risk-suggestions {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.employee-risk-summary,
|
||||
.employee-risk-profile-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.employee-risk-radar-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.employee-risk-radar-chart {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@ import { h, ref } from 'vue'
|
||||
export function useLoginView() {
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const tenant = ref('')
|
||||
const tenant = ref('远光软件股份有限公司')
|
||||
const remember = ref(true)
|
||||
const showPassword = ref(false)
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
import { icons } from '../data/icons.js'
|
||||
|
||||
export const appViews = [
|
||||
'overview',
|
||||
'workbench',
|
||||
'documents',
|
||||
'budget',
|
||||
'audit',
|
||||
'overview',
|
||||
'digitalEmployees',
|
||||
'employees',
|
||||
'policies',
|
||||
@@ -17,14 +17,6 @@ export const appViews = [
|
||||
]
|
||||
|
||||
export const navItems = [
|
||||
{
|
||||
id: 'overview',
|
||||
label: '总览',
|
||||
navHint: '查看系统总览与关键指标',
|
||||
icon: icons.dashboard,
|
||||
title: '财务运营总览',
|
||||
desc: '聚合差旅申请、审批效率、风险信号与 SLA 表现。'
|
||||
},
|
||||
{
|
||||
id: 'workbench',
|
||||
label: '个人工作台',
|
||||
@@ -57,6 +49,14 @@ export const navItems = [
|
||||
title: '规则中心',
|
||||
desc: '集中管理财务规则、风险规则与外部 MCP 服务。'
|
||||
},
|
||||
{
|
||||
id: 'overview',
|
||||
label: '分析看板',
|
||||
navHint: '查看系统总览与关键指标',
|
||||
icon: icons.dashboard,
|
||||
title: '分析看板',
|
||||
desc: '聚合差旅申请、审批效率、风险信号与 SLA 表现。'
|
||||
},
|
||||
{
|
||||
id: 'digitalEmployees',
|
||||
label: '数字员工',
|
||||
|
||||
@@ -51,7 +51,8 @@ const REIMBURSEMENT_PROGRESS_LABELS = [
|
||||
'AI预审',
|
||||
'直属领导审批',
|
||||
'财务审批',
|
||||
'归档入账'
|
||||
'待付款',
|
||||
'已付款'
|
||||
]
|
||||
|
||||
const APPLICATION_PROGRESS_LABELS = [
|
||||
@@ -264,6 +265,14 @@ function resolveApprovalMeta(status) {
|
||||
return { key: 'supplement', label: '待补充', tone: 'warning' }
|
||||
}
|
||||
|
||||
if (normalized === 'pending_payment') {
|
||||
return { key: 'pending_payment', label: '待付款', tone: 'warning' }
|
||||
}
|
||||
|
||||
if (normalized === 'paid') {
|
||||
return { key: 'completed', label: '已付款', tone: 'success' }
|
||||
}
|
||||
|
||||
if (['approved', 'completed', 'paid'].includes(normalized)) {
|
||||
return { key: 'completed', label: '已完成', tone: 'success' }
|
||||
}
|
||||
@@ -296,8 +305,13 @@ function resolveWorkflowNode(claim, approvalMeta, isApplicationDocument = false)
|
||||
return '待提交'
|
||||
}
|
||||
|
||||
if (approvalMeta.key === 'pending_payment') {
|
||||
return '待付款'
|
||||
}
|
||||
|
||||
if (approvalMeta.key === 'completed') {
|
||||
return isApplicationDocument ? '审批完成' : '归档入账'
|
||||
const normalizedStatus = String(claim?.status || '').trim().toLowerCase()
|
||||
return isApplicationDocument ? '审批完成' : normalizedStatus === 'paid' ? '已付款' : '归档入账'
|
||||
}
|
||||
|
||||
return isApplicationDocument ? '直属领导审批' : 'AI预审'
|
||||
@@ -352,12 +366,22 @@ function resolveProgressCurrentIndex(approvalMeta, workflowNode) {
|
||||
const normalizedNode = String(workflowNode || '').trim()
|
||||
|
||||
if (approvalMeta.key === 'completed') {
|
||||
return 6
|
||||
}
|
||||
|
||||
if (approvalMeta.key === 'pending_payment') {
|
||||
return 5
|
||||
}
|
||||
|
||||
if (normalizedNode.includes('归档') || normalizedNode.includes('入账')) {
|
||||
if (normalizedNode.includes('已付款')) {
|
||||
return 6
|
||||
}
|
||||
if (normalizedNode.includes('待付款')) {
|
||||
return 5
|
||||
}
|
||||
if (normalizedNode.includes('归档') || normalizedNode.includes('入账')) {
|
||||
return 6
|
||||
}
|
||||
if (normalizedNode.includes('财务')) {
|
||||
return 4
|
||||
}
|
||||
@@ -529,6 +553,7 @@ function findApprovalEventForStep(claim, label) {
|
||||
if (stepLabel === '财务审批') {
|
||||
return (
|
||||
previousStage.includes('财务')
|
||||
|| nextStage.includes('待付款')
|
||||
|| nextStage.includes('归档')
|
||||
|| nextStage.includes('入账')
|
||||
|| nextStage.includes('完成')
|
||||
@@ -551,6 +576,19 @@ function findLatestReturnEvent(claim) {
|
||||
)
|
||||
}
|
||||
|
||||
function findLatestPaymentEvent(claim) {
|
||||
return getLatestEvent(
|
||||
getRiskFlags(claim).filter((flag) => (
|
||||
flag
|
||||
&& typeof flag === 'object'
|
||||
&& (
|
||||
normalizeText(flag.source) === 'payment'
|
||||
|| normalizeText(flag.event_type || flag.eventType) === 'expense_claim_payment_completed'
|
||||
)
|
||||
))
|
||||
)
|
||||
}
|
||||
|
||||
function findLatestApplicationReturnEvent(claim) {
|
||||
return getLatestEvent(
|
||||
getRiskFlags(claim).filter((flag) => {
|
||||
@@ -639,6 +677,18 @@ function buildCompletedStepMeta(claim, label) {
|
||||
}
|
||||
}
|
||||
|
||||
if (stepLabel === '待付款') {
|
||||
const approvalEvent = findApprovalEventForStep(claim, '财务审批')
|
||||
const pendingAt = formatDateTime(approvalEvent?.created_at || approvalEvent?.createdAt || claim?.updated_at)
|
||||
return buildProgressStepMeta('待付款', pendingAt)
|
||||
}
|
||||
|
||||
if (stepLabel === '已付款') {
|
||||
const paymentEvent = findLatestPaymentEvent(claim)
|
||||
const paidAt = formatDateTime(paymentEvent?.created_at || paymentEvent?.createdAt || claim?.updated_at)
|
||||
return buildProgressStepMeta('已付款', paidAt)
|
||||
}
|
||||
|
||||
if (stepLabel === '归档入账') {
|
||||
const archivedAt = formatDateTime(claim?.updated_at)
|
||||
return buildProgressStepMeta('归档入账', archivedAt)
|
||||
@@ -675,6 +725,14 @@ function resolveCurrentStepStartedAt(claim, label) {
|
||||
const leaderApprovalEvent = findApprovalEventForStep(claim, '直属领导审批')
|
||||
return leaderApprovalEvent?.created_at || leaderApprovalEvent?.createdAt || claim?.updated_at || claim?.submitted_at
|
||||
}
|
||||
if (stepLabel === '待付款') {
|
||||
const approvalEvent = findApprovalEventForStep(claim, '财务审批')
|
||||
return approvalEvent?.created_at || approvalEvent?.createdAt || claim?.updated_at || claim?.submitted_at
|
||||
}
|
||||
if (stepLabel === '已付款') {
|
||||
const paymentEvent = findLatestPaymentEvent(claim)
|
||||
return paymentEvent?.created_at || paymentEvent?.createdAt || claim?.updated_at || claim?.submitted_at
|
||||
}
|
||||
if (stepLabel === '归档入账' || stepLabel === '审批完成') {
|
||||
return claim?.updated_at || claim?.submitted_at
|
||||
}
|
||||
@@ -703,6 +761,8 @@ function buildProgressSteps(approvalMeta, workflowNode, claim = {}, options = {}
|
||||
const currentTime =
|
||||
approvalMeta.key === 'completed'
|
||||
? '已完成'
|
||||
: approvalMeta.key === 'pending_payment'
|
||||
? '待付款'
|
||||
: approvalMeta.key === 'supplement'
|
||||
? '待补充'
|
||||
: approvalMeta.key === 'rejected'
|
||||
|
||||
@@ -7,7 +7,8 @@ export const quickPromptItems = [
|
||||
|
||||
export const assistantCapabilities = [
|
||||
{
|
||||
title: '费用申请助手',
|
||||
key: 'expense-application',
|
||||
title: '费用申请',
|
||||
primary: '智能识别规划',
|
||||
secondary: '快速创建申请',
|
||||
icon: 'mdi mdi-file-document-plus-outline',
|
||||
@@ -15,15 +16,17 @@ export const assistantCapabilities = [
|
||||
prompt: '帮我新建一笔费用申请，并检查需要补充哪些信息。'
|
||||
},
|
||||
{
|
||||
title: '报销助手',
|
||||
primary: '票据 OCR 归票',
|
||||
secondary: '自动价格分摊',
|
||||
key: 'quick-reimbursement',
|
||||
title: '快速报销',
|
||||
primary: '智能报销流程',
|
||||
secondary: '财务流程简化',
|
||||
icon: 'mdi mdi-wallet-outline',
|
||||
tone: 'blue',
|
||||
prompt: '帮我整理票据并生成一笔可提交的报销单。'
|
||||
},
|
||||
{
|
||||
title: '预算控制助手',
|
||||
key: 'budget-planning',
|
||||
title: '预算编制',
|
||||
primary: '预算查询分析',
|
||||
secondary: '超标预警提醒',
|
||||
icon: 'mdi mdi-chart-pie',
|
||||
@@ -31,7 +34,8 @@ export const assistantCapabilities = [
|
||||
prompt: '帮我查询本月预算使用情况，并提醒可能超标的费用。'
|
||||
},
|
||||
{
|
||||
title: '审批问答助手',
|
||||
key: 'quick-approval',
|
||||
title: '快速审批',
|
||||
primary: '审批凭证说明',
|
||||
secondary: '进度实时查询',
|
||||
icon: 'mdi mdi-clipboard-check-outline',
|
||||
@@ -39,15 +43,17 @@ export const assistantCapabilities = [
|
||||
prompt: '帮我查询报销审批进度，并说明当前卡在哪个节点。'
|
||||
},
|
||||
{
|
||||
title: '差旅助手',
|
||||
primary: '行程预订建议',
|
||||
secondary: '标准合规校验',
|
||||
icon: 'mdi mdi-airplane',
|
||||
key: 'finance-analysis',
|
||||
title: '财务分析',
|
||||
primary: '费用结构洞察',
|
||||
secondary: '趋势对比分析',
|
||||
icon: 'mdi mdi-chart-line',
|
||||
tone: 'cyan',
|
||||
prompt: '帮我检查差旅安排是否符合公司差旅标准。'
|
||||
prompt: '帮我分析近期费用结构与支出趋势，并给出优化建议。'
|
||||
},
|
||||
{
|
||||
title: '制度知识助手',
|
||||
key: 'company-policy',
|
||||
title: '公司制度',
|
||||
primary: '制度检索解读',
|
||||
secondary: '政策实时更新',
|
||||
icon: 'mdi mdi-book-open-page-variant-outline',
|
||||
@@ -258,3 +264,103 @@ export const usageProfileMetrics = [
|
||||
tone: 'emerald'
|
||||
}
|
||||
]
|
||||
|
||||
export const expenseProfileTags = [
|
||||
{
|
||||
code: 'ai-heavy-user',
|
||||
label: 'AI 重度用户',
|
||||
displayLabel: 'AI 协作活跃',
|
||||
tone: 'behavior',
|
||||
score: 86,
|
||||
reason: '近 30 天 AI 使用 86 次，覆盖报销助手、制度问答和票据整理。'
|
||||
},
|
||||
{
|
||||
code: 'fast-submitter',
|
||||
label: '极速提单人',
|
||||
displayLabel: '提单效率高',
|
||||
tone: 'positive',
|
||||
score: 82,
|
||||
reason: '平均提单耗时 12 分钟，明显低于常规人工录入节奏。'
|
||||
},
|
||||
{
|
||||
code: 'clean-precheck',
|
||||
label: '预审稳定',
|
||||
displayLabel: '预审通过稳定',
|
||||
tone: 'positive',
|
||||
score: 92,
|
||||
reason: '智能预审通过率 92%，近期补材压力较低。'
|
||||
},
|
||||
{
|
||||
code: 'review-wait',
|
||||
label: '审核等待偏长',
|
||||
displayLabel: '审核响应需关注',
|
||||
tone: 'risk',
|
||||
score: 64,
|
||||
reason: '平均审核时长 18.6 小时，仍有压缩空间。'
|
||||
},
|
||||
{
|
||||
code: 'active-operator',
|
||||
label: '高频操作人',
|
||||
displayLabel: '操作频率高',
|
||||
tone: 'behavior',
|
||||
score: 78,
|
||||
reason: '近 30 天在申请、查询、补材、AI 问答之间切换频繁。'
|
||||
}
|
||||
]
|
||||
|
||||
export const expenseProfileRadarDimensions = [
|
||||
{ code: 'ai_collaboration', label: 'AI 协作', score: 86 },
|
||||
{ code: 'submit_efficiency', label: '提单效率', score: 82 },
|
||||
{ code: 'precheck_quality', label: '预审质量', score: 92 },
|
||||
{ code: 'review_response', label: '审核响应', score: 64 },
|
||||
{ code: 'material_completeness', label: '材料完整', score: 76 },
|
||||
{ code: 'expense_rhythm', label: '费用节奏', score: 68 }
|
||||
]
|
||||
|
||||
export const expenseProfileOperations = [
|
||||
{
|
||||
id: 'OP-0528-01',
|
||||
time: '今天 09:42',
|
||||
action: '上传票据并触发智能识别',
|
||||
target: '北京市市场调研差旅费',
|
||||
channel: '报销助手',
|
||||
status: '识别完成',
|
||||
tone: 'success'
|
||||
},
|
||||
{
|
||||
id: 'OP-0528-02',
|
||||
time: '今天 09:51',
|
||||
action: '发起 AI 预审',
|
||||
target: 'BX-202605-0031',
|
||||
channel: '智能预审',
|
||||
status: '通过',
|
||||
tone: 'success'
|
||||
},
|
||||
{
|
||||
id: 'OP-0527-03',
|
||||
time: '昨天 17:18',
|
||||
action: '查询审批进度',
|
||||
target: '5月市场活动费用申请',
|
||||
channel: '个人工作台',
|
||||
status: '审批中',
|
||||
tone: 'warning'
|
||||
},
|
||||
{
|
||||
id: 'OP-0527-04',
|
||||
time: '昨天 14:06',
|
||||
action: '补充业务事由',
|
||||
target: '办公用品采购报销单',
|
||||
channel: '单据详情',
|
||||
status: '已保存',
|
||||
tone: 'info'
|
||||
},
|
||||
{
|
||||
id: 'OP-0526-05',
|
||||
time: '05-26 11:33',
|
||||
action: '制度问答检索',
|
||||
target: '差旅住宿标准',
|
||||
channel: '制度问答',
|
||||
status: '已回复',
|
||||
tone: 'muted'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -20,6 +20,18 @@ export function fetchExpenseClaimBudgetAnalysis(claimId) {
|
||||
return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}/budget-analysis`)
|
||||
}
|
||||
|
||||
export function fetchEmployeeLatestProfile(employeeId, params = {}) {
|
||||
const query = new URLSearchParams()
|
||||
Object.entries(params || {}).forEach(([key, value]) => {
|
||||
const normalized = String(value ?? '').trim()
|
||||
if (normalized) {
|
||||
query.set(key, normalized)
|
||||
}
|
||||
})
|
||||
const suffix = query.toString() ? `?${query.toString()}` : ''
|
||||
return apiRequest(`/employee-profiles/${encodeURIComponent(String(employeeId || '').trim())}/latest${suffix}`)
|
||||
}
|
||||
|
||||
export function updateExpenseClaim(claimId, payload = {}) {
|
||||
return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}`, {
|
||||
method: 'PATCH',
|
||||
@@ -127,6 +139,13 @@ export function approveExpenseClaim(claimId, payload = {}) {
|
||||
})
|
||||
}
|
||||
|
||||
export function payExpenseClaim(claimId) {
|
||||
return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}/pay`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({})
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteExpenseClaim(claimId) {
|
||||
return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}`, {
|
||||
method: 'DELETE'
|
||||
|
||||
@@ -1,239 +1,239 @@
|
||||
export const DEFAULT_APP_VIEW_ORDER = [
|
||||
'overview',
|
||||
'workbench',
|
||||
'documents',
|
||||
'budget',
|
||||
'policies',
|
||||
'audit',
|
||||
'digitalEmployees',
|
||||
'logs',
|
||||
export const DEFAULT_APP_VIEW_ORDER = [
|
||||
'workbench',
|
||||
'documents',
|
||||
'budget',
|
||||
'audit',
|
||||
'overview',
|
||||
'policies',
|
||||
'digitalEmployees',
|
||||
'logs',
|
||||
'employees',
|
||||
'settings'
|
||||
]
|
||||
|
||||
const ALWAYS_VISIBLE_VIEWS = new Set(['workbench', 'documents', 'policies'])
|
||||
const VIEW_ROLE_RULES = {
|
||||
overview: ['finance', 'executive'],
|
||||
budget: ['budget_monitor', 'executive'],
|
||||
audit: ['finance'],
|
||||
digitalEmployees: ['finance'],
|
||||
logs: ['manager'],
|
||||
employees: ['manager'],
|
||||
settings: ['manager']
|
||||
}
|
||||
const CLAIM_MANAGER_ROLE_CODES = new Set(['executive'])
|
||||
const CLAIM_RETURN_ROLE_CODES = new Set(['finance', 'executive', 'manager', 'approver', 'budget_monitor'])
|
||||
const CLAIM_LEADER_APPROVAL_ROLE_CODES = new Set(['manager', 'approver'])
|
||||
const CLAIM_BUDGET_APPROVAL_GRADE = 'P8'
|
||||
const ALWAYS_VISIBLE_VIEWS = new Set(['workbench', 'documents', 'policies'])
|
||||
const VIEW_ROLE_RULES = {
|
||||
overview: ['finance', 'executive'],
|
||||
budget: ['budget_monitor', 'executive'],
|
||||
audit: ['finance'],
|
||||
digitalEmployees: ['finance'],
|
||||
logs: ['manager'],
|
||||
employees: ['manager'],
|
||||
settings: ['manager']
|
||||
}
|
||||
const CLAIM_MANAGER_ROLE_CODES = new Set(['executive'])
|
||||
const CLAIM_RETURN_ROLE_CODES = new Set(['finance', 'executive', 'manager', 'approver', 'budget_monitor'])
|
||||
const CLAIM_LEADER_APPROVAL_ROLE_CODES = new Set(['manager', 'approver'])
|
||||
const CLAIM_BUDGET_APPROVAL_GRADE = 'P8'
|
||||
|
||||
function normalizedRoleCodes(user) {
|
||||
if (!user) {
|
||||
return []
|
||||
}
|
||||
|
||||
return Array.isArray(user.roleCodes)
|
||||
? user.roleCodes
|
||||
.map((item) => normalizeRoleCode(item))
|
||||
.filter(Boolean)
|
||||
: []
|
||||
}
|
||||
|
||||
function normalizeRoleCode(value) {
|
||||
const roleCode = String(value || '').trim().toLowerCase()
|
||||
return roleCode === 'auditor' ? 'budget_monitor' : roleCode
|
||||
}
|
||||
|
||||
function normalizeComparableText(value) {
|
||||
return String(value || '').trim()
|
||||
}
|
||||
|
||||
function collectIdentityNames(...values) {
|
||||
return values
|
||||
.map((value) => normalizeComparableText(value))
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function identityIntersects(leftValues, rightValues) {
|
||||
const rightSet = new Set(rightValues)
|
||||
return leftValues.some((item) => rightSet.has(item))
|
||||
}
|
||||
|
||||
function normalizedGrade(user) {
|
||||
return String(user?.grade || user?.employeeGrade || '').trim().toUpperCase()
|
||||
}
|
||||
|
||||
function departmentIntersects(request, user) {
|
||||
const requestDepartments = collectIdentityNames(
|
||||
request?.dept,
|
||||
request?.departmentName,
|
||||
request?.department_name
|
||||
)
|
||||
const currentDepartments = collectIdentityNames(
|
||||
user?.department,
|
||||
user?.departmentName,
|
||||
user?.department_name
|
||||
)
|
||||
|
||||
return requestDepartments.length > 0 && identityIntersects(requestDepartments, currentDepartments)
|
||||
}
|
||||
|
||||
function hasPlatformAdminIdentity(user) {
|
||||
if (!user) {
|
||||
return false
|
||||
}
|
||||
|
||||
const username = String(user.username || user.account || '').trim().toLowerCase()
|
||||
const role = String(user.role || '').trim().toLowerCase()
|
||||
const roleCodes = normalizedRoleCodes(user)
|
||||
|
||||
return (
|
||||
Boolean(user.isAdmin)
|
||||
|| username === 'admin'
|
||||
|| role === 'admin'
|
||||
|| role === '管理员'
|
||||
|| role === '系统管理员'
|
||||
|| roleCodes.includes('admin')
|
||||
)
|
||||
}
|
||||
|
||||
export function isManagerUser(user) {
|
||||
return hasPlatformAdminIdentity(user) || normalizedRoleCodes(user).includes('manager')
|
||||
}
|
||||
|
||||
export function isPlatformAdminUser(user) {
|
||||
return hasPlatformAdminIdentity(user)
|
||||
}
|
||||
|
||||
export function isFinanceUser(user) {
|
||||
return normalizedRoleCodes(user).includes('finance')
|
||||
}
|
||||
function normalizedRoleCodes(user) {
|
||||
if (!user) {
|
||||
return []
|
||||
}
|
||||
|
||||
export function isExecutiveUser(user) {
|
||||
return normalizedRoleCodes(user).includes('executive')
|
||||
}
|
||||
|
||||
export function isBudgetMonitorUser(user) {
|
||||
return normalizedRoleCodes(user).includes('budget_monitor')
|
||||
}
|
||||
|
||||
export function canEditBudgetCenter(user) {
|
||||
return isPlatformAdminUser(user) || isExecutiveUser(user)
|
||||
}
|
||||
|
||||
export function canSwitchBudgetDepartments(user) {
|
||||
return isPlatformAdminUser(user) || isExecutiveUser(user)
|
||||
}
|
||||
|
||||
export function canManageExpenseClaims(user) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return normalizedRoleCodes(user).some((roleCode) => CLAIM_MANAGER_ROLE_CODES.has(roleCode))
|
||||
}
|
||||
|
||||
export function canDeleteArchivedExpenseClaims(user) {
|
||||
return isPlatformAdminUser(user)
|
||||
}
|
||||
|
||||
export function canReturnExpenseClaims(user) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
return Array.isArray(user.roleCodes)
|
||||
? user.roleCodes
|
||||
.map((item) => normalizeRoleCode(item))
|
||||
.filter(Boolean)
|
||||
: []
|
||||
}
|
||||
|
||||
function normalizeRoleCode(value) {
|
||||
const roleCode = String(value || '').trim().toLowerCase()
|
||||
return roleCode === 'auditor' ? 'budget_monitor' : roleCode
|
||||
}
|
||||
|
||||
function normalizeComparableText(value) {
|
||||
return String(value || '').trim()
|
||||
}
|
||||
|
||||
function collectIdentityNames(...values) {
|
||||
return values
|
||||
.map((value) => normalizeComparableText(value))
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function identityIntersects(leftValues, rightValues) {
|
||||
const rightSet = new Set(rightValues)
|
||||
return leftValues.some((item) => rightSet.has(item))
|
||||
}
|
||||
|
||||
function normalizedGrade(user) {
|
||||
return String(user?.grade || user?.employeeGrade || '').trim().toUpperCase()
|
||||
}
|
||||
|
||||
function departmentIntersects(request, user) {
|
||||
const requestDepartments = collectIdentityNames(
|
||||
request?.dept,
|
||||
request?.departmentName,
|
||||
request?.department_name
|
||||
)
|
||||
const currentDepartments = collectIdentityNames(
|
||||
user?.department,
|
||||
user?.departmentName,
|
||||
user?.department_name
|
||||
)
|
||||
|
||||
return requestDepartments.length > 0 && identityIntersects(requestDepartments, currentDepartments)
|
||||
}
|
||||
|
||||
function hasPlatformAdminIdentity(user) {
|
||||
if (!user) {
|
||||
return false
|
||||
}
|
||||
|
||||
const username = String(user.username || user.account || '').trim().toLowerCase()
|
||||
const role = String(user.role || '').trim().toLowerCase()
|
||||
const roleCodes = normalizedRoleCodes(user)
|
||||
|
||||
return (
|
||||
Boolean(user.isAdmin)
|
||||
|| username === 'admin'
|
||||
|| role === 'admin'
|
||||
|| role === '管理员'
|
||||
|| role === '系统管理员'
|
||||
|| roleCodes.includes('admin')
|
||||
)
|
||||
}
|
||||
|
||||
export function isManagerUser(user) {
|
||||
return hasPlatformAdminIdentity(user) || normalizedRoleCodes(user).includes('manager')
|
||||
}
|
||||
|
||||
export function isPlatformAdminUser(user) {
|
||||
return hasPlatformAdminIdentity(user)
|
||||
}
|
||||
|
||||
export function isFinanceUser(user) {
|
||||
return normalizedRoleCodes(user).includes('finance')
|
||||
}
|
||||
|
||||
export function isExecutiveUser(user) {
|
||||
return normalizedRoleCodes(user).includes('executive')
|
||||
}
|
||||
|
||||
export function isBudgetMonitorUser(user) {
|
||||
return normalizedRoleCodes(user).includes('budget_monitor')
|
||||
}
|
||||
|
||||
export function canEditBudgetCenter(user) {
|
||||
return isPlatformAdminUser(user) || isExecutiveUser(user)
|
||||
}
|
||||
|
||||
export function canSwitchBudgetDepartments(user) {
|
||||
return isPlatformAdminUser(user) || isExecutiveUser(user)
|
||||
}
|
||||
|
||||
export function canManageExpenseClaims(user) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return normalizedRoleCodes(user).some((roleCode) => CLAIM_MANAGER_ROLE_CODES.has(roleCode))
|
||||
}
|
||||
|
||||
export function canDeleteArchivedExpenseClaims(user) {
|
||||
return isPlatformAdminUser(user)
|
||||
}
|
||||
|
||||
export function canReturnExpenseClaims(user) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return normalizedRoleCodes(user).some((roleCode) => CLAIM_RETURN_ROLE_CODES.has(roleCode))
|
||||
}
|
||||
|
||||
export function canApproveLeaderExpenseClaims(user) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return normalizedRoleCodes(user).some((roleCode) => CLAIM_LEADER_APPROVAL_ROLE_CODES.has(roleCode))
|
||||
}
|
||||
|
||||
export function canApproveBudgetExpenseApplications(user, request = null) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
const roleCodes = normalizedRoleCodes(user)
|
||||
if (roleCodes.includes('executive')) {
|
||||
return true
|
||||
}
|
||||
if (!roleCodes.includes('budget_monitor')) {
|
||||
return false
|
||||
}
|
||||
if (normalizedGrade(user) !== CLAIM_BUDGET_APPROVAL_GRADE) {
|
||||
return false
|
||||
}
|
||||
|
||||
return request ? departmentIntersects(request, user) : true
|
||||
}
|
||||
|
||||
export function isCurrentRequestApplicant(request, user) {
|
||||
const applicantNames = collectIdentityNames(
|
||||
request?.person,
|
||||
request?.employeeName,
|
||||
request?.employee_name,
|
||||
request?.profileName,
|
||||
request?.applicant
|
||||
)
|
||||
const currentNames = collectIdentityNames(
|
||||
user?.name,
|
||||
user?.username,
|
||||
user?.email,
|
||||
user?.employeeNo,
|
||||
user?.employee_no
|
||||
)
|
||||
|
||||
return applicantNames.length > 0 && identityIntersects(applicantNames, currentNames)
|
||||
}
|
||||
|
||||
export function isCurrentDirectManagerForRequest(request, user) {
|
||||
if (isCurrentRequestApplicant(request, user)) {
|
||||
return false
|
||||
}
|
||||
|
||||
const managerNames = collectIdentityNames(
|
||||
request?.profileManager,
|
||||
request?.managerName,
|
||||
request?.manager_name,
|
||||
request?.directManagerName,
|
||||
request?.direct_manager_name,
|
||||
request?.manager
|
||||
)
|
||||
const currentNames = collectIdentityNames(
|
||||
user?.name,
|
||||
user?.username,
|
||||
user?.email,
|
||||
user?.employeeNo,
|
||||
user?.employee_no
|
||||
)
|
||||
|
||||
return managerNames.length > 0 && identityIntersects(managerNames, currentNames)
|
||||
}
|
||||
|
||||
export function canAccessAppView(user, viewId) {
|
||||
if (!viewId || !user) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (!DEFAULT_APP_VIEW_ORDER.includes(viewId)) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (viewId === 'budget') {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
const roleCodes = normalizedRoleCodes(user)
|
||||
return VIEW_ROLE_RULES.budget.some((roleCode) => roleCodes.includes(roleCode))
|
||||
}
|
||||
|
||||
if (isManagerUser(user)) {
|
||||
return true
|
||||
}
|
||||
export function canApproveLeaderExpenseClaims(user) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
return normalizedRoleCodes(user).some((roleCode) => CLAIM_LEADER_APPROVAL_ROLE_CODES.has(roleCode))
|
||||
}
|
||||
|
||||
export function canApproveBudgetExpenseApplications(user, request = null) {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
const roleCodes = normalizedRoleCodes(user)
|
||||
if (roleCodes.includes('executive')) {
|
||||
return true
|
||||
}
|
||||
if (!roleCodes.includes('budget_monitor')) {
|
||||
return false
|
||||
}
|
||||
if (normalizedGrade(user) !== CLAIM_BUDGET_APPROVAL_GRADE) {
|
||||
return false
|
||||
}
|
||||
|
||||
return request ? departmentIntersects(request, user) : true
|
||||
}
|
||||
|
||||
export function isCurrentRequestApplicant(request, user) {
|
||||
const applicantNames = collectIdentityNames(
|
||||
request?.person,
|
||||
request?.employeeName,
|
||||
request?.employee_name,
|
||||
request?.profileName,
|
||||
request?.applicant
|
||||
)
|
||||
const currentNames = collectIdentityNames(
|
||||
user?.name,
|
||||
user?.username,
|
||||
user?.email,
|
||||
user?.employeeNo,
|
||||
user?.employee_no
|
||||
)
|
||||
|
||||
return applicantNames.length > 0 && identityIntersects(applicantNames, currentNames)
|
||||
}
|
||||
|
||||
export function isCurrentDirectManagerForRequest(request, user) {
|
||||
if (isCurrentRequestApplicant(request, user)) {
|
||||
return false
|
||||
}
|
||||
|
||||
const managerNames = collectIdentityNames(
|
||||
request?.profileManager,
|
||||
request?.managerName,
|
||||
request?.manager_name,
|
||||
request?.directManagerName,
|
||||
request?.direct_manager_name,
|
||||
request?.manager
|
||||
)
|
||||
const currentNames = collectIdentityNames(
|
||||
user?.name,
|
||||
user?.username,
|
||||
user?.email,
|
||||
user?.employeeNo,
|
||||
user?.employee_no
|
||||
)
|
||||
|
||||
return managerNames.length > 0 && identityIntersects(managerNames, currentNames)
|
||||
}
|
||||
|
||||
export function canAccessAppView(user, viewId) {
|
||||
if (!viewId || !user) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (!DEFAULT_APP_VIEW_ORDER.includes(viewId)) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (viewId === 'budget') {
|
||||
if (isPlatformAdminUser(user)) {
|
||||
return true
|
||||
}
|
||||
const roleCodes = normalizedRoleCodes(user)
|
||||
return VIEW_ROLE_RULES.budget.some((roleCode) => roleCodes.includes(roleCode))
|
||||
}
|
||||
|
||||
if (isManagerUser(user)) {
|
||||
return true
|
||||
}
|
||||
|
||||
if (ALWAYS_VISIBLE_VIEWS.has(viewId)) {
|
||||
return true
|
||||
|
||||
@@ -10,7 +10,7 @@ function isArchivedRequestPayload(request) {
|
||||
const normalizedStatus = String(request.status || '').trim().toLowerCase()
|
||||
const stage = String(request.approval_stage || request.approvalStage || '').trim()
|
||||
|
||||
if (stage === '归档入账' || stage === 'completed') {
|
||||
if (stage === '归档入账' || stage === '已付款' || stage === 'completed') {
|
||||
return true
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ function isArchivedRequestPayload(request) {
|
||||
}
|
||||
|
||||
return ARCHIVED_CLAIM_STATUSES.has(normalizedStatus)
|
||||
&& (stage === '' || stage === '归档入账' || stage === 'completed')
|
||||
&& (stage === '' || stage === '归档入账' || stage === '已付款' || stage === 'completed')
|
||||
}
|
||||
|
||||
export function isArchivedDocumentRow(row) {
|
||||
|
||||
@@ -4,7 +4,7 @@ export function isArchivedExpenseClaim(claim) {
|
||||
const stage = String(claim?.approval_stage || claim?.approvalStage || '').trim()
|
||||
const status = String(claim?.status || '').trim().toLowerCase()
|
||||
|
||||
if (stage === '归档入账' || stage === 'completed' || stage.includes('归档')) {
|
||||
if (stage === '归档入账' || stage === '已付款' || stage === 'completed' || stage.includes('归档')) {
|
||||
return true
|
||||
}
|
||||
|
||||
@@ -16,5 +16,5 @@ export function isArchivedExpenseClaim(claim) {
|
||||
return true
|
||||
}
|
||||
|
||||
return !stage || stage === '归档入账' || stage === 'completed'
|
||||
return !stage || stage === '归档入账' || stage === '已付款' || stage === 'completed'
|
||||
}
|
||||
|
||||
@@ -14,13 +14,22 @@ export const HERMES_SIMPLE_TASKS = [
|
||||
frequency: 'weekly',
|
||||
frequencyLabel: '每周一',
|
||||
weekday: 1
|
||||
},
|
||||
{
|
||||
id: 'employee_behavior_profile_scan',
|
||||
label: '员工画像巡检',
|
||||
hint: '沉淀费用、流程质量与 AI 协作画像快照',
|
||||
frequency: 'weekly',
|
||||
frequencyLabel: '每周一',
|
||||
weekday: 1
|
||||
}
|
||||
]
|
||||
|
||||
function buildDefaultSchedules() {
|
||||
const defaults = {
|
||||
global_risk_scan: { enabled: true, frequency: 'daily', time: '09:00', weekday: 1, monthDay: 1, month: 1 },
|
||||
weekly_expense_report: { enabled: false, frequency: 'weekly', time: '10:30', weekday: 1, monthDay: 1, month: 1 }
|
||||
weekly_expense_report: { enabled: false, frequency: 'weekly', time: '10:30', weekday: 1, monthDay: 1, month: 1 },
|
||||
employee_behavior_profile_scan: { enabled: false, frequency: 'weekly', time: '08:30', weekday: 1, monthDay: 1, month: 1 }
|
||||
}
|
||||
|
||||
for (const task of HERMES_SIMPLE_TASKS) {
|
||||
@@ -49,7 +58,8 @@ export function buildDefaultHermesEmployeeForm() {
|
||||
notifyOnFailure: true,
|
||||
capabilities: {
|
||||
global_risk_scan: true,
|
||||
weekly_expense_report: false
|
||||
weekly_expense_report: false,
|
||||
employee_behavior_profile_scan: false
|
||||
},
|
||||
schedules: buildDefaultSchedules()
|
||||
}
|
||||
|
||||
@@ -115,6 +115,7 @@ const APPROVAL_META = {
|
||||
draft: { label: '草稿', tone: 'draft' },
|
||||
in_progress: { label: '审批中', tone: 'info' },
|
||||
supplement: { label: '待补充', tone: 'warning' },
|
||||
pending_payment: { label: '待付款', tone: 'warning' },
|
||||
completed: { label: '已完成', tone: 'success' },
|
||||
rejected: { label: '已退回', tone: 'danger' }
|
||||
}
|
||||
@@ -126,8 +127,9 @@ const BACKEND_STATUS_META = {
|
||||
reviewing: { key: 'in_progress', label: '审批中', tone: 'info' },
|
||||
in_review: { key: 'in_progress', label: '审批中', tone: 'info' },
|
||||
in_progress: { key: 'in_progress', label: '审批中', tone: 'info' },
|
||||
pending_payment: { key: 'pending_payment', label: '待付款', tone: 'warning' },
|
||||
approved: { key: 'completed', label: '已完成', tone: 'success' },
|
||||
paid: { key: 'completed', label: '已完成', tone: 'success' },
|
||||
paid: { key: 'completed', label: '已付款', tone: 'success' },
|
||||
completed: { key: 'completed', label: '已完成', tone: 'success' },
|
||||
supplement: { key: 'supplement', label: '待补充', tone: 'warning' },
|
||||
returned: { key: 'supplement', label: '待提交', tone: 'warning' },
|
||||
@@ -259,7 +261,7 @@ export function isArchivedRequestView(request) {
|
||||
const displayStage = String(request?.workflowNode || request?.node || '').trim()
|
||||
const stage = rawStage || displayStage
|
||||
|
||||
if (stage === '归档入账' || stage === 'completed' || stage.includes('归档') || stage.includes('入账')) {
|
||||
if (stage === '归档入账' || stage === '已付款' || stage === 'completed' || stage.includes('归档') || stage.includes('入账')) {
|
||||
return true
|
||||
}
|
||||
if (
|
||||
@@ -270,7 +272,7 @@ export function isArchivedRequestView(request) {
|
||||
return true
|
||||
}
|
||||
if (['approved', 'completed', 'paid'].includes(status)) {
|
||||
return rawStage === '' || rawStage === '归档入账' || rawStage === 'completed'
|
||||
return rawStage === '' || rawStage === '归档入账' || rawStage === '已付款' || rawStage === 'completed'
|
||||
}
|
||||
return approvalKey === 'completed'
|
||||
}
|
||||
|
||||
@@ -5,11 +5,13 @@ const NON_RISK_SOURCES = new Set([
|
||||
'approval',
|
||||
'approval_log',
|
||||
'expense_claim_approval',
|
||||
'expense_claim_finance_approval'
|
||||
'expense_claim_finance_approval',
|
||||
'payment'
|
||||
])
|
||||
const NON_RISK_EVENTS = new Set([
|
||||
'expense_claim_approval',
|
||||
'expense_claim_finance_approval'
|
||||
'expense_claim_finance_approval',
|
||||
'expense_claim_payment_completed'
|
||||
])
|
||||
const NON_RISK_TONES = new Set(['info', 'pass', 'success', 'approved', 'ok', 'none'])
|
||||
const RISK_SOURCES = new Set([
|
||||
@@ -39,6 +41,8 @@ function isApprovalOnlyText(value) {
|
||||
/^(同意|通过|审批通过|审核通过|已同意|无意见)$/.test(text)
|
||||
|| /已审批通过/.test(text)
|
||||
|| /已完成财务审核/.test(text)
|
||||
|| /进入待付款/.test(text)
|
||||
|| /已确认付款/.test(text)
|
||||
|| /进入归档入账/.test(text)
|
||||
|| /流转至/.test(text)
|
||||
)
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
<template>
|
||||
<div class="app" :class="{ 'sidebar-collapsed': sidebarCollapsed }">
|
||||
<div class="app" :class="{ 'sidebar-collapsed': sidebarCollapsed, 'mobile-sidebar-open': mobileSidebarOpen }">
|
||||
<div class="mobile-overlay" aria-hidden="true" @click="mobileSidebarOpen = false"></div>
|
||||
<div class="app-sidebar">
|
||||
<SidebarRail
|
||||
:nav-items="filteredNavItems"
|
||||
:active-view="activeView"
|
||||
:company-name="companyProfile.name"
|
||||
:company-name="PRODUCT_DISPLAY_NAME"
|
||||
:company-logo="companyProfile.logo"
|
||||
:current-user="currentUser"
|
||||
:collapsed="sidebarCollapsed"
|
||||
@navigate="handleNavigate"
|
||||
@open-chat="openSmartEntry"
|
||||
@logout="handleLogout"
|
||||
@toggle-collapse="toggleSidebarCollapsed"
|
||||
@navigate="handleNavigateWithMobileClose"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -43,7 +44,7 @@
|
||||
:logs-summary="logsSummary"
|
||||
:request-summary="requestSummary"
|
||||
:document-summary="documentSummary"
|
||||
:workbench-summary="workbenchSummary"
|
||||
:company-name="ENTERPRISE_DISPLAY_NAME"
|
||||
:detail-mode="detailMode"
|
||||
:log-detail-mode="logDetailMode"
|
||||
:detail-alerts="detailAlerts"
|
||||
@@ -176,11 +177,17 @@ const logsSummary = ref(null)
|
||||
const documentSummary = ref(null)
|
||||
const auditDetailOpen = ref(false)
|
||||
const sidebarCollapsed = ref(false)
|
||||
const mobileSidebarOpen = ref(false)
|
||||
|
||||
function toggleSidebarCollapsed() {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value
|
||||
}
|
||||
|
||||
function handleNavigateWithMobileClose(viewId) {
|
||||
handleNavigate(viewId)
|
||||
mobileSidebarOpen.value = false
|
||||
}
|
||||
|
||||
const {
|
||||
activeRange,
|
||||
activeView,
|
||||
@@ -222,6 +229,8 @@ const {
|
||||
} = useAppShell()
|
||||
|
||||
const { companyProfile, currentUser, logout } = useSystemState()
|
||||
const PRODUCT_DISPLAY_NAME = '易财费控'
|
||||
const ENTERPRISE_DISPLAY_NAME = '远光软件股份有限公司'
|
||||
const filteredNavItems = computed(() => filterNavItemsByAccess(navItems, currentUser.value))
|
||||
|
||||
function handleLogout() {
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="hint"><i class="mdi mdi-information-outline"></i> 归档中心保存公司已归档入账的报销数据，点击单据行查看详情</p>
|
||||
<p class="hint"><i class="mdi mdi-information-outline"></i> 归档中心保存公司已付款或已归档的报销数据，点击单据行查看详情</p>
|
||||
|
||||
<div class="table-wrap" :class="{ 'is-empty': showEmpty }">
|
||||
<div v-if="loading" class="table-state">
|
||||
|
||||
@@ -262,7 +262,7 @@ const DOCUMENT_SCOPE_REIMBURSEMENT = '报销单'
|
||||
const DOCUMENT_SCOPE_REVIEW = '审核单'
|
||||
const DOCUMENT_SCOPE_ARCHIVE = '归档'
|
||||
const scopeTabs = [DOCUMENT_SCOPE_ALL, DOCUMENT_SCOPE_APPLICATION, DOCUMENT_SCOPE_REIMBURSEMENT, DOCUMENT_SCOPE_REVIEW, DOCUMENT_SCOPE_ARCHIVE]
|
||||
const statusTabs = ['全部', '草稿', '待提交', '审批中', '待补充', '已完成']
|
||||
const statusTabs = ['全部', '草稿', '待提交', '审批中', '待补充', '待付款', '已完成']
|
||||
const FILTER_CONFIG_BY_SCOPE = {
|
||||
[DOCUMENT_SCOPE_ALL]: {
|
||||
searchPlaceholder: '搜索单号、事项、费用场景...',
|
||||
@@ -301,7 +301,7 @@ const FILTER_CONFIG_BY_SCOPE = {
|
||||
sceneFallbackLabel: '归档场景',
|
||||
dateLabel: '归档时间',
|
||||
statusTitle: '归档状态',
|
||||
statusTabs: ['全部', '已完成'],
|
||||
statusTabs: ['全部', '已付款', '已完成'],
|
||||
showDocumentType: false
|
||||
}
|
||||
}
|
||||
@@ -522,9 +522,19 @@ function resolveArchivedDocumentNode(normalized, documentTypeCode) {
|
||||
if (documentTypeCode === DOCUMENT_TYPE_APPLICATION) {
|
||||
return '申请归档'
|
||||
}
|
||||
if (normalized.status === 'paid' || normalized.approvalStatus === '已付款') {
|
||||
return '已付款'
|
||||
}
|
||||
return normalized.node || normalized.workflowNode || '财务归档'
|
||||
}
|
||||
|
||||
function resolveArchivedStatusLabel(normalized) {
|
||||
if (normalized.status === 'paid' || normalized.approvalStatus === '已付款' || normalized.node === '已付款') {
|
||||
return '已付款'
|
||||
}
|
||||
return '已归档'
|
||||
}
|
||||
|
||||
function buildDocumentRow(request, options = {}) {
|
||||
const normalized = normalizeRequestForUi(request)
|
||||
if (!normalized) {
|
||||
@@ -533,7 +543,7 @@ function buildDocumentRow(request, options = {}) {
|
||||
|
||||
const archived = Boolean(options.archived)
|
||||
const statusGroup = resolveStatusGroup(normalized, archived)
|
||||
const statusLabel = archived ? '已归档' : resolveStatusLabel(normalized, statusGroup)
|
||||
const statusLabel = archived ? resolveArchivedStatusLabel(normalized) : resolveStatusLabel(normalized, statusGroup)
|
||||
const documentNo = normalized.documentNo || normalized.id || normalized.claimId || '待生成'
|
||||
const claimId = normalized.claimId || normalized.id || documentNo
|
||||
const createdAtSource = normalized.createdAt || normalized.submittedAt || normalized.applyTime || normalized.updatedAt
|
||||
@@ -581,6 +591,7 @@ function resolveStatusGroup(row, archived) {
|
||||
if (row.approvalKey === 'draft') return 'draft'
|
||||
if (row.approvalKey === 'supplement' && row.status === 'returned') return 'pending_submit'
|
||||
if (row.approvalKey === 'supplement') return 'supplement'
|
||||
if (row.approvalKey === 'pending_payment') return 'pending_payment'
|
||||
if (row.approvalKey === 'in_progress') return 'in_progress'
|
||||
if (row.approvalKey === 'completed') return 'completed'
|
||||
return 'other'
|
||||
@@ -588,6 +599,7 @@ function resolveStatusGroup(row, archived) {
|
||||
|
||||
function resolveStatusLabel(row, statusGroup) {
|
||||
if (statusGroup === 'pending_submit') return '待提交'
|
||||
if (statusGroup === 'pending_payment') return '待付款'
|
||||
return row.approval || row.approvalStatus || '处理中'
|
||||
}
|
||||
|
||||
@@ -606,6 +618,8 @@ function matchesStatusTab(row, tab) {
|
||||
if (tab === '待提交') return row.statusGroup === 'pending_submit'
|
||||
if (tab === '审批中') return row.statusGroup === 'in_progress'
|
||||
if (tab === '待补充') return row.statusGroup === 'supplement'
|
||||
if (tab === '待付款') return row.statusGroup === 'pending_payment'
|
||||
if (tab === '已付款') return row.statusLabel === '已付款' || row.node === '已付款'
|
||||
if (tab === '已完成') return row.statusGroup === 'completed'
|
||||
return true
|
||||
}
|
||||
|
||||
@@ -231,6 +231,30 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="detail-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
<h3>银行信息</h3>
|
||||
<p>维护员工付款打款所需的户名、开户行与银行账号。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<label class="field">
|
||||
<span>户名</span>
|
||||
<input v-model="employeeForm.bankAccountName" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>开户行</span>
|
||||
<input v-model="employeeForm.bankName" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>银行账号</span>
|
||||
<input v-model="employeeForm.bankAccountNo" inputmode="numeric" />
|
||||
</label>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="detail-card panel">
|
||||
<div class="card-head">
|
||||
<div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<LoginView
|
||||
:company-name="companyProfile.name"
|
||||
:company-name="LOGIN_BRAND_NAME"
|
||||
:submitting="loginSubmitting"
|
||||
:error-message="loginError"
|
||||
@login="submitLogin"
|
||||
@@ -18,7 +18,6 @@ import LoginView from './LoginView.vue'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const {
|
||||
companyProfile,
|
||||
handleLogin,
|
||||
handleRecoverPassword,
|
||||
handleSsoLogin,
|
||||
@@ -27,6 +26,8 @@ const {
|
||||
resolveEntryRoute
|
||||
} = useSystemState()
|
||||
|
||||
const LOGIN_BRAND_NAME = '易财费控'
|
||||
|
||||
async function submitLogin(credentials) {
|
||||
const passed = await handleLogin(credentials)
|
||||
|
||||
|
||||
@@ -104,10 +104,12 @@
|
||||
<label class="field">
|
||||
<span class="sr-only">企业或租户</span>
|
||||
<i class="mdi mdi-office-building"></i>
|
||||
<input v-model="tenant" type="text" placeholder="请输入企业 / 租户（选填）" />
|
||||
<button class="field-icon-btn" type="button" aria-label="展开企业列表">
|
||||
<select v-model="tenant" class="tenant-select" aria-label="请选择企业或租户">
|
||||
<option value="远光软件股份有限公司">远光软件股份有限公司</option>
|
||||
</select>
|
||||
<span class="field-select-chevron" aria-hidden="true">
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div class="form-meta">
|
||||
@@ -162,7 +164,7 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['login', 'recover-password', 'sso-login'])
|
||||
|
||||
const displayCompanyName = computed(() => props.companyName || 'X-Financial')
|
||||
const displayCompanyName = computed(() => props.companyName || '易财费控')
|
||||
|
||||
const { features, LogoMark, password, remember, showPassword, tenant, username } = useLoginView()
|
||||
</script>
|
||||
|
||||
@@ -485,6 +485,13 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<EmployeeProfileRiskCard
|
||||
v-if="showEmployeeRiskProfile"
|
||||
:profile="employeeRiskProfile"
|
||||
:loading="employeeRiskProfileLoading"
|
||||
:error="employeeRiskProfileError"
|
||||
/>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
@@ -504,7 +511,7 @@
|
||||
{{ submitBusy ? '提交中' : '提交审批' }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-else-if="canReturnRequest || canApproveRequest || canDeleteRequest" class="approval-action-group" aria-label="单据管理操作">
|
||||
<div v-else-if="canReturnRequest || canApproveRequest || canPayRequest || canDeleteRequest" class="approval-action-group" aria-label="单据管理操作">
|
||||
<button
|
||||
v-if="canReturnRequest"
|
||||
class="return-action"
|
||||
@@ -525,6 +532,16 @@
|
||||
<i class="mdi mdi-check-circle-outline"></i>
|
||||
{{ approveBusy ? approveBusyLabel : approveActionLabel }}
|
||||
</button>
|
||||
<button
|
||||
v-if="canPayRequest"
|
||||
class="approve-action"
|
||||
type="button"
|
||||
:disabled="actionBusy"
|
||||
@click="handlePayRequest"
|
||||
>
|
||||
<i class="mdi mdi-cash-check"></i>
|
||||
{{ payBusy ? '付款中' : '确认付款' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="canDeleteRequest"
|
||||
class="reject-action"
|
||||
@@ -774,6 +791,22 @@
|
||||
@confirm="confirmApproveRequest"
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
:open="payConfirmDialogOpen"
|
||||
badge="付款确认"
|
||||
badge-tone="warning"
|
||||
:title="`确认 ${request.id} 已付款吗？`"
|
||||
description="确认后该报销单会进入已付款状态，并汇总到归档视图。"
|
||||
cancel-text="返回核对"
|
||||
confirm-text="确认已付款"
|
||||
busy-text="付款中..."
|
||||
confirm-tone="primary"
|
||||
confirm-icon="mdi mdi-cash-check"
|
||||
:busy="payBusy"
|
||||
@close="closePayConfirmDialog"
|
||||
@confirm="confirmPayRequest"
|
||||
/>
|
||||
|
||||
<TravelRequestReturnDialog
|
||||
:open="returnDialogOpen"
|
||||
:title="`确认退回 ${request.id} 吗？`"
|
||||
|
||||
@@ -74,7 +74,7 @@ function buildArchiveRow(request) {
|
||||
archiveMonthLabel: formatArchiveMonthLabel(archiveMonth),
|
||||
archiveType: isApplicationDocument ? ARCHIVE_TYPE_APPLICATION : ARCHIVE_TYPE_REIMBURSEMENT,
|
||||
archiveTypeCode: isApplicationDocument ? ARCHIVE_TYPE_APPLICATION_CODE : ARCHIVE_TYPE_REIMBURSEMENT_CODE,
|
||||
node: isApplicationDocument ? '申请归档' : (normalized.workflowNode || '归档入账'),
|
||||
node: isApplicationDocument ? '申请归档' : (normalized.workflowNode || '已付款'),
|
||||
hasRisk,
|
||||
riskCount,
|
||||
risk: formatArchiveRiskCountLabel(riskCount),
|
||||
@@ -168,13 +168,13 @@ export default {
|
||||
return {
|
||||
eyebrow: '归档中心',
|
||||
title: '当前还没有已归档单据',
|
||||
desc: '财务终审通过并进入「归档入账」节点的报销单会自动汇总到这里，形成公司级财务归档库。',
|
||||
desc: '财务确认付款后进入「已付款」状态的报销单会自动汇总到这里，形成公司级财务归档库。',
|
||||
icon: 'mdi mdi-archive-check-outline',
|
||||
actionLabel: null,
|
||||
actionIcon: null,
|
||||
tone: 'slate',
|
||||
artLabel: 'ARCHIVE',
|
||||
tips: ['仅展示已归档入账的单据', '申请人仍可在报销中心查看自己的归档记录']
|
||||
tips: ['仅展示已付款或已归档的单据', '申请人仍可在报销中心查看自己的归档记录']
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -16,6 +16,12 @@ import {
|
||||
importEmployees,
|
||||
updateEmployee
|
||||
} from '../../services/employees.js'
|
||||
import {
|
||||
appendEmployeeBankUpdatePayload,
|
||||
createEmployeeBankFormFields,
|
||||
getEmployeeBankSearchFields,
|
||||
mapEmployeeBankFormFields
|
||||
} from './employeeBankFields.js'
|
||||
|
||||
const DEFAULT_STATUS_TABS = ['全部员工', '在职', '试用中', '停用']
|
||||
const FALLBACK_ROLE_OPTIONS = [
|
||||
@@ -76,6 +82,7 @@ function createEmployeeForm() {
|
||||
managerEmployeeNo: '',
|
||||
financeOwner: '',
|
||||
costCenter: '',
|
||||
...createEmployeeBankFormFields(),
|
||||
roleCodes: [],
|
||||
password: ''
|
||||
}
|
||||
@@ -197,6 +204,7 @@ function buildEmployeeForm(employee, roster = []) {
|
||||
managerEmployeeNo,
|
||||
financeOwner: employee.financeOwner || '',
|
||||
costCenter: employee.costCenter || '',
|
||||
...mapEmployeeBankFormFields(employee),
|
||||
roleCodes: [...(employee.roleCodes || [])],
|
||||
password: ''
|
||||
}
|
||||
@@ -380,6 +388,7 @@ function matchKeyword(employee, keyword) {
|
||||
employee.email,
|
||||
employee.manager,
|
||||
employee.financeOwner,
|
||||
...getEmployeeBankSearchFields(employee),
|
||||
employee.syncState
|
||||
]
|
||||
|
||||
@@ -1053,6 +1062,8 @@ export default {
|
||||
payload.cost_center = nextCostCenter
|
||||
}
|
||||
|
||||
appendEmployeeBankUpdatePayload(payload, form, current, normalizeNullableText)
|
||||
|
||||
const nextManagerEmployeeNo = normalizeNullableText(form.managerEmployeeNo)
|
||||
const currentManagerEmployeeNo =
|
||||
normalizeNullableText(current.managerEmployeeNo) ||
|
||||
|
||||
@@ -15,6 +15,9 @@ export default {
|
||||
knowledgeAggregation: { icon: 'mdi-sync', color: 'indigo' },
|
||||
ruleReviewDigest: { icon: 'mdi-bell-ring-outline', color: 'warning' },
|
||||
riskSummary: { icon: 'mdi-shield-search', color: 'danger' },
|
||||
employee_behavior_profile_scan: { icon: 'mdi-account-search-outline', color: 'primary' },
|
||||
global_risk_scan: { icon: 'mdi-shield-search', color: 'danger' },
|
||||
weekly_expense_report: { icon: 'mdi-chart-box-outline', color: 'success' },
|
||||
archiveDigest: { icon: 'mdi-archive-outline', color: 'info' },
|
||||
dailyStats: { icon: 'mdi-chart-line', color: 'success' },
|
||||
monthlyStats: { icon: 'mdi-chart-bar', color: 'primary' },
|
||||
@@ -56,4 +59,3 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ export default {
|
||||
emits: ['ask', 'approve', 'reject', 'create-request', 'reload'],
|
||||
setup(props, { emit }) {
|
||||
const activeTab = ref('全部')
|
||||
const tabs = ['全部', '草稿', '待提交', '审批中', '待补充', '已完成']
|
||||
const tabs = ['全部', '草稿', '待提交', '审批中', '待补充', '待付款', '已完成']
|
||||
const filters = ['报销状态', '报销类型', '所属主体']
|
||||
const listKeyword = ref('')
|
||||
|
||||
@@ -102,6 +102,7 @@ export default {
|
||||
|| (activeTab.value === '待提交' && row.approvalKey === 'supplement' && row.status === 'returned')
|
||||
|| (activeTab.value === '审批中' && row.approvalKey === 'in_progress')
|
||||
|| (activeTab.value === '待补充' && row.approvalKey === 'supplement' && row.status !== 'returned')
|
||||
|| (activeTab.value === '待付款' && row.approvalKey === 'pending_payment')
|
||||
|| (activeTab.value === '已完成' && row.approvalKey === 'completed')
|
||||
|
||||
return matchesKeyword && matchesDateRange && matchesTab
|
||||
|
||||
@@ -7,6 +7,7 @@ import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
|
||||
import TravelRequestApprovalDialog from '../../components/travel/TravelRequestApprovalDialog.vue'
|
||||
import TravelRequestBudgetAnalysis from '../../components/travel/TravelRequestBudgetAnalysis.vue'
|
||||
import TravelRequestDeleteDialog from '../../components/travel/TravelRequestDeleteDialog.vue'
|
||||
import EmployeeProfileRiskCard from '../../components/travel/EmployeeProfileRiskCard.vue'
|
||||
import TravelRequestReturnDialog from '../../components/travel/TravelRequestReturnDialog.vue'
|
||||
import {
|
||||
approveExpenseClaim,
|
||||
@@ -14,6 +15,7 @@ import {
|
||||
deleteExpenseClaimItem,
|
||||
deleteExpenseClaimItemAttachment,
|
||||
deleteExpenseClaim,
|
||||
fetchEmployeeLatestProfile,
|
||||
fetchExpenseClaimItemAttachmentMeta,
|
||||
fetchExpenseClaimItemAttachmentPreview,
|
||||
returnExpenseClaim,
|
||||
@@ -72,6 +74,7 @@ import {
|
||||
resolveExpenseReasonPlaceholder,
|
||||
resolveExpenseUploadHint
|
||||
} from './travelRequestDetailExpenseModel.js'
|
||||
import { useTravelRequestPaymentFlow } from './travelRequestDetailPaymentFlow.js'
|
||||
|
||||
/*
|
||||
* 以下片段仅用于兼容现有源码正则测试。
|
||||
@@ -370,6 +373,7 @@ export default {
|
||||
components: {
|
||||
ConfirmDialog,
|
||||
EnterpriseSelect,
|
||||
EmployeeProfileRiskCard,
|
||||
TravelRequestApprovalDialog,
|
||||
TravelRequestBudgetAnalysis,
|
||||
TravelRequestDeleteDialog,
|
||||
@@ -432,6 +436,10 @@ export default {
|
||||
})
|
||||
const detailNoteEditor = ref('')
|
||||
const savingDetailNote = ref(false)
|
||||
const employeeRiskProfile = ref(null)
|
||||
const employeeRiskProfileLoading = ref(false)
|
||||
const employeeRiskProfileError = ref('')
|
||||
let employeeRiskProfileLoadSeq = 0
|
||||
|
||||
const request = computed(() => {
|
||||
const normalized = normalizeRequestForUi(props.request)
|
||||
@@ -520,6 +528,29 @@ export default {
|
||||
&& canApproveBudgetExpenseApplications(currentUser.value, request.value)
|
||||
&& !isCurrentApplicant.value
|
||||
))
|
||||
const employeeProfileId = computed(() =>
|
||||
String(
|
||||
request.value.employeeId
|
||||
|| request.value.employee_id
|
||||
|| request.value.profileEmployeeId
|
||||
|| ''
|
||||
).trim()
|
||||
)
|
||||
const employeeRiskProfileScope = computed(() => {
|
||||
const typeCode = String(request.value.typeCode || request.value.expense_type || '').trim()
|
||||
if (typeCode === 'meal' || typeCode === 'entertainment') {
|
||||
return 'entertainment'
|
||||
}
|
||||
if (typeCode === 'travel' || isTravelRequest.value) {
|
||||
return 'travel'
|
||||
}
|
||||
return typeCode || 'overall'
|
||||
})
|
||||
const showEmployeeRiskProfile = computed(() =>
|
||||
Boolean(employeeProfileId.value)
|
||||
&& Boolean(request.value.claimId)
|
||||
&& !isDraftRequest.value
|
||||
)
|
||||
const canReturnRequest = computed(() => {
|
||||
if (request.value.approvalKey !== 'in_progress' || !request.value.claimId || !canReturnExpenseClaims(currentUser.value)) {
|
||||
return false
|
||||
@@ -545,6 +576,21 @@ export default {
|
||||
|| canProcessBudgetApprovalStage.value
|
||||
)
|
||||
)
|
||||
const {
|
||||
canPayRequest,
|
||||
closePayConfirmDialog,
|
||||
confirmPayRequest,
|
||||
handlePayRequest,
|
||||
payBusy,
|
||||
payConfirmDialogOpen
|
||||
} = useTravelRequestPaymentFlow({
|
||||
request,
|
||||
currentUser,
|
||||
isApplicationDocument,
|
||||
isCurrentApplicant,
|
||||
toast,
|
||||
emit
|
||||
})
|
||||
const leaderApprovalInfo = computed(() => buildLeaderApprovalInfo(request.value))
|
||||
const leaderApprovalEvents = computed(() => buildLeaderApprovalEvents(request.value))
|
||||
const hasLeaderApprovalEvents = computed(() => leaderApprovalEvents.value.length > 0)
|
||||
@@ -572,7 +618,7 @@ export default {
|
||||
})
|
||||
const approvalOpinionHint = computed(() => {
|
||||
if (isFinanceApprovalStage.value) {
|
||||
return '审核通过后将进入归档入账。'
|
||||
return '审核通过后将进入待付款。'
|
||||
}
|
||||
if (isBudgetApprovalStage.value) {
|
||||
return '不填写附加意见则默认同意，确认后会归档申请单并生成报销草稿。'
|
||||
@@ -587,7 +633,7 @@ export default {
|
||||
})
|
||||
const approvalConfirmDescription = computed(() => {
|
||||
if (isFinanceApprovalStage.value) {
|
||||
return '确认后该报销单会完成财务终审并进入归档入账，请确认票据、金额与财务意见无误。'
|
||||
return '确认后该报销单会完成财务终审并进入待付款，请确认票据、金额与财务意见无误。'
|
||||
}
|
||||
if (isApplicationDocument.value) {
|
||||
return isBudgetApprovalStage.value
|
||||
@@ -610,7 +656,7 @@ export default {
|
||||
))
|
||||
const approvalSuccessToast = computed(() => {
|
||||
if (isFinanceApprovalStage.value) {
|
||||
return `${request.value.id} 已完成财务终审，进入归档入账。`
|
||||
return `${request.value.id} 已完成财务终审，进入待付款。`
|
||||
}
|
||||
return isApplicationDocument.value
|
||||
? isBudgetApprovalStage.value
|
||||
@@ -632,6 +678,7 @@ export default {
|
||||
|| deleteBusy.value
|
||||
|| returnBusy.value
|
||||
|| approveBusy.value
|
||||
|| payBusy.value
|
||||
|| creatingExpense.value
|
||||
|| Boolean(uploadingExpenseId.value)
|
||||
|| Boolean(deletingAttachmentId.value)
|
||||
@@ -672,6 +719,19 @@ export default {
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => [
|
||||
employeeProfileId.value,
|
||||
request.value.claimId,
|
||||
employeeRiskProfileScope.value,
|
||||
showEmployeeRiskProfile.value
|
||||
],
|
||||
() => {
|
||||
void loadEmployeeRiskProfile()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const heroFactItems = computed(() => [
|
||||
{
|
||||
key: 'document',
|
||||
@@ -887,6 +947,38 @@ export default {
|
||||
return payload
|
||||
}
|
||||
|
||||
async function loadEmployeeRiskProfile() {
|
||||
const sequence = ++employeeRiskProfileLoadSeq
|
||||
employeeRiskProfileError.value = ''
|
||||
if (!showEmployeeRiskProfile.value) {
|
||||
employeeRiskProfile.value = null
|
||||
employeeRiskProfileLoading.value = false
|
||||
return
|
||||
}
|
||||
|
||||
employeeRiskProfileLoading.value = true
|
||||
try {
|
||||
const payload = await fetchEmployeeLatestProfile(employeeProfileId.value, {
|
||||
scene: 'approval',
|
||||
claim_id: request.value.claimId,
|
||||
window_days: 90,
|
||||
expense_type_scope: employeeRiskProfileScope.value
|
||||
})
|
||||
if (sequence === employeeRiskProfileLoadSeq) {
|
||||
employeeRiskProfile.value = payload
|
||||
}
|
||||
} catch (error) {
|
||||
if (sequence === employeeRiskProfileLoadSeq) {
|
||||
employeeRiskProfile.value = null
|
||||
employeeRiskProfileError.value = error?.message || '画像读取失败，请稍后重试。'
|
||||
}
|
||||
} finally {
|
||||
if (sequence === employeeRiskProfileLoadSeq) {
|
||||
employeeRiskProfileLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function canPreviewAttachment(item) {
|
||||
if (!item?.invoiceId) {
|
||||
return false
|
||||
@@ -1831,24 +1923,26 @@ export default {
|
||||
applicationDetailFactItems,
|
||||
approveBusyText, approveConfirmText, approveConfirmTitle, canDeleteRequest, canManageCurrentClaim,
|
||||
canNavigateAttachmentPreview,
|
||||
canOpenAiEntry, canApproveRequest, canReturnRequest, canSubmit, canPreviewAttachment,
|
||||
closeApproveConfirmDialog, closeDeleteDialog, closeAttachmentPreview, closeSubmitConfirmDialog,
|
||||
canOpenAiEntry, canApproveRequest, canPayRequest, canReturnRequest, canSubmit, canPreviewAttachment,
|
||||
closeApproveConfirmDialog, closeDeleteDialog, closeAttachmentPreview, closePayConfirmDialog, closeSubmitConfirmDialog,
|
||||
closeRiskOverrideDialog,
|
||||
closeReturnDialog, confirmApproveRequest, confirmDeleteRequest, confirmSubmitRequest, confirmReturnRequest,
|
||||
confirmRiskOverrideReasons,
|
||||
confirmPayRequest, confirmRiskOverrideReasons,
|
||||
currentAttachmentPreviewInsight, currentAttachmentPreviewRiskCards, currentProgressRingMotion,
|
||||
currentSubmitRiskWarning,
|
||||
canEditDetailNote, deleteActionLabel, deleteBusy, deleteDialogDescription, deleteDialogOpen,
|
||||
deleteDialogTitle, deletingAttachmentId, deletingExpenseId, detailNote, detailNoteDirty,
|
||||
detailNoteEditor, detailNoteEditorView, detailNoteTags, draftBlockingIssues, editingExpenseId, creatingExpense, expenseEditor,
|
||||
employeeRiskProfile, employeeRiskProfileError, employeeRiskProfileLoading,
|
||||
expenseItems, expenseTableColumnCount, expenseTotal, expenseUploadInput,
|
||||
expenseTypeOptions: EXPENSE_TYPE_OPTIONS,
|
||||
goToNextSubmitRisk, goToPreviousSubmitRisk,
|
||||
handleAddExpenseItem, handleApproveRequest, handleDeleteRequest, handleExpenseFileChange,
|
||||
handlePayRequest,
|
||||
handleReturnRequest, handleSubmit, heroFactItems, isApplicationDocument, isDraftRequest, isEditableRequest, isTravelRequest,
|
||||
isMajorExpenseRisk,
|
||||
openAiEntry, openAttachmentPreview, goToNextAttachmentPreview, goToPreviousAttachmentPreview,
|
||||
profile, progressSteps, request, leaderOpinion, removeExpenseAttachment, removeExpenseItem,
|
||||
payBusy, payConfirmDialogOpen, profile, progressSteps, request, leaderOpinion, removeExpenseAttachment, removeExpenseItem,
|
||||
hasLeaderApprovalEvents, leaderApprovalEvents, leaderApprovalReadonlyMeta,
|
||||
resolveExpenseRiskIndicatorTitle,
|
||||
resetDetailNote, resolveAttachmentDisplayName, resolveAttachmentPreviewTitle, resolveAttachmentRecognition,
|
||||
@@ -1857,7 +1951,7 @@ export default {
|
||||
requiresApprovalOpinion,
|
||||
riskOverrideReasons, saveDetailNote, savingDetailNote, savingExpenseId,
|
||||
showAiAdvicePanel, showApplicationLeaderOpinion,
|
||||
showBudgetAnalysis,
|
||||
showBudgetAnalysis, showEmployeeRiskProfile,
|
||||
showExpenseRisk, startExpenseEdit, submitBusy, submitConfirmDialogOpen,
|
||||
submitRiskWarnings,
|
||||
triggerExpenseUpload, uploadedExpenseCount, uploadingExpenseId, saveExpenseEdit
|
||||
|
||||
@@ -8,6 +8,7 @@ const TASK_TYPE_LABELS = {
|
||||
weekly_expense_report: '周度费用洞察',
|
||||
rule_review_digest: '规则待审摘要',
|
||||
knowledge_index_sync: '知识库归集',
|
||||
finance_policy_knowledge_organize: '整理公司财务知识制度',
|
||||
llm_wiki_rule_formation: '知识库归集',
|
||||
x_financial_callback: '任务回调上报'
|
||||
}
|
||||
@@ -19,6 +20,7 @@ const TASK_TYPE_SKILL_CATEGORIES = {
|
||||
weekly_expense_report: '整理',
|
||||
rule_review_digest: '升级',
|
||||
knowledge_index_sync: '积累',
|
||||
finance_policy_knowledge_organize: '整理',
|
||||
llm_wiki_rule_formation: '积累',
|
||||
x_financial_callback: '升级'
|
||||
}
|
||||
|
||||
40
web/src/views/scripts/employeeBankFields.js
Normal file
40
web/src/views/scripts/employeeBankFields.js
Normal file
@@ -0,0 +1,40 @@
|
||||
export function createEmployeeBankFormFields() {
|
||||
return {
|
||||
bankAccountName: '',
|
||||
bankName: '',
|
||||
bankAccountNo: ''
|
||||
}
|
||||
}
|
||||
|
||||
export function mapEmployeeBankFormFields(employee) {
|
||||
return {
|
||||
bankAccountName: employee?.bankAccountName || '',
|
||||
bankName: employee?.bankName || '',
|
||||
bankAccountNo: employee?.bankAccountNo || ''
|
||||
}
|
||||
}
|
||||
|
||||
export function getEmployeeBankSearchFields(employee) {
|
||||
return [
|
||||
employee?.bankAccountName,
|
||||
employee?.bankName,
|
||||
employee?.bankAccountNo
|
||||
]
|
||||
}
|
||||
|
||||
export function appendEmployeeBankUpdatePayload(payload, form, current, normalizeNullableText) {
|
||||
const nextBankAccountName = normalizeNullableText(form.bankAccountName)
|
||||
if (nextBankAccountName !== (current.bankAccountName || null)) {
|
||||
payload.bank_account_name = nextBankAccountName
|
||||
}
|
||||
|
||||
const nextBankName = normalizeNullableText(form.bankName)
|
||||
if (nextBankName !== (current.bankName || null)) {
|
||||
payload.bank_name = nextBankName
|
||||
}
|
||||
|
||||
const nextBankAccountNo = normalizeNullableText(form.bankAccountNo)
|
||||
if (nextBankAccountNo !== (current.bankAccountNo || null)) {
|
||||
payload.bank_account_no = nextBankAccountNo
|
||||
}
|
||||
}
|
||||
@@ -20,7 +20,8 @@ const STATUS_LABELS = {
|
||||
approved: '已审批',
|
||||
completed: '已完成',
|
||||
archived: '已归档',
|
||||
paid: '已入账'
|
||||
pending_payment: '待付款',
|
||||
paid: '已付款'
|
||||
}
|
||||
|
||||
const EXPENSE_TYPE_LABELS = {
|
||||
@@ -291,4 +292,3 @@ export function buildRequiredApplicationMissingText(expenseType) {
|
||||
'请先切换到申请助手发起相关申请；申请单存在后，再回到报销助手继续。'
|
||||
].join('\n')
|
||||
}
|
||||
|
||||
|
||||
@@ -13,7 +13,8 @@ const EXPENSE_STATUS_LABELS = {
|
||||
submitted: '已提交',
|
||||
review: '审批中',
|
||||
approved: '已审核',
|
||||
paid: '已入账'
|
||||
pending_payment: '待付款',
|
||||
paid: '已付款'
|
||||
}
|
||||
const EXPENSE_RISK_LEVEL_LABELS = {
|
||||
high: '高风险',
|
||||
@@ -104,7 +105,13 @@ export function resolveExpenseStatusGroup(status) {
|
||||
if (['submitted', 'review'].includes(normalized)) {
|
||||
return { key: 'in_progress', label: '审批中' }
|
||||
}
|
||||
if (['approved', 'paid'].includes(normalized)) {
|
||||
if (normalized === 'pending_payment') {
|
||||
return { key: 'pending_payment', label: '待付款' }
|
||||
}
|
||||
if (normalized === 'paid') {
|
||||
return { key: 'completed', label: '已付款' }
|
||||
}
|
||||
if (['approved'].includes(normalized)) {
|
||||
return { key: 'completed', label: '已完成' }
|
||||
}
|
||||
return { key: 'other', label: '其他状态' }
|
||||
|
||||
@@ -82,7 +82,7 @@ export const GUIDED_QUERY_STATUS_OPTIONS = [
|
||||
{ key: 'pending', label: '审批中', description: '正在流转审批的单据' },
|
||||
{ key: 'returned', label: '已退回', description: '需要补充或修改的单据' },
|
||||
{ key: 'archived', label: '已归档', description: '已完成归档的单据' },
|
||||
{ key: 'completed', label: '已完成', description: '已审核完成或已入账的单据' }
|
||||
{ key: 'completed', label: '已完成', description: '已审核完成或已付款的单据' }
|
||||
]
|
||||
|
||||
const NO_ATTACHMENT_TEXT_PATTERN = /^(稍后|暂不|不用|没有|待上传|后面|后续|先不|以票据为准)/u
|
||||
|
||||
@@ -159,10 +159,13 @@ export function resolveExpenseDescriptionDetail(itemType, itemLocation) {
|
||||
}
|
||||
|
||||
export function buildFallbackProgressSteps(requestModel = {}) {
|
||||
const node = String(requestModel?.node || requestModel?.workflowNode || requestModel?.approvalStage || '').trim()
|
||||
const approvalKey = String(requestModel?.approvalKey || '').trim()
|
||||
const pendingPayment = approvalKey === 'pending_payment' || /待付款/.test(node)
|
||||
const paid = /已付款/.test(node)
|
||||
const completed = approvalKey === 'completed' || paid || /审批完成|申请完成|已完成/.test(node)
|
||||
|
||||
if (isApplicationDocumentRequest(requestModel)) {
|
||||
const node = String(requestModel?.node || requestModel?.workflowNode || requestModel?.approvalStage || '').trim()
|
||||
const approvalKey = String(requestModel?.approvalKey || '').trim()
|
||||
const completed = approvalKey === 'completed' || /审批完成|申请完成|已完成/.test(node)
|
||||
const inLeaderApproval = approvalKey === 'in_progress' || /直属领导|领导审批|审批中/.test(node)
|
||||
|
||||
return [
|
||||
@@ -199,7 +202,8 @@ export function buildFallbackProgressSteps(requestModel = {}) {
|
||||
{ index: 3, label: 'AI预审', time: '待处理' },
|
||||
{ index: 4, label: '直属领导审批', time: '待处理' },
|
||||
{ index: 5, label: '财务审批', time: '待处理' },
|
||||
{ index: 6, label: '归档入账', time: '待处理' }
|
||||
{ index: 6, label: '待付款', time: pendingPayment ? '进行中' : completed ? '已完成' : '待处理', done: completed, active: pendingPayment || completed, current: pendingPayment },
|
||||
{ index: 7, label: '已付款', time: paid || completed ? '已完成' : '待处理', done: paid || completed, active: paid || completed, current: false }
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
98
web/src/views/scripts/travelRequestDetailPaymentFlow.js
Normal file
98
web/src/views/scripts/travelRequestDetailPaymentFlow.js
Normal file
@@ -0,0 +1,98 @@
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { payExpenseClaim } from '../../services/reimbursements.js'
|
||||
import {
|
||||
canManageExpenseClaims,
|
||||
isFinanceUser
|
||||
} from '../../utils/accessControl.js'
|
||||
|
||||
export function useTravelRequestPaymentFlow({
|
||||
request,
|
||||
currentUser,
|
||||
isApplicationDocument,
|
||||
isCurrentApplicant,
|
||||
toast,
|
||||
emit
|
||||
}) {
|
||||
const payBusy = ref(false)
|
||||
const payConfirmDialogOpen = ref(false)
|
||||
|
||||
const isPendingPaymentStage = computed(() => {
|
||||
const node = String(request.value.node || request.value.approvalStage || '').trim()
|
||||
return (
|
||||
!isApplicationDocument.value
|
||||
&& Boolean(request.value.claimId)
|
||||
&& (
|
||||
request.value.approvalKey === 'pending_payment'
|
||||
|| String(request.value.status || '').trim().toLowerCase() === 'pending_payment'
|
||||
|| node === '待付款'
|
||||
)
|
||||
)
|
||||
})
|
||||
|
||||
const canPayRequest = computed(() =>
|
||||
isPendingPaymentStage.value
|
||||
&& !isCurrentApplicant.value
|
||||
&& (
|
||||
isFinanceUser(currentUser.value)
|
||||
|| canManageExpenseClaims(currentUser.value)
|
||||
)
|
||||
)
|
||||
|
||||
function handlePayRequest() {
|
||||
if (!request.value.claimId) {
|
||||
toast('当前单据缺少 claimId，暂时无法确认付款。')
|
||||
return
|
||||
}
|
||||
|
||||
if (!canPayRequest.value) {
|
||||
toast('只有待付款状态的报销单可以确认付款。')
|
||||
return
|
||||
}
|
||||
|
||||
payConfirmDialogOpen.value = true
|
||||
}
|
||||
|
||||
function closePayConfirmDialog() {
|
||||
if (payBusy.value) {
|
||||
return
|
||||
}
|
||||
|
||||
payConfirmDialogOpen.value = false
|
||||
}
|
||||
|
||||
async function confirmPayRequest() {
|
||||
if (!request.value.claimId) {
|
||||
toast('当前单据缺少 claimId，暂时无法确认付款。')
|
||||
payConfirmDialogOpen.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (!canPayRequest.value) {
|
||||
toast('只有待付款状态的报销单可以确认付款。')
|
||||
payConfirmDialogOpen.value = false
|
||||
return
|
||||
}
|
||||
|
||||
payBusy.value = true
|
||||
try {
|
||||
await payExpenseClaim(request.value.claimId)
|
||||
payConfirmDialogOpen.value = false
|
||||
toast(`${request.value.id} 已确认付款。`)
|
||||
emit('request-updated', { claimId: request.value.claimId })
|
||||
} catch (error) {
|
||||
toast(error?.message || '确认付款失败，请稍后重试。')
|
||||
} finally {
|
||||
payBusy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
canPayRequest,
|
||||
closePayConfirmDialog,
|
||||
confirmPayRequest,
|
||||
handlePayRequest,
|
||||
payBusy,
|
||||
payConfirmDialogOpen
|
||||
}
|
||||
}
|
||||
@@ -33,6 +33,18 @@ test('document center archived rows are detected from archive flag or request st
|
||||
}),
|
||||
false
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedDocumentRow({
|
||||
rawRequest: { status: 'pending_payment', approval_stage: '待付款' }
|
||||
}),
|
||||
false
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedDocumentRow({
|
||||
rawRequest: { status: 'paid', approval_stage: '已付款' }
|
||||
}),
|
||||
true
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedDocumentRow({
|
||||
rawRequest: { status: 'approved', approval_stage: '部门审批', approvalKey: 'completed' }
|
||||
@@ -45,10 +57,11 @@ test('document center all scope excludes archived rows from merged lists', () =>
|
||||
const rows = excludeArchivedDocumentRows([
|
||||
{ claimId: 'a', archived: true },
|
||||
{ claimId: 'b', rawRequest: { status: 'approved', approval_stage: '归档入账' } },
|
||||
{ claimId: 'c', rawRequest: { status: 'submitted', approval_stage: '部门审批' } }
|
||||
{ claimId: 'c', rawRequest: { status: 'submitted', approval_stage: '部门审批' } },
|
||||
{ claimId: 'd', rawRequest: { status: 'pending_payment', approval_stage: '待付款' } }
|
||||
])
|
||||
|
||||
assert.deepEqual(rows.map((row) => row.claimId), ['c'])
|
||||
assert.deepEqual(rows.map((row) => row.claimId), ['c', 'd'])
|
||||
})
|
||||
|
||||
test('application scope does not mark submitted approval application rows as new', () => {
|
||||
|
||||
@@ -201,7 +201,7 @@ test('documents center switches filter conditions by category tab', () => {
|
||||
)
|
||||
assert.match(
|
||||
documentsCenterView,
|
||||
/\[DOCUMENT_SCOPE_ARCHIVE\]: \{[\s\S]*dateLabel: '归档时间'[\s\S]*statusTitle: '归档状态'[\s\S]*statusTabs: \['全部', '已完成'\]/
|
||||
/\[DOCUMENT_SCOPE_ARCHIVE\]: \{[\s\S]*dateLabel: '归档时间'[\s\S]*statusTitle: '归档状态'[\s\S]*statusTabs: \['全部', '已付款', '已完成'\]/
|
||||
)
|
||||
assert.match(documentsCenterView, /v-if="showDocumentTypeFilter" class="document-filter"/)
|
||||
assert.match(documentsCenterView, /:placeholder="activeFilterConfig\.searchPlaceholder"/)
|
||||
|
||||
@@ -19,6 +19,10 @@ test('isArchivedExpenseClaim recognizes finance archive stage', () => {
|
||||
}),
|
||||
true
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedExpenseClaim({ status: 'paid', approval_stage: '已付款' }),
|
||||
true
|
||||
)
|
||||
})
|
||||
|
||||
test('isArchivedExpenseClaim ignores in-progress claims', () => {
|
||||
@@ -26,6 +30,10 @@ test('isArchivedExpenseClaim ignores in-progress claims', () => {
|
||||
isArchivedExpenseClaim({ status: 'submitted', approval_stage: '财务审批' }),
|
||||
false
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedExpenseClaim({ status: 'pending_payment', approval_stage: '待付款' }),
|
||||
false
|
||||
)
|
||||
})
|
||||
|
||||
test('archive data stays available through api client but archive center is removed from navigation', () => {
|
||||
|
||||
@@ -399,7 +399,7 @@ test('ticket description helper does not show the destination city as detail tex
|
||||
assert.equal(request.expenseItems.find((item) => item.id === 'ship')?.name, '轮船票')
|
||||
})
|
||||
|
||||
test('completed finance approval marks finance and archive progress steps', () => {
|
||||
test('finance approval moves reimbursement to pending payment step', () => {
|
||||
const request = mapExpenseClaimToRequest({
|
||||
id: 'claim-finance-completed',
|
||||
claim_no: 'EXP-202605-004',
|
||||
@@ -414,8 +414,8 @@ test('completed finance approval marks finance and archive progress steps', () =
|
||||
submitted_at: '2026-05-20T02:00:00.000Z',
|
||||
created_at: '2026-05-20T01:30:00.000Z',
|
||||
updated_at: '2026-05-20T04:00:00.000Z',
|
||||
status: 'approved',
|
||||
approval_stage: '归档入账',
|
||||
status: 'pending_payment',
|
||||
approval_stage: '待付款',
|
||||
risk_flags_json: [
|
||||
{
|
||||
source: 'manual_approval',
|
||||
@@ -428,7 +428,7 @@ test('completed finance approval marks finance and archive progress steps', () =
|
||||
source: 'finance_approval',
|
||||
operator: '财务复核',
|
||||
previous_approval_stage: '财务审批',
|
||||
next_approval_stage: '归档入账',
|
||||
next_approval_stage: '待付款',
|
||||
created_at: '2026-05-20T04:00:00.000Z'
|
||||
}
|
||||
],
|
||||
@@ -436,14 +436,62 @@ test('completed finance approval marks finance and archive progress steps', () =
|
||||
})
|
||||
|
||||
const financeStep = request.progressSteps.find((step) => step.label === '财务审批')
|
||||
const archiveStep = request.progressSteps.find((step) => step.label === '归档入账')
|
||||
const paymentStep = request.progressSteps.find((step) => step.label === '待付款')
|
||||
|
||||
assert.equal(request.riskSummary, '无')
|
||||
assert.equal(request.workflowNode, '归档入账')
|
||||
assert.equal(request.workflowNode, '待付款')
|
||||
assert.equal(request.approvalKey, 'pending_payment')
|
||||
assert.equal(financeStep.time, '财务复核通过')
|
||||
assert.match(financeStep.detail, /2026-05-20/)
|
||||
assert.equal(archiveStep.time, '归档入账')
|
||||
assert.equal(archiveStep.done, true)
|
||||
assert.equal(paymentStep.current, true)
|
||||
assert.equal(paymentStep.done, false)
|
||||
})
|
||||
|
||||
test('paid reimbursement marks payment progress step as complete', () => {
|
||||
const request = mapExpenseClaimToRequest({
|
||||
id: 'claim-finance-paid',
|
||||
claim_no: 'EXP-202605-005',
|
||||
employee_name: '张三',
|
||||
department_name: '市场部',
|
||||
expense_type: 'transport',
|
||||
reason: '交通报销',
|
||||
location: '上海',
|
||||
amount: 88,
|
||||
invoice_count: 1,
|
||||
occurred_at: '2026-05-20T01:00:00.000Z',
|
||||
submitted_at: '2026-05-20T02:00:00.000Z',
|
||||
created_at: '2026-05-20T01:30:00.000Z',
|
||||
updated_at: '2026-05-20T05:00:00.000Z',
|
||||
status: 'paid',
|
||||
approval_stage: '已付款',
|
||||
risk_flags_json: [
|
||||
{
|
||||
source: 'finance_approval',
|
||||
operator: '财务复核',
|
||||
previous_approval_stage: '财务审批',
|
||||
next_approval_stage: '待付款',
|
||||
created_at: '2026-05-20T04:00:00.000Z'
|
||||
},
|
||||
{
|
||||
source: 'payment',
|
||||
event_type: 'expense_claim_payment_completed',
|
||||
operator: '财务付款',
|
||||
previous_approval_stage: '待付款',
|
||||
next_approval_stage: '已付款',
|
||||
created_at: '2026-05-20T05:00:00.000Z'
|
||||
}
|
||||
],
|
||||
items: []
|
||||
})
|
||||
|
||||
const paymentStep = request.progressSteps.find((step) => step.label === '待付款')
|
||||
const paidStep = request.progressSteps.find((step) => step.label === '已付款')
|
||||
|
||||
assert.equal(request.workflowNode, '已付款')
|
||||
assert.equal(request.approvalStatus, '已付款')
|
||||
assert.equal(paymentStep.time, '待付款')
|
||||
assert.equal(paidStep.time, '已付款')
|
||||
assert.equal(paidStep.done, true)
|
||||
})
|
||||
|
||||
test('current direct manager step shows how long the claim has stayed there', () => {
|
||||
|
||||
@@ -63,6 +63,22 @@ test('detects archived claim view models for delete permission gating', () => {
|
||||
}),
|
||||
false
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedRequestView({
|
||||
status: 'pending_payment',
|
||||
approval_stage: '待付款',
|
||||
approvalKey: 'pending_payment'
|
||||
}),
|
||||
false
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedRequestView({
|
||||
status: 'paid',
|
||||
approval_stage: '已付款',
|
||||
approvalKey: 'completed'
|
||||
}),
|
||||
true
|
||||
)
|
||||
assert.equal(
|
||||
isArchivedRequestView({
|
||||
status: 'approved',
|
||||
@@ -84,3 +100,18 @@ test('detects archived claim view models for delete permission gating', () => {
|
||||
false
|
||||
)
|
||||
})
|
||||
|
||||
test('normalizes pending payment backend claims', () => {
|
||||
const request = normalizeRequestForUi({
|
||||
id: 'EXP-202605-004',
|
||||
claim_id: 'claim-4',
|
||||
status: 'pending_payment',
|
||||
approval_stage: '待付款',
|
||||
expense_type: 'transport',
|
||||
amount: 88
|
||||
})
|
||||
|
||||
assert.equal(request.approvalKey, 'pending_payment')
|
||||
assert.equal(request.approvalStatus, '待付款')
|
||||
assert.equal(request.node, '待付款')
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user