Rainie/bbq
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

edit

Browse Source
This commit is contained in:
Taric Xin
2022-01-05 17:14:08 +08:00
parent badaa27cff
commit 3be663b9af
24 changed files with 891 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/routes/ticket-management/components/etc-blacklist/add-cart/add-cart.component.html Normal file
View File

@ -0,0 +1,15 @@
<div nz-row nzGutter="8">
<div nz-col nzSpan="19">
<sf #sf [schema]="searchSchema" [ui]="{ '*': {grid: { span: 12 } }}" [compact]="true" [button]="'none'"></sf>
</div>
<div nz-col [nzSpan]="5" class="text-right mb-md">
<button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)">查询</button>
<button nz-button (click)="resetSF()">重置</button>
</div>
<st #st [data]="service.$mock_url" [columns]="columns" bordered size="small"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100] }" [loading]="service.http.loading"
[scroll]="{ x:'650px',y: '400px' }" (change)="stChange($event)"></st>
</div>

0
src/app/routes/ticket-management/components/etc-blacklist/add-cart/add-cart.component.less Normal file
View File

71
src/app/routes/ticket-management/components/etc-blacklist/add-cart/add-cart.component.ts Normal file
View File

@ -0,0 +1,71 @@
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 { NzModalService } from 'ng-zorro-antd/modal';
import { TicketService } from '../../../services/ticket.service';
@Component({
selector: 'app-add-cart',
templateUrl: './add-cart.component.html',
styleUrls: ['./add-cart.component.less']
})
export class AddCartComponent implements OnInit {
data = [];
selectedData: any[] = [];
@ViewChild('st', { static: true })
st!: STComponent;
@ViewChild('sf', { static: false })
sf!: SFComponent;
columns: STColumn[] = [
{ title: '', index: 'key', type: 'checkbox' },
{ title: '车牌号', index: 'no' },
{ title: '车辆所有人', index: 'callNo' }
];
searchSchema: SFSchema = {
properties: {
params1: {
title: '',
type: 'string',
ui: {
placeholder: '请输入车牌号'
}
},
params2: {
title: '',
type: 'string',
ui: {
placeholder: '请输入车辆所有人'
}
},
}
};
constructor(public service: TicketService, private nzModalService: NzModalService, private router: Router) {}
ngOnInit(): void {}
beforeReq = (requestOptions: STRequestOptions) => {
if (this.sf) {
Object.assign(requestOptions.body, {
...this.sf.value
});
}
return requestOptions;
};
stChange(e: STChange): void {
switch (e.type) {
case 'checkbox':
this.selectedData = e.checkbox!;
break;
}
}
/**
* 重置表单
*/
resetSF() {
this.sf.reset();
}
}

16
src/app/routes/ticket-management/components/etc-blacklist/add-owner/add-owner.component.html Normal file
View File

@ -0,0 +1,16 @@
<div nz-row nzGutter="8">
<div nz-col nzSpan="19">
<sf #sf [schema]="searchSchema" [ui]="{ '*': {grid: { span: 8 } }}" [compact]="true"
[button]="'none'"></sf>
</div>
<div nz-col [nzSpan]="5" class="text-right mb-md">
<button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)">查询</button>
<button nz-button (click)="resetSF()">重置</button>
</div>
<st #st [data]="service.$mock_url" [columns]="columns" bordered size="small"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100] }"
[loading]="service.http.loading" [scroll]="{ x:'810px',y: '400px' }" (change)="stChange($event)"></st>
</div>

0
src/app/routes/ticket-management/components/etc-blacklist/add-owner/add-owner.component.less Normal file
View File

80
src/app/routes/ticket-management/components/etc-blacklist/add-owner/add-owner.component.ts Normal file
View File

