编写通用组件测试页面
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<app-common-table [data]="data" [request]="req"></app-common-table>
|
||||
@@ -0,0 +1,70 @@
|
||||
import {Component, OnInit} 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"*/
|
||||
constructor() {
|
||||
this.data = [
|
||||
{fieldName: '主键', fieldValue: 'id', show: false},
|
||||
{fieldName: '标题', fieldValue: 'title', 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: '', 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<Article>[];
|
||||
req: RequestObj;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.req = {
|
||||
path: '/admin/articles',
|
||||
method: 'GET',
|
||||
queryParam: {
|
||||
page: 1,
|
||||
count: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
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";
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [TestCommonTableComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
RouterModule.forChild([{path: '', component: TestCommonTableComponent}]),
|
||||
CommonTableModule
|
||||
]
|
||||
})
|
||||
export class TestCommonTableModule {
|
||||
}
|
||||
Reference in New Issue
Block a user