集成常用工具

Author: weihomechen

.angular-cli.json

@@ -24,7 +24,9 @@
             "../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"
+            "./assets/global/scripts/sweetalert.js",
+            "../node_modules/echarts/dist/echarts.min.js",
+            "..node_modules/fullcalendar/dist/fullcalendar.js"
         ],
         "environmentSource": "environments/environment.ts",
         "environments": {

README.md

@@ -1,5 +1,41 @@
 # Angular4Admin
 
-基于Angular4和Material Design风格的企业后台管理系统，使用Angular-cli构建。
+基于Angular4的后台管理系统，使用Angular-cli构建。
+
+# 使用
+
+```
+git clone https://github.com/weihomechen/angular4-admin.git;
+```
+切换到项目目录，
+
+```
+// 如果不能科学上网，请使用cnpm代替npm
+// npm i -g cnpm
+// 如果未安装angular-cli
+// npm i -g @angular/cli
+npm install 
+```
+启动开发模式：
+```
+ng serve
+```
+如果顺利，项目会运行在本地 http://localhost:4200
+
+# 主要功能点
+
+### angular4基本功能的使用
+### 带管理功能可切换的tab
+### 一个增改查删的Demo（见人员管理）
+### 集成一些插件（文本编辑器、图表、地图、弹出框、流程图、树目录等）
+### 与后台交互使用Rxjs
+### 集成Material Design风格和Bootstrap风格的UI
+
+如果喜欢，还请挪一下鼠标给我一个star~~
+
+# 效果图
+
+PS： 个人项目，一些琐碎的细节没有实现；与后台交互使用的是mock-data，增删改也是模拟成功返回；
+
 
 

package.json

@@ -18,17 +18,24 @@
     "@angular/core": "^4.0.0",
     "@angular/forms": "^4.0.0",
     "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-beta.6",
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
     "@types/hammerjs": "^2.0.34",
     "@types/jquery": "^2.0.45",
     "core-js": "^2.4.1",
+    "echarts": "^3.6.1",
+    "fullcalendar": "^3.4.0",
     "hammerjs": "^2.0.8",
     "jquery": "^3.2.1",
     "material-design-icons": "^3.0.1",
     "material-design-lite": "^1.3.0",
+    "ng2-ckeditor": "^1.1.7",
+    "ng2-toastr": "^4.0.1",
     "ng2-translate": "^5.0.0",
+    "ngx-echarts": "^1.2.0",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"
   },

src/app/app.component.ts

@@ -10,19 +10,19 @@ declare var $: any;
 })
 export class AppComponent implements OnInit {
 
-    constructor(private translate: TranslateService){}
+    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');
+        $('.app-body').css('height', windowHeight - 111 + 'px');
 
 
         this.translate.addLangs(["zh", "en"]);
-		this.translate.setDefaultLang('zh');
+        this.translate.setDefaultLang('zh');
 
-		const browserLang = this.translate.getBrowserLang();
-		console.log("检测到的浏览器语言>" + browserLang);
-		this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
+        const browserLang = this.translate.getBrowserLang();
+        console.log("检测到的浏览器语言>" + browserLang);
+        this.translate.use(browserLang.match(/zh|en/) ? browserLang : 'zh');
     }
 }

src/app/app.module.ts

@@ -11,15 +11,16 @@ import { AppComponent } from './app.component';
 import { routing, CustomReuseStrategy } from './app.routing';
 
 // 第三方模块
-// import { MdlModule } from '@angular-mdl/core';
+import { MdlModule } from '@angular-mdl/core';
 import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';
 import 'hammerjs';
 
 // 项目内模块
 import { LayoutModule } from './layout/layout.module';
+import { ShareModule } from './share/share.module';
 import { HomeModule } from './home/home.module';
+import { BaseDataModule } from './base-data/base-data.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';
 
@@ -38,16 +39,18 @@ export function createTranslateLoader(http: Http) {
         FormsModule,
         HttpModule,
         // 第三方模块
+        MdlModule,
         TranslateModule.forRoot({
             provide: TranslateLoader,
             useFactory: (createTranslateLoader),
             deps: [Http]
         }),
         // 项目内模块
         LayoutModule,
+        ShareModule,
         HomeModule,
+        BaseDataModule,
         UserModule,
-        ShareModule,
         // App模块
         routing
     ],

