panqihua
4 years ago
parent
a66ed99ed8
commit
e83754d8dc
@ -0,0 +1,110 @@ |
||||
<!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中--> |
||||
<div class=""> |
||||
<form [formGroup]="scoreFrom"> |
||||
<!-- 用户名--> |
||||
<div class="input-group mb-3 mx-auto col-4"> |
||||
<div class="input-group-prepend"> |
||||
<span class="input-group-text">{{ prefix('username') | translate }}</span> |
||||
</div> |
||||
<input type="text" class="form-control text-center" [class.is-invalid]="getValue('username').invalid" |
||||
[placeholder]="'tip.input' | translate:{value:prefix('username')|translate}" |
||||
formControlName="username" aria-label="username"/> |
||||
<select class="custom-select" formControlName="like" aria-label="like"> |
||||
<option value="true">{{prefix('search_is_like')|translate}}</option> |
||||
<option value="false">{{prefix('search_is_not_like')|translate}}</option> |
||||
</select> |
||||
<div class="input-group-prepend"> |
||||
<button class="btn btn-outline-secondary" type="button" [disabled]="form().invalid" |
||||
(click)="loadAll(1)">{{'button.search'|translate}}</button> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
|
||||
<app-page [pageData]="users" [currentPage]="currentPage" (voted)="loadAll($event)"></app-page> |
||||
|
||||
<table class="table"> |
||||
<thead> |
||||
<tr> |
||||
<th scope="col" class="text-center">{{prefix('username')|translate}}</th> |
||||
<th scope="col" class="text-center">{{prefix('score')|translate}}</th> |
||||
<th scope="col" class="text-center">{{prefix('action')|translate}}</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<ng-container *ngIf="users"> |
||||
<tr *ngFor="let user of users.list"> |
||||
<td class="text-center">{{user.username}}</td> |
||||
<td class="text-center">{{user.creditScore}}</td> |
||||
<td class="text-center"> |
||||
<div class="text-center"> |
||||
<button class="btn btn-outline-info mr-3" data-toggle="modal" data-target="#exampleModal" |
||||
(click)="editForm.get('username').setValue(user.username);editForm.get('beforeScore').setValue(user.creditScore)">{{prefix('changeScore')|translate}}</button> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
</ng-container> |
||||
</tbody> |
||||
</table> |
||||
|
||||
<app-page [pageData]="users" [currentPage]="currentPage" (voted)="loadAll($event)"></app-page> |
||||
</div> |
||||
|
||||
<!-- Modal --> |
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" |
||||
aria-hidden="true"> |
||||
<div class="modal-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title" id="exampleModalLabel">{{prefix('changeScore')|translate}}</h5> |
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
||||
<span aria-hidden="true">×</span> |
||||
</button> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<form [formGroup]="editForm"> |
||||
<div class="input-group mb-3"> |
||||
<div class="input-group-prepend"> |
||||
<span class="input-group-text">{{ prefix('username') | translate }}</span> |
||||
</div> |
||||
<input type="text" class="form-control" readonly="readonly" formControlName="username"> |
||||
</div> |
||||
|
||||
<div class="input-group mb-3"> |
||||
<span class="input-group-text">{{ prefix('targetScore') | translate }}</span> |
||||
<input type="number" class="form-control" |
||||
[placeholder]="'tip.input' | translate:{value:prefix('changeScore')|translate}" |
||||
formControlName="score" |
||||
[class.is-invalid]="editForm.get('score').invalid"> |
||||
<span class="input-group-text text-danger bg-transparent">{{ prefix('tip') | translate }}</span> |
||||
|
||||
<div class="invalid-feedback font-weight-bold text-center"> |
||||
{{'tip.notnull' | translate:{value: prefix('changeScore')|translate} }} |
||||
</div> |
||||
</div> |
||||
|
||||
<span>{{prefix('score_tip')|translate:{ |
||||
beforeScore: editForm.get('beforeScore').value, |
||||
afterScore: editForm.get('beforeScore').value + editForm.get('score').value |
||||
} }}</span> |
||||
|
||||
<div class="input-group mb-3"> |
||||
<span class="input-group-text">{{ prefix('notes') | translate }}</span> |
||||
<input type="text" class="form-control" |
||||
[placeholder]="'tip.input' | translate:{value:prefix('notes')|translate}" formControlName="notes" |
||||
[class.is-invalid]="editForm.get('notes').invalid"> |
||||
|
||||
<div class="invalid-feedback font-weight-bold text-center"> |
||||
{{'tip.notnull' | translate:{value: prefix('notes')|translate} }} |
||||
</div> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
<div class="modal-footer mx-auto"> |
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal" |
||||
(click)="editForm.reset()">{{'button.back'|translate}}</button> |
||||
<button type="button" class="btn btn-primary" data-dismiss="modal" |
||||
(click)="editScore()">{{'button.submit'|translate}}</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,25 @@ |
||||
import {async, ComponentFixture, TestBed} from '@angular/core/testing'; |
||||
|
||||
import {ScoreComponent} from './score.component'; |
||||
|
||||
describe('ScoreComponent', () => { |
||||
let component: ScoreComponent; |
||||
let fixture: ComponentFixture<ScoreComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [ScoreComponent] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ScoreComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,86 @@ |
||||
import {Component, OnInit} from '@angular/core'; |
||||
import {Commons} from '../../commons'; |
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms'; |
||||
import {ScoreService} from './score.service'; |
||||
import {MessageInterface, MessageUtil} from '../../message/message.service'; |
||||
import {Page} from '../../interface/Page'; |
||||
import {Info} from '../../interface/Info'; |
||||
|
||||
@Component({ |
||||
selector: 'app-score', |
||||
templateUrl: './score.component.html', |
||||
styleUrls: ['./score.component.scss'] |
||||
}) |
||||
export class ScoreComponent extends Commons implements OnInit, MessageInterface { |
||||
|
||||
scoreFrom = this.fb.group({ |
||||
// 用户名
|
||||
username: this.fb.control('', [Validators.required]), |
||||
// 是否模糊查询
|
||||
like: this.fb.control(true, [Validators.required]), |
||||
}); |
||||
|
||||
editForm = this.fb.group({ |
||||
// 用户名
|
||||
username: this.fb.control('', [Validators.required]), |
||||
// 修改分数
|
||||
score: this.fb.control('', [Validators.required]), |
||||
// 用户分数
|
||||
beforeScore: this.fb.control('', [Validators.required]), |
||||
// 备注信息
|
||||
notes: this.fb.control('', [Validators.required]), |
||||
}); |
||||
|
||||
currentPage = 1; |
||||
|
||||
constructor( |
||||
private fb: FormBuilder, |
||||
private scoreService: ScoreService, |
||||
private messageUtil: MessageUtil |
||||
) { |
||||
super(); |
||||
} |
||||
|
||||
// 用户信息
|
||||
users: Page<Info>; |
||||
|
||||
// 加载用户信息
|
||||
loadAll($currentPage) { |
||||
this.currentPage = $currentPage; |
||||
this.scoreService.loadAll(Object.assign(this.scoreFrom.value, {currentPage: $currentPage})) |
||||
.subscribe(res => { |
||||
// this.messageUtil.alert(this.prefix(res.message));
|
||||
this.users = res.myInfos; |
||||
}); |
||||
} |
||||
|
||||
// 修改信用分
|
||||
editScore() { |
||||
this.scoreService.editScore(this.editForm.value).subscribe( |
||||
res => { |
||||
this.editForm.reset(); |
||||
this.messageUtil.alert(this.prefix(res.message)); |
||||
this.loadAll(1); |
||||
} |
||||
); |
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
this.loadAll(this.currentPage); |
||||
} |
||||
|
||||
prefix(key: string): string { |
||||
return 'score.' + key; |
||||
} |
||||
|
||||
changePage() { |
||||
if (this.currentPage > this.users.totalPage) { |
||||
this.currentPage = this.users.currentPage; |
||||
} |
||||
} |
||||
|
||||
form(): FormGroup { |
||||
return this.scoreFrom; |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import {TestBed} from '@angular/core/testing'; |
||||
|
||||
import {ScoreService} from './score.service'; |
||||
|
||||
describe('ScoreService', () => { |
||||
let service: ScoreService; |
||||
|
||||
beforeEach(() => { |
||||
TestBed.configureTestingModule({}); |
||||
service = TestBed.inject(ScoreService); |
||||
}); |
||||
|
||||
it('should be created', () => { |
||||
expect(service).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,36 @@ |
||||
import {Injectable} from '@angular/core'; |
||||
import {JSONRequest} from '../../interface/JSONRequest'; |
||||
import {Observable} from 'rxjs'; |
||||
import {UserResponse} from '../../interface/Response'; |
||||
import {HttpClient} from '@angular/common/http'; |
||||
import {HttpInterface} from '../../interface/HttpInterface'; |
||||
import {catchError} from 'rxjs/operators'; |
||||
|
||||
/** |
||||
* 信用分管理服务 |
||||
*/ |
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class ScoreService extends JSONRequest { |
||||
|
||||
constructor(private http: HttpClient) { |
||||
super(); |
||||
} |
||||
|
||||
// 加载所有用户
|
||||
loadAll(body): Observable<UserResponse> { |
||||
return this.http.get(HttpInterface.user, Object.assign(this.httpOptions, { |
||||
params: body |
||||
})).pipe( |
||||
catchError(this.handleError<any>('加载访客信息')) |
||||
); |
||||
} |
||||
|
||||
// 修改信用分
|
||||
editScore(body): Observable<UserResponse> { |
||||
return this.http.post(HttpInterface.score, body, this.httpOptions).pipe( |
||||
catchError(this.handleError<any>('修改信用分')) |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center" *ngIf="pageData"> |
||||
<ul class="pagination mt-3"> |
||||
<li class="page-item" [class.disabled]="pageData.currentPage==1"> |
||||
<button class="page-link" (click)="loadAll(1)">{{'button.first_page'|translate}}</button> |
||||
</li> |
||||
<li class="page-item" [class.disabled]="pageData.currentPage==1"> |
||||
<button class="page-link" (click)="loadAll(pageData.currentPage-1)">{{'button.prev_page'|translate}}</button> |
||||
</li> |
||||
<li class="page-item disabled"><a class="page-link" href="#">{{pageData.currentPage}}</a></li> |
||||
<li class="page-item" [class.disabled]="pageData.currentPage==pageData.totalPage"> |
||||
<button class="page-link" (click)="loadAll(pageData.currentPage+1)">{{'button.next_page'|translate}}</button> |
||||
</li> |
||||
<li class="page-item" [class.disabled]="pageData.currentPage==pageData.totalPage"> |
||||
<button class="page-link" (click)="loadAll(pageData.totalPage)">{{'button.last_page'|translate}}</button> |
||||
</li> |
||||
</ul> |
||||
<span class="navbar-text ml-3"> |
||||
{{'button.total_page'|translate:{totalPage: pageData.totalPage, count: pageData.count} }} |
||||
</span> |
||||
<div class="collapse navbar-collapse col-2"> |
||||
<input class="form-control" type="number" [attr.aria-label]="'button.jump'|translate" [(ngModel)]="currentPage" |
||||
(keyup)="changePage()"/> |
||||
<button class="btn btn-outline-success w-50" (click)="loadAll(currentPage)">{{'button.jump'|translate}}</button> |
||||
</div> |
||||
</nav> |
||||
@ -0,0 +1,25 @@ |
||||
import {async, ComponentFixture, TestBed} from '@angular/core/testing'; |
||||
|
||||
import {PageComponent} from './page.component'; |
||||
|
||||
describe('PageComponent', () => { |
||||
let component: PageComponent; |
||||
let fixture: ComponentFixture<PageComponent>; |
||||
|
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
declarations: [PageComponent] |
||||
}) |
||||
.compileComponents(); |
||||
})); |
||||
|
||||
beforeEach(() => { |
||||
fixture = TestBed.createComponent(PageComponent); |
||||
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
||||
}); |
||||
|
||||
it('should create', () => { |
||||
expect(component).toBeTruthy(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,38 @@ |
||||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; |
||||
import {Page} from '../interface/Page'; |
||||
|
||||
@Component({ |
||||
selector: 'app-page', |
||||
templateUrl: './page.component.html', |
||||
styleUrls: ['./page.component.scss'] |
||||
}) |
||||
export class PageComponent implements OnInit { |
||||
|
||||
// 数据源
|
||||
@Input() |
||||
pageData: Page<any>; |
||||
|
||||
// 触发翻页事件
|
||||
@Output() |
||||
voted = new EventEmitter<number>(); |
||||
|
||||
// 记录数
|
||||
@Input() |
||||
currentPage: number; |
||||
|
||||
constructor() { |
||||
} |
||||
|
||||
ngOnInit(): void { |
||||
} |
||||
|
||||
loadAll(page: number) { |
||||
this.voted.emit(page); |
||||
} |
||||
|
||||
changePage() { |
||||
if (this.currentPage > this.pageData.totalPage) { |
||||
this.currentPage = this.pageData.currentPage; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import {NgModule} from '@angular/core'; |
||||
import {CommonModule} from '@angular/common'; |
||||
import {PageComponent} from '../page.component'; |
||||
import {FormsModule} from '@angular/forms'; |
||||
import {TranslateModule} from '@ngx-translate/core'; |
||||
|
||||
|
||||
@NgModule({ |
||||
declarations: [PageComponent], |
||||
imports: [ |
||||
CommonModule, |
||||
TranslateModule, |
||||
FormsModule, |
||||
], |
||||
exports: [ |
||||
PageComponent |
||||
] |
||||
}) |
||||
export class PageModule { |
||||
} |
||||
Loading…
Reference in new issue