bbq/src/app/routes/datatable/components/customtable/owner/owner.component.ts

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-owner',
  templateUrl: './owner.component.html',
  styleUrls: ['./owner.component.less'],
  providers: [DatePipe]
})
export class DatatableOwnerComponent implements OnInit {
  @ViewChild('st', { static: false }) st!: STComponent;
  @ViewChild('sf', { static: false }) sf!: SFComponent;
  _$expand = false;
  type = 1;
  mode = 'year';
  date: any = null;
  defineDate = [];
  time: any = ['2022-01-01 00:00:00']
  dateFormat = 'yyyy';
  today = new Date();
  ui: SFUISchema = {};
  schema: SFSchema = {};
  isLoading: boolean = false;
 
  columns: STColumn[] = [
    { title: '货主名称', index: 'enterpriseName', className: 'text-center', width: '200px' },
    { title: '注册时间', index: 'registerTime', className: 'text-center', width: '200px' },
    { title: '客户类型', index: 'customerType', className: 'text-center', width: '100px', type: 'enum', enum: {
      1: '平台客户',
      2: '直客',
      3: '渠道客户'
    }
   },
    { title: '业务员', index: 'salesmanName', className: 'text-center', width: '100px' },
    { title: '合伙人', index: 'partnerName', className: 'text-center', width: '100px' },
    { title: '客户状态', index: 'customerStatus', className: 'text-center', width: '100px', type: 'enum', enum: {
      1: '未激活',
      2: '流失',
      3: '活跃',
      4: '沉默'
    } },
    { title: '订单数', index: 'zsl', className: 'text-center', width: '100px' },
    { title: '订单金额', index: 'ddje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ddje }) } },
    { title: '应收订单数', index: 'ysdds', className: 'text-center', width: '120px' },
    { title: '应收金额', index: 'yingsje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yingsje }) } },
    { title: '待开票订单数', index: 'yifyf', className: 'text-center', width: '130px' },
    { title: '待开票金额', index: 'dkpdds', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.dkpdds }) } },
    { title: '已收金额', index: 'yisje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yisje }) } },
    { title: '应收附加费', index: 'yingsfjf', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yingsfjf }) } },
    { title: '已收附加费', index: 'yisfjf', className: 'text-right', width: '120px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.yisfjf }) } },
    { title: '附加费率', index: 'fjfl', className: 'text-center', width: '100px' },
    { title: '已开票金额', index: 'ykpje', className: 'text-right', width: '100px', type: 'widget', widget: { type: 'currency-chy', params: ({ record }) => ({ value: record.ykpje }) } },
  ];
  /**
   * 查询参数
   */
   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,
      ...this.sf?.value
     };
  
    delete params._$expand;
    return { ...params };
  }
  constructor(public service: DataService, private datePipe: DatePipe) { }
  ngOnInit(): void { 
    this.initSF();
  }
 /**
   * 初始化查询表单
   */
  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
  }
}