bbq/src/app/routes/datatable/components/compliance/customer/customer.component.ts

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;
}