diff --git a/src/app/view/admin/admin-routing.module.ts b/src/app/view/admin/admin-routing.module.ts index 3e715e6..dee7c4e 100644 --- a/src/app/view/admin/admin-routing.module.ts +++ b/src/app/view/admin/admin-routing.module.ts @@ -45,6 +45,10 @@ const routes: Routes = [ loadChildren: () => import('./admin-visitor/admin-visitor.module').then(mod => mod.AdminVisitorModule), // canActivate: [AuthGuard] }, + { + path: 'test', + loadChildren: () => import('./test-common-table/test-common-table.module').then(Mod => Mod.TestCommonTableModule) + }, { path: '**', loadChildren: () => import('./admin-dashboard/admin-dashboard.module').then(mod => mod.AdminDashboardModule), diff --git a/src/app/view/admin/components/common-table/common-table.component.html b/src/app/view/admin/components/common-table/common-table.component.html new file mode 100644 index 0000000..9aa373e --- /dev/null +++ b/src/app/view/admin/components/common-table/common-table.component.html @@ -0,0 +1,58 @@ + + + + + + + {{headData.fieldName}} + + + + + + + + + + + + + + + {{ getValue(index, headData.fieldValue) }} + + + + + {{action.name}} + + + + + + + + + + + + + + + + diff --git a/src/app/view/admin/components/common-table/common-table.component.less b/src/app/view/admin/components/common-table/common-table.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/view/admin/components/common-table/common-table.component.ts b/src/app/view/admin/components/common-table/common-table.component.ts new file mode 100644 index 0000000..1ca9836 --- /dev/null +++ b/src/app/view/admin/components/common-table/common-table.component.ts @@ -0,0 +1,92 @@ +import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef} from '@angular/core'; +import {Data} from './data'; +import {PageList, RequestObj} from '../../../../class/HttpReqAndResp'; +import {HttpService} from '../../../../api/http/http.service'; + +@Component({ + selector: 'app-common-table', + templateUrl: './common-table.component.html', + styleUrls: ['./common-table.component.less'] +}) +export class CommonTableComponent implements OnInit, OnChanges { + + constructor(private httpService: HttpService) { + + } + + /** + * 设置readonly data 因为后面有使用eval 为了安全 + */ + @Input() readonly data: Data[]; + @Input() request: RequestObj; + @Input() cardTitle: string; + @Input() template: { + [fieldValue: string]: { + temp: TemplateRef, + param?: { [key: string]: string } + } + }; + @Output() pageInfo = new EventEmitter<{ page: number, pageSize: number }>(); + loading: boolean = true; + + dataList: PageList = new PageList(); + + ngOnInit(): void { + this.getData(); + this.data.forEach(dat => { + if (!dat.action) return; + dat.action.forEach(act => { + if (!act.hover) { + act.hover = () => null; + } + }) + }) + } + + getData = () => { + this.loading = true; + const pageValue = this.dataList.pageNum ? this.dataList.pageNum : 1; + const countValue = this.dataList.pageSize ? this.dataList.pageSize : 10 + this.request.queryParam = { + page: pageValue, + count: countValue + } + this.pageInfo.emit({page: pageValue, pageSize: countValue}) + this.httpService.Service>(this.request).subscribe({ + next: resp => { + this.dataList = resp.result; + this.loading = false; + }, + error: err => this.loading = false + }); + } + + ngOnChanges(changes: SimpleChanges): void { + } + + + getValue(index: number, fieldValue: string) { + let str = `this.dataList.list[${index}].` + fieldValue; + const regexp = /<|>|=|onload|$|{|}|《/ + str = str.replace(regexp, ''); + // tslint:disable-next-line:no-eval + const value = eval(str); + return value !== undefined ? value : '暂无数据'; + } + + getContext = (fieldValue: string, index: number) => { + const valueData = this.getValue(index, fieldValue); + let context: { value: string, originValue?: string }; + if (this.template[fieldValue].param) { + context = { + value: this.template[fieldValue].param[valueData], + originValue: valueData + } + } else { + context = { + value: valueData + } + } + return context; + } +} diff --git a/src/app/view/admin/components/common-table/common-table.module.ts b/src/app/view/admin/components/common-table/common-table.module.ts new file mode 100644 index 0000000..4244f58 --- /dev/null +++ b/src/app/view/admin/components/common-table/common-table.module.ts @@ -0,0 +1,33 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {CommonTableComponent} from './common-table.component'; +import { + NzCardModule, + NzDividerModule, + NzIconModule, NzOutletModule, + NzTableModule, + NzToolTipModule, + NzTypographyModule +} from 'ng-zorro-antd'; + + +@NgModule({ + declarations: [ + CommonTableComponent + ], + exports: [ + CommonTableComponent + ], + imports: [ + CommonModule, + NzTableModule, + NzDividerModule, + NzTypographyModule, + NzToolTipModule, + NzCardModule, + NzIconModule, + NzOutletModule + ] +}) +export class CommonTableModule { +} diff --git a/src/app/view/admin/components/common-table/data.ts b/src/app/view/admin/components/common-table/data.ts new file mode 100644 index 0000000..421f3bb --- /dev/null +++ b/src/app/view/admin/components/common-table/data.ts @@ -0,0 +1,23 @@ +import {TemplateRef} from '@angular/core'; + +export class Data { + fieldName: string; + fieldValue: string; + show: boolean = true; + primaryKey?: boolean = false; + isActionColumns?: boolean = false; + template?: { + template: TemplateRef, + keymap?: { + [value: string]: string + } + }; + action ?: { + name: string, + color?: string, + order?: number, + fontSize?: string, + click: (data: T) => void, + hover?: (data: T) => void | null; + }[] = [] +} diff --git a/src/app/view/admin/test-common-table/test-common-table.component.html b/src/app/view/admin/test-common-table/test-common-table.component.html new file mode 100644 index 0000000..c02b31e --- /dev/null +++ b/src/app/view/admin/test-common-table/test-common-table.component.html @@ -0,0 +1,23 @@ + + + + {{value}} + + + + {{value}} + + + + {{value}} + + + + + diff --git a/src/app/view/admin/test-common-table/test-common-table.component.less b/src/app/view/admin/test-common-table/test-common-table.component.less new file mode 100644 index 0000000..e69de29 diff --git a/src/app/view/admin/test-common-table/test-common-table.component.ts b/src/app/view/admin/test-common-table/test-common-table.component.ts new file mode 100644 index 0000000..035aae1 --- /dev/null +++ b/src/app/view/admin/test-common-table/test-common-table.component.ts @@ -0,0 +1,78 @@ +import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core'; +import {Data} from '../components/common-table/data'; +import {Article} from '../../../class/Article'; +import {RequestObj} from '../../../class/HttpReqAndResp'; + +@Component({ + selector: 'app-test-common-table', + templateUrl: './test-common-table.component.html', + styleUrls: ['./test-common-table.component.less'] +}) +export class TestCommonTableComponent implements OnInit { + + /* + * author: {id: 1, email: "a@celess.cn", displayName: "禾几海",…} +category: "前端" +dislikeCount: 0 +id: 1293 +likeCount: 0 +open: true +original: true +publishDateFormat: "2020-03-17 01:22:35" +readingNumber: 234 +summary: a +tags: [{id: 26, name: "脚本"}, {id: 27, name: "网课"}] +title: "教你动手写一个刷课脚本" +updateDateFormat: "2020-05-27 00:55:05"*/ + // @ViewChild('tag') tagTemp: TemplateRef; + + constructor() { + this.data = [ + {fieldName: '主键', fieldValue: 'id', show: false, primaryKey: true}, + {fieldName: '标题', fieldValue: 'title', show: true}, + {fieldName: '发布日期', fieldValue: 'publishDateFormat', show: true}, + {fieldName: '更新日期', fieldValue: 'updateDateFormat', show: true}, + {fieldName: '文章类型', fieldValue: 'original', show: true}, + {fieldName: '阅读量', fieldValue: 'readingNumber', show: true}, + {fieldName: '分类', fieldValue: 'category', show: true}, + {fieldName: '👎数', fieldValue: 'dislikeCount', show: true}, + {fieldName: '👍数', fieldValue: 'likeCount', show: true}, + {fieldName: '状态', fieldValue: 'open', show: true}, + {fieldName: '简介', fieldValue: 'summary', show: false}, + {fieldName: '作者', fieldValue: 'author.displayName', show: true}, + {fieldName: '标签数', fieldValue: 'tags.length', show: true}, + { + fieldName: '操作', fieldValue: '', show: true, isActionColumns: true, + action: [ + { + name: '新增', + click: (d) => console.log('新增', d) + }, { + name: '删除', + color: '#ff0000', + click: (d) => console.log('删除', d) + }, { + name: '编辑', + color: 'blue', + click: (d) => console.log('编辑', d) + }, + ] + } + ] + } + + data: Data
[]; + req: RequestObj; + + ngOnInit(): void { + this.req = { + path: '/admin/articles', + method: 'GET', + queryParam: { + page: 1, + count: 10 + } + } + } + +} diff --git a/src/app/view/admin/test-common-table/test-common-table.module.ts b/src/app/view/admin/test-common-table/test-common-table.module.ts new file mode 100644 index 0000000..7d9aced --- /dev/null +++ b/src/app/view/admin/test-common-table/test-common-table.module.ts @@ -0,0 +1,22 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {TestCommonTableComponent} from './test-common-table.component'; +import {Router, RouterModule} from '@angular/router'; +import {CommonTableModule} from '../components/common-table/common-table.module'; +import {NzCheckboxModule, NzTagModule} from 'ng-zorro-antd'; +import {FormsModule} from '@angular/forms'; + + +@NgModule({ + declarations: [TestCommonTableComponent], + imports: [ + CommonModule, + RouterModule.forChild([{path: '', component: TestCommonTableComponent}]), + CommonTableModule, + NzTagModule, + NzCheckboxModule, + FormsModule + ] +}) +export class TestCommonTableModule { +}