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