edit

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

@@ -0,0 +1,71 @@
+:host {
+    ::ng-deep {
+
+        nz-card {
+            margin: -24px -24px 0;
+
+            .ant-tabs-nav {
+                margin: 0;
+            }
+        }
+
+        .ant-tabs-tab {
+            padding: 12px 0px;
+            margin : 0 0 0 16px;
+        }
+
+        .ant-table-body {
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .table-box {
+            .ant-card-body {
+                padding: 0px;
+            }
+        }
+
+        .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 {
+            padding: 8px;
+        }
+
+        .ant-table.ant-table-bordered>.ant-table-container {
+            border-top: 0;
+        }
+
+        .ant-pagination-item {
+            min-width  : 24px;
+            height     : 24px;
+            line-height: 21px;
+        }
+
+        .ant-pagination-total-text {
+            height     : 24px;
+            line-height: 24px;
+        }
+
+        .ant-pagination-prev,
+        .ant-pagination-next,
+        .ant-pagination-jump-prev,
+        .ant-pagination-jump-next {
+            min-width  : 24px;
+            height     : 24px;
+            line-height: 21px;
+        }
+
+        .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+            height: 24px;
+        }
+
+        .ant-select-single .ant-select-selector .ant-select-selection-item,
+        .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
+            line-height: 21px;
+        }
+    }
+}

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

@@ -9,7 +9,7 @@
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 <!-- 搜索表单 -->
-<page-header-wrapper [title]="''"> </page-header-wrapper>
+<!-- <page-header-wrapper [title]="''"> </page-header-wrapper> -->
 <!-- <nz-card class="search-box">
   <div nz-row nzGutter="8">
     <ng-container *ngIf="queryFieldCount > 4">
@@ -30,16 +30,22 @@
   </div>
 </nz-card> -->
 
-<nz-card class="content-box">
+<nz-card class="table-box">
-  <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
+  <div style="display: flex;align-items: center;">
-    <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
+    <label style="font-weight: bold;font-size: 17px;">
-    <nz-tab [nzTitle]="'待接单(' + tabs?.receivedQuantity + ')'"></nz-tab>
+      <label style="color: #ff4d4f;margin-left: 17px;margin-right: 6px;">|</label>
-    <nz-tab [nzTitle]="'待发车(' + tabs?.stayQuantity + ')'"></nz-tab>
+      整车订单</label>
-    <nz-tab [nzTitle]="'运输中(' + tabs?.GoingQuantity + ')'"></nz-tab>
+    <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate" style="flex: 1;">
-    <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>
+      <nz-tab [nzTitle]="'待签收(' + tabs?.signQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'已完成(' + tabs?.compolatelQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab>
+    </nz-tabset>
+  </div>
+
   <div>
     <st #st [bordered]="true" multiSort [scroll]="{  x:'1200px',y:scrollY }" [data]="service.$api_get_listWholePage"
       [columns]="columns" [req]="{  process: beforeReq }"
@@ -180,14 +186,15 @@
   </ng-template>
 </nz-modal>
 
