2 |
76 |
--------------------------------------------------------------------------------
/src/app/data-table/add.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {ActivatedRoute} from '@angular/router';
3 | import {pageAnimation} from '../common/public-data';
4 | import {DataTableService} from './data-table.service';
5 |
6 |
7 | @Component({
8 | templateUrl: './add.html',
9 | styleUrls: ['./data-table.component.css'],
10 | animations: [
11 | pageAnimation
12 | ]
13 | })
14 | export class DataTableAdd implements OnInit {
15 | constructor(private myService: DataTableService, private route: ActivatedRoute) {
16 |
17 | console.log(route);
18 |
19 | }
20 |
21 | ngOnInit() {
22 | this.params = this.route.params;
23 | console.log(this.params.value.id);
24 | }
25 |
26 | params: any;
27 | text: string;
28 | nameModel: string;
29 | shopManagerModel: any;
30 | phoneModel: any;
31 | detailedAddressModel: any;
32 |
33 | add() {
34 |
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/data-table/data-table.component.css:
--------------------------------------------------------------------------------
1 | label{
2 | line-height: 29px;
3 | }
4 | .ui-g-2{
5 | text-align: right;
6 | padding-right: 15px;
7 | }
8 |
--------------------------------------------------------------------------------
/src/app/data-table/data-table.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule} from "@angular/router";
4 | import {
5 | PanelMenuModule,
6 | TabMenuModule, //tabMenu
7 | AutoCompleteModule,
8 | ButtonModule, //Button
9 | PanelModule, //容器
10 | InputTextModule,
11 | DataTableModule, //表格
12 | DialogModule, //浮层
13 | SplitButtonModule,
14 | TabViewModule, //table
15 | AccordionModule,//手风琴
16 | SharedModule,
17 | CalendarModule,
18 | GrowlModule,//弹出框
19 | MultiSelectModule,//多选
20 | ListboxModule,//多选框
21 | DropdownModule,//下拉
22 | CheckboxModule,//多选
23 | MessagesModule,//Messages
24 | PaginatorModule,//分页
25 | ConfirmDialogModule,//删除弹出框
26 | InputTextareaModule,// InputTextarea
27 | OverlayPanelModule,
28 | TooltipModule, EditorModule,
29 | } from 'primeng/primeng';
30 | import {FormsModule, ReactiveFormsModule} from "@angular/forms";
31 | import {HttpModule, JsonpModule} from "@angular/http";
32 | import {MyBreadcrumbModule} from "../components/my-breadcrumb/my-breadcrumb";
33 | import {DataTableComponent} from "./data-table.component";
34 | import {Details} from './details';
35 | import {DataTableAdd} from './add';
36 |
37 |
38 |
39 | @NgModule({
40 | imports: [
41 | FormsModule,
42 | ReactiveFormsModule,
43 |
44 | CommonModule,
45 |
46 | ButtonModule,
47 | PanelModule,
48 | InputTextModule,
49 | DataTableModule,
50 | DialogModule,
51 | SharedModule,
52 | CalendarModule,
53 | GrowlModule,
54 | MultiSelectModule,
55 | DropdownModule,
56 | CheckboxModule,
57 | PaginatorModule,
58 | TooltipModule,
59 | OverlayPanelModule,
60 | InputTextareaModule,
61 | MyBreadcrumbModule,
62 | EditorModule,
63 |
64 | RouterModule.forChild([
65 | { path:'',component:DataTableComponent},
66 | { path: 'details/:id', component:Details },
67 | { path: 'add', component:DataTableAdd },
68 | ])
69 | ],
70 | declarations: [DataTableComponent,Details,DataTableAdd],
71 | exports:[RouterModule]
72 | })
73 | export class MyDataTableModule { }
74 |
--------------------------------------------------------------------------------
/src/app/data-table/data-table.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | import {Response} from '@angular/http';
3 | import 'rxjs/add/operator/toPromise';
4 | import {Ajax} from '../common/ajax';
5 | import {HttpClient} from '@angular/common/http';
6 |
7 |
8 | @Injectable()
9 | export class DataTableService {
10 |
11 | constructor(public ajax: Ajax, public http: HttpClient) {
12 | }
13 |
14 | private extractJson(res: Response | any) {
15 | let body = res;
16 | return body || {};
17 | }
18 |
19 | //数据获取
20 | private getUrl = 'assets/data.json';
21 |
22 | get(params): Promise
2 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
28 |
37 |
46 |
47 |
48 |
49 | {{text}}
50 |
51 |
--------------------------------------------------------------------------------
/src/app/data-table/details.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {Car, Message, SelectItem} from '../common/car';
3 | import {beforeUrl, pageAnimation, China} from '../common/public-data';
4 | import {DataTableService} from './data-table.service';
5 | import {ActivatedRoute} from '@angular/router';
6 |
7 | @Component({
8 | templateUrl: './details.html',
9 | animations: [
10 | pageAnimation
11 | ]
12 | })
13 | export class Details implements OnInit {
14 | constructor(private myService: DataTableService, private route: ActivatedRoute) {
15 |
16 | console.log(route);
17 |
18 | }
19 |
20 | ngOnInit() {
21 | this.params = this.route.params;
22 | console.log(this.params.value.id);
23 | }
24 |
25 | params: any;
26 | text:string
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/directives/click-outside/click-outside.directive.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Directive,
3 | ElementRef,
4 | EventEmitter,
5 | Input,
6 | OnChanges,
7 | OnDestroy,
8 | OnInit,
9 | Output,
10 | SimpleChanges
11 | } from '@angular/core';
12 | import {NgModule} from '@angular/core';
13 |
14 | @Directive({selector: '[clickOutside]'})
15 | export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
16 | private static _isBrowser: boolean;
17 |
18 | @Input() attachOutsideOnClick: boolean = false;
19 | @Input() delayClickOutsideInit: boolean = false;
20 | @Input() exclude: string = '';
21 | @Input() excludeBeforeClick: boolean = false;
22 | @Input() clickOutsideEvents: string = '';
23 |
24 | @Output() clickOutside: EventEmitter5 | 这里取到路由过来的参数(id) {{params.value.id}} 然后你懂得 6 |
7 |
4 |
91 |
92 |
--------------------------------------------------------------------------------
/src/app/form-primeng/form-primeng.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {Car, Message, SelectItem} from "../common/car";
3 | import {beforeUrl,pageAnimation} from "../common/public-data";
4 | import {Validators,FormControl,FormGroup,FormBuilder} from '@angular/forms';
5 | @Component({
6 | selector: 'app-form-primeng',
7 | templateUrl: './form-primeng.component.html',
8 | styleUrls: ['./form-primeng.component.css'],
9 | animations: [
10 | pageAnimation
11 | ]
12 | })
13 | export class FormPrimengComponent implements OnInit {
14 |
15 | constructor(private fb: FormBuilder) {}
16 | ngOnInit() {
17 | this.msgs.push({severity:'info', summary:'Info Message', detail:'PrimeNG rocks'});
18 | this.userform = this.fb.group({
19 | 'firstname': new FormControl('', Validators.required),
20 | 'lastname': new FormControl('', Validators.required),
21 | 'password': new FormControl('', Validators.compose([Validators.required, Validators.minLength(6)])),
22 | 'description': new FormControl(''),
23 | 'gender': new FormControl('', Validators.required)
24 | });
25 |
26 | this.genders = [];
27 | this.genders.push({label:'Select Gender', value:''});
28 | this.genders.push({label:'Male', value:'Male'});
29 | this.genders.push({label:'Female', value:'Female'});
30 | }
31 |
32 | msgs: Message[] = [];
33 | userform: FormGroup;
34 | submitted: boolean;
35 | genders: SelectItem[];
36 | description: string;
37 |
38 | onSubmit(value: string) {
39 | this.submitted = true;
40 | this.msgs = [];
41 | this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
42 | }
43 |
44 | get diagnostic() { return JSON.stringify(this.userform.value); }
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/src/app/form-primeng/form-primeng.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule} from "@angular/router";
4 | import {
5 | PanelMenuModule,
6 | TabMenuModule, //tabMenu
7 | AutoCompleteModule,
8 | ButtonModule, //Button
9 | PanelModule, //容器
10 | InputTextModule,
11 | DataTableModule, //表格
12 | DialogModule, //浮层
13 | SplitButtonModule,
14 | TabViewModule, //table
15 | AccordionModule,//手风琴
16 | SharedModule,
17 | CalendarModule,
18 | GrowlModule,//弹出框
19 | MultiSelectModule,//多选
20 | ListboxModule,//多选框
21 | DropdownModule,//下拉
22 | CheckboxModule,//多选
23 | MessagesModule,//Messages
24 | PaginatorModule,//分页
25 | ConfirmDialogModule,//删除弹出框
26 | InputTextareaModule,// InputTextarea
27 | OverlayPanelModule,
28 | TooltipModule,
29 | } from 'primeng/primeng';
30 | import {FormsModule, ReactiveFormsModule} from "@angular/forms";
31 | import {HttpModule, JsonpModule} from "@angular/http";
32 | import {MyBreadcrumbModule} from "../components/my-breadcrumb/my-breadcrumb";
33 | import {FormPrimengComponent} from "./form-primeng.component";
34 |
35 |
36 |
37 | @NgModule({
38 | imports: [
39 | FormsModule,
40 | ReactiveFormsModule,
41 | CommonModule,
42 | ReactiveFormsModule,
43 |
44 | ButtonModule,
45 | PanelModule,
46 | InputTextModule,
47 | DataTableModule,
48 | DialogModule,
49 | SharedModule,
50 | CalendarModule,
51 | GrowlModule,
52 | MultiSelectModule,
53 | DropdownModule,
54 | CheckboxModule,
55 | PaginatorModule,
56 | TooltipModule,
57 | OverlayPanelModule,
58 | InputTextareaModule,
59 | MyBreadcrumbModule,
60 |
61 |
62 | RouterModule.forChild([
63 | { path:'',component:FormPrimengComponent}
64 | ])
65 | ],
66 | declarations: [FormPrimengComponent],
67 | exports:[RouterModule]
68 | })
69 | export class FormPrimengModule { }
70 |
--------------------------------------------------------------------------------
/src/app/icon/icon.component.css:
--------------------------------------------------------------------------------
1 | .iocn-box{
2 | background-color: #C0CCDA;
3 | border-radius: 5px;
4 | width: 150px;
5 | height: 80px;
6 | margin: 10px;
7 | float: left;
8 | font-size: 30px;
9 | text-align: center;
10 | line-height: 40px;
11 | }
12 | .iocn-box p{
13 | font-size: 14px;
14 | }
15 | .iconall-box{
16 | float: left;
17 | padding: 3px 0;
18 | width: 190px ;
19 |
20 | }
21 | h2{
22 | width: 100%;
23 | padding: 20px 5px;
24 | overflow: hidden;
25 | }
26 |
27 |
--------------------------------------------------------------------------------
/src/app/icon/icon.component.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
93 |
94 |
--------------------------------------------------------------------------------
/src/app/icon/icon.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { IconComponent } from './icon.component';
4 |
5 | describe('IconComponent', () => {
6 | let component: IconComponent;
7 | let fixture: ComponentFixture41 New Icons in 4.7
13 |
14 |
20 |
21 |
15 |
16 | {{item1}}
17 |
18 |
19 | Web Application Icons
22 |
23 |
29 |
30 |
24 |
25 | {{item1}}
26 |
27 |
28 | Accessibility Icons
31 |
32 |
38 |
39 |
33 |
34 | {{item1}}
35 |
36 |
37 | Hand Icons
40 |
41 |
47 |
48 |
42 |
43 | {{item1}}
44 |
45 |
46 | Transportation Icons
49 |
50 |
56 |
57 |
51 |
52 | {{item1}}
53 |
54 |
55 | Gender Icons
58 |
59 |
65 |
66 |
60 |
61 | {{item1}}
62 |
63 |
64 | File Type Icons
67 |
68 |
74 |
75 |
69 |
70 | {{item1}}
71 |
72 |
73 | Spinner Icons
76 |
77 |
83 |
84 |
78 |
79 | {{item1}}
80 |
81 |
82 | Form Control Icons
85 |
86 |
92 |
87 |
88 | {{item1}}
89 |
90 |
91 |
4 |
7 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/app/input/input.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {trigger, state, style, animate, transition} from '@angular/animations';
3 | import {Car, Message, SelectItem} from '../common/car';
4 | import {beforeUrl,pageAnimation,China} from "../common/public-data";
5 |
6 | @Component({
7 | selector: 'app-input',
8 | templateUrl: './input.component.html',
9 | styleUrls: ['./input.component.css'],
10 | animations: [
11 | pageAnimation
12 | ]
13 | })
14 | export class InputComponent implements OnInit {
15 |
16 |
17 |
18 | constructor() {
19 | }
20 |
21 | ngOnInit() {
22 | this.China = China;
23 | }
24 |
25 | China: any;
26 | msgs: Message[] = []; //消息
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/input/input.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule} from "@angular/router";
4 | import {
5 | PanelMenuModule,
6 | TabMenuModule, //tabMenu
7 | AutoCompleteModule,
8 | ButtonModule, //Button
9 | PanelModule, //容器
10 | InputTextModule,
11 | DataTableModule, //表格
12 | DialogModule, //浮层
13 | SplitButtonModule,
14 | TabViewModule, //table
15 | AccordionModule,//手风琴
16 | SharedModule,
17 | CalendarModule,
18 | GrowlModule,//弹出框
19 | MultiSelectModule,//多选
20 | ListboxModule,//多选框
21 | DropdownModule,//下拉
22 | CheckboxModule,//多选
23 | MessagesModule,//Messages
24 | PaginatorModule,//分页
25 | ConfirmDialogModule,//删除弹出框
26 | InputTextareaModule,// InputTextarea
27 | OverlayPanelModule,
28 | TooltipModule,
29 | } from 'primeng/primeng';
30 | import {FormsModule, ReactiveFormsModule} from "@angular/forms";
31 | import {HttpModule, JsonpModule} from "@angular/http";
32 | import {MyBreadcrumbModule} from "../components/my-breadcrumb/my-breadcrumb";
33 | import {InputComponent} from "./input.component";
34 |
35 |
36 |
37 |
38 | @NgModule({
39 | imports: [
40 | FormsModule,
41 | ReactiveFormsModule,
42 | CommonModule,
43 | ReactiveFormsModule,
44 |
45 | ButtonModule,
46 | PanelModule,
47 | InputTextModule,
48 | DataTableModule,
49 | DialogModule,
50 | SharedModule,
51 | CalendarModule,
52 | GrowlModule,
53 | MultiSelectModule,
54 | DropdownModule,
55 | CheckboxModule,
56 | PaginatorModule,
57 | TooltipModule,
58 | OverlayPanelModule,
59 |
60 | MyBreadcrumbModule,
61 |
62 |
63 | RouterModule.forChild([
64 | { path:'',component:InputComponent}
65 | ])
66 | ],
67 | declarations: [InputComponent],
68 | exports:[RouterModule]
69 | })
70 | export class InputModule { }
71 |
--------------------------------------------------------------------------------
/src/app/login/login.component.css:
--------------------------------------------------------------------------------
1 |
2 | .background {
3 | width: 100%;
4 | min-width: 1320px;
5 | height: 100%;
6 | background-color: #289973;
7 | position: relative;
8 | }
9 |
10 | .login-container {
11 | width: 1280px;
12 | height: 720px;
13 | position: absolute;
14 | top: 50%;
15 | left: 50%;
16 | margin-top: -360px;
17 | margin-left: -640px;
18 | -moz-border-radius: 5px;
19 | -webkit-border-radius: 5px;
20 | border-radius: 5px;
21 | background-color: #fff;
22 | overflow: hidden;
23 | }
24 |
25 | .title-box {
26 | float: left;
27 | width: 548px;
28 | height: 100%;
29 | background: #ebebeb url("../../assets/image/titlebg.png") 50px 55px no-repeat;
30 | text-align: center;
31 | line-height: 650px;
32 | font-size: 34px;
33 | color: #20a0ff;
34 | }
35 |
36 | .login-box {
37 | float: left;
38 | width: 420px;
39 | margin-top: 110px;
40 | margin-left: 155px;
41 | }
42 |
43 | .logo {
44 | width: 100%;
45 | height: 150px;
46 | text-align: center;
47 | }
48 |
49 | .logo img {
50 | height: 100%;
51 | }
52 |
53 | .login-body {
54 | width: 100%;
55 | margin-top: 30px;
56 | }
57 |
58 | .login-body input {
59 | width: 100%;
60 | padding: 18px 5px 18px 70px;
61 | font-size: 16px;
62 | }
63 |
64 | .login-body .ui-g-12 {
65 | position: relative;
66 | padding: 0;
67 | }
68 |
69 | .login-body .ui-g-12 .fa-user {
70 | position: absolute;
71 | top: 16px;
72 | left: 21px;
73 | font-size: 24px;
74 | }
75 |
76 | .login-body .ui-g-12 .fa-unlock-alt {
77 | position: absolute;
78 | top: 16px;
79 | left: 21px;
80 | font-size: 24px;
81 | }
82 |
83 | .login-btn {
84 | width: 100%;
85 | display: inline-block;
86 | white-space: nowrap;
87 | cursor: pointer;
88 | margin: 0;
89 | padding: 10px 15px;
90 | border-radius: 4px;
91 | font-size: 24px;
92 | box-sizing: border-box;
93 | outline: 0;
94 | line-height: 30px;
95 | text-align: center;
96 | color: #fff;
97 | background-color: #20a0ff;
98 | border-color: #20a0ff;
99 | -webkit-appearance: none;
100 | text-transform: none;
101 | overflow: visible;
102 | }
103 |
104 | .login-btn:hover, .login-btn:active, .login-btn:focus {
105 | background: #4db3ff;
106 | border-color: #4db3ff;
107 | color: #fff;
108 | }
109 |
110 |
--------------------------------------------------------------------------------
/src/app/login/login.component.html:
--------------------------------------------------------------------------------
1 |
8 |
26 |
9 |
17 |
18 |
10 | First Name *:
11 |
12 |
13 |
15 |
16 |
19 |
20 |
25 |
21 |
22 |
23 |
24 |
2 |
60 |
--------------------------------------------------------------------------------
/src/app/login/login.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {ActivatedRoute, Router, ActivatedRouteSnapshot, RouterState, RouterStateSnapshot} from '@angular/router';
3 | import {Base64} from 'js-base64';
4 | import {LoginService} from './login.service';
5 | @Component({
6 | selector: 'app-login',
7 | templateUrl: './login.component.html',
8 | styleUrls: ['./login.component.css']
9 | })
10 | export class LoginComponent implements OnInit {
11 |
12 | constructor(public router: Router, private myService: LoginService,) {
13 | }
14 |
15 | ngOnInit() {
16 |
17 | }
18 |
19 | nameModel: any;
20 | psModel: any;
21 | btnLogin: string = '登 录';
22 | loginerrortext: string = '';
23 | userToken: string;
24 | realname: string;
25 |
26 |
27 | login() {
28 | if (!this.nameModel || !this.psModel) {
29 | this.loginerrortext = '请填写账号密码';
30 | } else {
31 | this.userToken = `Basic ${Base64.encode(this.nameModel + ':' + this.psModel)}`;
32 | this.myService.login(this.userToken)
33 | .subscribe(res => {
34 | this.btnLogin = '登 录 中 ...';
35 | sessionStorage.setItem('userToken', this.userToken);
36 | console.log(res);
37 | if (res.name === this.nameModel) {
38 | this.router.navigateByUrl('workspace');
39 | } else {
40 | this.loginerrortext = '您输入的账号密码有误';
41 | }
42 | }, err => {
43 | if (err.status == 401) {
44 | this.loginerrortext = '您输入的账号密码有误';
45 | } else {
46 | this.loginerrortext = '服务器正忙,请稍后再试';
47 | }
48 | });
49 | }
50 | }
51 |
52 | inputFocus() {
53 | this.loginerrortext = '';
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/login/login.service.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 这里可能放很多公用的api接口
3 | */
4 | import {Injectable} from '@angular/core';
5 | import 'rxjs/add/operator/catch';
6 | import 'rxjs/add/operator/toPromise';
7 | import {beforeUrl} from '../common/public-data';
8 | import {HttpClient, HttpHeaders} from '@angular/common/http';
9 | import {catchError, tap} from 'rxjs/operators';
10 | import {Observable} from 'rxjs/Observable';
11 |
12 | @Injectable()
13 | export class LoginService {
14 | constructor(private http: HttpClient) {
15 | }
16 |
17 | //登录
18 | private loginUrl = 'assets/login.json';
19 | login(userToken: string): Observable
3 |
59 |
4 | 管理后台
5 |
6 |
7 |
58 |
8 | 
9 |
10 |
56 |
57 |
9 |
4 |
35 |
36 |
--------------------------------------------------------------------------------
/src/app/ng-form/ng-form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import {trigger, state, style, animate, transition} from "@angular/animations";
3 | import {Car, Message, SelectItem} from "../common/car";
4 | import {beforeUrl, pageAnimation} from "../common/public-data";
5 | @Component({
6 | selector: 'app-ng-form',
7 | templateUrl: './ng-form.component.html',
8 | styleUrls: ['./ng-form.component.css'],
9 | animations: [
10 | pageAnimation
11 | ]
12 | })
13 | export class NgFormComponent implements OnInit {
14 |
15 | constructor() { }
16 |
17 | ngOnInit() {
18 | }
19 | msgs: Message[] = []; //消息
20 | userNameModel:string
21 | doLogin(){
22 |
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/ng-form/ng-form.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule} from "@angular/router";
4 | import {
5 | PanelMenuModule,
6 | TabMenuModule, //tabMenu
7 | AutoCompleteModule,
8 | ButtonModule, //Button
9 | PanelModule, //容器
10 | InputTextModule,
11 | DataTableModule, //表格
12 | DialogModule, //浮层
13 | SplitButtonModule,
14 | TabViewModule, //table
15 | AccordionModule,//手风琴
16 | SharedModule,
17 | CalendarModule,
18 | GrowlModule,//弹出框
19 | MultiSelectModule,//多选
20 | ListboxModule,//多选框
21 | DropdownModule,//下拉
22 | CheckboxModule,//多选
23 | MessagesModule,//Messages
24 | PaginatorModule,//分页
25 | ConfirmDialogModule,//删除弹出框
26 | InputTextareaModule,// InputTextarea
27 | OverlayPanelModule,
28 | TooltipModule,
29 | } from 'primeng/primeng';
30 | import {FormsModule, ReactiveFormsModule} from "@angular/forms";
31 | import {HttpModule, JsonpModule} from "@angular/http";
32 | import {MyBreadcrumbModule} from "../components/my-breadcrumb/my-breadcrumb";
33 | import {NgFormComponent} from "./ng-form.component";
34 |
35 |
36 |
37 | @NgModule({
38 | imports: [
39 | FormsModule,
40 | ReactiveFormsModule,
41 | HttpModule,
42 | JsonpModule,
43 | CommonModule,
44 | ReactiveFormsModule,
45 |
46 | ButtonModule,
47 | PanelModule,
48 | InputTextModule,
49 | DataTableModule,
50 | DialogModule,
51 | SharedModule,
52 | CalendarModule,
53 | GrowlModule,
54 | MultiSelectModule,
55 | DropdownModule,
56 | CheckboxModule,
57 | PaginatorModule,
58 | TooltipModule,
59 | OverlayPanelModule,
60 |
61 | MyBreadcrumbModule,
62 |
63 |
64 | RouterModule.forChild([
65 | { path:'',component:NgFormComponent}
66 | ])
67 | ],
68 | declarations: [NgFormComponent],
69 | exports:[RouterModule]
70 | })
71 | export class NgFormModule { }
72 |
--------------------------------------------------------------------------------
/src/app/not-found.component.ts:
--------------------------------------------------------------------------------
1 |
2 | import { Component } from '@angular/core';
3 | import {Location} from "@angular/common";
4 | @Component({
5 | template: `
6 | 
8 | `,
9 | styles: [ ' .PageNotFoundComponent { height: 800px }' ],
10 | })
11 | export class PageNotFoundComponent {
12 | constructor(private location: Location) {
13 | };
14 | goBack(){
15 | this.location.back();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/rxjs-all.ts:
--------------------------------------------------------------------------------
1 |
2 | // Statics
3 | import 'rxjs/add/observable/throw';
4 | import 'rxjs/add/observable/combineLatest';
5 | import 'rxjs/add/observable/from';
6 | import 'rxjs/add/observable/of';
7 | // Operators
8 | import 'rxjs/add/operator/catch';
9 |
10 | import 'rxjs/add/operator/debounceTime';
11 | import 'rxjs/add/operator/distinctUntilChanged';
12 | import 'rxjs/add/operator/map';
13 | import 'rxjs/add/operator/switchMap';
14 | import 'rxjs/add/operator/toPromise';
15 | import 'rxjs/add/operator/startWith';
16 | import 'rxjs/add/operator/bufferCount';
17 | import 'rxjs/add/operator/bufferTime';
18 |
--------------------------------------------------------------------------------
/src/app/tree/tree.component.css:
--------------------------------------------------------------------------------
1 | .div{
2 | width: 200px;
3 | height: 150px;
4 | overflow: hidden;
5 | position: relative;
6 | background-color: #4db3ff;
7 | }
8 | .div-span{
9 | display: inline-block;
10 | background-color: red;
11 | color: #ffffff;
12 | width: 150px;
13 | height: 50px;
14 | left: 92px;
15 | top: 10px;
16 | text-align: center;
17 | line-height: 50px;
18 | position: absolute;
19 | transform: rotate(45deg);
20 | -ms-transform: rotate(45deg); /* IE 9 */
21 | -webkit-transform: rotate(45deg); /* Safari and Chrome */
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/tree/tree.component.html:
--------------------------------------------------------------------------------
1 |
4 |
7 | Checkbox Selection
8 |
12 |
19 |
--------------------------------------------------------------------------------
/src/app/tree/tree.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {beforeUrl, pageAnimation} from '../common/public-data';
3 | import {TreeNode} from 'primeng/primeng';
4 | import {Message} from '../common/car';
5 | @Component({
6 | selector: 'app-tree',
7 | templateUrl: './tree.component.html',
8 | styleUrls: ['./tree.component.css'],
9 | animations: [
10 | pageAnimation
11 | ]
12 | })
13 | export class TreeComponent implements OnInit {
14 |
15 | constructor() {
16 | }
17 |
18 | ngOnInit() {
19 | this.filesTree4 = [
20 | {
21 | 'label': 'Documents',
22 | 'data': 'Documents Folder',
23 | 'expandedIcon': 'fa-folder-open',
24 | 'collapsedIcon': 'fa-folder',
25 | selected: true,
26 | 'children': [{
27 | 'label': 'Work',
28 | 'data': 'Work Folder',
29 | 'expandedIcon': 'fa-folder-open',
30 | 'collapsedIcon': 'fa-folder',
31 | selected: true,
32 | },
33 | {
34 | 'label': 'Home',
35 | 'data': 'Home Folder',
36 | 'expandedIcon': 'fa-folder-open',
37 | 'collapsedIcon': 'fa-folder',
38 | selected: true,
39 | }]
40 | },
41 | {
42 | 'label': 'Pictures',
43 | 'data': 'Pictures Folder',
44 | 'expandedIcon': 'fa-folder-open',
45 | 'collapsedIcon': 'fa-folder',
46 | 'children': [
47 | {'label': 'barcelona.jpg', 'icon': 'fa-file-image-o', 'data': 'Barcelona Photo'},
48 | {'label': 'logo.jpg', 'icon': 'fa-file-image-o', 'data': 'PrimeFaces Logo'},
49 | {'label': 'primeui.png', 'icon': 'fa-file-image-o', 'data': 'PrimeUI Logo'}]
50 | },
51 | {
52 | 'label': 'Movies',
53 | 'data': 'Movies Folder',
54 | 'expandedIcon': 'fa-folder-open',
55 | 'collapsedIcon': 'fa-folder',
56 | 'children': [{
57 | 'label': 'Al Pacino',
58 | 'data': 'Pacino Movies',
59 | 'children': [{'label': 'Scarface', 'icon': 'fa-file-video-o', 'data': 'Scarface Movie'}, {
60 | 'label': 'Serpico',
61 | 'icon': 'fa-file-video-o',
62 | 'data': 'Serpico Movie'
63 | }]
64 | },
65 | {
66 | 'label': 'Robert De Niro',
67 | 'data': 'De Niro Movies',
68 | 'children': [{
69 | 'label': 'Goodfellas',
70 | 'icon': 'fa-file-video-o',
71 | 'data': 'Goodfellas Movie'
72 | }, {'label': 'Untouchables', 'icon': 'fa-file-video-o', 'data': 'Untouchables Movie'}]
73 | }]
74 | }
75 | ];
76 | setTimeout(() => {
77 |
78 | },200);
79 |
80 | }
81 |
82 | files4: TreeNode[] = [
83 | {
84 | 'data': {
85 | 'name': 'Documents',
86 | 'size': '75kb',
87 | 'type': 'Folder'
88 | },
89 | 'children': [
90 | {
91 | 'data': {
92 | 'name': 'Work',
93 | 'size': '55kb',
94 | 'type': 'Folder'
95 | },
96 | 'children': [
97 | {
98 | 'data': {
99 | 'name': 'Expenses.doc',
100 | 'size': '30kb',
101 | 'type': 'Document'
102 | }
103 | },
104 | {
105 | 'data': {
106 | 'name': 'Resume.doc',
107 | 'size': '25kb',
108 | 'type': 'Resume'
109 | }
110 | }
111 | ]
112 | },
113 | {
114 | 'data': {
115 | 'name': 'Home',
116 | 'size': '20kb',
117 | 'type': 'Folder'
118 | },
119 | 'children': [
120 | {
121 | 'data': {
122 | 'name': 'Invoices',
123 | 'size': '20kb',
124 | 'type': 'Text'
125 | }
126 | }
127 | ]
128 | }
129 | ]
130 | },
131 | {
132 | 'data': {
133 | 'name': 'Pictures',
134 | 'size': '150kb',
135 | 'type': 'Folder'
136 | },
137 | 'children': [
138 | {
139 | 'data': {
140 | 'name': 'barcelona.jpg',
141 | 'size': '90kb',
142 | 'type': 'Picture'
143 | }
144 | },
145 | {
146 | 'data': {
147 | 'name': 'primeui.png',
148 | 'size': '30kb',
149 | 'type': 'Picture'
150 | }
151 | },
152 | {
153 | 'data': {
154 | 'name': 'optimus.jpg',
155 | 'size': '30kb',
156 | 'type': 'Picture'
157 | }
158 | }
159 | ]
160 | }
161 | ];
162 | selectedFiles2: TreeNode;
163 | msgs: Message[] = []; //消息
164 | filesTree4: any[];
165 | selectedFiles3: any;
166 |
167 | onNodeSelect(e) {
168 | console.log(e);
169 | console.log(this.selectedFiles3);
170 | }
171 | }
172 |
--------------------------------------------------------------------------------
/src/app/tree/tree.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule} from "@angular/router";
4 | import {
5 | PanelMenuModule,
6 | TabMenuModule, //tabMenu
7 | AutoCompleteModule,
8 | ButtonModule, //Button
9 | PanelModule, //容器
10 | InputTextModule,
11 | DataTableModule, //表格
12 | DialogModule, //浮层
13 | SplitButtonModule,
14 | TabViewModule, //table
15 | AccordionModule,//手风琴
16 | SharedModule,
17 | CalendarModule,
18 | GrowlModule,//弹出框
19 | MultiSelectModule,//多选
20 | ListboxModule,//多选框
21 | DropdownModule,//下拉
22 | CheckboxModule,//多选
23 | MessagesModule,//Messages
24 | PaginatorModule,//分页
25 | ConfirmDialogModule,//删除弹出框
26 | InputTextareaModule,// InputTextarea
27 | OverlayPanelModule,
28 | TooltipModule, TreeTableModule, TreeModule,
29 | } from 'primeng/primeng';
30 | import {FormsModule, ReactiveFormsModule} from "@angular/forms";
31 | import {HttpModule, JsonpModule} from "@angular/http";
32 | import {MyBreadcrumbModule} from "../components/my-breadcrumb/my-breadcrumb";
33 | import {TreeComponent} from './tree.component';
34 |
35 |
36 |
37 | @NgModule({
38 | imports: [
39 | FormsModule,
40 | ReactiveFormsModule,
41 | HttpModule,
42 | JsonpModule,
43 | CommonModule,
44 | ReactiveFormsModule,
45 |
46 | ButtonModule,
47 | PanelModule,
48 | InputTextModule,
49 | DataTableModule,
50 | DialogModule,
51 | SharedModule,
52 | CalendarModule,
53 | GrowlModule,
54 | MultiSelectModule,
55 | DropdownModule,
56 | CheckboxModule,
57 | PaginatorModule,
58 | TooltipModule,
59 | OverlayPanelModule,
60 | TreeModule,
61 | MyBreadcrumbModule,
62 | TreeTableModule,SharedModule,
63 |
64 | RouterModule.forChild([
65 | { path:'',component:TreeComponent}
66 | ])
67 | ],
68 | declarations: [TreeComponent],
69 | exports:[RouterModule]
70 | })
71 | export class TreeDemoModule { }
72 |
--------------------------------------------------------------------------------
/src/app/upload/upload.component.css:
--------------------------------------------------------------------------------
1 | .upload-button {
2 | display: inline-block;
3 | line-height: 1;
4 | white-space: nowrap;
5 | cursor: pointer;
6 | border-color: #c4c4c4;
7 | -webkit-appearance: none;
8 | text-align: center;
9 | box-sizing: border-box;
10 | outline: none;
11 | margin: 0;
12 | -moz-user-select: none;
13 | -webkit-user-select: none;
14 | -ms-user-select: none;
15 | padding: 10px 15px;
16 | font-size: 14px;
17 | border-radius: 4px;
18 | color: #fff;
19 | background-color: #20a0ff;
20 | border-color: #20a0ff;
21 | }
22 |
23 | .upload-button input {
24 | display: none;
25 | }
26 |
27 | .upload-file {
28 | margin: 10px;
29 | cursor: pointer;
30 | position: relative;
31 | }
32 |
33 | .progress-box {
34 | width: 100%;
35 | height: 164px;
36 | text-align: center;
37 | padding-top: 37px;
38 | }
39 |
40 | .img-box {
41 | width: 100%;
42 | height: 100%;
43 | text-align: center;
44 | }
45 |
46 | .img-box img {
47 | width: 100%;
48 | }
49 |
50 |
--------------------------------------------------------------------------------
/src/app/upload/upload.component.html:
--------------------------------------------------------------------------------
1 | Selected Nodes: {{file.data.name}}
13 | 14 | 15 | 16 |Selected Nodes: {{file.data}}
18 |
3 |
4 |
12 |
5 |
10 |
11 |
13 |
14 |
31 |
15 |
16 |
29 |
30 |
17 |
24 |
25 |
18 | {{ f.name }}
19 |
23 |
20 |
22 |
26 | 
27 |
28 |
27 |
32 | {{response|json}}
33 |
34 |
35 |
36 | 展示 和 primeng 不一样的上传 (带请求头);样式大家自己可以组装一下;他的官网样式也不是很好
37 |
38 |
39 | github 地址 ngx-uploader ngx-uploader
40 |
--------------------------------------------------------------------------------
/src/app/upload/upload.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ColorComponent } from './upload.component';
4 |
5 | describe('ColorComponent', () => {
6 | let component: ColorComponent;
7 | let fixture: ComponentFixture
4 |
12 |
35 |
36 |
59 |
60 |
61 | 
10 |
13 |
33 |
34 | -
14 |
- 15 | 16 | 17 | 18 | 19 | 20 |
- 21 | 22 | 23 | 24 | 25 | 26 |
- 27 | 28 | 29 | 30 | 31 |
62 |
64 |
--------------------------------------------------------------------------------
/src/app/workspace/workspace.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit} from '@angular/core';
2 | import {Router} from '@angular/router';
3 | import {beforeUrl} from '../common/public-data';
4 | import {trigger, state, style, animate, transition} from '@angular/animations';
5 | import {WorkspaceService} from './workspace.service';
6 |
7 |
8 | @Component({
9 | selector: 'app-workspace',
10 | templateUrl: './workspace.component.html',
11 | styleUrls: ['./workspace.component.css'],
12 | animations: [
13 | trigger('menuState', [
14 | state('inactive', style({
15 | left: '0px'
16 | })),
17 | state('active', style({
18 | left: '-130px'
19 | })),
20 | transition('inactive => active', animate('200ms ease-in')),
21 | transition('active => inactive', animate('200ms ease-out'))
22 | ]),
23 | trigger('routerState', [
24 | state('inactive', style({
25 | marginLeft: '180px'
26 | })),
27 | state('active', style({
28 | marginLeft: '50px'
29 | })),
30 | transition('inactive => active', animate('200ms ease-in')),
31 | transition('active => inactive', animate('200ms ease-out'))
32 | ]),
33 | trigger('imgState', [
34 | state('inactive', style({
35 | left: '16px'
36 | })),
37 | state('active', style({
38 | left: '143px'
39 | })),
40 | transition('inactive => active', animate('200ms ease-in')),
41 | transition('active => inactive', animate('200ms ease-out'))
42 | ])
43 | ]
44 | })
45 | export class WorkspaceComponent implements OnInit {
46 |
47 | constructor(private myService: WorkspaceService, public router: Router) {
48 | };
49 |
50 | ngOnInit() {
51 | this.getMenu();
52 | if (sessionStorage.getItem('userToken')) {
53 | this.realname = sessionStorage.getItem('realname');
54 | } else {
55 | this.router.navigateByUrl('login');
56 | }
57 | }
58 |
59 | /************************* ********************************/
60 | informationNumber: any = 18; //头部我的消息数量
61 | menus: any[]; //菜单
62 | state: string = 'inactive'; //菜单状态
63 | pTooltipIf: boolean = false; //pTooltipIf状态
64 | beforeUrl: string = beforeUrl; //api前缀地址
65 | timeout: any; //错误信息时间
66 | realname: string; //头部账号名字
67 | menumsg: string;
68 |
69 |
70 | /************************* 获取菜单 ********************************/
71 | getMenu() {
72 | if (sessionStorage.getItem('menu111')) {
73 | this.menus = JSON.parse(sessionStorage.getItem('menu111'));
74 | console.log(this.menus);
75 | } else {
76 | this.myService.getMenu()
77 | .then(
78 | menus => this.menus = menus,
79 | error => {
80 | this.menumsg = '获取菜单失败,请刷新再试';
81 | }
82 | )
83 | .then(() => {
84 | if (this.menus) {
85 | sessionStorage.setItem('menu111', JSON.stringify(this.menus));
86 | }
87 | });
88 | }
89 |
90 | }
91 |
92 | /************************* 改变左侧菜单宽度 ********************************/
93 | changeMenuWidth() {
94 | this.state = (this.state === 'active' ? 'inactive' : 'active');
95 | //dom操作
96 | let fa = document.getElementsByClassName('ui-accordion-header');
97 | if (this.state == 'active') {
98 | for (let i = 0; i < fa.length; i++) {
99 | fa[i].getElementsByTagName('span')[0].style.display = 'none';
100 | }
101 | this.pTooltipIf = true;
102 | } else {
103 | for (let i = 0; i < fa.length; i++) {
104 | fa[i].getElementsByTagName('span')[0].style.display = 'inline-block';
105 | }
106 | this.pTooltipIf = false;
107 | }
108 | }
109 |
110 | /************************* 退出登录 ********************************/
111 | loginOut() {
112 | sessionStorage.clear();
113 | this.router.navigateByUrl('login');
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/app/workspace/workspace.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {RouterModule} from '@angular/router';
3 | import {WorkspaceComponent} from './workspace.component';
4 | import {workspaceRoutes} from './workspace.routes';
5 | import {CommonModule} from '@angular/common';
6 | import {FormsModule, ReactiveFormsModule} from '@angular/forms';
7 | import {SharedModule, AccordionModule, GrowlModule, TooltipModule} from 'primeng/primeng';
8 | import {PageNotFoundComponent} from '../not-found.component';
9 | import {MyGoTopModule} from '../components/my-gotop/my-gotop';
10 |
11 | @NgModule({
12 | imports: [
13 | FormsModule,
14 | ReactiveFormsModule,
15 | CommonModule,
16 | RouterModule.forChild(workspaceRoutes),
17 | SharedModule, // peimrNG 手风琴
18 | AccordionModule, // peimrNG 手风琴
19 | GrowlModule, // peimrNG msg提示
20 | TooltipModule, // Tooltip 提示
21 | MyGoTopModule, // 回到顶部组件
22 | ],
23 | exports: [],
24 | declarations: [
25 | WorkspaceComponent,
26 | PageNotFoundComponent
27 | ],
28 | providers: [
29 |
30 | ],
31 | })
32 | export class WorkspaceModule {
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/workspace/workspace.routes.ts:
--------------------------------------------------------------------------------
1 | import {WorkspaceComponent} from './workspace.component';
2 | import {PageNotFoundComponent} from '../not-found.component';
3 |
4 | export const workspaceRoutes = [
5 | {
6 | path: '',
7 | component: WorkspaceComponent,
8 | children: [
9 | {
10 | path: '', redirectTo: 'data-table', pathMatch: 'full'
11 | },
12 | {
13 | path: 'data-table',
14 | loadChildren: '../data-table/data-table.module#MyDataTableModule',
15 | title: '普通表格'
16 | },
17 | {
18 | path: 'primeng-form',
19 | loadChildren: '../form-primeng/form-primeng.module#FormPrimengModule',
20 | title: 'primeng表格'
21 | },
22 | {
23 | path: 'ng-form',
24 | loadChildren: '../ng-form/ng-form.module#NgFormModule',
25 | title: '验证'
26 | },
27 | {
28 | path: 'input',
29 | loadChildren: '../input/input.module#InputModule',
30 | title: 'input'
31 | },
32 | {
33 | path: 'charts',
34 | loadChildren: '../charts/charts.module#ChartsModule',
35 | title: 'charts'
36 | },
37 | {
38 | path: 'tree',
39 | loadChildren: '../tree/tree.module#TreeDemoModule',
40 | title: 'tree'
41 | }, {
42 | path: 'icon',
43 | loadChildren: '../icon/icon.module#IconModule',
44 | title: 'icon'
45 | }, {
46 | path: 'citys',
47 | loadChildren: '../citys/citys.module#CitysModule',
48 | title: '省级联动'
49 | }, {
50 | path: 'upload',
51 | loadChildren: '../upload/upload.module#UploadModule',
52 | title: '上传'
53 | },
54 | {
55 | path: '**',
56 | component: PageNotFoundComponent
57 | },
58 | ]
59 | }
60 | ];
61 |
--------------------------------------------------------------------------------
/src/app/workspace/workspace.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | import 'rxjs/add/operator/catch';
3 | import 'rxjs/add/operator/toPromise';
4 | import {beforeUrl} from '../common/public-data';
5 | import {HttpClient} from '@angular/common/http';
6 |
7 |
8 | @Injectable()
9 | export class WorkspaceService {
10 | constructor(private http: HttpClient) {
11 | }
12 |
13 | //获取菜单
14 | private menuUrl = 'assets/data/user-menu.json';
15 |
16 | getMenu(): Promise