增加用户模块

Author: weihomechen

.angular-cli.json

@@ -22,6 +22,7 @@
         ],
         "scripts": [
             "../node_modules/jquery/dist/jquery.min.js",
+            "./assets/global/scripts/common.js",
             "./assets/global/plugins/sweet-alert/sweetalert.min.js",
             "./assets/global/scripts/sweetalert.js"
         ],

package.json

@@ -13,13 +13,11 @@
   "private": true,
   "dependencies": {
     "@angular-mdl/core": "^4.0.3",
-    "@angular/animations": "^4.1.3",
     "@angular/common": "^4.0.0",
     "@angular/compiler": "^4.0.0",
     "@angular/core": "^4.0.0",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
-    "@angular/material": "^2.0.0-beta.3",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
@@ -30,6 +28,7 @@
     "jquery": "^3.2.1",
     "material-design-icons": "^3.0.1",
     "material-design-lite": "^1.3.0",
+    "ng2-translate": "^5.0.0",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },

src/app/app.component.html

@@ -6,4 +6,5 @@
         <app-layout-nav></app-layout-nav>
         <app-layout-body></app-layout-body>
     </mdl-layout-content>
-</mdl-layout>
+</mdl-layout>
+<router-outlet name="user"></router-outlet>

src/app/app.component.ts

@@ -1,16 +1,28 @@
 import { Component, OnInit } from '@angular/core';
 
+import { TranslateService } from 'ng2-translate';
+
 declare var $: any;
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
+
+    constructor(private translate: TranslateService){}
     ngOnInit() {
         const windowWidth = window.innerWidth,
             windowHeight = window.innerHeight;
         $('.app-body, .body-footer').css('width', windowWidth - 246 + 'px');
         $('.app-body').css('height', windowHeight - 121 + 'px');
+
+
+        this.translate.addLangs(["zh", "en"]);
+		this.translate.setDefaultLang('zh');
+
+		const browserLang = this.translate.getBrowserLang();
+		console.log("检测到的浏览器语言>" + browserLang);
+		this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
     }
 }

src/app/app.module.ts

@@ -1,38 +1,52 @@
 // Angular模块
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpModule, Http } from '@angular/http';
 import { RouteReuseStrategy } from '@angular/router';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 // App模块
 import { AppComponent } from './app.component';
 import { routing, CustomReuseStrategy } from './app.routing';
 
 // 第三方模块
+// import { MdlModule } from '@angular-mdl/core';
+import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
 import 'hammerjs';
 
 // 项目内模块
 import { LayoutModule } from './layout/layout.module';
 import { HomeModule } from './home/home.module';
+import { UserModule } from './user/user.module';
 import { ShareModule } from './share/share.module';
 import { TabControlService } from './layout/header/tab/tabControl.service';
 import { UserService } from './user/user.service';
 
