用户管理-列表开发
This commit is contained in:
liweijin
+35
-2
@@ -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{
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
.card{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;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");
|
||||
|
||||
Reference in New Issue
Block a user