fix bug

bug修复

See merge request tms-ui/tms-obc-web!20

angular.json

@@ -34,7 +34,6 @@
             ],
             "styles": [
               "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
-              "node_modules/quill/dist/quill.snow.css",
               "src/styles.less",
               {
                 "input": "src/styles/default.less",
@@ -49,7 +48,6 @@
             ],
 
             "scripts": [
-              "node_modules/quill/dist/quill.min.js",
               "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
               "node_modules/qrious/dist/qrious.min.js"
             ],
@@ -139,7 +137,6 @@
             "karmaConfig": "karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
             "scripts": [
-              "node_modules/quill/dist/quill.min.js",
               "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js"
             ],
             "styles": [],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tms-obc-web",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "运营后台-WEB",
   "author": "cipchk <cipchk@qq.com>",
   "repository": {
@@ -67,8 +67,6 @@
     "ngx-trend": "^7.0.0",
     "perfect-scrollbar": "^1.5.2",
     "qrious": "^4.0.2",
-    "quill": "^1.3.7",
-    "quill-image-resize-module": "^3.0.0",
     "rxjs": "~6.6.0",
     "screenfull": "^5.1.0",
     "tslib": "^2.3.0",

proxy.conf.js

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-18 09:51:21
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-20 14:18:40
+ * @LastEditTime : 2022-05-16 17:27:31
  * @FilePath     : \\tms-obc-web\\proxy.conf.js
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -30,7 +30,7 @@ module.exports = {
   // },
   '//api': {
     target: {
-      host: 'tms-api-test.eascs.com',
+      host: 'tms-api-dev.eascs.com',
       protocol: 'https:',
       port: 443
     },

src/app/app.module.ts

@@ -1,23 +1,19 @@
 /* eslint-disable import/order */
 /* eslint-disable import/no-duplicates */
-import { HttpClientModule } from '@angular/common/http';
-import { default as ngLang } from '@angular/common/locales/zh';
-import { APP_INITIALIZER, DEFAULT_CURRENCY_CODE, LOCALE_ID, NgModule, Type } from '@angular/core';
+import { APP_INITIALIZER, DEFAULT_CURRENCY_CODE, NgModule, Type } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { SimpleInterceptor } from '@delon/auth';
-import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import zh from '@angular/common/locales/zh';
 registerLocaleData(zh);
 // #region global third module
 
-import { BidiModule } from '@angular/cdk/bidi';
-const GLOBAL_THIRD_MODULES: Array<Type<any>> = [BidiModule];
+const GLOBAL_THIRD_MODULES: Array<Type<any>> = [];
 
 // #endregion
 
 // #region Http Interceptors
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 import { BusinessInterceptor, DefaultInterceptor } from '@core';
 
@@ -42,35 +38,20 @@ const APPINIT_PROVIDES = [
     multi: true
   },
   { provide: DEFAULT_CURRENCY_CODE, useValue: '￥' },
-  AuthGuard
+  { provide: RouteReuseStrategy, useClass: ReuseTabStrategy, deps: [ReuseTabService] }
 ];
 // #endregion
 
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
-import { GlobalConfigModule } from './global-config.module';
-import { LayoutModule } from './layout/layout.module';
 import { RoutesModule } from './routes/routes.module';
-import { SharedModule } from './shared/shared.module';
-import { STWidgetModule } from './shared/widget/st-widget.module';
 import { registerLocaleData } from '@angular/common';
-import { AuthGuard } from './core/guards/auth.guard';
+import { RouteReuseStrategy, RouterModule } from '@angular/router';
+import { ReuseTabService, ReuseTabStrategy } from '@delon/abc/reuse-tab';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    GlobalConfigModule.forRoot(),
-    CoreModule,
-    SharedModule,
-    LayoutModule,
-    RoutesModule,
-    STWidgetModule,
-    NzNotificationModule,
-    ...GLOBAL_THIRD_MODULES
-  ],
+  imports: [BrowserModule, BrowserAnimationsModule, HttpClientModule, CoreModule, RoutesModule, RouterModule, ...GLOBAL_THIRD_MODULES],
   providers: [...INTERCEPTOR_PROVIDES, ...APPINIT_PROVIDES],
   bootstrap: [AppComponent]
 })

src/app/core/core.module.ts

@@ -1,10 +1,11 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
+import { AuthGuard } from './guards/auth.guard';
 import { EATokenGuard } from './guards/token.guard';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
 
 @NgModule({
-  providers: [EATokenGuard]
+  providers: [AuthGuard, EATokenGuard]
 })
 export class CoreModule {
   constructor(@Optional() @SkipSelf() parentModule: CoreModule) {

src/app/global-config.module.ts

@@ -12,10 +12,12 @@ import { environment } from '@env/environment';
 
 const alainConfig: AlainConfig = {
   st: {
+    bordered: true,
     req: { method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' } },
     res: { reName: { list: 'data.records', total: 'data.total' } },
     page: { show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000], toTop: false },
-    modal: { size: 'lg' }
+    modal: { size: 'lg' },
+    ps: 20
   },
   sf: { button: { search: '查询' } },
   pageHeader: { homeI18n: 'home', recursiveBreadcrumb: true },
@@ -27,7 +29,7 @@ const alainConfig: AlainConfig = {
       'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.4/dist/g2.min.js',
       'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.7/dist/data-set.js'
     ]
-  },
+  }
 };
 
 const alainModules = [AlainThemeModule.forRoot(), DelonACLModule.forRoot()];

src/app/layout/layout.module.ts

@@ -27,6 +27,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { LayoutPassportComponent } from './passport/passport.component';
 import { PRO_COMPONENTS } from './pro/index';
+import { SearchDrawerModule } from '../shared/components/search-drawer/search-drawer.module';
 
 const COMPONENTS: Array<Type<any>> = [...PRO_COMPONENTS, LayoutPassportComponent];
 
@@ -57,7 +58,8 @@ const COMPONENTS: Array<Type<any>> = [...PRO_COMPONENTS, LayoutPassportComponent
     ThemeBtnModule,
     ScrollbarModule,
     NzGridModule,
-    NzMessageModule
+    NzMessageModule,
+    SearchDrawerModule
   ],
   declarations: COMPONENTS,
   exports: COMPONENTS

src/app/layout/pro/components/menu/menu.component.html

@@ -14,7 +14,7 @@
   </div>
 </ng-template>
 <ng-template #subLink let-i>
-  <a *ngIf="!i.externalLink" [routerLink]="i.link" [target]="i.target">{{ i.text }} </a>
+  <a *ngIf="!i.externalLink" (click)="routeTo(i.link)" [target]="i.target">{{ i.text }} </a>
   <a *ngIf="i.externalLink" [attr.href]="i.externalLink" [attr.target]="i.target">{{ i.text }} </a>
 </ng-template>
 <ul *ngIf="menus" nz-menu [nzMode]="mode" [nzTheme]="pro.theme"
@@ -22,7 +22,7 @@
   <ng-container *ngFor="let l1 of menus">
     <li *ngIf="l1.children!.length === 0" nz-menu-item class="alain-pro__menu-item"
       [class.alain-pro__menu-item--disabled]="l1.disabled" [nzSelected]="l1._selected" [nzDisabled]="l1.disabled">
-      <a *ngIf="!l1.externalLink" [routerLink]="l1.link" (click)="closeCollapsed()" class="alain-pro__menu-title">
+      <a *ngIf="!l1.externalLink" (click)="routeTo(l1.link);closeCollapsed()" class="alain-pro__menu-title">
         <ng-template [ngTemplateOutlet]="mainLink" [ngTemplateOutletContext]="{ $implicit: l1 }"></ng-template>
       </a>
       <a *ngIf="l1.externalLink" [attr.href]="l1.externalLink" [attr.target]="l1.target" (click)="closeCollapsed()"

src/app/layout/pro/components/menu/menu.component.ts

@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
+import { ReuseTabService } from '@delon/abc/reuse-tab';
 import { MenuService } from '@delon/theme';
 import { InputBoolean } from '@delon/util';
+import { SearchDrawerService } from '@shared';
 import { NzMenuModeType } from 'ng-zorro-antd/menu';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -25,7 +27,14 @@ export class LayoutProMenuComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() disabledAcl = false;
   @Input() mode: NzMenuModeType = 'inline';
 
-  constructor(private menuSrv: MenuService, private router: Router, public pro: BrandService, private cdr: ChangeDetectorRef) {}
+  constructor(
+    private menuSrv: MenuService,
+    private router: Router,
+    public pro: BrandService,
+    private cdr: ChangeDetectorRef,
+    private reuseService: ReuseTabService,
+    private searchDrawerService: SearchDrawerService
+  ) {}
 
   private cd(): void {
     this.cdr.markForCheck();
@@ -121,4 +130,12 @@ export class LayoutProMenuComponent implements OnInit, OnDestroy {
     unsubscribe$.next();
     unsubscribe$.complete();
   }
+
+  routeTo(link: string | undefined) {
+    if (link) {
+      this.reuseService.clear();
+      this.searchDrawerService.unsubscribe();
+      this.router.navigate([link]);
+    }
+  }
 }

src/app/layout/pro/pro.component.html

@@ -37,4 +37,5 @@
   </div>
 </div>
 <ng-template #settingHost></ng-template>
-<theme-btn></theme-btn>
+<theme-btn></theme-btn>
+<app-search-drawer></app-search-drawer>

src/app/layout/pro/styles/app/_menu.less

