edit

src/app/routes/ticket-management/components/etc-blacklist/etc-blacklist.component.ts

@@ -1,13 +1,16 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { STComponent, STColumn, STChange } from '@delon/abc/st';
+import { STComponent, STColumn, STChange, STRequestOptions } from '@delon/abc/st';
 import { SFComponent, SFSchema } from '@delon/form';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { SystemService } from 'src/app/routes/sys-setting/services/system.service';
+import { TicketService } from '../../services/ticket.service';
+import { AddCartComponent } from './add-cart/add-cart.component';
+import { AddOwnerComponent } from './add-owner/add-owner.component';
 
 @Component({
   selector: 'app-etc-blacklist',
   templateUrl: './etc-blacklist.component.html',
-  styleUrls: ['./etc-blacklist.component.less']
+  styleUrls: ['../../../commom/less/box.less', './etc-blacklist.component.less']
 })
 export class ETCBlacklistComponent implements OnInit {
   @ViewChild('st', { static: true })
@@ -27,128 +30,32 @@ export class ETCBlacklistComponent implements OnInit {
     }
   ];
   tabType = 1;
-  url = `/rule?_allow_anonymous=true`;
 
-  searchSchema: SFSchema = {
-    properties: {
-      tabType: {
-        type: 'number',
-        ui: {
-          hidden: true
-        }
-      },
-      params1: {
-        title: '企业名称',
-        type: 'string',
-        ui: {
-          placeholder: '请输入',
-          visibleIf: {
-            tabType: (value: number) => this.tabType === 1
-          }
-        }
-      },
-      params2: {
-        title: '联系人姓名',
-        type: 'string',
-        ui: {
-          placeholder: '姓名/手机/车牌号',
-          visibleIf: {
-            tabType: (value: number) => this.tabType === 1
-          }
-        }
-      },
-      params3: {
-        title: '手机号',
-        type: 'string',
-        ui: {
-          placeholder: '请输入',
-          visibleIf: {
-            tabType: (value: number) => this.tabType === 1
-          }
-        }
-      },
-      params4: {
-        title: '车牌号',
-        type: 'string',
-        ui: {
-          placeholder: '请输入',
-          visibleIf: {
-            tabType: (value: number) => this.tabType === 2
-          }
-        }
-      },
-      params5: {
-        title: '司机姓名',
-        type: 'string',
-        ui: {
-          placeholder: '请输入',
-          visibleIf: {
-            tabType: (value: number) => this.tabType === 2
-          }
-        }
-      },
-      params6: {
-        title: '手机号',
-        type: 'string',
-        ui: {
-          placeholder: '请输入',
-          visibleIf: {
-            tabType: (value: number) => this.tabType === 2
-          }
-        }
-      }
-    }
-  };
+  searchSchema: SFSchema = this.initSF();
 
-  columns: STColumn[] = [
-    { title: '', index: 'key', type: 'checkbox' },
-    { title: '企业名称', index: 'no', iif: () => this.tabType === 1 },
-    { title: '联系人姓名', index: 'no', iif: () => this.tabType === 1 },
-    { title: '车牌号', index: 'no', iif: () => this.tabType === 2 },
-    { title: '司机姓名', index: 'no', iif: () => this.tabType === 2 },
-    { title: '手机号', index: 'no' },
-    {
-      title: '认证状态',
-      className: 'text-center',
-      index: 'status',
-      type: 'badge',
-      badge: {
-        0: { text: '启用', color: 'success' },
-        2: { text: '禁用', color: 'error' },
-        3: { text: '禁用', color: 'error' },
-        1: { text: '禁用', color: 'error' }
-      }
-    },
-    { title: '创建者', index: 'no' },
-    {
-      title: '创建时间',
-      index: 'updatedAt',
-      type: 'date'
-    },
-    {
-      title: '操作',
-      buttons: [
-        {
-          text: '删除',
-          click: item => this.deleteAction(item)
-        }
-      ]
-    }
-  ];
+  columns: STColumn[] = this.initST();
 
   selectedRows: any[] = [];
 
-  reqParams = { pageIndex: 1, pageSize: 10 };
-
-  constructor(public service: SystemService, private nzModalService: NzModalService) {}
+  constructor(public service: TicketService, private nzModalService: NzModalService) {}
 
   ngOnInit(): void {}
 