@ -0,0 +1,80 @@
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 { NzModalService } from 'ng-zorro-antd/modal';
import { TicketService } from '../../../services/ticket.service';
@Component({
selector: 'app-add-owner',
templateUrl: './add-owner.component.html',
styleUrls: ['./add-owner.component.less']
})
export class AddOwnerComponent implements OnInit {
data = [];
selectedData: any[] = [];
@ViewChild('st', { static: true })
st!: STComponent;
@ViewChild('sf', { static: false })
sf!: SFComponent;
columns: STColumn[] = [
{ title: '', index: 'key', type: 'checkbox' },
{ title: '企业名称', index: 'no' },
{ title: '联系人姓名', index: 'callNo' },
{ title: '联系人手机号', index: 'callNo' },
{ title: '认证状态', index: 'callNo' }
];
searchSchema: SFSchema = {
properties: {
params1: {
title: '',
type: 'string',
ui: {
placeholder: '请输入企业名称'
}
},
params2: {
title: '',
type: 'string',
ui: {
placeholder: '请输入姓名'
}
},
params3: {
title: '',
type: 'string',
ui: {
placeholder: '请输入手机号'
}
}
}
};
constructor(public service: TicketService, private nzModalService: NzModalService, private router: Router) {}
ngOnInit(): void {}
beforeReq = (requestOptions: STRequestOptions) => {
if (this.sf) {
Object.assign(requestOptions.body, {
...this.sf.value
});
}
return requestOptions;
};
stChange(e: STChange): void {
switch (e.type) {
case 'checkbox':
this.selectedData = e.checkbox!;
break;
}
}
/**
* 重置表单
*/
resetSF() {
this.sf.reset();
}
}

14
src/app/routes/ticket-management/components/etc-blacklist/etc-blacklist.component.html
View File

@ -1,4 +1,4 @@
<page-header-wrapper [title]="'黑名单'" [content]="content">
<page-header-wrapper [title]="'ETC白名单'" [content]="content">
<ng-template #content>
<nz-tabset class="tabs-wrap">
<nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.name" (nzSelect)="changeTab(tab)"> </nz-tab>
@ -10,7 +10,7 @@
<div nz-row nzGutter="8">
<div nz-col [nzXl]="18" [nzLg]="24" [nzSm]="24" [nzXs]="24">
<sf #sf [schema]="searchSchema"
[ui]="{ '*': { spanLabelFixed: 90,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}" [compact]="true"
[ui]="{ '*': { spanLabelFixed: 110,grid: { lg: 8, md: 12, sm: 12, xs: 24 } }}" [compact]="true"
[button]="'none'"></sf>
</div>
<div nz-col [nzXl]="6" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24" class="text-right">
@ -23,16 +23,16 @@
<nz-card>
<div class="d-flex align-items-center mb-md">
<button nz-button>添加</button>
<button nz-button>删除</button>
<button nz-button (click)="configAction()">添加</button>
<button nz-button (click)="deleteAction()">删除</button>
<div class="ml-md">
已选择
<strong class="text-primary">{{ selectedRows.length }}</strong> 条删除
<strong class="text-primary">{{ selectedRows.length }}</strong> 条数据
<a *ngIf="selectedRows.length > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
</div>
</div>
<st #st [data]="url" [columns]="columns"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, params: reqParams }"
<st #st [data]="service.$mock_url" [columns]="columns"
[req]="{ method: 'POST', allInBody: true, reName: { pi: 'pageIndex', ps: 'pageSize' }, process: beforeReq }"
[res]="{ reName: { list: 'data.records', total: 'data.total' } }"
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
[loading]="service.http.loading" [scroll]="{ y: '370px' }" (change)="stChange($event)"></st>

11
src/app/routes/ticket-management/components/etc-blacklist/etc-blacklist.component.less
View File

@ -1,15 +1,4 @@
:host::ng-deep {
.search-box {
.ant-card-body {
padding-bottom: 18px;
}
}
.content-box {
.ant-card-body {
padding-top: 14px;
}
}
.tabs-wrap>.ant-tabs-nav {
margin-bottom: 0;

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

@ -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)
}
]
}
];
}
}