html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-08-17 19:13:25 +08:00
parent 28f2cd4cc5
commit d618683467
22 changed files with 263 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/finance/pages/FinanceCustomerStatementsView.vue
+30 -13
View File
@@ -456,19 +456,19 @@ watch(detailRouteId, (statementId) => {
<el-tag :type="financeStatusTone(detail.status)">{{ financeStatusLabel(detail.status) }}</el-tag>
</div>
<FormSection class="statement-summary-section" title="对账单概要" aria-label="对账单摘要">
<el-descriptions :column="3" border>
<el-descriptions-item label="总应收金额">{{ detail.totalAmount.toFixed(2) }} CNY</el-descriptions-item>
<el-descriptions-item label="已收金额">{{ detail.paidAmount.toFixed(2) }} CNY</el-descriptions-item>
<el-descriptions-item label="未收金额"><strong class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</strong></el-descriptions-item>
<el-descriptions-item label="账期">{{ detail.creditDays }} 天</el-descriptions-item>
<el-descriptions-item label="货币">{{ detail.currency }}</el-descriptions-item>
<el-descriptions-item label="是否结清">{{ detail.settled ? '是' : '否' }}</el-descriptions-item>
<el-descriptions-item label="创建人">{{ operatorDisplayName(detail.createdByName) }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ formatDateTime(detail.createdAt) }}</el-descriptions-item>
<el-descriptions-item label="更新人">{{ operatorDisplayName(detail.updatedByName) }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ formatDateTime(detail.updatedAt) }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="2">{{ detail.remark || '—' }}</el-descriptions-item>
</el-descriptions>
<div class="statement-summary-grid">
<div class="statement-summary-item"><span>总应收金额</span><strong>{{ detail.totalAmount.toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>已收金额</span><strong>{{ detail.paidAmount.toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>未收金额</span><strong class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>账期</span><strong>{{ detail.creditDays }} 天</strong></div>
<div class="statement-summary-item"><span>货币</span><strong>{{ detail.currency }}</strong></div>
<div class="statement-summary-item"><span>是否结清</span><strong>{{ detail.settled ? '是' : '否' }}</strong></div>
<div class="statement-summary-item"><span>创建人</span><strong>{{ operatorDisplayName(detail.createdByName) }}</strong></div>
<div class="statement-summary-item"><span>创建时间</span><strong>{{ formatDateTime(detail.createdAt) }}</strong></div>
<div class="statement-summary-item"><span>更新人</span><strong>{{ operatorDisplayName(detail.updatedByName) }}</strong></div>
<div class="statement-summary-item"><span>更新时间</span><strong>{{ formatDateTime(detail.updatedAt) }}</strong></div>
<div class="statement-summary-item statement-summary-item--remark"><span>备注</span><strong>{{ detail.remark || '—' }}</strong></div>
</div>
</FormSection>
</template>
<el-tabs v-model="activeDetailTab" class="statement-detail-tabs">
@@ -566,6 +566,12 @@ watch(detailRouteId, (statementId) => {
.statement-detail-head h2 { margin: 2px 0 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.statement-detail-head p { margin: 5px 0 0; color: var(--cc-text-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.statement-summary-section { padding: 10px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
.statement-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.statement-summary-item { min-width: 0; }
.statement-summary-item span, .statement-summary-item strong { display: block; overflow-wrap: anywhere; }
.statement-summary-item span { margin-bottom: 3px; color: var(--cc-text-secondary); font-size: 12px; }
.statement-summary-item strong { color: var(--cc-text-primary); font-size: 14px; line-height: 1.45; }
.statement-summary-item--remark { grid-column: span 2; }
.statement-outstanding { color: var(--el-color-warning-dark-2); }
.statement-detail-tabs { min-width: 0; }
.statement-detail-table { min-width: 0; }
@@ -601,6 +607,15 @@ watch(detailRouteId, (statementId) => {
padding: 8px 14px;
}
.statement-summary-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px 24px;
}
.statement-summary-item--remark {
grid-column: span 2;
}
.statement-detail-tabs :deep(.el-tabs__header) {
padding: 0 14px;
}
@@ -624,5 +639,7 @@ watch(detailRouteId, (statementId) => {
@media (max-width: 640px) {
.statement-detail-page__header { align-items: stretch; flex-direction: column; }
.statement-summary-grid { grid-template-columns: 1fr; }
.statement-summary-item--remark { grid-column: auto; }
}
</style>