+  beforeReq = (requestOptions: STRequestOptions) => {
+    if (this.sf) {
+      Object.assign(requestOptions.body, {
+        ...this.sf.value
+      });
+    }
+    return requestOptions;
+  };
+
   // 切换Tab
   changeTab(item: any) {
     this.tabType = item.type;
     this.sf?.setValue('/tabType', item.type);
     this.sf?.reset();
+    this.selectedRows = [];
     setTimeout(() => {
       this.tabs.forEach(i => (i.isActived = false));
       item.isActived = !item.isActived;
@@ -162,20 +69,58 @@ export class ETCBlacklistComponent implements OnInit {
       case 'checkbox':
         this.selectedRows = e.checkbox!;
         break;
-      case 'filter':
-        this.st.load();
-        break;
     }
   }
 
-  configAction(item?: any) {}
+  configAction(item?: any) {
+    if (this.tabType === 1) {
+      this.addOwnerAction(item);
+    } else {
+      this.addCartAction(item);
+    }
+  }
+
+  addOwnerAction(item: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '选择货主',
+      nzContent: AddOwnerComponent,
+      nzWidth: 850,
+      nzComponentParams: { data: [] },
+      nzOnOk: com => {
+        console.log(com.selectedData);
+      }
+    });
+    modal.afterClose.subscribe(res => {
+      if (res) {
+        this.st.load();
+      }
+    });
+  }
+
+  addCartAction(item: any) {
+    const modal = this.nzModalService.create({
+      nzTitle: '选择车辆',
+      nzContent: AddCartComponent,
+      nzWidth: 700,
+      nzComponentParams: { data: [] },
+      nzOnOk: com => {
+        console.log(com.selectedData);
+      }
+    });
+    modal.afterClose.subscribe(res => {
+      if (res) {
+        this.st.load();
+      }
+    });
+  }
 
   deleteAction(item?: any) {
-    this.nzModalService.error({
-      nzTitle: '确认删除？',
+    this.nzModalService.warning({
+      nzTitle: this.tabType === 1 ? '确定将所选货主从ETC白名单中剔除？' : '确定将所选车辆从ETC白名单中剔除？',
       nzClosable: false,
       nzCancelText: '取消',
-      nzOnOk: () => {}
+      nzOnOk: () => {},
+      nzOkText: '确定'
     });
   }
   /**
@@ -184,4 +129,116 @@ export class ETCBlacklistComponent implements OnInit {
   resetSF() {
     this.sf.reset();
   }
+
+  private initSF(): SFSchema {
+    return {
+      properties: {
+        tabType: {
+          type: 'number',
+          ui: {
+            hidden: true
+          }
+        },
+        params1: {
+          title: '企业名称',
+          type: 'string',
+          ui: {
+            placeholder: '请输入',
+            visibleIf: {
+              tabType: (value: number) => this.tabType === 1
+            }
+          }
+        },
+        params2: {
+          title: '联系人姓名',
+          type: 'string',
+          ui: {
+            placeholder: '姓名/手机/车牌号',
+            visibleIf: {
+              tabType: (value: number) => this.tabType === 1
+            }
+          }
+        },
+        params3: {
+          title: '联系人手机号',
+          type: 'string',
+          ui: {
+            placeholder: '请输入',
+            visibleIf: {
+              tabType: (value: number) => this.tabType === 1
+            }
+          }
+        },
+        params4: {
+          title: '车牌号',
+          type: 'string',
+          ui: {
+            placeholder: '请输入',
+            visibleIf: {
+              tabType: (value: number) => this.tabType === 2
+            }
+          }
+        },
+        params5: {
+          title: '司机姓名',
+          type: 'string',
+          ui: {
+            placeholder: '请输入',
+            visibleIf: {
+              tabType: (value: number) => this.tabType === 2
+            }
+          }
+        },
+        params6: {
+          title: '手机号',
+          type: 'string',
+          ui: {
+            placeholder: '请输入',
+            visibleIf: {
+              tabType: (value: number) => this.tabType === 2
+            }
+          }
+        }
+      }
+    };
+  }
+
+  private initST(): STColumn[] {
+    return [
+      { title: '', index: 'key', type: 'checkbox' },
+      { title: '企业名称', index: 'no', iif: () => this.tabType === 1 },
+      { title: '联系人姓名', index: 'no', iif: () => this.tabType === 1 },
+      { title: '联系人手机号', index: 'no' },
+      {
+        title: '认证状态',
+        className: 'text-center',
+        index: 'status',
+        type: 'badge',
+        badge: {
+          0: { text: '启用', color: 'success' },
+          2: { text: '禁用', color: 'error' },
+          3: { text: '禁用', color: 'error' },
+          1: { text: '禁用', color: 'error' }
+        },
+        iif: () => this.tabType === 1
+      },
+      { title: '车牌号', index: 'no', iif: () => this.tabType === 2 },
+      { title: '车辆所有人', index: 'no', iif: () => this.tabType === 2 },
+      { title: '创建者', index: 'no' },
+      {
+        title: '创建时间',
+        index: 'updatedAt',
+        type: 'date'
+      },
+      {
+        title: '操作',
+        buttons: [
+          {
+            text: '删除',
+            click: item => this.deleteAction(item)
+          }
+        ]
+      }
+    ];
+  }
 }