优化

2026-08-17 13:24:55 +08:00
parent 6a0c0b9229
commit 4a9438315c
20 changed files with 299 additions and 143 deletions
@@ -28,7 +28,7 @@ import {
  listFinanceStatements,
  uploadFinanceVoucher,
 } from '../api/finance'
-import { financeStatusLabel, financeStatusTone } from '../status'
+import { financeOperationActionLabel, financeSourceTypeLabel, financeStatusLabel, financeStatusTone } from '../status'
 import type {
  FinanceFeePoolItem,
  FinancePayableSettlement,
@@ -136,6 +136,20 @@ const columns = computed<DataTableColumn[]>(() => props.kind === 'receivable'

 function money(value: number) { return `¥${Number(value || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` }
 function displayDate(value?: string) { return value || '—' }
+function displayDateTime(value?: string) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
+function settlementRevisionActionLabel(action: string) {
+  return ({
+    SUBMIT: '提交审核',
+    APPROVE: '审核通过',
+    REJECT: '审核驳回',
+    ISSUE: '出账',
+    ADJUST: '调整',
+    VOID: '作废',
+    REOPEN: '重开',
+    RECEIPT: '收款登记',
+    PAYMENT: '付款登记',
+  } as Record<string, string>)[action] || financeOperationActionLabel(action)
+}
 function rowTotal(value: unknown) { return totalAmount(value as SettlementRow) }
 function rowPaid(value: unknown) { return paidAmount(value as SettlementRow) }
 function rowOutstanding(value: unknown) { return Number((value as SettlementRow).outstandingAmount || 0) }
@@ -417,11 +431,10 @@ onMounted(() => {
          <div class="detail-table-scroll">
          <el-table :data="detail.lines" size="small" border stripe empty-text="暂无费用明细">
            <el-table-column prop="feeItemName" label="费用类型" min-width="150" />
-            <el-table-column prop="sourceType" label="来源类型" min-width="140" />
+            <el-table-column prop="sourceType" label="来源类型" min-width="140"><template #default="scope">{{ financeSourceTypeLabel(scope.row.sourceType) }}</template></el-table-column>
            <el-table-column prop="inboundCode" label="入仓码" min-width="130"><template #default="scope">{{ scope.row.inboundCode || '—' }}</template></el-table-column>
            <el-table-column prop="containerNo" label="柜次号" min-width="130"><template #default="scope">{{ scope.row.containerNo || '—' }}</template></el-table-column>
            <el-table-column prop="businessDate" label="业务发生日" width="120"><template #default="scope">{{ displayDate(scope.row.businessDate) }}</template></el-table-column>
-            <el-table-column prop="sourceVersion" label="来源版本" width="100" />
            <el-table-column prop="amount" label="金额(CNY)" width="130" align="right"><template #default="scope">{{ money(scope.row.amount) }}</template></el-table-column>
          </el-table>
          </div>
@@ -440,11 +453,11 @@ onMounted(() => {
        <FormSection title="修订记录" :bordered="false">
          <div class="detail-table-scroll">
          <el-table :data="detail.revisions" size="small" border stripe empty-text="暂无调整记录">
-            <el-table-column prop="action" label="动作" min-width="120" />
+            <el-table-column prop="action" label="动作" min-width="120"><template #default="scope">{{ settlementRevisionActionLabel(scope.row.action) || financeOperationActionLabel(scope.row.action) }}</template></el-table-column>
            <el-table-column prop="beforeAmount" label="调整前(CNY)" width="140" align="right"><template #default="scope">{{ money(scope.row.beforeAmount) }}</template></el-table-column>
            <el-table-column prop="afterAmount" label="调整后(CNY)" width="140" align="right"><template #default="scope">{{ money(scope.row.afterAmount) }}</template></el-table-column>
            <el-table-column prop="reason" label="原因" min-width="180"><template #default="scope">{{ scope.row.reason || '—' }}</template></el-table-column>
-            <el-table-column prop="occurredAt" label="时间" min-width="160" />
+            <el-table-column prop="occurredAt" label="时间" min-width="160"><template #default="scope">{{ displayDateTime(scope.row.occurredAt) }}</template></el-table-column>
          </el-table>
          </div>
        </FormSection>
@@ -458,17 +471,19 @@ onMounted(() => {
        <LoadErrorState :title="`${title}加载失败`" :message="(customerError || error)?.message || ''" :loading="loading" @retry="customerError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="(customerError || error)!" /></template></LoadErrorState>
      </template>
      <template v-if="!customerError && !error">
-        <section class="settlement-summary" aria-label="结算汇总">
-          <div class="summary-item"><span>{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</span><strong>{{ money(totals.amount) }}</strong></div>
-          <div class="summary-item"><span>{{ kind === 'receivable' ? '已收' : '已付' }}</span><strong class="is-success">{{ money(totals.paid) }}</strong></div>
-          <div class="summary-item"><span>{{ kind === 'receivable' ? '待收' : '待付' }}</span><strong class="is-danger">{{ money(totals.outstanding) }}</strong></div>
+        <section class="settlement-list-toolbar" aria-label="结算汇总与列表操作">
+          <div class="settlement-summary" aria-label="结算汇总">
+            <div class="summary-item"><span>{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</span><strong>{{ money(totals.amount) }}</strong></div>
+            <div class="summary-item"><span>{{ kind === 'receivable' ? '已收' : '已付' }}</span><strong class="is-success">{{ money(totals.paid) }}</strong></div>
+            <div class="summary-item"><span>{{ kind === 'receivable' ? '待收' : '待付' }}</span><strong class="is-danger">{{ money(totals.outstanding) }}</strong></div>
+          </div>
+          <div class="settlement-list-actions">
+            <el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="15" />{{ createLabel }}</el-button>
+            <el-button @click="exportRows"><Download :size="15" />导出</el-button>
+          </div>
        </section>
        <section class="surface-panel table-panel">
          <DataTable :data="filteredRows" :columns="columns" :loading="loading" :aria-label="`${title}列表`" row-key="id" empty-text="暂无符合条件的结算单">
-            <template #toolbar-actions>
-              <el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="15" />{{ createLabel }}</el-button>
-              <el-button @click="exportRows"><Download :size="15" />导出</el-button>
-            </template>
            <template #actions="{ row }">
              <el-button link type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>
              <el-button v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" link :loading="receiptBusy" @click="openReceipt(row)"><HandCoins :size="15" />收款</el-button>
@@ -518,8 +533,13 @@ onMounted(() => {

 <style scoped>
 .finance-settlement-page { min-width: 0; }
-.settlement-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 28px; padding: 0 2px; }
+.settlement-list-toolbar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 2px 10px; }
+.settlement-summary, .settlement-list-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; }
+.settlement-summary { flex: 1; gap: 8px 0; }
+.settlement-list-actions { flex: 0 0 auto; justify-content: flex-end; gap: 8px; }
+.settlement-list-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .summary-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.settlement-summary .summary-item + .summary-item { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--cc-border, #e3e8ef); }
 .summary-item span { color: var(--cc-text-secondary, #64748b); font-size: 13px; }
 .summary-item strong { color: var(--cc-text-primary, #1f2937); font-size: 18px; line-height: 1.2; }
 .summary-item strong.is-success { color: #16803c; }
@@ -564,7 +584,10 @@ onMounted(() => {
  .settlement-detail-state { margin: 16px; }
  .partial-summary { gap: 10px; padding: 12px; }
  .partial-summary div { padding: 0; border-left: 0; }
+  .settlement-list-toolbar { align-items: stretch; flex-direction: column; padding: 0 0 10px; }
  .settlement-summary { align-items: flex-start; flex-direction: column; gap: 6px; }
+  .settlement-summary .summary-item + .summary-item { margin-left: 0; padding-left: 0; border-left: 0; }
+  .settlement-list-actions { width: 100%; justify-content: flex-start; }
  .summary-item strong { font-size: 21px; }
  .settlement-detail-header { align-items: flex-start; flex-direction: column; padding: 16px; }
  .settlement-detail-actions { width: 100%; }