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