edit

src/app/routes/financial-management/components/withdrawals-record/withdrawals-detail/withdrawals-detail.component.html

@@ -54,10 +54,39 @@
         </se>
     </div>
 
-    <nz-alert nzType="info" nzMessage="提现进度" class="mb-md mt-md"></nz-alert>
+    <nz-tabset class="mt-md">
+        <nz-tab nzTitle="提现明细" *ngIf="accountType === '2'">
+            <div nz-row nzGutter="8">
+                <div nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
+                    <sf #sf [schema]="inputSearchSchema"
+                        [ui]="{ '*': { spanLabelFixed: 110,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}" [compact]="true"
+                        [button]="'none'"></sf>
+                </div>
+                <div nz-col [nzXl]="_$expand ? 24 : 6" [nzLg]="24" [nzSm]="24" [nzXs]="24"
+                    class="text-right">
+                    <button nz-button nzType="primary" [nzLoading]="false" (click)="inputST?.load(1)">查询</button>
+                    <button nz-button (click)="resetInputSF()">重置</button>
+                    <button nz-button> 导出</button>
+                    <button nz-button nzType="link" (click)="expandToggle()">
+                        {{ !_$expand ? '展开' : '收起' }}
+                        <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
+                    </button>
+                </div>
+            </div>
+            <st #inputST [data]="service.$api_get_advance_collection_detail" [columns]="columns"
+                [page]="{ show: false }" [req]="{  process: beforeReq }" [res]="{ reName: { list: 'data' } }"
+                [loading]="false" [scroll]="{ x: '1200px', y: '370px' }" class="mt-md">
+                <ng-template st-row="no" let-item let-index="index" let-column="column">
+                    {{index+1}}
+                </ng-template>
+            </st>
+        </nz-tab>
+        <nz-tab nzTitle="提现进度">
             <div nz-row class="mt-xl">
                 <div nz-col nzSpan="12" nzOffset="1">
                     <app-logistics-time-line [data]="timeLineData"></app-logistics-time-line>
                 </div>
             </div>
+        </nz-tab>
+    </nz-tabset>
 </nz-card>

src/app/routes/financial-management/components/withdrawals-record/withdrawals-detail/withdrawals-detail.component.less

@@ -5,13 +5,19 @@
         border          : 1px solid #dbdbdb;
 
         .ant-alert-message {
-            color: rgba(0, 0, 0, 0.85);
+            color      : rgba(0, 0, 0, 0.85);
             font-weight: 600;
-            font-size: 16px;
+            font-size  : 16px;
         }
     }
 
     .ant-form-item {
         margin-bottom: 15px;
     }
+
+    nz-tabs-nav {
+        background-color: #f3f3f3;
+        border          : 1px solid #dbdbdb;
+        padding-left    : 18px;
+    }
 }

