346 lines
8.9 KiB
TypeScript
346 lines
8.9 KiB
TypeScript
import { Component, OnInit, ViewChild } from '@angular/core';
|
|
import { STColumn, STComponent } from '@delon/abc/st';
|
|
import { SFComponent, SFDateWidgetSchema, SFSchema, SFUISchema } from '@delon/form';
|
|
import { DatePipe, _HttpClient } from '@delon/theme';
|
|
import { differenceInCalendarDays } from 'date-fns';
|
|
import { DataService } from '../../../services/data.service';
|
|
|
|
@Component({
|
|
selector: 'app-datatable-mancustomtable',
|
|
templateUrl: './mancustomtable.component.html',
|
|
styleUrls: ['./mancustomtable.component.less'],
|
|
providers: [DatePipe]
|
|
})
|
|
export class DatatableMancustomtableComponent implements OnInit {
|
|
@ViewChild('st', { static: false }) st!: STComponent;
|
|
@ViewChild('sf', { static: false }) sf!: SFComponent;
|
|
_$expand = false;
|
|
type = 1;
|
|
mode = 'year';
|
|
date: any = null;
|
|
defineDate = [];
|
|
columns: STColumn[] = [];
|
|
resourceStatus: number = 1;
|
|
time: any = ['2022-01-01 00:00:00'];
|
|
dateFormat = 'yyyy';
|
|
today = new Date();
|
|
ui: SFUISchema = {};
|
|
schema: SFSchema = {};
|
|
isLoading: boolean = false;
|
|
searchSchema: SFSchema = {
|
|
properties: {
|
|
customerName: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
placeholder: '请输入客户名称',
|
|
change: (value: any) => {
|
|
console.log(value);
|
|
this.st.reload({ ...this.reqParams });
|
|
}
|
|
}
|
|
},
|
|
salesmanName: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
placeholder: '请输入业务员',
|
|
change: (value: any) => {
|
|
this.st.reload({ ...this.reqParams });
|
|
}
|
|
}
|
|
},
|
|
no4: {
|
|
type: 'string',
|
|
title: '',
|
|
ui: {
|
|
class: 'custom',
|
|
widget: 'custom',
|
|
grid: { xxl: 12, xl: 12, lg: 24, md: 24, sm: 24, xs: 24 }
|
|
}
|
|
}
|
|
}
|
|
};
|
|
initST() {
|
|
this.columns = [
|
|
{ title: '部门', index: 'department', className: 'text-center', width: '150px' },
|
|
{ title: '业务员', index: 'salesmen', className: 'text-center', width: '150px' },
|
|
{
|
|
title: '已认证货主数',
|
|
index: 'certifiedCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 1 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '已认证合伙人',
|
|
index: 'certifiedCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 2 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '新增合伙人数',
|
|
index: 'addCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 2 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '合伙人活跃率',
|
|
index: 'alivePer',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 2 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '活跃合伙人数',
|
|
index: 'aliveCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 2 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '沉默合伙人数',
|
|
index: 'silentCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 2 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '流失合伙人数',
|
|
index: 'drainCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 2 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '未激活合伙人数',
|
|
index: 'notActiveCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 2 ? false : true;
|
|
}
|
|
},
|
|
|
|
{
|
|
title: '新增货主数',
|
|
index: 'addCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 1 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '货主活跃率',
|
|
index: 'alivePer',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 1 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '活跃货主数',
|
|
index: 'aliveCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 1 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '沉默货主数',
|
|
index: 'silentCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 1 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '流失货主数',
|
|
index: 'drainCount',
|
|
className: 'text-right',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 1 ? false : true;
|
|
}
|
|
},
|
|
{
|
|
title: '未激活货主数',
|
|
index: 'notActiveCount',
|
|
className: 'text-center',
|
|
width: '150px',
|
|
iif: () => {
|
|
return this?.resourceStatus !== 1 ? false : true;
|
|
}
|
|
}
|
|
];
|
|
}
|
|
/**
|
|
* 查询参数
|
|
*/
|
|
get reqParams() {
|
|
if (this.mode === 'year') {
|
|
this.type = 1;
|
|
} else if (this.mode === 'month') {
|
|
this.type = 2;
|
|
} else if (this.mode === 'date') {
|
|
this.type = 3;
|
|
} else {
|
|
this.type = 4;
|
|
}
|
|
let params: any = {
|
|
time: this.time,
|
|
type: this.type,
|
|
parType: this.resourceStatus,
|
|
...this.sf?.value
|
|
};
|
|
|
|
delete params._$expand;
|
|
delete params.sort;
|
|
return { ...params };
|
|
}
|
|
constructor(public service: DataService, private datePipe: DatePipe) {}
|
|
ngOnInit(): void {
|
|
this.initSF();
|
|
this.initST();
|
|
}
|
|
/**
|
|
* 初始化查询表单
|
|
*/
|
|
initSF() {
|
|
this.schema = {
|
|
properties: {
|
|
_$expand: { type: 'boolean', ui: { hidden: true } },
|
|
enterpriseName: {
|
|
type: 'string',
|
|
title: '货主名称',
|
|
ui: {
|
|
placeholder: '请输入'
|
|
}
|
|
},
|
|
customerType: {
|
|
type: 'string',
|
|
title: '客户类型',
|
|
ui: {
|
|
widget: 'select',
|
|
placeholder: '请选择'
|
|
},
|
|
enum: [
|
|
{ label: '直客', value: 2 },
|
|
{ label: '渠道客户', value: 3 },
|
|
{ label: '平台客户', value: 1 }
|
|
]
|
|
},
|
|
customerStatus: {
|
|
type: 'string',
|
|
title: '客户状态',
|
|
ui: {
|
|
widget: 'select',
|
|
placeholder: '请选择'
|
|
},
|
|
enum: [
|
|
{ label: '未激活', value: 1 },
|
|
{ label: '沉默', value: 2 },
|
|
{ label: '流失', value: 3 },
|
|
{ label: '活跃', value: 4 }
|
|
]
|
|
},
|
|
registerTime: {
|
|
title: '注册时间',
|
|
type: 'string',
|
|
ui: {
|
|
widget: 'sl-from-to',
|
|
type: 'date',
|
|
format: 'yyyy-MM-dd',
|
|
visibleIf: {
|
|
_$expand: (value: boolean) => value
|
|
}
|
|
} as SFDateWidgetSchema
|
|
}
|
|
},
|
|
type: 'object'
|
|
};
|
|
this.ui = { '*': { spanLabelFixed: 110, grid: { span: 8, gutter: 4 } } };
|
|
}
|
|
changeData() {
|
|
if (this.mode === 'year') {
|
|
this.dateFormat = 'yyyy';
|
|
} else if (this.mode === 'month') {
|
|
this.dateFormat = 'yyyy-MM';
|
|
} else {
|
|
this.dateFormat = 'yyyy-MM-dd';
|
|
}
|
|
}
|
|
onChange(result: any) {
|
|
if (result === null) {
|
|
return;
|
|
}
|
|
if (this.mode === 'year') {
|
|
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'];
|
|
} else if (this.mode === 'date') {
|
|
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.st.reload({ ...this.reqParams });
|
|
}
|
|
disabledDate = (current: Date): boolean =>
|
|
// Can not select days before today and today
|
|
differenceInCalendarDays(current, this.today) > 0;
|
|
|
|
export() {
|
|
// this.service.downloadFile(this.service.$api_exportUploadBill, this.sf.value, {});
|
|
}
|
|
search() {
|
|
this.st?.load(1);
|
|
}
|
|
/**
|
|
* 伸缩查询条件
|
|
*/
|
|
expandToggle() {
|
|
this._$expand = !this._$expand;
|
|
this.sf?.setValue('/_$expand', this._$expand);
|
|
}
|
|
|
|
/**
|
|
* 重置表单
|
|
*/
|
|
resetSF() {
|
|
this.sf.reset();
|
|
this._$expand = false;
|
|
this.isLoading = true;
|
|
}
|
|
selectChange(e: number) {
|
|
console.log(e);
|
|
this.resourceStatus = e + 1;
|
|
setTimeout(() => {
|
|
this.st?.resetColumns();
|
|
this.st?.load(1);
|
|
}, 500);
|
|
}
|
|
}
|