edit

src/app/layout/layout.module.ts

@@ -27,6 +27,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { LayoutPassportComponent } from './passport/passport.component';
 import { PRO_COMPONENTS } from './pro/index';
+import { SearchDrawerModule } from '../shared/components/search-drawer/search-drawer.module';
 
 const COMPONENTS: Array<Type<any>> = [...PRO_COMPONENTS, LayoutPassportComponent];
 
@@ -57,7 +58,8 @@ const COMPONENTS: Array<Type<any>> = [...PRO_COMPONENTS, LayoutPassportComponent
     ThemeBtnModule,
     ScrollbarModule,
     NzGridModule,
-    NzMessageModule
+    NzMessageModule,
+    SearchDrawerModule
   ],
   declarations: COMPONENTS,
   exports: COMPONENTS

src/app/layout/pro/pro.component.html

@@ -38,3 +38,4 @@
 </div>
 <ng-template #settingHost></ng-template>
 <theme-btn></theme-btn>
+<app-search-drawer></app-search-drawer>

src/app/routes/commom/components/basic-table/basic-table.component.ts

@@ -1,14 +1,21 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
-import { fromEvent } from 'rxjs';
+import { SFComponent, SFSchema } from '@delon/form';
+import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { SearchDrawerService } from 'src/app/shared/components/search-drawer/search-drawer.service';
 
 @Component({
   template: ''
 })
-export class BasicTableComponent implements AfterViewInit {
+export class BasicTableComponent implements AfterViewInit, OnDestroy {
   scrollY = '400px';
 
-  constructor() {}
+  sf!: SFComponent;
+  sfValue: Record<string, any> = {};
+  drawer: Subscription[] = [];
+  schema: SFSchema = {};
+
+  constructor(public searchDrawerService: SearchDrawerService) {}
 
   ngAfterViewInit(): void {
     setTimeout(() => {
@@ -21,6 +28,33 @@ export class BasicTableComponent implements AfterViewInit {
       });
   }
 
+  ngOnDestroy(): void {
+    this.drawer.forEach(sub => sub.unsubscribe());
+  }
+
+  openDrawer() {
+    if (this.drawer?.length > 0) {
+      this.searchDrawerService.create(this.sfValue, this.schema);
+    } else {
+      const drawer = this.searchDrawerService.create(this.sfValue, this.schema);
+      this.drawer.push(
+        drawer.initEvent.subscribe(sf => {
+          if (sf) {
+            this.sf = sf;
+          }
+        })
+      );
+      this.drawer.push(
+        drawer.closeEvent.subscribe(res => {
+          this.sfValue = res;
+          if (res) {
+            this.search();
+          }
+        })
+      );
+    }
+  }
+
   getScrollY() {
     const windowHeight = window.innerHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight);
     const header = document.getElementsByTagName('layout-pro-header')?.[0];
@@ -37,4 +71,6 @@ export class BasicTableComponent implements AfterViewInit {
       this.scrollY = scrollY + 'px';
     }
   }
+
+  search() {}
 }

src/app/routes/commom/less/commom-table.less

@@ -9,7 +9,7 @@
     }
 
     .ant-tabs-tab {
-      margin: 0 0 0 16px;
+      margin : 0 0 0 16px;
       padding: 12px 0;
     }
 
@@ -21,31 +21,51 @@
       .ant-card-body {
         padding: 0;
       }
+
+      .tab_header {
+        display    : flex;
+        align-items: center;
+
+        .page_title {
+          font-weight: bold;
+          font-size  : 17px;
+
+          .driver {
+            color       : #ff4d4f;
+            margin-left : 17px;
+            margin-right: 6px;
+          }
+        }
+
+        nz-tabset {
+          flex: 1;
+        }
+      }
     }
 
     .ant-table-pagination.ant-pagination {
       margin: 8px;
     }
 
