edit

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

@@ -1,14 +1,21 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
-import { fromEvent } from 'rxjs';
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+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-tbody > tr > td,
-    .ant-table tfoot > tr > th,
-    .ant-table tfoot > tr > td {
+    .ant-table-thead>tr>th,
+    .ant-table-tbody>tr>td,
+    .ant-table tfoot>tr>th,
+    .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;
-      height: 24px;
+      min-width  : 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;
-      height: 24px;
+      min-width  : 24px;
+      height     : 24px;
       line-height: 21px;
     }
 
@@ -67,4 +87,4 @@
       line-height: 21px;
     }
   }
-}
+}