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

Merge branch 'develop-2'

Browse Source
This commit is contained in:
zhouyuejun
2018-12-03 11:30:17 +08:00
parent ba0683dffe 34a49272e8
commit a430692eb8
17 changed files with 683 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/components.module.ts
+3 -1
View File
@@ -6,7 +6,7 @@ import { ToastModule } from './toast/toast.module'; //消息提示
import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module'; import { SidebarMenuModule } from './sidebar-menu/sidebar-menu.module';
import { RequestStatusComponent } from './request-status/request-status.component'; import { RequestStatusComponent } from './request-status/request-status.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { NoValue } from './pipe/no-value.component';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh'; import zh from '@angular/common/locales/zh';
registerLocaleData(zh); registerLocaleData(zh);
@@ -21,6 +21,7 @@ registerLocaleData(zh);
], ],
declarations: [ declarations: [
RequestStatusComponent, RequestStatusComponent,
NoValue
], ],
providers : [ { provide: NZ_I18N, useValue: zh_CN } ], providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
exports: [ exports: [
@@ -28,6 +29,7 @@ registerLocaleData(zh);
ToastModule, ToastModule,
SidebarMenuModule, SidebarMenuModule,
RequestStatusComponent, RequestStatusComponent,
NoValue,
] ]
}) })
export class ComponentsModule { } export class ComponentsModule { }
src/app/components/pipe/no-value.component.ts
+13
View File
@@ -0,0 +1,13 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'null'})
export class NoValue implements PipeTransform {
transform(value: any, exponent: any): any {
console.log(value)
if(value){
return value
}else{
return '无'
}
}
}
src/app/pages/main.scss
+8 -6
View File
@@ -8,7 +8,12 @@
.orange{ .orange{
color: orange; color: orange;
} }
.left{
float: left;
}
.right{
float: right;
}
.system-main-container { .system-main-container {
position: relative; position: relative;
padding: 20px 20px; padding: 20px 20px;
@@ -16,13 +21,11 @@
height: 100%; height: 100%;
min-height: 300px; min-height: 300px;
background-color: #f0f0f0; background-color: #f0f0f0;
overflow-y: scroll;
.system-main-content{ .system-main-content{
height: 100%; height: 100%;
min-height: 600px;
.search-box{ .search-box{
} }
.table-box{ .table-box{
} }
@@ -39,8 +42,7 @@
.tree-box{ .tree-box{
position: relative; position: relative;
min-width: 300px; min-width: 300px;
min-height: 600px; margin-right: 20px;
margin-right: 10px;
float: left; float: left;
padding: 20px; padding: 20px;
height: 100%; height: 100%;
src/app/pages/system-management/department-management/department-management.component.html
+185 -3
View File
@@ -1,3 +1,185 @@
<p> <div class="system-main-container">
department-management works! <div class="org-manage">
</p> <div class="tree-box">
<app-request-status [statusParams]='statusParamsTree'></app-request-status>
<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
</div>
<div class="main-content card">
<div class="operation-box">
<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
<button *ngIf="canEdit" (click)="addModify(2)" nz-button nzType="default"><i nz-icon type="edit" theme="outline"></i>修改</button>
<button *ngIf="canDel" (click)="delete" nz-button nzType="danger"><i nz-icon type="delete" theme="outline"></i>删除</button>
</div>
<nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==3&&!orgDetail'></nz-skeleton>
<!-- 详情 begin -->
<form class="org-detail" *ngIf="modifyType==3&&orgDetail" nz-form [nzLayout]="'inline'">
<div nz-row nzGutter="24">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>机构名称</nz-form-label>
<span class="detail-item-text">{{orgDetail.organization|null}}</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>机构简称</nz-form-label>
<span class="detail-item-text">{{orgDetail.shortName|null}}</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>机构编码</nz-form-label>
<span class="detail-item-text">{{orgDetail.code|null}}</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>联系人</nz-form-label>
<span class="detail-item-text">{{orgDetail.contact_person|null}}</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>联系方式</nz-form-label>
<span class="detail-item-text">{{orgDetail.contact_method|null}}</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>机构地址</nz-form-label>
<span class="detail-item-text">{{orgDetail.address|null}}</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>机构类型</nz-form-label>
<span *ngIf='organization_type==1' class="detail-item-text">机构</span>
<span *ngIf='organization_type==2' class="detail-item-text">部门</span>
<span *ngIf='!organization_type' class="detail-item-text">无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>上级</nz-form-label>
<span class="detail-item-text">{{parentName|null}}</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>LOGO</nz-form-label>
<span *ngIf='!orgDetail.logo'>无</span>
<img *ngIf='orgDetail.logo' class="org-detail-logo" [src]="orgDetail.logo" alt="">
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>机构负责人</nz-form-label>
<span class="detail-item-text"></span>
</nz-form-item>
</div>
<div class="user-table">
<nz-table [nzShowPagination]='false' #dataSet [nzData]="userList">
<thead>
<tr>
<th>姓名</th>
<th>用户名</th>
<th>电话</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td>{{item.real_name}}</td>
<td>{{item.login_name}}</td>
<td>{{item.mobile}}</td>
<td>{{item.email}}</td>
</tr>
</tbody>
</nz-table>
</div>
</div>
</form>
<!-- 详情 end -->
<!-- 新增、修改 begin -->
<form class="form-modify" nz-form [formGroup]="validateForm" *ngIf="modifyType==1||modifyType==2">
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization" nzRequired>机构名称</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<input nz-input id="organization" formControlName="organization" placeholder="请输入姓名">
<nz-form-explain *ngIf="validateForm.get('organization').dirty && validateForm.get('organization').errors">请输入机构名称</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="shortName">机构简称</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<input nz-input id="shortName" formControlName="shortName" placeholder="请输入姓名">
<nz-form-explain *ngIf="validateForm.get('shortName').dirty && validateForm.get('shortName').errors">请输入机构简称</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="code" nzRequired>机构编码</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<input nz-input id="code" formControlName="code" placeholder="请输入姓名">
<nz-form-explain *ngIf="validateForm.get('code').dirty && validateForm.get('code').errors">请输入机构编码</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_person" >联系人</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<input nz-input id="contact_person" formControlName="contact_person" placeholder="请输入姓名">
<nz-form-explain *ngIf="validateForm.get('contact_person').dirty && validateForm.get('contact_person').errors">请输入联系人</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_method" >联系方式</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<input nz-input id="contact_method" formControlName="contact_method" placeholder="请输入姓名">
<nz-form-explain *ngIf="validateForm.get('contact_method').dirty && validateForm.get('contact_method').errors">请输入联系方式</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="address" >机构地址</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<textarea rows="3" id="address" nz-input formControlName="address" placeholder="请输入机构地址" ></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization_type" >机构类型</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<nz-radio-group formControlName="organization_type">
<label nz-radio nzValue="1">机构</label>
<label nz-radio nzValue="2">部门</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24">所属机构</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<span *ngIf="orgSeleted">
<nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)" >{{orgSeleted.organization}}</nz-tag>
</span>
<a href="javascript:;" (click)="open()"><span *ngIf="orgSeleted">修改</span><span *ngIf="!orgSeleted">选择</span></a>
<nz-form-explain *ngIf="!orgSeleted&&saveCheck" class="red">请选择所属机构</nz-form-explain>
</nz-form-control>
</nz-form-item>
</form>
<!-- 新增、修改 end -->
</div>
</div>
</div>
<!-- 选择所属机构 -->
<div class="org-selete-box">
<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }" [nzMaskClosable]="false" [nzWidth]="auto" [nzVisible]="visible" nzTitle="选择机构" (nzOnClose)="close()">
<div class="org-tree-box" [hidden]='statusParamsTree.status!=3'>
<div class="search-box">
<input nz-input style="width: 180px !important;margin-left: 8px;margin-right: 6px;" id="key" />
<button nz-button nzType="primary" nzShape="circle" (click)="searchNode()"><i nz-icon type="search"></i></button>
</div>
<ul id="treeDemoChild" class="ztree"></ul>
<div class="drawer-footer">
<button (click)='treeSave()' nz-button nzType="primary" class="mr10">保存</button>
<button (click)=close() nz-button nzType="default">取消</button>
</div>
</div>
</nz-drawer>
</div>
src/app/pages/system-management/department-management/department-management.component.scss
+29
View File
@@ -0,0 +1,29 @@
@import "../../main.scss";
.system-main-container{
.org-manage{
.main-content{
overflow-y:scroll;
.operation-box{
border-bottom: 1px solid #e8e8e8;
padding-bottom: 20px;
button{
margin-right: 10px;
}
}
.org-detail-logo{
width: 40px;
}
.form-modify{
margin-top: 20px;
}
.user-table{
width: 80%;
margin: 0 auto;
margin-bottom: 30px;
}
}
.tree-box{
overflow-y:scroll;
}
}
}
src/app/pages/system-management/department-management/department-management.component.ts
+204 -3
View File
@@ -1,4 +1,13 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
import { HttpClientService } from '../../../services/http-client.service';
import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';
import 'ztree';
declare var $: any;
declare var jQuery: any
@Component({ @Component({
selector: 'app-department-management', selector: 'app-department-management',
@@ -6,10 +15,202 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./department-management.component.scss'] styleUrls: ['./department-management.component.scss']
}) })
export class DepartmentManagementComponent implements OnInit { export class DepartmentManagementComponent implements OnInit {
treeSelected:any; //树模型-当前选中项
treeSelectedChild:any; //上级机构选择树
statusParamsTree:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
public TreeData:any;
public canDel:any=false;
public canEdit:any=false;
public search:any={
orgId:'',
}
public orgDetail:any='';
public orgSeleted:any=''; //所选机构详情
public modifyType:any='3'; //操作状态 1新增 2修改 3详情
public parentName:any='';
public parentNode:any=''; //当前选中机构的父级节点
public userList:any=''; //机构负责人列表
saveCheck:any=false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
validateForm: FormGroup;
constructor() { } constructor(
private fb: FormBuilder,
private http:HttpClientService,
private router:Router,
private message: NzMessageService,
) { }
ngOnInit() { ngOnInit() {
} $('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('.main-content').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('.main-content').css('height',(document.documentElement.clientHeight-106+'px'));
})
//表单实例化
this.validateForm = this.fb.group({
organization:[ '', [ Validators.required ] ],
shortName:[ '' ],
code:[ '', [ Validators.required ] ],
contact_person:[ '' ],
contact_method:[ '' ],
organization_type:[ '1' ],
address:[ '' ],
});
this.initTree();
}
//新增、修改
addModify(type){
this.modifyType=type;
}
submitForm(){
this.saveCheck=true;
}
//保存选择机构
treeSave(){
if(this.treeSelectedChild){
this.orgSeleted=this.treeSelectedChild;
this.visible = false;
this.orgSeletedBtn=false;
}else{
//如果没有选择机构,提示请选择机构
this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
}
}
//打开机构树抽屉
open(): void {
this.treeSelectedChild='';
this.visible = true;
}
//关闭机构选择页面
close(): void {
this.visible = false;
}
//删除机构标签
tagClose(event){
this.orgSeletedBtn=true;
this.orgSeleted='';
}
//修改时查询该系统下的所有用户
queryUserById():void{
this.http.get('/sysapi/setting/organization/queryUserById/'+this.orgDetail.id).subscribe((json)=>{
if(json.is_success){
this.userList=json.body
}else{
}
})
}
//获取机构列表，树模型数据处理
initTree(){
//获取目录列表
this.statusParamsTree.status=1;
this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
if(json.is_success){
if(json.body.length>0){
this.statusParamsTree.status=3;
let children=[];
json.body.forEach(option=>{
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;
}
}else{
//请求失败
this.statusParamsTree.status=0;
}
this.zNodes=json.body;
this.zNodesChild=json.body;
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
$.fn.zTree.init($("#treeDemoChild"), this.settingChild, this.zNodesChild);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
let node = zTree.getNodes();
if(json.body.length>0){
zTree.selectNode(node[0].children[0])
zTree.setting.callback.onClick(null,zTree.setting.treeId,node[0].children[0])
}
})
}
//树模型参数设置-左侧机构树
public zNodes: any[];
setting = {
data: {
simpleData: {
enable: true
}
},
view: {
showLine: true,
dblClickExpand: false,
showIcon:true
},
callback: {
//节点点击事件
onClick: (event, treeId, treeNode, clickFlag) => {
this.modifyType=3;
this.parentName='';
this.parentNode='';
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
this.treeSelected=treeNode;
let isTopNode=this.treeSelected.getParentNode(); //是否为顶级节点 true不是顶级节点 false 为顶级节点
console.log(isTopNode)
if(isTopNode){ //子节点
this.orgDetail=treeNode;
this.queryUserById();
this.canDel=true;
this.canEdit=true;
if(isTopNode.id=='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc'){
//除去全部机构这层的第一层 也就是实际意义的顶层
}else{
this.parentName=isTopNode.name;
this.parentNode=isTopNode;
}
}else{ //顶级节点
this.orgDetail='';
this.canDel=false;
this.canEdit=false;
}
},
},
};
//树模型参数设置-右侧机构树
public zNodesChild: any[];
settingChild = {
data: {
simpleData: {
enable: true
}
},
view: {
showLine: true,
dblClickExpand: false,
showIcon:true
},
callback: {
//节点点击事件
onClick: (event, treeId, treeNode, clickFlag) => {
var zTree = $.fn.zTree.getZTreeObj("treeDemoChild");
this.treeSelectedChild=treeNode;
},
},
};
} }
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html
+2 -2
View File
@@ -5,7 +5,7 @@
<button (click)="resetBgColor(item)" nz-button nzType="default"><i nz-icon type="reload" theme="outline"></i>恢复默认值</button> <button (click)="resetBgColor(item)" nz-button nzType="default"><i nz-icon type="reload" theme="outline"></i>恢复默认值</button>
</div> </div>
<div class="color-picker-box"> <div class="color-picker-box">
<button (click)='save()' nzTitle="保存设置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button> <button (click)='save()' nzTitle="保存设置" nzPlacement="top" nz-tooltip nz-button nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancel()' nzTitle="取消设置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button> <button (click)='cancel()' nzTitle="取消设置" nzPlacement="top" nz-tooltip nz-button nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div> </div>
</div> </div>
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss
+2 -5
View File
@@ -17,11 +17,8 @@
} }
} }
.color-picker-box{ .color-picker-box{
display: inline-block; margin-top: 40px;
position: relative; text-align: center;
top: 40px;
left: 50%;
transform:translate(-50%,0);
button:first-child{ button:first-child{
margin-right: 20px; margin-right: 20px;
} }
src/app/pages/system-management/personal-settings/flight-agency/flight-agency.component.html
+2 -2
View File
@@ -9,7 +9,7 @@
</nz-radio-group> </nz-radio-group>
</div> </div>
<div class="self-row-footer"> <div class="self-row-footer">
<button (click)='save()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button> <button (click)='save()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancel()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button> <button (click)='cancel()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div> </div>
</div> </div>
src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.html
+2 -2
View File
@@ -28,8 +28,8 @@
</div> </div>
</div> </div>
<div class="self-row-footer"> <div class="self-row-footer">
<button (click)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button> <button (click)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button> <button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div> </div>
</div> </div>
</div> </div>
src/app/pages/system-management/personal-settings/personal-settings.component.html
+2 -2
View File
@@ -37,8 +37,8 @@
</div> </div>
</div> </div>
<div class="self-row-footer"> <div class="self-row-footer">
<button (click)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button> <button (click)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button> <button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div> </div>
</div> </div>
</nz-tab> </nz-tab>
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.html
+18 -12
View File
@@ -1,6 +1,8 @@
<div class="system-main-container"> <div class="system-main-container">
<div class="user-modify-box card"> <div class="user-modify-box card" id="main-container">
<form nz-form [formGroup]="validateForm"> <app-request-status *ngIf="modifyType==2" [statusParams]='statusParamsDetail'></app-request-status>
<nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==2&&statusParamsDetail.status==1'></nz-skeleton>
<form nz-form [formGroup]="validateForm" *ngIf="statusParamsDetail.status==3">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="real_name" nzRequired>姓名</nz-form-label> <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="real_name" nzRequired>姓名</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control [nzSm]="14" [nzXs]="24">
@@ -10,9 +12,10 @@
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="login_name" nzRequired>系统账号</nz-form-label> <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="login_name" nzRequired>系统账号</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="checkNameStatus" nzHasFeedback>
<input nz-input (ngBlur)='checkName()' id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号"> <input nz-input (blur)='checkName()' (keydown)="checkNameStatus='';nameOnly=true" name="validating" id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号">
<nz-form-explain *ngIf="validateForm.get('login_name').dirty && validateForm.get('login_name').errors">请输入系统账号</nz-form-explain> <nz-form-explain *ngIf="validateForm.get('login_name').dirty && validateForm.get('login_name').errors">请输入系统账号</nz-form-explain>
<nz-form-explain *ngIf="!nameOnly" class="red">本账号已存在</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
@@ -44,6 +47,12 @@
<nz-form-explain *ngIf="(roleList.length<=0)&&saveCheck" class="red">请选择所属角色</nz-form-explain> <nz-form-explain *ngIf="(roleList.length<=0)&&saveCheck" class="red">请选择所属角色</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="remark">描述</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<textarea rows="3" id="remark" nz-input formControlName="remark" placeholder="请输入描述信息" ></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="identify_num">身份证号</nz-form-label> <nz-form-label [nzSm]="4" [nzXs]="24" nzFor="identify_num">身份证号</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control [nzSm]="14" [nzXs]="24">
@@ -71,7 +80,7 @@
</nz-radio-group> </nz-radio-group>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<!-- <nz-form-item> <nz-form-item *ngIf='modifyType==2'>
<nz-form-label [nzSm]="4" [nzXs]="24" >状态</nz-form-label> <nz-form-label [nzSm]="4" [nzXs]="24" >状态</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control [nzSm]="14" [nzXs]="24">
<nz-radio-group formControlName="status"> <nz-radio-group formControlName="status">
@@ -79,15 +88,12 @@
<label nz-radio nzValue="0">未激活</label> <label nz-radio nzValue="0">未激活</label>
</nz-radio-group> </nz-radio-group>
</nz-form-control> </nz-form-control>
</nz-form-item> -->
<nz-form-item nz-row style="margin-bottom:8px;">
<nz-form-control [nzSpan]="14" [nzOffset]="6">
<button (click)='submitForm()' nz-button nzType="primary" class="mr10">保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button>
</nz-form-control>
</nz-form-item> </nz-form-item>
</form> </form>
<div class="user-footer">
<button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10" [disabled]='!this.validateForm.valid||!this.orgDetail||this.roleList.length<=0||!this.nameOnly'>保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button>
</div>
</div> </div>
</div> </div>
<!-- 选择所属机构 --> <!-- 选择所属机构 -->
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.scss
+16 -1
View File
@@ -1,3 +1,12 @@
.user-modify-box{
position: relative;
overflow-y:scroll;
.user-footer{
text-align: center;
margin-top: -20px;
}
}
.ztree{ .ztree{
padding-bottom: 40px; padding-bottom: 40px;
padding-right: 16px; padding-right: 16px;
@@ -13,4 +22,10 @@
position: relative; position: relative;
width: 120px; width: 120px;
height: 40px; height: 40px;
} }
//火狐浏览器单独设置样式 解决在火狐浏览器下 底部padding-bottom无效问题
@-moz-document url-prefix(){
.user-footer{
padding-bottom: 20px;
}
}
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.ts
+147 -34
View File
@@ -3,6 +3,7 @@ import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
import { HttpClientService } from '../../../../services/http-client.service'; import { HttpClientService } from '../../../../services/http-client.service';
import { Router,ActivatedRoute } from '@angular/router'; import { Router,ActivatedRoute } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd'; import { NzMessageService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';
import 'ztree'; import 'ztree';
declare var $: any; declare var $: any;
@@ -30,6 +31,16 @@ export class UserManagementModifyComponent implements OnInit {
saveCheck:any=false; //保存检查，保存验证表单 false 还未验证 true 触发了验证 saveCheck:any=false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
roleList:any=[]; //保存所选角色 roleList:any=[]; //保存所选角色
listOfRole:any=[]; //角色列表 listOfRole:any=[]; //角色列表
nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
checkNameStatus:any=''; //检测账号唯一性的图标状态
modifyType:any=1; //当前页面操作类型 1 新增用户 2 编辑用户
userId:any=''; //用户ID 修改的用户ID
userDetail:any={}; //用户详情
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
isLoadingSave:any=false;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
private http:HttpClientService, private http:HttpClientService,
@@ -39,6 +50,8 @@ export class UserManagementModifyComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
// // 页面监听 动态改变表单高度
// $('#main-container').height('height',(document.documentElement.clientHeight-106+'px'));
this.queryRole(); this.queryRole();
this.validateForm = this.fb.group({ this.validateForm = this.fb.group({
real_name:[ '', [ Validators.required ] ], real_name:[ '', [ Validators.required ] ],
@@ -49,25 +62,87 @@ export class UserManagementModifyComponent implements OnInit {
mobile:[ ''], mobile:[ ''],
sex:['m'], sex:['m'],
status:['1'], status:['1'],
role:[''] role:[''],
remark: ['']
}); });
//取路由参数 //取路由参数
this.route.queryParams.subscribe(routeParams=>{ this.route.queryParams.subscribe(routeParams=>{
this.modifyType=routeParams.operateType;
//routeParams 1新增 2修改 //routeParams 1新增 2修改
if(routeParams.operateType==2){ if(routeParams.operateType==2){
this.userId=routeParams.id;
this.queryUserDetail();
}else{
this.statusParamsDetail.status=3;
} }
}) })
} }
//获取用户详情
queryUserDetail(){
this.http.get('/sysapi/setting/user/detail/list', { uid:this.userId }).subscribe((json)=>{
if(json.is_success){
if(json.body){
this.statusParamsDetail.status=3;
this.userDetail=json.body;
let detail=json.body;
this.validateForm.setValue({
real_name:detail.real_name,
login_name:detail.login_name,
password:detail.password,
identify_num:detail.identify_num,
email:detail.email,
mobile:detail.mobile,
sex:detail.sex,
status:detail.status,
role:'',
remark:detail.remark,
})
this.oldLoginName=detail.login_name;
if(detail.orgList&&detail.orgList.length>0){
this.orgDetail=detail.orgList[0];
}
if(detail.roleList&&detail.roleList.length>0){
detail.roleList.forEach(item=>{
this.roleList.push(item.rid)
})
}
}else{
this.statusParamsDetail.status=4;
}
}else{
this.statusParamsDetail.status=0;
}
})
}
//检验系统账号的唯一性
checkName(){ checkName(){
console.log(334343) console.log(this.validateForm.value.login_name.trim())
console.log(this.oldLoginName)
if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
this.nameOnly = true;
this.checkNameStatus='success';
return false;
}
this.checkNameStatus='validating';
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
if (json.is_success) {
if(json.body){
this.checkNameStatus='success';
this.nameOnly = true;
}else{
this.checkNameStatus='error';
this.nameOnly = false;
}
} else {
this.message.error(`账号验证接口错误`)
}
})
} }
//机构树，搜索功能 //机构树，搜索功能
searchNode() { searchNode() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelSelectedNode() zTree.cancelSelectedNode()
var key = $("#key"); var key = $("#key");
var value = $.trim(key.get(0).value); var value = $.trim(key.get(0).value);
var keyType = "name"; var keyType = "name";
@@ -77,7 +152,6 @@ export class UserManagementModifyComponent implements OnInit {
zTree.selectNode(this.nodeList[i], true, false); zTree.selectNode(this.nodeList[i], true, false);
} }
} }
} }
//删除机构标签 //删除机构标签
tagClose(event){ tagClose(event){
@@ -106,40 +180,72 @@ export class UserManagementModifyComponent implements OnInit {
//关闭机构选择页面 //关闭机构选择页面
close(): void { close(): void {
this.visible = false; this.visible = false;
} }
submitForm(): void { submitForm(){
this.saveCheck=true; this.saveCheck=true;
for (const i in this.validateForm.controls) { for (const i in this.validateForm.controls) {
this.validateForm.controls[ i ].markAsDirty(); this.validateForm.controls[ i ].markAsDirty();
this.validateForm.controls[ i ].updateValueAndValidity(); this.validateForm.controls[ i ].updateValueAndValidity();
} }
if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0){ if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0&&this.nameOnly){
let item=this.validateForm.value; //再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。
let params={ if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
real_name: item.real_name, this.nameOnly = true;
login_name: item.login_name, this.checkNameStatus='success';
password: item.password, this.submitConfirm(2);
mobile: item.mobile, return false;
sex: item.sex, }
identify_num: item.identify_num, this.checkNameStatus='validating';
email: item.email, //再次验证用户名唯一性
status: item.status, this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
orgList: [], if (json.is_success) {
roleList: [], if(json.body){
}; this.checkNameStatus='success';
this.roleList.forEach(option=>{ this.nameOnly = true;
params.roleList.push({ //表单处理
rid:option this.submitConfirm(this.modifyType);
}) }else{
}) this.checkNameStatus='error';
this.orgList.forEach(option=>{ this.nameOnly = false;
if(option.id==this.orgDetail.id){ return false;
params.orgList.push(option) }
} else {
this.message.error(`账号验证接口错误`)
} }
}) })
console.log(params) }
}
//确认提交表单 type 1 新增 2修改
submitConfirm(type){
let item=this.validateForm.value;
let params={
real_name: item.real_name,
login_name: item.login_name,
password: item.password,
mobile: item.mobile,
sex: item.sex,
identify_num: item.identify_num,
email: item.email,
status: item.status,
remark: item.remark,
orgList: [],
roleList: [],
};
this.roleList.forEach(option=>{
params.roleList.push({
rid:option
})
})
this.orgList.forEach(option=>{
if(option.id==this.orgDetail.id){
params.orgList.push(option)
}
})
console.log(params)
this.isLoadingSave=true;
if(type==1){
this.http.post('/sysapi/setting/user/add', params).subscribe((json) => { this.http.post('/sysapi/setting/user/add', params).subscribe((json) => {
this.isLoadingSave=false;
if (json.is_success) { if (json.is_success) {
this.message.success(`新增成功`); this.message.success(`新增成功`);
this.router.navigate(['app/system/users']) this.router.navigate(['app/system/users'])
@@ -147,9 +253,17 @@ export class UserManagementModifyComponent implements OnInit {
this.message.error(`新增失败`) this.message.error(`新增失败`)
} }
}) })
}else if(type==2){
this.http.put('/sysapi/setting/user/updateById/'+this.userId, params).subscribe((json) => {
this.isLoadingSave=false;
if (json.is_success) {
this.message.success(`修改成功`);
this.router.navigate(['app/system/users'])
} else {
this.message.error(`修改失败`)
}
})
} }
} }
//取消 返回列表页 //取消 返回列表页
cancel(){ cancel(){
@@ -210,7 +324,6 @@ export class UserManagementModifyComponent implements OnInit {
}else{ }else{
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc'; option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
} }
} }
json.body.push({ json.body.push({
name:"全部机构", name:"全部机构",
src/app/pages/system-management/user-management/user-management.component.html
+23 -21
View File
@@ -1,15 +1,15 @@
<div class="system-main-container"> <div class="system-main-container">
<div class="user-manage"> <div class="user-manage">
<div class="tree-box"> <div class="tree-box" id="tree-box">
<app-request-status [statusParams]='statusParamsTree'></app-request-status> <app-request-status [statusParams]='statusParamsTree'></app-request-status>
<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul> <ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
</div> </div>
<div class="system-main-content card"> <div class="system-main-content card" id="main-box">
<div class="search-box"> <div class="search-box">
<div nz-row> <div nz-row>
<div nz-col nzSpan="8"> <div nz-col nzSpan="8">
<nz-form-item > <nz-form-item >
<nz-form-label nzSpan="6">姓名</nz-form-label> <nz-form-label class="left">姓名</nz-form-label>
<nz-form-control nzSpan="17"> <nz-form-control nzSpan="17">
<input nz-input [(ngModel)]='search.real_name' placeholder="请输入姓名"> <input nz-input [(ngModel)]='search.real_name' placeholder="请输入姓名">
</nz-form-control> </nz-form-control>
@@ -42,9 +42,7 @@
<thead> <thead>
<tr> <tr>
<th>姓名</th> <th>姓名</th>
<th>性别</th>
<th>用户名</th> <th>用户名</th>
<th>邮箱</th>
<th>电话</th> <th>电话</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
@@ -52,12 +50,7 @@
<tbody> <tbody>
<tr *ngFor="let item of dataSet.data"> <tr *ngFor="let item of dataSet.data">
<td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td> <td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td>
<td>
<span *ngIf="item.sex=='m'">男</span>
<span *ngIf="item.sex=='f'">女</span>
</td>
<td>{{item.login_name}}</td> <td>{{item.login_name}}</td>
<td>{{item.email}}</td>
<td>{{item.mobile}}</td> <td>{{item.mobile}}</td>
<td> <td>
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i> <i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
@@ -112,6 +105,24 @@
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>所属角色</nz-form-label>
<ng-container *ngFor="let option of userDetail.roleList;let i=index">
<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
</ng-container>
<span *ngIf="userDetail.roleList.length<=0">无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>描述</nz-form-label>
<span class="detail-item-text">{{userDetail.remark}}</span>
<span *ngIf='!userDetail.remark'>无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8"> <div nz-row nzGutter="8">
<div nz-col nzSpan="24"> <div nz-col nzSpan="24">
<nz-form-item> <nz-form-item>
@@ -137,17 +148,6 @@
</nz-form-item> </nz-form-item>
</div> </div>
<div nz-col nzSpan="24"> <div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>所属角色</nz-form-label>
<ng-container *ngFor="let option of userDetail.roleList;let i=index">
<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
</ng-container>
<span *ngIf="userDetail.roleList.length<=0">无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item> <nz-form-item>
<nz-form-label>状态</nz-form-label> <nz-form-label>状态</nz-form-label>
<span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span> <span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span>
@@ -155,6 +155,8 @@
<span *ngIf='!userDetail.status'>无</span> <span *ngIf='!userDetail.status'>无</span>
</nz-form-item> </nz-form-item>
</div> </div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24"> <div nz-col nzSpan="24">
<nz-form-item> <nz-form-item>
<nz-form-label>性别</nz-form-label> <nz-form-label>性别</nz-form-label>
src/app/pages/system-management/user-management/user-management.component.scss
+16 -6
View File
@@ -1,10 +1,20 @@
.user-manage{ @import "../../main.scss";
.card{ .system-main-container{
.user-manage{
} .system-main-content{
} overflow-y:scroll;
}
.card{
}
.tree-box{
overflow-y:scroll;
}
}
}
.user-detail{ .user-detail{
.detail-item-text{ .detail-item-text{
color: #1890ff; color: #1890ff;
} }
} }
src/app/pages/system-management/user-management/user-management.component.ts
+11 -6
View File
@@ -4,13 +4,13 @@ import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd'; import { NzMessageService } from 'ng-zorro-antd';
import 'ztree'; import 'ztree';
declare var $: any; declare var $: any;
declare var jQuery: any; declare var jQuery: any;
@Component({ @Component({
selector: 'app-user-management', selector: 'app-user-management',
templateUrl: './user-management.component.html', templateUrl: './user-management.component.html',
styleUrls: ['./user-management.component.scss','../../main.scss'] styleUrls: ['./user-management.component.scss',]
}) })
export class UserManagementComponent implements OnInit { export class UserManagementComponent implements OnInit {
treeSelected:any; //树模型-当前选中项 treeSelected:any; //树模型-当前选中项
@@ -43,6 +43,13 @@ export class UserManagementComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
// 页面监听 动态改变表单高度
$('#tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('#tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
})
this.initTree(); this.initTree();
this.queryTable(); this.queryTable();
} }
@@ -158,16 +165,14 @@ export class UserManagementComponent implements OnInit {
if(json.body.length>0){ if(json.body.length>0){
this.statusParamsTree.status=3; this.statusParamsTree.status=3;
let children=[]; let children=[];
for(var i=0;i<json.body.length;i++){ json.body.forEach(option=>{
let option=json.body[i];
option.name=option.organization; option.name=option.organization;
if(option.pid){ if(option.pid){
option.pId=option.pid; option.pId=option.pid;
}else{ }else{
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc'; option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
} }
});
}
json.body.push({ json.body.push({
name:"全部机构", name:"全部机构",
isParent:true, isParent:true,