-    .ant-table-thead > tr > th,
+    .ant-table-thead>tr>th,
-    .ant-table-tbody > tr > td,
+    .ant-table-tbody>tr>td,
-    .ant-table tfoot > tr > th,
+    .ant-table tfoot>tr>th,
-    .ant-table tfoot > tr > td {
+    .ant-table tfoot>tr>td {
       padding: 8px;
     }
 
-    .ant-table.ant-table-bordered > .ant-table-container {
+    .ant-table.ant-table-bordered>.ant-table-container {
       border-top: 0;
     }
 
     .ant-pagination-item {
-      min-width: 24px;
+      min-width  : 24px;
-      height: 24px;
+      height     : 24px;
       line-height: 21px;
     }
 
     .ant-pagination-total-text {
-      height: 24px;
+      height     : 24px;
       line-height: 24px;
     }
 
@@ -53,8 +73,8 @@
     .ant-pagination-next,
     .ant-pagination-jump-prev,
     .ant-pagination-jump-next {
-      min-width: 24px;
+      min-width  : 24px;
-      height: 24px;
+      height     : 24px;
       line-height: 21px;
     }
 

src/app/routes/order-management/components/bulk/bulk.component.html

@@ -9,32 +9,14 @@
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 <!-- 搜索表单 -->
-<page-header-wrapper [title]="''"> </page-header-wrapper>
+<!-- <nz-card>
-<nz-card>
   <div nz-row nzGutter="8">
-    <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
-    <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
-      <sf
-        #sf
-        [schema]="schema"
-        [ui]="ui"
-        [mode]="'search'"
-        [disabled]="!sf?.valid"
-        [loading]="false"
-        (formSubmit)="st?.load(1)"
-        (formReset)="resetSF()"
-      ></sf>
-    </div>
-
-    <!-- 查询字段大于3个时，根据展开状态调整布局 -->
-    <ng-container *ngIf="queryFieldCount > 4">
       <div nz-col [nzSpan]="_$expand ? 24 : 18">
         <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
       </div>
       <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
-        <button nz-button nzType="primary" [nzLoading]="loading" (click)="search()" acl [acl-ability]="['ORDER-BULK-search']"
+        <button nz-button nzType="primary" [nzLoading]="loading" (click)="openDrawer()" acl
-          >查询</button
+          [acl-ability]="['ORDER-BULK-search']">筛选</button>
-        >
         <button nz-button nzType="primary" [disabled]="loading" (click)="exprot()">导出</button>
         <button nz-button [disabled]="loading" (click)="resetSF()">重置</button>
         <button nz-button nzType="link" (click)="expandToggle()">
@@ -42,32 +24,30 @@
           <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
         </button>
       </div>
-    </ng-container>
   </div>
-</nz-card>
+</nz-card> -->
 
-<nz-card>
+<nz-card class="table-box">
-  <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
+  <div class="tab_header">
-    <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
+    <label class="page_title">
-    <nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab>
+      <label class="driver">|</label>
-    <nz-tab [nzTitle]="'待发车(' + tabs?.stayQuantity + ')'"></nz-tab>
+      大宗订单</label>
-    <nz-tab [nzTitle]="'运输中(' + tabs?.GoingQuantity + ')'"></nz-tab>
+    <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
-    <nz-tab [nzTitle]="'待签收(' + tabs?.signQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
-    <nz-tab [nzTitle]="'已完成(' + tabs?.compolatelQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab>
-    <nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'待发车(' + tabs?.stayQuantity + ')'"></nz-tab>
-  </nz-tabset>
+      <nz-tab [nzTitle]="'运输中(' + tabs?.GoingQuantity + ')'"></nz-tab>
-  <div style="margin-top: 15px">
+      <nz-tab [nzTitle]="'待签收(' + tabs?.signQuantity + ')'"></nz-tab>
-    <st
+      <nz-tab [nzTitle]="'已完成(' + tabs?.compolatelQuantity + ')'"></nz-tab>
-      #st
+      <nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab>
-      [bordered]="true"
+    </nz-tabset>
-      [scroll]="{ x: '2000px' }"
+  </div>
-      [data]="service.$api_get_listBulkPage"
+
-      [columns]="columns"
+  <div>
-      [req]="{  process: beforeReq }"
+    <st #st [bordered]="true" [scroll]="{ x: '2000px',y:scrollY }" [data]="service.$api_get_listBulkPage"
+      [columns]="columns" [req]="{  process: beforeReq }"
       [res]="{ reName: { list: 'data.records', total: 'data.total' } , process: afterRes}"
-      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }" [loading]="false">
-      [loading]="false"
-    >
       <ng-template st-row="freightPrice" let-item let-index="index">
         {{ item.freightPrice | currency }}
       </ng-template>
@@ -76,16 +56,19 @@
         <div *ngIf="item?.unloadTime">卸 | {{ item?.unloadTime }}</div>
       </ng-template>
       <ng-template st-row="driverName" let-item let-index="index">
-        <div> {{ item?.driverName }}{{  item?.driverPhone ? "/" + item?.driverPhone : '' }}{{   item?.carNo ? "/" + item?.carNo : ''}} </div>
+        <div> {{ item?.driverName }}{{ item?.driverPhone ? "/" + item?.driverPhone : '' }}{{ item?.carNo ? "/" +
+          item?.carNo : ''}} </div>
       </ng-template>
       <ng-template st-row="settlementWeight" let-item let-index="index">
-        <div> {{   item.settlementWeight ?  item.settlementWeight  + '吨/ ': ''}} {{   item.settlementVolume ? item.settlementVolume  + '方 ': ''}}</div>
+        <div> {{ item.settlementWeight ? item.settlementWeight + '吨/ ': ''}} {{ item.settlementVolume ?
+          item.settlementVolume + '方 ': ''}}</div>
       </ng-template>
       <ng-template st-row="payeeName" let-item let-index="index">
-        <div *ngIf="item.payeeName !== item.driverName"> {{ item?.payeeName }}{{ item?.payeePhone ? "/" + item?.payeePhone : ''  }} </div>
+        <div *ngIf="item.payeeName !== item.driverName"> {{ item?.payeeName }}{{ item?.payeePhone ? "/" +
+          item?.payeePhone : '' }} </div>
       </ng-template>
       <ng-template st-row="createUserName" let-item let-index="index">
-        <div> {{ item?.createUserName }}{{  item?.createUserPhone ? "/" + item?.createUserPhone : '' }} </div>
+        <div> {{ item?.createUserName }}{{ item?.createUserPhone ? "/" + item?.createUserPhone : '' }} </div>
       </ng-template>
       <ng-template st-row="billCode" let-item let-index="index">
         <a [routerLink]="'bulk-detail/' + item.id">{{ item.billCode }}</a>
@@ -108,7 +91,8 @@
         <div *ngIf="item.mybidDetailInfo.length > 0">
           <p *ngFor="let data of item.mybidDetailInfo">
             <span *ngIf="data.expenseCode !== 'FL'">{{ data.expenseName }}：{{ data.price | currency }}</span>
-            <span *ngIf="data.expenseCode === 'FL'" >{{ data.expenseName }}：{{ (data.price * 100).toFixed(2) + '%' }}</span>
+            <span *ngIf="data.expenseCode === 'FL'">{{ data.expenseName }}：{{ (data.price * 100).toFixed(2) + '%'
+              }}</span>
             <span *ngIf="data.paymentStatusLabel" style="color: #f59a63">{{ data.paymentStatusLabel }}</span>
           </p>
         </div>
@@ -117,25 +101,13 @@
   </div>
 </nz-card>
 
-<nz-modal
+<nz-modal [(nzVisible)]="isVisible" [nzWidth]="600" [nzFooter]="nzModalFooter" nzTitle="运费变更记录" (nzOnOk)="handleOK()"
-  [(nzVisible)]="isVisible"
+  (nzOnCancel)="handleCancel('0')">
-  [nzWidth]="600"
-  [nzFooter]="nzModalFooter"
-  nzTitle="运费变更记录"
-  (nzOnOk)="handleOK()"
-  (nzOnCancel)="handleCancel('0')"
->
   <ng-container *nzModalContent>
-    <st
+    <st #stFloat size="small" [bordered]="true" [data]="service.$api_get_listChangeApply" [columns]="columnsFloat"
-      #stFloat
-      size="small"
-      [bordered]="true"
-      [data]="service.$api_get_listChangeApply"
-      [columns]="columnsFloat"
       [req]="{  process: beforeReq }"
       [res]="{ reName: { list: 'data.records', total: 'data.total' } , process: afterRes}"
-      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
+      [page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }">
-    >
       <ng-template st-row="order" let-item let-index="index">
         {{ index + 1 }}
       </ng-template>
@@ -155,14 +127,8 @@
   </ng-template>
 </nz-modal>
 
-<nz-modal
+<nz-modal [(nzVisible)]="isVisibleView" [nzWidth]="600" [nzFooter]="nzModalFooterview" nzTitle="查看"
-  [(nzVisible)]="isVisibleView"
+  (nzOnOk)="handleOK()" (nzOnCancel)="handleCancel('1')">
-  [nzWidth]="600"
-  [nzFooter]="nzModalFooterview"
-  nzTitle="查看"
-  (nzOnOk)="handleOK()"
-  (nzOnCancel)="handleCancel('1')"
->
   <ng-container *nzModalContent>
     <sf #sfView [schema]="schemaView" [ui]="uiView" [formData]="ViewCause" [compact]="true" [button]="'none'">
       <ng-template sf-template="no" let-me let-ui="uiView" let-schema="schemaView">
@@ -172,30 +138,21 @@
         </div>
       </ng-template>
     </sf>
-    <st
+    <st #stFloatView multiSort size="small" [bordered]="true" [data]="service.$api_getChangeRecordBulkDetail"
-      #stFloatView
-      multiSort
-      size="small"
-      [bordered]="true"
-      [data]="service.$api_getChangeRecordBulkDetail"
       [columns]="columnsFloatView"
       [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: changeViewParams }"
-      [res]="{ reName: { list: 'data.list', total: 'data.total' } }"
+      [res]="{ reName: { list: 'data.list', total: 'data.total' } }">
-    >
       <ng-template st-row="amountBeforeChange" let-item let-index="index">
         {{ item.amountBeforeChange | currency }}
       </ng-template>
-      <ng-template st-row="amountchangeValue" let-item let-index="index"> ￥{{ item.amountchangeValue | number: '0.2-2' }} </ng-template>
+      <ng-template st-row="amountchangeValue" let-item let-index="index"> ￥{{ item.amountchangeValue | number: '0.2-2'
+        }} </ng-template>
       <ng-template st-row="amountAfterChange" let-item let-index="index">
         {{ item.amountAfterChange | currency }}
       </ng-template>
     </st>
-    <div
+    <div><span>变更原因：{{ ViewCause?.changeCause }}</span></div>
-      ><span>变更原因：{{ ViewCause?.changeCause }}</span></div
+    <div><span>拒绝原因：{{ ViewCause?.refuseCause }}</span></div>
-    >
-    <div
-      ><span>拒绝原因：{{ ViewCause?.refuseCause }}</span></div
-    >
     <div><span>注：附加费依据调整后的运输费用重新计算</span></div>
   </ng-container>
   <ng-template #nzModalFooterview>
@@ -204,13 +161,8 @@
   </ng-template>
 </nz-modal>
 
-<nz-modal
+<nz-modal [(nzVisible)]="isVisibleEvaluate" [nzWidth]="600" [nzFooter]="nzModalFooterEvaluate" (nzOnOk)="handleOK()"
-  [(nzVisible)]="isVisibleEvaluate"
+  (nzOnCancel)="handleCancel('2')">
-  [nzWidth]="600"
-  [nzFooter]="nzModalFooterEvaluate"
-  (nzOnOk)="handleOK()"
-  (nzOnCancel)="handleCancel('2')"
->
   <ng-container *nzModalContent>
     <nz-tabset>
       <nz-tab nzTitle="货主评价">
@@ -239,25 +191,20 @@
 <ng-template #enable>
   <div class="ant-popover-message">
     <i nz-icon nzType="info-circle" nzTheme="fill"></i>
-    <div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px"
+    <div class="ant-popover-message-title ng-star-inserted self-ant-popover-title" style="font-size: 16px">已选择{{
-      >已选择{{ selectedRows?.length || 0 }}条订单，确认批量签收吗？
+      selectedRows?.length || 0 }}条订单，确认批量签收吗？
     </div>
     <div class="ant-popover-message-title ng-star-inserted"> 签收后不可再修改运费，请确保运费等信息准确无误后，再进行签收。 </div>
   </div>
 </ng-template>
 <ng-template #extraTemplate>
-  <div *ngIf="resourceStatus == 4">
+  <div class="mr-sm">
-    <button
+    <button nz-button nzDanger [nzLoading]="loading" (click)="openDrawer()" acl
-      nz-button
+      [acl-ability]="['ORDER-BULK-search']">筛选</button>
-      nzType="primary"
+    <button nz-button nzDanger [disabled]="loading" (click)="exprot()">导出</button>
-      nzGhost
+    <button *ngIf="resourceStatus == 4" nz-button nzType="primary" nzGhost nz-popconfirm [nzPopconfirmTitle]="enable"
-      nz-popconfirm
+      (nzOnConfirm)="userAction()" nzPopconfirmPlacement="bottomRight" acl
-      [nzPopconfirmTitle]="enable"
+      [acl-ability]="['ORDER-BULK-batchSignBulkOrder']">
-      (nzOnConfirm)="userAction()"
-      nzPopconfirmPlacement="bottomRight"
-      acl
-      [acl-ability]="['ORDER-BULK-batchSignBulkOrder']"
-    >
       批量签收
     </button>
   </div>

src/app/routes/order-management/components/bulk/bulk.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { STColumn, STComponent, STRequestOptions } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFSchemaEnum, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
 import { ModalHelper, _HttpClient } from '@delon/theme';
@@ -7,20 +7,20 @@ import { map } from 'rxjs/operators';
 import { OrderManagementService } from '../../services/order-management.service';
 import { UpdateFreightComponent } from '../../modal/bulk/update-freight/update-freight.component';
 import { ConfirReceiptComponent } from '../../modal/bulk/confir-receipt/confir-receipt.component';
-import { of } from 'rxjs';
+import { of, Subscription } from 'rxjs';
 import { ShipperBaseService } from '@shared';
 import { Router, ActivatedRoute } from '@angular/router';
 import { OneCarOrderCancelConfirmComponent } from '../../modal/vehicle/cancel-confirm/cancel-confirm.component';
+import { SearchDrawerService } from 'src/app/shared/components/search-drawer/search-drawer.service';
+import { BasicTableComponent } from 'src/app/routes/commom/components/basic-table/basic-table.component';
 
 @Component({
   selector: 'app-supply-management-bulk',
   templateUrl: './bulk.component.html',
-  styleUrls: ['./bulk.component.less']
+  styleUrls: ['../../../commom/less/commom-table.less','./bulk.component.less']
 })
-export class OrderManagementBulkComponent implements OnInit {
+export class OrderManagementBulkComponent extends BasicTableComponent implements OnInit {
-  ui: SFUISchema = {};
   uiView: SFUISchema = {};
-  schema: SFSchema = {};
   schemaView: SFSchema = {};
   auditMany = false;
   isVisibleView = false;
@@ -54,13 +54,17 @@ export class OrderManagementBulkComponent implements OnInit {
     GoingQuantity: 0,
     totalCount: 0
   };
+
   constructor(
     public service: OrderManagementService,
     private modal: NzModalService,
     public shipperservice: ShipperBaseService,
     private router: Router,
     private ar: ActivatedRoute,
-  ) { }
+    public searchDrawerService: SearchDrawerService
+  ) {
+    super(searchDrawerService);
+  }
 
   /**
    * 查询参数
@@ -70,14 +74,14 @@ export class OrderManagementBulkComponent implements OnInit {
     if (this.resourceStatus) {
       a.billStatus = this.resourceStatus;
     }
-    const params: any = Object.assign({}, this.sf?.value || {});
+    const params: any = Object.assign({}, this.sfValue || {});
     delete params._$expand;
     return {
       ...a,
       ...params,
       createTime: {
-        start: this.sf?.value?.createTime?.[0] || '',
+        start: this.sfValue?.createTime?.[0] || '',
-        end: this.sf?.value?.createTime?.[1] || ''
+        end: this.sfValue?.createTime?.[1] || ''
       }
     };
   }
@@ -86,17 +90,17 @@ export class OrderManagementBulkComponent implements OnInit {
     if (this.resourceStatus) {
       a.billStatus = this.resourceStatus;
     }
-    const params: any = Object.assign({}, this.sf?.value || {});
+    const params: any = Object.assign({}, this.sfValue || {});
     delete params._$expand;
     console.log(params);
 
-    if (this.sf) {
+    if (this.sfValue) {
       Object.assign(requestOptions.body, {
         ...a,
         ...params,
         createTime: {
-          start: this.sf?.value?.createTime?.[0] || '',
+          start: this.sfValue?.createTime?.[0] || '',
-          end: this.sf?.value?.createTime?.[1] || ''
+          end: this.sfValue?.createTime?.[1] || ''
         }
       });
     }
@@ -104,8 +108,8 @@ export class OrderManagementBulkComponent implements OnInit {
     return requestOptions;
   };
   afterRes = (data: any[], rawData?: any) => {
-    console.log(data)
+    console.log(data);
-    this.loading = false
+    this.loading = false;
     return data.map(item => ({
       ...item,
       disabled: item.billStatus !== '4'
@@ -119,6 +123,7 @@ export class OrderManagementBulkComponent implements OnInit {
       id: this.changeId
     };
   }
+
   search() {
     this.st?.load();
     this.getGoodsSourceStatistical();
@@ -185,14 +190,14 @@ export class OrderManagementBulkComponent implements OnInit {
           type: 'string',
           title: '订单号',
           ui: {
-            placeholder: '最多100个单号，空号隔开',
+            placeholder: '最多100个单号，空号隔开'
           }
         },
         wayBillCode: {
           type: 'string',
           title: '运单号',
           ui: {
-            placeholder: '最多100个单号，空号隔开',
+            placeholder: '最多100个单号，空号隔开'
           }
         },
         resourceCode: {
@@ -208,11 +213,8 @@ export class OrderManagementBulkComponent implements OnInit {
             searchDebounceTime: 300,
             searchLoadingText: '搜索中...',
             allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            },
             onSearch: (q: any) => {
-              let str = q.replace(/^\s+|\s+$/g, "");
+              let str = q.replace(/^\s+|\s+$/g, '');
               if (str) {
                 return this.service
                   .request(this.service.$api_enterpriceList, { enterpriseName: str })
@@ -233,55 +235,27 @@ export class OrderManagementBulkComponent implements OnInit {
           ui: {
             widget: 'select',
             placeholder: '请先选择货主',
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            },
           } as SFSelectWidgetSchema
         },
         loadingPlace: {
           type: 'string',
           title: '装货地',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
         },
         dischargePlace: {
           type: 'string',
           title: '卸货地',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
         },
         driverName: {
           title: '承运司机',
           type: 'string',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
         },
         carNo: {
           title: '车牌号',
           type: 'string',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
         },
         carCaptainName: {
           title: '车队长',
           type: 'string',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
         },
         paymentStatus: {
           title: '支付状态',
@@ -290,9 +264,6 @@ export class OrderManagementBulkComponent implements OnInit {
             widget: 'dict-select',
             params: { dictKey: 'overall:payment:status' },
             containsAllLabel: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
           } as SFSelectWidgetSchema
         },
         createTime: {
@@ -303,9 +274,6 @@ export class OrderManagementBulkComponent implements OnInit {
             mode: 'range',
             format: 'yyyy-MM-dd',
             allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
           } as SFDateWidgetSchema
         },
         riskStatus: {
@@ -319,9 +287,6 @@ export class OrderManagementBulkComponent implements OnInit {
           ui: {
             widget: 'select',
             placeholder: '请选择',
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
           }
         },
         enterpriseInfoName: {
@@ -331,9 +296,6 @@ export class OrderManagementBulkComponent implements OnInit {
             widget: 'select',
             placeholder: '请选择',
             allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            },
             asyncData: () => this.shipperservice.getNetworkEnterpriseName()
           }
         },
@@ -345,9 +307,6 @@ export class OrderManagementBulkComponent implements OnInit {
             widget: 'dict-select',
             params: { dictKey: 'service:type' },
             containsAllLabel: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
           } as SFSelectWidgetSchema
         },
         settlementBasis: {
@@ -358,15 +317,11 @@ export class OrderManagementBulkComponent implements OnInit {
             containsAllLabel: true,
             params: { dictKey: 'goodresource:settlement:type' },
             containAllLable: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
           } as SFSelectWidgetSchema
         }
       },
       type: 'object'
     };
-    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
   }
   /**
    * 初始化查询表单
@@ -493,7 +448,7 @@ export class OrderManagementBulkComponent implements OnInit {
         title: '结算数量',
         render: 'settlementWeight',
         width: '170px',
-        className: 'text-left',
+        className: 'text-left'
         // format: (item: any) =>
         //   `${item.settlementWeight || '0'}吨/
         //    ${item.settlementVolume || '0'}方`
@@ -509,7 +464,7 @@ export class OrderManagementBulkComponent implements OnInit {
         title: '车队长',
         className: 'text-left',
         width: '180px',
-        render: 'payeeName',
+        render: 'payeeName'
       },
       {
         title: '装卸货时间',
@@ -533,27 +488,31 @@ export class OrderManagementBulkComponent implements OnInit {
         title: '操作',
         fixed: 'right',
         width: '130px',
-        className: 'text-left block-td',
+        className: 'text-center block-td',
         buttons: [
           {
             text: '运费变更记录',
             click: _record => this.OpenPrice(_record),
             iif: item =>
-              item.billStatus == '4' || item.billStatus == '5' || item.billStatus == '2' || item.billStatus == '3' || item.billStatus == '6',
+              item.billStatus == '4' ||
-            acl: { ability: ['ORDER-BULK-listChangeApply'] },
+              item.billStatus == '5' ||
+              item.billStatus == '2' ||
+              item.billStatus == '3' ||
+              item.billStatus == '6',
+            acl: { ability: ['ORDER-BULK-listChangeApply'] }
           },
           {
             text: '查看评价',
             click: _record => this.viewEvaluate(_record),
             iif: item => item.billStatus == '5',
-            acl: { ability: ['ORDER-BULK-evaluation'] },
+            acl: { ability: ['ORDER-BULK-evaluation'] }
           },
           {
             text: '查看详情',
             click: (item: any) => {
               this.router.navigate(['./bulk-detail', item.id], { relativeTo: this.ar });
             },
-            acl: { ability: ['USERCENTER-FREIGHT-USER-view'] },
+            acl: { ability: ['USERCENTER-FREIGHT-USER-view'] }
           },
           {
             text: '变更运费',
@@ -562,32 +521,36 @@ export class OrderManagementBulkComponent implements OnInit {
               const flag = _record.mybidDetailInfo.find((item: any) => item?.expenseCode === 'TRA' && item?.paymentStatus === '4');
               return _record.billStatus !== '1' && _record.billStatus !== '6' && !flag;
             },
-            acl: { ability: ['ORDER-BULK-FreightChangeBulkDetail'] },
+            acl: { ability: ['ORDER-BULK-FreightChangeBulkDetail'] }
           },
           {
             text: '确认签收',
             click: _record => this.confirmReceipt(_record),
             iif: item => item.billStatus == '4',
-            acl: { ability: ['VEHICLE-LIST-view'] },
+            acl: { ability: ['VEHICLE-LIST-view'] }
           },
           {
             text: '取消订单',
             click: _record => this.cancellation(_record),
             iif: item =>
-              item.billStatus == '4' || item.billStatus == '5' || item.billStatus == '2' || item.billStatus == '3' || item.billStatus == '1',
+              item.billStatus == '4' ||
-            acl: { ability: ['ORDER-BULK-signBulkOrder'] },
+              item.billStatus == '5' ||
+              item.billStatus == '2' ||
+              item.billStatus == '3' ||
+              item.billStatus == '1',
+            acl: { ability: ['ORDER-BULK-signBulkOrder'] }
           },
           {
             text: '申请退款',
-            click: (_record) => this.applyRefund(_record),
+            click: _record => this.applyRefund(_record),
             iif: item => item.isApplyForRefund,
-            acl: { ability: ['ORDER-VEHICLE-modificationOrder'] },
+            acl: { ability: ['ORDER-VEHICLE-modificationOrder'] }
           },
           {
             text: '修改订单',
             click: _record => this.changeOrder(_record),
             iif: item => item.billStatus == '4' || item.billStatus == '5' || item.billStatus == '2' || item.billStatus == '3',
-            acl: { ability: ['ORDER-BULK-BulkBillDetail'] },
+            acl: { ability: ['ORDER-BULK-BulkBillDetail'] }
           }
         ]
       }
@@ -663,27 +626,13 @@ export class OrderManagementBulkComponent implements OnInit {
       id: this.changeViewId
     };
   }
-  /**
+  tabChange(item: any) {}
-   * 伸缩查询条件
-   */
-  expandToggle(): void {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/_$expand', this._$expand);
-  }
-  tabChange(item: any) { }
-  /**
-   * 重置表单
-   */
-  resetSF(): void {
-    this.sf.reset();
-    this._$expand = false;
-  }
 
   /**
    * 导入货源
    */
-  importGoodsSource() { }
+  importGoodsSource() {}
-  audit(item: any) { }
+  audit(item: any) {}
 
   /*
   * 审核关闭弹窗
@@ -704,7 +653,7 @@ export class OrderManagementBulkComponent implements OnInit {
   /**
    * 审核通过按钮
    */
-  handleOK() { }
+  handleOK() {}
   OpenPrice(item: any) {
     this.changeId = item.id;
     this.isVisible = true;
@@ -838,8 +787,8 @@ export class OrderManagementBulkComponent implements OnInit {
     this.router.navigate(['order-management/bulk-detailChange', value.id]);
   }
   /**
-*申请退款
+   *申请退款
-*/
+   */
   applyRefund(item: any) {
     const modalRef = this.modal.create({
       nzTitle: '申请退款',
@@ -852,7 +801,6 @@ export class OrderManagementBulkComponent implements OnInit {
     });
     modalRef.afterClose.subscribe((res: boolean) => {
       if (res) {
-        this.resetSF;
         this.st.load();
       }
     });

src/app/routes/order-management/components/vehicle/vehicle.component.html

@@ -31,11 +31,11 @@
 </nz-card> -->
 
 <nz-card class="table-box">
-  <div style="display: flex;align-items: center;">
+  <div class="tab_header">
-    <label style="font-weight: bold;font-size: 17px;">
+    <label class="page_title">
-      <label style="color: #ff4d4f;margin-left: 17px;margin-right: 6px;">|</label>
+      <label class="driver">|</label>
       整车订单</label>
-    <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate" style="flex: 1;">
+    <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate" >
       <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
       <nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab>
       <nz-tab [nzTitle]="'待发车(' + tabs?.stayQuantity + ')'"></nz-tab>
@@ -69,7 +69,7 @@
         </div>
       </ng-template>
       <ng-template st-row="createUserName" let-item let-index="index">
-        <div> {{ item?.createUserName }}{{  item?.createUserPhone ? "/" + item?.createUserPhone : ''  }} </div>
+        <div> {{ item?.createUserName }}{{ item?.createUserPhone ? "/" + item?.createUserPhone : '' }} </div>
       </ng-template>
       <!-- <ng-template st-row="mybidDetailInfo" let-item let-index="index">
         <div *ngIf="item.mybidDetailInfo.length > 0">
@@ -83,7 +83,8 @@
         <div *ngIf="item.mybidDetailInfo.length > 0">
           <p *ngFor="let data of item.mybidDetailInfo">
             <span *ngIf="data.expenseCode !== 'FL'">{{ data.expenseName }}：{{ data.price | currency }}</span>
-            <span *ngIf="data.expenseCode === 'FL'" >{{ data.expenseName }}：{{ (data.price * 100).toFixed(2) + '%' }}</span>
+            <span *ngIf="data.expenseCode === 'FL'">{{ data.expenseName }}：{{ (data.price * 100).toFixed(2) + '%'
+              }}</span>
             <span *ngIf="data.paymentStatusLabel" style="color: #f59a63">{{ data.paymentStatusLabel }}</span>
           </p>
         </div>
@@ -94,8 +95,10 @@
         </div>
       </ng-template>
       <ng-template st-row="driverName" let-item let-index="index">
-        <div> {{ item?.driverName  }}{{ item?.driverPhone ? '/' + item?.driverPhone : '' }}{{ item?.carNo ? '/' + item?.carNo : '' }} </div><br />
+        <div> {{ item?.driverName }}{{ item?.driverPhone ? '/' + item?.driverPhone : '' }}{{ item?.carNo ? '/' +
-        <div *ngIf="item.payeeName !== item.driverName">车队长： {{ item?.payeeName ? item?.payeeName + '/' : ''}}{{ item?.payeePhone }} </div>
+          item?.carNo : '' }} </div><br />
+        <div *ngIf="item.payeeName !== item.driverName">车队长： {{ item?.payeeName ? item?.payeeName + '/' : ''}}{{
+          item?.payeePhone }} </div>
       </ng-template>
 
       <ng-template st-row="loadingTime" let-item let-index="index">
@@ -177,35 +180,31 @@
   </ng-template>
 </nz-modal>
 
-<nz-drawer [nzBodyStyle]="{ overflow: 'auto' }" [nzMaskClosable]="false" [nzWidth]="420" [nzVisible]="visible"
-  [nzMaskClosable]="true" nzTitle="筛选" [nzFooter]="footerTpl" (nzOnClose)="visible=false">
-  <div *nzDrawerContent>
-    <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
-  </div>
-  <ng-template #footerTpl>
-    <div style="float: right">
-      <button nz-button (click)="visible=false">关闭</button>
-      <button nz-button [disabled]="loading" (click)="resetSF()">重置</button>
-      <button nz-button nzType="primary" (click)="search();;">搜索</button>
-    </div>
-  </ng-template>
-</nz-drawer>
-
 <ng-template #extraTemplate>
-  <div>
+  <div class="mr-sm">
-    <button nz-button nzType="primary" (click)="modifyRate()" acl
+    <button nz-button nzDanger (click)="openDrawer()" class="mr-sm">筛选</button>
-      [acl-ability]="['ORDER-VEHICLE-modificationAdditional']"> 修改附加费率 </button>
+    <button nz-button nzDanger [disabled]="loading" (click)="exprot()">导出</button>
-    <button nz-button nzType="primary" (click)="modifyFreightPeople()" acl
+    <button nz-button nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomLeft">
-      [acl-ability]="['ORDER-VEHICLE-modificationNetworkFreight']"> 修改网络货运人 </button>
+      更多<i nz-icon nzType="down" nzTheme="outline"></i></button>
-    <button nz-button nzType="primary" (click)="modifycaptain()" acl
+    <nz-dropdown-menu #menu="nzDropdownMenu">
-      [acl-ability]="['ORDER-VEHICLE-modificationCarCaptain']"> 修改车队长 </button>
+      <ul nz-menu>
-    <button *ngIf="resourceStatus == 4" nz-button nzType="primary" nzGhost nz-popconfirm [nzPopconfirmTitle]="enable"
+        <li nz-menu-item acl [acl-ability]="['ORDER-VEHICLE-modificationAdditional']" (click)="modifyRate()">
-      (nzOnConfirm)="userAction()" nzPopconfirmPlacement="bottomRight" acl
+          修改附加费率
-      [acl-ability]="['ORDER-VEHICLE-batchSignWholeOrder']">
+        </li>
-      批量签收
+        <li nz-menu-item acl [acl-ability]="['ORDER-VEHICLE-modificationNetworkFreight']"
-    </button>
+          (click)="modifyFreightPeople()">
-    <button nz-button nzType="primary" [disabled]="loading" (click)="exprot()">导出</button>
+          修改网络货运人
-    <button nz-button nzType="primary" (click)="visible=true;" class="mr-sm">筛选</button>
+        </li>
+        <li nz-menu-item acl [acl-ability]="['ORDER-VEHICLE-modificationCarCaptain']" (click)="modifycaptain()">
+          修改车队长
+        </li>
+        <li *ngIf="resourceStatus == 4" nz-menu-item nz-popconfirm [nzPopconfirmTitle]="enable"
+          (nzOnConfirm)="userAction()" nzPopconfirmPlacement="bottomRight" acl
+          [acl-ability]="['ORDER-VEHICLE-batchSignWholeOrder']">
+          批量签收
+        </li>
+      </ul>
+    </nz-dropdown-menu>
   </div>
 </ng-template>
 <ng-template #enable>

src/app/routes/order-management/components/vehicle/vehicle.component.ts

@@ -1,12 +1,13 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { STColumn, STComponent, STRequestOptions } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFSchemaEnum, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
 import { ShipperBaseService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
-import { fromEvent, of } from 'rxjs';
+import { fromEvent, of, Subscription } from 'rxjs';
 import { debounceTime, map } from 'rxjs/operators';
 import { BasicTableComponent } from 'src/app/routes/commom/components/basic-table/basic-table.component';
+import { SearchDrawerService } from 'src/app/shared/components/search-drawer/search-drawer.service';
 import { OneCarOrderCancelConfirmComponent } from '../../modal/vehicle/cancel-confirm/cancel-confirm.component';
 import { VehicleConfirReceiptComponent } from '../../modal/vehicle/confir-receipt/confir-receipt.component';
 import { VehicleFreightPeopleComponent } from '../../modal/vehicle/freight-people/freight-people.component';
@@ -22,8 +23,6 @@ import { OrderManagementService } from '../../services/order-management.service'
   styleUrls: ['../../../commom/less/commom-table.less', './vehicle.component.less']
 })
 export class OrderManagementVehicleComponent extends BasicTableComponent implements OnInit {
-  ui: SFUISchema = {};
-  schema: SFSchema = {};
   auditMany = false;
   isVisibleView = false;
   isVisibleEvaluate = false;
@@ -39,7 +38,6 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
   @ViewChild('st') private readonly st!: STComponent;
   @ViewChild('stFloat') private readonly stFloat!: STComponent;
   @ViewChild('stFloatView') private readonly stFloatView!: STComponent;
-  @ViewChild('sf', { static: false }) sf!: SFComponent;
   @ViewChild('sfFre', { static: false }) sfFre!: SFComponent;
   columns: STColumn[] = [];
   columnsFloat: STColumn[] = [];
@@ -56,7 +54,7 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
       two: '2',
       three: '2',
       id: 2
-    },
+    }
   ];
   tabs = {
     cancelQuantity: 0,
@@ -69,15 +67,15 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
   };
   resourceStatus: any;
 
-  visible = false;
   constructor(
     public service: OrderManagementService,
     private modal: NzModalService,
     public shipperservice: ShipperBaseService,
     public router: Router,
-    public ar: ActivatedRoute
+    public ar: ActivatedRoute,
+    public searchDrawerService: SearchDrawerService
   ) {
-    super();
+    super(searchDrawerService);
   }
 
   /**
@@ -98,11 +96,11 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
     if (this.resourceStatus) {
       a.billStatus = this.resourceStatus;
     }
-    const params: any = Object.assign({}, this.sf?.value || this.paramsList);
+    const params: any = Object.assign({}, this.sfValue || this.paramsList);
     delete params._$expand;
     return {
       ...a,
-      ...params,
+      ...params
     };
   }
   beforeReq = (requestOptions: STRequestOptions) => {
@@ -110,12 +108,12 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
     if (this.resourceStatus) {
       a.billStatus = this.resourceStatus;
     }
-    const params: any = Object.assign({}, this.sf?.value || this.paramsList);
+    const params: any = Object.assign({}, this.sfValue || this.paramsList);
     delete params._$expand;
-    this.paramsList = params
+    this.paramsList = params;
     Object.assign(requestOptions.body, {
       ...a,
-      ...this.paramsList,
+      ...this.paramsList
     });
     this.loading = true;
     return requestOptions;
@@ -197,7 +195,7 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
           type: 'string',
           title: '运单号',
           ui: {
-            placeholder: '最多100个单号，空号隔开',
+            placeholder: '最多100个单号，空号隔开'
           }
         },
         resourceCode: {
@@ -234,7 +232,7 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
           title: '所属项目',
           ui: {
             widget: 'select',
-            placeholder: '请先选择货主',
+            placeholder: '请先选择货主'
           } as SFSelectWidgetSchema
         },
         loadingPlace: {
@@ -284,7 +282,7 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
         createTime: {
           type: 'string',
           title: '创建时间',
-          ui: { widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd' } as SFDateWidgetSchema,
+          ui: { widget: 'sl-from-to', type: 'date', format: 'yyyy-MM-dd' } as SFDateWidgetSchema
         },
         riskStatus: {
           type: 'string',
@@ -342,7 +340,6 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
       },
       type: 'object'
     };
-    this.ui = { '*': { spanLabelFixed: 95, grid: { span: 24, gutter: 4 } } };
   }
 
   /**
@@ -416,13 +413,12 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
             text: '运费变更记录',
             click: _record => this.OpenPrice(_record),
             iif: item =>
-              item.billType !== '3' && (
+              item.billType !== '3' &&
-                item.billStatus == '4' ||
+              (item.billStatus == '4' ||
                 item.billStatus == '5' ||
                 item.billStatus == '2' ||
                 item.billStatus == '3' ||
-                item.billStatus == '6'
+                item.billStatus == '6'),
-              ),
             acl: { ability: ['ORDER-VEHICLE-ChangeApplyList'] }
           },
           // {
@@ -560,23 +556,9 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
   get queryFieldCount(): number {
     return Object.keys(this.schema?.properties || {}).length;
   }
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle(): void {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/_$expand', this._$expand);
-  }
   tabChange(item: any) {
     console.log(item);
   }
-  /**
-   * 重置表单
-   */
-  resetSF(): void {
-    this.sf.reset();
-    this._$expand = false;
-  }
   selectChange(e: number) {
     this.resourceStatus = e;
     this.initST();
@@ -587,8 +569,8 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
   /**
    * 导入货源
    */
-  importGoodsSource() { }
+  importGoodsSource() {}
-  audit(item: any) { }
+  audit(item: any) {}
 
   /*
   * 审核关闭弹窗
@@ -771,7 +753,6 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
     });
     modalRef.afterClose.subscribe((res: boolean) => {
       if (res) {
-        this.resetSF;
         this.st.load();
         this.getGoodsSourceStatistical();
       }
@@ -849,7 +830,6 @@ export class OrderManagementVehicleComponent extends BasicTableComponent impleme
     });
     modalRef.afterClose.subscribe((res: boolean) => {
       if (res) {
-        this.resetSF;
         this.st.load();
       }
     });

src/app/shared/components/search-drawer/search-drawer.component.html

@@ -0,0 +1,14 @@
+<nz-drawer [nzBodyStyle]="{ overflow: 'auto' }" [nzMaskClosable]="false" [nzWidth]="420" [nzVisible]="service.visible"
+    [nzMaskClosable]="true" nzTitle="筛选" [nzFooter]="footerTpl" (nzOnClose)="destroy()">
+    <div *nzDrawerContent>
+        <sf *ngIf="schema" #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'" [formData]="defaultValue">
+        </sf>
+    </div>
+    <ng-template #footerTpl>
+        <div style="float: right">
+            <button nz-button (click)="destroy()">关闭</button>
+            <button nz-button (click)="resetSF()">重置</button>
+            <button nz-button nzType="primary" (click)="search();;">搜索</button>
+        </div>
+    </ng-template>
+</nz-drawer>

src/app/shared/components/search-drawer/search-drawer.component.ts

@@ -0,0 +1,55 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { SFComponent, SFSchema, SFUISchema } from '@delon/form';
+import { Subject } from 'rxjs';
+import { SearchDrawerService } from './search-drawer.service';
+
+@Component({
+  selector: 'app-search-drawer',
+  templateUrl: './search-drawer.component.html',
+  styleUrls: ['./search-drawer.component.less']
+})
+export class SearchDrawerComponent implements OnInit, AfterViewInit {
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  ui: SFUISchema = { '*': { spanLabelFixed: 95, grid: { span: 24, gutter: 4 } } };
+  schema!: SFSchema;
+
+  loading = true;
+
+  defaultValue = {};
+
+  constructor(public service: SearchDrawerService) {}
+  ngAfterViewInit(): void {}
+
+  ngOnInit(): void {
+    this.service.createEvent.subscribe(({ defaultValue, newSchema, newUI }) => {
+      if (defaultValue) {
+        this.defaultValue = defaultValue;
+      }
+      if (newSchema) {
+        this.schema = newSchema;
+        if (this.sf) {
+          this.sf.refreshSchema(newSchema, newUI);
+          this.sf.reset();
+        }
+        this.service.visible = true;
+      }
+      setTimeout(() => {
+        this.service.initEvent.next(this.sf);
+      }, 500);
+    });
+  }
+
+  resetSF(): void {
+    this.sf.reset();
+  }
+
+  search() {
+    if (this.sf) {
+      this.service.closeEvent.next(this.sf.value);
+    }
+  }
+
+  destroy() {
+    this.service.visible = false;
+  }
+}

src/app/shared/components/search-drawer/search-drawer.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SHARED_DELON_MODULES } from '../../shared-delon.module';
+import { SHARED_ZORRO_MODULES } from '../../shared-zorro.module';
+import { SearchDrawerComponent } from './search-drawer.component';
+import { FormsModule } from '@angular/forms';
+import { DelonACLModule } from '@delon/acl';
+
+@NgModule({
+  declarations: [SearchDrawerComponent],
+  imports: [CommonModule, FormsModule, DelonACLModule, ...SHARED_DELON_MODULES, ...SHARED_ZORRO_MODULES],
+  exports: [SearchDrawerComponent]
+})
+export class SearchDrawerModule {}

src/app/shared/components/search-drawer/search-drawer.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { SFComponent, SFSchema, SFUISchema } from '@delon/form';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SearchDrawerService {
+  closeEvent = new Subject<any>();
+  createEvent = new Subject<any>();
+  initEvent = new Subject<any>();
+
+  visible = false;
+  constructor() {}
+
+  create(defaultValue: Record<string, any>, newSchema?: SFSchema, newUI?: SFUISchema) {
+    this.createEvent.next({ defaultValue, newSchema, newUI });
+    return this;
+  }
+}

src/app/shared/shared.module.ts

@@ -39,6 +39,8 @@ import { PipeModule } from './pipes';
 import { AccountDetailComponent } from './components/account-detail/account-detail.component';
 import { CaptchaModule } from './components/captcha';
 import { rebateTableModule } from './components/rebate-table';
+import { SearchDrawerComponent } from './components/search-drawer/search-drawer.component';
+import { SearchDrawerModule } from './components/search-drawer/search-drawer.module';
 
 const MODULES = [
   AddressModule,
@@ -55,6 +57,7 @@ const MODULES = [
   PipeModule,
   rebateTableModule,
   CaptchaModule,
+  SearchDrawerModule,
   ...PRO_SHARED_MODULES
 ];
 // #endregion
@@ -92,4 +95,4 @@ const SHAREDCOMPONENTS = [LogisticsTimeLineComponent, DictSelectComponent, Accou
   ],
   declarations: SHAREDCOMPONENTS
 })
-export class SharedModule { }
+export class SharedModule {}

src/styles/theme.less

@@ -19,3 +19,7 @@
 // .page-header__title {
 //     display: none;
 // }
+
+.ant-btn {
+  border-radius: 4px;
+}