edit

src/app/routes/ticket-management/components/express-info/express-detail-modal/express-detail-modal.component.html

@@ -0,0 +1,16 @@
+<div nz-row nzGutter="8">
+    <div nz-col nzSpan="20">
+        <sf #sf [schema]="searchSchema" [ui]="{ '*': { spanLabelFixed: 0,grid: { span: 8 } }}" [compact]="true"
+            [button]="'none'"></sf>
+    </div>
+    <div nz-col [nzSpan]="4" class="text-right mb-md">
+        <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)">查询</button>
+        <button nz-button (click)="resetSF()">重置</button>
+    </div>
+
+</div>
+<st #st [data]="url" [columns]="columns" bordered size="small"
+    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, process: beforeReq }"
+    [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
+    [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+    [loading]="service.http.loading" [scroll]="{ y: '400px' }"></st>

src/app/routes/ticket-management/components/express-info/express-detail-modal/express-detail-modal.component.ts

@@ -0,0 +1,112 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { STComponent, STColumn, STRequestOptions } from '@delon/abc/st';
+import { SFComponent, SFSchema, SFDateWidgetSchema } from '@delon/form';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { TicketService } from '../../../services/ticket.service';
+
+@Component({
+  selector: 'app-express-detail-modal',
+  templateUrl: './express-detail-modal.component.html',
+  styleUrls: ['./express-detail-modal.component.less']
+})
+export class ExpressDetailModalComponent implements OnInit {
+  data = [];
+  selectedData = [];
+  url = `/api/fcc/ficoExpressH/getFicoVatinvHByExpress`;
+  @ViewChild('st', { static: true })
+  st!: STComponent;
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  columns: STColumn[] = [
+    { title: '发票号码', index: 'invoiceno', width: 160, className: 'text-left' },
+    { title: '发票代码', index: 'invoiceno2', width: 160 , className: 'text-left'},
+    { title: '申请编号', index: 'vatinvcode', width: 160, className: 'text-left' },
+    { title: '网络货运人', index: 'ltdName', width: 120 , className: 'text-left'},
+    { title: '购买人', index: 'tradeFlowNo', width: 120, className: 'text-left' },
+    {
+      title: '价税合计',
+      index: 'vatmoney',
+      width: 120,
+      type: 'widget',
+      className: 'text-right font-weight-bold',
+      widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.vatnotax }) }
+    },
+    {
+      title: '金额',
+      index: 'vatnotax',
+      width: 90,
+      type: 'widget',
+      className: 'text-right',
+      widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.vatnotax }) }
+    },
+    {
+      title: '税率',
+      index: 'fee',
+      width: 90,
+      className: 'text-right'
+    },
+    {
+      title: '税额',
+      index: 'vattax',
+      width: 90,
+      type: 'widget',
+      className: 'text-right',
+      widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.vatnotax }) }
+    },
+    { title: '开票日期', index: 'invoicedate', type: 'date', width: 150, className: 'text-center' }
+  ];
+  searchSchema: SFSchema = {
+    properties: {
+      invoiceno: {
+        title: '',
+        type: 'string',
+        ui: {
+          placeholder: '发票号码'
+        }
+      },
+      expressno: {
+        title: '',
+        type: 'string',
+        ui: {
+          placeholder: '申请编号'
+        }
+      },
+      createTime: {
+        title: '',
+        type: 'string',
+        ui: {
+          widget: 'sl-from-to-search',
+          format: 'yyyy-MM-dd'
+        } as SFDateWidgetSchema
+      }
+    }
+  };
+
+  expressCode!: any;
+
+  constructor(public service: TicketService, private nzModalService: NzModalService, private router: Router) {}
+
+  ngOnInit(): void {}
+
+  beforeReq = (requestOptions: STRequestOptions) => {
+    Object.assign(requestOptions.body, { expressno: this.expressCode });
+    if (this.sf) {
+      Object.assign(requestOptions.body, {
+        ...this.sf.value,
+        createTime: {
+          start: this.sf.value.createTime?.[0] || null,
+          end: this.sf.value.createTime?.[1] || null
+        }
+      });
+    }
+    return requestOptions;
+  };
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+  }
+}

src/app/routes/ticket-management/components/express-info/express-info.component.ts

@@ -3,6 +3,7 @@ import { STComponent, STColumn, STChange, STRequestOptions } from '@delon/abc/st
 import { SFComponent, SFDateWidgetSchema, SFSchema } from '@delon/form';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { TicketService } from '../../services/ticket.service';
+import { ExpressDetailModalComponent } from './express-detail-modal/express-detail-modal.component';
 
 @Component({
   selector: 'app-express-info',
@@ -42,7 +43,14 @@ export class ExpressInfoComponent implements OnInit {
     { title: '快递单号', index: 'expressCode', width: 150 },
     { title: '快递公司', index: 'expresscompany', width: 120 },
     { title: '快递费用', index: 'description', width: 120 },
-    { title: '发票数量', index: 'quantity', width: 120 },
+    {
+      title: '发票数量',
+      index: 'quantity',
+      width: 120,
+      type: 'link',
+      click: (record: any) => this.showDetail(record.expressCode),
+      className: 'text-right'
+    },
     { title: '寄件人姓名', index: 'sname', width: 150 },
     { title: '寄件人电话', index: 'stel', width: 150 },
     {
@@ -99,6 +107,25 @@ export class ExpressInfoComponent implements OnInit {
     }
   }
 
+  showDetail(expressCode: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '发票明细',
+      nzContent: ExpressDetailModalComponent,
+      nzNoAnimation: true,
+      nzWidth: 1100,
+      nzComponentParams: { expressCode },
+      nzOnOk: com => {
+        console.log(com.selectedData);
+      },
+      nzOkText: '导出'
+    });
+    modal.afterClose.subscribe(res => {
+      if (res) {
+        this.st.load();
+      }
+    });
+  }
+
   printOrder() {
     if (this.selectedRows?.length <= 0) {
       this.service.msgSrv.warning('请选择快递单');