edit

src/app/routes/ticket-management/components/cancellation-invoice/push-invoice/push-invoice.component.html

@@ -0,0 +1,55 @@
+<div nz-row nzGutter="8" class="statistics-box">
+    <div nz-col nzSpan="12" se-container [labelWidth]="100" col="1">
+        <se label="购买方">
+            茅台股份有限公司
+        </se>
+        <se label="纳税号">
+            912301046656930913
+        </se>
+        <se label="地址">
+            贵州省贵阳市
+        </se>
+        <se label="电话">
+            075588393198
+        </se>
+        <se label="开户行">
+            中国工商银行股份有限公司哈贵阳支行
+        </se>
+        <se label="银行账户">
+            3500044119068126788
+        </se>
+        <se label="票面备注">
+            <p style="margin-bottom: 0;margin-top: 5px;">起运地:广东省深圳市南山区</p>
+            <p style="margin-bottom: 0;">目的地:湖北省武汉市青山区</p>
+            <p style="margin-bottom: 0;">货物名称:钢材</p>
+            <p style="margin-bottom: 0;">车型车牌:高栏车 粤B36889</p>
+        </se>
+    </div>
+    <div nz-col nzSpan="12" se-container [labelWidth]="100" col="1">
+        <se label="销售方">
+            天津怡亚通物流科技有限公司
+        </se>
+        <se label="申请编号">
+            VP12301046656
+        </se>
+        <se label="订单数">
+            100笔
+        </se>
+        <se label="价税合计">
+            300,000.00元
+        </se>
+        <se label="服务名称">
+            运输服务费
+        </se>
+        <se label="销货清单">
+            需要
+        </se>
+        <se label="其他要求">
+            单位按吨
+        </se>
+
+    </div>
+</div>
+
+<st #st [data]="data" [columns]="columns" [page]="{ show: false}" [scroll]="{ x:'800px',y: '300px' }" class="mt-md">
+</st>

src/app/routes/ticket-management/components/cancellation-invoice/push-invoice/push-invoice.component.less

@@ -0,0 +1,13 @@
+:host::ng-deep {
+
+    .statistics-box {
+        .ant-form-item {
+            margin-bottom: 0;
+
+            .ant-form-item-control-input-content {
+                color: #f5222d;
+            }
+        }
+    }
+
+}

src/app/routes/ticket-management/components/cancellation-invoice/push-invoice/push-invoice.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STComponent, STColumn } from '@delon/abc/st';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { TicketService } from '../../../services/ticket.service';
+
+@Component({
+  selector: 'app-push-invoice',
+  templateUrl: './push-invoice.component.html',
+  styleUrls: ['./push-invoice.component.less']
+})
+export class PushInvoiceComponent implements OnInit {
+
+  @ViewChild('st', { static: false })
+  st!: STComponent;
+  columns: STColumn[] = this.initST();
+  data = [
+    {
+      key: 0,
+      disabled: true,
+      href: 'https://ant.design',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
+      no: 'TradeCode 0'
+    },
+    {
+      key: 1,
+      disabled: false,
+      href: 'https://ant.design',
+      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
+      no: 'TradeCode 1'
+    }
+  ];
+
+  info = {};
+
+  constructor(public service: TicketService, private nzModalService: NzModalService) {}
+
+  ngOnInit(): void {}
+
+
+  private initST(): STColumn[] {
+    return [
+      { title: '服务名称', index: 'no', width: 100 },
+      { title: '规格型号', index: 'callNo', width: 100 },
+      { title: '单位', index: 'callNo', width: 90 },
+      { title: '数量', index: 'callNo', width: 90 },
+      { title: '金额', index: 'callNo', width: 90 },
+      { title: '税率', index: 'callNo', width: 90 },
+      { title: '税额', index: 'callNo', width: 90 },
+    ];
+  }
+
+}