diff --git a/angular.json b/angular.json index 04d0a07..d3ec304 100644 --- a/angular.json +++ b/angular.json @@ -36,7 +36,7 @@ "node_modules/font-awesome/scss/font-awesome.scss", "node_modules/ng-zorro-antd/ng-zorro-antd.min.css", "src/styles.scss", - "node_modules/ztree/css/zTreeStyle/zTreeStyle.css" + "node_modules/ztree/css/metroStyle/metroStyle.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", diff --git a/package-lock.json b/package-lock.json index dababff..f3774bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10580,6 +10580,14 @@ "version": "0.8.26", "resolved": "http://registry.npm.taobao.org/zone.js/download/zone.js-0.8.26.tgz", "integrity": "sha1-e91y92aMWnrWsRgUi06jnFnQjS0=" + }, + "ztree": { + "version": "3.5.24", + "resolved": "https://registry.npmjs.org/ztree/-/ztree-3.5.24.tgz", + "integrity": "sha1-tj/lKYH98sMpZ1z9J3Lw0UdSH/E=", + "requires": { + "jquery": "3.3.1" + } } } } diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index 73d060f..2df3bcc 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -1,9 +1,15 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { PageTopModule } from './page-top/page-top.module' //头部 -import { ToastModule } from './toast/toast.module' //消息提示 -import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module' +import { PageTopModule } from './page-top/page-top.module'; //头部 +import { ToastModule } from './toast/toast.module'; //消息提示 +import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module'; +import { RequestStatusComponent } from './request-status/request-status.component'; +import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; + +import { registerLocaleData } from '@angular/common'; +import zh from '@angular/common/locales/zh'; +registerLocaleData(zh); @NgModule({ imports: [ @@ -11,12 +17,17 @@ import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module' PageTopModule, ToastModule, SidebarMenuModule, + NgZorroAntdModule ], - declarations: [], + declarations: [ + RequestStatusComponent, + ], + providers : [ { provide: NZ_I18N, useValue: zh_CN } ], exports: [ PageTopModule, ToastModule, SidebarMenuModule, + RequestStatusComponent, ] }) export class ComponentsModule { } diff --git a/src/app/components/request-status/request-status.component.html b/src/app/components/request-status/request-status.component.html new file mode 100644 index 0000000..a99931f --- /dev/null +++ b/src/app/components/request-status/request-status.component.html @@ -0,0 +1,13 @@ +
+
+ +
+
+ + 请求失败 +
+
+ 暂无数据 +
+
+ diff --git a/src/app/components/request-status/request-status.component.scss b/src/app/components/request-status/request-status.component.scss new file mode 100644 index 0000000..12599e2 --- /dev/null +++ b/src/app/components/request-status/request-status.component.scss @@ -0,0 +1,23 @@ +.position-center-box{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + text-align: center; + .loading-icon{ + color: #1890ff; + } + .warning-icon{ + color: orange + } + .data-null{ + + } + i{ + font-size: 40px; + } + .result-text{ + display: block; + padding-top: 10px; + } +} \ No newline at end of file diff --git a/src/app/components/request-status/request-status.component.spec.ts b/src/app/components/request-status/request-status.component.spec.ts new file mode 100644 index 0000000..fe15b7a --- /dev/null +++ b/src/app/components/request-status/request-status.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RequestStatusComponent } from './request-status.component'; + +describe('RequestStatusComponent', () => { + let component: RequestStatusComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RequestStatusComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RequestStatusComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/request-status/request-status.component.ts b/src/app/components/request-status/request-status.component.ts new file mode 100644 index 0000000..9d43bcc --- /dev/null +++ b/src/app/components/request-status/request-status.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit,Input } from '@angular/core'; + +@Component({ + selector: 'app-request-status', + templateUrl: './request-status.component.html', + styleUrls: ['./request-status.component.scss'] +}) +export class RequestStatusComponent implements OnInit { + //该组件使用，要求父级标签position：relative。 + @Input() statusParams={ + status:1, //接口的状态，0请求失败 1请求前loading 2请求中 3请求成功，有数据 4请求成功，无数据 + } + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/main.scss b/src/app/pages/main.scss index c998948..92213a7 100644 --- a/src/app/pages/main.scss +++ b/src/app/pages/main.scss @@ -1,12 +1,31 @@ +/* 基础样式 */ +.mr10{ + margin-right: 10px; +} +.red{ + color: red; +} +.orange{ + color: orange; +} + .system-main-container { + position: relative; padding: 20px 20px; width: 100%; height: 100%; min-height: 300px; background-color: #f0f0f0; - .system-main-body{ + overflow-y: scroll; + .system-main-content{ height: 100%; - width: 100%; + min-height: 600px; + .search-box{ + + } + .table-box{ + + } } } .card{ @@ -14,9 +33,14 @@ background: #fff; padding: 20px; box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15); + border-radius: 0; } .tree-box{ + position: relative; + min-width: 300px; + min-height: 600px; + margin-right: 10px; float: left; padding: 20px; height: 100%; @@ -24,6 +48,15 @@ box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15); } +.page-box{ + text-align: center; + margin-top: 30px; + margin-bottom: 10px; +} +.table-operation-box{ + margin-bottom: 16px; +} + /* 目录树样式 */ :host /deep/ ul.tree{ diff --git a/src/app/pages/system-management/system-management.module.ts b/src/app/pages/system-management/system-management.module.ts index 7791f3e..313ceae 100644 --- a/src/app/pages/system-management/system-management.module.ts +++ b/src/app/pages/system-management/system-management.module.ts @@ -11,7 +11,7 @@ import { OperationLogsComponent } from './operation-logs/operation-logs.componen import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component'; -import { SystemManagementRouting } from './system-management-routing.module' +import { SystemManagementRouting } from './system-management-routing.module'; import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; import { registerLocaleData } from '@angular/common'; @@ -20,7 +20,7 @@ registerLocaleData(zh); import { ColorSettingsComponent } from './personal-settings/color-settings/color-settings.component'; import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/msg-alert-warning.component'; import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-agency.component'; - +import { ComponentsModule } from '../../components/components.module'; @NgModule({ imports: [ CommonModule, @@ -28,7 +28,8 @@ import { FlightAgencyComponent } from './personal-settings/flight-agency/flight- NgZorroAntdModule, ColorPickerModule, ReactiveFormsModule, - FormsModule + FormsModule, + ComponentsModule ], declarations: [ SystemManagementComponent, diff --git a/src/app/pages/system-management/user-management/user-management.component.html b/src/app/pages/system-management/user-management/user-management.component.html index 6d449f1..eaf3837 100644 --- a/src/app/pages/system-management/user-management/user-management.component.html +++ b/src/app/pages/system-management/user-management/user-management.component.html @@ -1,10 +1,75 @@
-
    + +
      -
      - +
      +
      +
      +
      + + 姓名 + + + + +
      +
      + + 用户名 + + + + +
      +
      + + + + + + +
      +
      +
      + +
      +
      +
      + + + + + 姓名 + + 性别 + 用户名 + 邮箱 + 电话 + 操作 + + + + + {{item.real_name}} + + 男 + 女 + + {{item.login_name}} + {{item.email}} + {{item.mobile}} + + + + + +
      +
      + +
      + \ No newline at end of file diff --git a/src/app/pages/system-management/user-management/user-management.component.scss b/src/app/pages/system-management/user-management/user-management.component.scss index c251a11..bea8707 100644 --- a/src/app/pages/system-management/user-management/user-management.component.scss +++ b/src/app/pages/system-management/user-management/user-management.component.scss @@ -2,4 +2,4 @@ .card{ } -} \ No newline at end of file +} \ No newline at end of file diff --git a/src/app/pages/system-management/user-management/user-management.component.ts b/src/app/pages/system-management/user-management/user-management.component.ts index fa650e0..96f472f 100644 --- a/src/app/pages/system-management/user-management/user-management.component.ts +++ b/src/app/pages/system-management/user-management/user-management.component.ts @@ -12,16 +12,22 @@ declare var jQuery: any; }) export class UserManagementComponent implements OnInit { treeSelected:any; //树模型-当前选中项 + collectionSize:any ; + statusParamsTable:any={ //获取目录树接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据 + status:1, + } + statusParamsTree:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据 + status:1, + } public search:any={ page_index:'1', page_size:'10', real_name:'', login_name:'', - orgId:'', + orgId:'', } - parentNode:any; - parentName:any; - isTreeTop:any=false; //判断是否为树最顶层 + isLoading:false; + public tableData:any=[]; constructor( private http:HttpClientService, @@ -29,17 +35,31 @@ export class UserManagementComponent implements OnInit { ngOnInit() { this.initTree(); + this.queryTable(); + } + //获取列表 + queryTable():void{ + this.statusParamsTable.status=1; + this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{ + if(json.is_success){ + this.tableData=json.body.list; + this.statusParamsTable.status=3; + this.collectionSize=json.body.total; + }else{ + this.statusParamsTable.status=0; + } + }) } //树模型参数设置 public zNodes: any[]; setting = { data: { simpleData: { - enable: true + enable: true } }, view: { - showLine: false, + showLine: true, dblClickExpand: false, showIcon:true }, @@ -47,47 +67,50 @@ export class UserManagementComponent implements OnInit { //节点点击事件 onClick: (event, treeId, treeNode, clickFlag) => { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); - zTree.expandNode(treeNode); this.treeSelected=treeNode; - this.search.orgId=this.treeSelected.id; - this.parentNode=this.treeSelected.getParentNode(); - if(!this.parentNode){ - this.isTreeTop=true; - }else{ - this.isTreeTop=false; + let isTopNode=this.treeSelected.getParentNode(); //是否为顶级节点 true不是顶级节点 false 为顶级节点 + if(isTopNode){ //子节点 + this.search.orgId=this.treeSelected.id; + }else{ //顶级节点 + this.search.orgId=''; } + this.queryTable(); }, - //节点展开事件 - onExpand: (event, treeId, treeNode) => { - - } }, }; //新树模型 initTree(){ //获取目录列表 + this.statusParamsTree.status=1; this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{ - if(json.is_success&&json.body){ - let children=[]; - for(var i=0;i0){ + this.statusParamsTree.status=3; + let children=[]; + for(var i=0;i