feat: 新增票据夹模块并优化 OCR 与员工画像服务
后端新增票据夹端点、数据模型和服务模块，优化 OCR 端点 Schema 和附件操作逻辑，完善员工行为画像服务和辅助函数， 前端新增票据夹视图和服务层，优化文档中心样式和侧边栏导 航，完善员工画像详情弹窗和权限控制，补充单元测试。
This commit is contained in:
caoxiaozhu
@@ -163,6 +163,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.main.documents-main,
|
||||
.main.receipt-folder-main,
|
||||
.main.requests-main,
|
||||
.main.approval-main,
|
||||
.main.archive-main,
|
||||
@@ -181,6 +182,7 @@
|
||||
.workarea { min-height: 0; overflow: auto; padding: 24px; }
|
||||
.workarea.requests-workarea,
|
||||
.workarea.documents-workarea,
|
||||
.workarea.receipt-folder-workarea,
|
||||
.workarea.workbench-workarea,
|
||||
.workarea.approval-workarea,
|
||||
.workarea.archive-workarea,
|
||||
|
||||
495
web/src/assets/styles/components/document-list-shared.css
Normal file
495
web/src/assets/styles/components/document-list-shared.css
Normal file
@@ -0,0 +1,495 @@
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
margin-top: 14px;
|
||||
border-bottom: 1px solid #dbe4ee;
|
||||
}
|
||||
|
||||
.status-tabs button {
|
||||
position: relative;
|
||||
min-height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-tabs button.active {
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.status-tabs button.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
height: 3px;
|
||||
border-radius: 999px 999px 0 0;
|
||||
background: var(--theme-primary);
|
||||
}
|
||||
|
||||
.scope-tab-badge {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
|
||||
}
|
||||
|
||||
.document-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.filter-set,
|
||||
.document-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list-search {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.list-search .mdi {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.list-search input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 12px 0 36px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.list-search input::placeholder {
|
||||
color: #8da0b4;
|
||||
}
|
||||
|
||||
.list-search input:focus {
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(58, 124, 165, 0.14);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
min-width: 120px;
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 9px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
border-color: rgba(58, 124, 165, .32);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.create-request-btn {
|
||||
min-height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 10px 24px var(--theme-primary-shadow);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
||||
}
|
||||
|
||||
.create-request-btn.secondary {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.create-request-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 28px var(--theme-primary-shadow);
|
||||
filter: saturate(1.02);
|
||||
}
|
||||
|
||||
.create-request-btn.secondary:hover {
|
||||
border-color: rgba(58, 124, 165, .32);
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.create-request-btn:disabled {
|
||||
opacity: .55;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
min-height: 400px;
|
||||
margin-top: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-wrap.is-empty {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.table-state {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 10px;
|
||||
padding: 28px 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
|
||||
}
|
||||
|
||||
.table-state .mdi {
|
||||
font-size: 28px;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.table-state strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.table-state p {
|
||||
max-width: 420px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.table-state.error {
|
||||
background: linear-gradient(180deg, #fffdfd 0%, #fff6f6 100%);
|
||||
}
|
||||
|
||||
.table-state.error .mdi {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #f1c5c5;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 1420px;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 13px 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
color: #24324a;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: #f7fafc;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: linear-gradient(90deg, rgba(58, 124, 165, .08), rgba(58, 124, 165, .03));
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
td small {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
overflow: hidden;
|
||||
color: #7d8da1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.doc-id {
|
||||
color: var(--theme-primary-active);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.doc-kind-tag,
|
||||
.type-tag,
|
||||
.status-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.doc-kind-tag {
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.doc-kind-tag.reimbursement {
|
||||
background: var(--theme-primary-light-9);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.doc-kind-tag.application {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.type-tag.travel,
|
||||
.type-tag.hotel,
|
||||
.type-tag.transport {
|
||||
background: var(--theme-primary-light-9);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.type-tag.entertainment,
|
||||
.type-tag.meal {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.type-tag.office {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.type-tag.meeting,
|
||||
.type-tag.training {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.type-tag.other,
|
||||
.type-tag.neutral {
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
min-height: 24px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-tag.info {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.status-tag.success,
|
||||
.status-tag.archived,
|
||||
.status-tag.completed {
|
||||
border-color: var(--success-line);
|
||||
background: var(--success-soft);
|
||||
color: var(--success-active);
|
||||
}
|
||||
|
||||
.status-tag.warning,
|
||||
.status-tag.draft {
|
||||
border-color: #fed7aa;
|
||||
background: #fff7ed;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.status-tag.danger {
|
||||
border-color: #fecaca;
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-tag.neutral {
|
||||
border-color: #cbd5e1;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.page-summary {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pager button:hover:not(.active) {
|
||||
background: #fff;
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.pager button.active {
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.pager button:disabled {
|
||||
color: #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-size-select {
|
||||
width: 118px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.document-toolbar,
|
||||
.list-foot {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.document-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.document-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.status-tabs {
|
||||
gap: 18px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.filter-set,
|
||||
.document-actions,
|
||||
.list-search,
|
||||
.filter-btn,
|
||||
.page-size-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
}
|
||||
}
|
||||
@@ -15,135 +15,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
margin-top: 14px;
|
||||
border-bottom: 1px solid #dbe4ee;
|
||||
}
|
||||
|
||||
.status-tabs button {
|
||||
position: relative;
|
||||
min-height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-tabs button.active {
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.status-tabs button.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1px;
|
||||
height: 3px;
|
||||
border-radius: 999px 999px 0 0;
|
||||
background: var(--theme-primary);
|
||||
}
|
||||
|
||||
.scope-tab-badge {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 5px;
|
||||
border-radius: 999px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
line-height: 1;
|
||||
box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
|
||||
}
|
||||
|
||||
.document-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.filter-set,
|
||||
.document-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list-search {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.list-search .mdi {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #64748b;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.list-search input {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 12px 0 36px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.list-search input::placeholder {
|
||||
color: #8da0b4;
|
||||
}
|
||||
|
||||
.list-search input:focus {
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(58, 124, 165, 0.14);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
min-width: 120px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
border-color: rgba(58, 124, 165, .32);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.document-filter,
|
||||
.date-range-filter {
|
||||
position: relative;
|
||||
@@ -287,43 +158,6 @@
|
||||
background: #cbd5e1;
|
||||
}
|
||||
|
||||
.create-request-btn {
|
||||
min-height: 40px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 0 18px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-active));
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 10px 24px var(--theme-primary-shadow);
|
||||
transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
|
||||
}
|
||||
|
||||
.create-request-btn.secondary {
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.create-request-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 14px 28px var(--theme-primary-shadow);
|
||||
filter: saturate(1.02);
|
||||
}
|
||||
|
||||
.create-request-btn.secondary:hover {
|
||||
border-color: rgba(58, 124, 165, .32);
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
.document-status-filter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -348,83 +182,6 @@
|
||||
min-width: 154px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
min-height: 400px;
|
||||
margin-top: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #edf2f7;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-wrap.is-empty {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.table-state {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 10px;
|
||||
padding: 28px 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
|
||||
}
|
||||
|
||||
.table-state .mdi {
|
||||
font-size: 28px;
|
||||
color: var(--theme-primary);
|
||||
}
|
||||
|
||||
.table-state strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.table-state p {
|
||||
max-width: 420px;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.table-state.error {
|
||||
background: linear-gradient(180deg, #fffdfd 0%, #fff6f6 100%);
|
||||
}
|
||||
|
||||
.table-state.error .mdi {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #f1c5c5;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: #b91c1c;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 1420px;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.col-id { width: 11%; }
|
||||
.col-created { width: 10%; }
|
||||
.col-stay { width: 9%; }
|
||||
@@ -437,47 +194,6 @@ table {
|
||||
.col-status { width: 8%; }
|
||||
.col-updated { width: 9%; }
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 13px 12px;
|
||||
border-bottom: 1px solid #edf2f7;
|
||||
color: #24324a;
|
||||
font-size: 14px;
|
||||
line-height: 1.35;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: #f7fafc;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: linear-gradient(90deg, rgba(58, 124, 165, .08), rgba(58, 124, 165, .03));
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.doc-id {
|
||||
color: var(--theme-primary-active);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.new-document-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -505,211 +221,16 @@ tbody tr:last-child td {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
.doc-kind-tag,
|
||||
.type-tag,
|
||||
.status-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.doc-kind-tag {
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.doc-kind-tag.reimbursement {
|
||||
background: var(--theme-primary-light-9);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.doc-kind-tag.application {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.type-tag {
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.type-tag.travel,
|
||||
.type-tag.hotel,
|
||||
.type-tag.transport {
|
||||
background: var(--theme-primary-light-9);
|
||||
color: var(--theme-primary-active);
|
||||
}
|
||||
|
||||
.type-tag.entertainment,
|
||||
.type-tag.meal {
|
||||
background: #fff7ed;
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.type-tag.office {
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.type-tag.meeting,
|
||||
.type-tag.training {
|
||||
background: #eef2ff;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.type-tag.other {
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
min-height: 24px;
|
||||
padding: 0 9px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-tag.info {
|
||||
border-color: #bfdbfe;
|
||||
background: #eff6ff;
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.status-tag.success,
|
||||
.status-tag.archived {
|
||||
border-color: var(--success-line);
|
||||
background: var(--success-soft);
|
||||
color: var(--success-active);
|
||||
}
|
||||
|
||||
.status-tag.warning,
|
||||
.status-tag.draft {
|
||||
border-color: #fed7aa;
|
||||
background: #fff7ed;
|
||||
color: #f97316;
|
||||
}
|
||||
|
||||
.status-tag.danger {
|
||||
border-color: #fecaca;
|
||||
background: #fef2f2;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-tag.neutral {
|
||||
border-color: #cbd5e1;
|
||||
background: #f8fafc;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.page-summary {
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.pager button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 9px;
|
||||
background: transparent;
|
||||
color: #334155;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pager button:hover:not(.active) {
|
||||
background: #fff;
|
||||
color: var(--theme-primary-active);
|
||||
box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
|
||||
}
|
||||
|
||||
.pager button.active {
|
||||
background: var(--theme-primary-active);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 16px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.pager button:disabled {
|
||||
color: #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-size-select {
|
||||
width: 118px;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.document-toolbar,
|
||||
.list-foot {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.document-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.document-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.documents-list {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
gap: 18px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.filter-set,
|
||||
.document-actions,
|
||||
.document-status-filter,
|
||||
.list-search,
|
||||
.filter-btn,
|
||||
.page-size-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.document-status-filter {
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
372
web/src/assets/styles/views/receipt-folder-view.css
Normal file
372
web/src/assets/styles/views/receipt-folder-view.css
Normal file
@@ -0,0 +1,372 @@
|
||||
.receipt-folder-page {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
animation: fadeUp 220ms var(--ease) both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.receipt-folder-list,
|
||||
.receipt-folder-detail {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.receipt-folder-list {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.receipt-detail-head,
|
||||
.receipt-detail-foot,
|
||||
.receipt-basic-panel header,
|
||||
.receipt-preview-panel header,
|
||||
.receipt-field-list-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.receipt-form-grid input,
|
||||
.receipt-form-grid textarea,
|
||||
.receipt-field-row input {
|
||||
width: 100%;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.receipt-form-grid input,
|
||||
.receipt-field-row input {
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.receipt-form-grid textarea {
|
||||
resize: vertical;
|
||||
min-height: 78px;
|
||||
padding: 9px 10px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.receipt-form-grid input:focus,
|
||||
.receipt-form-grid textarea:focus,
|
||||
.receipt-field-row input:focus {
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px rgba(58, 124, 165, 0.14);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.apply-btn,
|
||||
.ghost-btn,
|
||||
.danger-btn,
|
||||
.back-btn {
|
||||
min-height: 36px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ghost-btn,
|
||||
.back-btn {
|
||||
padding: 0 13px;
|
||||
border: 1px solid #d7e0ea;
|
||||
background: #fff;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--theme-primary);
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.danger-btn {
|
||||
padding: 0 14px;
|
||||
border: 1px solid #dc2626;
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.apply-btn:disabled,
|
||||
.danger-btn:disabled {
|
||||
opacity: .55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.receipt-folder-detail {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
}
|
||||
|
||||
.receipt-detail-head {
|
||||
gap: 14px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #dbe4ee;
|
||||
}
|
||||
|
||||
.receipt-detail-head h2 {
|
||||
margin: 4px 0;
|
||||
color: #0f172a;
|
||||
font-size: 20px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.receipt-detail-head p {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.assistant-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 8px;
|
||||
border-radius: 4px;
|
||||
background: #eef6ff;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.detail-loading {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.receipt-detail-layout {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.receipt-basic-panel,
|
||||
.receipt-preview-panel {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.receipt-basic-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
padding: 14px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.receipt-basic-panel header,
|
||||
.receipt-preview-panel header,
|
||||
.receipt-field-list-head {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.receipt-basic-panel header strong,
|
||||
.receipt-preview-panel header strong,
|
||||
.receipt-field-list-head strong {
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.receipt-form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.receipt-form-grid label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.receipt-form-grid label span {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.field-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.receipt-field-list {
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.receipt-field-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(100px, .6fr) minmax(160px, 1fr) 30px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.receipt-field-row button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid #d7e0ea;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.receipt-preview-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.receipt-preview-panel header {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid #e5edf5;
|
||||
}
|
||||
|
||||
.preview-source-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--theme-primary-active);
|
||||
font-size: 13px;
|
||||
font-weight: 750;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.receipt-preview-box {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: auto;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.receipt-preview-box img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.receipt-preview-box iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.preview-empty {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
justify-items: center;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-empty .mdi {
|
||||
color: var(--theme-primary);
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.receipt-detail-foot {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #dbe4ee;
|
||||
}
|
||||
|
||||
.associate-step {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.associate-hint {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.receipt-checkbox-list,
|
||||
.draft-choice-list {
|
||||
max-height: 360px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.receipt-checkbox-list :deep(.el-checkbox),
|
||||
.draft-choice {
|
||||
min-height: 50px;
|
||||
align-items: center;
|
||||
margin-right: 0;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid #dbe4ee;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.receipt-checkbox-list :deep(.el-checkbox__label) {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
color: #0f172a;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.receipt-checkbox-list small,
|
||||
.draft-choice small {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.draft-choice {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.draft-choice.active {
|
||||
border-color: rgba(58, 124, 165, .42);
|
||||
background: rgba(58, 124, 165, .07);
|
||||
}
|
||||
|
||||
.draft-choice span {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.receipt-detail-layout {
|
||||
grid-template-columns: 1fr;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.receipt-preview-panel {
|
||||
min-height: 520px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.receipt-folder-list,
|
||||
.receipt-folder-detail {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.receipt-form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -440,13 +440,13 @@ watch(
|
||||
|
||||
.profile-tags-panel {
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
align-content: start;
|
||||
align-content: stretch;
|
||||
min-height: 352px;
|
||||
}
|
||||
|
||||
.profile-radar-panel {
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
align-content: start;
|
||||
align-content: stretch;
|
||||
min-height: 352px;
|
||||
}
|
||||
|
||||
@@ -477,6 +477,15 @@ watch(
|
||||
.profile-panel-empty {
|
||||
margin: 0;
|
||||
padding: 18px 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
justify-self: stretch;
|
||||
box-sizing: border-box;
|
||||
min-height: 100%;
|
||||
border: 1px dashed #cbd5e1;
|
||||
border-radius: 4px;
|
||||
background: #f8fafc;
|
||||
@@ -487,10 +496,12 @@ watch(
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-tags-panel > .profile-panel-empty {
|
||||
min-height: 284px;
|
||||
}
|
||||
|
||||
.profile-radar-empty {
|
||||
min-height: 308px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.profile-operation-copy strong {
|
||||
|
||||
@@ -156,9 +156,9 @@ const sidebarMeta = {
|
||||
overview: { label: '分析看板' },
|
||||
workbench: { label: '个人工作台' },
|
||||
documents: { label: '单据中心' },
|
||||
budget: { label: '预算中心' },
|
||||
policies: { label: '知识管理' },
|
||||
audit: { label: '规则中心' },
|
||||
budget: { label: '预算编制' },
|
||||
policies: { label: '财务政策' },
|
||||
audit: { label: '规则管理' },
|
||||
digitalEmployees: { label: '数字员工' },
|
||||
employees: { label: '员工管理' },
|
||||
settings: { label: '系统设置' }
|
||||
|
||||
@@ -6,6 +6,7 @@ import { icons } from '../data/icons.js'
|
||||
export const appViews = [
|
||||
'workbench',
|
||||
'documents',
|
||||
'receiptFolder',
|
||||
'budget',
|
||||
'audit',
|
||||
'overview',
|
||||
@@ -32,20 +33,28 @@ export const navItems = [
|
||||
title: '单据中心',
|
||||
desc: '统一查看申请、报销、审批与归档。'
|
||||
},
|
||||
{
|
||||
id: 'receiptFolder',
|
||||
label: '票据夹',
|
||||
navHint: '存放已上传并识别的原始票据',
|
||||
icon: icons.receipt,
|
||||
title: '票据夹',
|
||||
desc: '集中查看未关联和已关联票据，避免 OCR 后票据丢失。'
|
||||
},
|
||||
{
|
||||
id: 'budget',
|
||||
label: '预算中心',
|
||||
label: '预算编制',
|
||||
navHint: '管理预算额度、预算占用与超预算预警',
|
||||
icon: icons.budget,
|
||||
title: '预算中心',
|
||||
title: '预算编制',
|
||||
desc: '配置部门、项目及费用类型预算，跟踪申请占用、报销核销与超预算预警。'
|
||||
},
|
||||
{
|
||||
id: 'audit',
|
||||
label: '规则中心',
|
||||
label: '规则管理',
|
||||
navHint: '查看和管理规则配置',
|
||||
icon: icons.skill,
|
||||
title: '规则中心',
|
||||
title: '规则管理',
|
||||
desc: '集中管理财务规则、风险规则与外部 MCP 服务。'
|
||||
},
|
||||
{
|
||||
@@ -74,11 +83,11 @@ export const navItems = [
|
||||
},
|
||||
{
|
||||
id: 'policies',
|
||||
label: '制度知识',
|
||||
navHint: '查看制度与知识库',
|
||||
label: '财务政策',
|
||||
navHint: '查看财务政策与制度文档',
|
||||
icon: icons.library,
|
||||
title: '制度与知识库',
|
||||
desc: '统一管理制度文档、检索入口与知识资产。'
|
||||
title: '财务政策',
|
||||
desc: '统一管理财务政策文档、检索入口与知识资产。'
|
||||
},
|
||||
{
|
||||
id: 'settings',
|
||||
@@ -94,6 +103,7 @@ const viewRouteNames = {
|
||||
overview: 'app-overview',
|
||||
workbench: 'app-workbench',
|
||||
documents: 'app-documents',
|
||||
receiptFolder: 'app-receiptFolder',
|
||||
budget: 'app-budget',
|
||||
policies: 'app-policies',
|
||||
audit: 'app-audit',
|
||||
|
||||
@@ -9,6 +9,7 @@ export const icons = {
|
||||
budget: iconPath('<path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/>'),
|
||||
archive: iconPath('<path d="M3 7h18v13a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M3 7l2-3h14l2 3"/><path d="M10 12h4"/>'),
|
||||
file: iconPath('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/>'),
|
||||
receipt: iconPath('<path d="M5 3v18l2-1 2 1 2-1 2 1 2-1 2 1 2-1V3z"/><path d="M8 8h8"/><path d="M8 12h8"/><path d="M8 16h5"/>'),
|
||||
book: iconPath('<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>'),
|
||||
library: iconPath('<path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M2 20h20"/>'),
|
||||
skill: iconPath('<path d="M12 3 9.5 8.5 3 11l6.5 2.5L12 19l2.5-5.5L21 11l-6.5-2.5z"/><path d="M19 19l.9 2 .9-2 2-.9-2-.9-.9-2-.9 2-2 .9z"/><path d="M5 5l.6 1.4L7 7l-1.4.6L5 9l-.6-1.4L3 7l1.4-.6z"/>'),
|
||||
|
||||
@@ -4,6 +4,7 @@ export function recognizeOcrFiles(files, options = {}) {
|
||||
const formData = new FormData()
|
||||
for (const file of files) {
|
||||
formData.append('files', file)
|
||||
formData.append('receipt_ids', String(file?.receiptId || ''))
|
||||
}
|
||||
|
||||
return apiRequest('/ocr/recognize', {
|
||||
|
||||
49
web/src/services/receiptFolder.js
Normal file
49
web/src/services/receiptFolder.js
Normal file
@@ -0,0 +1,49 @@
|
||||
import { apiRequest } from './api.js'
|
||||
|
||||
function buildStatusQuery(status = 'all') {
|
||||
const normalized = String(status || 'all').trim()
|
||||
return normalized ? `?status=${encodeURIComponent(normalized)}` : ''
|
||||
}
|
||||
|
||||
export function fetchReceiptFolderItems(status = 'all') {
|
||||
return apiRequest(`/receipt-folder${buildStatusQuery(status)}`)
|
||||
}
|
||||
|
||||
export function fetchReceiptFolderDetail(receiptId) {
|
||||
return apiRequest(`/receipt-folder/${encodeURIComponent(String(receiptId || '').trim())}`)
|
||||
}
|
||||
|
||||
export function updateReceiptFolderItem(receiptId, payload = {}) {
|
||||
return apiRequest(`/receipt-folder/${encodeURIComponent(String(receiptId || '').trim())}`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteReceiptFolderItem(receiptId) {
|
||||
return apiRequest(`/receipt-folder/${encodeURIComponent(String(receiptId || '').trim())}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchReceiptFolderAsset(pathOrUrl) {
|
||||
const target = String(pathOrUrl || '').trim()
|
||||
if (!target) {
|
||||
throw new Error('票据文件地址为空。')
|
||||
}
|
||||
return apiRequest(target, {
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export async function buildReceiptFile(receipt) {
|
||||
const blob = await fetchReceiptFolderAsset(receipt?.source_url || receipt?.sourceUrl)
|
||||
const fileName = String(receipt?.file_name || receipt?.fileName || 'receipt.bin').trim() || 'receipt.bin'
|
||||
const mediaType = String(receipt?.media_type || receipt?.mediaType || blob.type || 'application/octet-stream')
|
||||
const file = new File([blob], fileName, { type: mediaType })
|
||||
Object.defineProperty(file, 'receiptId', {
|
||||
value: String(receipt?.id || ''),
|
||||
enumerable: false
|
||||
})
|
||||
return file
|
||||
}
|
||||
@@ -91,6 +91,9 @@ export function deleteExpenseClaimItem(claimId, itemId) {
|
||||
export function uploadExpenseClaimItemAttachment(claimId, itemId, file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
if (file?.receiptId) {
|
||||
formData.append('receipt_id', String(file.receiptId))
|
||||
}
|
||||
|
||||
return apiRequest(`/reimbursements/claims/${encodeURIComponent(String(claimId || '').trim())}/items/${encodeURIComponent(String(itemId || '').trim())}/attachment`, {
|
||||
method: 'POST',
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
export const DEFAULT_APP_VIEW_ORDER = [
|
||||
'workbench',
|
||||
'documents',
|
||||
'budget',
|
||||
'workbench',
|
||||
'documents',
|
||||
'receiptFolder',
|
||||
'budget',
|
||||
'audit',
|
||||
'overview',
|
||||
'policies',
|
||||
@@ -10,7 +11,7 @@ export const DEFAULT_APP_VIEW_ORDER = [
|
||||
'settings'
|
||||
]
|
||||
|
||||
const ALWAYS_VISIBLE_VIEWS = new Set(['workbench', 'documents', 'policies'])
|
||||
const ALWAYS_VISIBLE_VIEWS = new Set(['workbench', 'documents', 'receiptFolder', 'policies'])
|
||||
const VIEW_ROLE_RULES = {
|
||||
overview: ['finance', 'executive'],
|
||||
budget: ['budget_monitor', 'executive'],
|
||||
|
||||
@@ -97,11 +97,15 @@ export function buildUserProfileMetricCards(profile, runs = [], currentUser = {}
|
||||
const index = indexProfiles(profile)
|
||||
const aiMetrics = metricsOf(index.ai_usage)
|
||||
const userRuns = filterRunsByCurrentUser(runs, currentUser)
|
||||
const durationDisplay = formatDurationMetric(sumRunDurationMs(userRuns))
|
||||
const commonAgent = resolveCommonAgent(userRuns)
|
||||
const windowedUserRuns = filterRunsByProfileWindow(userRuns, profile)
|
||||
const durationMs = hasProfileDurationMetric(aiMetrics)
|
||||
? resolveNumber(aiMetrics.ai_run_duration_ms)
|
||||
: sumRunDurationMs(windowedUserRuns)
|
||||
const durationDisplay = formatDurationMetric(durationMs)
|
||||
const commonAgent = resolveCommonAgent(windowedUserRuns)
|
||||
const tokenCount = resolveNumber(aiMetrics.exact_token_count) || resolveNumber(aiMetrics.estimated_token_count)
|
||||
const tokenDisplay = formatTokenCount(tokenCount)
|
||||
const aiRunCount = resolveNumber(aiMetrics.ai_run_count) || userRuns.length
|
||||
const aiRunCount = resolveNumber(aiMetrics.ai_run_count) || windowedUserRuns.length
|
||||
|
||||
return [
|
||||
{
|
||||
@@ -223,11 +227,23 @@ function metricsOf(profile) {
|
||||
return profile?.metrics && typeof profile.metrics === 'object' ? profile.metrics : {}
|
||||
}
|
||||
|
||||
function hasProfileDurationMetric(metrics) {
|
||||
return Object.prototype.hasOwnProperty.call(metrics || {}, 'ai_run_duration_ms')
|
||||
}
|
||||
|
||||
function filterRunsByCurrentUser(runs, currentUser) {
|
||||
const identities = resolveCurrentUserIdentities(currentUser)
|
||||
return (Array.isArray(runs) ? runs : []).filter((run) => belongsToCurrentUser(run, identities))
|
||||
}
|
||||
|
||||
function filterRunsByProfileWindow(runs, profile) {
|
||||
const cutoff = Date.now() - resolveWindowDays(profile) * 24 * 60 * 60 * 1000
|
||||
return (Array.isArray(runs) ? runs : []).filter((run) => {
|
||||
const startedAt = Date.parse(run?.started_at || '')
|
||||
return Number.isFinite(startedAt) && startedAt >= cutoff
|
||||
})
|
||||
}
|
||||
|
||||
function belongsToCurrentUser(run, identities) {
|
||||
if (!identities.size) {
|
||||
return false
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
'overview-main': activeView === 'overview',
|
||||
'workbench-main': activeView === 'workbench',
|
||||
'documents-main': activeView === 'documents',
|
||||
'receipt-folder-main': activeView === 'receiptFolder',
|
||||
'budget-main': activeView === 'budget',
|
||||
'policies-main': activeView === 'policies',
|
||||
'audit-main': activeView === 'audit',
|
||||
@@ -75,7 +76,7 @@
|
||||
/>
|
||||
|
||||
<FilterBar
|
||||
v-if="activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'documents' && activeView !== 'budget' && activeView !== 'policies' && activeView !== 'audit' && activeView !== 'digitalEmployees' && activeView !== 'employees' && activeView !== 'settings'"
|
||||
v-if="activeView !== 'overview' && activeView !== 'workbench' && activeView !== 'documents' && activeView !== 'receiptFolder' && activeView !== 'budget' && activeView !== 'policies' && activeView !== 'audit' && activeView !== 'digitalEmployees' && activeView !== 'employees' && activeView !== 'settings'"
|
||||
:compact="activeView === 'overview'"
|
||||
:filters="filters"
|
||||
:ranges="ranges"
|
||||
@@ -87,6 +88,7 @@
|
||||
class="workarea"
|
||||
:class="{
|
||||
'documents-workarea': activeView === 'documents',
|
||||
'receipt-folder-workarea': activeView === 'receiptFolder',
|
||||
'workbench-workarea': activeView === 'workbench',
|
||||
'budget-workarea': activeView === 'budget',
|
||||
'policies-workarea': activeView === 'policies',
|
||||
@@ -133,6 +135,11 @@
|
||||
@summary-change="documentSummary = $event"
|
||||
/>
|
||||
|
||||
<ReceiptFolderView
|
||||
v-else-if="activeView === 'receiptFolder'"
|
||||
@open-assistant="openSmartEntry"
|
||||
/>
|
||||
|
||||
<BudgetCenterView
|
||||
v-else-if="activeView === 'budget'"
|
||||
:current-user="currentUser"
|
||||
@@ -190,6 +197,7 @@ const PersonalWorkbenchView = defineAsyncComponent(() => import('./PersonalWorkb
|
||||
const TravelReimbursementCreateView = defineAsyncComponent(() => import('./TravelReimbursementCreateView.vue'))
|
||||
const TravelRequestDetailView = defineAsyncComponent(() => import('./TravelRequestDetailView.vue'))
|
||||
const DocumentsCenterView = defineAsyncComponent(() => import('./DocumentsCenterView.vue'))
|
||||
const ReceiptFolderView = defineAsyncComponent(() => import('./ReceiptFolderView.vue'))
|
||||
const BudgetCenterRouteLoading = {
|
||||
name: 'BudgetCenterRouteLoading',
|
||||
render: () =>
|
||||
|
||||
@@ -832,4 +832,5 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped src="../assets/styles/components/document-list-shared.css"></style>
|
||||
<style scoped src="../assets/styles/views/documents-center-view.css"></style>
|
||||
|
||||
620
web/src/views/ReceiptFolderView.vue
Normal file
620
web/src/views/ReceiptFolderView.vue
Normal file
@@ -0,0 +1,620 @@
|
||||
<template>
|
||||
<section class="receipt-folder-page">
|
||||
<article v-if="!detailMode" class="receipt-folder-list panel">
|
||||
<nav class="status-tabs receipt-status-tabs" aria-label="票据关联状态">
|
||||
<button
|
||||
v-for="tab in receiptTabs"
|
||||
:key="tab.value"
|
||||
type="button"
|
||||
:class="{ active: activeStatus === tab.value }"
|
||||
@click="switchStatus(tab.value)"
|
||||
>
|
||||
<span>{{ tab.label }}</span>
|
||||
<span v-if="tab.count > 0" class="scope-tab-badge">{{ tab.count > 99 ? '99+' : tab.count }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="document-toolbar">
|
||||
<div class="filter-set">
|
||||
<div class="list-search">
|
||||
<i class="mdi mdi-magnify"></i>
|
||||
<input v-model="keyword" type="search" placeholder="搜索文件名、票据类型、金额、关联单号..." />
|
||||
</div>
|
||||
<button class="filter-btn" type="button" @click="reloadReceipts">
|
||||
<i class="mdi mdi-refresh"></i>
|
||||
<span>刷新</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="document-actions">
|
||||
<button
|
||||
class="create-request-btn"
|
||||
type="button"
|
||||
:disabled="!unlinkedReceipts.length"
|
||||
@click="openAssociateDialog"
|
||||
>
|
||||
<i class="mdi mdi-link-variant-plus"></i>
|
||||
<span>一键关联票据</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap" :class="{ 'is-empty': showEmpty }">
|
||||
<div v-if="loading" class="table-state">
|
||||
<TableLoadingState
|
||||
title="票据夹加载中"
|
||||
message="正在读取已上传票据、OCR 信息与关联状态"
|
||||
icon="mdi mdi-receipt-text-outline"
|
||||
floating
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="table-state error">
|
||||
<i class="mdi mdi-alert-circle-outline"></i>
|
||||
<strong>票据夹加载失败</strong>
|
||||
<p>{{ error }}</p>
|
||||
<button class="retry-btn" type="button" @click="reloadReceipts">重新加载</button>
|
||||
</div>
|
||||
|
||||
<TableEmptyState
|
||||
v-else-if="showEmpty"
|
||||
eyebrow="票据夹"
|
||||
:title="emptyTitle"
|
||||
:description="emptyDesc"
|
||||
icon="mdi mdi-receipt-text-outline"
|
||||
tone="theme"
|
||||
art-label="RECEIPT"
|
||||
:tips="emptyTips"
|
||||
/>
|
||||
|
||||
<table v-else>
|
||||
<colgroup>
|
||||
<col class="col-file">
|
||||
<col class="col-kind">
|
||||
<col class="col-scene">
|
||||
<col class="col-money">
|
||||
<col class="col-date">
|
||||
<col class="col-score">
|
||||
<col class="col-status">
|
||||
<col class="col-updated">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>票据文件</th>
|
||||
<th>识别类型</th>
|
||||
<th>费用场景</th>
|
||||
<th>金额</th>
|
||||
<th>票据日期</th>
|
||||
<th>置信度</th>
|
||||
<th>关联状态</th>
|
||||
<th>上传时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in visibleRows" :key="row.id" @click="openDetail(row)">
|
||||
<td>
|
||||
<strong class="doc-id">{{ row.file_name }}</strong>
|
||||
<small>{{ row.summary || '暂无摘要' }}</small>
|
||||
</td>
|
||||
<td><span class="doc-kind-tag reimbursement">{{ row.document_type_label }}</span></td>
|
||||
<td><span class="type-tag neutral">{{ row.scene_label }}</span></td>
|
||||
<td>{{ row.amount || '待补充' }}</td>
|
||||
<td>{{ row.document_date || '待补充' }}</td>
|
||||
<td>{{ formatScore(row.avg_score) }}</td>
|
||||
<td>
|
||||
<span class="status-tag" :class="row.status === 'linked' ? 'completed' : 'warning'">
|
||||
{{ row.status_label }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ formatDateTime(row.uploaded_at) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<footer v-if="showTable" class="list-foot">
|
||||
<span class="page-summary">共 {{ filteredRows.length }} 条，目前第 {{ currentPage }} 页</span>
|
||||
<div class="pager" aria-label="分页">
|
||||
<button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--">
|
||||
<i class="mdi mdi-chevron-left"></i>
|
||||
</button>
|
||||
<button
|
||||
v-for="page in totalPages"
|
||||
:key="page"
|
||||
class="page-number"
|
||||
:class="{ active: currentPage === page }"
|
||||
type="button"
|
||||
@click="currentPage = page"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
<button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++">
|
||||
<i class="mdi mdi-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
<EnterpriseSelect v-model="pageSize" class="page-size-select" :options="pageSizeOptions" size="small" @change="currentPage = 1" />
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article v-else class="receipt-folder-detail panel">
|
||||
<header class="receipt-detail-head">
|
||||
<button class="back-btn" type="button" @click="backToList">
|
||||
<i class="mdi mdi-arrow-left"></i>
|
||||
<span>返回票据夹</span>
|
||||
</button>
|
||||
<div>
|
||||
<span class="assistant-badge">票据详情</span>
|
||||
<h2>{{ detailForm.file_name }}</h2>
|
||||
<p>{{ selectedReceipt?.summary || '核对并修正票据基础信息，后续关联报销单时会带入当前票据。' }}</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="detailLoading" class="detail-loading">
|
||||
<TableLoadingState title="票据详情加载中" message="正在读取票据源文件与 OCR 元数据" icon="mdi mdi-receipt-text-outline" floating />
|
||||
</div>
|
||||
|
||||
<div v-else class="receipt-detail-layout">
|
||||
<section class="receipt-basic-panel">
|
||||
<header>
|
||||
<strong>基本票据信息</strong>
|
||||
<button class="apply-btn" type="button" :disabled="savingDetail" @click="saveDetail">
|
||||
<i class="mdi mdi-content-save-outline"></i>
|
||||
<span>{{ savingDetail ? '保存中' : '保存修改' }}</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="receipt-form-grid">
|
||||
<label>
|
||||
<span>票据类型</span>
|
||||
<input v-model="detailForm.document_type_label" type="text" />
|
||||
</label>
|
||||
<label>
|
||||
<span>费用场景</span>
|
||||
<input v-model="detailForm.scene_label" type="text" />
|
||||
</label>
|
||||
<label>
|
||||
<span>金额</span>
|
||||
<input v-model="detailForm.amount" type="text" placeholder="待补充" />
|
||||
</label>
|
||||
<label>
|
||||
<span>票据日期</span>
|
||||
<input v-model="detailForm.document_date" type="text" placeholder="YYYY-MM-DD" />
|
||||
</label>
|
||||
<label>
|
||||
<span>商户</span>
|
||||
<input v-model="detailForm.merchant_name" type="text" placeholder="待补充" />
|
||||
</label>
|
||||
<label>
|
||||
<span>OCR 置信度</span>
|
||||
<input :value="formatScore(selectedReceipt?.avg_score)" type="text" disabled />
|
||||
</label>
|
||||
<label class="field-wide">
|
||||
<span>摘要</span>
|
||||
<textarea v-model="detailForm.summary" rows="3" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="receipt-field-list">
|
||||
<div class="receipt-field-list-head">
|
||||
<strong>识别字段</strong>
|
||||
<button class="ghost-btn" type="button" @click="addField">
|
||||
<i class="mdi mdi-plus"></i>
|
||||
<span>新增字段</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-for="(field, index) in detailForm.fields" :key="`${field.key}-${index}`" class="receipt-field-row">
|
||||
<input v-model="field.label" type="text" placeholder="字段名" />
|
||||
<input v-model="field.value" type="text" placeholder="字段值" />
|
||||
<button type="button" aria-label="删除字段" @click="removeField(index)">
|
||||
<i class="mdi mdi-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="receipt-preview-panel">
|
||||
<header>
|
||||
<strong>原始文件</strong>
|
||||
<button v-if="selectedReceipt?.source_url" class="preview-source-btn" type="button" @click="openSourceFile">
|
||||
打开源文件
|
||||
</button>
|
||||
</header>
|
||||
<div class="receipt-preview-box">
|
||||
<img v-if="previewKind === 'image' && previewObjectUrl" :src="previewObjectUrl" alt="票据预览" />
|
||||
<iframe v-else-if="previewKind === 'pdf' && previewObjectUrl" :src="previewObjectUrl" title="票据 PDF 预览"></iframe>
|
||||
<div v-else class="preview-empty">
|
||||
<i class="mdi mdi-file-eye-outline"></i>
|
||||
<strong>当前文件暂不支持内嵌预览</strong>
|
||||
<p>可以点击右上角打开源文件查看。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="receipt-detail-foot">
|
||||
<button class="ghost-btn" type="button" @click="backToList">返回列表</button>
|
||||
<button class="danger-btn" type="button" :disabled="deleting" @click="deleteCurrentReceipt">
|
||||
<i class="mdi mdi-delete-outline"></i>
|
||||
<span>{{ deleting ? '删除中' : '删除票据' }}</span>
|
||||
</button>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<ElDialog
|
||||
v-model="associateDialogOpen"
|
||||
class="receipt-associate-dialog"
|
||||
title="一键关联票据"
|
||||
width="680px"
|
||||
append-to-body
|
||||
>
|
||||
<section v-if="associateStep === 1" class="associate-step">
|
||||
<p class="associate-hint">选择需要归集的未关联票据。</p>
|
||||
<ElCheckboxGroup v-model="selectedReceiptIds" class="receipt-checkbox-list">
|
||||
<ElCheckbox v-for="receipt in unlinkedReceipts" :key="receipt.id" :label="receipt.id">
|
||||
<span>{{ receipt.file_name }}</span>
|
||||
<small>{{ receipt.document_type_label }} · {{ receipt.amount || '金额待补充' }}</small>
|
||||
</ElCheckbox>
|
||||
</ElCheckboxGroup>
|
||||
</section>
|
||||
|
||||
<section v-else class="associate-step">
|
||||
<p class="associate-hint">选择未提交草稿，或基于票据新建一张报销单。</p>
|
||||
<div class="draft-choice-list">
|
||||
<label class="draft-choice" :class="{ active: targetDraftId === NEW_CLAIM_VALUE }">
|
||||
<input v-model="targetDraftId" type="radio" :value="NEW_CLAIM_VALUE" />
|
||||
<span>
|
||||
<strong>新建报销单</strong>
|
||||
<small>将选中的票据带入对话，由 AI 辅助填写信息。</small>
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
v-for="draft in draftClaims"
|
||||
:key="draft.claimId"
|
||||
class="draft-choice"
|
||||
:class="{ active: targetDraftId === draft.claimId }"
|
||||
>
|
||||
<input v-model="targetDraftId" type="radio" :value="draft.claimId" />
|
||||
<span>
|
||||
<strong>{{ draft.claimNo }}</strong>
|
||||
<small>{{ draft.reason }} · {{ draft.amountDisplay }}</small>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<template #footer>
|
||||
<button class="ghost-btn" type="button" @click="closeAssociateDialog">取消</button>
|
||||
<button v-if="associateStep === 2" class="ghost-btn" type="button" @click="associateStep = 1">上一步</button>
|
||||
<button
|
||||
class="apply-btn"
|
||||
type="button"
|
||||
:disabled="associateBusy || !canProceedAssociate"
|
||||
@click="handleAssociatePrimary"
|
||||
>
|
||||
{{ associatePrimaryLabel }}
|
||||
</button>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { ElCheckbox, ElCheckboxGroup } from 'element-plus/es/components/checkbox/index.mjs'
|
||||
import { ElDialog } from 'element-plus/es/components/dialog/index.mjs'
|
||||
|
||||
import EnterpriseSelect from '../components/shared/EnterpriseSelect.vue'
|
||||
import TableEmptyState from '../components/shared/TableEmptyState.vue'
|
||||
import TableLoadingState from '../components/shared/TableLoadingState.vue'
|
||||
import { fetchExpenseClaims } from '../services/reimbursements.js'
|
||||
import {
|
||||
buildReceiptFile,
|
||||
deleteReceiptFolderItem,
|
||||
fetchReceiptFolderAsset,
|
||||
fetchReceiptFolderDetail,
|
||||
fetchReceiptFolderItems,
|
||||
updateReceiptFolderItem
|
||||
} from '../services/receiptFolder.js'
|
||||
|
||||
const NEW_CLAIM_VALUE = '__new_claim__'
|
||||
const pageSizeOptions = [10, 20, 50].map((size) => ({ label: `${size} 条/页`, value: size }))
|
||||
const emit = defineEmits(['open-assistant'])
|
||||
|
||||
const activeStatus = ref('unlinked')
|
||||
const keyword = ref('')
|
||||
const receipts = ref([])
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const selectedReceipt = ref(null)
|
||||
const detailLoading = ref(false)
|
||||
const savingDetail = ref(false)
|
||||
const deleting = ref(false)
|
||||
const previewObjectUrl = ref('')
|
||||
const associateDialogOpen = ref(false)
|
||||
const associateStep = ref(1)
|
||||
const selectedReceiptIds = ref([])
|
||||
const targetDraftId = ref(NEW_CLAIM_VALUE)
|
||||
const draftClaims = ref([])
|
||||
const associateBusy = ref(false)
|
||||
|
||||
const detailForm = reactive({
|
||||
file_name: '',
|
||||
document_type: '',
|
||||
document_type_label: '',
|
||||
scene_code: '',
|
||||
scene_label: '',
|
||||
summary: '',
|
||||
amount: '',
|
||||
document_date: '',
|
||||
merchant_name: '',
|
||||
fields: []
|
||||
})
|
||||
|
||||
const detailMode = computed(() => Boolean(selectedReceipt.value))
|
||||
const unlinkedReceipts = computed(() => receipts.value.filter((item) => item.status !== 'linked'))
|
||||
const linkedReceipts = computed(() => receipts.value.filter((item) => item.status === 'linked'))
|
||||
const receiptTabs = computed(() => [
|
||||
{ value: 'unlinked', label: '未关联票据', count: unlinkedReceipts.value.length },
|
||||
{ value: 'linked', label: '已关联票据', count: linkedReceipts.value.length }
|
||||
])
|
||||
const activeRows = computed(() => (
|
||||
activeStatus.value === 'linked' ? linkedReceipts.value : unlinkedReceipts.value
|
||||
))
|
||||
const filteredRows = computed(() => {
|
||||
const normalized = keyword.value.trim().toLowerCase()
|
||||
if (!normalized) return activeRows.value
|
||||
return activeRows.value.filter((item) => [
|
||||
item.file_name,
|
||||
item.document_type_label,
|
||||
item.scene_label,
|
||||
item.summary,
|
||||
item.amount,
|
||||
item.document_date,
|
||||
item.linked_claim_no
|
||||
].filter(Boolean).join('').toLowerCase().includes(normalized))
|
||||
})
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(filteredRows.value.length / pageSize.value)))
|
||||
const visibleRows = computed(() => {
|
||||
const start = (currentPage.value - 1) * pageSize.value
|
||||
return filteredRows.value.slice(start, start + pageSize.value)
|
||||
})
|
||||
const showEmpty = computed(() => !loading.value && !error.value && visibleRows.value.length === 0)
|
||||
const showTable = computed(() => !loading.value && !error.value && visibleRows.value.length > 0)
|
||||
const emptyTitle = computed(() => keyword.value.trim() ? '没有符合条件的票据' : `${activeStatus.value === 'linked' ? '已关联票据' : '未关联票据'}为空`)
|
||||
const emptyDesc = computed(() => activeStatus.value === 'linked'
|
||||
? '已关联到报销单的票据会显示在这里，方便后续回溯。'
|
||||
: '上传并完成 OCR 的票据会先进入这里，稍后可以再关联到报销草稿。'
|
||||
)
|
||||
const emptyTips = computed(() => activeStatus.value === 'linked'
|
||||
? ['可从报销明细或票据夹关联流程形成已关联票据', '点击票据可查看原始文件与识别字段']
|
||||
: ['票据不会因为未立即建单而丢失', '可多选票据后一次性带入报销对话']
|
||||
)
|
||||
const previewKind = computed(() => selectedReceipt.value?.preview_kind || '')
|
||||
const canProceedAssociate = computed(() => (
|
||||
associateStep.value === 1
|
||||
? selectedReceiptIds.value.length > 0
|
||||
: Boolean(targetDraftId.value)
|
||||
))
|
||||
const associatePrimaryLabel = computed(() => {
|
||||
if (associateBusy.value) return '处理中'
|
||||
return associateStep.value === 1 ? '下一步' : '进入关联对话'
|
||||
})
|
||||
|
||||
watch([activeStatus, keyword, pageSize], () => {
|
||||
currentPage.value = 1
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
void reloadReceipts()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
revokePreviewUrl()
|
||||
})
|
||||
|
||||
function switchStatus(status) {
|
||||
activeStatus.value = status
|
||||
}
|
||||
|
||||
async function reloadReceipts() {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
receipts.value = await fetchReceiptFolderItems('all')
|
||||
} catch (err) {
|
||||
error.value = err?.message || '票据夹加载失败。'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetail(row) {
|
||||
selectedReceipt.value = row
|
||||
detailLoading.value = true
|
||||
revokePreviewUrl()
|
||||
try {
|
||||
const detail = await fetchReceiptFolderDetail(row.id)
|
||||
selectedReceipt.value = detail
|
||||
fillDetailForm(detail)
|
||||
await loadPreview(detail)
|
||||
} catch (err) {
|
||||
error.value = err?.message || '票据详情加载失败。'
|
||||
selectedReceipt.value = null
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function fillDetailForm(detail) {
|
||||
detailForm.file_name = detail.file_name || ''
|
||||
detailForm.document_type = detail.document_type || ''
|
||||
detailForm.document_type_label = detail.document_type_label || ''
|
||||
detailForm.scene_code = detail.scene_code || ''
|
||||
detailForm.scene_label = detail.scene_label || ''
|
||||
detailForm.summary = detail.summary || ''
|
||||
detailForm.amount = detail.amount || ''
|
||||
detailForm.document_date = detail.document_date || ''
|
||||
detailForm.merchant_name = detail.merchant_name || ''
|
||||
detailForm.fields = Array.isArray(detail.fields)
|
||||
? detail.fields.map((field) => ({ ...field }))
|
||||
: []
|
||||
}
|
||||
|
||||
async function loadPreview(detail) {
|
||||
if (!detail?.preview_url) return
|
||||
try {
|
||||
const blob = await fetchReceiptFolderAsset(detail.preview_url)
|
||||
previewObjectUrl.value = URL.createObjectURL(blob)
|
||||
} catch {
|
||||
previewObjectUrl.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
function revokePreviewUrl() {
|
||||
if (previewObjectUrl.value) {
|
||||
URL.revokeObjectURL(previewObjectUrl.value)
|
||||
previewObjectUrl.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function openSourceFile() {
|
||||
if (!selectedReceipt.value?.source_url) return
|
||||
const blob = await fetchReceiptFolderAsset(selectedReceipt.value.source_url)
|
||||
const objectUrl = URL.createObjectURL(blob)
|
||||
window.open(objectUrl, '_blank', 'noopener,noreferrer')
|
||||
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 30000)
|
||||
}
|
||||
|
||||
function backToList() {
|
||||
selectedReceipt.value = null
|
||||
revokePreviewUrl()
|
||||
}
|
||||
|
||||
function addField() {
|
||||
detailForm.fields.push({ key: '', label: '', value: '' })
|
||||
}
|
||||
|
||||
function removeField(index) {
|
||||
detailForm.fields.splice(index, 1)
|
||||
}
|
||||
|
||||
async function saveDetail() {
|
||||
if (!selectedReceipt.value?.id || savingDetail.value) return
|
||||
savingDetail.value = true
|
||||
try {
|
||||
const updated = await updateReceiptFolderItem(selectedReceipt.value.id, {
|
||||
document_type: detailForm.document_type,
|
||||
document_type_label: detailForm.document_type_label,
|
||||
scene_code: detailForm.scene_code,
|
||||
scene_label: detailForm.scene_label,
|
||||
summary: detailForm.summary,
|
||||
amount: detailForm.amount,
|
||||
document_date: detailForm.document_date,
|
||||
merchant_name: detailForm.merchant_name,
|
||||
fields: detailForm.fields
|
||||
})
|
||||
selectedReceipt.value = updated
|
||||
fillDetailForm(updated)
|
||||
await reloadReceipts()
|
||||
} finally {
|
||||
savingDetail.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCurrentReceipt() {
|
||||
if (!selectedReceipt.value?.id || deleting.value) return
|
||||
deleting.value = true
|
||||
try {
|
||||
await deleteReceiptFolderItem(selectedReceipt.value.id)
|
||||
backToList()
|
||||
await reloadReceipts()
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function openAssociateDialog() {
|
||||
selectedReceiptIds.value = []
|
||||
targetDraftId.value = NEW_CLAIM_VALUE
|
||||
associateStep.value = 1
|
||||
associateDialogOpen.value = true
|
||||
await loadDraftClaims()
|
||||
}
|
||||
|
||||
function closeAssociateDialog() {
|
||||
if (associateBusy.value) return
|
||||
associateDialogOpen.value = false
|
||||
}
|
||||
|
||||
async function loadDraftClaims() {
|
||||
try {
|
||||
const claims = await fetchExpenseClaims()
|
||||
draftClaims.value = (Array.isArray(claims) ? claims : [])
|
||||
.filter((claim) => String(claim.status || '').trim().toLowerCase() === 'draft')
|
||||
.map((claim) => ({
|
||||
raw: claim,
|
||||
claimId: String(claim.id || '').trim(),
|
||||
claimNo: String(claim.claim_no || '').trim(),
|
||||
reason: String(claim.reason || '待补充事由').trim(),
|
||||
amountDisplay: `${Number(claim.amount || 0).toFixed(2)} ${claim.currency || 'CNY'}`
|
||||
}))
|
||||
.filter((claim) => claim.claimId)
|
||||
} catch {
|
||||
draftClaims.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAssociatePrimary() {
|
||||
if (associateStep.value === 1) {
|
||||
associateStep.value = 2
|
||||
return
|
||||
}
|
||||
await openAssociationConversation()
|
||||
}
|
||||
|
||||
async function openAssociationConversation() {
|
||||
if (associateBusy.value || !selectedReceiptIds.value.length) return
|
||||
associateBusy.value = true
|
||||
try {
|
||||
const selected = receipts.value.filter((item) => selectedReceiptIds.value.includes(item.id))
|
||||
const files = await Promise.all(selected.map((item) => buildReceiptFile(item)))
|
||||
const selectedDraft = draftClaims.value.find((item) => item.claimId === targetDraftId.value)
|
||||
const prompt = selectedDraft
|
||||
? `请把票据夹中选中的 ${files.length} 份票据关联到报销草稿 ${selectedDraft.claimNo}，并继续核对填写信息。`
|
||||
: `请基于票据夹中选中的 ${files.length} 份票据新建一张报销草稿，并继续核对填写信息。`
|
||||
associateDialogOpen.value = false
|
||||
emit('open-assistant', {
|
||||
source: selectedDraft ? 'detail' : 'receipt-folder',
|
||||
request: selectedDraft
|
||||
? {
|
||||
...selectedDraft.raw,
|
||||
claimId: selectedDraft.claimId,
|
||||
documentNo: selectedDraft.claimNo
|
||||
}
|
||||
: null,
|
||||
prompt,
|
||||
files
|
||||
})
|
||||
} finally {
|
||||
associateBusy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatScore(value) {
|
||||
const score = Number(value || 0)
|
||||
if (!Number.isFinite(score) || score <= 0) return '待确认'
|
||||
return `${Math.round(score * 100)}%`
|
||||
}
|
||||
|
||||
function formatDateTime(value) {
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return '待确认'
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped src="../assets/styles/components/document-list-shared.css"></style>
|
||||
<style scoped src="../assets/styles/views/receipt-folder-view.css"></style>
|
||||
@@ -21,12 +21,21 @@ function testFallsBackToValidMeta() {
|
||||
function testResolvesMainRouteNames() {
|
||||
assert.equal(resolveTargetRouteName('logs'), 'app-settings')
|
||||
assert.equal(resolveTargetRouteName('policies'), 'app-policies')
|
||||
assert.equal(resolveTargetRouteName('receiptFolder'), 'app-receiptFolder')
|
||||
assert.equal(resolveTargetRouteName('requests'), 'app-overview')
|
||||
assert.equal(resolveTargetRouteName('approval'), 'app-overview')
|
||||
assert.equal(resolveTargetRouteName('archive'), 'app-overview')
|
||||
assert.equal(resolveTargetRouteName('missing'), 'app-overview')
|
||||
}
|
||||
|
||||
function testReceiptFolderFollowsDocumentCenter() {
|
||||
assert.equal(appViews[appViews.indexOf('documents') + 1], 'receiptFolder')
|
||||
const documentIndex = navItems.findIndex((item) => item.id === 'documents')
|
||||
const receiptIndex = navItems.findIndex((item) => item.id === 'receiptFolder')
|
||||
assert.equal(receiptIndex, documentIndex + 1)
|
||||
assert.equal(navItems[receiptIndex].label, '票据夹')
|
||||
}
|
||||
|
||||
function testLegacyCentersAreRemovedFromNavigation() {
|
||||
assert.equal(appViews.includes('requests'), false)
|
||||
assert.equal(appViews.includes('approval'), false)
|
||||
@@ -39,6 +48,7 @@ function run() {
|
||||
testDerivesViewFromRouteName()
|
||||
testFallsBackToValidMeta()
|
||||
testResolvesMainRouteNames()
|
||||
testReceiptFolderFollowsDocumentCenter()
|
||||
testLegacyCentersAreRemovedFromNavigation()
|
||||
console.log('navigation route resolution tests passed')
|
||||
}
|
||||
|
||||
75
web/tests/receipt-folder-view.test.mjs
Normal file
75
web/tests/receipt-folder-view.test.mjs
Normal file
@@ -0,0 +1,75 @@
|
||||
import assert from 'node:assert/strict'
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { join } from 'node:path'
|
||||
|
||||
const root = process.cwd()
|
||||
|
||||
function readProjectFile(path) {
|
||||
return readFileSync(join(root, path), 'utf8')
|
||||
}
|
||||
|
||||
function testReceiptFolderViewSurface() {
|
||||
const view = readProjectFile('web/src/views/ReceiptFolderView.vue')
|
||||
|
||||
assert.match(view, /未关联票据/)
|
||||
assert.match(view, /已关联票据/)
|
||||
assert.match(view, /一键关联票据/)
|
||||
assert.match(view, /基本票据信息/)
|
||||
assert.match(view, /原始文件/)
|
||||
assert.match(view, /返回列表/)
|
||||
assert.match(view, /删除票据/)
|
||||
assert.match(view, /ElCheckboxGroup/)
|
||||
assert.match(view, /fetchReceiptFolderItems\('all'\)/)
|
||||
assert.match(view, /buildReceiptFile\(item\)/)
|
||||
assert.match(view, /source: selectedDraft \? 'detail' : 'receipt-folder'/)
|
||||
assert.match(view, /emit\('open-assistant'/)
|
||||
}
|
||||
|
||||
function testReceiptFolderServiceContract() {
|
||||
const service = readProjectFile('web/src/services/receiptFolder.js')
|
||||
const ocrService = readProjectFile('web/src/services/ocr.js')
|
||||
const reimbursementService = readProjectFile('web/src/services/reimbursements.js')
|
||||
|
||||
assert.match(service, /\/receipt-folder\$\{buildStatusQuery\(status\)\}/)
|
||||
assert.match(service, /\/receipt-folder\/\$\{encodeURIComponent/)
|
||||
assert.match(service, /responseType: 'blob'/)
|
||||
assert.match(service, /new File\(\[blob\], fileName/)
|
||||
assert.match(service, /receiptId/)
|
||||
assert.match(ocrService, /formData\.append\('receipt_ids'/)
|
||||
assert.match(reimbursementService, /formData\.append\('receipt_id'/)
|
||||
}
|
||||
|
||||
function testAppShellWiresReceiptFolder() {
|
||||
const shell = readProjectFile('web/src/views/AppShellRouteView.vue')
|
||||
|
||||
assert.match(shell, /activeView === 'receiptFolder'/)
|
||||
assert.match(shell, /ReceiptFolderView/)
|
||||
assert.match(shell, /@open-assistant="openSmartEntry"/)
|
||||
assert.match(shell, /receipt-folder-workarea/)
|
||||
}
|
||||
|
||||
function testSharedDocumentListStyleReuse() {
|
||||
const receiptView = readProjectFile('web/src/views/ReceiptFolderView.vue')
|
||||
const documentView = readProjectFile('web/src/views/DocumentsCenterView.vue')
|
||||
const receiptStyles = readProjectFile('web/src/assets/styles/views/receipt-folder-view.css')
|
||||
const sharedStyles = readProjectFile('web/src/assets/styles/components/document-list-shared.css')
|
||||
|
||||
assert.match(receiptView, /document-list-shared\.css/)
|
||||
assert.match(documentView, /document-list-shared\.css/)
|
||||
assert.match(sharedStyles, /\.table-wrap\b/)
|
||||
assert.match(sharedStyles, /\.doc-kind-tag\b/)
|
||||
assert.match(sharedStyles, /\.list-foot\b/)
|
||||
assert.doesNotMatch(receiptStyles, /\.table-wrap\b/)
|
||||
assert.doesNotMatch(receiptStyles, /\.doc-kind-tag\b/)
|
||||
assert.doesNotMatch(receiptStyles, /\.list-foot\b/)
|
||||
}
|
||||
|
||||
function run() {
|
||||
testReceiptFolderViewSurface()
|
||||
testReceiptFolderServiceContract()
|
||||
testAppShellWiresReceiptFolder()
|
||||
testSharedDocumentListStyleReuse()
|
||||
console.log('receipt folder view tests passed')
|
||||
}
|
||||
|
||||
run()
|
||||
Reference in New Issue
Block a user