From e4cb1cb2c4c43a6c4952ec0d4bd099cd5303da32 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 3 Aug 2022 13:02:30 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E8=B7=AF=E7=94=B1=E5=A4=8D?= =?UTF-8?q?=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/CustomReuseStrategy.ts | 12 +++++-- src/app/app-routing.module.ts | 2 +- .../home/basic-info/basic-info.component.html | 11 +++++- .../home/basic-info/basic-info.component.scss | 36 +++++++++++++++++++ .../home/basic-info/basic-info.component.ts | 6 +++- .../unit-details/unit-details.component.html | 1 + .../unit-details/unit-details.component.scss | 0 .../unit-details/unit-details.component.ts | 17 +++++++++ .../home/basic-info/unit/unit.component.html | 2 ++ .../home/basic-info/unit/unit.component.scss | 6 ++++ .../home/basic-info/unit/unit.component.ts | 22 ++++++++++++ src/app/home/home-routing.module.ts | 26 ++++++++++---- src/app/home/home.module.ts | 6 +++- src/app/home/nav/nav.component.html | 8 ++--- src/app/home/nav/nav.component.scss | 15 ++++---- src/app/home/nav/nav.component.ts | 8 +++-- .../system-management.component.html | 6 ++-- .../system-management.component.ts | 3 +- src/app/home/task/task.component.ts | 1 - src/app/pages/login/login.component.ts | 3 +- src/styles.scss | 13 +++++++ 21 files changed, 171 insertions(+), 33 deletions(-) create mode 100644 src/app/home/basic-info/unit-details/unit-details.component.html create mode 100644 src/app/home/basic-info/unit-details/unit-details.component.scss create mode 100644 src/app/home/basic-info/unit-details/unit-details.component.ts create mode 100644 src/app/home/basic-info/unit/unit.component.html create mode 100644 src/app/home/basic-info/unit/unit.component.scss create mode 100644 src/app/home/basic-info/unit/unit.component.ts diff --git a/src/app/CustomReuseStrategy.ts b/src/app/CustomReuseStrategy.ts index 313c05f..d88abff 100644 --- a/src/app/CustomReuseStrategy.ts +++ b/src/app/CustomReuseStrategy.ts @@ -15,13 +15,19 @@ export class CustomReuseStrategy implements RouteReuseStrategy { /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */ shouldDetach(route: ActivatedRouteSnapshot): boolean { console.log('shouldDetach======>', route); - return true; + if (route.routeConfig.path == 'basicInfo') { + return false; + } else { + return true; + } + } /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */ store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { - console.log('store======>', route, handle); - if(route.routeConfig.path == 'basicInfo'){ + console.log('store======>route', route); + // console.log('store======>handle', handle); + if (route.routeConfig.path == 'unit') { CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle; } } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0e888c1..0284c2a 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -10,7 +10,7 @@ const routes: Routes = [ { path: 'login', component: LoginComponent, }, { path: '', component: NavComponent, canActivate: [AuthGuard], children: [ - { path: 'homePage', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) } + { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) } ] }//主页面 ]; diff --git a/src/app/home/basic-info/basic-info.component.html b/src/app/home/basic-info/basic-info.component.html index 7ea6c4a..3183dc0 100644 --- a/src/app/home/basic-info/basic-info.component.html +++ b/src/app/home/basic-info/basic-info.component.html @@ -1 +1,10 @@ -

basic-info works!

+
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/src/app/home/basic-info/basic-info.component.scss b/src/app/home/basic-info/basic-info.component.scss index e69de29..6cbca32 100644 --- a/src/app/home/basic-info/basic-info.component.scss +++ b/src/app/home/basic-info/basic-info.component.scss @@ -0,0 +1,36 @@ +.box { + display: flex; +} + + +.nav { + width: 200px; + height: 100%; + background: #2c4dc1; + + ul { + li { + height: 48px; + line-height: 48px; + cursor: pointer; + } + } +} + +.router-link-active { + background: #fff; +} + +.content { + flex: 1; +} + +.router-link-active { + color: black; +} + +.content { + box-sizing: border-box; + padding: 8px; + background: #F6F5F8; +} diff --git a/src/app/home/basic-info/basic-info.component.ts b/src/app/home/basic-info/basic-info.component.ts index e24cc22..09ede39 100644 --- a/src/app/home/basic-info/basic-info.component.ts +++ b/src/app/home/basic-info/basic-info.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; - +import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy'; @Component({ selector: 'app-basic-info', templateUrl: './basic-info.component.html', @@ -12,4 +12,8 @@ export class BasicInfoComponent implements OnInit { ngOnInit(): void { } + ngOnDestroy(): void { + console.log(5555555) + CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit'); + } } diff --git a/src/app/home/basic-info/unit-details/unit-details.component.html b/src/app/home/basic-info/unit-details/unit-details.component.html new file mode 100644 index 0000000..1fb862f --- /dev/null +++ b/src/app/home/basic-info/unit-details/unit-details.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/home/basic-info/unit-details/unit-details.component.scss b/src/app/home/basic-info/unit-details/unit-details.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/basic-info/unit-details/unit-details.component.ts b/src/app/home/basic-info/unit-details/unit-details.component.ts new file mode 100644 index 0000000..5739971 --- /dev/null +++ b/src/app/home/basic-info/unit-details/unit-details.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit } from '@angular/core'; +import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy'; +@Component({ + selector: 'app-unit-details', + templateUrl: './unit-details.component.html', + styleUrls: ['./unit-details.component.scss'] +}) +export class UnitDetailsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + back() { + window.history.back() + } +} diff --git a/src/app/home/basic-info/unit/unit.component.html b/src/app/home/basic-info/unit/unit.component.html new file mode 100644 index 0000000..aa885f8 --- /dev/null +++ b/src/app/home/basic-info/unit/unit.component.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/app/home/basic-info/unit/unit.component.scss b/src/app/home/basic-info/unit/unit.component.scss new file mode 100644 index 0000000..4cfccbf --- /dev/null +++ b/src/app/home/basic-info/unit/unit.component.scss @@ -0,0 +1,6 @@ +p{ + color: black; +} +input{ + color: red; +} \ No newline at end of file diff --git a/src/app/home/basic-info/unit/unit.component.ts b/src/app/home/basic-info/unit/unit.component.ts new file mode 100644 index 0000000..a84b91e --- /dev/null +++ b/src/app/home/basic-info/unit/unit.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-unit', + templateUrl: './unit.component.html', + styleUrls: ['./unit.component.scss'] +}) +export class UnitComponent implements OnInit { + + constructor(private router: Router) { } + + ngOnInit(): void { + } + next() { + this.router.navigate(['/basicInfo/unit/details']); + } + ngOnDestroy(): void { + console.log('删除了6666666666666') + // CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit'); + } +} diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts index bb4388e..f7ae115 100644 --- a/src/app/home/home-routing.module.ts +++ b/src/app/home/home-routing.module.ts @@ -1,6 +1,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { BasicInfoComponent } from './basic-info/basic-info.component'; +import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.component'; +import { UnitComponent } from './basic-info/unit/unit.component'; import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analysis.component'; import { OrComponent } from './system-management/or/or.component'; import { RoleComponent } from './system-management/role/role.component'; @@ -9,17 +11,29 @@ import { UserComponent } from './system-management/user/user.component'; import { TaskComponent } from './task/task.component'; const routes: Routes = [ - { path: 'basicInfo', component: BasicInfoComponent }, + { + path: 'basicInfo', component: BasicInfoComponent, + children: [ + { path: '', redirectTo: '/basicInfo/unit', pathMatch: 'full' }, + { + path: 'unit', + component: UnitComponent, + children: [ + + ] + }, + { + path: 'unit/details', + component: UnitDetailsComponent + } + ], + }, { path: 'task', component: TaskComponent }, { path: 'statistic', component: StatisticAnalysisComponent }, { path: 'system', component: SystemManagementComponent, children: [ - { - path: '', - redirectTo: '/homePage/system/role', - pathMatch: 'full' - }, + { path: '', redirectTo: '/system/role', pathMatch: 'full' }, { path: 'role', component: RoleComponent, diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index 3a98170..946d8b6 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -11,6 +11,8 @@ import { SystemManagementComponent } from './system-management/system-management import { UserComponent } from './system-management/user/user.component'; import { RoleComponent } from './system-management/role/role.component'; import { OrComponent } from './system-management/or/or.component'; +import { UnitComponent } from './basic-info/unit/unit.component'; +import { UnitDetailsComponent } from './basic-info/unit-details/unit-details.component'; @NgModule({ declarations: [ @@ -21,7 +23,9 @@ import { OrComponent } from './system-management/or/or.component'; SystemManagementComponent, UserComponent, RoleComponent, - OrComponent + OrComponent, + UnitComponent, + UnitDetailsComponent ], imports: [ CommonModule, diff --git a/src/app/home/nav/nav.component.html b/src/app/home/nav/nav.component.html index 289b281..0742d6c 100644 --- a/src/app/home/nav/nav.component.html +++ b/src/app/home/nav/nav.component.html @@ -1,16 +1,16 @@ diff --git a/src/app/home/nav/nav.component.scss b/src/app/home/nav/nav.component.scss index 7336dc3..eeade1b 100644 --- a/src/app/home/nav/nav.component.scss +++ b/src/app/home/nav/nav.component.scss @@ -4,9 +4,9 @@ nz-header { - height: 48px; - line-height: 48px; - background: #2D4DbF; + height: 50px; + line-height: 50px; + background: #2C4DC0; color: #fff; display: flex; justify-content: center; @@ -16,7 +16,7 @@ nz-header { display: flex; justify-content: center; margin-bottom: 0px; - width:600px; + width: 600px; li { margin: 0 6px; @@ -31,15 +31,16 @@ nz-header { } .router-link-active { - background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); + background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(180, 202, 252, 0.5000) 50%, #769FF9 100%); text-align: center; transform: skewX(-20deg); } .router-link-active>div { - height: 48px; + height: 50px; transform: skewX(20deg); - border-bottom: 2px solid red; + border-bottom: 2px solid #95FFCF; + color: #fff; } nz-footer { diff --git a/src/app/home/nav/nav.component.ts b/src/app/home/nav/nav.component.ts index 8fcdd84..e710f3f 100644 --- a/src/app/home/nav/nav.component.ts +++ b/src/app/home/nav/nav.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'app-nav', @@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core'; }) export class NavComponent implements OnInit { - constructor() { } + constructor(private router: Router) { } ngOnInit(): void { + + } + xxx() { + this.router.navigate(['/task']); } - } diff --git a/src/app/home/system-management/system-management.component.html b/src/app/home/system-management/system-management.component.html index d1e48c2..47df6e9 100644 --- a/src/app/home/system-management/system-management.component.html +++ b/src/app/home/system-management/system-management.component.html @@ -1,9 +1,9 @@
    -
  • 角色管理
    • -
  • 用户管理
    • -
  • 组织机构管理
    • +
  • 角色管理
    • +
  • 用户管理
    • +
  • 组织机构管理
diff --git a/src/app/home/system-management/system-management.component.ts b/src/app/home/system-management/system-management.component.ts index d283aa8..035baec 100644 --- a/src/app/home/system-management/system-management.component.ts +++ b/src/app/home/system-management/system-management.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; - +import { CustomReuseStrategy } from 'src/app/CustomReuseStrategy'; @Component({ selector: 'app-system-management', templateUrl: './system-management.component.html', @@ -10,6 +10,7 @@ export class SystemManagementComponent implements OnInit { constructor() { } ngOnInit(): void { + // CustomReuseStrategy.deleteRouteSnapshot('/basicInfo/unit'); } } diff --git a/src/app/home/task/task.component.ts b/src/app/home/task/task.component.ts index 785bb2f..d911542 100644 --- a/src/app/home/task/task.component.ts +++ b/src/app/home/task/task.component.ts @@ -11,5 +11,4 @@ export class TaskComponent implements OnInit { ngOnInit(): void { } - } diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index 3a40565..1c3563c 100644 --- a/src/app/pages/login/login.component.ts +++ b/src/app/pages/login/login.component.ts @@ -70,7 +70,6 @@ export class LoginComponent implements OnInit { - remember: any//记住密码 autologin: any//自动登录 isLoading = false; @@ -107,7 +106,7 @@ export class LoginComponent implements OnInit { this.autoLogin() sessionStorage.setItem("token", data.token); sessionStorage.setItem("refreshToken", data.refreshToken); - this.router.navigate(['/homePage']) + this.router.navigate(['/system']) this.message.create('success', `登录成功`); //调用服务中的function刷新token diff --git a/src/styles.scss b/src/styles.scss index e3b20cf..6611369 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -19,6 +19,7 @@ body { height: 100%; overflow: hidden; font-family: synormal !important; + } body { @@ -79,6 +80,10 @@ a { color: #000; } +p { + color: #000; +} + ul, ol, li { @@ -96,6 +101,14 @@ textarea { background-color: #999; } +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track { + background-color: #999; +} + app-root { height: 100%; }