UI

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

@@ -9,25 +9,9 @@
  * Copyright (C) 2022 huzhenhong. All rights reserved.
 -->
 <!-- 搜索表单 -->
-<page-header-wrapper [title]="''"> </page-header-wrapper>
+<!-- <page-header-wrapper [title]="''"> </page-header-wrapper>
 <nz-card>
   <div nz-row nzGutter="8">
-    <!-- 查询字段小于或等于3个时，不显示伸缩按钮 -->
-    <div nz-col nzSpan="24" *ngIf="queryFieldCount <= 4">
-      <sf
-        #sf
-        [schema]="schema"
-        [ui]="ui"
-        [mode]="'search'"
-        [disabled]="!sf?.valid"
-        [loading]="false"
-        (formSubmit)="st?.load(1)"
-        (formReset)="resetSF()"
-      ></sf>
-    </div>
-
-    <!-- 查询字段大于3个时，根据展开状态调整布局 -->
-    <ng-container *ngIf="queryFieldCount > 4">
       <div nz-col [nzSpan]="_$expand ? 24 : 18">
         <sf #sf [schema]="schema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
       </div>
@@ -40,94 +24,90 @@
           <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
         </button>
       </div>
-    </ng-container>
   </div>
-</nz-card>
+</nz-card> -->
 
-<nz-card>
-  <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
-    <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
-    <nz-tab [nzTitle]="'待投保(' + tabs?.receivedQuantity + ')'"></nz-tab>
-    <nz-tab [nzTitle]="'已投保(' + tabs?.stayQuantity + ')'"></nz-tab>
-    <nz-tab [nzTitle]="'投保失败(' + tabs?.GoingQuantity + ')'"></nz-tab>
-    <nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab>
-  </nz-tabset>
-  <div style="margin-top: 15px">
-    <st
-      #st
-      [bordered]="true"
-      [scroll]="{ x: '2000px' }"
-      [data]="service.$api_premiumInfo_list"
-      [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, 30, 50, 100, 200, 300, 500, 1000] }"
-      [loading]="false"
-    >
-      <ng-template st-row="resourceCode" let-item let-index="index">
-        {{ item.resourceCode | currency }}
-      </ng-template>
-      <ng-template st-row="practicalPremium" let-item let-index="index">
-        {{ item.practicalPremium | currency }}
-      </ng-template>
-      <ng-template st-row="insureAmount" let-item let-index="index">
-        {{ item.insureAmount | currency }}
-      </ng-template>
-      <ng-template st-row="premium" let-item let-index="index">
-        {{ item.premium | currency }}
-      </ng-template>
-      <ng-template st-row="processMessage" let-item let-index="index">
-        {{ item.processResult == '2' ? item.processMessage : '' }}
-      </ng-template>
-      <ng-template st-row="driverName" let-item let-index="index">
-        <div> {{ item?.driverName }}/{{ item?.driverTelephone }}/{{ item?.carNo }} </div>
-      </ng-template>
-      <ng-template st-row="distance" let-item let-index="index">
-        <div>
-          {{ item?.distance ? ((item?.distance)/1000).toFixed(4) + '公里' : '' }}
-        </div>
-      </ng-template>
-      <ng-template st-row="goodsNumber" let-item let-index="index">
-        <div>
-          {{ item?.billCode }}
-        </div>
-      </ng-template>
-      <ng-template st-row="resourceCode" let-item let-index="index">
-        <div>
-          {{ item?.resourceCode }}
-        </div>
-        <div>
-          {{ item?.resourceStatusLabel }}
-        </div>
-      </ng-template>
-      <ng-template st-row="insureCode" let-item let-index="index">
-        <div>{{ item.insureCode }}</div>
-        <div>
-          <span>{{ item?.insureStatusLabel }}</span>
-        </div>
-      </ng-template>
-      <ng-template st-row="goodsName" let-item let-index="index">
-        <div>{{ item?.goodsInfoName }}</div>
-        <div>
-          <span>{{ item?.weight ? item?.weight + '吨/' : '' }}</span>
-          <span>{{ item?.volume ? item?.volume + '方' : '' }}</span>
-          <span>{{ item?.number ? item?.number + '件' : '' }}</span>
-        </div>
-      </ng-template>
-      <ng-template st-row="mybidDetailInfo" let-item let-index="index">
-        <div *ngIf="item.mybidDetailInfo?.length > 0">
-          <p *ngFor="let data of item.mybidDetailInfo">
-            {{ data.expenseName }}：{{ data.price | currency }}
-            <span *ngIf="data.paymentStatusLabel" style="color: #f59a63">{{ data.paymentStatusLabel }}</span>
-          </p>
-        </div>
-      </ng-template>
-    </st>
+<nz-card class="table-box">
+  <div class="tab_header">
+    <label class="page_title"> <label class="driver">|</label> 保险列表</label>
+    <nz-tabset (nzSelectedIndexChange)="selectChange($event)" [nzTabBarExtraContent]="extraTemplate">
+      <nz-tab [nzTitle]="'全部(' + tabs?.totalCount + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'待投保(' + tabs?.receivedQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'已投保(' + tabs?.stayQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'投保失败(' + tabs?.GoingQuantity + ')'"></nz-tab>
+      <nz-tab [nzTitle]="'已取消(' + tabs?.cancelQuantity + ')'"></nz-tab>
+    </nz-tabset>
   </div>
