edit

src/app/routes/ticket-management/components/input-invoice/add-cost-detail/add-cost-detail.component.html

@@ -0,0 +1,22 @@
+<div nz-row nzGutter="8">
+    <div nz-col nzSpan="24">
+        <sf #sf [schema]="searchSchema" [ui]="{ '*': {grid: { span: 12 } }}" [compact]="true" [button]="'none'"></sf>
+    </div>
+    <div nz-col [nzSpan]="24" class="text-right mb-md expend-options">
+        <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]="service.$mock_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] }" [loading]="service.http.loading"
+    [scroll]="{ x:'810px',y: '400px' }" (change)="stChange($event)" class="mt-sm">
+    <ng-template st-row="no" let-item let-index="index" let-column="column">
+        {{index+1}}
+    </ng-template>
+    <ng-template st-row="mo1bile" let-item let-index="index" let-column="column">
+        <input nz-input placeholder="请输入" [(ngModel)]="item.mo1bile" />
+    </ng-template>
+</st>

src/app/routes/ticket-management/components/input-invoice/add-cost-detail/add-cost-detail.component.less

@@ -0,0 +1,6 @@
+.expend-options {
+    max-width: 400px;
+    position : absolute;
+    right    : 20px;
+    top      : 160px;
+}

src/app/routes/ticket-management/components/input-invoice/add-cost-detail/add-cost-detail.component.ts

