edit

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;
+  }
+}