@@ -1,26 +1,33 @@
 @{alain-pro-prefix} {
   &__menu {
     display: block;
+
     &-item {
       &--disabled {
         pointer-events: none;
       }
     }
+
     &-only-icon {
       @{alain-pro-prefix}__menu-item {
         padding-right: 8px !important;
         padding-left: 8px !important;
+
         &:first-child {
           padding-left: 0;
         }
       }
+
       @{alain-pro-prefix}__menu-icon {
         margin-right: 0;
         font-size: @alain-pro-top-nav-only-icon-fs;
+        min-width: 14px;
       }
     }
+
     &-title {
       position: relative;
+
       &-badge {
         display: flex;
         justify-content: center;
@@ -31,27 +38,34 @@
         line-height: 18px;
         background: @alain-pro-header-title-badge-bg;
         border-radius: 50%;
-        > em {
+
+        >em {
           color: @alain-pro-header-title-badge-color;
           font-style: normal;
         }
       }
     }
+
     &-img {
-      width: @alain-pro-sider-menu-img-wh !important;
-      height: @alain-pro-sider-menu-img-wh !important;
+      width: @alain-pro-sider-menu-img-wh  !important;
+      height: @alain-pro-sider-menu-img-wh  !important;
     }
+
   }
+
   &__side-nav {
     @{alain-pro-prefix}__menu {
       &-title {
         display: flex;
         align-items: center;
+
         &-text {
           flex: 1;
+          // opacity: 0;
         }
       }
     }
+
     .@{ant-prefix}-menu-inline-collapsed {
       @{alain-pro-prefix}__menu-title-badge {
         position: absolute;
@@ -59,10 +73,28 @@
         right: -16px;
         width: 8px;
         height: 8px;
-        > em {
+
+        >em {
           display: none;
         }
       }
     }
   }
 }
+
+@{aside-collapsed-prefix} {
+  @{alain-pro-prefix} {
+    &__menu {
+      &-icon {
+        overflow: inherit;
+      }
+
+      &-title {
+        &-text {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+}

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

@@ -12,6 +12,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AccountComponentsCenterComponent } from './components/center/center.component';
+import { AccountComponentsEditPayPasswordComponent } from './components/edit-paypassword/edit-paypassword.component'
 
 const routes: Routes = [
   { path: '', redirectTo: 'center', pathMatch: 'full' },
@@ -21,7 +22,16 @@ const routes: Routes = [
     data: {
       title: '账户中心'
     }
-  }
+  },
+  {
+    path: 'edit-paypassword',
+    component: AccountComponentsEditPayPasswordComponent,
+    data: {
+      title: '修改支付密码',
+      titleI18n: 'app.my.edit.paypassword',
+      // guard: {ability: ['accountcenter-editpaypassword']}
+    },
+  },
 ];
 
 @NgModule({

src/app/routes/account/account.module.ts

@@ -15,11 +15,13 @@ import { AccountRoutingModule } from './account-routing.module';
 import { AccountComponentsCenterComponent } from './components/center/center.component';
 import { AccountComponentsEditNameComponent } from './components/edit-name/edit-name.component';
 import { AccountComponentsCenterEditComponent } from './components/edit-password/edit-password.component';
+import { AccountComponentsEditPayPasswordComponent } from './components/edit-paypassword/edit-paypassword.component'
 
 const COMPONENTS = [
   AccountComponentsCenterComponent,
   AccountComponentsEditNameComponent,
-  AccountComponentsCenterEditComponent
+  AccountComponentsCenterEditComponent,
+  AccountComponentsEditPayPasswordComponent
 ];
 const COMPONENTS_NOROUNT = [AccountComponentsEditNameComponent];
 

src/app/routes/account/components/center/center.component.html

@@ -12,9 +12,9 @@
               <div nz-col [nzSpan]="10">{{ infoData.phone }}</div>
               <div nz-col [nzSpan]="10">
                 <span *ngIf="infoData.phone; else elsePhone"><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'"
-                  style="color: #52c41a"></i> 已绑定</span>
-              <ng-template #elsePhone><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
-                  style="color: #ccc"></i> 未绑定</ng-template>
+                    style="color: #52c41a"></i> 已绑定</span>
+                <ng-template #elsePhone><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
+                    style="color: #ccc"></i> 未绑定</ng-template>
               </div>
             </div>
           </nz-list-item-meta-title>
@@ -30,19 +30,45 @@
               </div>
               <div nz-col [nzSpan]="10">定期更换密码有助于账号安全</div>
               <div nz-col [nzSpan]="10">
-                <span *ngIf="infoData.isPwd; else elsePwd"
-                  ><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'" style="color: #52c41a"></i> 已设置</span
-                >
-                <ng-template #elsePwd
-                  ><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'" style="color: #ccc"></i> 未设置</ng-template
-                >
+                <span *ngIf="infoData.isPwd; else elsePwd"><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'"
+                    style="color: #52c41a"></i> 已设置</span>
+                <ng-template #elsePwd><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
+                    style="color: #ccc"></i> 未设置</ng-template>
               </div>
             </div>
           </nz-list-item-meta-title>
         </nz-list-item-meta>
         <div class="item-btn"><a (click)="edit('password')">修改</a></div>
       </nz-list-item>
+      <!-- <nz-list-item *ngIf="defaultCompany.enterpriseId"> -->
+      <nz-list-item>
+        <nz-list-item-meta>
+          <nz-list-item-meta-title>
+            <div nz-row [nzGutter]="16">
+              <div nz-col [nzSpan]="4" class="li-label">
+                <!-- <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1"
+                  width="19px" height="23px">
+                  <g transform="matrix(1 0 0 1 -345 -324 )">
+                    <path
+                      d="M 15.6123766269722 8.00244105491571  C 15.6119034283768 8.00244105491571  15.6114302297875 8.00244117202714  15.61095703125 8.00244140625  L 15.197197265625 8.00244140625  C 15.1815563889208 8.00244140625  15.168876953125 7.98976197045419  15.168876953125 7.97412109375  L 15.168876953125 5.885498046875  C 15.1737779288544 4.39846216264915  14.595081789561 2.96885593837806  13.55716796875 1.9039453125  C 12.7321123508105 1.05143460529325  11.655620403345 0.485695706108903  10.485546875 0.2896875  C 6.987421875 -0.313818359375  3.801953125 2.4227734375  3.801953125 5.97130859375  L 3.801953125 7.97412109375  C 3.801953125 7.98976197045419  3.78927368920419 8.00244140625  3.7736328125 8.00244140625  L 3.407451171875 8.00244140625  C 1.80531036111513 8.00259780422134  0.50660155486636 9.3014334003565  0.506601562499998 10.90357421875  L 0.506601562499998 19.88734375  C 0.506601562499998 21.489282355869  1.80522937670661 22.7879101700756  3.40716796875 22.7879101700756  L 15.579521484375 22.78791015625  C 17.1817432795434 22.7879101700756  18.48037109375 21.489282355869  18.48037109375 19.8873437638256  L 18.48037109375 10.874970703125  C 18.4803734804811 10.8734601705268  18.4803746738472 10.8719496362745  18.4803746738472 10.8704391017907  C 18.4803746738472 9.28648751795714  17.1963282108058 8.00244105491571  15.6123766269722 8.00244105491571  Z M 5.165859375 7.97412109375  L 5.16416015625 5.885498046875  C 5.16416015625 3.28484375  6.8866015625 1.56580078125  9.484140625 1.56580078125  C 10.7585546875 1.56580078125  11.718046875 1.963984375  12.583798828125 2.85494140625  C 13.430859375 3.72720703125  13.8035546875 4.66234375  13.8035546875 5.88521484375  L 13.8035546875 7.97412109375  C 13.8035546875 7.98976197045419  13.7908752517042 8.00244140625  13.775234375 8.00244140625  L 5.1941796875 8.00244140625  C 5.17853881079581 8.00244140625  5.165859375 7.98976197045419  5.165859375 7.97412109375  Z M 17.1215625 19.9156640625  L 17.1249609375 19.9156640625  C 17.1249609375 20.926982421875  16.622275390625 21.429384765625  15.61095703125 21  L 3.4111328125 21  C 2.55948707595672 21.429384765625  1.869091796875 20.7389894865433  1.869091796875 19.88734375  L 1.869091796875 11.115126953125  C 1.869091796875 10.1483643640389  2.65280772341387 9.3646484375  3.6195703125 9.3646484375  L 15.579521484375 9.3646484375  C 16.4311672209183 9.3646484375  17.1215625 10.0550437165817  17.1215625 10.906689453125  L 17.1215625 19.9156640625  Z "
+                      fill-rule="nonzero" fill="#3370ff" stroke="none" transform="matrix(1 0 0 1 345 324 )" />
+                  </g>
+                </svg> -->
+                <span class="icon iconfont icon-mima" style="color: #aaa"></span>  支付密码
+              </div>
+              <div nz-col [nzSpan]="10">定期更换支付密码有助于账号安全</div>
+              <div nz-col [nzSpan]="10">
+                <span *ngIf="ifHasPayPw; else elsePwd"><i nz-icon [nzType]="'check-circle'" [nzTheme]="'fill'"
+                    style="color: #52c41a"></i> 已设置</span>
+                <ng-template #elsePwd><i nz-icon [nzType]="'question-circle'" [nzTheme]="'fill'"
+                    style="color: #ccc"></i> 未设置</ng-template>
+              </div>
+            </div>
+          </nz-list-item-meta-title>
+        </nz-list-item-meta>
+        <div class="item-btn"><a (click)="edit('payPassword')">设置</a></div>
+      </nz-list-item>
     </nz-list>
 
   </nz-card>
-</div>
+</div>

src/app/routes/account/components/center/center.component.less

@@ -17,7 +17,7 @@
       right: 20px;
     }
     .item-btn {
-      width: 28px;
+      width: 36px;
       text-align: center;
     }
     .li-label {

src/app/routes/account/components/center/center.component.ts

@@ -53,6 +53,8 @@ export class AccountComponentsCenterComponent implements OnInit {
     },
   ];
   idx: any = 0;
+  defaultCompany: any = {};
+  ifHasPayPw = false;
   constructor(public service: AccountService, private modal: ModalHelper, private http: _HttpClient, private router: Router, private modalService: NzModalService,) {}
 
   ngOnInit() {
@@ -136,9 +138,32 @@ export class AccountComponentsCenterComponent implements OnInit {
   getInfo() {
     this.service.http.post(this.service.$api_get_current_user_info).subscribe((res) => {
       this.infoData = res.data;
+      // this.getDeafaultCompany();
+      this.getPayPw();
     });
   }
 
+  getDeafaultCompany() {
+    this.service.request(this.service.$api_getUserDefaultEnterpriseProject).subscribe(res => {
+      if (res === null) {
+        this.router.navigate(['/changeproject']);
+        return;
+      }
+      this.defaultCompany = res
+      if (res.projectId) {
+        this.getPayPw()                   
+      }
+    })
+  }
+
+  getPayPw() {
+    this.service.request(this.service.$api_isUserVerifyPassword, {}).subscribe(res => {
+      this.ifHasPayPw = res
+    })
+  }
+
+  
+
   edit(tpye: string) {
     if (tpye === 'phone') {
       const modalRef = this.modalService.create({
@@ -170,6 +195,10 @@ export class AccountComponentsCenterComponent implements OnInit {
       }
     });
     }
+
+    if (tpye === 'payPassword') {
+      this.router.navigate(['/account/edit-paypassword']);
+    }
     // if (tpye === 'info') {
     //   this.router.navigate(['/account/editInfo'], {
     //     queryParams: { realName: this.infoData.realName, certificateNumber: this.infoData.certificateNumber },

src/app/routes/account/components/edit-name/edit-name.component.ts

@@ -227,7 +227,7 @@ export class AccountComponentsEditNameComponent implements OnInit, AfterViewInit
   }
   submitForm() {
     const params = {
-      smsVerifyCode: this.sf.value.smsVerifyCode,
+      smsVerifyCode: this.sf?.value.smsVerifyCode,
     };
 
     this.service.http.post(this.service.$api_get_verifyPhone, params).subscribe((res) => {

src/app/routes/account/components/edit-password/edit-password.component.ts

@@ -1,5 +1,5 @@
 /*
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2021-12-27 10:30:56
@@ -9,14 +9,11 @@
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
 
-import { Component, Inject, OnInit, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { STChange, STColumn, STComponent, STData, STRequestOptions } from '@delon/abc/st';
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
 import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
 
-import { SFComponent, SFSchema, SFSelectWidgetSchema, SFUISchema } from '@delon/form';
-import { NzDrawerRef, NzDrawerService } from 'ng-zorro-antd/drawer';
 import { NzFormTooltipIcon } from 'ng-zorro-antd/form';
 import { NzModalRef } from 'ng-zorro-antd/modal';
 import { AccountService } from '../../services/account.service';
@@ -30,14 +27,13 @@ export class AccountComponentsCenterEditComponent implements OnInit {
   record: any;
   count = 0;
   type = 'create';
-  isVisibleView = false
+  isVisibleView = false;
   passwordVisible = false;
   passwordVisible2 = false;
   password: any;
   password2: any;
   interval$: any;
-  confirmationValidator =
- (control: FormControl): { [s: string]: boolean } => {
+  confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
     if (!control.value) {
       return { required: true };
     } else if (control?.value !== this.validateForm?.value?.passWord) {
@@ -51,7 +47,6 @@ export class AccountComponentsCenterEditComponent implements OnInit {
   };
   constructor(
     public router: Router,
-    public ar: ActivatedRoute,
     private modalRef: NzModalRef,
     private fb: FormBuilder,
     public service: AccountService,
@@ -61,19 +56,21 @@ export class AccountComponentsCenterEditComponent implements OnInit {
   ngOnInit() {
     this.initForm();
   }
-  initForm () {
-  this.validateForm = this.fb.group({
-    passWord: [null,
-          [
-        Validators.required,
-        Validators.maxLength(16),
-        Validators.minLength(8),
-        Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$')
-      ]],
-    passWordTo: [null, [ Validators.required, Validators.maxLength(16), Validators.minLength(8), this.confirmationValidator,]],
-    smsVerifyCode: [null, [Validators.required]],
-  });
-}
+  initForm() {
+    this.validateForm = this.fb.group({
+      passWord: [
+        null,
+        [
+          Validators.required,
+          Validators.maxLength(16),
+          Validators.minLength(8),
+          Validators.pattern('^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z-_]{8,16}$')
+        ]
+      ],
+      passWordTo: [null, [Validators.required, Validators.maxLength(16), Validators.minLength(8), this.confirmationValidator]],
+      smsVerifyCode: [null, [Validators.required]]
+    });
+  }
   destroyModal(): void {
     this.modalRef.destroy();
   }
@@ -84,28 +81,28 @@ export class AccountComponentsCenterEditComponent implements OnInit {
         this.service.msgSrv.success('发送成功');
         e.preventDefault();
         this.codeCountDown();
-      }else {
+      } else {
         this.service.msgSrv.success(res.msg);
       }
     });
   }
   save() {
-    if(!this.validateForm.valid) {
-      this.service.msgSrv.warning('必填项为空或格式错误，请检查！')
+    if (!this.validateForm.valid) {
+      this.service.msgSrv.warning('必填项为空或格式错误，请检查！');
       return;
     }
-    const params = {  
+    const params = {
       ...this.validateForm.value
     };
-    this.service.request(this.service.$api_set_phoneUpdatePassword, params).subscribe((res) => {
+    this.service.request(this.service.$api_set_phoneUpdatePassword, params).subscribe(res => {
       if (res) {
         this.service.msgSrv.success('修改密码成功！');
         this.isVisibleView = true;
         setTimeout(() => {
           this.tokenService.clear();
-          this.router.navigate(['/passport/login'])
-          this.modalRef.close()
-        }, 3000)
+          this.router.navigate(['/passport/login']);
+          this.modalRef.close();
+        }, 3000);
       }
     });
   }
@@ -120,11 +117,11 @@ export class AccountComponentsCenterEditComponent implements OnInit {
     }, 1000);
   }
   handleCancel() {
-     this.isVisibleView = false
- }
- handleOK() {
-   this.modalRef.close()
-   this.tokenService.clear();
-   this.router.navigate(['/passport/login'])
- }
+    this.isVisibleView = false;
+  }
+  handleOK() {
+    this.modalRef.close();
+    this.tokenService.clear();
+    this.router.navigate(['/passport/login']);
+  }
 }

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.html

@@ -0,0 +1,171 @@
+<page-header-wrapper [title]="''" [logo]="logo">
+  <ng-template #logo>
+      <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
+          <i nz-icon nzType="left" nzTheme="outline"></i>
+      </button>
+  </ng-template>
+</page-header-wrapper>
+<nz-card>
+  <div class="container">
+    <div>
+      <div style="display: flex; align-items: center; min-height: 150px">
+        <nz-steps [nzCurrent]="step" style="display: contents" [nzProgressDot]="progressTemplate">
+          <nz-step nzTitle="安全验证"></nz-step>
+          <nz-step nzTitle="重设密码"></nz-step>
+          <nz-step nzTitle="完成"></nz-step>
+        </nz-steps>
+        <ng-template #progressTemplate let-dot let-status="status" let-index="index">
+          <ng-container *ngIf="status === 'finish'; else finshTemplate">
+            <i nz-icon nzType="check" nzTheme="outline" style="color: #fff"></i>
+          </ng-container>
+          <ng-template #finshTemplate>
+            {{ index + 1 }}
+          </ng-template>
+        </ng-template>
+      </div>
+      <nz-card [nzBordered]="false">
+        <div style="width: 480px; margin: 0 auto" [ngSwitch]="step.toString()">
+          <div *ngSwitchCase="0">
+            <sf #step1sf *ngIf="step1Schema" [schema]="step1Schema" button="none" [layout]="'horizontal'">
+              <ng-template sf-template="smsVerifyCode" let-smsVerifyCode let-ui="ui" let-schema="schema">
+                <nz-input-group [nzSuffix]="suffixTemplateInfo">
+                  <input
+                    type="text"
+                    maxlength="6"
+                    nz-input
+                    placeholder="请输入验证码"
+                    [ngModel]="smsVerifyCode.formProperty.value"
+                    (ngModelChange)="smsVerifyCode.setValue($event)"
+                  />
+                </nz-input-group>
+              </ng-template>
+              <div nz-col [nzPush]="5">
+                <button
+                  nz-button
+                  type="submit"
+                  nzType="primary"
+                  (click)="nextStep()"
+                  [disabled]="!step1sf.valid"
+                  [nzLoading]="service.http.loading"
+                >
+                  下一步
+                </button>
+              </div>
+            </sf>
+          </div>
+
+          <div *ngSwitchCase="1">
+            <form nz-form [formGroup]="formGroup3" class="myForm">
+              <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired nzFor="passWord">设置支付密码</nz-form-label>
+                <nz-form-control nzSpan="18" [nzErrorTip]="passwordErrorTpl">
+                  <nz-input-group [nzSuffix]="pwdIconEye">
+                    <input
+                      nz-input
+                      [type]="isShowPwd ? 'text' : 'password'"
+                      formControlName="passWord"
+                      minlength="6"
+                      maxlength="6"
+                      (ngModelChange)="validateConfirmPassword()"
+                      placeholder="请输入支付密码"
+                    />
+                  </nz-input-group>
+                  <ng-template #pwdIconEye>
+                    <span (click)="isShowPwd = !isShowPwd">
+                      <ng-container *ngIf="isShowPwd; else showPwdTempalte">
+                        <i nz-icon nzType="eye" nzTheme="outline"></i>
+                      </ng-container>
+                      <ng-template #showPwdTempalte>
+                        <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
+                      </ng-template>
+                    </span>
+                  </ng-template>
+                  <ng-template #passwordErrorTpl let-control>
+                    <ng-container *ngIf="control.hasError('required')"> 请输入支付密码! </ng-container>
+                    <ng-container *ngIf="control.hasError('minlength') || control.hasError('pattern')  || control.hasError('confirm')">
+                      6位数字，不能为连续数字或者相同数字（如123456、111111）
+                    </ng-container>
+                  </ng-template>
+                </nz-form-control>
+              </nz-form-item>
+              <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired nzFor="passWordTo">重复支付密码</nz-form-label>
+                <nz-form-control nzSpan="18" nzDisableAutoTips [nzErrorTip]="confirmPasswordErrorTpl">
+                  <nz-input-group [nzSuffix]="confirmPwdIconEye">
+                    <input
+                      nz-input
+                      [type]="isShowConfirmPwd ? 'text' : 'password'"
+                      formControlName="passWordTo"
+                      minlength="6"
+                      maxlength="6"
+                      (ngModelChange)="validateConfirmPassword()"
+                      placeholder="请输入支付密码"
+                    />
+                  </nz-input-group>
+                  <ng-template #confirmPwdIconEye>
+                    <span (click)="isShowConfirmPwd = !isShowConfirmPwd">
+                      <ng-container *ngIf="isShowConfirmPwd; else showConfirmPwdTempalte">
+                        <i nz-icon nzType="eye" nzTheme="outline"></i>
+                      </ng-container>
+                      <ng-template #showConfirmPwdTempalte>
+                        <i nz-icon nzType="eye-invisible" nzTheme="outline"></i>
+                      </ng-template>
+                    </span>
+                  </ng-template>
+                  <ng-template #confirmPasswordErrorTpl let-control>
+                    <ng-container *ngIf="control.hasError('required')"> 请输入确认密码! </ng-container>
+                    <ng-container *ngIf="control.hasError('passWordTo')"> 两次输入的密码不一致! </ng-container>
+                  </ng-template>
+                </nz-form-control>
+              </nz-form-item>
+              <nz-form-item>
+                <nz-form-control nzSpan="18" nzOffset="6">
+                  <button
+                    [disabled]="!formGroup3.valid"
+                    [nzLoading]="service.http.loading"
+                    nz-button
+                    nzType="primary"
+                    (click)="formSubmit()"
+                    style="width: 74px"
+                  >
+                    确认
+                  </button>
+                </nz-form-control>
+              </nz-form-item>
+            </form>
+          </div>
+          <div *ngSwitchCase="2" class="success-card">
+            <div class="card-icon">
+              <i nz-icon nzType="check" nzTheme="outline" style="color: #fff; font-size: 20px"></i>
+            </div>
+            <p class="card-title">密码设置成功</p>
+            <p class="card-descr">请牢记您的新支付密码，3秒后自动跳转至个人中心...</p>
+            <!-- <button
+              nz-button
+              type="button"
+              nzType="primary"
+              nzSize="large"
+              class="mt-lg"
+              style="font-size: 14px"
+              [routerLink]="['/passport/login']"
+            >
+              立即登录
+            </button> -->
+          </div>
+          <div *ngSwitchDefault></div>
+        </div>
+      </nz-card>
+    </div>
+  </div>
+</nz-card>
+
+<ng-template #suffixTemplateInfo>
+  <ng-container *ngIf="count < 1; else intervalTemplate">
+    <span class="msg-btn" style="color: #3370ff; cursor: pointer" (click)="getMsgCode()">获取验证码</span>
+  </ng-container>
+  <ng-template #intervalTemplate>
+    <!-- {{ count > 0 ? '请等待' + count + 's' : ('app.register.get-verification-code' | translate) }} -->
+    {{ count > 0 ? '请等待' + count + 's' : ('app.register.get-verification-code') }}
+  </ng-template>
+</ng-template>
+<app-captcha #dun [phone]="phone" (done)="captchaDone($event)"></app-captcha>

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.less

@@ -0,0 +1,93 @@
+:host {
+  ::ng-deep {
+    page-grid {
+      background-color: #f0f3f7;
+
+      div.container {
+        width: 80%;
+        margin: 0 auto;
+        padding: 30px 1rem 1rem;
+      }
+    }
+
+    .ant-steps-item-process .ant-steps-item-icon {
+      background-color: #3370ff;
+      border-color: #3370ff;
+    }
+
+    .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-icon {
+      background: #3370ff;
+    }
+
+    .ant-steps-dot .ant-steps-item-icon,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-icon {
+      width: 32px;
+      height: 32px;
+      margin-left: 55px;
+      line-height: 32px;
+      border: 1px solid rgba(0, 0, 0, 0.25);
+    }
+
+    // 文本
+    .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
+      color: #000;
+    }
+
+    // 连接线
+    .ant-steps-dot .ant-steps-item-tail,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-tail {
+      top: 12px;
+      margin: 0 0 0 90px;
+    }
+
+    .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-tail::after {
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+
+    .ant-steps-dot .ant-steps-item-process .ant-steps-item-icon,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-process .ant-steps-item-icon {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+    }
+
+    .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-tail::after {
+      background-color: rgba(0, 0, 0, 0.25);
+    }
+
+    .ant-steps-dot .ant-steps-item-tail::after,
+    .ant-steps-dot.ant-steps-small .ant-steps-item-tail::after {
+      width: calc(100% - 62px);
+      height: 1.5px;
+      margin-left: 12px;
+    }
+  }
+}
+
+.success-card {
+  text-align: center;
+
+  .card-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    margin: auto;
+    background-color: #52c41a;
+    border-radius: 50%;
+  }
+
+  .card-title {
+    margin: 14px 0 0;
+    font-weight: bold;
+    font-size: 16px;
+    text-align: center;
+  }
+
+  .card-descr {
+    margin: 8px 0 0;
+    font-size: 14px;
+    text-align: center;
+  }
+}

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { AccountComponentsEditPayPasswordComponent } from './edit-paypassword.component';
+
+describe('AccountComponentsEditPayPasswordComponent', () => {
+  let component: AccountComponentsEditPayPasswordComponent;
+  let fixture: ComponentFixture<AccountComponentsEditPayPasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccountComponentsEditPayPasswordComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponentsEditPayPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/routes/account/components/edit-paypassword/edit-paypassword.component.ts

@@ -0,0 +1,237 @@
+import { AfterViewInit, Component, Inject, OnInit, Optional, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ReuseTabService } from '@delon/abc/reuse-tab';
+import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+import { SFComponent, SFSchema, SFTextareaWidgetSchema, SFTextWidgetSchema, SFUISchema } from '@delon/form';
+import { SettingsService } from '@delon/theme';
+import { CaptchaComponent } from 'src/app/shared/components/captcha';
+
+import { AccountService } from '../../services/account.service';
+
+@Component({
+  selector: 'app-account-components-edit-password',
+  templateUrl: './edit-paypassword.component.html',
+  styleUrls: ['./edit-paypassword.component.less'],
+})
+export class AccountComponentsEditPayPasswordComponent implements OnInit, AfterViewInit {
+  @ViewChild('dun', { static: false })
+  private dun!: CaptchaComponent;
+
+  step: 0 | 1 | 2 = 0;
+
+  step1Schema!: SFSchema;
+  ui!: SFUISchema;
+  @ViewChild('step1sf', { static: false })
+  step1sf!: SFComponent;
+
+  phone: string;
+
+  formGroup3!: FormGroup;
+  confirmPasswordValidator!: ValidatorFn;
+
+  isShowPwd = false;
+  isShowConfirmPwd = false;
+
+  count = 0;
+  interval$: any;
+
+  constructor(
+    private fb: FormBuilder,
+    public service: AccountService,
+    private route: ActivatedRoute,
+    private settingService: SettingsService,
+    private router: Router,
+    @Inject(ReuseTabService)
+    private reuseTabService: ReuseTabService,
+    @Optional()
+    @Inject(DA_SERVICE_TOKEN)
+    private tokenService: ITokenService,
+  ) {
+    this.phone = route.snapshot.queryParams.phone;
+  }
+
+  ngAfterViewInit(): void {
+    this.dun.init();
+  }
+
+  ngOnInit() {
+    if (this.phone) {
+      this.initStep1SF();
+    } else {
+      this.service.http.post(this.service.$api_get_current_user_info).subscribe((res) => {
+        if (res) {
+          this.phone = res.data?.phone;
+          this.initStep1SF();
+        }
+      });
+    }
+
+    this.confirmPasswordValidator = (control) => {
+      if (!control.value) {
+        return { error: true, required: true };
+      } else if (control.value !== this.formGroup3.controls.passWord.value) {
+        return { passWordTo: true, error: true };
+      }
+      return {};
+    };
+
+    this.formGroup3 = this.fb.group({
+      passWord: [
+        null,
+        [
+          Validators.required,
+          Validators.maxLength(6),
+          Validators.minLength(6),
+          Validators.pattern('([\\d]){6,6}'),
+          this.blurTestPw
+
+        ],
+      ],
+      passWordTo: [null, [this.confirmPasswordValidator, Validators.required, Validators.maxLength(6), Validators.minLength(6)]],
+      voucher: [null, [Validators.required]],
+    });
+  }
+
+  initStep1SF() {
+    this.step1Schema = {
+      properties: {
+        phone: {
+          title: '手机号',
+          type: 'string',
+          ui: {
+            widget: 'text',
+            defaultText: this.phone.toString(),
+          } as SFTextWidgetSchema,
+        },
+        smsVerifyCode: {
+          type: 'string',
+          title: '验证码',
+          ui: {
+            widget: 'custom',
+            errors: {
+              required: '请输入验证码',
+            },
+          } as SFTextareaWidgetSchema,
+        },
+      },
+      required: ['smsVerifyCode'],
+    };
+
+    this.ui = {
+      '*': { spanLabelFixed: 90, grid: { span: 16, gutter: 4 } },
+    };
+  }
+
+  nextStep() {
+    if (this.step1sf.valid) {
+      this.service.request(this.service.$api_get_verifyPhone, this.step1sf.value).subscribe((res) => {
+        if (res) {
+          this.formGroup3.patchValue(res, { onlySelf: true });
+          this.step = 1;
+          this.count = 0;
+          clearInterval(this.interval$);
+        }
+      });
+    }
+  }
+
+  formSubmit() {
+    for (const i in this.formGroup3.controls) {
+      if (true) {
+        this.formGroup3.controls[i].markAsDirty();
+        this.formGroup3.controls[i].updateValueAndValidity();
+      }
+    }
+
+    if (this.formGroup3.valid) {
+      const param = Object.assign({}, this.formGroup3.value);
+      this.service.http.post(this.service.$api_voucherUpdatePayPassword, param).subscribe((res) => {
+        if (res.success === true) {
+          this.step++;
+          setTimeout(() => {
+            // this.settingService.setUser({});
+            // // 清空路由复用信息
+            // this.reuseTabService.clear();
+            // // 设置用户Token信息
+            // this.tokenService.clear();
+            this.router.navigate(['/account/center']);
+          }, 3000);
+        }
+      });
+    }
+  }
+
+  getMsgCode() {
+    if (this.phone) {
+      this.getCode(`${this.service.$api_get_msg_code}`);
+    } else {
+      this.service.request(this.service.$api_get_current_user_info).subscribe((res) => {
+        this.phone = res.phone;
+        this.getCode(`${this.service.$api_get_msg_code}`);
+      });
+    }
+  }
+  goBack() {
+    window.history.go(-1);
+  }
+  getCode(url: string, params?: any) {
+    this.service.http.post(url, null, params).subscribe((res) => {
+      // code==503046 弹出网易盾
+      if (res.success && res.data.code === '1') {
+        this.service.msgSrv.success('发送成功');
+        this.codeCountDown();
+      } else if (res.data.code === '503046') {
+        this.dun.popUp();
+      } else {
+        this.service.msgSrv.success(res.sendResult);
+      }
+    });
+  }
+  /* code倒计时 */
+  codeCountDown() {
+    this.count = 59;
+    this.interval$ = setInterval(() => {
+      this.count -= 1;
+      if (this.count <= 0) {
+        clearInterval(this.interval$);
+      }
+    }, 1000);
+  }
+  /* 网易盾验证通过 */
+  captchaDone(validate: any) {
+    this.codeCountDown();
+  }
+
+  validateConfirmPassword(): void {
+    
+    setTimeout(() => this.formGroup3.controls.passWordTo.updateValueAndValidity());
+  }
+  // blurTestPw(){
+  //   const reg = /[^\d]/g
+  //   const val: any = this.formGroup3.controls.passWord.value
+  //   if(val.length === 6) {
+  //     const pattern = /([\d])\1{2,}/g
+  //     const pattern2 = /(?:(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){5}|(?:9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(?=3)|3(?=2)|2(?=1)|1(?=0)){5})\d/g   
+  //     if(pattern.test(val) || pattern2.test(val)){
+  //       return false
+  //     } else {
+  //       return true
+  //     } 
+  //   } else {
+  //     return false
+  //   }
+  // }
+  blurTestPw = (control: FormControl): { [s: string]: boolean } => {
+    if (!control.value) {
+      return { required: true };
+    } else if (control.value.length === 6) {
+      const pattern = /([\d])\1{2,}/g
+      const pattern2 = /(?:(?:0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)){5}|(?:9(?=8)|8(?=7)|7(?=6)|6(?=5)|5(?=4)|4(?=3)|3(?=2)|2(?=1)|1(?=0)){5})\d/g   
+      if(pattern.test(control.value) || pattern2.test(control.value)){
+        return { confirm: true, error: true };
+      }
+    }
+    return {};
+  };
+}

src/app/routes/account/services/account.service.ts

@@ -36,6 +36,15 @@ export class AccountService extends BaseService {
   $api_set_voucherUpdatePhone = `/api/mdc/cuc/userBasicInfo/forgetPassword/voucherUpdatePhone`;
   // 凭证修改密码
   $api_set_phoneUpdatePassword = `/api/mdc/cuc/userBasicInfo/phoneUpdatePassword`;
+  // 凭证修改设置身份密码
+  $api_voucherUpdatePayPassword = '/api/mdc/cuc/userVerify/forgetPassword/voucherUpdatePassword';
+  // 根据当前登录用户绑定的手机号码获取短信验证码
+  public $api_get_msg_code = `/api/mdc/pbc/smsSend/getSmVerificationCodeByToken`;
+  // 用户下默认企业项目
+  $api_getUserDefaultEnterpriseProject = '/api/mdc/cuc/enterpriseProject/getUserDefaultEnterpriseProject';
+  // 当前登录用户是否设置用户验证密码
+  $api_isUserVerifyPassword = '/api/mdc/cuc/userVerify/isUserVerifyPassword';
+
   constructor(public injector: Injector) {
     super(injector);
   }

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

@@ -1,14 +1,43 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
-import { fromEvent } from 'rxjs';
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { OnReuseDestroy, OnReuseInit, ReuseHookOnReuseInitType } from '@delon/abc/reuse-tab';
+import { SFComponent, SFSchema } from '@delon/form';
+import { SearchDrawerService } from '@shared';
+import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
+/**
+ * 列表基础组件
+ * 功能：
+ *  1、计算列表滚动高度（scrollY）
+ *      实现：
+ *        1、列表组件需继承BasicTableComponent，并且提供SearchDrawerService派生类
+ *        2、引入commom-table.less 样式文件
+ *        3、列表使用table-box class包裹。组件会自动减去layout-pro-header、page-header-wrapper和nz-tabs-nav标签的高度，以及header_box和height_box class的高度，最后减去deviationHeight的偏移高度
+ *  2、提供筛选抽屉，并返回sf实例（sf）
+ *      实现：
+ *        1、列表组件需继承BasicTableComponent，并且提供SearchDrawerService派生类
+ *        2、实例化schema，及给schema赋值sf配置
+ *        3、重写search()方法。当筛选抽屉触发查询时会调用这个方法
+ *      提供：
+ *        1、抽屉的sf实例
+ *        2、sf.value的数据=>sfValue
+ */
 @Component({
   template: ''
 })
-export class BasicTableComponent implements AfterViewInit {
+export class BasicTableComponent implements AfterViewInit, OnDestroy, OnReuseDestroy, OnReuseInit {
   scrollY = '400px';
 
-  constructor() {}
+  sf!: SFComponent;
+  sfValue: Record<string, any> = {};
+  schema: SFSchema = {};
+
+  deviationHeight = 0;
+
+  constructor(public searchDrawerService: SearchDrawerService) {}
+  _onReuseInit(type?: ReuseHookOnReuseInitType): void {
+    this.search();
+  }
 
   ngAfterViewInit(): void {
     setTimeout(() => {
@@ -21,20 +50,82 @@ export class BasicTableComponent implements AfterViewInit {
       });
   }
 
+  _onReuseDestroy(): void {
+    // this.drawer.forEach(sub => sub.unsubscribe());
+  }
+
+  ngOnDestroy(): void {
+    this.searchDrawerService.unsubscribe();
+  }
+
+  openDrawer() {
+    if (this.searchDrawerService.drawer?.length > 0) {
+      this.searchDrawerService.create(this.sfValue, this.schema);
+    } else {
+      const drawer = this.searchDrawerService.create(this.sfValue, this.schema);
+      this.searchDrawerService.drawer.push(
+        drawer.initEvent.subscribe((sf: SFComponent) => {
+          if (sf) {
+            this.sf = sf;
+          }
+        })
+      );
+      this.searchDrawerService.drawer.push(
+        drawer.closeEvent.subscribe((res: Record<string, any>) => {
+          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];
     if (windowHeight && header) {
       let scrollY = windowHeight - header.clientHeight - 35 - 49;
+      // 剔除页头高度
       const headerWrapper = document.getElementsByTagName('page-header-wrapper')?.[0];
       if (headerWrapper) {
         scrollY -= headerWrapper.clientHeight;
       }
-      const tabset = document.getElementsByTagName('nz-tabset')?.[0];
+      // 计算所有tabs高度
+      const tabset = document.getElementsByTagName('nz-tabs-nav');
+      let tabsetHeight = 0;
+      for (let index = 0; index < tabset.length; index++) {
+        tabsetHeight += tabset[index].clientHeight;
+      }
       if (tabset) {
-        scrollY -= tabset.clientHeight;
+        scrollY -= tabsetHeight;
+      }
+      // 剔除高度容器
+      const headerBox = document.getElementsByClassName('header_box');
+      let headerBoxHeight = 0;
+      for (let index = 0; index < headerBox.length; index++) {
+        headerBoxHeight += headerBox[index].clientHeight;
+      }
+      if (headerBox) {
+        scrollY -= headerBoxHeight;
+      }
+
+      // 剔除高度容器
+      const heightBox = document.getElementsByClassName('height_box');
+      let heightBoxHeight = 0;
+      for (let index = 0; index < heightBox.length; index++) {
+        heightBoxHeight += heightBox[index].clientHeight;
+      }
+      if (heightBox) {
+        scrollY -= heightBoxHeight;
+      }
+
+      if (typeof this.deviationHeight === 'number') {
+        scrollY -= this.deviationHeight;
       }
       this.scrollY = scrollY + 'px';
     }
   }
+
+  search() {}
 }

src/app/routes/commom/index.ts

@@ -0,0 +1 @@
+export * from './components/basic-table/basic-table.component';

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,77 @@
       .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;
+        }
+      }
+
+    }
+
+    .double_tabset_box {
+      margin    : -24px -24px 0;
+      background: #ffffff;
+
+      .tab_header {
+        .page_title {
+          font-weight: bold;
+          font-size  : 17px;
+
+          .driver {
+            color       : #ff4d4f;
+            margin-left : 17px;
+            margin-right: 6px;
+          }
+        }
+      }
+
+      .header_tab {
+
+        nz-tabs-nav {
+          margin-bottom: 0;
+        }
+      }
     }
 
     .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 +99,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;
     }
 
@@ -66,5 +112,42 @@
     .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
       line-height: 21px;
     }
+
+    .text-truncate {
+      white-space: normal;
+    }
+
+    // 强制头部居中
+    .ant-table-container table>thead>tr>.options {
+      text-align: center !important;
+    }
   }
 }
+
+
+.header_box {
+  display        : flex;
+  align-items    : center;
+  justify-content: space-between;
+  min-height     : 47px;
+
+  .page_title {
+    font-weight: bold;
+    font-size  : 17px;
+
+    .driver {
+      color       : #ff4d4f;
+      margin-left : 17px;
+      margin-right: 6px;
+    }
+  }
+}
+
+.height_box {}
+
+.filter-box {
+  .com-input {
+    width : 150px;
+    height: 32PX;
+  }
+}

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

@@ -0,0 +1,17 @@
+:host::ng-deep {
+    nz-card {
+        margin: -8px -8px 0 !important
+    }
+
+    .height_box {
+        margin-bottom: 18px !important;
+    }
+}
+
+.total-footer {
+    position   : absolute;
+    bottom     : 0px;
+    height     : 32px;
+    margin     : 4px 8px;
+    line-height: 32px;
+}

src/app/routes/contract-management/components/contract-detail/contract-detail.component.ts

@@ -22,11 +22,8 @@ import { ContractManagementService } from '../../services/contract-management.se
 })
 export class ContractManagementDetailComponent implements OnInit {
   constructor(
-    private nzModalService: NzModalService,
     public service: ContractManagementService,
-    public route: ActivatedRoute,
-    private datePipe: DatePipe,
-    private router: Router
+    public route: ActivatedRoute
   ) {}
   textStatus = '合同详情';
   name: any;

src/app/routes/contract-management/components/contract-frame/contract-frame.component.html

@@ -80,7 +80,8 @@
     (change)="stChange($event)"
   >
     <ng-template st-row="contractCode" let-item let-index="index">
-      <a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus == '2'" (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus !== '2'" [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
     </ng-template>
   </st>
 </nz-card>

src/app/routes/contract-management/components/contract-list/contract-list.component.html

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2021-12-07 15:57:49
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-23 20:11:50
+ * @LastEditTime : 2022-05-07 17:52:57
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-list\\contract-list.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -51,8 +51,8 @@
   <st #st [data]="service.$api_listDetailed_page" [columns]="columns" [req]="{  params: reqParams }" [loading]="false"
     [scroll]="{ x: '1200px', y: '370px' }" (change)="stChange($event)">
     <ng-template st-row="contractCode" let-item let-index="index">
-      <a (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
-      <!-- <a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a> -->
+      <a *ngIf="item.esignFlowStatus == '2'" (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus !== '2'" [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
     </ng-template>
     <ng-template st-row="signingObject" let-item let-index="index">
       <span *ngIf="item.signingObject == 0"></span>

src/app/routes/contract-management/components/contract-partner/contract-partner.component.html

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-01-07 13:29:57
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-24 10:08:28
+ * @LastEditTime : 2022-05-07 17:56:08
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-partner\\contract-partner.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -80,7 +80,8 @@
     (change)="stChange($event)"
   >
     <ng-template st-row="contractCode" let-item let-index="index">
-      <a [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus == '2'" (click)="service.openURL(item?.contractFilePath)">{{ item?.contractCode }}</a>
+      <a *ngIf="item.esignFlowStatus !== '2'" [routerLink]="'/contract-management/index/detail/' + item.id">{{ item?.contractCode }}</a>
     </ng-template>
   </st>
 </nz-card>

src/app/routes/contract-management/components/contract-template-detail/contract-template-detail.component.ts

@@ -5,7 +5,7 @@ import { OnChanges } from '@angular/core';
  * @Author       : Shiming
  * @Date         : 2022-01-05 11:01:55
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-03-30 10:45:19
+ * @LastEditTime : 2022-05-07 14:28:16
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\contract-management\\components\\contract-template-detail\\contract-template-detail.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -87,7 +87,6 @@ export class ContractManagementTemplateTextComponent implements OnInit {
             widget: 'select',
             placeholder: '请选择',
             change: (tag: any, org: any) => {
-              console.log(tag);
               switch (tag) {
                 case 'MX':
                   this.Types = [
@@ -96,8 +95,7 @@ export class ContractManagementTemplateTextComponent implements OnInit {
                     { label: '运单合同', value: '3' },
                     { label: '运单补充协议', value: '4' },
                     { label: '委托代收合同', value: '5' },
-                    { label: '电子提货单', value: '10' },
-                    { label: '电子卸货单', value: '11' },
+                    { label: '权力义务转让协议', value: '10' },
                   ];
                   this.sf.getProperty('/contractType')!.schema.enum = this.Types;
                   this.sf.getProperty('/contractType')!.widget.reset(this.Types);
@@ -178,7 +176,7 @@ export class ContractManagementTemplateTextComponent implements OnInit {
           }
         }
       },
-      required: ['templateName', 'templateType']
+      required: ['templateName', 'templateType', 'contractType']
     };
     this.ui = {
       '*': {
@@ -206,14 +204,70 @@ export class ContractManagementTemplateTextComponent implements OnInit {
     };
   }
   initData(url: string) {
-    console.log('编辑');
-
     this.service.request(url, { id: this.route.snapshot.params.id }).subscribe(res => {
       if (res) {
         this.detailList = res;
         this.title = this.detailList?.templateName;
         this.sfdata = res;
         this.sfdata2 = res;
+    
+        switch (res.templateType) {
+          case 'MX':
+            let Types1 = [
+              { label: '订单合同', value: '1' },
+              { label: '订单补充协议', value: '2' },
+              { label: '运单合同', value: '3' },
+              { label: '运单补充协议', value: '4' },
+              { label: '委托代收合同', value: '5' },
+              { label: '权力义务转让协议', value: '10' },
+            ];
+            setTimeout(() => {
+              if (this.sf) {
+                this.sf.getProperty('/contractType')!.schema.enum = Types1;
+                this.sf.getProperty('/contractType')!.widget.reset(Types1);
+                if (res.contractType) {
+                  this.sf.setValue('/contractType', res.contractType);
+                }
+              }
+            });
+
+            return;
+            break;
+          case 'KJ':
+            const Types2 = [
+              { label: '网络货物运输服务合同', value: '6' },
+              { label: '运输服务承揽合同', value: '7' }
+            ];
+            setTimeout(() => {
+              if (this.sf) {
+                this.sf.getProperty('/contractType')!.schema.enum = Types2;
+                this.sf.getProperty('/contractType')!.widget.reset(Types2);
+                if (res.contractType) {
+                  this.sf.setValue('/contractType', res.contractType);
+                }
+              }
+            });
+            return;
+            break;
+          case 'HHR':
+            const Types3 = [
+              { label: '企业合伙人入驻合同', value: '8' },
+              { label: '个人合伙人入驻合同', value: '9' }
+            ];
+            setTimeout(() => {
+              if (this.sf) {
+                this.sf.getProperty('/contractType')!.schema.enum = Types3;
+                this.sf.getProperty('/contractType')!.widget.reset(Types3);
+                if (res.contractType) {
+                  this.sf.setValue('/contractType', res.contractType);
+                }
+              }
+            });
+            return;
+            break;
+          default:
+            break;
+        }
       }
     });
   }
@@ -222,22 +276,26 @@ export class ContractManagementTemplateTextComponent implements OnInit {
   }
 
   save() {
-    // if (!this.sf.value.templateName || !this.sf.value.templateType || !this.sf2.value.templateContent || !this.title) {
-    //   this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
-    //   return;
-    // }
-    // if (this.sf.value.templateType == 'MX') {
-    //   if (this.sf.value.contractType == '') {
-    //     this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
-    //     return;
-    //   }
-    // }
+    if (
+      !this.sf?.value.templateName ||
+      !this.sf?.value.templateType ||
+      !this.sf2.value.templateContent ||
+      !(this.title || this.detailList.templateName)
+    ) {
+      this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
+      return;
+    }
+    if (this.sf?.value.templateType == 'MX') {
+      if (this.sf?.value.contractType == '') {
+        this.service.msgSrv.error('必填参数为空，请检查再重新保存！');
+        return;
+      }
+    }
     const params = {
-      ...this.sf.value,
+      ...this.sf?.value,
       ...this.sf2.value,
-      templateTitle: this.title || this.detailList.templateName
+      templateTitle: this.detailList.templateName || this.title
     };
-    console.log(params);
     this.service.request(this.service.$api_save_contractTemplate, params).subscribe((res: any) => {
       if (res) {
         this.service.msgSrv.success('保存成功！');
@@ -245,4 +303,5 @@ export class ContractManagementTemplateTextComponent implements OnInit {
       }
     });
   }
+  EditType() {}
 }

src/app/routes/contract-management/components/contract-template-frame/contract-template-frame.component.ts

@@ -125,6 +125,7 @@ export class ContractManagementTemplateFrameComponent implements OnInit {
       {
         title: '合同模板名称',
         className: 'text-center',
+        width: '300px',
         render: 'templateName'
       },
       {
@@ -135,7 +136,7 @@ export class ContractManagementTemplateFrameComponent implements OnInit {
       },
       {
         title: '合同类型',
-        width: '100px',
+        width: '200px',
         className: 'text-center',
         index: 'contractTypeLabel'
       },

src/app/routes/contract-management/components/contract-template-partner/contract-template-partner.component.ts

@@ -125,6 +125,7 @@ export class ContractManagementTemplatePartnerComponent implements OnInit {
       {
         title: '合同模板名称',
         className: 'text-center',
+        width: '300px',
         render: 'templateName'
       },
       {
@@ -135,7 +136,7 @@ export class ContractManagementTemplatePartnerComponent implements OnInit {
       },
       {
         title: '合同类型',
-        width: '100px',
+        width: '200px',
         className: 'text-center',
         index: 'contractTypeLabel'
       },

src/app/routes/contract-management/components/contract-template/contract-template.component.ts

@@ -125,6 +125,7 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
       {
         title: '合同模板名称',
         className: 'text-center',
+        width: '300px',
         render: 'templateName'
       },
       {
@@ -135,7 +136,7 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
       },
       {
         title: '合同类型',
-        width: '100px',
+        width: '200px',
         className: 'text-center',
         index: 'contractTypeLabel'
       },
@@ -244,7 +245,7 @@ export class ContractManagementTemplateDetailComponent implements OnInit {
         this.service.request(this.service.$api_deletebatch_contractTemplate, [value.id]).subscribe(res => {
           if (res) {
             this.service.msgSrv.success('删除成功！');
-            this.st.reload(1)
+            this.st.reload()
           }
         })
     });

src/app/routes/contract-management/components/index/index.component.html

@@ -9,15 +9,16 @@
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 
+
 <page-header-wrapper title="合同管理" [tab]="tpTab">
 </page-header-wrapper>
 <ng-template #tpTab>
   <nz-tabset [(nzSelectedIndex)]="selectedIndex">
-    <nz-tab nzTitle="明细合同">
+    <nz-tab nzTitle="明细合同" *ngIf="isShowDetail">
       <app-contract-management-contract-list></app-contract-management-contract-list>
     </nz-tab>
-    <nz-tab nzTitle="框架合同">
-      <app-contract-management-contract-frame></app-contract-management-contract-frame>
+    <nz-tab nzTitle="框架合同"*ngIf="isShowFrame">
+        <app-contract-management-contract-frame ></app-contract-management-contract-frame>
     </nz-tab>
     <nz-tab nzTitle="合伙人合同">
       <app-contract-management-contract-partner></app-contract-management-contract-partner>

src/app/routes/contract-management/components/index/index.component.ts

@@ -1,5 +1,5 @@
 /*
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2022-01-07 13:27:10
@@ -10,18 +10,24 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { ACLService } from '@delon/acl';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 
 @Component({
   selector: 'app-supply-management-index',
-  templateUrl: './index.component.html',
+  templateUrl: './index.component.html'
 })
 export class ContractManagementIndexComponent implements OnInit {
   selectedIndex = 0;
-  
-  constructor(private http: _HttpClient, private modal: ModalHelper) { }
-
-  ngOnInit(): void { }
+  isShowDetail = false;
+  isShowFrame = false;
 
+  constructor(private http: _HttpClient, private modal: ModalHelper, private acl: ACLService) {
+    const acls = acl.data.abilities || [];
+    this.isShowDetail =acl.data.full || !!acls.find(acl => acl === 'CONTRACT-INDEX-searchDetail');
+    this.isShowFrame =acl.data.full || !!acls.find(acl => acl === 'CONTRACT-INDEX-listFrame');
+    
+  }
 
+  ngOnInit(): void {}
 }

src/app/routes/contract-management/components/policy/policy.component.ts

@@ -34,7 +34,7 @@ export class ContractManagementPolicyComponent implements OnInit {
    */
   get reqParams() {
     const params: any = {
-      ...(this.sf && this.sf.value)
+      ...(this.sf && this.sf?.value)
     };
     delete params.expand;
     return params;

src/app/routes/contract-management/contract-management-routing.module.ts

@@ -1,5 +1,5 @@
 /*
- * @Description  : 
+ * @Description  :
  * @Version      : 1.0
  * @Author       : Shiming
  * @Date         : 2022-01-04 21:05:49
@@ -19,12 +19,16 @@ import { ContractManagementIndexComponent } from './components/index/index.compo
 import { ContractManagementPolicyComponent } from './components/policy/policy.component';
 import { ContractManagementTemplateComponent } from './components/template/template.component';
 const routes: Routes = [
-  { path: 'index', component: ContractManagementIndexComponent },
+  { path: 'index', component: ContractManagementIndexComponent, data: { guard: { ability: ['CONTRACT-INDEX-searchDetail'] } } },
   { path: 'index/detail/:id', component: ContractManagementDetailComponent },
-  { path: 'template', component: ContractManagementTemplateComponent },
-  { path: 'template/text/:id', component: ContractManagementTemplateTextComponent },
-  { path: 'policy', component: ContractManagementPolicyComponent },
-  { path: 'partner', component: ContractManagementPartnerComponent },
+  { path: 'template', component: ContractManagementTemplateComponent, data: { guard: { ability: ['CONTRACT-TEMPLATE-search'] } } },
+  {
+    path: 'template/text/:id',
+    component: ContractManagementTemplateTextComponent,
+    data: { guard: { ability: ['CONTRACT-TEMPLATE-detail'] } }
+  },
+  { path: 'policy', component: ContractManagementPolicyComponent, data: { guard: { ability: ['CONTRACT-POLICY-search'] } } },
+  { path: 'partner', component: ContractManagementPartnerComponent }
 ];
 
 @NgModule({

src/app/routes/dashboard/dashboard.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.less']
+  template: ''
 })
 export class DashboardComponent {}

src/app/routes/datatable/components/busitable/busiindex/busiindex.component.html

@@ -1,11 +1,21 @@
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-21 13:49:21
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-28 20:09:34
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\busitable\\busiindex\\busiindex.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
 <!-- 页头 -->
 <page-header-wrapper [title]="'业务报表'"></page-header-wrapper>
-<nz-card nzTitle="运多星平台业务情况" [nzExtra]="extraTemplate">
+<nz-card nzTitle="运多星平台业务情况" [nzExtra]="extraTemplate" acl  [acl-ability]="['busiindex-tabel']">
   <ng-template #extraTemplate>
     <div class="chooseBox">
       <button nz-button nzType="primary" (click)="exportFun()">导出</button>
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl  [acl-ability]="['busiindex-tabel']">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" >
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
           <label nz-radio-button nzValue="date">日</label>
@@ -23,11 +33,11 @@
     [scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
     [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }"></st>
 </nz-card>
-<nz-card nzTitle="业绩报表" [nzExtra]="extraTemplate01">
+<nz-card nzTitle="业绩报表" [nzExtra]="extraTemplate01" acl  [acl-ability]="['busiindex-report']">
   <ng-template #extraTemplate01>
     <div class="chooseBox">
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()" acl  [acl-ability]="['busiindex-report']">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()" >
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
         </nz-radio-group>

src/app/routes/datatable/components/compliance/index/curve/curve.component.ts

@@ -1,3 +1,13 @@
+/*
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-28 20:27:07
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-05-07 10:16:08
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\index\\curve\\curve.component.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
 import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { G2MiniAreaClickItem } from '@delon/chart/mini-area';
 
@@ -69,7 +79,7 @@ export class ComplianceCurveComponent implements OnInit,OnChanges {
     this.chart.axis('proportion', {
       label: {
         formatter: (val: any) => {
-          return val*100+ ' %';
+          return (val*100).toFixed(0)+ ' %';
         },
       },
     });

src/app/routes/datatable/components/compliance/index/index.component.html

@@ -24,7 +24,7 @@
 
 <div nz-row [nzGutter]="16">
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'订单合格率'" [bordered]="true" [total]="cardData1?.proportion" [footer]="footer1" contentHeight="46">
+    <g2-card [title]="'订单合格率'" [bordered]="true" [total]="cardData1?.proportion || '0'" [footer]="footer1" contentHeight="46">
       <ng-template #footer1>
         <div class="card-f">
           <span class="card-f-l">合格：{{cardData1?.leftQuantity}}</span> <span>不合格：{{cardData1?.rightQuantity}}</span>
@@ -33,7 +33,7 @@
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'货源单占比'" [bordered]="true" [total]="cardData2?.proportion" [footer]="footer2" contentHeight="46">
+    <g2-card [title]="'货源单占比'" [bordered]="true" [total]="cardData2?.proportion|| '0'" [footer]="footer2" contentHeight="46">
       <ng-template #footer2>
         <div class="card-f">
           <span class="card-f-l">货源单：{{cardData2?.leftQuantity}}</span> <span>合同单：{{cardData2?.rightQuantity}}</span>
@@ -42,7 +42,7 @@
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'运费直付占比'" [bordered]="true" [total]="cardData3?.proportion" [footer]="footer3" contentHeight="46">
+    <g2-card [title]="'运费直付占比'" [bordered]="true" [total]="cardData3?.proportion|| '0'" [footer]="footer3" contentHeight="46">
       <ng-template #footer3>
         <div class="card-f">
           <span class="card-f-l">司机：{{cardData3?.leftQuantity}}</span> <span>车队长：{{cardData3?.rightQuantity}}</span>
@@ -51,7 +51,7 @@
     </g2-card>
     </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'付款及时率'" [bordered]="true" [total]="cardData4?.proportion" [footer]="footer4" contentHeight="46">
+    <g2-card [title]="'付款及时率'" [bordered]="true" [total]="cardData4?.proportion|| '0'" [footer]="footer4" contentHeight="46">
       <ng-template #footer4>
         <div class="card-f">
           <span class="card-f-l">准时：{{cardData4?.leftQuantity}}</span> <span>逾期：{{cardData4?.rightQuantity}}</span>

src/app/routes/datatable/components/compliance/index/index.component.ts

@@ -47,27 +47,30 @@ export class DatatableComplianceIndexComponent implements OnInit {
       time:this.time
     }
     this.service.request(this.service.$api_getBillRateQualified, params).subscribe(res => {
+
         if (res) {
          this.cardData1 = res;
-         this.cardData1.proportion = this.cardData1.proportion*100 +'%'
+         console.log(this.cardData1);
+         
+         this.cardData1.proportion = (this.cardData1?.proportion*100).toFixed(2) +'%'
         }
     });
     this.service.request(this.service.$api_getBillRateProportion, params).subscribe(res => {
         if (res) {
          this.cardData2 = res;
-         this.cardData2.proportion = this.cardData2.proportion*100 +'%'
+         this.cardData2.proportion = (this.cardData2?.proportion*100).toFixed(2) +'%'
         }
     });
     this.service.request(this.service.$api_getBillRateDirectPayment, params).subscribe(res => {
         if (res) {
          this.cardData3 = res;
-         this.cardData3.proportion = this.cardData3.proportion*100 +'%'
+         this.cardData3.proportion = (this.cardData3?.proportion*100).toFixed(2) +'%'
         }
     });
     this.service.request(this.service.$api_getBillTimelyPayment, params).subscribe(res => {
         if (res) {
          this.cardData4 = res;
-         this.cardData4.proportion = this.cardData4.proportion*100 +'%'
+         this.cardData4.proportion = (this.cardData4?.proportion*100).toFixed(2) +'%'
         }
     });
 

src/app/routes/datatable/components/compliance/salesman/salesman.component.ts

@@ -195,7 +195,7 @@ export class DatatableComplianceSalesmanComponent implements OnInit {
     differenceInCalendarDays(current, this.today) > 0;
 
     export() {
-      // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
+      // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf?.value, {});
     }
   search() {
     this.st?.load(1)

src/app/routes/datatable/components/customtable/customindex/customindex.component.html

@@ -4,96 +4,78 @@
  * @Author       : Shiming
  * @Date         : 2022-04-06 13:20:56
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-19 15:52:16
+ * @LastEditTime : 2022-04-29 17:55:02
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\customtable\\customindex\\customindex.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 <!-- 页头 -->
 <page-header-wrapper [title]="'客户报表'"></page-header-wrapper>
-<div nz-row [nzGutter]="16">
+<div nz-row [nzGutter]="16" acl [acl-ability]="['customindex-statisticsTotal']">
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'货主'" [bordered]="true" [total]="hzData?.total || '0'" [footer]="'已认证' + ' ' + hzData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'货主'" [bordered]="true" [total]="hzData?.total || '0'"
+      [footer]="'已认证' + ' ' + hzData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total || '0'" [footer]="'已认证' + ' ' + hhrData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'合伙人'" [bordered]="true" [total]="hhrData?.total || '0'"
+      [footer]="'已认证' + ' ' + hhrData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total || '0'" [footer]="'已认证' + ' ' + sjData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'司机'" [bordered]="true" [total]="sjData?.total || '0'"
+      [footer]="'已认证' + ' ' + sjData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total || '0'" [footer]="'已认证'  + ' '+ clData?.auditPassTotal" contentHeight="46">
+    <g2-card [title]="'车辆'" [bordered]="true" [total]="clData?.total || '0'"
+      [footer]="'已认证'  + ' '+ clData?.auditPassTotal" contentHeight="46">
     </g2-card>
   </div>
 </div>
-<nz-card nzTitle="客户报表" [nzExtra]="extraTemplate">
+<nz-card nzTitle="客户报表" [nzExtra]="extraTemplate" acl [acl-ability]="['customindex-client']">
   <ng-template #extraTemplate>
     <div class="chooseBox">
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()"  acl  [acl-ability]="['customindex-client']">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
           <label nz-radio-button nzValue="date">日</label>
           <label nz-radio-button nzValue="define">自定义</label>
         </nz-radio-group>
         <div class="dateBox">
-          <nz-date-picker
-            [(ngModel)]="date"
-            [nzMode]="mode"
-            [nzFormat]="dateFormat"
-            *ngIf="mode !== 'define'"
-            [nzDisabledDate]="disabledDate"
-            (ngModelChange)="onChange($event)"
-          ></nz-date-picker>
-          <nz-range-picker
-            [(ngModel)]="defineDate"
-            [nzFormat]="dateFormat"
-            *ngIf="mode === 'define'"
-            [nzDisabledDate]="disabledDate"
-            (ngModelChange)="onChange($event)"
-          ></nz-range-picker>
+          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'"
+            [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
+          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'"
+            [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
         </div>
       </div>
     </div>
   </ng-template>
-  <st
-    #st
-    multiSort
-    [columns]="columns"
-    [ps]="20"
-    [data]="reportData"
-    [scroll]="{ x: '1200px' }"
+  <st #st multiSort [columns]="columns" [ps]="20" [data]="reportData" [scroll]="{ x: '1200px' }"
     [res]="{ reName: { list: 'data', total: 'data.total' } }"
-    [page]="{ show: false, showSize: false, pageSizes: [20, 50, 100] }"
-  >
-  <ng-template  st-row="type"  let-item>
+    [page]="{ show: false, showSize: false, pageSizes: [20, 50, 100] }">
+    <ng-template st-row="type" let-item>
       <div *ngIf="item.type == '1'">货主</div>
       <div *ngIf="item.type == '2'">合伙人</div>
       <div *ngIf="item.type == '3'">司机</div>
       <div *ngIf="item.type == '4'">车辆</div>
-  </ng-template>
-</st>
+    </ng-template>
+  </st>
 </nz-card>
-<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate01">
+<nz-card nzTitle="用户新增报表" [nzExtra]="extraTemplate01" acl [acl-ability]="['customindex-totalAdd']">
   <ng-template #extraTemplate01>
     <div class="chooseBox">
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext2()" acl  [acl-ability]="['customindex-totalAdd']">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext2()">
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
         </nz-radio-group>
         <div class="dateBox">
-          <nz-date-picker
-            [nzDisabledDate]="disabledDate"
-            [(ngModel)]="dateNext"
-            [nzMode]="modeNext"
-            (ngModelChange)="onChangeNext($event)"
-          ></nz-date-picker>
+          <nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext"
+            (ngModelChange)="onChangeNext($event)"></nz-date-picker>
         </div>
       </div>
     </div>
   </ng-template>
   <app-datatable-customindex-curve #curve [chartData]="chartData"></app-datatable-customindex-curve>
-</nz-card>
+</nz-card>

src/app/routes/datatable/components/customtable/driver/driver.component.ts

@@ -153,7 +153,7 @@ export class DatatableDriverComponent implements OnInit {
     differenceInCalendarDays(current, this.today) > 0;
 
   export() {
-    // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
+    // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf?.value, {});
   }
   search() {
     this.st?.load(1)

src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts

@@ -313,7 +313,7 @@ export class DatatableMancustomtableComponent implements OnInit {
     differenceInCalendarDays(current, this.today) > 0;
 
   export() {
-    // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
+    // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf?.value, {});
   }
   search() {
     this.st?.load(1);

src/app/routes/datatable/components/customtable/owner/owner.component.ts

@@ -165,7 +165,7 @@ export class DatatableOwnerComponent implements OnInit {
     differenceInCalendarDays(current, this.today) > 0;
 
     export() {
-      // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
+      // this.service.downloadFile(this.service.$api_exportUploadBill, this.sf?.value, {});
     }
   search() {
     this.st?.load(1)

src/app/routes/datatable/components/dataindex/dataindex.component.html

@@ -1,19 +1,40 @@
-<!-- 页头 -->
-<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
+<!--
+ * @Description  :
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-28 20:27:07
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-29 18:03:04
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\dataindex\\dataindex.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
 <div nz-row [nzGutter]="16">
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'客户预存款总额'" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
+    <g2-card [title]="AdvanceDepositTitle" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
       [footer]="AdvanceDepositFooter" contentHeight="46">
+      <ng-template #AdvanceDepositTitle>
+        <p class="mini_area_title">
+          <span class="title">客户预存款总额</span>
+          <span class="subtitle">完成率 <span class="percent">32.12%</span></span>
+        </p>
+      </ng-template>
       <ng-template #AdvanceDepositFooter>
-        <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
+        <g2-custom #AdvanceDeposit></g2-custom>
+        <!-- <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
           (clickItem)="handleClick($event)">
-        </g2-mini-area>
+        </g2-mini-area> -->
       </ng-template>
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'业绩量总额'" [bordered]="true" [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'"
-      [footer]="PerformanceVolumeFooter" contentHeight="46">
+    <g2-card [title]="PerformanceVolumeTitle" [bordered]="true"
+      [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'" [footer]="PerformanceVolumeFooter" contentHeight="46">
+      <ng-template #PerformanceVolumeTitle>
+        <p class="mini_area_title">
+          <span class="title">业绩量总额</span>
+          <span class="subtitle">完成率 <span class="percent">32.12%</span></span>
+        </p>
+      </ng-template>
       <ng-template #PerformanceVolumeFooter>
         <g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []"
           (clickItem)="handleClick($event)">
@@ -22,20 +43,30 @@
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'司机应付总额'" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'" [footer]="footer"
-      contentHeight="46">
-      <ng-template #footer>
-        <g2-mini-area line color="#cceafe" height="45" [data]="totalFreight?.list || []"
+    <g2-card [title]="FreightTitle" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'"
+      [footer]="Freightfooter" contentHeight="46">
+      <ng-template #FreightTitle>
+        <p class="mini_area_title">
+          <span class="title">司机应付总额</span>
+        </p>
+      </ng-template>
+      <ng-template #Freightfooter>
+        <g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalFreight?.list || []"
           (clickItem)="handleClick($event)">
         </g2-mini-area>
       </ng-template>
     </g2-card>
   </div>
   <div nz-col class="gutter-row" [nzSpan]="6">
-    <g2-card [title]="'附加费总额'" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
+    <g2-card [title]="SurchargeTitle" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
       [footer]="SurchargeFooter" contentHeight="46">
+      <ng-template #SurchargeTitle>
+        <p class="mini_area_title">
+          <span class="title">附加费总额</span>
+        </p>
+      </ng-template>
       <ng-template #SurchargeFooter>
-        <g2-mini-area line color="#cceafe" height="45" [data]="totalSurcharge?.list || []"
+        <g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalSurcharge?.list || []"
           (clickItem)="handleClick($event)">
         </g2-mini-area>
       </ng-template>
@@ -43,13 +74,13 @@
   </div>
 </div>
 <div nz-row [nzGutter]="16">
-  <div nz-col class="gutter-row" [nzSpan]="12">
-    <nz-card [nzTitle]="'订单类型比例'">
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <nz-card acl [acl-ability]="['dataindex-getBillTypeProportion']"><label class="chart_title">订单类型比例</label>
       <g2-custom #g2custom delay="100"></g2-custom>
     </nz-card>
   </div>
-  <div nz-col class="gutter-row" [nzSpan]="12">
-    <nz-card [nzTitle]="'大区业绩完成情况'">
+  <div nz-col class="gutter-row" [nzSpan]="18">
+    <nz-card acl [acl-ability]="['dataindex-getBillAmount']"><label class="chart_title">大区业绩完成情况</label>
       <!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
         [slider]="false"></g2-timeline> -->
       <g2-custom #RegionalPerforman delay="100"></g2-custom>
@@ -57,18 +88,20 @@
   </div>
 </div>
 <div nz-row [nzGutter]="16">
-  <div nz-col class="gutter-row" [nzSpan]="12">
-    <nz-card [nzTitle]="'运单直付比例'">
+  <div nz-col class="gutter-row" [nzSpan]="6">
+    <nz-card acl [acl-ability]="['dataindex-getWayBillDirectProportion']"> <label class="chart_title">运单直付比例</label>
       <!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
         (clickItem)="handleClick($event)" [lineWidth]="10">
       </g2-pie> -->
       <g2-custom #BillDirectProportion delay="100"></g2-custom>
     </nz-card>
   </div>
-  <div nz-col class="gutter-row" [nzSpan]="12">
-    <nz-card [nzTitle]="'业绩完成情况'">
-      <g2-bar  [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar>
+  <div nz-col class="gutter-row" [nzSpan]="18">
+    <nz-card acl [acl-ability]="['dataindex-getBillPaymentAmount']">
+      <label class="chart_title">业绩完成情况</label>
+      <!-- <g2-bar  [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->
+      <g2-custom #SaleProportion delay="100"></g2-custom>
 
     </nz-card>
   </div>
-</div>
+</div>

src/app/routes/datatable/components/dataindex/dataindex.component.less

@@ -0,0 +1,49 @@
+.chart_title {
+    font-size              : 16px;
+    font-weight            : 500;
+    color                  : #1D2129;
+    line-height            : 24px;
+    background-clip        : text;
+    -webkit-background-clip: text;
+    position               : absolute;
+}
+
+
+.mini_area_title {
+    display        : flex;
+    justify-content: space-between;
+
+    .title {
+        font-size  : 16px;
+        font-weight: 500;
+        color      : #1D2129;
+    }
+
+    .subtitle {
+        font-size  : 14px;
+        font-weight: 400;
+        color      : #575D6C;
+        text-align : right;
+
+        .percent {
+            color: #E60012
+        }
+    }
+}
+
+:host::ng-deep {
+    .g2-card__meta-wrap {
+        width: 100%;
+
+        .g2-card__total {
+            font-size  : 28px;
+            font-weight: 500;
+            color      : #1D2129;
+            margin-top : 8px;
+        }
+    }
+
+    .g2-card__footer {
+        border: 0px;
+    }
+}

src/app/routes/datatable/components/dataindex/dataindex.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, ViewChild } from '@angular/core';
 import { ModalHelper, _HttpClient } from '@delon/theme';
 import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
 import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
@@ -9,6 +9,8 @@ import { G2TimelineClickItem, G2TimelineData } from '@delon/chart/timeline';
 import { CurrencyPipe } from '@angular/common';
 import { LOGS } from '_mock';
 import { G2CustomComponent } from '@delon/chart/custom';
+import { G2BarData } from '@delon/chart/bar';
+import { GeometryLabelCfg } from '@antv/g2/lib/interface';
 
 @Component({
   selector: 'app-datatable-dataindex',
@@ -16,10 +18,12 @@ import { G2CustomComponent } from '@delon/chart/custom';
   styleUrls: ['./dataindex.component.less'],
   providers: [CurrencyPipe]
 })
-export class DatatableDataindexComponent implements OnInit {
+export class DatatableDataindexComponent implements OnInit, AfterViewInit {
+  @ViewChild('AdvanceDeposit', { static: false }) AdvanceDeposit!: G2CustomComponent;
   @ViewChild('g2custom', { static: false }) g2custom!: G2CustomComponent;
   @ViewChild('RegionalPerforman', { static: false }) RegionalPerforman!: G2CustomComponent;
   @ViewChild('BillDirectProportion', { static: false }) BillDirectProportion!: G2CustomComponent;
+  @ViewChild('SaleProportion', { static: false }) SaleProportion!: G2CustomComponent;
   salesData: any[] = [];
 
   totalAdvanceDeposit: { totalAmount: string; list: G2MiniAreaData[] } = { totalAmount: '0', list: this.genData() };
@@ -34,18 +38,24 @@ export class DatatableDataindexComponent implements OnInit {
 
   regionalPerformanceCompletion: DataPerformanceTrendVO[] = [];
 
-  constructor(private service: DataService, private currency: CurrencyPipe) {}
-
-  ngOnInit(): void {
+  constructor(private service: DataService, private currency: CurrencyPipe) { }
+  ngAfterViewInit(): void {
     this.initMiniAreaData();
     this.initOthersData();
   }
 
+  ngOnInit(): void {
+
+  }
+
   private initMiniAreaData() {
     // 客户预存款总额
     this.service.request(this.service.$api_total_advance_deposit).subscribe((res: DataTotalVO) => {
       if (res) {
         this.totalAdvanceDeposit = this.formatMiniAreaData(res);
+        setTimeout(() => {
+          this.initAreaMap(this.AdvanceDeposit['el'].nativeElement as any, []);
+        }, 400);
       }
     });
     // 业绩量总额
@@ -72,28 +82,48 @@ export class DatatableDataindexComponent implements OnInit {
     // 订单类型比例
     this.service.request(this.service.$api_getBillTypeProportion).subscribe(res => {
       if (res) {
-        this.billTypeDatas = this.formatCoordinateData(res);
-        this.initBillChart(this.g2custom['el'].nativeElement as any);
+        const billTypeDatas2 = this.formatCoordinateData(res);
+        console.log(billTypeDatas2);
+        setTimeout(() => {
+          this.initBillChart(this.g2custom['el'].nativeElement as any, billTypeDatas2);
+        }, 100);
       }
     });
     // 大区业绩完成情况
     this.service.request(this.service.$api_getBillAmount).subscribe((res: DataPerformanceTrendVO[]) => {
       if (res) {
-        this.regionalPerformanceCompletion = res.map(item => ({ ...item, time: new Date(item.time)?.getTime() }));
-        this.initRegionalPerformanceChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion);
+        // this.regionalPerformanceCompletion = res.map(item => ({ ...item, time: new Date(item.time)?.getTime() }));
+        // this.initRegionalPerformanceChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion);
+        this.regionalPerformanceCompletion = this.formatBarData(res);
+        setTimeout(() => {
+          this.initBiaxialChart(this.RegionalPerforman['el'].nativeElement as any, this.regionalPerformanceCompletion, {
+            y1Title: '业绩量(万)',
+            y2Title: '业绩完成率',
+            y3Title: '同期业绩完成率'
+          });
+        }, 100);
       }
     });
     // 订单类型比例
     this.service.request(this.service.$api_getWayBillDirectProportion).subscribe(res => {
       if (res) {
         const billTypeDatas = this.formatCoordinateData(res.map((item: any) => ({ ...item, billType: item.wayBillType })));
-        this.initBillChart(this.BillDirectProportion['el'].nativeElement as any, billTypeDatas);
+        setTimeout(() => {
+          this.initBillChart(this.BillDirectProportion['el'].nativeElement as any, billTypeDatas);
+        }, 100);
       }
     });
     // 统计订单结算金额-趋势
     this.service.request(this.service.$api_get_bill_payment_amount).subscribe(res => {
       if (res) {
         this.salesData = this.formatBarData(res);
+        setTimeout(() => {
+          this.initBiaxialChart(this.SaleProportion['el'].nativeElement as any, this.salesData, {
+            y1Title: '业绩量(万)',
+            y2Title: '业绩完成率',
+            y3Title: '同期业绩完成率'
+          });
+        }, 100);
       }
     });
   }
@@ -112,20 +142,20 @@ export class DatatableDataindexComponent implements OnInit {
     const chart = new Chart({
       container: el,
       autoFit: true,
-      height: 400
+      height: 380
     });
     // 新建一个 view 用来单独渲染Annotation
     const innerView = chart.createView();
     chart.coordinate('theta', {
-      radius: 0.6,
-      innerRadius: 0.7
+      radius: 0.65,
+      innerRadius: 0.6
     });
 
     chart.data(data);
 
     chart.scale('percent', {
       formatter: val => {
-        val = val * 100 + '%';
+        val = (val * 100).toFixed(0) + '%';
         return val;
       }
     });
@@ -134,17 +164,17 @@ export class DatatableDataindexComponent implements OnInit {
 
     // 声明需要进行自定义图例字段： 'item'
     chart.legend('item', {
-      position: 'right', // 配置图例显示位置
+      position: 'bottom', // 配置图例显示位置
       custom: true, // 关键字段，告诉 G2，要使用自定义的图例
       items: data.map((obj: any, index: any) => {
         return {
           name: obj.item, // 对应 itemName
           value: obj.percent, // 对应 itemValue
           marker: {
-            symbol: 'square', // marker 的形状
+            symbol: 'circle', // marker 的形状
             style: {
               r: 5, // marker 图形半径
-              fill: chart.getTheme().colors10[index] // marker 颜色，使用默认颜色，同图形对应
+              fill: index === 0 ? '#E60012' : '#F09896' // marker 颜色，使用默认颜色，同图形对应
             }
           } // marker 配置
         };
@@ -161,11 +191,11 @@ export class DatatableDataindexComponent implements OnInit {
       .interval()
       .adjust('stack')
       .position('percent')
-      .color('item')
+      .color('item', ['#E60012', '#F09896'])
       .style({
         fillOpacity: 1,
         stroke: 'white',
-        lineWidth: 8
+        lineWidth: 4
       })
       .state({
         active: {
@@ -178,6 +208,14 @@ export class DatatableDataindexComponent implements OnInit {
             };
           }
         }
+      })
+      .label('percent', percent => {
+        return {
+          content: data => {
+            return (percent * 100).toFixed(0) + `%`;
+          },
+          style: { fontSize: 14 }
+        };
       });
 
     innerView
@@ -186,21 +224,21 @@ export class DatatableDataindexComponent implements OnInit {
         position: ['50%', '50%'],
         content: data[0].item,
         style: {
-          fontSize: 20,
+          fontSize: 14,
           fill: '#8c8c8c',
           textAlign: 'center'
         },
-        offsetY: -20
+        offsetY: -10
       })
       .text({
         position: ['50%', '50%'],
         content: data[0].count,
         style: {
-          fontSize: 28,
-          fill: '#8c8c8c',
+          fontSize: 16,
+          fill: '##000',
           textAlign: 'center'
         },
-        offsetY: 20
+        offsetY: 10
       });
     innerView.render(true);
 
@@ -238,21 +276,21 @@ export class DatatableDataindexComponent implements OnInit {
             position: ['50%', '50%'],
             content: data.item,
             style: {
-              fontSize: 20,
+              fontSize: 14,
               fill: '#8c8c8c',
               textAlign: 'center'
             },
-            offsetY: -20
+            offsetY: -10
           })
           .text({
             position: ['50%', '50%'],
             content: data.count,
             style: {
-              fontSize: 28,
-              fill: '#8c8c8c',
+              fontSize: 16,
+              fill: '##000',
               textAlign: 'center'
             },
-            offsetY: 20
+            offsetY: 10
           });
         innerView.render(true);
         lastItem = data.item;
@@ -267,6 +305,72 @@ export class DatatableDataindexComponent implements OnInit {
     }
   }
 
+  /**
+   * 构建面积图
+   * @param el
+   */
+  private initAreaMap(el: HTMLElement, datas: any[]): void {
+    const data = [
+      { city: '冰岛（雷克雅未克）', type: '首都人口', value: 0.56 },
+      { city: '冰岛（雷克雅未克）', type: '城市人口', value: 0.38 }
+    ];
+
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 45
+    });
+    chart.data(data);
+    chart.legend(false);
+    chart.axis('city', false);
+    chart.axis('value', {
+      label: {
+        formatter: val => val
+      },
+      title: null,
+      grid: null
+    });
+    chart.coordinate('rect').transpose();
+    chart.tooltip({
+      customItems: items => {
+        return [];
+      },
+      showContent: true,
+      title: '1,968.08万'
+    });
+    chart.interaction('active-region');
+    chart
+      .interval()
+      .adjust('stack')
+      .position('city*value')
+      .color('type*city', (type: any, city: any) => {
+        if (type === '首都人口') {
+          return '#E60012';
+        }
+        if (type === '城市人口') {
+          return '#EAEAEB';
+        }
+        return '#EAEAEB';
+      })
+      .style('type', (type: any, city: any) => {
+        if (type === '首都人口') {
+          return { radius: [0, 0, 20, 20] };
+        }
+        if (type === '城市人口') {
+          return { radius: [20, 20, 0, 0] };
+        }
+        return {};
+      });
+    console.log(chart);
+
+    chart.render();
+  }
+
+  /**
+   * 构建大区业绩完成情况柱折双轴图
+   * @param el
+   * @param data
+   */
   private initRegionalPerformanceChart(el: HTMLElement, data: DataPerformanceTrendVO[]) {
     const chart = new Chart({
       container: el,
@@ -299,6 +403,7 @@ export class DatatableDataindexComponent implements OnInit {
 
     // 声明需要进行自定义图例字段： 'item'
     chart.legend({
+      title: { text: '1111', spacing: 11 },
       offsetY: 10,
       position: 'bottom', // 配置图例显示位置
       custom: true, // 关键字段，告诉 G2，要使用自定义的图例
@@ -319,6 +424,71 @@ export class DatatableDataindexComponent implements OnInit {
     chart.render();
   }
 
+  /**
+   * 构建业绩完成情况柱折双轴图
+   * @param el
+   * @param data
+   */
+  private initBiaxialChart(
+    el: HTMLElement,
+    data: any[],
+    { y1Title, y2Title, y3Title }: { y1Title: string; y2Title: string; y3Title: string }
+  ) {
+    const chart = new Chart({
+      container: el,
+      autoFit: true,
+      height: 380
+    });
+    chart.data(data);
+    // 设置坐标轴
+    chart.scale({
+      y1: { alias: y1Title, min: 0, max: 2000000000 },
+      y2: { alias: y2Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' },
+      y3: { alias: y3Title, min: 0, max: 1, formatter: val => (val * 100).toFixed(0) + '%' }
+    });
+    // 设置
+    chart.legend({
+      custom: true,
+      position: 'top-right',
+      padding: [10, 0, 40, 0],
+      items: [
+        { value: 'y1', name: y1Title, marker: { symbol: 'circle', style: { fill: '#E60012', r: 5, fontSize: 13 } } },
+        { value: 'y2', name: y2Title, marker: { symbol: 'circle', style: { fill: '#FE7823', r: 5, fontSize: 13 } } },
+        { value: 'y3', name: y3Title, marker: { symbol: 'circle', style: { fill: '#F7CFCE', r: 5, fontSize: 13 } } }
+      ]
+    });
+    chart.axis('y2', {
+      grid: null,
+      title: null,
+      label: {
+        formatter: val => val
+      }
+    });
+    chart.axis('y3', false);
+    chart.tooltip({
+      shared: true
+    });
+    chart.interval().position('x*y1').color('#E60012');
+    chart
+      .line()
+      .position('x*y2')
+      // .label('pre', val => ({ content: (val * 100).toFixed(0) + '%' }))
+      .color('#F7CFCE')
+      .size(3);
+    chart.point().position('x*y2').color('#F7CFCE').size(3).shape('circle');
+    chart
+      .line()
+      .position('x*y3')
+      // .label('pre2', val => ({ content: (val * 100).toFixed(0) + '%' }))
+      .color('#FE7823')
+      .size(3);
+    chart.point().position('x*y3').color('#FE7823').size(3).shape('circle');
+
+    chart.interaction('active-region');
+    chart.removeInteraction('legend-filter'); // 自定义图例，移除默认的分类图例筛选交互
+    chart.render();
+  }
+
   private formatMiniAreaData(data: DataTotalVO) {
     return {
       totalAmount: `${this.currency.transform(data.totalAmount || 0)}万`,
@@ -329,6 +499,11 @@ export class DatatableDataindexComponent implements OnInit {
     };
   }
 
+  /**
+   * 初始化饼图数据格式
+   * @param data
+   * @returns
+   */
   private formatCoordinateData(data: DataBillTypeProportion[]): any[] {
     const total = data.map(item => item.quantity).reduce((pre, next) => pre + next);
     const rs: any[] = [];
@@ -339,14 +514,17 @@ export class DatatableDataindexComponent implements OnInit {
         percent: Number((item.quantity / total).toFixed(2))
       });
     });
+    console.log(rs);
+
     return rs;
   }
 
   private formatBarData(data: DataPerformanceTrendVO[]): any[] {
     return data.map(item => ({
       x: item.time,
-      y: item.quantity,
-      color: '#f50'
+      y1: item.quantity,
+      y2: Math.floor(Math.random() * 100) / 100,
+      y3: Math.floor(Math.random() * 100) / 100
     }));
   }
 
@@ -356,7 +534,7 @@ export class DatatableDataindexComponent implements OnInit {
     for (let i = 0; i < 20; i += 1) {
       res.push({
         x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
-        y: Math.floor(Math.random() * 100) + 10
+        y: Math.floor(Math.random() * 1)
       });
     }
     return res;

src/app/routes/datatable/components/datascreen/curve/curve.component.ts

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-04-07 17:57:23
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-13 10:22:35
+ * @LastEditTime : 2022-05-07 09:46:55
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\curve\\curve.component.ts
  * Copyright (C) 2022 huzhenhong. All rights reserved.
  */
@@ -108,7 +108,7 @@ export class DatatableCustomindexCurveMinComponent implements OnInit,OnChanges {
     this.chart.axis('temperature', {
       label: {
         formatter: (val: any) => {
-          return val + '万';
+          return val;
         },
       },
     });

src/app/routes/datatable/components/datascreen/datascreen.component.html

@@ -4,7 +4,7 @@
  * @Author       : Shiming
  * @Date         : 2022-04-06 10:57:56
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-19 14:01:38
+ * @LastEditTime : 2022-05-09 13:59:19
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\datascreen\\datascreen.component.html
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
@@ -30,7 +30,7 @@
     <nz-card nzTitle="2022全年交易情况">
       <nz-row [nzGutter]="16">
         <nz-col [nzSpan]="12">
-          <nz-statistic [nzValue]="(allDeal?.dealAmount | currency)!" [nzTitle]="'成交额'"></nz-statistic>
+          <nz-statistic [nzValue]="(allDeal?.dealAmount | currency)! || 0" [nzTitle]="'成交额'"></nz-statistic>
         </nz-col>
         <nz-col [nzSpan]="12">
           <nz-statistic [nzValue]="(allDeal?.settlementAmount | currency)!" [nzTitle]="'结算额'"></nz-statistic>
@@ -45,34 +45,9 @@
         </nz-col>
       </nz-row>
     </nz-card>
-    <nz-card nzTitle="本月交易趋势">
+    <nz-card nzTitle="本年交易趋势">
       <app-financetable-curve-min #curve [chartData]="chartData2"></app-financetable-curve-min>
     </nz-card>
-    <nz-card nzTitle="实时货源" style="height: 400px">
-      <st
-        #st
-        multiSort
-        [columns]="columns"
-        [scroll]="{ y: '280px' }"
-        [data]="service.$api_getRealTimeSupply"
-        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
-        [res]="{ reName: { list: 'data' } }"
-        [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
-        [loading]="service.http.loading"
-      >
-        <ng-template st-row="index" let-item let-index="index">
-          {{ index + 1 }}
-        </ng-template>
-        <ng-template st-row="weight" let-item let-index="index">
-          {{ item.weight ? item.weight + '吨' : '' }}
-          {{ item.volume ? item.volume + '方' : '' }}
-        </ng-template>
-        <ng-template st-row="weight" let-item let-index="index">
-          {{ item.weight ? item.weight + '吨' : '' }}
-          {{ item.volume ? item.volume + '方' : '' }}
-        </ng-template>
-      </st>
-    </nz-card>
   </div>
   <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
     <nz-card>
@@ -91,11 +66,6 @@
     <div style="min-height: 550px">
       <app-datatable-customindex-map style="max-height: 680px" #map [chartData]="chartData"></app-datatable-customindex-map>
     </div>
-    <nz-card>
-      <nz-row [nzGutter]="24">
-        <g2-bar #bar height="350" [delay]="300" repaint="true" [title]="'本月发货量排名'" [data]="salesData2" (ready)="genData()"></g2-bar>
-      </nz-row>
-    </nz-card>
   </div>
   <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
     <nz-card>
@@ -156,11 +126,48 @@
         </nz-col>
       </nz-row>
     </nz-card>
+  </div>
+</div>
+<div nz-row [nzGutter]="24">
+  <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
+
+    <nz-card nzTitle="实时货源" style="height: 400px">
+      <st
+        #st
+        multiSort
+        [columns]="columns"
+        [scroll]="{ y: '280px' }"
+        [data]="service.$api_getRealTimeSupply"
+        [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
+        [res]="{ reName: { list: 'data' } }"
+        [page]="{ show: false, showSize: false, pageSizes: [5, 50, 100] }"
+        [loading]="service.http.loading"
+      >
+        <ng-template st-row="index" let-item let-index="index">
+          {{ index + 1 }}
+        </ng-template>
+        <ng-template st-row="weight" let-item let-index="index">
+          {{ item.weight ? item.weight + '吨' : '' }}
+          {{ item.volume ? item.volume + '方' : '' }}
+        </ng-template>
+        <ng-template st-row="weight" let-item let-index="index">
+          {{ item.weight ? item.weight + '吨' : '' }}
+          {{ item.volume ? item.volume + '方' : '' }}
+        </ng-template>
+      </st>
+    </nz-card>
+  </div>
+  <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
+    <nz-card style="height: 400px">
+        <g2-bar #bar height="350" [delay]="300" repaint="true" [title]="'本月发货量排名'" [data]="salesData2" (ready)="genData()"></g2-bar>
+    </nz-card>
+  </div>
+  <div nz-col class="gutter-row" nzXs="12" nzSm="12" nzMd="12" nzLg="12" nzXl="8" nzXXl="8">
     <nz-card nzTitle="实时运单风控" style="height: 400px">
       <st
         #st
         multiSort
-        [scroll]="{ y: '280px' }"
+        [scroll]="{ y: '300px' }"
         [columns]="orderColumns"
         [data]="service.$api_getRealTimeWaybillRiskControl"
         [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqOrderParams }"

src/app/routes/datatable/components/datascreen/datascreen.component.less

@@ -8,7 +8,7 @@
             font-size: 14px;
         }
         .ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table tfoot > tr > th, .ant-table tfoot > tr > td {
-            padding: 0;
+            padding: 5px;
             font-size: 12px;
         }
     }

src/app/routes/datatable/components/financetable/financetable.component.html

@@ -10,20 +10,22 @@
 -->
 <!-- 页头 -->
 <page-header-wrapper [title]="'财务报表'"></page-header-wrapper>
-<nz-card nzTitle="财务报表" [nzExtra]="extraTemplate">
+<nz-card nzTitle="财务报表" [nzExtra]="extraTemplate" acl [acl-ability]="['financetable-table']">
   <ng-template #extraTemplate>
     <div class="chooseBox">
       <!-- <button nz-button nzType="primary" (click)="exportFun()">导出</button> -->
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl  [acl-ability]="['financetable-table']">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
           <label nz-radio-button nzValue="date">日</label>
           <label nz-radio-button nzValue="define">自定义</label>
         </nz-radio-group>
         <div class="dateBox">
-          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
-          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'"
+            [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
+          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'"
+            [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
         </div>
 
       </div>
@@ -31,9 +33,7 @@
 
   </ng-template>
   <st #st multiSort [columns]="columns" [ps]="20" [data]="service.$api_listFinancialReportPage"
-    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
-    [scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
-    [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="service.http.loading">
+    [req]="{  params: reqParams }" [scroll]="{ x: '1200px' }" [page]="{  }" [loading]="service.http.loading">
     <ng-template st-row="czcgje" let-item let-index="index">
       {{item.czcgje | currency}}
     </ng-template>
@@ -66,26 +66,27 @@
     </ng-template>
   </st>
 </nz-card>
-<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
+<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01" acl [acl-ability]="['financetable-report']">
   <ng-template #extraTemplate01>
     <div class="chooseBox">
-      <nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData()" acl  [acl-ability]="['financetable-report']">
+      <nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData()">
         <nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
       </nz-select>
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()" acl  [acl-ability]="['financetable-report']">
+        <nz-radio-group [(ngModel)]="modeNext" nzButtonStyle="solid" (ngModelChange)="changeDataNext()">
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
         </nz-radio-group>
         <div class="dateBox">
-          <nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
+          <nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext"
+            (ngModelChange)="onChangeNext($event)"></nz-date-picker>
         </div>
       </div>
     </div>
   </ng-template>
   <div nz-row [nzGutter]="64">
     <div nz-col class="gutter-row" [nzSpan]="12">
-     <app-financetable-curve #curve [chartData]="chartData.lineChart"></app-financetable-curve>
+      <app-financetable-curve #curve [chartData]="chartData.lineChart"></app-financetable-curve>
     </div>
     <div nz-col class="gutter-row" [nzSpan]="12">
       <app-financetable-pillar #pillar [chartData]="chartData.histogram"></app-financetable-pillar>

src/app/routes/datatable/components/operationtable/operationtable.component.html

@@ -1,19 +1,21 @@
 <!-- 页头 -->
 <page-header-wrapper [title]="'运营报表'"></page-header-wrapper>
-<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate">
+<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate" acl [acl-ability]="['operationtable-table']">
   <ng-template #extraTemplate>
     <div class="chooseBox">
-      <button nz-button nzType="primary" (click)="exportFun()" acl  [acl-ability]="['operationtable-export']">导出</button>
+      <button nz-button nzType="primary" (click)="exportFun()" acl [acl-ability]="['operationtable-export']">导出</button>
       <div class="timeBox">
-        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()" acl  [acl-ability]="['operationtable-table']">
+        <nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
           <label nz-radio-button nzValue="year">年</label>
           <label nz-radio-button nzValue="month">月</label>
           <label nz-radio-button nzValue="date">日</label>
           <label nz-radio-button nzValue="define">自定义</label>
         </nz-radio-group>
         <div class="dateBox">
-          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
-          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'" [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
+          <nz-date-picker [(ngModel)]="date" [nzMode]="mode" [nzFormat]="dateFormat" *ngIf="mode !== 'define'"
+            [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-date-picker>
+          <nz-range-picker [(ngModel)]="defineDate" [nzFormat]="dateFormat" *ngIf="mode === 'define'"
+            [nzDisabledDate]="disabledDate" (ngModelChange)="onChange($event)"></nz-range-picker>
         </div>
 
       </div>
@@ -25,10 +27,10 @@
     [scroll]="{ x: '1200px' }" [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
     [page]="{ show: true, showSize: true, pageSizes: [20, 50, 100] }" [loading]="service.http.loading"></st>
 </nz-card>
-<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01">
+<nz-card nzTitle="运营报表" [nzExtra]="extraTemplate01" acl [acl-ability]="['operationtable-operationalReport']">
   <ng-template #extraTemplate01>
     <div class="chooseBox">
-      <nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData(true)" acl  [acl-ability]="['operationtable-operationalReport']">
+      <nz-select [(ngModel)]="enterpriseInfoId" style="width: 200px" (ngModelChange)="initPillarData(true)">
         <nz-option [nzValue]="item.value" [nzLabel]="item.label" *ngFor="let item of interManlist"></nz-option>
       </nz-select>
       <div class="timeBox">
@@ -37,14 +39,15 @@
           <label nz-radio-button nzValue="month">月</label>
         </nz-radio-group>
         <div class="dateBox">
-          <nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext" (ngModelChange)="onChangeNext($event)"></nz-date-picker>
+          <nz-date-picker [nzDisabledDate]="disabledDate" [(ngModel)]="dateNext" [nzMode]="modeNext"
+            (ngModelChange)="onChangeNext($event)"></nz-date-picker>
         </div>
       </div>
     </div>
   </ng-template>
   <div nz-row [nzGutter]="64">
     <div nz-col class="gutter-row" [nzSpan]="12">
-     <app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
+      <app-operation-curve #curve [chartData]="chartData.lineChart"></app-operation-curve>
     </div>
     <div nz-col class="gutter-row" [nzSpan]="12">
       <app-operation-pillar #pillar [chartData]="chartData.histogram"></app-operation-pillar>
@@ -52,4 +55,4 @@
   </div>
 </nz-card>
 
-<app-opeationtable-pie #pie></app-opeationtable-pie>
+<app-opeationtable-pie #pie></app-opeationtable-pie>

src/app/routes/datatable/components/operationtable/operationtable.component.ts

@@ -73,9 +73,9 @@ export class DatatableOperationtableComponent implements OnInit {
   }
   initPillarData(flag?: boolean){
     let type = 1
-    if(this.mode === 'year') {
+    if(this.modeNext === 'year') {
       type = 1
-    } else if(this.mode === 'month') {
+    } else if(this.modeNext === 'month') {
       type = 2
     }
     const params: any = {
@@ -86,6 +86,8 @@ export class DatatableOperationtableComponent implements OnInit {
     this.service.request(this.service.$api_operationalReportHistogram, params).subscribe(res => {
       if (res) {
         this.chartData = res
+        this.pillar.reRender()
+        this.curve.reRender()
         if(flag) { // 除第一次加载外
           this.pillar.reRender()
           this.curve.reRender()
@@ -126,7 +128,18 @@ export class DatatableOperationtableComponent implements OnInit {
     // Can not select days before today and today
     differenceInCalendarDays(current, this.today) > 0;
   exportFun() {
-
+    let type = 1
+    if(this.mode === 'year') {
+      type = 1
+    } else if(this.mode === 'month') {
+      type = 2
+    }
+    const params: any = {
+      time: this.time,
+      type,
+      enterpriseInfoId: this.enterpriseInfoId
+     };
+    this.service.exportStart({ ...params, pageSize: -1 }, this.service.$api_asyncExportOperationalReport);
   }
   changeCurve(){
 
@@ -135,9 +148,9 @@ export class DatatableOperationtableComponent implements OnInit {
 
   }
   changeDataNext() {
-    if(this.mode === 'year') {
+    if(this.modeNext === 'year') {
       this.dateFormat = 'yyyy'
-    } else if(this.mode === 'month') {
+    } else if(this.modeNext === 'month') {
       this.dateFormat = 'yyyy-MM'
     }
   }
@@ -145,9 +158,9 @@ export class DatatableOperationtableComponent implements OnInit {
     if(result === null) {
       return
     }
-    if(this.mode === 'year') {
+    if(this.modeNext === 'year') {
       this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy') + '-01-01 00:00:00']
-    } else if(this.mode === 'month') {
+    } else if(this.modeNext === 'month') {
       this.timeNext = [this.datePipe.transform(this.dateNext, 'yyyy-MM') + '-01 00:00:00']
     }
     this.initPillarData(true)

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

@@ -1,3 +1,13 @@
+/*
+ * @Description  :
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-28 20:27:07
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-28 21:10:06
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\datatable-routing.module.ts
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+ */
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DatatableCustomindexComponent } from './components/customtable/customindex/customindex.component';
@@ -20,29 +30,33 @@ import { DatatableReportingFundInfoComponent } from './reporting/components/fund
 import { DatatableDatascreenComponent } from './components/datascreen/datascreen.component';
 
 const routes: Routes = [
-  { path: 'dataindex', component: DatatableDataindexComponent },
-  { path: 'customtable/customindex', component: DatatableCustomindexComponent },
-  { path: 'customtable/owner', component: DatatableOwnerComponent },
-  { path: 'customtable/driver', component: DatatableDriverComponent },
-  { path: 'customtable/mancustomtable', component: DatatableMancustomtableComponent },
-  { path: 'customtable/partnertable', component: DatatablePartnertableComponent },
-  { path: 'operationtable', component: DatatableOperationtableComponent },
-  { path: 'reporting/order', component: DatatableOrderReportingComponent },
-  { path: 'compliancetabel/index', component: DatatableComplianceIndexComponent },
-  { path: 'compliancetabel/salesman', component: DatatableComplianceSalesmanComponent },
-  { path: 'compliancetabel/customer', component: DatatableComplianceCustomerComponent },
-  { path: 'financetable', component: DatatableFinancetableComponent },
-  { path: 'invoicetable', component: DatatableInvoicetableComponent },
-  { path: 'reporting/fund', component: DatatableFundReportingComponent },
-  { path: 'busitable/busiindex', component: DatatableBusiindexComponent },
-  { path: 'busitable/mantable', component: DatatableMantableComponent },
-  { path: 'reporting/fund', component: DatatableFundReportingComponent },
-  { path: 'fund-info', component: DatatableReportingFundInfoComponent },
-  { path: 'datascreen', component: DatatableDatascreenComponent }];
-
+  { path: 'dataindex', component: DatatableDataindexComponent, data: { guard: { ability: ['dataindex-search'] } } },
+  { path: 'customtable/customindex', component: DatatableCustomindexComponent, data: { guard: { ability: ['customindex-client'] } } },
+  { path: 'customtable/owner', component: DatatableOwnerComponent, data: { guard: { ability: ['owner-search'] } } },
+  { path: 'customtable/driver', component: DatatableDriverComponent, data: { guard: { ability: ['driver-search'] } } },
+  {
+    path: 'customtable/mancustomtable',
+    component: DatatableMancustomtableComponent,
+    data: { guard: { ability: ['mancustomtable-search'] } }
+  },
+  { path: 'customtable/partnertable', component: DatatablePartnertableComponent,
+  data: { guard: { ability: ['partnertable-search'] } } },
+  { path: 'operationtable', component: DatatableOperationtableComponent, data: { guard: { ability: ['operationtable-search'] } }  },
+  { path: 'reporting/order', component: DatatableOrderReportingComponent, data: { guard: { ability: ['ORDER-REPORTING-search'] } } },
+  { path: 'compliancetabel/index', component: DatatableComplianceIndexComponent , data: { guard: { ability: ['index-lRateQualified'] } }},
+  { path: 'compliancetabel/salesman', component: DatatableComplianceSalesmanComponent, data: { guard: { ability: ['salesman-ComplianceReportPage'] } } },
+  { path: 'compliancetabel/customer', component: DatatableComplianceCustomerComponent, data: { guard: { ability: ['customer-search'] } } },
+  { path: 'financetable', component: DatatableFinancetableComponent , data: { guard: { ability: ['financetable-search'] } }},
+  { path: 'invoicetable', component: DatatableInvoicetableComponent , data: { guard: { ability: ['invoicetable-search'] } }},
+  { path: 'reporting/fund', component: DatatableFundReportingComponent , data: { guard: { ability: ['FUND-REPORTING-search'] } }},
+  { path: 'busitable/busiindex', component: DatatableBusiindexComponent , data: { guard: { ability: ['busiindex-search'] } }},
+  { path: 'busitable/mantable', component: DatatableMantableComponent, data: { guard: { ability: ['customer-search'] } } },
+  { path: 'fund-info', component: DatatableReportingFundInfoComponent , data: { guard: { ability: ['customer-search'] } }},
+  { path: 'datascreen', component: DatatableDatascreenComponent, data: { guard: { ability: ['datascreen-search'] } } }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class DatatableRoutingModule { }
+export class DatatableRoutingModule {}

src/app/routes/datatable/datatable.module.ts

@@ -86,7 +86,7 @@ const COMPONENTS: Type<void>[] = [
   imports: [
     SharedModule,
     DatatableRoutingModule,
-    SHARED_G2_MODULES
+    ...SHARED_G2_MODULES
   ],
   declarations: COMPONENTS,
 })

src/app/routes/datatable/reporting/components/fund-info/fund-info.component.html

@@ -6,6 +6,11 @@
     <ng-template st-row="checkStatus" let-item>
       <span [ngClass]="{'text-red-dark':item?.checkStatus === 2}">{{filterCheckStatus(item?.checkStatus)}}</span>
     </ng-template>
+    <ng-template st-row="fieldValue" let-item>
+      <ellipsis lines="3" tooltip>
+        <div>{{item?.fieldValue}}</div>
+      </ellipsis>
+    </ng-template>
   </st>
 </div>
 

src/app/routes/datatable/reporting/components/fund-info/fund-info.component.ts

@@ -55,7 +55,7 @@ export class DatatableReportingFundInfoComponent implements OnInit {
           1: '是',
         },
       },
-      { title: '上传值', index: 'fieldValue', className: 'text-center', width: '15%', },
+      { title: '上传值', render: 'fieldValue', className: 'text-center', width: '15%', },
       {
         title: '本地校验',
         render: 'checkStatus',

src/app/routes/datatable/reporting/components/fund-reporting/fund-reporting.component.html

@@ -1,7 +1,5 @@
-<page-header-wrapper [title]="''"></page-header-wrapper>
-
+<!-- <page-header-wrapper [title]="''"></page-header-wrapper>
 <nz-card>
-  <!-- 搜索表单 -->
   <div nz-row nzGutter="8">
     <div nz-col [nzSpan]="_$expand ? 24 : 18">
       <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
@@ -17,18 +15,19 @@
       </button>
     </div>
   </div>
-</nz-card>
-<nz-card>
-  <nz-tabset [nzTabBarExtraContent]="extraTemplate" *ngIf="tabs.length>0">
+</nz-card> -->
+<nz-card class="table-box">
+  <div class="tab_header">
+    <label class="page_title"> <label class="driver">|</label> 资金上报</label>
+    <nz-tabset [nzTabBarExtraContent]="extraTemplate" *ngIf="tabs.length>0">
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="selectChange(tab)">
+      </nz-tab>
+    </nz-tabset>
+  </div>
 
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="selectChange(tab)">
-    </nz-tab>
-  </nz-tabset>
   <!-- 数据列表 -->
-  <st #st [scroll]="{x:'1200px'}" [data]="service.$api_get_fund_reporting_page" [columns]="columns"
-    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
-    [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
-    [page]="{ show: true, showSize: true, pageSizes: [10,20, 50, 100] }" (change)="changeSt($event)">
+  <st #st [scroll]="{x:'1200px',y:scrollY}" [data]="service.$api_get_fund_reporting_page" [columns]="columns"
+    [req]="{ params: reqParams }" [page]="{  }" (change)="changeSt($event)">
     <ng-template st-row="uploadStatus" let-item>
       <span [ngClass]="{'text-red-dark':item?.uploadStatus === '4'}">{{item?.uploadStatusLabel}}</span>
     </ng-template>
@@ -52,14 +51,28 @@
   </st>
 </nz-card>
 <ng-template #extraTemplate>
-  <div class="d-flex align-items-center">
+  <div class="d-flex align-items-center mr-sm">
     <div class="mr-md">
       已选择
       <strong class="text-red">{{ selectedRows.length }}</strong> 条数据
     </div>
-    <button nz-button nzType="primary" (click)="upload()" acl [acl-ability]="['FUND-REPORTING-upload']">上传</button>
-    <button nz-button nzType="primary" (click)="recall()" acl [acl-ability]="['FUND-REPORTING-recall']">撤回</button>
-    <button nz-button nzType="primary" (click)="updateData()" acl
-      [acl-ability]="['FUND-REPORTING-upload-data']">更新数据</button>
+    <button nz-button nzDanger [nzLoading]="isLoading && st.loading" acl [acl-ability]="['FUND-REPORTING-search']"
+      (click)="openDrawer()">筛选</button>
+    <button nz-button nzDanger (click)="export()" acl [acl-ability]="['FUND-REPORTING-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)="upload()" acl [acl-ability]="['FUND-REPORTING-upload']">
+          上传
+        </li>
+        <li nz-menu-item (click)="recall()" acl [acl-ability]="['FUND-REPORTING-recall']">
+          撤回
+        </li>
+        <li nz-menu-item (click)="updateData()" acl [acl-ability]="['FUND-REPORTING-upload-data']">
+          更新数据
+        </li>
+      </ul>
+    </nz-dropdown-menu>
   </div>
-</ng-template>
+</ng-template>

src/app/routes/datatable/reporting/components/fund-reporting/fund-reporting.component.less

@@ -1,5 +0,0 @@
-:host {
-  .text-black {
-    color: #000;
-  }
-}

src/app/routes/datatable/reporting/components/fund-reporting/fund-reporting.component.ts

@@ -1,24 +1,21 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { STChange, STColumn, STComponent, STData } from '@delon/abc/st';
-import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
-import { ShipperBaseService } from '@shared';
+import { SFDateWidgetSchema } from '@delon/form';
+import { SearchDrawerService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { BasicTableComponent } from 'src/app/routes/commom';
 import { ReportingService } from '../../services/reporting.service';
 import { DatatableReportingFundInfoComponent } from '../fund-info/fund-info.component';
 
 @Component({
   selector: 'app-datatable-fund-reporting',
   templateUrl: './fund-reporting.component.html',
-  styleUrls: ['./fund-reporting.component.less']
+  styleUrls: ['../../../../commom/less/commom-table.less']
 })
-export class DatatableFundReportingComponent implements OnInit {
-  _$expand = false;
-  ui!: SFUISchema;
-  schema!: SFSchema;
+export class DatatableFundReportingComponent extends BasicTableComponent implements OnInit {
   columns!: STColumn[];
   @ViewChild('st', { static: false }) st!: STComponent;
-  @ViewChild('sf', { static: false }) sf!: SFComponent;
   tabType!: string;
   tabs: any[] = [
     { name: '待上传', value: '1' },
@@ -36,15 +33,9 @@ export class DatatableFundReportingComponent implements OnInit {
     private router: Router,
     private ar: ActivatedRoute,
     private modal: NzModalService,
-    public shipperSrv: ShipperBaseService
+    public searchDrawerService: SearchDrawerService
   ) {
-  }
-
-  /**
-   * 查询字段个数
-   */
-  get queryFieldCount(): number {
-    return Object.keys(this.schema?.properties || {}).length;
+    super(searchDrawerService);
   }
 
   /**
@@ -65,22 +56,6 @@ export class DatatableFundReportingComponent implements OnInit {
   //   return this.st?.list.filter((item: any) => item.checked) || [];
   // }
 
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle() {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/_$expand', this._$expand);
-  }
-
-  /**
-   * 重置表单
-   */
-  resetSF() {
-    this.sf.reset();
-    this._$expand = false;
-    this.isLoading = true
-  }
   /**
    * 程序初始化入口
    */
@@ -95,29 +70,26 @@ export class DatatableFundReportingComponent implements OnInit {
   initSF() {
     this.schema = {
       properties: {
-        _$expand: { type: 'boolean', ui: { hidden: true } },
         orderCode: { title: '订单号', type: 'string', ui: { placeholder: '请输入' } },
         wayBillCode: {
           type: 'string',
           title: '运单号',
           ui: {
-            placeholder: '请输入',
-          },
+            placeholder: '请输入'
+          }
         },
         serialNumberCode: {
           type: 'string',
           title: '流水单号',
           ui: {
-            placeholder: '请输入',
-          },
+            placeholder: '请输入'
+          }
         },
         carrier: {
           title: '承运司机',
           type: 'string',
           ui: {
-            placeholder: '请输入司机姓名', visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            placeholder: '请输入司机姓名'
           }
         },
         carNumber: {
@@ -125,10 +97,7 @@ export class DatatableFundReportingComponent implements OnInit {
           type: 'string',
           maxLength: 9,
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            placeholder: '请输入'
           }
         },
         payee: {
@@ -136,10 +105,7 @@ export class DatatableFundReportingComponent implements OnInit {
           type: 'string',
           maxLength: 9,
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            placeholder: '请输入'
           }
         },
         // uploadStatus: {
@@ -170,10 +136,7 @@ export class DatatableFundReportingComponent implements OnInit {
           ui: {
             placeholder: '请选择',
             allowClear: true,
-            widget: 'select',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            widget: 'select'
           }
         },
         ltdId: {
@@ -182,10 +145,7 @@ export class DatatableFundReportingComponent implements OnInit {
           ui: {
             placeholder: '请选择',
             widget: 'select',
-            asyncData: () => this.shipperSrv.getNetworkFreightForwarder({}, false),
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            asyncData: () => this.service.getNetworkFreightForwarder({}, false),
             allowClear: true
           }
         },
@@ -195,11 +155,8 @@ export class DatatableFundReportingComponent implements OnInit {
           ui: {
             widget: 'sl-from-to',
             type: 'date',
-            format: 'yyyy-MM-dd',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
-          } as SFDateWidgetSchema,
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
         },
         uploadTime: {
           title: '上传时间',
@@ -207,17 +164,10 @@ export class DatatableFundReportingComponent implements OnInit {
           ui: {
             widget: 'sl-from-to',
             type: 'date',
-            format: 'yyyy-MM-dd',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
-          } as SFDateWidgetSchema,
-        },
-      },
-    };
-    this.ui = {
-      '*': { spanLabelFixed: 120, grid: { span: 8, gutter: 4 }, enter: () => this.search() },
-      $time: { grid: { span: 24 } },
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
+        }
+      }
     };
   }
 
@@ -226,22 +176,22 @@ export class DatatableFundReportingComponent implements OnInit {
    */
   initST() {
     this.columns = [
-      { title: '', type: 'checkbox', className: 'text-center', width: '60px', },
-      { title: '上传状态', render: 'uploadStatus', className: 'text-center', width: '120px', },
-      { title: '本地校验', render: 'verifyStatus', className: 'text-center', width: '120px', },
-      { title: '流水单号', index: 'serialNumberCode', className: 'text-center', width: '190px', },
+      { title: '', type: 'checkbox', className: 'text-center', width: '60px' },
+      { title: '上传状态', render: 'uploadStatus', className: 'text-center', width: '120px' },
+      { title: '本地校验', render: 'verifyStatus', className: 'text-center', width: '120px' },
+      { title: '流水单号', index: 'serialNumberCode', className: 'text-center', width: '190px' },
       {
         title: '订单号',
         render: 'orderCode',
         className: 'text-center',
-        width: '180px',
+        width: '180px'
       },
-      { title: '运单号', render: 'wayBillCode', className: 'text-center', width: '180px', },
+      { title: '运单号', render: 'wayBillCode', className: 'text-center', width: '180px' },
       {
         title: '网络货运人',
         index: 'ltdName',
         className: 'text-center',
-        width: '180px',
+        width: '180px'
       },
       { title: '实际承运人名称', index: 'carrier', className: 'text-center', width: '150px' },
       { title: '实际承运人证件号码', index: 'cardId', className: 'text-center', width: '200px' },
@@ -259,12 +209,10 @@ export class DatatableFundReportingComponent implements OnInit {
       { title: '实际支付金额', render: 'payAmount', className: 'text-center', width: '150px' },
       { title: '交易时间', index: 'transactionTime', className: 'text-center', width: '180px' },
       { title: '上传次数', index: 'uploadFrequency', className: 'text-center', width: '120px' },
-      { title: '上传时间', index: 'uploadTime', className: 'text-center', width: '180px' },
+      { title: '上传时间', index: 'uploadTime', className: 'text-center', width: '180px' }
     ];
   }
 
-
-
   /**
    *撤销
    * @param record 记录实例
@@ -287,11 +235,9 @@ export class DatatableFundReportingComponent implements OnInit {
 
             this.search();
           }
-        })
+        });
       }
     });
-
-
   }
 
   selectChange(item: any) {
@@ -300,7 +246,7 @@ export class DatatableFundReportingComponent implements OnInit {
     setTimeout(() => {
       this.selectedRows = [];
       this.st.load(1);
-    })
+    });
   }
 
   /**
@@ -310,7 +256,7 @@ export class DatatableFundReportingComponent implements OnInit {
     // this.router.navigate(['../view', record.uuid], { relativeTo: this.ar });
     this.router.navigate(['../detail'], {
       queryParams: {
-        id: record.id,
+        id: record.id
       },
       relativeTo: this.ar
     });
@@ -348,12 +294,9 @@ export class DatatableFundReportingComponent implements OnInit {
         this.service.msgSrv.success('上传成功');
         this.search();
       }
-    })
+    });
   }
 
-
-
-
   /**
    * 查看校验结果
    */
@@ -368,12 +311,9 @@ export class DatatableFundReportingComponent implements OnInit {
       },
       nzFooter: null
     });
-    modalRef.afterClose.subscribe(res => {
-    })
+    modalRef.afterClose.subscribe(res => {});
   }
 
-
-
   /**
    * 查看监管审核结果
    */
@@ -381,7 +321,7 @@ export class DatatableFundReportingComponent implements OnInit {
     if (record?.verifyStatus !== '2') {
       return;
     }
-    this.openWainingModal('监管审核结果', record?.uploadResult)
+    this.openWainingModal('监管审核结果', record?.uploadResult);
   }
 
   /**
@@ -398,34 +338,31 @@ export class DatatableFundReportingComponent implements OnInit {
         this.service.msgSrv.success('更新成功');
         this.selectedRows = [];
         this.st.reload();
-
       }
-    })
+    });
   }
 
-
   search() {
     this.selectedRows = [];
     this.st.load(1);
   }
 
   /**
-  * 异步导出
-  */
+   * 异步导出
+   */
   export() {
-    this.service.exportStart({ ...this.sf.value, pageSize: -1 }, this.service.$api_export_fund_reporting);
+    this.service.exportStart({ ...this.sf?.value, pageSize: -1 }, this.service.$api_export_fund_reporting);
   }
 
   openWainingModal(content: string, title = '提示') {
     this.modal.warning({
       nzMask: false,
       nzTitle: title,
-      nzContent: content,
-    })
+      nzContent: content
+    });
   }
 
   changeSt(e: STChange): void {
-
     if (e.type === 'checkbox') {
       const checkRows = (e.checkbox as STData[]) || [];
       //判断当前页是否有选中的行
@@ -434,16 +371,15 @@ export class DatatableFundReportingComponent implements OnInit {
         const stList = this.st.list;
         stList.forEach(item => {
           this.selectedRows = this.selectedRows.filter((e: any) => e.id !== item.id);
-        })
+        });
       } else {
         //添加新增的行
         checkRows.forEach((item: any) => {
           const newSelectedList = this.selectedRows.filter((r: any) => r.id === item.id);
           if (newSelectedList.length === 0) {
             this.selectedRows.push(item);
-
           }
-        })
+        });
         // 移除取消选中的行
         const stList = this.st.list;
         stList.forEach(item => {
@@ -451,12 +387,12 @@ export class DatatableFundReportingComponent implements OnInit {
             const index = this.selectedRows.findIndex(_item => item.id === _item.id);
             if (index !== -1) this.selectedRows.splice(index, 1);
           }
-        })
+        });
       }
     } else if (e.type === 'loaded') {
       // 页面加载时勾选
       (e?.loaded || []).forEach((r: any) => {
-        this.selectedRows.forEach((x) => {
+        this.selectedRows.forEach(x => {
           if (x.id === r.id) {
             r.checked = true;
           }
@@ -468,20 +404,20 @@ export class DatatableFundReportingComponent implements OnInit {
   routeToOrder(item: any) {
     if (item.orderType === '1') {
       window.open(location.origin + `/#/order-management/vehicle/vehicle-detail/${item.orderId}`);
-    } else {
+    } else if (item.orderType === '2') {
       window.open(location.origin + `/#/order-management/bulk/bulk-detail/${item.orderId}`);
+    } else if (item.orderType === '3') {
+      this.router.navigate(['/order-management/vehicle/vehicle-detail/' + item.orderId]);
     }
   }
 
   routeTowaybill(item: any) {
     if (item.orderType === '1') {
       window.open(location.origin + `/#/waybill-management/vehicle/vehicle-detail/${item.wayBillId}`);
-
-    } else {
+    } else if (item.orderType === '2') {
       window.open(location.origin + `/#/waybill-management/bulk/bulk-detail/${item.wayBillId}`);
-
+    } else if (item.orderType === '3') {
+      window.open(location.origin + `/#/waybill-management/vehicle/vehicle-detail/${item.wayBillId}`);
     }
   }
-
-
 }

src/app/routes/datatable/reporting/components/order-reporting/order-reporting.component.html

@@ -1,7 +1,5 @@
-<page-header-wrapper [title]="''"></page-header-wrapper>
-
+<!-- <page-header-wrapper [title]="''"></page-header-wrapper>
 <nz-card>
-  <!-- 搜索表单 -->
   <div nz-row nzGutter="8">
     <div nz-col [nzSpan]=" 24 ">
       <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
@@ -17,19 +15,19 @@
       <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
     </button>
   </div>
-</nz-card>
-<nz-card>
-  <nz-tabset [nzTabBarExtraContent]="extraTemplate" *ngIf="tabs.length>0">
+</nz-card> -->
+<nz-card class="table-box">
+  <div class="tab_header">
+    <label class="page_title"> <label class="driver">|</label> 订单上报</label>
+    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="selectChange(tab)">
+      </nz-tab>
+    </nz-tabset>
+  </div>
 
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="selectChange(tab)">
-    </nz-tab>
-  </nz-tabset>
   <!-- 数据列表 -->
-  <st #st [scroll]="{x:'1200px'}" [data]="service.$api_get_order_reporting_page" [columns]="columns"
-    [req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
-    [res]="{ reName: { list: 'data.records', total: 'data.total' } }"
-    [page]="{ show: true, showSize: true, pageSizes: [10,20, 50, 100] }" [loading]="service.http.loading"
-    (change)="changeSt($event)">
+  <st #st [scroll]="{x:'1200px',y:scrollY}" [data]="service.$api_get_order_reporting_page" [columns]="columns"
+    [req]="{ params: reqParams }" [page]="{ }" [loading]="service.http.loading" (change)="changeSt($event)">
     <ng-template st-row="billPutStatus" let-item let-index="index">
       <a *ngIf="item?.billPutStatus === '2'" (click)="viewAuditResult(item)">{{filterStatus(item?.billPutStatus)}}</a>
       <span *ngIf="item?.billPutStatus !== '2'">{{filterStatus(item?.billPutStatus)}}</span>
@@ -75,16 +73,32 @@
   </st>
 </nz-card>
 <ng-template #extraTemplate>
-  <div class="d-flex align-items-center">
+  <div class="d-flex align-items-center mr-sm">
     <div class="mr-md">
       已选择
       <strong class="text-red">{{ selectedRows.length }}</strong> 条数据
     </div>
-    <button nz-button nzType="primary" (click)="upload()" acl [acl-ability]="['ORDER-REPORTING-upload']">上传</button>
-    <button nz-button nzType="primary" (click)="recall()" acl [acl-ability]="['ORDER-REPORTING-recall']">撤回</button>
-    <button nz-button nzType="primary" (click)="updateData()" acl
-      [acl-ability]="['ORDER-REPORTING-update-data']">更新数据</button>
-    <button nz-button nzType="primary" (click)="uploadSetting()" acl
-      [acl-ability]="['ORDER-REPORTING-search']">上传设置</button>
+    <button nz-button nzDanger [nzLoading]="isLoading && st.loading" acl [acl-ability]="['ORDER-REPORTING-search']"
+      (click)="openDrawer()">筛选</button>
+    <button nz-button nzDanger (click)="export()" acl [acl-ability]="['ORDER-REPORTING-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)="upload()" acl [acl-ability]="['ORDER-REPORTING-upload']">
+          上传
+        </li>
+        <li nz-menu-item (click)="recall()" acl [acl-ability]="['ORDER-REPORTING-recall']">
+          撤回
+        </li>
+        <li nz-menu-item (click)="updateData()" acl [acl-ability]="['ORDER-REPORTING-update-data']">
+          更新数据
+        </li>
+        <li nz-menu-item (click)="uploadSetting()" acl [acl-ability]="['ORDER-REPORTING-search-updata']">
+          上传设置
+        </li>
+      </ul>
+    </nz-dropdown-menu>
+
   </div>
-</ng-template>
+</ng-template>

src/app/routes/datatable/reporting/components/order-reporting/order-reporting.component.less

@@ -1,5 +0,0 @@
-:host {
-  .text-black {
-    color: #000;
-  }
-}

src/app/routes/datatable/reporting/components/order-reporting/order-reporting.component.spec.ts

@@ -1,24 +0,0 @@
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DatatableOrderReportingComponent } from './order-reporting.component';
-
-describe('DatatableOrderReportingComponent', () => {
-  let component: DatatableOrderReportingComponent;
-  let fixture: ComponentFixture<DatatableOrderReportingComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DatatableOrderReportingComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DatatableOrderReportingComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/routes/datatable/reporting/components/order-reporting/order-reporting.component.ts

@@ -2,8 +2,9 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { STChange, STColumn, STComponent, STData } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
-import { ShipperBaseService } from '@shared';
+import { SearchDrawerService, ShipperBaseService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { BasicTableComponent } from 'src/app/routes/commom';
 import { ReportingService } from '../../services/reporting.service';
 import { DatatableReportingUploadSettingComponent } from '../upload-setting/upload-setting.component';
 import { DatatableReportingVerifyResultComponent } from '../verify-result/verify-result.component';
@@ -12,15 +13,11 @@ import { DatatableReportingvViewTrackComponent } from '../view-track/view-track.
 @Component({
   selector: 'app-datatable-order-reporting',
   templateUrl: './order-reporting.component.html',
-  styleUrls: ['./order-reporting.component.less']
+  styleUrls: ['../../../../commom/less/commom-table.less']
 })
-export class DatatableOrderReportingComponent implements OnInit {
-  _$expand = false;
-  ui!: SFUISchema;
-  schema!: SFSchema;
+export class DatatableOrderReportingComponent extends BasicTableComponent implements OnInit {
   columns!: STColumn[];
   @ViewChild('st', { static: false }) st!: STComponent;
-  @ViewChild('sf', { static: false }) sf!: SFComponent;
   tabType!: string;
   tabs: any[] = [
     { name: '待上传', value: '0' },
@@ -37,15 +34,9 @@ export class DatatableOrderReportingComponent implements OnInit {
     private router: Router,
     private ar: ActivatedRoute,
     private modal: NzModalService,
-    public shipperSrv: ShipperBaseService
+    public searchDrawerService: SearchDrawerService
   ) {
-  }
-
-  /**
-   * 查询字段个数
-   */
-  get queryFieldCount(): number {
-    return Object.keys(this.schema?.properties || {}).length;
+    super(searchDrawerService);
   }
 
   /**
@@ -53,7 +44,7 @@ export class DatatableOrderReportingComponent implements OnInit {
    */
   get reqParams() {
     const params = Object.assign({}, this.sf?.value || {}, {
-      billPutStatus: this.selectedIndex,
+      billPutStatus: this.selectedIndex
     });
     delete params._$expand;
     return { ...params };
@@ -66,22 +57,6 @@ export class DatatableOrderReportingComponent implements OnInit {
   //   return this.st?.list.filter((item: any) => item.checked) || [];
   // }
 
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle() {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/_$expand', this._$expand);
-  }
-
-  /**
-   * 重置表单
-   */
-  resetSF() {
-    this.sf.reset();
-    this._$expand = false;
-    this.isLoading = true
-  }
   /**
    * 程序初始化入口
    */
@@ -102,8 +77,8 @@ export class DatatableOrderReportingComponent implements OnInit {
           type: 'string',
           title: '运单号',
           ui: {
-            placeholder: '请输入',
-          },
+            placeholder: '请输入'
+          }
         },
         networkTransporter: {
           title: '网络货运人',
@@ -111,7 +86,7 @@ export class DatatableOrderReportingComponent implements OnInit {
           ui: {
             placeholder: '请选择',
             widget: 'select',
-            asyncData: () => this.shipperSrv.getNetworkFreightForwarder({}, false),
+            asyncData: () => this.service.getNetworkFreightForwarder({}, false),
             allowClear: true
           }
         },
@@ -119,19 +94,14 @@ export class DatatableOrderReportingComponent implements OnInit {
           title: '货主',
           type: 'string',
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            placeholder: '请输入'
           }
         },
         driverName: {
           title: '承运司机',
           type: 'string',
           ui: {
-            placeholder: '请输入司机姓名/手机号', visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            placeholder: '请输入司机姓名/手机号'
           }
         },
         carNo: {
@@ -139,10 +109,7 @@ export class DatatableOrderReportingComponent implements OnInit {
           type: 'string',
           maxLength: 9,
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            placeholder: '请输入'
           }
         },
         // putStatus: {
@@ -175,10 +142,7 @@ export class DatatableOrderReportingComponent implements OnInit {
           ui: {
             placeholder: '请选择',
             widget: 'select',
-            allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            allowClear: true
           }
         },
         recentlyPutTime: {
@@ -187,11 +151,8 @@ export class DatatableOrderReportingComponent implements OnInit {
           ui: {
             widget: 'sl-from-to',
             type: 'date',
-            format: 'yyyy-MM-dd',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
-          } as SFDateWidgetSchema,
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
         },
         orderReceivingTime: {
           title: '运单生成时间',
@@ -199,11 +160,8 @@ export class DatatableOrderReportingComponent implements OnInit {
           ui: {
             widget: 'sl-from-to',
             type: 'date',
-            format: 'yyyy-MM-dd',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
-          } as SFDateWidgetSchema,
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
         },
         dispatchedDate: {
           title: '发货时间',
@@ -211,11 +169,8 @@ export class DatatableOrderReportingComponent implements OnInit {
           ui: {
             widget: 'sl-from-to',
             type: 'date',
-            format: 'yyyy-MM-dd',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
-          } as SFDateWidgetSchema,
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
         },
         receivingDate: {
           title: '收货时间',
@@ -223,11 +178,8 @@ export class DatatableOrderReportingComponent implements OnInit {
           ui: {
             widget: 'sl-from-to',
             type: 'date',
-            format: 'yyyy-MM-dd',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
-          } as SFDateWidgetSchema,
+            format: 'yyyy-MM-dd'
+          } as SFDateWidgetSchema
         },
 
         trajectoryDataAppStatus: {
@@ -240,10 +192,7 @@ export class DatatableOrderReportingComponent implements OnInit {
           ],
           ui: {
             placeholder: '请选择',
-            widget: 'select',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            widget: 'select'
           }
         },
         trajectoryDataStatus: {
@@ -256,22 +205,10 @@ export class DatatableOrderReportingComponent implements OnInit {
           ],
           ui: {
             placeholder: '请选择',
-            widget: 'select',
-            visibleIf: {
-              _$expand: (value: boolean) => value,
-            },
+            widget: 'select'
           }
-        },
-      },
-    };
-    this.ui = {
-      '*': {
-        spanLabelFixed: 120,
-        grid: {
-          lg: 12,
-          xl: 8
-        }, enter: () => this.search()
-      },
+        }
+      }
     };
   }
 
@@ -280,24 +217,24 @@ export class DatatableOrderReportingComponent implements OnInit {
    */
   initST() {
     this.columns = [
-      { title: '', type: 'checkbox', className: 'text-center', width: '60px', },
-      { title: '订单状态', index: 'billPutStatusLabel', className: 'text-center', width: '120px', },
-      { title: '司机状态', index: 'driverPutStatusLabel', className: 'text-center', width: '120px', },
-      { title: '车辆状态', index: 'carPutStatusLabel', className: 'text-center', width: '120px', },
-      { title: '本地校验', render: 'checkStatus', className: 'text-center', width: '120px', },
+      { title: '', type: 'checkbox', className: 'text-center', width: '60px' },
+      { title: '订单状态', index: 'billPutStatusLabel', className: 'text-center', width: '120px' },
+      { title: '司机状态', index: 'driverPutStatusLabel', className: 'text-center', width: '120px' },
+      { title: '车辆状态', index: 'carPutStatusLabel', className: 'text-center', width: '120px' },
+      { title: '本地校验', render: 'checkStatus', className: 'text-center', width: '120px' },
       {
         title: '订单号',
         render: 'billCode',
         className: 'text-center',
-        width: '180px',
+        width: '180px'
       },
-      { title: '运单号', render: 'wayBillCode', className: 'text-center', width: '180px', },
+      { title: '运单号', render: 'wayBillCode', className: 'text-center', width: '180px' },
 
       {
         title: '网络货运人',
         index: 'enterpriseInfoName',
         className: 'text-center',
-        width: '180px',
+        width: '180px'
       },
       { title: '统一社会信用代码', index: 'unifiedSocialCreditCode', className: 'text-center', width: '200px' },
       { title: '运单生成时间', index: 'wayBillCreateTime', className: 'text-center', width: '180px' },
@@ -317,12 +254,11 @@ export class DatatableOrderReportingComponent implements OnInit {
         width: '250px',
         type: 'enum',
         enum: {
-          "4": "绿色",
-          "3": "黄绿色",
-          "2": "黄色",
-          "1": "蓝色"
+          '4': '绿色',
+          '3': '黄绿色',
+          '2': '黄色',
+          '1': '蓝色'
         }
-
       },
       { title: '司机姓名', index: 'driverName', className: 'text-center', width: '150px' },
       { title: '司机手机号码', index: 'driverPhone', className: 'text-center', width: '200px' },
@@ -330,18 +266,14 @@ export class DatatableOrderReportingComponent implements OnInit {
       { title: '货物信息', index: 'goodsName', className: 'text-center', width: '180px' },
       { title: '实际承运人名称', index: 'carrierName', className: 'text-center', width: '150px' },
       { title: '实际承运人证件号码', index: 'carrierIdentityNo', className: 'text-center', width: '200px' },
-
-      { title: '实际承运人道路运输许可证号', index: 'roadTransportNo', className: 'text-center', width: '150px' },
-
+      { title: '实际承运人道路运输许可证号', index: 'roadTransportNo', className: 'text-center', width: '230px' },
       { title: '车辆轨迹', render: 'car', className: 'text-center', width: '250px' },
       { title: '司机轨迹', render: 'driver', className: 'text-center', width: '150px' },
       { title: '上传次数', index: 'putNumber', className: 'text-center', width: '150px' },
-      { title: '上传时间', index: 'recentlyPutTime', className: 'text-center', width: '180px' },
+      { title: '上传时间', index: 'recentlyPutTime', className: 'text-center', width: '180px' }
     ];
   }
 
-
-
   /**
    *撤销
    * @param record 记录实例
@@ -363,14 +295,12 @@ export class DatatableOrderReportingComponent implements OnInit {
             this.service.msgSrv.success('撤销成功');
             this.search();
           }
-        })
+        });
       }
     });
-
   }
 
   changeSt(e: STChange): void {
-
     if (e.type === 'checkbox') {
       const checkRows = (e.checkbox as STData[]) || [];
       //判断当前页是否有选中的行
@@ -379,16 +309,15 @@ export class DatatableOrderReportingComponent implements OnInit {
         const stList = this.st.list;
         stList.forEach(item => {
           this.selectedRows = this.selectedRows.filter((e: any) => e.id !== item.id);
-        })
+        });
       } else {
         //添加新增的行
         checkRows.forEach((item: any) => {
           const newSelectedList = this.selectedRows.filter((r: any) => r.id === item.id);
           if (newSelectedList.length === 0) {
             this.selectedRows.push(item);
-
           }
-        })
+        });
         // 移除取消选中的行
         const stList = this.st.list;
         stList.forEach(item => {
@@ -396,12 +325,12 @@ export class DatatableOrderReportingComponent implements OnInit {
             const index = this.selectedRows.findIndex(_item => item.id === _item.id);
             if (index !== -1) this.selectedRows.splice(index, 1);
           }
-        })
+        });
       }
     } else if (e.type === 'loaded') {
       // 页面加载时勾选
       (e?.loaded || []).forEach((r: any) => {
-        this.selectedRows.forEach((x) => {
+        this.selectedRows.forEach(x => {
           if (x.id === r.id) {
             r.checked = true;
           }
@@ -415,7 +344,7 @@ export class DatatableOrderReportingComponent implements OnInit {
     setTimeout(() => {
       this.selectedRows = [];
       this.st.load(1);
-    })
+    });
   }
 
   /**
@@ -425,7 +354,7 @@ export class DatatableOrderReportingComponent implements OnInit {
     // this.router.navigate(['../view', record.uuid], { relativeTo: this.ar });
     this.router.navigate(['../detail'], {
       queryParams: {
-        id: record.id,
+        id: record.id
       },
       relativeTo: this.ar
     });
@@ -463,10 +392,9 @@ export class DatatableOrderReportingComponent implements OnInit {
         this.service.msgSrv.success('上传成功');
         this.search();
       }
-    })
+    });
   }
 
-
   /**
    *
    * @param params 上传设置
@@ -479,8 +407,7 @@ export class DatatableOrderReportingComponent implements OnInit {
       nzComponentParams: {},
       nzFooter: null
     });
-    modalRef.afterClose.subscribe(res => {
-    })
+    modalRef.afterClose.subscribe(res => {});
   }
 
   /**
@@ -496,8 +423,7 @@ export class DatatableOrderReportingComponent implements OnInit {
       },
       nzFooter: null
     });
-    modalRef.afterClose.subscribe(res => {
-    })
+    modalRef.afterClose.subscribe(res => {});
   }
 
   /**
@@ -507,18 +433,17 @@ export class DatatableOrderReportingComponent implements OnInit {
     if (record?.billStatus !== '2') {
       return;
     }
-    this.openWainingModal('监管审核结果', record?.result)
+    this.openWainingModal('监管审核结果', record?.result);
   }
 
-
   search() {
     this.selectedRows = [];
     this.st.load(1);
   }
 
   /**
-  * 异步导出
-  */
+   * 异步导出
+   */
   export() {
     this.service.exportStart({ ...this.sf?.value, pageSize: -1 }, this.service.$api_export_reporting_order);
   }
@@ -527,15 +452,15 @@ export class DatatableOrderReportingComponent implements OnInit {
     this.modal.warning({
       nzMask: false,
       nzTitle: title,
-      nzContent: content,
-    })
+      nzContent: content
+    });
   }
 
   /**
    * 查看轨迹
    */
   viewTrack(_record: any, trajectory: string) {
-    const title = trajectory === 'car' ? '车辆' : '司机'
+    const title = trajectory === 'car' ? '车辆' : '司机';
     const modalRef = this.modal.create({
       nzTitle: `查看${title}轨迹`,
       nzWidth: 1000,
@@ -546,13 +471,12 @@ export class DatatableOrderReportingComponent implements OnInit {
       },
       nzFooter: null
     });
-    modalRef.afterClose.subscribe(res => {
-    })
+    modalRef.afterClose.subscribe(res => {});
   }
 
   /**
- * 更新数据
- */
+   * 更新数据
+   */
   updateData() {
     if (this.selectedRows.length === 0) {
       this.openWainingModal('请选择需要更新的数据');
@@ -565,7 +489,7 @@ export class DatatableOrderReportingComponent implements OnInit {
         this.selectedRows = [];
         this.st.reload();
       }
-    })
+    });
   }
 
   filterStatus(status: number) {
@@ -578,7 +502,6 @@ export class DatatableOrderReportingComponent implements OnInit {
         return '上传异常';
       default:
         return '';
-
     }
   }
 
@@ -592,26 +515,26 @@ export class DatatableOrderReportingComponent implements OnInit {
         return '不通过';
       default:
         return '';
-
     }
   }
 
   routeToOrder(item: any) {
     if (item.billType === '1') {
       window.open(location.origin + `/#/order-management/vehicle/vehicle-detail/${item.orderId}`);
-    } else {
+    } else if (item.billType === '2') {
       window.open(location.origin + `/#/order-management/bulk/bulk-detail/${item.orderId}`);
+    } else if (item.billType === '3') {
+      window.open(location.origin + `/#/order-management/vehicle/vehicle-detail/${item.orderId}`);
     }
   }
 
   routeTowaybill(item: any) {
     if (item.billType === '1') {
       window.open(location.origin + `/#/waybill-management/vehicle/vehicle-detail/${item.waybillId}`);
-
-    } else {
+    } else if (item.billType === '2') {
       window.open(location.origin + `/#/waybill-management/bulk/bulk-detail/${item.waybillId}`);
-
+    } else if (item.billType === '3') {
+      window.open(location.origin + `/#/waybill-management/vehicle/vehicle-detail/${item.waybillId}`);
     }
   }
-
 }

src/app/routes/datatable/reporting/components/verify-result/verify-result.component.html

@@ -12,6 +12,11 @@
       <ng-template st-row="checkStatus" let-item>
         <span [ngClass]="{'text-red-dark':item?.checkStatus === 2}">{{filterCheckStatus(item?.checkStatus)}}</span>
       </ng-template>
+      <ng-template st-row="fieldValue" let-item>
+        <ellipsis lines="3" tooltip>
+          <div>{{item?.fieldValue}}</div>
+        </ellipsis>
+      </ng-template>
     </st>
   </div>
 </div>

src/app/routes/datatable/reporting/components/verify-result/verify-result.component.ts

@@ -62,7 +62,7 @@ export class DatatableReportingVerifyResultComponent implements OnInit {
           1: '是'
         }
       },
-      { title: '上传值', index: 'fieldValue', className: 'text-center', width: '150px', },
+      { title: '上传值', render: 'fieldValue', className: 'text-center', width: '150px', },
       {
         title: '本地校验', render: 'checkStatus', className: 'text-center', width: '100px',
         // type: 'enum',

src/app/routes/datatable/reporting/services/reporting.service.ts

@@ -1,10 +1,10 @@
 import { Injectable, Injector } from '@angular/core';
-import { BaseService } from '@shared';
+import { BaseService, ShipperBaseService } from '@shared';
 
 @Injectable({
   providedIn: 'root'
 })
-export class ReportingService extends BaseService {
+export class ReportingService extends ShipperBaseService {
 
   $api_get_order_reporting_page = `/api/sdc/regulation/list/queryPage`; // 订单上报-列表
   $api_upload_order_reporting = `/api/sdc/regulation/push`; // 上传订单上报

src/app/routes/datatable/services/data.service.ts

@@ -11,15 +11,13 @@
 
 import { Injectable, Injector } from '@angular/core';
 import { _HttpClient } from '@delon/theme';
-import { NzMessageService } from 'ng-zorro-antd/message';
+import { ShipperBaseService } from '@shared';
 import { map } from 'rxjs/operators';
-import { BaseService } from 'src/app/shared/services/core/base.service';
-import { EAFileUtil } from 'src/app/shared/utils/file.util';
 
 @Injectable({
   providedIn: 'root',
 })
-export class DataService extends BaseService {
+export class DataService extends ShipperBaseService {
 
   // 查询运营报表
   $api_listOperationalReportPage = `/api/sdc/report/listOperationalReportPage`;
@@ -109,6 +107,8 @@ export class DataService extends BaseService {
   $api_total_freight = `/api/sdc/reportData/getTotalFreight`;
   // 附加费总额
   $api_total_surcharge = `/api/sdc/reportData/getTotalSurcharge`;
+  // 运营导出
+  $api_asyncExportOperationalReport = `/api/sdc/report/asyncExportOperationalReport`;
 
 
 

src/app/routes/download/components/list/list.component.ts

@@ -1,8 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { STChange, STColumn, STComponent, STData } from '@delon/abc/st';
+import { STColumn, STComponent, STData } from '@delon/abc/st';
 import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
-import { _HttpClient } from '@delon/theme';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { DownloadService } from '../../services/download.service';
 
@@ -16,7 +14,7 @@ export class DownloadComponentsListComponent implements OnInit {
   columns: STColumn[] = [];
   @ViewChild('st', { static: false }) st!: STComponent;
   @ViewChild('sf', { static: false }) sf!: SFComponent;
-  constructor(public service: DownloadService, private modal: NzModalService, private router: Router, private ar: ActivatedRoute) {}
+  constructor(public service: DownloadService, private modal: NzModalService) {}
 
   /**
    * 查询参数

src/app/routes/financial-management/components/abnormal-gold/abnormal-gold.component.html

@@ -1,14 +1,4 @@
-<!--
- * @Description  : 
- * @Version      : 1.0
- * @Author       : Shiming
- * @Date         : 2022-04-06 10:57:56
- * @LastEditors  : Shiming
- * @LastEditTime : 2022-04-14 10:39:57
- * @FilePath     : \\tms-obc-web\\src\\app\\routes\\financial-management\\components\\abnormal-gold\\abnormal-gold.component.html
- * 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" nzBordered>
   <div nz-row nzGutter="8">
@@ -31,22 +21,25 @@
       </button>
     </div>
   </div>
-</nz-card>
+</nz-card> -->
 
-<nz-card class="content-box" nzBordered>
-  <nz-tabset>
-    <nz-tab nzTitle="处理中"(nzClick)="changePaymentStatus('1')"></nz-tab>
-    <nz-tab nzTitle="已退款"(nzClick)="changePaymentStatus('5')"></nz-tab>
-    <nz-tab nzTitle="全部"(nzClick)="changePaymentStatus('')"></nz-tab>
-  </nz-tabset>
+<nz-card class="table-box">
+  <div class="tab_header">
+    <label class="page_title"><label class="driver">|</label>异常入金</label>
+    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
+      <nz-tab nzTitle="处理中" (nzClick)="changePaymentStatus('1')"></nz-tab>
+      <nz-tab nzTitle="已退款" (nzClick)="changePaymentStatus('5')"></nz-tab>
+      <nz-tab nzTitle="全部" (nzClick)="changePaymentStatus('')"></nz-tab>
+    </nz-tabset>
+  </div>
 
-  <st
-    #st
-    [data]="service.$api_get_getAbnormalAmountPage"
-    [columns]="columns"
-    [req]="{ process: beforeReq }"
-    [page]="{}"
-    [loading]="false"
-    [scroll]="{ x: '1200px' }"
-  ></st>
-</nz-card>
+  <ng-template #extraTemplate>
+    <div class="mr-sm">
+      <button nz-button nzDanger [nzLoading]="service.http.loading" (click)="openDrawer()">筛选</button>
+      <button nz-button nzDanger (click)="exprot()" acl  [acl-ability]="['FINANCIAL-ABNORMAL-export']"> 导出</button>
+    </div>
+  </ng-template>
+
+  <st #st [data]="service.$api_get_getAbnormalAmountPage" [columns]="columns" [req]="{ process: beforeReq }" [page]="{}"
+    [loading]="false" [scroll]="{ x: '1200px',y:scrollY }"></st>
+</nz-card>

src/app/routes/financial-management/components/abnormal-gold/abnormal-gold.component.ts

@@ -2,34 +2,43 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { STComponent, STColumn, STRequestOptions, STChange } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFDateWidgetSchema } from '@delon/form';
+import { SearchDrawerService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { BasicTableComponent } from 'src/app/routes/commom';
 import { FreightAccountService } from '../../services/freight-account.service';
 import { ClearingModalComponent } from './clearing-modal/clearing-modal.component';
 
 @Component({
   selector: 'app-abnormal-gold',
   templateUrl: './abnormal-gold.component.html',
-  styleUrls: ['../../../commom/less/box.less', '../../../commom/less/expend-but.less']
+  styleUrls: ['../../../commom/less/commom-table.less']
 })
-export class AbnormalGoldComponent implements OnInit {
+export class AbnormalGoldComponent extends BasicTableComponent implements OnInit {
   @ViewChild('st', { static: true })
   st!: STComponent;
-  @ViewChild('sf', { static: false })
-  sf!: SFComponent;
   columns: STColumn[] = this.initST();
-  searchSchema: SFSchema = this.initSF();
-
-  _$expand = false;
+  schema: SFSchema = this.initSF();
 
   rechargeStatus = '1';
-  constructor(public service: FreightAccountService, private nzModalService: NzModalService, private router: Router) {}
+  constructor(
+    public service: FreightAccountService,
+    private nzModalService: NzModalService,
+    private router: Router,
+    public searchDrawerService: SearchDrawerService
+  ) {
+    super(searchDrawerService);
+  }
 
   ngOnInit(): void {}
 
+  search() {
+    this.st?.load(1);
+  }
+
   beforeReq = (requestOptions: STRequestOptions) => {
     Object.assign(requestOptions.body, { rechargeStatus: this.rechargeStatus });
     if (this.sf) {
-      Object.assign(requestOptions.body, { ...this.sf.value });
+      Object.assign(requestOptions.body, { ...this.sf?.value });
     }
     return requestOptions;
   };
@@ -56,22 +65,6 @@ export class AbnormalGoldComponent implements OnInit {
     });
   }
 
-  /**
-   * 重置表单
-   */
-  resetSF() {
-    this.sf.reset();
-    this._$expand = false;
-  }
-
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle() {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/expand', this._$expand);
-  }
-
   private initSF(): SFSchema {
     return {
       properties: {
@@ -116,30 +109,21 @@ export class AbnormalGoldComponent implements OnInit {
           type: 'string',
           title: '付款账户',
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请输入'
           }
         },
         transferBankCardNumber: {
           type: 'string',
           title: '付款账号',
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请输入'
           }
         },
         transferBankOpenName: {
           type: 'string',
           title: '付款银行',
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请输入'
           }
         },
         transferDate: {
@@ -149,10 +133,7 @@ export class AbnormalGoldComponent implements OnInit {
             widget: 'sl-from-to-search',
             format: 'yyyy-MM-dd',
             placeholder: '请选择',
-            nzShowTime: true,
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            nzShowTime: true
           } as SFDateWidgetSchema
         }
       }
@@ -190,6 +171,7 @@ export class AbnormalGoldComponent implements OnInit {
         buttons: [
           {
             text: '查看',
+            acl: { ability: ['FINANCIAL-ABNORMAL-view'] },
             click: item => this.router.navigate(['/financial-management/abnormal-gold/detail/' + item.id])
           }
         ]
@@ -198,6 +180,6 @@ export class AbnormalGoldComponent implements OnInit {
   }
   // 导出
   exprot() {
-    this.service.exportStart({ ...this.sf.value, pageSize: -1 }, this.service.$api_get_exportAbnormalAmountPage);
+    this.service.exportStart({ ...this.sf?.value, pageSize: -1 }, this.service.$api_get_exportAbnormalAmountPage);
   }
 }

src/app/routes/financial-management/components/advance-collection/advance-collection.component.html

@@ -1,4 +1,4 @@
-<page-header-wrapper title="预收款余额">
+<!-- <page-header-wrapper title="预收款余额">
 </page-header-wrapper>
 
 <nz-card class="search-box">
@@ -19,10 +19,17 @@
             </button>
         </div>
     </div>
-</nz-card>
+</nz-card> -->
 
-<nz-card class="content-box">
-    <st #st [data]="service.$api_get_advance_collection_page" [columns]="columns" [req]="{  process: beforeReq }" [page]="{}"
-        [loading]="false" [scroll]="{ x: '1200px' }">
+<nz-card class="table-box">
+    <div class="header_box">
+        <label class="page_title"> <label class="driver">|</label> 预收款余额</label>
+        <div class="mr-sm">
+            <button nz-button nzDanger [nzLoading]="service.http.loading" (click)="openDrawer()">筛选</button>
+            <button nz-button nzDanger (click)="exportList()"> 导出</button>
+        </div>
+    </div>
+    <st #st [data]="service.$api_get_advance_collection_page" [columns]="columns" [req]="{  process: beforeReq }"
+        [page]="{}" [loading]="false" [scroll]="{ x: '1200px',y:scrollY  }">
     </st>
 </nz-card>

src/app/routes/financial-management/components/advance-collection/advance-collection.component.ts

@@ -2,52 +2,47 @@ import { Component, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { STComponent, STColumn, STRequestOptions } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFDateWidgetSchema } from '@delon/form';
+import { SearchDrawerService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
+import { BasicTableComponent } from 'src/app/routes/commom';
 
 import { FreightAccountService } from '../../services/freight-account.service';
 
 @Component({
   selector: 'app-advance-collection',
   templateUrl: './advance-collection.component.html',
-  styleUrls: ['../../../commom/less/box.less', '../../../commom/less/expend-but.less']
+  styleUrls: ['../../../commom/less/commom-table.less']
 })
-export class AdvanceCollectionComponent {
+export class AdvanceCollectionComponent extends BasicTableComponent {
   @ViewChild('st', { static: true })
   st!: STComponent;
-  @ViewChild('sf', { static: false })
-  sf!: SFComponent;
 
-  searchSchema: SFSchema = this.initSF();
+  schema: SFSchema = this.initSF();
   columns: STColumn[] = this.initST();
-  _$expand = false;
 
-  constructor(public service: FreightAccountService, private router: Router, private modal: NzModalService) {}
+  constructor(
+    public service: FreightAccountService,
+    private router: Router,
+    public searchDrawerService: SearchDrawerService
+  ) {
+    super(searchDrawerService);
+  }
+
+  ngOnInit(): void {}
+
+  search() {
+    this.st?.load(1);
+  }
 
   beforeReq = (requestOptions: STRequestOptions) => {
     if (this.sf) {
-      Object.assign(requestOptions.body, { ...this.sf.value });
+      Object.assign(requestOptions.body, { ...this.sf?.value });
     }
     return requestOptions;
   };
 
-  /**
-   * 重置表单
-   */
-  resetSF() {
-    this.sf.reset();
-    this._$expand = false;
-  }
-
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle() {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/expand', this._$expand);
-  }
-
   exportList() {
-    this.service.exportStart( { ...this.sf.value, pageSize: -1 }, this.service.$api_get_reportYskBla,);
+    this.service.exportStart({ ...this.sf?.value, pageSize: -1 }, this.service.$api_get_reportYskBla);
   }
 
   private initSF(): SFSchema {
@@ -97,10 +92,7 @@ export class AdvanceCollectionComponent {
           enum: [{ label: '全部', value: null }],
           ui: {
             widget: 'select',
-            placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请选择'
           },
           default: null
         },
@@ -114,10 +106,7 @@ export class AdvanceCollectionComponent {
           ],
           ui: {
             widget: 'select',
-            placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请选择'
           },
           default: null
         }

src/app/routes/financial-management/components/bank-card-management/add/add.component.html

@@ -0,0 +1,22 @@
+<page-header-wrapper [title]="''"></page-header-wrapper>
+<div>
+  <div class="setp">
+    <nz-steps [nzCurrent]="current">
+      <nz-step *ngFor="let step of this.steps; trackBy: trackById" [nzTitle]="step.title"
+        [nzPercentage]="step.async ? step.percentage : null"></nz-step>
+    </nz-steps>
+  </div>
+  <nz-card>
+    <div class="content">
+      <app-cwc-bank-card-management-bind *ngIf="current === 0" (toNextStep)="changeCurrent($event)">
+      </app-cwc-bank-card-management-bind>
+      <div *ngIf="current === 2">
+        <nz-result nzStatus="success" nzTitle="绑卡成功" nzSubTitle="后续您可以使用该卡在平台进行充值">
+          <div nz-result-extra>
+            <button nz-button nzType="primary" (click)="toBandCardPage()">回到银行卡列表</button>
+          </div>
+        </nz-result>
+      </div>
+    </div>
+  </nz-card>
+</div>

src/app/routes/financial-management/components/bank-card-management/add/add.component.less

@@ -0,0 +1,8 @@
+:host {
+
+  .setp,
+  .content {
+    width: 40%;
+    margin: 50px auto;
+  }
+}

src/app/routes/financial-management/components/bank-card-management/add/add.component.spec.ts

@@ -1,19 +1,19 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DatatableFundReportingComponent } from './fund-reporting.component';
+import { CwcBankCardManagementAddComponent } from './add.component';
 
-describe('DatatableFundReportingComponent', () => {
-  let component: DatatableFundReportingComponent;
-  let fixture: ComponentFixture<DatatableFundReportingComponent>;
+describe('CwcBankCardManagementAddComponent', () => {
+  let component: CwcBankCardManagementAddComponent;
+  let fixture: ComponentFixture<CwcBankCardManagementAddComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [DatatableFundReportingComponent]
+      declarations: [CwcBankCardManagementAddComponent]
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DatatableFundReportingComponent);
+    fixture = TestBed.createComponent(CwcBankCardManagementAddComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/routes/financial-management/components/bank-card-management/add/add.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { cacheConf } from '@conf/cache.conf';
+import { SFComponent, SFSchema, SFUISchema } from '@delon/form';
+import { EACacheService } from '@shared';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { BankCardManagementService } from '../../../services/bank-card-management.service';
+
+interface EmitType {
+  success: boolean,
+  current: number,
+  value: object
+};
+@Component({
+  selector: 'app-cwc-bank-card-management-add',
+  templateUrl: './add.component.html',
+  styleUrls: ['./add.component.less']
+})
+export class CwcBankCardManagementAddComponent implements OnInit {
+  schema: SFSchema = {};
+  ui: SFUISchema = {};
+  record: any;
+  i: any;
+  userInfo: any = {};
+  bankBranchName = '';
+  bankArea = '';
+  bankName = '';
+  loading = false;
+  current = 0; // 当前节点
+  verifyInfo = {};
+  steps: Array<any> = [
+    {
+      id: 1,
+      title: `绑定银行卡`,
+      async: false,
+      percentage: null
+    },
+    {
+      id: 2,
+      title: `小额鉴权`,
+      async: false,
+      percentage: null
+    },
+    {
+      id: 3,
+      title: `完成`,
+      async: false,
+      percentage: null
+    },
+  ];
+
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  networkTransporterId = '';
+  bankSfInfo: any = {} // 银行卡信息;
+  smallAuthentication: any = {}; //小额鉴权信息
+
+  branchBanks: any[] = [];
+  constructor(public service: BankCardManagementService,
+    public modalService: NzModalService, public router: Router,
+    public ar: ActivatedRoute, public eaCacheSrv: EACacheService) {
+    this.networkTransporterId = this.eaCacheSrv.get(cacheConf.env)?.networkTransporterId
+  }
+
+
+  ngOnInit() {
+
+  }
+
+  trackById(_: number, item: any): number {
+    return item.id;
+  }
+
+
+
+  formatCard() {
+    return /[1-9]\d{12,18}/;
+  }
+
+  changeCurrent(e: EmitType) {
+    if (e && e?.success) {
+      this.current = e?.current;
+      if (this.current === 1) {
+        this.bankSfInfo = e?.value;
+      }
+    }
+  }
+  toBandCardPage() {
+    this.router.navigate(['../index'], {
+      relativeTo: this.ar
+    });
+  }
+
+}

src/app/routes/financial-management/components/bank-card-management/bind/bind.component.html

@@ -0,0 +1,8 @@
+<div>
+  <sf #sf [schema]="schema" button="none" [ui]="ui">
+  </sf>
+  <div class="modal-footer" style="margin-left: 120px;">
+    <button nzType="primary" (click)="submit()" [disabled]="!sf?.valid" [nzLoading]="service.http.loading"
+      nz-button>保存</button>
+  </div>
+</div>

src/app/routes/financial-management/components/bank-card-management/bind/bind.component.spec.ts

@@ -0,0 +1,24 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CwcBankCardManagementBindComponent } from './bind.component';
+
+describe('CwcBankCardManagementBindComponent', () => {
+  let component: CwcBankCardManagementBindComponent;
+  let fixture: ComponentFixture<CwcBankCardManagementBindComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [CwcBankCardManagementBindComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CwcBankCardManagementBindComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/routes/financial-management/components/bank-card-management/bind/bind.component.ts

@@ -0,0 +1,141 @@
+import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
+import { cacheConf } from '@conf/cache.conf';
+import { SFComponent, SFSchema, SFStringWidgetSchema, SFUISchema } from '@delon/form';
+import { EACacheService } from '@shared';
+import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
+import { BankCardManagementService } from '../../../services/bank-card-management.service';
+
+interface EmitType {
+  success: boolean,
+  current: number,
+  value: object
+};
+
+@Component({
+  selector: 'app-cwc-bank-card-management-bind',
+  templateUrl: './bind.component.html',
+})
+
+export class CwcBankCardManagementBindComponent implements OnInit {
+  schema: SFSchema = {};
+  ui: SFUISchema = {};
+  record: any;
+  i: any;
+  userInfo: any = {};
+  bankBranchName = '';
+  bankArea = '';
+  bankName = '';
+  loading = false;
+  current = 0; // 当前节点
+
+  @Output() toNextStep = new EventEmitter<EmitType>();
+
+  @ViewChild('sf', { static: false }) sf!: SFComponent;
+  enterpriseName = '';
+
+  branchBanks: any[] = [];
+  constructor(public service: BankCardManagementService, public modalService: NzModalService, public eaCacheSrv: EACacheService, public modalRef: NzModalRef) {
+  }
+
+
+  ngOnInit() {
+    this.initSF();
+  }
+
+  initSF() {
+    this.schema = {
+      properties: {
+        bankAccountName: {
+          type: 'string',
+          title: '企业名称',
+          default: this.i?.ltdName,
+          ui: {
+            widget: 'text'
+          }
+        },
+        bankCardNumber: {
+          type: 'string',
+          title: '银行卡号',
+          maxLength: 30,
+          ui: {
+            showRequired: true,
+            placeholder: '请输入银行卡号',
+            autocomplete: 'off'
+          } as SFStringWidgetSchema,
+        },
+        bankName: {
+          type: 'string',
+          title: '开户银行',
+          // readOnly: true,
+          ui: {
+            showRequired: true,
+            autocomplete: 'off',
+            placeholder: '请输入开户银行',
+          } as SFStringWidgetSchema,
+        },
+        ltdId: {
+          type: 'string',
+          title: '',
+          default: this.i?.ltdId,
+          ui: {
+            widget: 'text',
+            hidden: true
+          }
+        },
+
+        // bankBranchName: {
+        //   type: 'string',
+        //   title: '开户支行',
+        //   ui: {
+        //     showRequired: true,
+        //     placeholder: '请输入开户支行',
+        //     autocomplete: 'off'
+        //   },
+        // },
+        // bankBranchCode: {
+        //   type: 'string',
+        //   title: '联行号',
+        //   ui: {
+        //     placeholder: '请输入联行号'
+        //   },
+        // },
+        mobile: {
+          type: 'string',
+          title: '手机号',
+          maxLength: 11,
+          format: 'mobile',
+          ui: {
+            placeholder: '请输入手机号'
+          },
+        },
+      },
+      required: ['bankCardNumber', 'mobile', 'bankName'],
+    };
+    this.ui = {
+      '*': {
+        spanLabelFixed: 120,
+        grid: { span: 18 },
+      },
+    };
+  }
+  trackById(_: number, item: any): number {
+    return item.id;
+  }
+
+  submit() {
+    if (this.sf.valid) {
+      this.service.request(this.service.$api_bank_card_add, { ...this.sf?.value }).subscribe(res => {
+        if (res) {
+          this.modalRef.destroy(true);
+        }
+      })
+    }
+  }
+
+
+  formatCard() {
+    return /[1-9]\d{12,18}/;
+  }
+
+}

src/app/routes/financial-management/components/bank-card-management/index/index.component.html

@@ -0,0 +1,33 @@
+<page-header-wrapper [title]="''"> </page-header-wrapper>
+<nz-spin [nzSpinning]="service?.http?.loading"></nz-spin>
+<div class="bankcard-content p-md">
+  <h3>{{ltdName}}</h3>
+  <div class="member-rights-container">
+    <nz-card class="single-card" *ngFor="let item of list">
+      <div class="bank-account-content">
+        <div class="mr-sm">
+          <nz-avatar [nzSrc]="item.bankLogoUrl" [nzSize]="50"></nz-avatar>
+        </div>
+        <div class="bank-card-right">
+          <div class="bank-card-title">
+            <div class="bank-card-name font-weight-bold text-md">{{ item.bankName }}</div>
+            <div class="text-md">{{item.bankCardNumber}}</div>
+          </div>
+          <div class="bank-account-txt mt-md mb-md">{{ item.bankAccountName }}</div>
+        </div>
+      </div>
+      <div class="text-right">
+        <button nzSize="default" class="del-btn" (click)="del(item)" acl [acl-ability]="['BankCardManagement-Delete']"
+          nz-button>删除</button>
+      </div>
+
+      <!-- <ng-template #actionEdit>
+                <span (click)="edit(item)"><i nz-icon nzType="form" nzTheme="outline"></i></span>
+            </ng-template> -->
+    </nz-card>
+    <button class="single-card add-btn" nz-button nzType="dashed" nzBlock (click)="add()">
+      <i nz-icon nzType="plus" nzTheme="outline" acl [acl-ability]="['BankCardManagement-Add']"></i>添加银行账户
+    </button>
+  </div>
+
+</div>

src/app/routes/financial-management/components/bank-card-management/index/index.component.less

@@ -0,0 +1,78 @@
+:host {
+  ::ng-deep {
+    .ant-card-actions {
+      border-color: #ccc;
+    }
+
+    .single-card {
+      .ant-card-body {
+        padding: 24px 12px;
+      }
+    }
+  }
+
+  .member-rights-container {
+    display: flex;
+    flex-wrap: wrap;
+
+    .single-card {
+      position: relative;
+      width: 320px;
+      height: 150px;
+      margin-right: 20px;
+      border-color: #ccc;
+      overflow: hidden;
+
+      .default-flag {
+        position: absolute;
+        top: 20px;
+        right: 80px;
+        padding: 0 5px;
+        color: #fff;
+        background-color: #52C41A;
+        border-radius: 1px;
+
+      }
+
+      .bank-account-content {
+        display: flex;
+
+        .bank-card-right {
+          flex: 1;
+          overflow: hidden;
+        }
+
+        .bank-card-title {
+          display: flex;
+
+          .bank-card-name {
+            display: inline-block;
+            flex: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .bank-account-txt {
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .del-btn {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-radius: 5px;
+        height: 30px;
+      }
+    }
+  }
+
+  .bankcard-content {
+    height: 100%;
+    background-color: #fff;
+  }
+
+}

src/app/routes/financial-management/components/bank-card-management/index/index.component.spec.ts

@@ -0,0 +1,24 @@
+import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
+import { CwcBankCardManagementIndexComponent } from './index.component';
+
+describe('CwcBankCardManagementIndexComponent', () => {
+  let component: CwcBankCardManagementIndexComponent;
+  let fixture: ComponentFixture<CwcBankCardManagementIndexComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [CwcBankCardManagementIndexComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CwcBankCardManagementIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/routes/financial-management/components/bank-card-management/index/index.component.ts

@@ -0,0 +1,92 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NzModalService } from 'ng-zorro-antd/modal';
+import { BankCardManagementService } from '../../../services/bank-card-management.service';
+import { CwcBankCardManagementAddComponent } from '../add/add.component';
+import { CwcBankCardManagementBindComponent } from '../bind/bind.component';
+
+@Component({
+  selector: 'app-cwc-bank-card-management-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.less']
+})
+export class CwcBankCardManagementIndexComponent implements OnInit {
+  list: any = [];
+  ltdId = '';
+  ltdName = '';
+  constructor(public modal: NzModalService, public service: BankCardManagementService, public router: Router, public ar: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.ltdId = this.ar.snapshot.queryParams?.ltdId;
+    this.ltdName = this.ar.snapshot.queryParams?.ltdName;
+    this.getBankList(this.ltdId);
+  }
+
+  getBankList(roleId = '') {
+    this.service.request(this.service.$api_bank_card_list, { roleId, accountType: '3' }).subscribe((res) => {
+      if (res) {
+        this.list = res;
+      }
+    });
+  }
+
+  add() {
+    const modalRef = this.modal.create({
+      nzTitle: '添加银行卡',
+      nzContent: CwcBankCardManagementBindComponent,
+      nzWidth: '40%',
+      nzFooter: null,
+      nzComponentParams: {
+        i: {
+          ltdId: this.ltdId,
+          ltdName: this?.ltdName
+        }
+      }
+    });
+    modalRef.afterOpen.subscribe(() => { });
+    modalRef.afterClose.subscribe((result) => {
+      if (result === true) {
+        this.getBankList(this.ltdId);
+      }
+    });
+  }
+
+  edit(record: any) {
+    const modalRef = this.modal.create({
+      nzTitle: '编辑',
+      nzWidth: '700',
+      nzContent: CwcBankCardManagementAddComponent,
+      nzComponentParams: {
+        record,
+      },
+      nzFooter: null,
+      nzMaskClosable: false,
+    });
+    modalRef.afterOpen.subscribe(() => { });
+    modalRef.afterClose.subscribe((result) => {
+      if (result) {
+        this.getBankList();
+      }
+    });
+  }
+
+
+  // 删除
+  del(record: any) {
+    this.modal.confirm({
+      nzTitle: '<b>确认删除该银行账户吗？</b>',
+      nzContent: `<p>银行卡号: ${record.bankCardNumber}</p>`,
+      nzOnOk: () =>
+        this.service.request(this.service.$api_bank_card_del, { id: record.id, ltdId: this.ltdId }).subscribe((res) => {
+          if (res === true) {
+            this.service.msgSrv.success('数据删除成功！');
+            this.getBankList();
+          }
+        }),
+    });
+  }
+
+  formatBankCard(value: any) {
+    return value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
+  }
+}

src/app/routes/financial-management/components/cost-management/cost-management.component.html

@@ -4,11 +4,11 @@
  * @Author       : Shiming
  * @Date         : 2021-12-30 19:36:30
  * @LastEditors  : Shiming
- * @LastEditTime : 2022-02-23 16:35:15
+ * @LastEditTime : 2022-05-11 11:23:52
  * @FilePath     : \\tms-obc-web\\src\\app\\routes\\financial-management\\components\\cost-management\\cost-management.component.html
  * 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">
@@ -20,33 +20,42 @@
       <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)" acl
         [acl-ability]="['FINANCIAL-COST-list']">查询</button>
       <button nz-button (click)="resetSF()">重置</button>
-      <!-- <button nz-button (click)="exportList()"> 导出</button>
-      <button nz-button (click)="exportList()"> 导出明细</button> -->
+      <button nz-button (click)="exportList()"> 导出</button>
+      <button nz-button (click)="exportList()"> 导出明细</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 class="content-box">
-  <div nz-row class="mb-sm">
+<nz-card class="table-box">
+  <div class="header_box">
+    <label class="page_title"> <label class="driver">|</label> 费用管理</label>
+    <div class="mr-sm">
+      <button nz-button nzDanger [nzLoading]="service.http.loading" (click)="openDrawer()" acl
+        [acl-ability]="['FINANCIAL-COST-list']">筛选</button>
+      <button nz-button nzDanger (click)="exportList()"  acl
+      [acl-ability]="['FINANCIAL-COST-export']"> 导出</button>
+    </div>
+  </div>
+  <!-- <div nz-row class="mb-sm">
     <div nz-col nzSpan="24">
-      <!-- <button nz-button nzType="primary" [nzLoading]="service.http.loading"
+      <button nz-button nzType="primary" [nzLoading]="service.http.loading"
         (click)="routeTo('/financial-management/cost-management/expenses-receivable/1')">添加应收费用</button>
       <button nz-button nzType="primary" [nzLoading]="service.http.loading"
         (click)="routeTo('/financial-management/cost-management/expenses-payable/1')">添加应付费用</button>
-      <button nz-button nzType="primary" [nzLoading]="service.http.loading">导入费用</button> -->
+      <button nz-button nzType="primary" [nzLoading]="service.http.loading">导入费用</button>
     </div>
-  </div>
+  </div> -->
   <st #st [data]="service.$api_get_cost_page" [columns]="columns" [req]="{ process: beforeReq }" [page]="{}"
-    [loading]="false" [scroll]="{ x: '2000px' }">
-    <ng-template st-row="armoeny" let-item let-index="index">
+    [loading]="false" [scroll]="{ x: '2000px',y:scrollY }">
+    <!-- <ng-template st-row="armoeny" let-item let-index="index">
       {{ item.armoeny | currency }}
-    </ng-template>
+    </ng-template> -->
     <ng-template st-row="hrmoney" let-item let-index="index">
-      {{ item.hrmoney | currency }}
+      {{ item.armoeny ? (item.armoeny| currency ): '--' }} / {{ item.hrmoney? (item.hrmoney | currency) : '--'}}
     </ng-template>
     <ng-template st-row="artocode" let-item let-index="index"> {{ item.cnoCode }}/{{ item.cnoName }} </ng-template>
     <ng-template st-row="hrpaymoney" let-item let-index="index">

src/app/routes/financial-management/components/cost-management/cost-management.component.ts

@@ -2,45 +2,54 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { STComponent, STColumn, STRequestOptions } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFDateWidgetSchema, SFSelectWidgetSchema, SFSchemaEnum } from '@delon/form';
+import { SearchDrawerService } from '@shared';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { of } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { BasicTableComponent } from 'src/app/routes/commom';
 import { FreightAccountService } from '../../services/freight-account.service';
 
 @Component({
   selector: 'app-cost-management',
   templateUrl: './cost-management.component.html',
-  styleUrls: ['../../../commom/less/box.less']
+  styleUrls: ['../../../commom/less/commom-table.less']
 })
-export class CostManagementComponent implements OnInit {
+export class CostManagementComponent extends BasicTableComponent implements OnInit {
   @ViewChild('st', { static: true })
   st!: STComponent;
-  @ViewChild('sf', { static: false })
-  sf!: SFComponent;
   @ViewChild('auditModal', { static: false })
   auditModal!: any;
-  searchSchema: SFSchema = this.initSF();
+  schema: SFSchema = this.initSF();
   columns: STColumn[] = this.initST();
 
   selectedRows: any[] = [];
 
-  _$expand = false;
-
-  constructor(public service: FreightAccountService, private nzModalService: NzModalService, private router: Router) {}
+  constructor(
+    public service: FreightAccountService,
+    private nzModalService: NzModalService,
+    private router: Router,
+    public searchDrawerService: SearchDrawerService
+  ) {
+    super(searchDrawerService);
+  }
 
   ngOnInit(): void {}
 
+  search() {
+    this.st?.load(1);
+  }
+
   beforeReq = (requestOptions: STRequestOptions) => {
     if (this.sf) {
       Object.assign(requestOptions.body, {
-        ...this.sf.value,
+        ...this.sf?.value,
         feedate: {
-          start: this.sf.value.feedate?.[0] || '',
-          end: this.sf.value.feedate?.[1] || ''
+          start: this.sf?.value.feedate?.[0] || '',
+          end: this.sf?.value.feedate?.[1] || ''
         },
         createTime: {
-          start: this.sf.value.createTime?.[0] || '',
-          end: this.sf.value.createTime?.[1] || ''
+          start: this.sf?.value.createTime?.[0] || '',
+          end: this.sf?.value.createTime?.[1] || ''
         }
       });
     }
@@ -73,24 +82,9 @@ export class CostManagementComponent implements OnInit {
     });
   }
 
-  /**
-   * 重置表单
-   */
-  resetSF() {
-    this.sf.reset();
-    this._$expand = false;
-  }
-
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle() {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/expand', this._$expand);
-  }
 
   exportList() {
-    this.service.exportStart( { ...this.sf.value, pageSize: -1 }, this.service.$api_get_exportPlatformAccountBalanceByOperator,);
+    this.service.exportStart({ ...this.sf?.value, pageSize: -1 }, this.service.$api_get_reportFeehList);
   }
 
   routeTo(url: string, params?: any, status?: any) {
@@ -100,12 +94,6 @@ export class CostManagementComponent implements OnInit {
   private initSF(): SFSchema {
     return {
       properties: {
-        expand: {
-          type: 'boolean',
-          ui: {
-            hidden: true
-          }
-        },
         feecode: {
           type: 'string',
           title: '费用单号',
@@ -131,9 +119,6 @@ export class CostManagementComponent implements OnInit {
             format: 'yyyy-MM-dd',
             placeholder: '请选择',
             nzShowTime: true,
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           } as SFDateWidgetSchema
         },
         feetype: {
@@ -147,9 +132,6 @@ export class CostManagementComponent implements OnInit {
           ui: {
             widget: 'select',
             placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           },
           default: ''
         },
@@ -159,14 +141,11 @@ export class CostManagementComponent implements OnInit {
           enum: [
             { label: '全部', value: '全部' },
             { label: '运输费', value: '1475197820443299842' },
-            { label: '附加费', value: '1476197820443299842 ' },
+            { label: '附加费', value: '1476197820443299842 ' }
           ],
           ui: {
             widget: 'select',
             placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           }
         },
         ltdId: {
@@ -177,9 +156,6 @@ export class CostManagementComponent implements OnInit {
             placeholder: '请选择',
             allowClear: true,
             asyncData: () => this.service.getNetworkFreightForwarder(),
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           }
         },
         hrto: {
@@ -202,9 +178,6 @@ export class CostManagementComponent implements OnInit {
                 return of([]);
               }
             },
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           } as SFSelectWidgetSchema
         },
         arto: {
@@ -227,9 +200,6 @@ export class CostManagementComponent implements OnInit {
                 return of([]);
               }
             },
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           } as SFSelectWidgetSchema
         },
         createTime: {
@@ -240,9 +210,6 @@ export class CostManagementComponent implements OnInit {
             format: 'yyyy-MM-dd',
             placeholder: '请选择',
             nzShowTime: true,
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           } as SFDateWidgetSchema
         },
         ishrhx: {
@@ -256,9 +223,6 @@ export class CostManagementComponent implements OnInit {
           ui: {
             widget: 'select',
             placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           },
           default: ''
         },
@@ -270,9 +234,6 @@ export class CostManagementComponent implements OnInit {
             placeholder: '请选择',
             allowClear: true,
             asyncData: () => this.service.getCloseAccount(),
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
           }
         }
       }
@@ -291,8 +252,8 @@ export class CostManagementComponent implements OnInit {
       { title: '结算客户', render: 'artocode', width: 200, className: 'text-left' },
       { title: '应收对象', index: 'artoname', width: 200, className: 'text-left' },
       { title: '应付对象', index: 'hrtoname', width: 200, className: 'text-left' },
-      { title: '应收金额', render: 'armoeny', width: 150, className: 'text-right' },
-      { title: '应付金额', render: 'hrmoney', width: 150, className: 'text-right' },
+      { title: '应收/应付金额', render: 'hrmoney', width: 150, className: 'text-right' },
+      // { title: '应付金额', render: 'hrmoney', width: 150, className: 'text-right' },
       { title: '收/付款金额', render: 'hrpaymoney', width: 150, className: 'text-right' },
       { title: '开/收票金额', render: 'hrvatmoney', width: 150, className: 'text-right' },
       { title: '创建时间', index: 'createTime', type: 'date', width: 200, className: 'text-center' },

src/app/routes/financial-management/components/driver-account/driver-account-detail/driver-account-detail.component.html

@@ -1,4 +1,4 @@
-<page-header-wrapper [title]="'开票订单明细'" [logo]="logo">
+<page-header-wrapper [title]="'司机账户明细'" [logo]="logo">
     <ng-template #logo>
         <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
             <i nz-icon nzType="left" nzTheme="outline"></i>

src/app/routes/financial-management/components/driver-account/driver-account-detail/driver-account-detail.component.ts

@@ -40,10 +40,10 @@ export class DriverAccountDetailComponent implements OnInit {
     });
     if (this.sf) {
       Object.assign(requestOptions.body, {
-        ...this.sf.value,
+        ...this.sf?.value,
         createTime: {
-          start: this.sf.value?.createTime?.[0] || '',
-          end: this.sf.value?.createTime?.[1] || ''
+          start: this.sf?.value?.createTime?.[0] || '',
+          end: this.sf?.value?.createTime?.[1] || ''
         }
       });
     }
@@ -78,7 +78,7 @@ export class DriverAccountDetailComponent implements OnInit {
   exportList() {
     this.service.exportStart(
       {
-        ...this.sf.value,
+        ...this.sf?.value,
         pageSize: -1,
         ltdId: this.params.ltdId,
         projectId: this.params.projectId,
@@ -86,8 +86,8 @@ export class DriverAccountDetailComponent implements OnInit {
         roleId: this.params.roleId,
         bankType: this.params.bankType,
         createTime: {
-          start: this.sf.value?.createTime?.[0] || '',
-          end: this.sf.value?.createTime?.[1] || ''
+          start: this.sf?.value?.createTime?.[0] || '',
+          end: this.sf?.value?.createTime?.[1] || ''
         }
       },
       this.service.$api_get_exportAccountBalanceDriverByOperatorPage
@@ -133,7 +133,7 @@ export class DriverAccountDetailComponent implements OnInit {
             nzShowTime: true
           } as SFDateWidgetSchema
         },
-        transactionNumber: {
+        channelPaySn: {
           type: 'string',
           title: '流水号',
           ui: {
@@ -142,7 +142,7 @@ export class DriverAccountDetailComponent implements OnInit {
         },
         businessNumber: {
           type: 'string',
-          title: '关联单号',
+          title: '交易单号',
           ui: {
             placeholder: '请输入'
           }

src/app/routes/financial-management/components/driver-account/driver-account.component.html

@@ -1,4 +1,4 @@
-<page-header-wrapper title="司机账户"> </page-header-wrapper>
+<!-- <page-header-wrapper title="司机账户"> </page-header-wrapper>
 
 <nz-card class="search-box">
   <div nz-row nzGutter="8">
@@ -21,23 +21,22 @@
       </button>
     </div>
   </div>
-</nz-card>
+</nz-card> -->
 
-<nz-card class="content-box">
-  <st
-    #st
-    [data]="service.$api_get_driver_account_page"
-    [columns]="columns"
-    [req]="{ process: beforeReq }"
-    [res]="{ reName: { list: 'data.records', total: 'data.total' } , process: afterRes}"
-    [page]="{}"
-    [loading]="false"
-    [scroll]="{ x: '1200px' }"
-  >
+<nz-card class="table-box">
+  <div class="header_box">
+    <label class="page_title"> <label class="driver">|</label> 司机账户</label>
+    <div class="mr-sm">
+      <button nz-button nzDanger [nzLoading]="service.http.loading" (click)="openDrawer()">筛选</button>
+      <button nz-button nzDanger (click)="exportList()"> 导出</button>
+    </div>
+  </div>
+  <st #st [data]="service.$api_get_driver_account_page" [columns]="columns" [req]="{ process: beforeReq }"
+    [res]="{ process: afterRes}" [page]="{}" [loading]="false" [scroll]="{ x: '1200px',y:scrollY }">
     <ng-template st-row="availableBalance" let-item let-index="index">
       <a (click)="showAccountDetail(item)">{{
         (parseFloat(item.availableBalance) + parseFloat(item.freezeBalance)).toFixed(2) | currency
-      }}</a>
+        }}</a>
     </ng-template>
   </st>
-</nz-card>
+</nz-card>

src/app/routes/financial-management/components/driver-account/driver-account.component.ts

@@ -3,39 +3,47 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { STComponent, STColumn, STChange, STRequestOptions } from '@delon/abc/st';
 import { SFComponent, SFSchema, SFDateWidgetSchema } from '@delon/form';
-import { ShipperBaseService } from '@shared';
+import { SearchDrawerService, ShipperBaseService } 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 { FreightAccountService } from '../../services/freight-account.service';
 
 @Component({
   selector: 'app-driver-account',
   templateUrl: './driver-account.component.html',
-  styleUrls: ['../../../commom/less/box.less', '../../../commom/less/expend-but.less']
+  styleUrls: ['../../../commom/less/commom-table.less']
 })
-export class DriverAccountComponent implements OnInit {
+export class DriverAccountComponent extends BasicTableComponent implements OnInit {
   @ViewChild('st', { static: true })
   st!: STComponent;
-  @ViewChild('sf', { static: false })
-  sf!: SFComponent;
   loading: boolean = true;
-  searchSchema: SFSchema = this.initSF();
+  schema: SFSchema = this.initSF();
   columns: STColumn[] = this.initST();
-  _$expand = false;
 
-  constructor(public service: FreightAccountService, private router: Router, private modal: NzModalService) {}
+  constructor(
+    public service: FreightAccountService,
+    private router: Router,
+    private modal: NzModalService,
+    public searchDrawerService: SearchDrawerService
+  ) {
+    super(searchDrawerService);
+  }
 
   ngOnInit(): void {}
 
+  search() {
+    this.st?.load(1);
+  }
   beforeReq = (requestOptions: STRequestOptions) => {
     Object.assign(requestOptions.body, { accountType: 2 });
     if (this.sf) {
-      Object.assign(requestOptions.body, { ...this.sf.value });
-      if (this.sf.value.createTime) {
+      Object.assign(requestOptions.body, { ...this.sf?.value });
+      if (this.sf?.value.createTime) {
         Object.assign(requestOptions.body, {
           createTime: {
-            start: this.sf.value.createTime?.[0] || '',
-            end: this.sf.value.createTime?.[1] || ''
+            start: this.sf?.value.createTime?.[0] || '',
+            end: this.sf?.value.createTime?.[1] || ''
           }
         });
       }
@@ -44,11 +52,8 @@ export class DriverAccountComponent implements OnInit {
     return requestOptions;
   };
   afterRes = (data: any[], rawData?: any) => {
-    console.log(data)
-    this.loading = false
-    return data.map(item => ({
-      ...item,
-    }));
+    this.loading = false;
+    return data;
   };
   showAccountDetail(item: any) {
     this.modal.create({
@@ -64,26 +69,8 @@ export class DriverAccountComponent implements OnInit {
     });
   }
 
-  /**
-   * 重置表单
-   */
-  resetSF() {
-    this.sf.reset();
-    this._$expand = false;
-  }
-
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle() {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/expand', this._$expand);
-  }
-
   exportList() {
-    console.log(this.sf.value);
-    
-    this.service.exportStart({ ...this.sf.value, pageSize: -1 }, this.service.$api_export_driver_account_page);
+    this.service.exportStart({ ...this.sf?.value, pageSize: -1 }, this.service.$api_export_driver_account_page);
   }
 
   private initSF(): SFSchema {
@@ -118,9 +105,6 @@ export class DriverAccountComponent implements OnInit {
           ui: {
             widget: 'select',
             placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            },
             allowClear: true,
             asyncData: () => this.service.getNetworkFreightForwarder()
           }
@@ -135,10 +119,7 @@ export class DriverAccountComponent implements OnInit {
           ],
           ui: {
             widget: 'select',
-            placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请选择'
           },
           default: null
         },
@@ -146,10 +127,7 @@ export class DriverAccountComponent implements OnInit {
           type: 'string',
           title: '虚拟账户',
           ui: {
-            placeholder: '请输入',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请输入'
           }
         },
         createTime: {
@@ -158,10 +136,7 @@ export class DriverAccountComponent implements OnInit {
           ui: {
             widget: 'sl-from-to-search',
             format: 'yyyy-MM-dd',
-            placeholder: '请选择',
-            visibleIf: {
-              expand: (value: boolean) => value
-            }
+            placeholder: '请选择'
           } as SFDateWidgetSchema
         }
       }
@@ -193,7 +168,7 @@ export class DriverAccountComponent implements OnInit {
         widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.freezeBalance }) }
       },
       {
-        title: '本月累计提现金额',
+        title: '累计提现金额',
         index: 'withdrawBalance',
         width: 160,
         type: 'widget',
@@ -211,6 +186,7 @@ export class DriverAccountComponent implements OnInit {
         buttons: [
           {
             text: '查看明细',
+            acl: { ability: ['FINANCIAL-DRIVER-ACOUNT-view'] },
             click: item =>
               this.router.navigate(['/financial-management/driver-account/detail/' + item.id], {
                 queryParams: {

src/app/routes/financial-management/components/freight-account/freight-account-detail/freight-account-detail.component.html

@@ -1,4 +1,14 @@
-<page-header-wrapper [title]="'开票订单明细'" [logo]="logo">
+<!--
+ * @Description  : 
+ * @Version      : 1.0
+ * @Author       : Shiming
+ * @Date         : 2022-04-06 10:57:56
+ * @LastEditors  : Shiming
+ * @LastEditTime : 2022-04-21 16:41:13
+ * @FilePath     : \\tms-obc-web\\src\\app\\routes\\financial-management\\components\\freight-account\\freight-account-detail\\freight-account-detail.component.html
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<page-header-wrapper [title]="'货主账号明细'" [logo]="logo">
     <ng-template #logo>
         <button nz-button nz-tooltip nzTooltipTitle="返回上一页" (click)="goBack()">
             <i nz-icon nzType="left" nzTheme="outline"></i>
@@ -40,7 +50,7 @@
         </div>
         <div nz-col [nzXl]="_$expand ? 24 : 6" [nzLg]="24" [nzSm]="24" [nzXs]="24" class="text-right">
             <button nz-button nzType="primary" [nzLoading]="service.http.loading"
-                (click)="st?.load(1);loadInfo();">查询</button>
+                (click)="st?.load(1);">查询</button>
             <button nz-button (click)="resetSF()">重置</button>
             <button nz-button (click)="exportList()"> 导出</button>
             <button nz-button nzType="link" (click)="expandToggle()">

src/app/routes/financial-management/components/freight-account/freight-account-detail/freight-account-detail.component.ts

@@ -39,7 +39,7 @@ export class FreightAccountDetailComponent implements OnInit {
     });
     if (this.sf) {
       Object.assign(requestOptions.body, {
-        ...this.sf.value,
+        ...this.sf?.value,
         createTime: {
           start: this.sf?.value.createTime?.[0] || '',
           end: this.sf?.value.createTime?.[1] || ''
@@ -75,6 +75,8 @@ export class FreightAccountDetailComponent implements OnInit {
   loadStatistics(params: any) {
     this.service.request(this.service.$api_get_shipper_account_balance_detail, params).subscribe(res => {
       if (res) {
+        console.log(res);
+        
         this.static = res;
       }
     });
@@ -85,7 +87,7 @@ export class FreightAccountDetailComponent implements OnInit {
   exportList() {
     this.service.exportStart(
       {
-        ...this.sf.value,
+        ...this.sf?.value,
         pageSize: -1,
         ltdId: this.params.ltdId,
         projectId: this.params.projectId,
@@ -153,34 +155,45 @@ export class FreightAccountDetailComponent implements OnInit {
             placeholder: '请输入'
           }
         },
+        // tradeType: {
+        //   type: 'string',
+        //   title: '交易类型',
+        //   enum: [
+        //     { label: '全部', value: '' },
+        //     { label: '整车订单退款', value: '1' },
+        //     { label: '整车订单支付', value: '2' },
+        //     { label: '提现失败退回', value: '3' },
+        //     { label: '提现', value: '4' },
+        //     { label: '充值', value: '5' },
+        //     { label: '运货订单结算F', value: '5' }
+        //   ],
+        //   ui: {
+        //     widget: 'select',
+        //     placeholder: '请选择',
+        //     visibleIf: {
+        //       expand: (value: boolean) => value
+        //     }
+        //   },
+        //   default: ''
+        // },
         tradeType: {
           type: 'string',
           title: '交易类型',
-          enum: [
-            { label: '全部', value: '' },
-            { label: '整车订单退款', value: '1' },
-            { label: '整车订单支付', value: '2' },
-            { label: '提现失败退回', value: '3' },
-            { label: '提现', value: '4' },
-            { label: '充值', value: '5' },
-            { label: '运货订单结算F', value: '5' }
-          ],
           ui: {
-            widget: 'select',
-            placeholder: '请选择',
+            widget: 'dict-select',
+            params: { dictKey: 'trade:type' },
             visibleIf: {
               expand: (value: boolean) => value
-            }
-          },
-          default: ''
+            },
+          } as SFSelectWidgetSchema
         },
         incomeType: {
           type: 'string',
           title: '收支类型',
           enum: [
             { label: '全部', value: '' },
-            { label: '收入', value: '1' },
-            { label: '支出', value: '2' }
+            { label: '收入', value: '2' },
+            { label: '支出', value: '1' }
           ],
           ui: {
             widget: 'select',
@@ -191,18 +204,28 @@ export class FreightAccountDetailComponent implements OnInit {
           },
           default: ''
         },
-        projectId: {
-          title: '所属项目',
+        projectName: {
           type: 'string',
-          default: '',
+          title: '所属项目',
           ui: {
-            widget: 'select',
+            placeholder: '请输入',
             visibleIf: {
               expand: (value: boolean) => value
-            },
-            asyncData: () => this.service.getEnterpriseProject()
-          } as SFSelectWidgetSchema
+            }
+          }
         }
+        // projectId: {
+        //   title: '所属项目',
+        //   type: 'string',
+        //   default: '',
+        //   ui: {
+        //     widget: 'select',
+        //     visibleIf: {
+        //       expand: (value: boolean) => value
+        //     },
+        //     asyncData: () => this.service.getEnterpriseProject()
+        //   } as SFSelectWidgetSchema
+        // }
       }
     };
   }
@@ -212,6 +235,7 @@ export class FreightAccountDetailComponent implements OnInit {
       { title: '交易时间', index: 'createTime', type: 'date', width: 170 },
       { title: '流水号', index: 'transactionNumber', width: 170 },
       { title: '交易类型', index: 'tradeTypeLabel', className: 'text-center', width: 140 },
+      { title: '收支类型', index: 'tradeTypeLabel', className: 'text-center', width: 140 },
       { title: '交易单号', index: 'businessNumber', width: 170 },
       { title: '订单号', index: 'orderSn', width: 170 },
       { title: '运单号', index: 'transportSn', width: 170 },

src/app/routes/financial-management/components/freight-account/freight-account.component.html

@@ -1,4 +1,4 @@
-<page-header-wrapper title="货主账户">
+<!-- <page-header-wrapper title="货主账户">
 </page-header-wrapper>
 
 <nz-card class="search-box">
@@ -19,11 +19,18 @@
             </button>
         </div>
     </div>
-</nz-card>
+</nz-card> -->
 
-<nz-card class="content-box">
-    <st #st [data]="service.$api_get_shipper_account_page" [columns]="columns" [req]="{   process: beforeReq }" [page]="{}"
-        [loading]="false" [scroll]="{ x: '1200px' }">
+<nz-card class="table-box">
+    <div class="header_box">
+        <label class="page_title"> <label class="driver">|</label> 货主账户</label>
+        <div class="mr-sm">
+            <button nz-button nzDanger [nzLoading]="service.http.loading" (click)="openDrawer()">筛选</button>
+            <button nz-button nzDanger (click)="exportList()"> 导出</button>
+        </div>
+    </div>
+    <st #st [data]="service.$api_get_shipper_account_page" [columns]="columns" [req]="{   process: beforeReq }"
+        [page]="{}" [loading]="false" [scroll]="{ x: '1200px',y:scrollY }">
         <ng-template st-row="description" let-item let-index="index">
             <a (click)="showAccountDetail(item)">{{ (parseFloat(item.availableBalance) +
                 parseFloat(item.freezeBalance)).toFixed(2) | currency}}</a>