@@ -0,0 +1,110 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { STComponent, STColumn, STRequestOptions, STChange } from '@delon/abc/st';
+import { SFComponent, SFDateWidgetSchema, SFSchema } from '@delon/form';
+import { TicketService } from '../../../services/ticket.service';
+
+@Component({
+  selector: 'app-add-cost-detail',
+  templateUrl: './add-cost-detail.component.html',
+  styleUrls: ['./add-cost-detail.component.less']
+})
+export class AddCostDetailComponent implements OnInit {
+  selectedData: any[] = [];
+  @ViewChild('st', { static: true })
+  st!: STComponent;
+  @ViewChild('sf', { static: false })
+  sf!: SFComponent;
+  columns: STColumn[] = this.initST();
+  searchSchema: SFSchema = this.initSF();
+
+  constructor(public service: TicketService) {}
+
+  ngOnInit(): void {}
+
+  beforeReq = (requestOptions: STRequestOptions) => {
+    if (this.sf) {
+      Object.assign(requestOptions.body, {
+        ...this.sf.value
+      });
+    }
+    return requestOptions;
+  };
+
+  stChange(e: STChange): void {
+    switch (e.type) {
+      case 'checkbox':
+        this.selectedData = e.checkbox!;
+        break;
+    }
+  }
+
+  /**
+   * 重置表单
+   */
+  resetSF() {
+    this.sf.reset();
+  }
+
+  private initSF(): SFSchema {
+    return {
+      properties: {
+        enterpriseName: {
+          title: '费用单号',
+          type: 'string',
+          ui: {
+            placeholder: '请输入'
+          }
+        },
+        enterprise2Name: {
+          title: '订单号',
+          type: 'string',
+          ui: {
+            placeholder: '请输入'
+          }
+        },
+        contactName: {
+          title: '费用日期',
+          type: 'string',
+          ui: {
+            widget: 'sl-from-to-search',
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
+        },
+        contac2tName: {
+          title: '订单日期',
+          type: 'string',
+          ui: {
+            widget: 'sl-from-to-search',
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
+        },
+        mobile: {
+          type: 'string',
+          title: '结算客户',
+          ui: {
+            widget: 'dict-select',
+            params: { dictKey: 'refund:apply:status' },
+            placeholder: '请选择'
+          }
+        }
+      }
+    };
+  }
+
+  private initST(): STColumn[] {
+    return [
+      { title: '', index: 'key', type: 'checkbox', width: 60 },
+      { title: '序号', render: 'no', width: 60 },
+      { title: '费用号', index: 'enterpriseName', width: 120 },
+      { title: '费用日期', index: 'contacter', width: 120 },
+      { title: '订单号', index: 'mobile', width: 120 },
+      { title: '订单日期', index: 'mobile', width: 120 },
+      { title: '结算客户', index: 'mobile', width: 120 },
+      { title: '费用科目', index: 'mobile', width: 120 },
+      { title: '费用金额', index: 'mobile', width: 120 },
+      { title: '已收金额', index: 'mobile', width: 120 },
+      { title: '未收金额', index: 'mobile', width: 120 },
+      { title: '收票金额', render: 'mo1bile', width: 150, fixed: 'right' }
+    ];
+  }
+}

src/app/routes/ticket-management/components/input-invoice/edit-collection-invoice/edit-collection-invoice.component.html

@@ -20,7 +20,8 @@
     </div>
 </nz-card>
 
-<nz-card class="search-box" nzBordered>
+<nz-card class="search-box" nzBordered nzTitle="费用信息">
+    <nz-card class="search-box">
         <div nz-row nzGutter="8">
             <div nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
                 <sf #searchSf [schema]="searchSchema"
@@ -37,3 +38,18 @@
             </div>
         </div>
     </nz-card>
+
+    <nz-card class="content-box">
+        <div class="d-flex align-items-center mb-md mt-sm">
+            <button nz-button nzType="primary" (click)="addCostDetailAction()">添 加</button>
+            <button nz-button nzType="primary">删 除</button>
+        </div>
+
+        <st #st [data]="service.$api_get_invoice_requested_order_detail" [columns]="columns" size="small" bordered
+            [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]="{ x:'1200px',y: '200px' }" (change)="stChange($event)">
+        </st>
+    </nz-card>
+</nz-card>

src/app/routes/ticket-management/components/input-invoice/edit-collection-invoice/edit-collection-invoice.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { STComponent, STColumn } from '@delon/abc/st';
+import { STComponent, STColumn, STRequestOptions, STChange } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFDateWidgetSchema } from '@delon/form';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { TicketService } from '../../../services/ticket.service';
+import { AddCostDetailComponent } from '../add-cost-detail/add-cost-detail.component';
 
 @Component({
   selector: 'app-edit-collection-invoice',
@@ -28,6 +29,38 @@ export class EditCollectionInvoiceComponent implements OnInit {
 
   ngOnInit(): void {}
 
+  beforeReq = (requestOptions: STRequestOptions) => {
+    if (this.searchSf) {
+      Object.assign(requestOptions.body, { ...this.searchSf.value });
+    }
+    return requestOptions;
+  };
+
+  stChange(e: STChange): void {
+    switch (e.type) {
+      case 'checkbox':
+        this.selectedRows = e.checkbox!;
+        break;
+    }
+  }
+
+  addCostDetailAction() {
+    const modal = this.nzModalService.create({
+      nzTitle: '添加核销明细',
+      nzContent: AddCostDetailComponent,
+      nzWidth: 850,
+      nzOkText: '保存',
+      nzOnOk: com => {
+        return false;
+      }
+    });
+    modal.afterClose.subscribe(res => {
+      if (res) {
+        this.st.load();
+      }
+    });
+  }
+
   goBack() {
     history.go(-1);
   }
@@ -161,17 +194,16 @@ export class EditCollectionInvoiceComponent implements OnInit {
   private initST(): STColumn[] {
     return [
       { title: '', index: 'key', type: 'checkbox' },
-      { title: '收票单号', index: 'no', type: 'link' },
+      { title: '序号', index: 'no', type: 'link' },
-      { title: '网络货运人', index: 'no' },
+      { title: '费用号', index: 'no' },
-      { title: '发票日期', index: 'no', type: 'date' },
+      { title: '费用日期', index: 'no', type: 'date' },
-      { title: '发票号', index: 'callNo' },
+      { title: '订单号', index: 'callNo' },
-      { title: '发票金额', index: 'callNo' },
+      { title: '订单日期', index: 'callNo' },
-      { title: '税额', render: 'call1No' },
+      { title: '结算客户', render: 'call1No' },
-      { title: '发票类型', render: 'call1N2o' },
+      { title: '费用科目', render: 'call1N2o' },
-      { title: '销售方', index: 'callNo' },
+      { title: '费用金额', index: 'callNo' },
-      { title: '创建时间', index: 'updatedAt', type: 'date' },
+      { title: '收票金额', index: 'updatedAt', type: 'date' },
-      { title: '创建人', index: 'updatedAt' },
+      { title: '收票税额', index: 'updatedAt' }
-      { title: '收票状态', index: 'updatedAt' }
     ];
   }
 }

src/app/routes/ticket-management/ticket-management.module.ts

@@ -21,6 +21,7 @@ import { InputInvoiceComponent } from './components/input-invoice/input-invoice.
 import { InputInvoiceDetailComponent } from './components/input-invoice/input-invoice-detail/input-invoice-detail.component';
 import { AddCollectionInvoiceModalComponent } from './components/input-invoice/add-collection-invoice-modal/add-collection-invoice-modal.component';
 import { EditCollectionInvoiceComponent } from './components/input-invoice/edit-collection-invoice/edit-collection-invoice.component';
+import { AddCostDetailComponent } from './components/input-invoice/add-cost-detail/add-cost-detail.component';
 
 const COMPONENTS: any = [
   ETCInvoicedListComponent,
@@ -43,7 +44,8 @@ const NOTROUTECOMPONENTS: any = [
   RequestedDetailComponent,
   AddOwnerComponent,
   AddCartComponent,
-  AddCollectionInvoiceModalComponent
+  AddCollectionInvoiceModalComponent,
+  AddCostDetailComponent
 ];
 @NgModule({
   declarations: [...COMPONENTS, ...NOTROUTECOMPONENTS],