-<nz-drawer [nzBodyStyle]="{ overflow: 'auto' }" [nzMaskClosable]="false" [nzWidth]="500" [nzVisible]="visible" 
+<nz-drawer [nzBodyStyle]="{ overflow: 'auto' }" [nzMaskClosable]="false" [nzWidth]="420" [nzVisible]="visible"
-  [nzMaskClosable]="true" nzTitle="查询" [nzFooter]="footerTpl" (nzOnClose)="visible=false">
+  [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 style="margin-right: 8px;" (click)="visible=false">关闭</button>
+      <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>
@@ -206,7 +213,8 @@
       [acl-ability]="['ORDER-VEHICLE-batchSignWholeOrder']">
       批量签收
     </button>
-    <button nz-button nzType="primary" (click)="visible=true;" class="mr-sm">搜索</button>
+    <button nz-button nzType="primary" [disabled]="loading">导出</button>
+    <button nz-button nzType="primary" (click)="visible=true;" class="mr-sm">筛选</button>
   </div>
 </ng-template>
 <ng-template #enable>

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

@@ -1,117 +0,0 @@
-:host {
-    p {
-        margin-bottom: 0
-    }
-
-    ::ng-deep {
-        // .ant-table-content {
-        //     transform: scaleY(-1);
-
-        //     table {
-        //         transform: inherit
-        //     }
-        // }
-
-        .page-header {
-            border : 0;
-            padding: 8px 8px 0;
-
-            .ant-breadcrumb {
-                margin-bottom: 8px;
-            }
-        }
-
-        nz-range-picker {
-            width: 100%;
-        }
-
-        nz-card {
-            margin: -24px -24px 0;
-
-            .ant-tabs-nav {
-                margin: 0;
-            }
-        }
-
-        // .footer-page {
-        //     position        : fixed;
-        //     bottom          : 0px;
-        //     width           : calc(100% - 300px);
-        //     right           : 48px;
-        //     background-color: #ffffff;
-        //     height          : 56px;
-        // }
-
-        // nz-pagination {
-        //     position: fixed;
-        //     bottom  : 0px;
-        //     width   : 800px;
-        //     right   : 48px;
-        //     z-index : 999;
-        // }
-        .ant-tabs-tab {
-            padding: 12px 0px;
-            margin : 0 0 0 16px;
-        }
-
-        .ant-table-body {
-            border-bottom: 1px solid #f0f0f0;
-        }
-
-        .search-box {
-            .ant-card-body {
-                padding-bottom: 18px;
-            }
-        }
-
-        .content-box {
-            .ant-card-body {
-                padding: 0px;
-            }
-        }
-
-        .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 {
-            padding: 8px;
-        }
-
-        .ant-table.ant-table-bordered>.ant-table-container {
-            border-top: 0;
-        }
-
-        .ant-pagination-item {
-            min-width  : 24px;
-            height     : 24px;
-            line-height: 21px;
-        }
-
-        .ant-pagination-total-text {
-            height     : 24px;
-            line-height: 24px;
-        }
-
-        .ant-pagination-prev,
-        .ant-pagination-next,
-        .ant-pagination-jump-prev,
-        .ant-pagination-jump-next {
-            min-width  : 24px;
-            height     : 24px;
-            line-height: 21px;
-        }
-
-        .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
-            height: 24px;
-        }
-
-        .ant-select-single .ant-select-selector .ant-select-selection-item,
-        .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
-            line-height: 21px;
-        }
-    }
-}

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

