windy/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户管理-列表开发

Browse Source
This commit is contained in:
liweijin
2018-11-19 20:58:55 +08:00
parent 5b29727f7f
commit 074d4b7409
12 changed files with 269 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
angular.json
+1 -1
View File
@@ -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",
package-lock.json
Generated
+8
View File
@@ -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"
}
}
}
}
src/app/components/components.module.ts
+15 -4
View File
@@ -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 { }
src/app/components/request-status/request-status.component.html
+13
View File
@@ -0,0 +1,13 @@
<div *ngIf="statusParams.status!=3" class="position-center-box">
<div class="loading-icon" *ngIf="statusParams.status==1">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
<div class="warning-icon" *ngIf="statusParams.status==0">
<i nz-icon type="disconnect" theme="outline"></i>
<span class="result-text">请求失败</span>
</div>
<div class="data-null" *ngIf="statusParams.status==4">
<span class="result-text">暂无数据</span>
</div>
</div>
src/app/components/request-status/request-status.component.scss
+23
View File
@@ -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;
}
}
src/app/components/request-status/request-status.component.spec.ts
+25
View File
@@ -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<RequestStatusComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RequestStatusComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RequestStatusComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/components/request-status/request-status.component.ts
+18
View File
@@ -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() {
}
}
src/app/pages/main.scss
+35 -2
View File
@@ -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{
src/app/pages/system-management/system-management.module.ts
+4 -3
View File
@@ -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,
src/app/pages/system-management/user-management/user-management.component.html
+67 -2
View File
@@ -1,10 +1,75 @@
<div class="system-main-container">
<div class="user-manage">
<div class="tree-box">
<ul id="treeDemo" class="ztree"></ul>
<app-request-status [statusParams]='statusParamsTree'></app-request-status>
<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
</div>
<div class="card">
<div class="system-main-content card">
<div class="search-box">
<div nz-row>
<div nz-col nzSpan="8">
<nz-form-item >
<nz-form-label nzSpan="6">姓名</nz-form-label>
<nz-form-control nzSpan="17">
<input nz-input placeholder="请输入姓名">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="8">
<nz-form-item >
<nz-form-label nzSpan="8">用户名</nz-form-label>
<nz-form-control nzSpan="15">
<input nz-input placeholder="请输入用户名">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="8">
<nz-form-item >
<nz-form-control nzSpan="24">
<button class="mr10" nz-button nzType="primary" [nzLoading]="isLoading" (click)="isLoading=(!isLoading)"><i nz-icon type="search"></i>查询</button>
<button nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div class="table-operation-box">
<button nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
</div>
</div>
<div class="table-box">
<app-request-status [statusParams]='statusParamsTable'></app-request-status>
<nz-table [nzShowPagination]='false' *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0' #dataSet [nzData]="tableData">
<thead>
<tr>
<th>姓名</th>
<!-- <th>所属机构</th> -->
<th>性别</th>
<th>用户名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td>{{item.real_name}}</td>
<td>
<span *ngIf="item.sex=='m'">男</span>
<span *ngIf="item.sex=='f'">女</span>
</td>
<td>{{item.login_name}}</td>
<td>{{item.email}}</td>
<td>{{item.mobile}}</td>
<td></td>
</tr>
</tbody>
</nz-table>
</div>
<div class="page-box">
<nz-pagination [nzPageIndex]="1" [nzTotal]="500"></nz-pagination>
</div>
</div>
</div>
</div>
src/app/pages/system-management/user-management/user-management.component.ts
+57 -34
View File
@@ -12,6 +12,13 @@ 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',
@@ -19,9 +26,8 @@ export class UserManagementComponent implements OnInit {
login_name:'',
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;i<json.body.length;i++){
let option=json.body[i];
option.name=option.organization;
if(option.pid){
option.pId=option.pid;
}else{
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
if(json.is_success){
if(json.body.length>0){
this.statusParamsTree.status=3;
let children=[];
for(var i=0;i<json.body.length;i++){
let option=json.body[i];
option.name=option.organization;
if(option.pid){
option.pId=option.pid;
}else{
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
}
}
json.body.push({
name:"全部机构",
isParent:true,
open:true,
id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
})
}else{
//数据为空
this.statusParamsTree.status=4;
}
json.body.push({
name:"全部机构",
isParent:true,
open:true,
id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
})
}else{
//请求失败
this.statusParamsTree.status=0;
}
this.zNodes=json.body;
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");