Skip to content

Commit ff6cce9

Browse files
weihomechenweihomechen
committed
人员模块完善
1 parent 7ecbd55 commit ff6cce9

17 files changed

+1267
-30
lines changed

‎.angular-cli.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@
2121
"styles.css"
2222
],
2323
"scripts": [
24-
"../node_modules/jquery/dist/jquery.min.js"
24+
"../node_modules/jquery/dist/jquery.min.js",
25+
"./assets/global/plugins/sweet-alert/sweetalert.min.js",
26+
"./assets/global/scripts/sweetalert.js"
2527
],
2628
"environmentSource": "environments/environment.ts",
2729
"environments": {

‎src/app/base-data/person-add/person-add.component.html‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<div class="portlet">
1+
<div class="display-form">
22
<div class="display-form-header">
3-
<i class="fa fa-plus-square"></i> 新增人员
3+
<div class="from-title">
4+
<i class="fa fa-plus-square"></i> 新增人员
5+
</div>
46
</div>
57
<form [formGroup]="form" class="display-form-body">
68
<div class="form-inline-item">
@@ -25,11 +27,26 @@
2527
<mdl-radio value="女" formControlName="sex" mdl-ripple>女</mdl-radio>
2628
</div>
2729

30+
<div class="form-inline-input">
31+
<mdl-textfield label="凑数目的" type="text" formControlName="date" floating-label></mdl-textfield>
32+
</div>
33+
<div class="form-inline-item">
34+
<mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
35+
</div>
36+
<div class="form-inline-item">
37+
<mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
38+
</div>
39+
<div class="form-inline-item">
40+
<mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
41+
</div>
42+
<div class="form-inline-item">
43+
<mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
44+
</div>
45+
2846

2947
</form>
3048
<div class="diaplay-from-footer">
3149
<button mdl-button (click)="cancel()" mdl-button-type="raised" mdl-ripple class="btn-cancel">取消</button>
3250
<button mdl-button (click)="onSubmit()" [disabled]="!form.valid" mdl-button-type="raised" mdl-ripple class="btn-submit">确认</button>
3351
</div>
34-
3552
</div>

‎src/app/base-data/person-add/person-add.component.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { Component, OnInit } from '@angular/core';
22
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
3+
import { Router } from '@angular/router';
34

45
import { MdlModule } from '@angular-mdl/core';
6+
import { PersonManageService } from '../person-manage.service';
7+
import { TabControlService } from '../../layout/header/tab/tabControl.service';
58

69
declare var $: any;
10+
declare var SweetAlert: any;
711

812
@Component({
913
selector: 'app-person-add',
@@ -21,7 +25,11 @@ export class PersonAddComponent implements OnInit {
2125
public role = new FormControl('', Validators.required);
2226
public position = new FormControl('');
2327

24-
constructor(private fb: FormBuilder) {
28+
constructor(private fb: FormBuilder,
29+
private route: Router,
30+
private TabControlService: TabControlService,
31+
private personManageService: PersonManageService
32+
) {
2533
this.form = fb.group({
2634
'name': this.name,
2735
'team': this.team,
@@ -36,8 +44,15 @@ export class PersonAddComponent implements OnInit {
3644
$('.portlet').css('height', window.innerHeight - 120 + 'px');
3745
}
3846

47+
3948
public onSubmit() {
4049
console.log(this.form);
50+
this.personManageService.addPerson(this.form).then(() => SweetAlert.alert('新增人员成功'))
51+
}
52+
53+
cancel() {
54+
this.route.navigateByUrl('/base-data/person-list');
55+
this.TabControlService.closeTab({ name: '新增人员', link: '/base-data/person-add' });
4156
}
4257

4358
public onDisableForm(formDisabled: boolean) {

‎src/app/base-data/person-list/person-list.component.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@
33
<div class="table-toolbar">
44
<div class="toolbar-btns">
55
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-add" (click)="addPerson();"><i class="fa fa-plus"></i></button>
6-
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-info"><i class="fa fa-info"></i></button>
7-
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-edit"><i class="fa fa-edit"></i></button>
8-
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-del"><i class="fa fa-minus"></i></button>
6+
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-info" (click)="checkPerson();"><i class="fa fa-info"></i></button>
7+
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-edit" (click)="editPerson();"><i class="fa fa-edit"></i></button>
8+
<button mdl-button mdl-button-type="raised" mdl-ripple class="btn-del" (click)="delPerson();"><i class="fa fa-minus"></i></button>
99
</div>
1010

1111
<div class="toolbar-search">
12-
<mdl-textfield type="text" label="姓名" [(ngModel)]="text1" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)" (keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
13-
<mdl-textfield type="text" label="姓名" [(ngModel)]="text2" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)" (keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
14-
<mdl-textfield type="text" label="姓名" [(ngModel)]="text3" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)" (keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
12+
<mdl-textfield type="text" label="姓名" [(ngModel)]="searchObj.name" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)"
13+
(keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
14+
<mdl-textfield type="text" label="队伍" [(ngModel)]="searchObj.team" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)"
15+
(keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
16+
<mdl-textfield type="text" label="账号" [(ngModel)]="searchObj.account" autocomplete="name" (blur)="onInputBlur($event)" (focus)="onInputFocus($event)"
17+
(keyup)="onInputKeyup($event)" floating-label></mdl-textfield>
1518
<button mdl-button mdl-button-type="fab" (click)="search()" class="btn-search">
1619
<i class="fa fa-search"></i>
1720
</button>
@@ -23,7 +26,8 @@
2326
</div>
2427
<div class="portlet-body display-list-body">
2528
<div class="table-container">
26-
<mdl-table-selectable mdl-shadow="2" id='person_manage_table' [table-model]="tableModel" [table-model-selected]="selected" (table-model-selectionChanged)="selectionChanged($event)">
29+
<mdl-table-selectable mdl-shadow="2" id='person_manage_table' [table-model]="tableModel" [table-model-selected]="selected"
30+
(table-model-selectionChanged)="selectionChanged($event)">
2731
</mdl-table-selectable>
2832
<div class="table-footer">
2933
<span>共</span><span class="total-size">8</span><span>条</span>

‎src/app/base-data/person-list/person-list.component.ts‎

Lines changed: 69 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,123 @@
1-
import { Component, OnInit, AfterViewInit } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22
import { Http, Response } from '@angular/http';
33
import { Router } from '@angular/router';
4+
import { FormsModule } from '@angular/forms';
45

56
import { MdlDefaultTableModel, IMdlTableModelItem } from '@angular-mdl/core';
67
import { ITablePersonItem } from '../model/table-person-item';
78
import { TabControlService } from '../../layout/header/tab/tabControl.service';
89
import { PersonManageService } from '../person-manage.service';
910
import 'rxjs/add/operator/toPromise';
1011

11-
declare var $: any;
12+
declare var SweetAlert: any;
1213

1314
@Component({
1415
selector: 'app-person-list',
1516
templateUrl: './person-list.component.html',
1617
styleUrls: ['./person-list.component.css']
1718
})
18-
export class PersonListComponent implements OnInit, AfterViewInit {
19+
export class PersonListComponent implements OnInit {
1920

20-
text1: string;
21-
text2: string;
22-
text3: string;
2321
tableData;
22+
selected;
2423
tableModel = new MdlDefaultTableModel([
25-
{ key: 'id', name: 'id', sortable: true },
2624
{ key: 'name', name: 'name', sortable: true, numeric: true },
2725
{ key: 'sex', name: 'sex', numeric: true },
2826
{ key: 'team', name: 'team', sortable: true },
2927
{ key: 'account', name: 'account', sortable: true, numeric: true },
3028
{ key: 'role', name: 'role', numeric: true },
3129
{ key: 'position', name: 'position', sortable: true, numeric: true }
3230
]);
31+
searchObj = {
32+
name: '',
33+
team: '',
34+
account: ''
35+
};
36+
3337
constructor(private http: Http,
3438
private tabControlService: TabControlService,
3539
private personManageService: PersonManageService,
3640
private router: Router) {
3741
}
3842

3943
ngOnInit() {
40-
this.personManageService.getPersons().then(personArr => {
44+
this.initTable();
45+
}
46+
47+
initTable(searchObj?) {
48+
this.personManageService.getPersons(searchObj).then(personArr => {
4149
this.tableData = personArr;
50+
this.tableModel.data.length = 0;
4251
this.tableModel.addAll(this.tableData);
4352
}
4453
);
4554
}
4655

47-
ngAfterViewInit() {
48-
const tableNode = $('#person_manage_table');
49-
const trNode = $('tr', tableNode);
50-
$('tr td:th-child(2)', tableNode).css('display', 'none');
56+
selectionChanged($event) {
57+
this.selected = $event.value;
5158
}
5259

60+
// 添加人员
5361
addPerson() {
5462
this.tabControlService.newTab({ 'name': '添加人员', 'link': '/base-data/person-add' });
5563
this.router.navigateByUrl('base-data/person-add');
5664
}
5765

58-
onInputBlur(event) {
66+
// 查看人员
67+
checkPerson() {
68+
if (!this.selected || this.selected.length !== 1) {
69+
SweetAlert.notice('请选择一个人员进行查看', '查看人员');
70+
return;
71+
}
72+
}
73+
74+
// 修改人员
75+
editPerson() {
76+
if (!this.selected || this.selected.length !== 1) {
77+
SweetAlert.notice('请选择一个人员进行修改', '修改人员');
78+
return;
79+
}
80+
}
81+
82+
// 删除人员
83+
delPerson() {
84+
if (!this.selected || this.selected.length === 0) {
85+
SweetAlert.notice('请选择人员进行删除', '删除人员');
86+
return;
87+
} else {
88+
SweetAlert.confirm('确定删除这' + this.selected.length + '个人员？', '删除人员', function () {
5989

90+
});
91+
}
92+
}
93+
94+
// 搜索
95+
search() {
96+
if (!this.searchObj.name && !this.searchObj.team && !this.searchObj.account) {
97+
SweetAlert.notice('请至少输入一个搜索条件', '搜索人员');
98+
return;
99+
} else {
100+
// console.log('searchObj:' + JSON.stringify(this.searchObj));
101+
this.initTable(this.searchObj);
102+
}
103+
}
104+
105+
// 重置
106+
reset() {
107+
this.searchObj = {
108+
name: '',
109+
team: '',
110+
account: ''
111+
};
112+
this.initTable();
113+
}
114+
115+
onInputBlur(event) {
60116
}
61117

62118
onInputFocus(event) {
63119
}
64120

65121
onInputKeyup(event) { }
66122

67-
68123
}

‎src/app/base-data/person-manage.service.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,19 @@ export class PersonManageService {
99
private personUrl = 'assets/mock-data/person.json';
1010
constructor(private http: Http) { }
1111

12-
getPersons(): Promise<ITablePersonItem[]> {
12+
// 获取人员，可带搜索条件
13+
getPersons(searchObj?): Promise<ITablePersonItem[]> {
1314
return this.http
1415
.get(this.personUrl)
1516
.toPromise()
1617
.then(response => response.json() as ITablePersonItem[])
1718
.catch(this.handleError);
1819
}
1920

21+
addPerson(personObj){
22+
23+
}
24+
2025
private handleError(error: any): Promise<any> {
2126
console.error('An error occurred', error);
2227
return Promise.reject(error.message || error);

‎src/assets/global/plugins/bootstrap/css/bootstrap.min.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/global/plugins/bootstrap/fonts/bootstrap/glyphicons-halflings-regular.eot‎

19.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)