src/app/app.routing.ts

@@ -3,23 +3,39 @@ import { Routes, RouterModule, RouteReuseStrategy, DetachedRouteHandle, Activate
 import { AppComponent } from './app.component';
 
 import { HomeComponent } from './home/home/home.component';
+import { PersonAddComponent } from './base-data/person-add/person-add.component';
+import { PersonEditComponent } from './base-data/person-edit/person-edit.component';
+import { PersonListComponent } from './base-data/person-list/person-list.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';
 
+import { AppCkeditorComponent } from './share/app-ckeditor/app-ckeditor.component';
+import { AppChartsComponent } from './share/app-charts/app-charts.component';
+import { AmapDemoComponent } from './share/app-amap/amap-demo.component';
+import { CalendarDemoComponent } from './share/app-calendar/calendar-demo.component';
+
 
 const appRoutes: Routes = [
     {
         path: 'home',
         component: HomeComponent,
-        canActivate: [UserService]
+        // canActivate: [UserService]
+    },
+    {
+        path: 'person-list',
+        component: PersonListComponent
+    },
+    {
+        path: 'person-add',
+        component: PersonAddComponent
     },
     {
-        path: 'base-data',
-        loadChildren: './base-data/base-data.module#BaseDataModule'
+        path: 'person-edit/:id',
+        component: PersonEditComponent
     },
     {
         path: 'user-register',
@@ -44,6 +60,22 @@ const appRoutes: Routes = [
         path: 'user-change-pwd',
         component: UserChangePwdComponent
     },
+    {
+        path: 'charts',
+        component: AppChartsComponent
+    },
+    {
+        path: 'ckeditor',
+        component: AppCkeditorComponent
+    },
+    {
+        path: 'amap',
+        component: AmapDemoComponent
+    },
+    {
+        path: 'calendar',
+        component: CalendarDemoComponent
+    },
     {
         path: '',
         redirectTo: '/home',
@@ -97,6 +129,9 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
     }
     // 决定是否重用路由
     shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+        if (future.params.reuse === 'false') {
+            return false;
+        }
         // 在此处可以取得跳转前和跳转后的路由路径
         // console.log('CustomReuseStrategy:shouldReuseRoute', future, curr);
         return future.routeConfig === curr.routeConfig;

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

@@ -3,7 +3,8 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { ShareModule } from '../share/share.module';
+import { MaterialModule, MdNativeDateModule } from '@angular/material';
+import { MdlModule } from '@angular-mdl/core';
 import { PersonListComponent } from './person-list/person-list.component';
 import { PersonAddComponent } from './person-add/person-add.component';
 import { PersonEditComponent } from './person-edit/person-edit.component';
@@ -14,9 +15,11 @@ import { PersonManageService } from './person-manage.service';
     imports: [
         CommonModule,
         FormsModule,
-        ShareModule,
+        MaterialModule,
+        MdNativeDateModule,
         ReactiveFormsModule,
-        RouterModule.forChild(baseDataRoutes)
+        MdlModule
+        // RouterModule.forChild(baseDataRoutes)
     ],
     declarations: [PersonListComponent, PersonAddComponent, PersonEditComponent],
     providers: [

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

@@ -18,23 +18,51 @@
             <mdl-textfield label="职业*" type="text" formControlName="role" floating-label error-msg="请输入职业"></mdl-textfield>
         </div>
         <div class="form-inline-item">
-            <mdl-textfield label="职务*" type="text" formControlName="position" floating-label error-msg="请输入职务"></mdl-textfield>
+            <md-input-container>
+                <input mdInput placeholder="请输入职务" [mdAutocomplete]="positionAuto" [formControl]="positionCtrl">
+            </md-input-container>
+
+            <md-autocomplete #positionAuto="mdAutocomplete">
+                <md-option *ngFor="let position of filteredPositions | async" [value]="position">
+                    {{ position }}
+                </md-option>
+            </md-autocomplete>
         </div>
 
         <div class="form-inline-item">
-            <mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
+            <md-select placeholder="请选择性别" formControlName="sex" name="sex">
+                <md-option *ngFor="let gender of genders" [value]="gender.value">
+                    {{gender.viewValue}}
+                </md-option>
+            </md-select>
         </div>
+
         <div class="form-inline-item">
-            <mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
+            <md-input-container>
+                <input mdInput placeholder="自动匹配" [mdAutocomplete]="auto" [formControl]="stateCtrl">
+            </md-input-container>
+
+            <md-autocomplete #auto="mdAutocomplete">
+                <md-option *ngFor="let state of filteredStates | async" [value]="state">
+                    {{ state }}
+                </md-option>
+            </md-autocomplete>
         </div>
 
         <div class="form-inline-item">
-
-            性别：<br/>
-            <mdl-radio value="男" formControlName="sex" mdl-ripple>男</mdl-radio>
-            <mdl-radio value="女" formControlName="sex" mdl-ripple>女</mdl-radio>
+            <md-input-container>
+                <input mdInput [mdDatepicker]="picker" placeholder="请选择注册日期" [formControl]="registerDateCtrl">
+                <button mdSuffix [mdDatepickerToggle]="picker"></button>
+            </md-input-container>
+            <md-datepicker #picker></md-datepicker>
         </div>
 
+        <div class="form-inline-item">
+            <mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
+        </div>
+        <div class="form-inline-item">
+            <mdl-textfield label="凑数目的" type="text" floating-label></mdl-textfield>
+        </div>
 
     </form>
     <div class="diaplay-from-footer">

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

@@ -21,12 +21,46 @@ export class PersonAddComponent implements OnInit {
     public sex = new FormControl('');
     public account = new FormControl('', Validators.required);
     public role = new FormControl('', Validators.required);
-    public position = new FormControl('');
+    public registerDateCtrl = new FormControl('', Validators.required);
     public genders = [
         { value: '0', viewValue: '男' },
         { value: '1', viewValue: '女' }
     ];
 
+    public positionCtrl = new FormControl();
+    filteredPositions: any;
+    positions = [
+        '队长',
+        '副队长',
+        '队员',
+        '替补'
+    ];
+
+    public stateCtrl = new FormControl();
+    filteredStates: any;
+    states = [
+        'a',
+        'ab',
+        'abc',
+        'abcd',
+        'e',
+        'f',
+        'g',
+        'h',
+        'i',
+        'j',
+        'k',
+        'l',
+        'm',
+        'n',
+        'o',
+        'p',
+        'q',
+        'r',
+        's',
+        't'
+    ];
+
     constructor(private fb: FormBuilder,
         private tabControlService: TabControlService,
         private personManageService: PersonManageService
@@ -37,18 +71,39 @@ export class PersonAddComponent implements OnInit {
             'sex': this.sex,
             'account': this.account,
             'role': this.role,
-            'position': this.position
+            'registerDate': this.registerDateCtrl,
+            'position': this.positionCtrl,
+            'state': this.stateCtrl
         });
+        this.filteredStates = this.stateCtrl.valueChanges
+            .startWith(null)
+            .map(name => this.filterStates(name));
+        this.filteredPositions = this.positionCtrl.valueChanges
+            .startWith(null)
+            .map(position => this.filterPositions(position));
     }
-
     ngOnInit() {
     }
 
+    filterStates(val: string) {
+        return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
+            : this.states;
+    }
+
+    filterPositions(val: string) {
+        return val ? this.positions.filter(p => new RegExp(`^${val}`, 'gi').test(p))
+            : this.positions;
+    }
+
     // 确认
     public onSubmit() {
         console.log(this.form);
-        this.personManageService.addPerson(this.form).subscribe(() => SweetAlert.alert('新增人员成功'));
+        this.personManageService.addPerson(this.form).subscribe({
+            next: () => SweetAlert.alert('新增人员成功'),
+            error: () => SweetAlert.warning('发生错误')
+        });
     }
+
     // 取消
     cancel() {
         this.tabControlService.closeTab();