edit

src/app/routes/financial-management/components/voucher-summary/summary-detail/summary-detail.component.html

@@ -0,0 +1,49 @@
+<page-header-wrapper title="浏览" [logo]="logo">
+    <ng-template #logo>
+        <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
+            <i nz-icon nzType="left" nzTheme="outline"></i>
+        </button>
+    </ng-template>
+</page-header-wrapper>
+
+<nz-card>
+    <div se-container labelWidth="150" gutter="32" col="3">
+        <se-title class="text-center font-weight-bold text-xl">记账凭证
+            <button nz-button nzType="primary" [nzLoading]="service.http.loading" style="float: right;">打印</button>
+        </se-title>
+        <se label="帐套" required>
+            天津怡亚通物流科技有限公司
+        </se>
+        <se label="凭证类型" required>
+            WL
+        </se>
+        <se label="凭证日期" required>
+            2021-12-12
+        </se>
+    </div>
+
+    <st #st [data]="data" [columns]="columns" [footer]="bodyTpl" bordered [scroll]="{ x:'1200px',y: '420px' }"
+        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, process: beforeReq }"
+        [res]="{ reName: { list: 'data.records', total: 'data.total' } }" [page]="{ show: false }"
+        [loading]="service.http.loading">
+        <ng-template #bodyTpl let-s>
+            <ng-container *ngIf="st.count > 0">
+                <div style="display: flex;justify-content: flex-end;">
+                    <div style="flex: 1;" class="text-left">合计：</div>
+                    <div style="width: 150px;" class="text-right">{{111 | currency}}</div>
+                    <div style="width: 150px;" class="text-right">{{111 | currency}}</div>
+                </div>
+            </ng-container>
+        </ng-template>
+    </st>
+
+    <div se-container labelWidth="150" gutter="32" col="2" class="mt-md">
+        <se label="摘要">
+            收取服务费XXXX
+        </se>
+        <se label="汇总凭证号">
+            VC202112120001
+        </se>
+    </div>
+
+</nz-card>

src/app/routes/financial-management/components/voucher-summary/summary-detail/summary-detail.component.ts

@@ -0,0 +1,39 @@
+import { CurrencyPipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { STData, STColumn, STRequestOptions } from '@delon/abc/st';
+import { FreightAccountService } from '../../../services/freight-account.service';
+
+@Component({
+  selector: 'app-summary-detail',
+  templateUrl: './summary-detail.component.html',
+  providers: [CurrencyPipe]
+})
+export class SummaryDetailComponent implements OnInit {
+  data: STData[] = Array(100)
+    .fill({})
+    .map((_, idx) => ({
+      id: idx + 1,
+      price: ~~(Math.random() * 100),
+      age: ~~(Math.random() * 100) > 50 ? '女' : '男'
+    }));
+  columns: STColumn[] = [
+    { title: '摘要', type: 'no' },
+    { title: '会计科目', index: 'id' },
+    { title: '辅助核算', index: 'age' },
+    { title: '币种', index: 'price', className: 'text-center' },
+    { title: '借方金额', index: 'price', width: 150, type: 'currency', format: item => `${this.currencyPipe.transform(item.price)}` },
+    { title: '贷方金额', index: 'price', width: 150, type: 'currency', format: item => `${this.currencyPipe.transform(item.price)}` }
+  ];
+
+  constructor(public service: FreightAccountService, private currencyPipe: CurrencyPipe) {}
+
+  ngOnInit(): void {}
+
+  beforeReq = (requestOptions: STRequestOptions) => {
+    return requestOptions;
+  };
+
+  goBack() {
+    history.go(-1);
+  }
+}