edit

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 {}