diff --git a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html index 482ccb06..3a8ce1ef 100644 --- a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html +++ b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.html @@ -1,9 +1,61 @@ - - - + + + + + + + + + +
+
+ + + +
+
+ + + + + + +
+ + +
+
+
+ + +
+
- - - - - + + + \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.less b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.less new file mode 100644 index 00000000..d754ef94 --- /dev/null +++ b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.less @@ -0,0 +1,20 @@ +.chooseBox { + display: flex; + float : right; +} + +.timeBox { + display: flex; + margin : 0 0 0 10px; +} + +.dateBox { + display: inline-block; + margin : 0 0 0 10px; +} + +:host::ng-deep { + .ant-form-item-control { + max-width: 100%; + } +} \ No newline at end of file diff --git a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts index 7f41c8ca..af76ee24 100644 --- a/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts +++ b/src/app/routes/datatable/components/customtable/mancustomtable/mancustomtable.component.ts @@ -1,45 +1,233 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { STColumn, STComponent } from '@delon/abc/st'; -import { SFSchema } from '@delon/form'; -import { ModalHelper, _HttpClient } from '@delon/theme'; +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 { url = `/user`; + @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; searchSchema: SFSchema = { properties: { - no: { + customerName: { type: 'string', - title: '编号' + 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 } + } } } }; - @ViewChild('st') private readonly st!: STComponent; columns: STColumn[] = [ - { title: '编号', index: 'no' }, - { title: '调用次数', type: 'number', index: 'callNo' }, - { title: '头像', type: 'img', width: '50px', index: 'avatar' }, - { title: '时间', type: 'date', index: 'updatedAt' }, - { - title: '', - buttons: [ - // { text: '查看', click: (item: any) => `/form/${item.id}` }, - // { text: '编辑', type: 'static', component: FormEditComponent, click: 'reload' }, - ] + { 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 }) } }, ]; - - constructor(private http: _HttpClient, private modal: ModalHelper) { } - - ngOnInit(): void { } - - add(): void { - // this.modal - // .createStatic(FormEditComponent, { i: { id: 0 } }) - // .subscribe(() => this.st.reload()); + /** + * 查询参数 + */ + 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 + } + selectChange(e: number) { + // this.resourceStatus = e; + // this.initST(); + setTimeout(() => { + this.st.load(); + }, 500); + } }