@@ -18,7 +18,7 @@ import { OrderManagementService } from '../../services/order-management.service'
 @Component({
   selector: 'app-supply-management-vehicle',
   templateUrl: './vehicle.component.html',
-  styleUrls: ['./vehicle.component.less', '../../../commom/less/expend-but.less']
+  styleUrls: ['../../../commom/less/commom-table.less']
 })
 export class OrderManagementVehicleComponent implements OnInit {
   ui: SFUISchema = {};
@@ -110,12 +110,14 @@ export class OrderManagementVehicleComponent implements OnInit {
     const a: any = {};
     if (this.resourceStatus) {
       a.billStatus = this.resourceStatus;
+      Object.assign(requestOptions.body, {
+        ...a
+      });
     }
     const params: any = Object.assign({}, this.sf?.value || {});
     delete params._$expand;
     if (this.sf) {
       Object.assign(requestOptions.body, {
-        ...a,
         ...params,
         createTime: {
           start: this.sf?.value?.createTime?.[0] || '',
@@ -157,15 +159,17 @@ export class OrderManagementVehicleComponent implements OnInit {
   getScrollY() {
     const windowHeight = window.innerHeight || Math.max(document.documentElement.clientHeight, document.body.clientHeight);
     const header = document.getElementsByTagName('layout-pro-header')?.[0];
-    const headerWrapper = document.getElementsByTagName('page-header-wrapper')?.[0];
+    if (windowHeight && header) {
-    if (windowHeight && header && headerWrapper) {
+      let scrollY = windowHeight - header.clientHeight - 35 - 49;
-      let scrollY = windowHeight - header.clientHeight - headerWrapper.clientHeight - 35 - 47
+      const headerWrapper = document.getElementsByTagName('page-header-wrapper')?.[0];
+      if (headerWrapper) {
+        scrollY -= headerWrapper.clientHeight;
+      }
       const tabset = document.getElementsByTagName('nz-tabset')?.[0];
       if (tabset) {
         scrollY -= tabset.clientHeight;
       }
       this.scrollY = scrollY + 'px';
-      console.log(scrollY);
     }
   }
 
@@ -360,7 +364,7 @@ export class OrderManagementVehicleComponent implements OnInit {
       },
       type: 'object'
     };
-    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 24, gutter: 4 } } };
+    this.ui = { '*': { spanLabelFixed: 95, grid: { span: 24, gutter: 4 } } };
   }
 
   /**

src/styles/compact.less

@@ -1,80 +1,112 @@
-
+.alain-pro__sider-logo h1 {
-.alain-pro__sider-logo h1{
     font-size: 15px !important;
 }
-.page-header__title{
+
+.page-header__title {
     font-size: 14px !important;
 }
-.alain-pro__body{
+
+.alain-pro__body {
     margin: 12px 12px 0px !important;
 }
-.alain-pro__page-header-content{
+
+.alain-pro__page-header-content {
     margin: 8px 8px 0 !important;
 }
 
 .ant-card {
     margin-bottom: 8px !important;
 }
-.ant-table tfoot>tr>td, .ant-table tfoot>tr>th, .ant-table-tbody>tr>td, .ant-table-thead>tr>th{
+
+.ant-table tfoot>tr>td,
+.ant-table tfoot>tr>th,
+.ant-table-tbody>tr>td,
+.ant-table-thead>tr>th {
     padding: 6px 10px;
 }
-.alain-pro__page-header-wrapper{
+
+.alain-pro__page-header-wrapper {
     margin: 0 !important
 }
-.alain-pro__menu-icon{
+
-    margin: 3px 5px 0 0 ;
+.alain-pro__menu-icon {
+    margin   : 3px 5px 0 0;
     font-size: 14px !important;
 }
+
 .sf__compact .ant-form-item {
-    margin-top: 4px !important;
+    margin-top   : 4px !important;
     margin-bottom: 4px !important;
 }
-.body-box{
+
+.body-box {
     max-width: 760px !important;
-    .box-content{
+
+    .box-content {
         height: 77% !important;
     }
 }
-.login-logo{
+
-    width:250px !important;
+.login-logo {
+    width : 250px !important;
     height: 100% !important;
 }
-.ant-tabs-tab-btn{
+
+.ant-tabs-tab-btn {
     font-size: 18px !important;
 }
-.login-box-content{
+
+.login-box-content {
     max-width: 300px !important;
-    height: 100% !important;
+    height   : 100% !important;
-    padding: 58px 0 38px !important;
+    padding  : 58px 0 38px !important;
 }
+
 .total-footer {
     bottom: 10px !important;
 }
-.ant-layout-header{
+
-    height: 44px;
+.ant-layout-header {
-    padding: 0 25px;
+    height     : 44px;
+    padding    : 0 25px;
     line-height: 44px;
-    img{
+
+    img {
         width: 22px
     }
-    .title{
+
+    .title {
         font-size: 14px;
     }
 }
-.ant-tabs-tab-btn{
+
+.ant-tabs-tab-btn {
     font-size: 14px !important;
 }
-.ant-row{
+
-    margin-left: 0px !important;
+.ant-row {
+    margin-left : 0px !important;
     margin-right: 0px !important;
 }
-h2{
+
+h2 {
     font-size: 16px !important;
 }
-.sv__container{
+
+.sv__container {
     padding: 0 !important;
 }
+
 .alain-pro__menu-side .alain-pro__main .affix {
-    top: 0 !important;
+    top : 0 !important;
     left: 215px !important;
+}
+
+.table-box {
+    margin: -12px -12px 0 !important;
+
+    .ant-tabs-tab {
+        padding: 12px 0px !important;
+        margin : 0 0 0 16px !important;
+    }
 }