This commit is contained in:
Taric Xin
2022-04-18 09:53:08 +08:00
parent 7e3783b479
commit 82169c54e1
3 changed files with 90 additions and 73 deletions

View File

@ -11,7 +11,11 @@
<!-- 页头 -->
<page-header-wrapper [title]="'数据报表'"></page-header-wrapper>
<nz-card>
<sf #sf mode="search" [schema]="searchSchema" button="none"></sf>
<div nz-row nzGutter="8">
<div nz-col [nzXl]="24" [nzLg]="24" [nzSm]="24" [nzXs]="24">
<sf #sf [schema]="searchSchema" button="none"
[ui]="{ '*': { spanLabelFixed: 110, grid: { xxl:5,xl:8, lg: 8, md: 12, sm: 12, xs: 24 } } }" [compact]="true">
<ng-template sf-template="no4" let-me let-ui="ui" let-schema="schema">
<div class="chooseBox">
<div class="timeBox">
<nz-radio-group [(ngModel)]="mode" nzButtonStyle="solid" (ngModelChange)="changeData()">
@ -21,23 +25,23 @@
<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>
</sf>
</div>
</div>
</div>
</div>
<st
#st
[bordered]="true"
[scroll]="{ x: '2000px' }"
[data]="service.$api_listCusComplianceReportPage"
<st #st [bordered]="true" [scroll]="{ x: '2000px' }" [data]="service.$api_listCusComplianceReportPage"
[columns]="columns"
[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: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }"
[loading]="false"
>
[page]="{ show: true, showSize: true, pageSizes: [10, 20, 30, 50, 100, 200, 300, 500, 1000] }" [loading]="false">
<ng-template st-row="freightPrice" let-item let-index="index">
{{ item.freightPrice | currency }}
</ng-template>

View File

@ -1,10 +1,13 @@
.chooseBox {
display: flex;
float : right;
}
.timeBox {
display: flex;
margin : 0 0 0 10px;
}
.dateBox {
display: inline-block;
margin : 0 0 0 10px;

View File

@ -21,19 +21,18 @@ import { differenceInCalendarDays } from 'date-fns';
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.less'],
providers: [DatePipe]
})
export class DatatableComplianceCustomerComponent implements OnInit {
@ViewChild('sf', {static: false}) sf!: SFComponent
@ViewChild('sf', { static: false }) sf!: SFComponent;
mode = 'year';
type = 1;
date: any = null;
defineDate = [];
time: any = ['2022']
time: any = ['2022'];
dateFormat = 'yyyy';
dateNext: any = null;
modeNext = 'year';
timeNext: any = ['2022-01-01 00:00:00']
timeNext: any = ['2022-01-01 00:00:00'];
today = new Date();
searchSchema: SFSchema = {
properties: {
@ -49,11 +48,20 @@ export class DatatableComplianceCustomerComponent implements OnInit {
type: 'string',
title: '合伙人名称'
},
no4: {
type: 'string',
title: '',
ui: {
class: 'text-right',
widget: 'custom',
grid: { xxl: 9, xl: 24, lg: 24, md: 24, sm: 24, xs: 24 }
}
}
}
};
@ViewChild('st') private readonly st!: STComponent;
columns: STColumn[] = [
{ title: '公司名称', index: 'enterpriseName' ,},
{ title: '公司名称', index: 'enterpriseName' },
{ title: '注册时间', index: 'registerTime' },
{ title: '客户类型', width: '100px', index: 'customerType' },
{ title: '业务员', index: 'salesmanName' },
@ -68,8 +76,7 @@ export class DatatableComplianceCustomerComponent implements OnInit {
{ title: '运费代收单数', index: 'freightRepPayCounts' },
{ title: '手机直付', index: 'updatedAt' },
{ title: '汇款单数', index: 'updatedAt' },
{ title: '及时付款', index: 'timelyPayPer' },
{ title: '及时付款', index: 'timelyPayPer' }
];
constructor(private http: _HttpClient, private modal: ModalHelper, public service: DataService, private datePipe: DatePipe) {}
@ -78,40 +85,43 @@ export class DatatableComplianceCustomerComponent implements OnInit {
*/
get reqParams() {
if (this.mode === 'year') {
this.type = 1
this.type = 1;
} else if (this.mode === 'month') {
this.type = 2
this.type = 2;
} else if (this.mode === 'date') {
this.type = 3
this.type = 3;
} else {
this.type = 4
this.type = 4;
}
const params: any = Object.assign({}, this.sf?.value || {});
params.type = this.type
params.queryTime = this.time
params.type = this.type;
params.queryTime = this.time;
delete params._$expand;
return { ...params };
}
ngOnInit(): void {}
onChange(result: any) {
if (this.mode === 'year') {
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00']
this.time = [this.datePipe.transform(this.date, 'yyyy') + '-01-01 00:00:00'];
} else if (this.mode === 'month') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00']
this.time = [this.datePipe.transform(this.date, 'yyyy-MM') + '-01 00:00:00'];
} else if (this.mode === 'date') {
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00']
this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd') + ' 00:00:00'];
} else {
this.time = [this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00', this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00']
this.time = [
this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd') + '00:00:00',
this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') + ' 00:00:00'
];
}
this.st.reload({ ...this.reqParams });
}
changeData() {
if (this.mode === 'year') {
this.dateFormat = 'yyyy'
this.dateFormat = 'yyyy';
} else if (this.mode === 'month') {
this.dateFormat = 'yyyy-MM'
this.dateFormat = 'yyyy-MM';
} else {
this.dateFormat = 'yyyy-MM-dd'
this.dateFormat = 'yyyy-MM-dd';
}
}
disabledDate = (current: Date): boolean =>