import { SFComponent } from '@delon/form'; /* * @Description : * @Version : 1.0 * @Author : Shiming * @Date : 2022-03-30 13:55:41 * @LastEditors : Shiming * @LastEditTime : 2022-04-19 17:45:44 * @FilePath : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\compliance\\customer\\customer.component.ts * Copyright (C) 2022 huzhenhong. All rights reserved. */ import { Component, OnInit, ViewChild } from '@angular/core'; import { STColumn, STComponent, STRequestOptions } from '@delon/abc/st'; import { SFSchema } from '@delon/form'; import { ModalHelper, _HttpClient, DatePipe } from '@delon/theme'; import { DataService } from '../../../services/data.service'; import { differenceInCalendarDays } from 'date-fns'; import { Placeholder } from '@angular/compiler/src/i18n/i18n_ast'; @Component({ selector: 'app-datatable-compliance-customer', templateUrl: './customer.component.html', styleUrls: ['./customer.component.less'], providers: [DatePipe] }) export class DatatableComplianceCustomerComponent implements OnInit { @ViewChild('sf', { static: false }) sf!: SFComponent; mode = 'year'; type = 1; date: any = null; defineDate = []; time: any = ['2022']; dateFormat = 'yyyy'; dateNext: any = null; modeNext = 'year'; timeNext: any = ['2022-01-01 00:00:00']; today = new Date(); 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 }); } } }, partnerName: { type: 'string', title: '', ui: { placeholder: '请输入客户名称', change: (value: any) => { console.log(value); this.st.reload({ ...this.reqParams }); } } }, no4: { type: 'string', title: '', ui: { class: 'custom', widget: 'custom', grid: { xxl: 9, xl: 12, lg: 24, md: 24, sm: 24, xs: 24 } } } } }; @ViewChild('st') private readonly st!: STComponent; columns: STColumn[] = [ { title: '公司名称',width: '200px', index: 'enterpriseName' ,}, { title: '注册时间', width: '200px', index: 'registerTime',}, { title: '客户类型', width: '200px', index: 'customerType' }, { title: '业务员',width: '200px', index: 'salesmanName' }, { title: '合伙人',width: '200px', index: 'partnerName' }, { title: '订单数',width: '200px', index: 'billCounts' }, { title: '订单不合格数',width: '200px', index: 'billQuaCounts' }, { title: '订单不合格率',width: '200px', index: 'billQuaCountsPer' }, { title: '货源单订单数',width: '200px', index: 'gsourceCounts' }, { title: '合同单数', width: '200px',index: 'billConCounts' }, { title: '货源单个',width: '200px', index: 'gsourceCounts' }, { title: '运费直付单数',width: '200px', index: 'freightDirPayCounts' }, { title: '运费代收单数',width: '200px', index: 'freightRepPayCounts' }, { title: '手机直付', width: '200px',index: 'updatedAt' }, { title: '汇款单数',width: '200px', index: 'updatedAt' }, { title: '及时付款',width: '200px', index: 'timelyPayPer' }, ]; constructor(private http: _HttpClient, private modal: ModalHelper, public service: DataService, private datePipe: DatePipe) {} /** * 查询参数 */ 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; } const params: any = Object.assign({}, this.sf?.value || {}); 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')]; } else if (this.mode === 'month') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM')]; } else if (this.mode === 'date') { this.time = [this.datePipe.transform(this.date, 'yyyy-MM-dd')]; } else { this.time = [ this.datePipe.transform(this.defineDate[0], 'yyyy-MM-dd'), this.datePipe.transform(this.defineDate[1], 'yyyy-MM-dd') ]; } this.st.reload({ ...this.reqParams }); } changeData() { if (this.mode === 'year') { this.dateFormat = 'yyyy'; } else if (this.mode === 'month') { this.dateFormat = 'yyyy-MM'; } else { this.dateFormat = 'yyyy-MM-dd'; } } disabledDate = (current: Date): boolean => // Can not select days before today and today differenceInCalendarDays(current, this.today) > 0; }