New file |
| | |
| | | import { Component, OnInit, OnDestroy } from '@angular/core'; |
| | | import { NzMessageService } from 'ng-zorro-antd'; |
| | | import { map } from 'rxjs/operators'; |
| | | import { |
| | | SimpleTableChange, |
| | | SimpleTableColumn, |
| | | SimpleTableButton, |
| | | } from '@delon/abc'; |
| | | import { _HttpClient } from '@delon/theme'; |
| | | |
| | | @Component({ |
| | | selector: 'app-simple-table', |
| | | templateUrl: './simple-table.component.html', |
| | | }) |
| | | export class SimpleTableComponent implements OnInit { |
| | | ps = 20; |
| | | total = 200; // mock total |
| | | args: any = { _allow_anonymous: true }; |
| | | url = `https://api.randomuser.me/?results=20`; |
| | | events: any[] = []; |
| | | scroll = { y: '230px' }; |
| | | columns: SimpleTableColumn[] = [ |
| | | { title: 'id', index: 'id.value', type: 'checkbox' }, |
| | | { title: 'Avatar', index: 'picture.thumbnail', type: 'img', width: '80px' }, |
| | | { |
| | | title: 'Name', |
| | | index: 'name.first', |
| | | width: '150px', |
| | | format: (item: any) => `${item.name.first} ${item.name.last}`, |
| | | type: 'link', |
| | | click: (item: any) => this.message.info(`${item.name.first}`), |
| | | }, |
| | | { title: 'Email', index: 'email' }, |
| | | { |
| | | title: 'Gender', |
| | | index: 'gender', |
| | | type: 'yn', |
| | | ynTruth: 'female', |
| | | ynYes: '男', |
| | | ynNo: '女', |
| | | width: '120px', |
| | | }, |
| | | { title: 'Events', render: 'events', width: '90px' }, |
| | | { title: 'Registered', index: 'registered', type: 'date', width: '150px' }, |
| | | { |
| | | title: 'Actions', |
| | | width: '120px', |
| | | buttons: <SimpleTableButton[]>[ |
| | | { |
| | | text: 'Edit', |
| | | click: (item: any) => this.message.info(`edit [${item.id.value}]`), |
| | | if: (item: any) => item.gender === 'female', |
| | | }, |
| | | { |
| | | text: 'Delete', |
| | | type: 'del', |
| | | click: (item: any) => this.message.info(`deleted [${item.id.value}]`), |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | |
| | | constructor(public http: _HttpClient, private message: NzMessageService) {} |
| | | |
| | | ngOnInit(): void { |
| | | this.http |
| | | .get('/chart/visit') |
| | | .subscribe((res: any[]) => (this.events = res.slice(0, 8))); |
| | | } |
| | | |
| | | fullChange(val: boolean) { |
| | | this.scroll = val ? { y: '350px' } : { y: '230px' }; |
| | | } |
| | | } |