开票申请

src/app/routes/ticket-management/components/invoice-requested/requested-invoice-modal/requested-invoice-modal.component.html

@@ -1,49 +1,3 @@
-<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="订单数">
-            100笔
-        </se>
-        <se label="开票金额">
-            300,000.00元
-        </se>
-        <se label="服务名称">
-            运输服务费
-        </se>
-        <se label="销货清单">
-            需要
-        </se>
-        <se label="其他要求">
-            单位按吨
-        </se>
+<app-requested-detail></app-requested-detail>
 
-    </div>
-</div>
+<st #st [data]="data" [columns]="columns" [page]="{ show: false}" [scroll]="{ x:'1200px',y: '300px' }" class="mt-md"></st>

src/app/routes/ticket-management/components/invoice-requested/requested-invoice-modal/requested-invoice-modal.component.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STColumn, STComponent } from '@delon/abc/st';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { TicketService } from '../../../services/ticket.service';
 
 @Component({
   selector: 'app-requested-invoice-modal',
@@ -6,10 +9,75 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./requested-invoice-modal.component.less']
 })
 export class RequestedInvoiceModalComponent 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'
+    }
+  ];
 
-  constructor() { }
+  info = {};
 
-  ngOnInit(): void {
+  constructor(public service: TicketService, private nzModalService: NzModalService) {}
+
+  ngOnInit(): void {}
+
+  /**
+   * 移除订单
+   * @returns
+   */
+  removeOrder(item: any[]) {
+    if (this.data?.length <= 0) {
+      this.service.msgSrv.warning('无订单');
+      return;
+    }
+    this.nzModalService.warning({
+      nzTitle: '确定从当前批次中移除所有订单？',
+      nzContent: '移除后相关订单可以重新提交开票申请',
+      nzOnOk: () => {
+        console.log(this.data);
+      }
+    });
   }
 
+  private initST(): STColumn[] {
+    return [
+      { title: '订单号', index: 'no', width: 150 },
+      { title: '订单完成日期', index: 'updatedAt', type: 'date', width: 150 },
+      { title: '所属项目', index: 'callNo', width: 120 },
+      { title: '订单类型', index: 'callNo', width: 90 },
+      { title: '装货地', index: 'callNo', width: 90 },
+      { title: '卸货地', index: 'callNo', width: 100 },
+      { title: '货物信息', index: 'callNo', width: 90 },
+      { title: '承运司机', index: 'callNo', width: 140, format: item => `特朗普</br>13789040523</br>粤GT8419` },
+      { title: '总费用', index: 'callNo', width: 90 },
+      { title: '运输费', index: 'callNo', width: 90 },
+      { title: '附加费', index: 'callNo', width: 90 },
+      {
+        title: '操作',
+        width: 80,
+        fixed: 'right',
+        className: 'text-center',
+        buttons: [
+          {
+            text: '移除',
+            click: item => this.removeOrder([item])
+          }
+        ]
+      }
+    ];
+  }
 }