+
+  <st #st [bordered]="true" [scroll]="{ x: '2000px',y:scrollY }" [data]="service.$api_premiumInfo_list"
+    [columns]="columns" [req]="{ params: reqParams }" [page]="{  }" [loading]="false">
+    <ng-template st-row="resourceCode" let-item let-index="index">
+      {{ item.resourceCode | currency }}
+    </ng-template>
+    <ng-template st-row="practicalPremium" let-item let-index="index">
+      {{ item.practicalPremium | currency }}
+    </ng-template>
+    <ng-template st-row="insureAmount" let-item let-index="index">
+      {{ item.insureAmount | currency }}
+    </ng-template>
+    <ng-template st-row="premium" let-item let-index="index">
+      {{ item.premium | currency }}
+    </ng-template>
+    <ng-template st-row="processMessage" let-item let-index="index">
+      {{ item.processResult == '2' ? item.processMessage : '' }}
+    </ng-template>
+    <ng-template st-row="driverName" let-item let-index="index">
+      <div> {{ item?.driverName }}/{{ item?.driverTelephone }}/{{ item?.carNo }} </div>
+    </ng-template>
+    <ng-template st-row="distance" let-item let-index="index">
+      <div>
+        {{ item?.distance ? ((item?.distance)/1000).toFixed(4) + '公里' : '' }}
+      </div>
+    </ng-template>
+    <ng-template st-row="goodsNumber" let-item let-index="index">
+      <div>
+        {{ item?.billCode }}
+      </div>
+    </ng-template>
+    <ng-template st-row="resourceCode" let-item let-index="index">
+      <div>
+        {{ item?.resourceCode }}
+      </div>
+      <div>
+        {{ item?.resourceStatusLabel }}
+      </div>
+    </ng-template>
+    <ng-template st-row="insureCode" let-item let-index="index">
+      <div>{{ item.insureCode }}</div>
+      <div>
+        <span>{{ item?.insureStatusLabel }}</span>
+      </div>
+    </ng-template>
+    <ng-template st-row="goodsName" let-item let-index="index">
+      <div>{{ item?.goodsInfoName }}</div>
+      <div>
+        <span>{{ item?.weight ? item?.weight + '吨/' : '' }}</span>
+        <span>{{ item?.volume ? item?.volume + '方' : '' }}</span>
+        <span>{{ item?.number ? item?.number + '件' : '' }}</span>
+      </div>
+    </ng-template>
+    <ng-template st-row="mybidDetailInfo" let-item let-index="index">
+      <div *ngIf="item.mybidDetailInfo?.length > 0">
+        <p *ngFor="let data of item.mybidDetailInfo">
+          {{ data.expenseName }}：{{ data.price | currency }}
+          <span *ngIf="data.paymentStatusLabel" style="color: #f59a63">{{ data.paymentStatusLabel }}</span>
+        </p>
+      </div>
+    </ng-template>
+  </st>
 </nz-card>
 
 <ng-template #extraTemplate>
