优化

src/modules/finance/pages/FinanceCustomerAccountsView.vue

@@ -62,6 +62,9 @@ const queryFields = computed<QueryField[]>(() => [
 const columns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 150, fixed: 'left', slotName: 'actions' },
   { key: 'customerName', label: '客户', minWidth: 180, slotName: 'customerName' },
+  { key: 'customerCode', label: '客户编号', width: 150, slotName: 'customerCode' },
+  { key: 'contactName', label: '联系人', width: 130, slotName: 'contactName' },
+  { key: 'contactPhone', label: '联系电话', width: 150, slotName: 'contactPhone' },
   { key: 'outstandingReceivable', label: '待收(CNY)', width: 130 },
   { key: 'pendingBilling', label: '待开账(CNY)', width: 140 },
   { key: 'receivedInPeriod', label: '本期已收(CNY)', width: 140 },
@@ -176,6 +179,7 @@ function formatDateTime(value: unknown) {
   return Number.isNaN(date.getTime()) ? '时间数据缺失' : date.toLocaleString('zh-CN', { hour12: false })
 }
 function formatLastChangedAt(value: unknown) { return String(value || '').trim() ? formatDateTime(value) : '暂无变动' }
+function customerField(value: unknown) { return String(value || '').trim() || '未维护' }
 function displayDocumentNo(value: unknown) { return String(value || '').trim() || '关联单据缺失' }
 function displayLedgerId(value: unknown) { return String(value || '').trim() || '流水号缺失' }
 async function finishExport(task: Awaited<ReturnType<typeof createPlatformExportTask>>) {
@@ -257,6 +261,7 @@ watch(() => [route.name, String(route.params.customerId || '')], ([name, custome
           <template #toolbar-actions><el-button v-if="canExport" :loading="accountExportBusy" :disabled="loading || accountExportBusy" @click="exportAccounts"><Download :size="16" />导出Excel</el-button></template>
           <template #actions="{ row }"><div class="row-actions"><el-button link type="primary" @click="openAccount(row, false)"><Eye :size="15" />查看</el-button><el-button v-if="canUpdateTerms" link type="primary" @click="openAccount(row, true)"><Pencil :size="15" />账期</el-button></div></template>
           <template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template>
+          <template #customerCode="{ row }">{{ customerField(row.customerCode) }}</template><template #contactName="{ row }">{{ customerField(row.contactName) }}</template><template #contactPhone="{ row }">{{ customerField(row.contactPhone) }}</template>
           <template #lastChangedAt="{ row }">{{ formatLastChangedAt(row.lastChangedAt) }}</template>
           <template #status="{ row }"><el-tag :type="row.status === 'ACTIVE' ? 'success' : 'info'">{{ row.status === 'ACTIVE' ? '正常' : '停用' }}</el-tag></template>
           <template #pagination-left><span>汇总：未收 {{ money(summary.receivable) }} · 待出账 {{ money(summary.pending) }} · 本期已收 {{ money(summary.received) }} · 应付 {{ money(summary.payable) }} CNY</span></template>
@@ -270,6 +275,7 @@ watch(() => [route.name, String(route.params.customerId || '')], ([name, custome
         <template v-if="selected && !ledgerError" #summary><section class="account-metrics" aria-label="客户账户汇总"><div class="account-metric is-receivable"><span>待收金额</span><strong>{{ money(selected.outstandingReceivable) }}</strong><small>CNY</small></div><div class="account-metric is-pending"><span>待开账金额</span><strong>{{ money(selected.pendingBilling) }}</strong><small>CNY</small></div><div class="account-metric is-received"><span>本期已收</span><strong>{{ money(selected.receivedInPeriod) }}</strong><small>CNY</small></div><div class="account-metric is-payable"><span>待付金额</span><strong>{{ money(selected.outstandingPayable) }}</strong><small>CNY</small></div></section></template>
         <LoadErrorState v-if="ledgerError" :title="editing ? '客户账期加载失败' : '账户流水加载失败'" :message="ledgerError.message" :loading="ledgerLoading" @retry="retryDrawer"><template #details><ApiErrorMeta :details="ledgerError" /></template></LoadErrorState>
         <template v-else-if="selected">
+          <FormSection class="customer-profile-section" title="客户信息" :bordered="false"><el-descriptions :column="3"><el-descriptions-item label="客户编号">{{ customerField(selected.customerCode) }}</el-descriptions-item><el-descriptions-item label="联系人">{{ customerField(selected.contactName) }}</el-descriptions-item><el-descriptions-item label="联系电话">{{ customerField(selected.contactPhone) }}</el-descriptions-item></el-descriptions></FormSection>
           <FormSection v-if="!editing" class="ledger-section" title="账户流水" :bordered="false">
             <QueryToolbar v-model="ledgerFilters" class="ledger-query" :fields="ledgerQueryFields" ariaLabel="账户流水筛选" preference-key="finance-account-ledger-query" @search="ledgerPage = 1; loadLedger" />
             <div class="detail-table-scroll"><DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" class="ledger-table" :data="ledger" :columns="ledgerColumns" :loading="ledgerLoading" :total="ledgerTotal" row-key="ledgerId" empty-text="暂无账户流水" @update:page="loadLedger()" @update:page-size="ledgerPage = 1; loadLedger()"><template #toolbar-actions><el-button v-if="canExport" :loading="ledgerExportBusy" :disabled="ledgerLoading || ledgerExportBusy" @click="exportLedger"><Download :size="16" />导出流水</el-button></template><template #pagination-left>共 {{ ledgerTotal }} 条</template><template #ledgerId="{ row }"><span class="ledger-identifier" :title="displayLedgerId(row.ledgerId)">{{ displayLedgerId(row.ledgerId) }}</span></template><template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template><template #businessType="{ row }">{{ ledgerBusinessType(row.businessType) }}</template><template #documentNo="{ row }"><span class="ledger-document" :title="displayDocumentNo(row.documentNo)">{{ displayDocumentNo(row.documentNo) }}</span></template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template></DataTable></div>