feat: 新增票据夹模块并优化 OCR 与员工画像服务
后端新增票据夹端点、数据模型和服务模块，优化 OCR 端点 Schema 和附件操作逻辑，完善员工行为画像服务和辅助函数， 前端新增票据夹视图和服务层，优化文档中心样式和侧边栏导 航，完善员工画像详情弹窗和权限控制，补充单元测试。
This commit is contained in:
caoxiaozhu
@@ -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>
|
||||
Reference in New Issue
Block a user