-  <div>
-    <button nz-button nzType="primary" (click)="changeOrder()" acl  [acl-ability]="['INSURANCE-LIST-insuranceConfig']"> 保险配置 </button>
+  <div class="mr-sm">
+    <button nz-button nzDanger [nzLoading]="service.http.loading" (click)="openDrawer()" acl
+      [acl-ability]="['INSURANCE-LIST-search']">筛选</button>
+    <button nz-button nzDanger acl [acl-ability]="['INSURANCE-LIST-export']" (click)="exprot()"> 导出</button>
+    <button nz-button nzType="primary" (click)="changeOrder()" acl [acl-ability]="['INSURANCE-LIST-insuranceConfig']">
+      保险配置 </button>
   </div>
-</ng-template>
+</ng-template>

src/app/routes/insurance-management/components/list/list.component.less

@@ -1,13 +0,0 @@
-
-    :host {
-     p{
-         margin-bottom: 0
-     }
-     .left_btn {
-          width: 50px;
-         height: 32px; 
-          padding-left: 8px;
-          line-height:32px; 
-          background-color: #d7d7d7;
-     }
- }

src/app/routes/insurance-management/components/list/list.component.spec.ts

@@ -1,35 +0,0 @@
-/*
- * @Description  : 
- * @Version      : 1.0
- * @Author       : Shiming
- * @Date         : 2021-12-06 20:03:28
- * @LastEditors  : Shiming
- * @LastEditTime : 2022-01-25 17:22:11
- * @FilePath     : \\tms-obc-web\\src\\app\\routes\\insurance-management\\components\\list\\list.component.spec.ts
- * Copyright (C) 2022 huzhenhong. All rights reserved.
- */
-
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { insuranceManagementListComponent } from './list.component';
-
-describe('insuranceManagementListComponent', () => {
-  let component: insuranceManagementListComponent;
-  let fixture: ComponentFixture<insuranceManagementListComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ insuranceManagementListComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(insuranceManagementListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/routes/insurance-management/components/list/list.component.ts

@@ -5,31 +5,26 @@ import { ModalHelper, _HttpClient } from '@delon/theme';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { map } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { ShipperBaseService } from '@shared';
+import { SearchDrawerService, ShipperBaseService } from '@shared';
 import { Router } from '@angular/router';
 import { InsuranceManagementService } from '../../services/insurance-management.service';
-import { VehicleImgViewComponent } from 'src/app/routes/vehicle/components/list/img-view/img-view.component';
-import { ImageViewComponent } from 'src/app/shared/components/imagelist';
+import { BasicTableComponent } from 'src/app/routes/commom';
 
 @Component({
   selector: 'app-insurance-management-list',
   templateUrl: './list.component.html',
-  styleUrls: ['./list.component.less']
+  styleUrls: ['../../../commom/less/commom-table.less']
 })
-export class insuranceManagementListComponent implements OnInit {
-  ui: SFUISchema = {};
+export class insuranceManagementListComponent extends BasicTableComponent implements OnInit {
   uiView: SFUISchema = {};
-  schema: SFSchema = {};
   schemaView: SFSchema = {};
   auditMany = false;
   isVisibleView = false;
   isVisibleEvaluate = false;
   isVisible = false;
-  _$expand = false;
   @ViewChild('st') private readonly st!: STComponent;
   @ViewChild('stFloat') private readonly stFloat!: STComponent;
   @ViewChild('stFloatView') private readonly stFloatView!: STComponent;
-  @ViewChild('sf', { static: false }) sf!: SFComponent;
   @ViewChild('sfFre', { static: false }) sfFre!: SFComponent;
   @ViewChild('sfView', { static: false }) sfView!: SFComponent;
   columns: STColumn[] = [];
@@ -63,8 +58,10 @@ export class insuranceManagementListComponent implements OnInit {
     private modal: NzModalService,
     public shipperservice: ShipperBaseService,
     private router: Router,
-    private modale: ModalHelper,
-  ) { }
+    public searchDrawerService: SearchDrawerService
+  ) {
+    super(searchDrawerService);
+  }
 
   /**
    * 查询参数
@@ -90,7 +87,7 @@ export class insuranceManagementListComponent implements OnInit {
       insureTime: {
         start: this.sf?.value?.insureTime?.[0] || '',
         end: this.sf?.value?.insureTime?.[1] || ''
-      },
+      }
     };
   }
   get selectedRows() {
@@ -164,11 +161,7 @@ export class insuranceManagementListComponent implements OnInit {
         policyNo: {
           type: 'string',
           title: '保单号',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            },
-          }
+          ui: {}
         },
         insureType: {
           title: '类型',
@@ -176,29 +169,18 @@ export class insuranceManagementListComponent implements OnInit {
           ui: {
             widget: 'dict-select',
             params: { dictKey: 'insure:type' },
-            containsAllLabel: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
+            containsAllLabel: true
           } as SFSelectWidgetSchema
         },
         startAddress: {
           type: 'string',
           title: '始发地',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
+          ui: {}
         },
         endAddress: {
           type: 'string',
           title: '目的地',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
+          ui: {}
         },
         shipperAppUserId: {
           type: 'string',
@@ -209,11 +191,8 @@ export class insuranceManagementListComponent implements OnInit {
             searchDebounceTime: 300,
             searchLoadingText: '搜索中...',
             allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            },
             onSearch: (q: any) => {
-              let str =q.replace(/^\s+|\s+$/g,"");
+              let str = q.replace(/^\s+|\s+$/g, '');
               if (str) {
                 return this.service
                   .request(this.service.$api_enterpriceList, { enterpriseName: str })
@@ -233,30 +212,19 @@ export class insuranceManagementListComponent implements OnInit {
           title: '所属项目',
           ui: {
             widget: 'select',
-            placeholder: '请先选择货主',
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            },
+            placeholder: '请先选择货主'
           } as SFSelectWidgetSchema
         },
 
         driverName: {
           title: '承运司机',
           type: 'string',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
+          ui: {}
         },
         carNo: {
           title: '车牌号',
           type: 'string',
-          ui: {
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
-          }
+          ui: {}
         },
         insureStatus: {
           title: '投保状态',
@@ -264,10 +232,7 @@ export class insuranceManagementListComponent implements OnInit {
           ui: {
             widget: 'dict-select',
             params: { dictKey: 'insure:status' },
-            containsAllLabel: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
+            containsAllLabel: true
           } as SFSelectWidgetSchema
         },
         insureRefundStatus: {
@@ -276,10 +241,7 @@ export class insuranceManagementListComponent implements OnInit {
           ui: {
             widget: 'dict-select',
             params: { dictKey: 'insure:refund:status' },
-            containsAllLable: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
+            containsAllLable: true
           } as SFSelectWidgetSchema
         },
         enterpriseInfoId: {
@@ -289,9 +251,6 @@ export class insuranceManagementListComponent implements OnInit {
             widget: 'select',
             placeholder: '请选择',
             allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            },
             asyncData: () => this.shipperservice.getNetworkFreightForwarder()
           }
         },
@@ -302,10 +261,7 @@ export class insuranceManagementListComponent implements OnInit {
             widget: 'date',
             mode: 'range',
             format: 'yyyy-MM-dd',
-            allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
+            allowClear: true
           } as SFDateWidgetSchema
         },
         createTime: {
@@ -315,10 +271,7 @@ export class insuranceManagementListComponent implements OnInit {
             widget: 'date',
             mode: 'range',
             format: 'yyyy-MM-dd',
-            allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
+            allowClear: true
           } as SFDateWidgetSchema
         },
         recordTime: {
@@ -328,17 +281,12 @@ export class insuranceManagementListComponent implements OnInit {
             widget: 'date',
             mode: 'range',
             format: 'yyyy-MM-dd',
-            allowClear: true,
-            visibleIf: {
-              _$expand: (value: boolean) => value
-            }
+            allowClear: true
           } as SFDateWidgetSchema
-        },
-
+        }
       },
       type: 'object'
     };
-    this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
   }
   // 获取城市列表
   getRegionCode(regionCode: any) {
@@ -462,14 +410,14 @@ export class insuranceManagementListComponent implements OnInit {
         title: '失败原因',
         width: '180px',
         className: 'text-left',
-        render: 'processMessage',
+        render: 'processMessage'
         // processResult=2
       },
       {
         title: '退款状态',
         width: '180px',
         className: 'text-left',
-        index: 'insureRefundStatusLabel',
+        index: 'insureRefundStatusLabel'
         // processResult=2
       },
       {
@@ -481,7 +429,7 @@ export class insuranceManagementListComponent implements OnInit {
           {
             text: '查看保单',
             click: _record => this.showImg(_record),
-            iif: item => item.insureStatus == '2' 
+            iif: item => item.insureStatus == '2'
             // acl: { ability: ['VEHICLE-LIST-view'] },
             // iif: item =>
             //   item.billStatus == '4' || item.billStatus == '5' || item.billStatus == '2' || item.billStatus == '3' || item.billStatus == '1'
@@ -489,7 +437,7 @@ export class insuranceManagementListComponent implements OnInit {
           {
             text: '退保费',
             click: _record => this.retreatPrice(_record),
-            iif: item => item.insureStatus == '2' 
+            iif: item => item.insureStatus == '2'
             // acl: { ability: ['VEHICLE-LIST-view'] },
           }
         ]
@@ -499,39 +447,18 @@ export class insuranceManagementListComponent implements OnInit {
   showImg(_record: any) {
     // var newUrl=_record.policyUrl.replace('http','https')
     // console.log(newUrl);
-    
+
     // window.open(newUrl,'_self');
     window.open(`${_record.newPolicyUrl}`);
     // this.service.downloadFile(`${_record.newPolicyUrl}`)
 
-    
     // const params = {
     //   imgList: [_record.policyUrl],
     //   index: 0
     // };
     // this.modal.create({ nzContent: ImageViewComponent, nzComponentParams: { params } });
   }
-  /**
-   * 查询字段个数
-   */
-  get queryFieldCount(): number {
-    return Object.keys(this.schema?.properties || {}).length;
-  }
-  /**
-   * 伸缩查询条件
-   */
-  expandToggle(): void {
-    this._$expand = !this._$expand;
-    this.sf?.setValue('/_$expand', this._$expand);
-  }
-  tabChange(item: any) { }
-  /**
-   * 重置表单
-   */
-  resetSF(): void {
-    this.sf.reset();
-    this._$expand = false;
-  }
+  tabChange(item: any) {}
 
   // 退保费
   retreatPrice(value: any) {
@@ -541,7 +468,7 @@ export class insuranceManagementListComponent implements OnInit {
       nzContent: '退还后不可撤销，请谨慎操作！',
       nzCancelText: '取消',
       nzOnOk: () => {
-        this.service.request(this.service.$api_get_addINPBillRefundApplication, {id: value.id}).subscribe(res => {
+        this.service.request(this.service.$api_get_addINPBillRefundApplication, { id: value.id }).subscribe(res => {
           if (res) {
             this.service.msgSrv.success('删除菜单成功');
           }