+export function createTranslateLoader(http: Http) {
+    return new TranslateStaticLoader(http, './assets/i18n', '.json');
+}
+
 @NgModule({
     declarations: [
         AppComponent
     ],
     imports: [
         // Angular模块
         BrowserModule,
-        NoopAnimationsModule,
+        BrowserAnimationsModule,
         FormsModule,
         HttpModule,
+        // 第三方模块
+        TranslateModule.forRoot({
+            provide: TranslateLoader,
+            useFactory: (createTranslateLoader),
+            deps: [Http]
+        }),
         // 项目内模块
         LayoutModule,
         HomeModule,
+        UserModule,
         ShareModule,
         // App模块
         routing

src/app/app.routing.ts

@@ -3,8 +3,14 @@ import { Routes, RouterModule, RouteReuseStrategy, DetachedRouteHandle, Activate
 import { AppComponent } from './app.component';
 
 import { HomeComponent } from './home/home/home.component';
+import { UserLoginComponent } from './user/user-login/user-login.component';
+import { UserRegisterComponent } from './user/user-register/user-register.component';
+import { UserForgetpwdComponent } from './user/user-forgetpwd/user-forgetpwd.component';
+import { UserInfoComponent } from './user/user-info/user-info.component';
+import { UserChangePwdComponent } from './user/user-change-pwd/user-change-pwd.component';
 import { UserService } from './user/user.service';
 
+
 const appRoutes: Routes = [
     {
         path: 'home',
@@ -16,8 +22,27 @@ const appRoutes: Routes = [
         loadChildren: './base-data/base-data.module#BaseDataModule'
     },
     {
-        path: 'user',
-        loadChildren: './user/user.module#UserModule'
+        path: 'user-register',
+        component: UserRegisterComponent,
+        outlet: 'user'
+    },
+    {
+        path: 'user-login',
+        component: UserLoginComponent,
+        outlet: 'user'
+    },
+    {
+        path: 'user-info',
+        component: UserInfoComponent
+    },
+    {
+        path: 'user-forgetpwd',
+        component: UserForgetpwdComponent,
+        outlet: 'user'
+    },
+    {
+        path: 'user-change-pwd',
+        component: UserChangePwdComponent
     },
     {
         path: '',
@@ -58,6 +83,10 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     }
     // 决定当前的路由是否还原
     shouldAttach(route: ActivatedRouteSnapshot): boolean {
+        // 如果是新增的页面，不复用之前的路由
+        if (route.params.reuse === 'false') {
+            return false;
+        }
         // console.log('CustomReuseStrategy:shouldAttach', route);
         return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
     }

src/app/base-data/base-data.module.ts

@@ -1,10 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule, RouteReuseStrategy } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 import { ShareModule } from '../share/share.module';
-import { MdNativeDateModule } from '@angular/material';
 import { PersonListComponent } from './person-list/person-list.component';
 import { PersonAddComponent } from './person-add/person-add.component';
 import { PersonEditComponent } from './person-edit/person-edit.component';
@@ -16,7 +15,6 @@ import { PersonManageService } from './person-manage.service';
         CommonModule,
         FormsModule,
         ShareModule,
-        MdNativeDateModule,
         ReactiveFormsModule,
         RouterModule.forChild(baseDataRoutes)
     ],

src/app/base-data/base-data.routing.ts

@@ -2,6 +2,7 @@ import { RouterModule } from '@angular/router';
 
 import { PersonListComponent } from './person-list/person-list.component';
 import { PersonAddComponent } from './person-add/person-add.component';
+import { PersonEditComponent } from './person-edit/person-edit.component';
 
 export const baseDataRoutes = [
     {
@@ -11,5 +12,10 @@ export const baseDataRoutes = [
     {
         path: 'person-add',
         component: PersonAddComponent
+    },
+    {
+        path: 'person-edit/:id',
+        component: PersonEditComponent
     }
 ]
+

src/app/base-data/model/table-person-item.ts

@@ -1,5 +1,5 @@
 import { IMdlTableModelItem } from '@angular-mdl/core';
-export interface ITablePersonItem extends IMdlTableModelItem {
+export interface IPersonItem extends IMdlTableModelItem {
     id: string;
     name: string;
     sex: string;
@@ -8,4 +8,4 @@ export interface ITablePersonItem extends IMdlTableModelItem {
     role: string;
     position: string;
     selected: boolean;
-}
+}

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

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
 
 import { PersonManageService } from '../person-manage.service';
 import { TabControlService } from '../../layout/header/tab/tabControl.service';
@@ -29,8 +28,7 @@ export class PersonAddComponent implements OnInit {
     ];
 
     constructor(private fb: FormBuilder,
-        private route: Router,
-        private TabControlService: TabControlService,
+        private tabControlService: TabControlService,
         private personManageService: PersonManageService
     ) {
         this.form = fb.group({
@@ -44,18 +42,16 @@ export class PersonAddComponent implements OnInit {
     }
 
     ngOnInit() {
-        $('.portlet').css('height', window.innerHeight - 120 + 'px');
     }
 
-
+    // 确认
     public onSubmit() {
         console.log(this.form);
-        // this.personManageService.addPerson(this.form).then(() => SweetAlert.alert('新增人员成功'))
+        this.personManageService.addPerson(this.form).subscribe(() => SweetAlert.alert('新增人员成功'));
     }
-
+    // 取消
     cancel() {
-        this.route.navigateByUrl('/base-data/person-list');
-        this.TabControlService.closeTab({ name: '新增人员', link: '/base-data/person-add' });
+        this.tabControlService.closeTab();
     }
 
     public onDisableForm(formDisabled: boolean) {