src/app/routes/financial-management/components/withdrawals-record/withdrawals-detail/withdrawals-detail.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { STColumn, STRequestOptions } from '@delon/abc/st';
+import { SFComponent, SFSchema } from '@delon/form';
 import { FreightAccountService } from '../../../services/freight-account.service';
 
 @Component({
@@ -8,17 +10,37 @@ import { FreightAccountService } from '../../../services/freight-account.service
   styleUrls: ['./withdrawals-detail.component.less']
 })
 export class WithdrawalsDetailComponent implements OnInit {
+  @ViewChild('st', { static: true })
+  st!: Component;
+  @ViewChild('sf', { static: false })
+  inputSF!: SFComponent;
+  columns: STColumn[] = this.initST();
+  inputSearchSchema: SFSchema = this.initInputSF();
+  _$expand = false;
+
   formData: any = {};
 
   timeLineData: any = [];
 
+  accountType = '1';
+
   constructor(public service: FreightAccountService, private route: ActivatedRoute) {
     const id = route.snapshot.params.id;
+    this.accountType = route.snapshot.queryParams.type;
     this.loadRefundDetail(id);
   }
 
   ngOnInit(): void {}
 
+  beforeReq = (requestOptions: STRequestOptions) => {
+    if (this.inputSF.value) {
+      Object.assign(requestOptions.body, {
+        ...this.inputSF.value
+      });
+    }
+    return requestOptions;
+  };
+
   loadRefundDetail(id: string) {
     this.service.request(this.service.$api_get_refund_detail, { id }).subscribe(res => {
       if (res) {
@@ -80,7 +102,131 @@ export class WithdrawalsDetailComponent implements OnInit {
     });
   }
 
+  /**
+   * 重置表单
+   */
+  resetInputSF() {
+    this.inputSF.reset();
+  }
+
+  /**
+   * 伸缩查询条件
+   */
+  expandToggle() {
+    this._$expand = !this._$expand;
+    this.inputSF?.setValue('/expand', this._$expand);
+  }
+
   goBack() {
     history.go(-1);
   }
+
+  private initInputSF(): SFSchema {
+    return {
+      properties: {
+        expand: {
+          type: 'boolean',
+          ui: {
+            hidden: true
+          }
+        },
+        billHCode: {
+          type: 'string',
+          title: '支付编号',
+          ui: {
+            placeholder: '请输入'
+          }
+        },
+        billHCod1e: {
+          type: 'string',
+          title: '订单号',
+          ui: {
+            placeholder: '请输入'
+          }
+        },
+        billHCo1de: {
+          type: 'string',
+          title: '货源编号',
+          ui: {
+            placeholder: '请输入'
+          }
+        },
+        billHC1ode: {
+          type: 'string',
+          title: '服务类型',
+          ui: {
+            widget: 'select',
+            placeholder: '请选择',
+            visibleIf: {
+              expand: (value: boolean) => value
+            }
+          }
+        },
+        billHCo11de: {
+          type: 'string',
+          title: '承运司机',
+          ui: {
+            placeholder: '请输入司机姓名/手机号',
+            visibleIf: {
+              expand: (value: boolean) => value
+            }
+          }
+        },
+        billHCo111de: {
+          type: 'string',
+          title: '车牌号',
+          ui: {
+            placeholder: '请输入',
+            visibleIf: {
+              expand: (value: boolean) => value
+            }
+          }
+        },
+        billHC1o11de: {
+          type: 'string',
+          title: '收款人',
+          ui: {
+            placeholder: '请输入收款人姓名/手机号',
+            visibleIf: {
+              expand: (value: boolean) => value
+            }
+          }
+        },
+        billHC1o111de: {
+          type: 'string',
+          title: '车队长收款',
+          ui: {
+            widget: 'select',
+            placeholder: '请选择',
+            visibleIf: {
+              expand: (value: boolean) => value
+            }
+          }
+        }
+      }
+    };
+  }
+
+  private initST(): STColumn[] {
+    return [
+      { title: '支付编号', index: 'brmHCode', className: 'text-left', width: 200 },
+      {
+        title: '支付金额',
+        index: 'yskmoney',
+        type: 'widget',
+        className: 'text-right',
+        widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yskmoney }) },
+        width: 140
+      },
+      { title: '运费明细', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '货主', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '订单号', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '运单号', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '货源编号', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '服务类型', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '承运司机', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '收款人', index: 'billHId', className: 'text-center', width: 150 },
+      { title: '银行类型', index: 'billHId', className: 'text-center', width: 150 }
+    ];
+  }
 }

src/app/routes/financial-management/components/withdrawals-record/withdrawals-record.component.ts

@@ -28,9 +28,9 @@ export class WithdrawalsRecordComponent {
   refundStatus: any = '';
 
   msg = '';
-  constructor(public service: FreightAccountService, private nzModalService: NzModalService, private router: Router) { }
+  constructor(public service: FreightAccountService, private nzModalService: NzModalService, private router: Router) {}
 
-  ngOnInit(): void { }
+  ngOnInit(): void {}
 
   beforeReq = (requestOptions: STRequestOptions) => {
     if (this.sf) {
@@ -254,7 +254,7 @@ export class WithdrawalsRecordComponent {
       { title: '提现单号', index: 'refundApplyCode', width: 120 },
       { title: '网络货运人', index: 'ltdName', width: 140 },
       { title: '银行类型', index: 'bankTypeLabel', width: 100 },
-      { title: '账户类型', index: 'bankTypeLabel', width: 100 },
+      { title: '账户类型', index: 'accountType', width: 100 },
       { title: '账户名称', index: 'bankAccountName', width: 140 },
       { title: '虚拟账户', index: 'virtualAccount', width: 100 },
       {
@@ -276,6 +276,18 @@ export class WithdrawalsRecordComponent {
         width: '110px',
         className: 'text-center',
         buttons: [
+          {
+            text: '审核',
+            iif: item => item.refundStatus === '1',
+            click: item => this.auditAction(item)
+          },
+          {
+            text: '详情<br>',
+            click: item =>
+              this.router.navigate([`/financial-management/withdrawals-record/detail/${item.id}`], {
+                queryParams: { type: item.accountType }
+              })
+          },
           {
             text: '查看回单',
             iif: item => item.refundStatus === '3',
@@ -287,15 +299,6 @@ export class WithdrawalsRecordComponent {
                 bussType: '06',
                 ltdId: item.ltdId
               })
-          },
-          {
-            text: '审核',
-            iif: item => item.refundStatus === '1',
-            click: item => this.auditAction(item)
-          },
-          {
-            text: '详情',
-            click: item => this.router.navigate([`/financial-management/withdrawals-record/detail/${item.id}`])
           }
         ]
       }