UI

src/app/routes/usercenter/components/freight/freight-config/freight-config.component.html

@@ -1,16 +1,5 @@
-<!--
+<!-- <page-header-wrapper [title]="'货主配置'"></page-header-wrapper>
- * @Description  : 
- * @Version      : 1.0
- * @Author       : Shiming
- * @Date         : 2022-02-17 20:24:17
- * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-21 15:28:21
- * @FilePath     : \\tms-obc-web\\src\\app\\routes\\usercenter\\components\\freight\\freight-config\\freight-config.component.html
- * Copyright (C) 2022 huzhenhong. All rights reserved.
--->
-<page-header-wrapper [title]="'货主配置'"></page-header-wrapper>
 <nz-card class="search-box">
-  <!-- 搜索表单 -->
   <div nz-row nzGutter="8">
     <div nz-col [nzXl]="_$expand ? 24 : 18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
       <sf #sf [schema]="schema"
@@ -24,14 +13,10 @@
       <button nz-button nzType="primary" [disabled]="false" acl (click)="exportList()"
         [acl-ability]="['USERCENTER-FREIGHT-LIST-export']">导出</button>
       <button nz-button [disabled]="false" (click)="resetSF()">重置</button>
-      <!-- <button nz-button nzType="link" (click)="expandToggle()">
-        {{ !_$expand ? '展开' : '收起' }}
-        <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
-      </button> -->
     </div>
   </div>
-</nz-card>
+</nz-card> -->
-<nz-card>
+<!-- <nz-card>
   <div class="d-flex align-items-center mb-md " style="justify-content: end;">
     <button nz-button (click)="editRoleBatch()">修改角色</button>
     <button nz-button (click)="editIWBatch()">修改网络货运人</button>
@@ -40,7 +25,35 @@
       <strong class="text-primary">{{ selectedRows.length }}</strong> 条数据
       <a *ngIf="selectedRows.length > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
     </div>
+  </div> -->
+<nz-card class="table-box">
+  <div class="header_box">
+    <label class="page_title"> <label class="driver">|</label> 货主配置</label>
+    <div class="mr-sm" style="display: flex;align-items: center;">
+      <div class="mr-md">
+        已选择
+        <strong class="text-primary">{{ selectedRows.length }}</strong> 条数据
+        <a *ngIf="selectedRows.length > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
       </div>
+      <button nz-button nzDanger [nzLoading]="service.http.loading" acl
+        [acl-ability]="['USERCENTER-FREIGHT-CONFIG-list']" (click)="openDrawer()">筛选</button>
+      <button nz-button nzDanger acl (click)="exportList()" [acl-ability]="['USERCENTER-FREIGHT-CONFIG-export']">
+        导出</button>
+      <button nz-button nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomLeft">
+        更多<i nz-icon nzType="down" nzTheme="outline"></i></button>
+      <nz-dropdown-menu #menu="nzDropdownMenu">
+        <ul nz-menu>
+          <li nz-menu-item (click)="editRoleBatch()" acl [acl-ability]="['USERCENTER-FREIGHT-CONFIG-role']">
+            修改角色
+          </li>
+          <li nz-menu-item (click)="editIWBatch()" acl [acl-ability]="['USERCENTER-FREIGHT-CONFIG-netword']">
+            修改网络货运人
+          </li>
+        </ul>
+      </nz-dropdown-menu>
+    </div>
+  </div>
+
   <!-- 数据列表 -->
   <st #st [columns]="columns" [data]='service.$api_freight_config_page' [req]="{  process: beforeReq }" [page]="{}"
     [scroll]="{ x: '1200px' }" [loading]="false" (change)="stChange($event)">

src/app/routes/usercenter/components/freight/freight-config/freight-config.component.ts

@@ -2,21 +2,21 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { STColumn, STComponent, STRequestOptions, STData, STChange } from '@delon/abc/st';
 import { SFUISchema, SFSchema, SFComponent, SFDateWidgetSchema } from '@delon/form';
-import { ShipperBaseService, DynamicSettingModalComponent } from '@shared';
+import { ShipperBaseService, DynamicSettingModalComponent, SearchDrawerService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { BasicTableComponent } from 'src/app/routes/commom';
 import { AccountDetailComponent } from 'src/app/shared/components/account-detail/account-detail.component';
 import { UsermanageService } from '../../../services/usercenter.service';
 
 @Component({
   selector: 'app-freight-config',
   templateUrl: './freight-config.component.html',
-  styleUrls: ['../../../../commom/less/box.less', '../../../../commom/less/expend-but.less']
+  styleUrls: ['../../../../commom/less/commom-table.less']
 })
-export class FreightConfigComponent implements OnInit {
+export class FreightConfigComponent extends BasicTableComponent implements OnInit {
   schema: SFSchema = this.initSF();
   columns: STColumn[] = this.initST();
   @ViewChild('st', { static: false }) st!: STComponent;
-  @ViewChild('sf', { static: false }) sf!: SFComponent;
   selectedRows: any[] = [];
 
   @ViewChild('IWModal', { static: false })
@@ -27,8 +27,18 @@ export class FreightConfigComponent implements OnInit {
   roles: any = [];
   networkTransporter = null;
   roleId = null;
-  _$expand = false;
+  constructor(
-  constructor(public service: UsermanageService, private modal: NzModalService, public shipperservice: ShipperBaseService) {}
+    public service: UsermanageService,
+    private modal: NzModalService,
+    public shipperservice: ShipperBaseService,
+    public searchDrawerService: SearchDrawerService
+  ) {
+    super(searchDrawerService);
+  }
+
+  search() {
+    this.st?.load(1);
+  }
 
   ngOnInit() {
     this.initST();
@@ -191,21 +201,6 @@ export class FreightConfigComponent implements OnInit {
     });
   }
 
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle(): void {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/_$expand', this._$expand);
-  }
-  /**
-   * 重置表单
-   */
-  resetSF(): void {
-    this.sf.reset();
-    this._$expand = false;
-  }
-
   private initSF(): SFSchema {
     return {
       properties: {
@@ -235,7 +230,7 @@ export class FreightConfigComponent implements OnInit {
             widget: 'sl-from-to-search',
             format: 'yyyy-MM-dd',
             placeholder: '请选择',
-            nzShowTime: true,
+            nzShowTime: true
           } as SFDateWidgetSchema
         }
       }

src/app/routes/usercenter/usercenter-routing.module.ts

@@ -44,7 +44,8 @@ const routes: Routes = [
   },
   {
     path: 'freight/config',
-    component: FreightConfigComponent
+    component: FreightConfigComponent,
+    data: { guard: { ability: ['USERCENTER-FREIGHT-CONFIG-list'] } }
   },
   { path: 'freight/user', component: FreightComponentsUserComponent, data: { guard: { ability: ['USERCENTER-FREIGHT-USER-list'] } } },
   {