windy/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-14 09:45:44 +08:00
parent 0348ffdb71 a485b0a09c
commit a7a095b866
24 changed files with 1402 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/main.scss
+4
View File
@@ -8,6 +8,10 @@
.orange{
color: orange;
}
.danger{
color: #f86c6b;
}
.left{
float: left;
}
src/app/pages/system-management/department-management/department-management.component.html
+89 -20
View File
@@ -8,7 +8,7 @@
<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>
<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 -->
@@ -53,9 +53,9 @@
<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>
<span *ngIf="orgDetail.organization_type==1" class="detail-item-text">机构</span>
<span *ngIf="orgDetail.organization_type==2" class="detail-item-text">部门</span>
<span *ngIf='!orgDetail.organization_type' class="detail-item-text">无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
@@ -78,7 +78,7 @@
</nz-form-item>
</div>
<div class="user-table">
<nz-table [nzShowPagination]='false' #dataSet [nzData]="userList">
<nz-table [nzShowPagination]='false' #dataSetShow [nzData]="userList">
<thead>
<tr>
<th>姓名</th>
@@ -88,7 +88,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<tr *ngFor="let item of dataSetShow.data">
<td>{{item.real_name}}</td>
<td>{{item.login_name}}</td>
<td>{{item.mobile}}</td>
@@ -118,9 +118,10 @@
</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-control [nzSm]="18" [nzXs]="24" [nzValidateStatus]="checkNameStatus" nzHasFeedback>
<input nz-input id="code" formControlName="code" placeholder="请输入机构编码" (blur)='checkName()' (keydown)="checkNameStatus='';nameOnly=true" name="validating">
<nz-form-explain *ngIf="validateForm.get('code').dirty && validateForm.get('code').errors">请输入机构编码</nz-form-explain>
<nz-form-explain *ngIf="!nameOnly" class="danger">该编码已存在</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
@@ -147,22 +148,55 @@
<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>
<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>
<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>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24">机构负责人</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<a href="javascript:;" (click)="openUsers()">选择</a>
</nz-form-control>
</nz-form-item>
<div class="user-table table-box">
<nz-table [nzShowPagination]='false' #dataSetSelect [nzData]="userSelecteds">
<thead>
<tr>
<th>姓名</th>
<th>用户名</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSetSelect.data;let i=index">
<td>{{item.real_name}}</td>
<td>{{item.login_name}}</td>
<td>{{item.mobile}}</td>
<td>
<i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
</td>
</tr>
</tbody>
</nz-table>
</div>
</form>
<div class="user-footer" *ngIf="modifyType!=3">
<button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10" [disabled]='!validateForm.valid||!nameOnly'>保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button>
</div>
<!-- 新增、修改 end -->
</div>
</div>
@@ -175,11 +209,46 @@
<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>
<ul id="treeDemoChild" class="ztree ztree-child"></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>
<!-- 机构负责人选择 -->
<div class="org-selete-box">
<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }" [nzMaskClosable]="false" [nzWidth]="auto" [nzVisible]="visibleUsers" nzTitle="机构负责人" (nzOnClose)="closeUser()">
<div class="users-box" [hidden]='statusParamsUsers.status!=3'>
<div class="user-table-box">
<nz-table [nzShowPagination]='false' #dataSet [nzData]="userData">
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>用户名</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td nzShowCheckbox [(nzChecked)]="item.checked" [nzDisabled]="item.disabled"></td>
<td>{{item.real_name}}</td>
<td>{{item.login_name}}</td>
<td>{{item.mobile}}</td>
</tr>
</tbody>
</nz-table>
<div class="page-box" *ngIf="statusParamsUsers.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div>
</div>
<div class="drawer-footer">
<button (click)='userSave()' nz-button nzType="primary" class="mr10">保存</button>
<button (click)=closeUser() nz-button nzType="default">取消</button>
</div>
</div>
</nz-drawer>
</div>
src/app/pages/system-management/department-management/department-management.component.scss
+23
View File
@@ -26,4 +26,27 @@
overflow-y:scroll;
}
}
.user-footer{
text-align: center;
}
}
@-moz-document url-prefix(){
.user-footer{
padding-bottom: 20px;
}
}
.ztree-child{
padding-bottom: 40px;
padding-right: 16px;
}
.drawer-footer{
display: inline-block;
position: relative;
left: 50%;
transform: translate(-50%)
}
.users-box{
padding-bottom: 30px;
}
src/app/pages/system-management/department-management/department-management.component.ts
+217 -14
View File
@@ -2,7 +2,7 @@ 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 { NzMessageService,NzModalRef, NzModalService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';
import 'ztree';
@@ -15,33 +15,50 @@ declare var jQuery: any
styleUrls: ['./department-management.component.scss']
})
export class DepartmentManagementComponent implements OnInit {
collectionSize:any ;
treeSelected:any; //树模型-当前选中项
treeSelectedChild:any; //上级机构选择树
statusParamsTree:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
statusParamsUsers:any={ //接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
public TreeData:any;
public canDel:any=false;
public canEdit:any=false;
public search:any={
orgId:'',
page_index:'1',
page_size:'10',
real_name:'',
}
public orgDetail:any='';
public orgSeleted:any=''; //所选机构详情
public orgDetail:any=''; //左侧机构目录当前选中项机构的详情信息
public orgSeleted:any=''; //新增或者修改时，当前选中的所属机构的机构详情信息
public modifyType:any='3'; //操作状态 1新增 2修改 3详情
public parentName:any='';
public parentNode:any=''; //当前选中机构的父级节点
public userList:any=''; //机构负责人列表
public userList:any=''; //机构负责人列表-详情时展示用户列表
public userSelecteds:any=[]; //机构负责人已选用户-新增、修改时
public userData:any=[]; //用户列表数据
saveCheck:any=false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
public visible:any=false;
public orgSeletedBtn:any=true; //控制机构选择按钮
validateForm: FormGroup;
visibleUsers:any=false;
isLoadingSave:any=false;
nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
checkNameStatus:any=''; //检测账号唯一性的图标状态
orgList:any=[];
confirmModal:NzModalRef;
constructor(
private fb: FormBuilder,
private http:HttpClientService,
private router:Router,
private message: NzMessageService,
) { }
private modal: NzModalService,
) {
}
ngOnInit() {
$('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
@@ -57,19 +74,113 @@ export class DepartmentManagementComponent implements OnInit {
code:[ '', [ Validators.required ] ],
contact_person:[ '' ],
contact_method:[ '' ],
organization_type:[ '1' ],
organization_type:[ '' ],
address:[ '' ],
});
this.initTree();
this.queryTable();
}
//新增、修改
//新增、修改 type 1新增 2修改
addModify(type){
//数据清空重置
this.modifyType=type;
}
this.validateForm.reset();
this.userSelecteds=[];
this.orgSeleted='';
this.checkNameStatus='';
this.nameOnly=true;
this.validateForm.patchValue({organization_type:1,});
if(type==1){
}else if(type==2){
let item=this.orgDetail;
this.validateForm.patchValue({
organization:item.organization,
shortName:item.shortName,
code:item.code,
contact_person:item.contact_person,
contact_method:item.contact_method,
organization_type:item.organization_type,
address:item.address,
});
this.orgSeleted=this.parentNode;
this.userList.forEach(option=>{
option.checked=true;
option.disabled=false;
this.userSelecteds.push(option)
})
}
}
//删除
delete(){
this.confirmModal = this.modal.confirm({
nzTitle: '删除',
nzContent: '确定删除【'+this.orgDetail.organization+'】?',
nzOnOk: () => new Promise((resolve, reject) => {
this.http.delete('/sysapi/setting/organization/delOrgByid/'+this.orgDetail.id).subscribe((json)=>{
if(json.is_success){
resolve();
this.message.success(`删除成功!`);
this.initTree();
}else{
reject();
this.message.error(`删除失败!`);
}
})
}).catch(() => console.log('Oops errors!'))
});
}
//保存
submitForm(){
this.saveCheck=true;
let pid='';
let userList=[];
this.orgSeleted?pid=this.orgSeleted.id:pid='';
if(this.userSelecteds&&this.userSelecteds.length>0){
this.userSelecteds.forEach(item=>{
userList.push({uid:item.uid})
})
}
let params=Object.assign({},this.validateForm.value,{pid:pid},{userList:userList})
console.log(params)
if(this.modifyType==1){
this.http.post('/sysapi/setting/organization/add/',params).subscribe((json)=>{
if(json.is_success){
this.message.success(`新增成功!`);
this.initTree();
}else{
this.message.error(`新增失败!`);
}
})
}else if(this.modifyType==2){
this.http.put('/sysapi/setting/organization/updateById/'+this.orgDetail.id,params).subscribe((json)=>{
if(json.is_success){
this.message.success(`修改成功!`);
this.initTree();
}else{
this.message.error(`修改失败!`);
}
})
}
}
//取消
cancel(){
this.modifyType=3;
}
//保存机构负责人
userSave(){
console.log(this.userData);
this.userData.forEach(item=>{
if(item.checked&&!item.disabled){
// 增加数据
this.userSelecteds = [ ...this.userSelecteds, item];
}
})
this.visibleUsers = false;
console.log(this.userSelecteds)
}
//保存选择机构
treeSave(){
@@ -82,6 +193,28 @@ export class DepartmentManagementComponent implements OnInit {
this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
}
}
//打开机构负责人抽屉
openUsers(){
this.visibleUsers = true;
this.queryTable();
}
//处理机构负责人选择和数据回填
userSelect(){
if(this.userData){
this.userData.forEach(item=>{
this.userSelecteds.forEach(option=>{
if(item.uid==option.uid){
item.checked=true;
item.disabled=true;
}
})
})
}
}
//关闭用户选择抽屉
closeUser(){
this.visibleUsers = false;
}
//打开机构树抽屉
open(): void {
this.treeSelectedChild='';
@@ -96,6 +229,52 @@ export class DepartmentManagementComponent implements OnInit {
// this.orgSeletedBtn=true;
this.orgSeleted='';
}
//删除机构负责人
delectConfirm(item){
this.userSelecteds=this.userSelecteds.filter(function(option){
return item.uid!==option.uid
})
}
//取消删除
delectCancel(){
}
//获取用户列表
queryTable():void{
this.statusParamsUsers.status=1;
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
if(json.is_success){
this.userData=json.body.list;
this.collectionSize=json.body.total;
if(json.body.list&&json.body.list.length>0){
this.statusParamsUsers.status=3;
this.userData.forEach(item=>{
if(this.userSelecteds.length>0){
this.userSelecteds.forEach(option=>{
if(item.uid==option.uid){
item.checked=true;
item.disabled=true;
}
})
}else{
item.checked=false;
item.disabled=false;
}
})
}else{
this.statusParamsUsers.status=4;
}
}else{
this.statusParamsUsers.status=0;
}
})
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
}
//修改时查询该系统下的所有用户
queryUserById():void{
this.http.get('/sysapi/setting/organization/queryUserById/'+this.orgDetail.id).subscribe((json)=>{
@@ -106,6 +285,29 @@ export class DepartmentManagementComponent implements OnInit {
}
})
}
//检验编码的唯一性
checkName(){
//处理修改的时候，修改的值为原来的值，这时候直接显示验证成功
if(this.modifyType==2&&this.validateForm.value.code.trim()==this.oldLoginName){
this.nameOnly = true;
this.checkNameStatus='success';
return false;
}
//拿用户输入的机构编码跟机构列表的编码对比，判断编码是否已经存在
let status='true';
this.orgList.forEach(item=>{
if(this.validateForm.value.code.trim()==item.code){
this.checkNameStatus='error';
this.nameOnly = false;
status='false';
return false;
}
});
if(status=='true'&&this.validateForm.value.code.trim()){
this.checkNameStatus='success';
this.nameOnly = true;
}
}
//获取机构列表，树模型数据处理
initTree(){
//获取目录列表
@@ -114,6 +316,7 @@ export class DepartmentManagementComponent implements OnInit {
if(json.is_success){
if(json.body.length>0){
this.statusParamsTree.status=3;
this.orgList=json.body;
let children=[];
json.body.forEach(option=>{
option.name=option.organization;
@@ -171,9 +374,9 @@ export class DepartmentManagementComponent implements OnInit {
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.oldLoginName=this.orgDetail.code;
this.queryUserById();
this.canDel=true;
this.canEdit=true;
@@ -184,7 +387,7 @@ export class DepartmentManagementComponent implements OnInit {
this.parentNode=isTopNode;
}
}else{ //顶级节点
this.orgDetail='';
this.orgDetail='';
this.canDel=false;
this.canEdit=false;
}
src/app/pages/system-management/operation-logs/operation-logs.component.html
+60 -3
View File
@@ -1,3 +1,60 @@
<p>
operation-logs works!
</p>
<div class="system-main-container">
<div class="user-manage">
<div class="system-main-content card" id="main-box">
<div class="search-box">
<div nz-row>
<div nz-col nzSpan="8">
<nz-form-item >
<nz-form-label class="left">关键词</nz-form-label>
<nz-form-control nzSpan="17">
<input nz-input [(ngModel)]='search.keyword' 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" (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
<button (click)="reset()" 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 (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
</div>
</div>
<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData">
<thead>
<tr>
<th>时间</th>
<th>姓名</th>
<th>账号</th>
<th>日志类别</th>
<th>操作类别</th>
<th>描述</th>
<th>登录ip</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td>{{item.log_datetime| date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{item.real_name}}</td>
<td>{{item.user_name}}</td>
<td>{{logType[item.log_type]}}</td>
<td>{{item.opt_type}}</td>
<td>{{item.summary}}</td>
<td>{{item.login_ip}}</td>
</tr>
</tbody>
</nz-table>
<div class="page-box" *ngIf="statusParamsTable.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div>
</div>
</div>
</div>
</div>
src/app/pages/system-management/operation-logs/operation-logs.component.scss
+20
View File
@@ -0,0 +1,20 @@
@import "../../main.scss";
.system-main-container{
.user-manage{
.system-main-content{
overflow-y:scroll;
}
.card{
}
.tree-box{
overflow-y:scroll;
}
}
}
.user-detail{
.detail-item-text{
color: #1890ff;
}
}
src/app/pages/system-management/operation-logs/operation-logs.component.ts
+70 -4
View File
@@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'app-operation-logs',
@@ -6,10 +10,72 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./operation-logs.component.scss']
})
export class OperationLogsComponent implements OnInit {
collectionSize:any ;
public tableData:any=[];
statusParamsTable:any={ //获取用户列表接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
public search:any={
page_index:'1',
page_size:'10',
date_start:'',
date_end:'',
keyword:'',
orgId:'',
}
logType:any={
'LOGIN':'登录',
'LOGOUT':'退出',
'USER_UI_SET':'修改用户设置',
'USER_INFO_OPT':'增删改用户信息',
};
optType:any={
'ADD':'新增',
'UPDATE':'修改',
'DELETE':'删除',
};
constructor(
private http:HttpClientService,
private router:Router,
private message: NzMessageService,
) { }
constructor() { }
ngOnInit() {
}
ngOnInit() {
// 页面监听 动态改变表单高度
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
})
this.queryTable();
}
//重置，重置搜索条件
reset(){
this.search.page_index=1;
this.search.page_size=10;
this.search.keyword='';
this.queryTable();
}
//获取列表
queryTable():void{
this.statusParamsTable.status=1;
this.http.get('/sysapi/oplog/list',this.search).subscribe((json)=>{
if(json.is_success){
this.tableData=json.body.recordList;
this.collectionSize=json.body.recordCount;
if(json.body.recordList&&json.body.recordList.length>0){
this.statusParamsTable.status=3;
}else{
this.statusParamsTable.status=4;
}
}else{
this.statusParamsTable.status=0;
}
})
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
}
}
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html
+7 -6
View File
@@ -1,11 +1,12 @@
<div class="color-settings-container">
<div class="data-list-box" *ngFor='let item of DataList'>
<div class="text-box" [ngStyle]="{'background-color':item.bgColor}">航班时间</div>
<button [colorPicker]="color" (colorPickerChange)="colorPicker($event,item)" class="setting-bg-color" nz-button nzType="default"><i nz-icon type="setting" theme="outline"></i>设置背景</button>
<button (click)="resetBgColor(item)" nz-button nzType="default"><i nz-icon type="reload" theme="outline"></i>恢复默认值</button>
<div class="data-list-box" *ngFor='let item of DataList;let i=index'>
<div class="text-box" [ngStyle]="{'background-color':item.COL_BG_COLOR,'color':item.COL_COLOR}">{{item.COL_CN}}</div>
<button [colorPicker]="color" [cpOutputFormat]="'rgba'" (colorPickerChange)="colorPicker($event,item,1)" class="setting-bg-color" nz-button nzType="default">设置背景</button>
<button [colorPicker]="color" [cpOutputFormat]="'rgba'" (colorPickerChange)="colorPicker($event,item,2)" class="setting-bg-color" nz-button nzType="default">设置字体</button>
<button (click)="resetBgColor(item,i)" nz-button nzType="default">恢复默认值</button>
</div>
<div class="color-picker-box">
<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 nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
<button (click)='save()' nzPlacement="top" nz-tooltip nz-button [nzLoading]="isLoadingSave" nzType="primary">保存</button>
<button (click)='cancel()' nzPlacement="top" nz-tooltip nz-button nzType="default">取消</button>
</div>
</div>
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss
+2 -1
View File
@@ -6,11 +6,12 @@
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
width: 444px;
width: 290px;
height: 32px;
line-height: 32px;
text-align: center;
border-radius: 2px;
border: 1px solid rgba(242,242,242,1);
}
.setting-bg-color{
margin-right: 10px;
src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts
+87 -23
View File
@@ -1,56 +1,120 @@
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../../services/http-client.service';
import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'app-color-settings',
templateUrl: './color-settings.component.html',
styleUrls: ['./color-settings.component.scss']
styleUrls: ['./color-settings.component.scss'],
providers:[HttpClientService]
})
export class ColorSettingsComponent implements OnInit {
cmykColor:any;
color:any;
list:any=[]; //源数据
DataList:any=[]; //临时项目列表，如果保存就传改变量，如果取消，则重置为list的源数据
constructor() { }
defaultList:any=[]; //默认的原颜色设置
statusParamsData:any={ //获取接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
tableData:any=''; //颜色查询接口数据
isLoadingSave:any=false;
constructor(
private http:HttpClientService,
private message: NzMessageService,
) { }
ngOnInit() {
this.list=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ] ;
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.DataList.push(option);
})
this.queryTable();
this.defaultList=[
{"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_BG_COLOR":"rgb(46,255,135,1)","COL_COLOR":"rgb(0,70,255,1)"},
{"COL_CODE":"ACTT", "COL_CN":"实际到达／出发", "COL_BG_COLOR":"rgb(149,207,255,1)","COL_COLOR":"rgb(0,70,255,1)"},
{"COL_CODE":"ESTT", "COL_CN":"预计到达／出发", "COL_BG_COLOR":"rgb(255,207,157,1)","COL_COLOR":"rgb(0,70,255,1)"},
{"COL_CODE":"PADT", "COL_CN":"前站起飞时间", "COL_BG_COLOR":"rgb(114,181,255,1)","COL_COLOR":"rgb(0,70,255,1)"},
{"COL_CODE":"PSST", "COL_CN":"计划机位", "COL_BG_COLOR":"rgb(173,255,46,1)","COL_COLOR":"rgb(0,70,255,1)"},
]
}
//设置颜色 1设置字体颜色 2设置背景颜色 3重置字体颜色
colorPicker(event,item){
item.bgColor=event;
//设置颜色 1设置背景颜色 2设置字体颜色
colorPicker(event,item,type){
if(type==1){
item.COL_BG_COLOR=event;
}else if(type==2){
item.COL_COLOR=event;
}
}
//背景色恢复默认值
resetBgColor(item){
item.bgColor='#fafafa';
resetBgColor(item,index){
item.COL_BG_COLOR=this.defaultList[index].COL_BG_COLOR;
item.COL_COLOR=this.defaultList[index].COL_COLOR;
}
//对象数组深度复制
deepCopy(data){
let itemObj={
bgColor:'#fafafa',
};
let itemObj={};
for(let key in data){
itemObj[key]=data[key];
}
return itemObj;
}
//数组深度复制构造
listsCope(sourceList,targetList){
sourceList.forEach(item=>{
let option=this.deepCopy(item);
targetList.push(option);
})
}
//保存
save(){
console.log(this.list)
console.log(this.DataList)
let settingContent=JSON.stringify(this.DataList);
let params:any={
envCode:'web',
groupCode:'userSettingColor',
settingContent:settingContent,
}
this.isLoadingSave=true;
console.log(params);
this.http.post('/adminapi/settings/uisettings',params).subscribe((json)=>{
this.isLoadingSave=false;
if(json.is_success){
this.message.success(`保存成功!`);
this.queryTable();
}else{
this.message.error(`保存失败!`);
}
})
}
//取消
cancel(){
this.DataList=[];
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.DataList.push(option);
this.queryTable();
}
//获取列表
queryTable():void{
this.statusParamsData.status=1;
this.http.get('/adminapi/settings/uisettings',{groupCode:'userSettingColor'}).subscribe((json)=>{
if(json.is_success){
this.statusParamsData.status=3;
let data=json.body;
this.tableData=json.body;
this.DataList=[];
//当data为空是，初始化
//判断data是否为空，空的时候则为最初的初始化；如果不为空，则有设置过个人设置的某个模块
if(data&&data.length>0){
data.forEach(item=>{
if(item.settingContent){
console.log(222)
let content=JSON.parse(item.settingContent);
this.listsCope(content,this.DataList);
}else{
console.log(3333)
this.listsCope(this.defaultList,this.DataList);
}
})
}else{
this.listsCope(this.defaultList,this.DataList);
}
}else{
this.statusParamsData.status=0;
}
})
}
src/app/pages/system-management/personal-settings/personal-settings.component.html
+8 -6
View File
@@ -1,13 +1,14 @@
<div class="system-main-container">
<div class="card">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
<div class="card " id="main-box">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" class="self-main-content">
<nz-tab nzTitle="自定义显示列">
<div class="self-row-box">
<div class="self-row-content">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">可选列（{{sourceList.length}}）</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<app-request-status [statusParams]='statusParamsData'></app-request-status>
<ul class="ant-transfer-list-content" *ngIf='statusParamsData.status==3'>
<li (click)="selectNode(item,i,1)" [ngClass]="{'bg':moveIndex==i&&selectedType==1}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of sourceList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(sourceList.length>0)">暂无数据</div>
</ul>
@@ -22,7 +23,8 @@
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">已选列（{{targetList.length}}）</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<app-request-status [statusParams]='statusParamsData'></app-request-status>
<ul class="ant-transfer-list-content" *ngIf='statusParamsData.status==3'>
<li (click)="selectNode(item,i,2)" [ngClass]="{'bg':moveIndex==i&&selectedType==2}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of targetList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(targetList.length>0)">暂无数据</div>
</ul>
@@ -37,8 +39,8 @@
</div>
</div>
<div class="self-row-footer">
<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 nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
<button (click)='saveSelf()' [nzLoading]="isLoadingSave" nzPlacement="top" nz-tooltip nz-button nzType="primary">保存</button>
<button (click)='cancelSelf()' nzPlacement="top" nz-tooltip nz-button nzType="default">取消</button>
</div>
</div>
</nz-tab>
src/app/pages/system-management/personal-settings/personal-settings.component.scss
+4
View File
@@ -1,4 +1,8 @@
.system-main-container{
.self-main-content{
overflow-y: auto;
height: 100%;
}
.ant-tabs{
.self-row-box{
display: inline-block;
src/app/pages/system-management/personal-settings/personal-settings.component.ts
+130 -27
View File
@@ -1,6 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import { NzMessageService } from 'ng-zorro-antd';
declare var $: any;
declare var jQuery: any;
@Component({
selector: 'app-personal-settings',
@@ -25,33 +28,80 @@ export class PersonalSettingsComponent implements OnInit {
page_size:'10',
role_name:'',
}
public defaultCols:any=[]; //默认的全部列
public colsData:any='';
isLoadingSave:any=false;
statusParamsData:any={ //获取接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
constructor(
private http:HttpClientService,
private message: NzMessageService,
) { }
ngOnInit() {
this.list=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ]
// 页面监听 动态改变表单高度
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
})
//this.list=[{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"10"}, {"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"8"}, {"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"4"}, {"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"5"}, {"COL_CODE":"MVIN", "COL_CN":"航向指示", "COL_ORDER":"9"}, {"COL_CODE":"TRML", "COL_CN":"候机楼", "COL_ORDER":"7"}, {"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"3"}, {"COL_CODE":"SODT", "COL_CN":"计划到达/出发", "COL_ORDER":"13"}, {"COL_CODE":"ESTT", "COL_CN":"预计到达/出发", "COL_ORDER":"14"}, {"COL_CODE":"ACTT", "COL_CN":"实际到达/出发", "COL_ORDER":"15"}, {"COL_CODE":"STND", "COL_CN":"停机位", "COL_ORDER":"16"}, {"COL_CODE":"ORDER", "COL_CN":"排序", "COL_ORDER":"17"} ]
this.defaultCols=[
{"COL_CODE":"ACFT", "COL_CN":"机型", "COL_ORDER":"1"},
{"COL_CODE":"GCTM", "COL_CN":"登机结束", "COL_ORDER":"2"},
{"COL_CODE":"BOTM", "COL_CN":"登机开始", "COL_ORDER":"3"},
{"COL_CODE":"ABDG", "COL_CN":"登机桥", "COL_ORDER":"4"},
{"COL_CODE":"AOTM_D", "COL_CN":"撤桥时间", "COL_ORDER":"5"},
{"COL_CODE":"AOTM_A", "COL_CN":"靠桥时间", "COL_ORDER":"6"},
{"COL_CODE":"BELT", "COL_CN":"转盘号", "COL_ORDER":"7"},
{"COL_CODE":"CHKC", "COL_CN":"值机柜台", "COL_ORDER":"8"},
{"COL_CODE":"CCTM", "COL_CN":"值机结束", "COL_ORDER":"9"},
{"COL_CODE":"COTM", "COL_CN":"值机开始", "COL_ORDER":"10"},
{"COL_CODE":"CHTM_OFF", "COL_CN":"下轮挡", "COL_ORDER":"11"},
{"COL_CODE":"CHTM_ON", "COL_CN":"上轮挡", "COL_ORDER":"12"},
{"COL_CODE":"LACL", "COL_CN":"最后通知时间", "COL_ORDER":"13"},
{"COL_CODE":"CHUT", "COL_CN":"行李传送带", "COL_ORDER":"14"},
{"COL_CODE":"RENO", "COL_CN":"飞机号", "COL_ORDER":"15"},
{"COL_CODE":"ALCD", "COL_CN":"航空公司", "COL_ORDER":"16"},
{"COL_CODE":"ACTT", "COL_CN":"实际到达／出发", "COL_ORDER":"17"},
{"COL_CODE":"PSST", "COL_CN":"计划机位", "COL_ORDER":"18"},
{"COL_CODE":"ESTT", "COL_CN":"预计到达／出发 ", "COL_ORDER":"19"},
{"COL_CODE":"MVIN", "COL_CN":"到达/出发", "COL_ORDER":"20"},
{"COL_CODE":"ERUT", "COL_CN":"航线", "COL_ORDER":"21"},
{"COL_CODE":"FLNO", "COL_CN":"航班号", "COL_ORDER":"22"},
{"COL_CODE":"FTSS", "COL_CN":"运营状态", "COL_ORDER":"23"},
{"COL_CODE":"FLIN", "COL_CN":"航线类别", "COL_ORDER":"24"},
{"COL_CODE":"IMPA", "COL_CN":"重要提示", "COL_ORDER":"25"},
{"COL_CODE":"SODT", "COL_CN":"计划到达／出发", "COL_ORDER":"26"},
{"COL_CODE":"TRML", "COL_CN":"航站楼", "COL_ORDER":"27"},
{"COL_CODE":"FLTY", "COL_CN":"航班类别", "COL_ORDER":"28"},
{"COL_CODE":"GTDT", "COL_CN":"登机门号 ", "COL_ORDER":"29"},
{"COL_CODE":"PADT", "COL_CN":"前站起飞时间", "COL_ORDER":"30"},
{"COL_CODE":"CSFT", "COL_CN":"共享航班号", "COL_ORDER":"31"},
{"COL_CODE":"STND", "COL_CN":"当前机位", "COL_ORDER":"32"},
]
/*
备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
*/
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.sourceList.push(option);
})
this.queryTable();
}
//对象数组深度复制
deepCopy(data){
let itemObj={
bgColor:'#fafafa',
};
let itemObj={};
for(let key in data){
itemObj[key]=data[key];
}
return itemObj;
}
//数组深度复制构造
listsCope(sourceList,targetList){
sourceList.forEach(item=>{
let option=this.deepCopy(item);
targetList.push(option);
})
}
//上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断
moveUpDown(type){
let index=this.moveIndex;
@@ -154,32 +204,85 @@ export class PersonalSettingsComponent implements OnInit {
}
//保存-自定义列显示保存
/*
各模块groupCode命名定义
groupCode:'userSettingColor',
groupCode:'userSettingCol',
groupCode:'userSettingMsgAlert',
groupCode:'userSettingMsgVoice',
groupCode:'userSettingFlyAgency',
*/
saveSelf(){
console.log(this.targetList);
console.log(this.sourceList);
}
//重置数据
cancelSelf(){
this.sourceList=[];
//等后台接口出来后，重置this.sourceList this.targetList
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.sourceList.push(option);
this.sourceList.forEach((item,index)=>{
item.COL_ORDER=index+1
})
this.targetList=[];
}
//获取列表
queryTable():void{
console.log(1111)
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
this.targetList.forEach((item,index)=>{
item.COL_ORDER=index+1
})
let content={
allCols:this.defaultCols,
sourceList:this.sourceList,
targetList:this.targetList,
}
let settingContent=JSON.stringify(content);
let params:any={
envCode:'web',
groupCode:'userSettingCol',
settingContent:settingContent,
}
this.isLoadingSave=true;
console.log(params);
this.http.post('/adminapi/settings/uisettings',params).subscribe((json)=>{
this.isLoadingSave=false;
if(json.is_success){
console.log(2222)
this.message.success(`保存成功!`);
this.queryTable();
}else{
alert(json.err_msg)
this.message.error(`保存失败!`);
}
})
}
//重置数据
cancelSelf(){
this.queryTable();
}
//获取列表
queryTable():void{
this.statusParamsData.status=1;
this.http.get('/adminapi/settings/uisettings',{groupCode:'userSettingCol'}).subscribe((json)=>{
if(json.is_success){
this.statusParamsData.status=3;
let data=json.body;
this.colsData=json.body;
this.list=[];
this.sourceList=[];
this.targetList=[];
//当data为空是，初始化
this.listsCope(this.defaultCols,this.list);
//判断data是否为空，空的时候则为最初的初始化；如果不为空，则有设置过个人设置的某个模块
if(data&&data.length>0){
data.forEach(item=>{
if(item.settingContent){
console.log(222)
let content=JSON.parse(item.settingContent);
this.listsCope(content.sourceList,this.sourceList);
this.listsCope(content.targetList,this.targetList);
}else{
console.log(3333)
this.listsCope(this.list,this.sourceList);
}
})
}else{
console.log(5555)
//接口数据为空，说明各个模块设置都为未初始化,可选项则为默认全部列
this.listsCope(this.list,this.sourceList);
}
}else{
this.statusParamsData.status=0;
}
})
}
}
src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.html
+98
View File
@@ -0,0 +1,98 @@
<div class="system-main-container">
<div class="user-modify-box card" id="main-container">
<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" >
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="role_name" nzRequired>角色名称</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input id="role_name" formControlName="role_name" placeholder="请输入角色名称">
<nz-form-explain *ngIf="validateForm.get('role_name').dirty && validateForm.get('role_name').errors">请输入角色名称</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色类型</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<nz-radio-group formControlName="role_type">
<label nz-radio nzValue='0'>系统内置</label>
<label nz-radio nzValue='1'>用户定义</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色用户</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<a href="javascript:;" (click)="openUsers()">选择</a>
</nz-form-control>
</nz-form-item>
<div class="user-table table-box">
<nz-table [nzShowPagination]='false' #userDataSet [nzData]="userSelecteds">
<thead>
<tr>
<th>姓名</th>
<th>用户名</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of userDataSet.data;let i=index">
<td>{{item.real_name}}</td>
<td>{{item.login_name}}</td>
<td>{{item.mobile}}</td>
<td>
<i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
</td>
</tr>
</tbody>
</nz-table>
</div>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24">功能权限</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24">
<div class="tree-box ml10">
<ul id="treeDemo" class="ztree"></ul>
</div>
</nz-form-control>
</nz-form-item>
</form>
<div class="user-footer">
<button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10" [disabled]='!validateForm.valid||!(userSelecteds.length>0)'>保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button>
</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]="visibleUsers" nzTitle="角色用户" (nzOnClose)="closeUser()">
<div class="users-box" [hidden]='statusParamsUsers.status!=3'>
<div class="user-table-box">
<nz-table [nzShowPagination]='false' #dataSet [nzData]="userData">
<thead>
<tr>
<th></th>
<th>姓名</th>
<th>用户名</th>
<th>电话</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td nzShowCheckbox [(nzChecked)]="item.checked" [nzDisabled]="item.disabled"></td>
<td>{{item.real_name}}</td>
<td>{{item.login_name}}</td>
<td>{{item.mobile}}</td>
</tr>
</tbody>
</nz-table>
<div class="page-box" *ngIf="statusParamsUsers.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div>
</div>
<div class="drawer-footer">
<button (click)='userSave()' nz-button nzType="primary" class="mr10">保存</button>
<button (click)=closeUser() nz-button nzType="default">取消</button>
</div>
</div>
</nz-drawer>
</div>
src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.scss
+43
View File
@@ -0,0 +1,43 @@
@import "../../../main.scss";
.user-modify-box{
position: relative;
overflow-y:scroll;
.user-footer{
text-align: center;
margin-top: -20px;
}
}
.ztree{
padding-bottom: 40px;
padding-right: 16px;
}
.relative{
position: relative;
width: 120px;
height: 40px;
}
.user-table{
width: 80%;
margin: 0 auto;
margin-bottom: 30px;
}
.drawer-footer{
display: inline-block;
position: relative;
left: 50%;
transform: translate(-50%)
}
.users-box{
padding-bottom: 30px;
}
.tree-box{
margin-bottom: 40px;
}
//火狐浏览器单独设置样式 解决在火狐浏览器下 底部padding-bottom无效问题
@-moz-document url-prefix(){
.user-footer{
padding-bottom: 20px;
}
}
src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RoleManagementModifyComponent } from './role-management-modify.component';
describe('RoleManagementModifyComponent', () => {
let component: RoleManagementModifyComponent;
let fixture: ComponentFixture<RoleManagementModifyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RoleManagementModifyComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RoleManagementModifyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.ts
+341
View File
@@ -0,0 +1,341 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
import { HttpClientService } from '../../../../services/http-client.service';
import { Router,ActivatedRoute } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';
import 'ztree';
declare var $: any;
declare var jQuery: any;
@Component({
selector: 'app-role-management-modify',
templateUrl: './role-management-modify.component.html',
styleUrls: ['./role-management-modify.component.scss']
})
export class RoleManagementModifyComponent implements OnInit {
/* 新树形组件参数 begin*/
parentNode:any;
parentName:any;
treeSelected:any;
isTreeTop:any;
/* 新树形组件参数 bed */
validateForm: FormGroup;
visibleUsers = false; //控制抽屉显示
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
statusParamsUsers:any={ //接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
modifyType:any=1; //当前页面操作类型 1 新增 2 编辑
public roleId:any='';
public userSelecteds:any=[]; //机构负责人已选用户-新增、修改时
public userData:any=[]; //用户列表数据
public search:any={
page_index:'1',
page_size:'10',
real_name:'',
}
collectionSize:any ;
public permissionChecked:any=[]; //角色详情的权限列表
isLoadingSave:any=false;
constructor(
private fb: FormBuilder,
private http:HttpClientService,
private route:ActivatedRoute,
private router:Router,
private message: NzMessageService,
) { }
ngOnInit() {
this.validateForm = this.fb.group({
role_name:[ '', [ Validators.required ] ],
role_type:[ '1', [ Validators.required ] ], //0=系统内置(不可删除) ，1=用户定义
description:[ ''],
role_code:[ ''],
status:[''],
user:[],
permission:[],
});
this.queryTable();
//取路由参数
this.route.queryParams.subscribe(routeParams=>{
this.modifyType=routeParams.operateType;
//routeParams 1新增 2修改
if(routeParams.operateType==2){
this.roleId=routeParams.id;
this.queryUserById();
this.queryDetail();
}else{
this.initTree();
this.statusParamsDetail.status=3;
}
})
}
submitForm(){
let permission:any=[];
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var checkList=zTree.getCheckedNodes(true);
if(checkList.length>0){
for(var i=0;i<checkList.length;i++){
if(checkList[i].checked&&checkList[i].level!=0&&checkList[i].level!=1){
permission.push({
pid:checkList[i].id,
})
}
}
}
let users:any=[];
if(this.userSelecteds&&this.userSelecteds.length>0){
this.userSelecteds.forEach(item=>{
users.push({
uid:item.uid,
real_name:item.real_name,
mobile:item.mobile,
email:item.email,
sex:item.sex,
})
})
}
this.validateForm.patchValue({
permission:permission,
user:users,
})
console.log(this.validateForm.value)
this.isLoadingSave=true;
if(this.modifyType==1){
this.http.post('/sysapi/setting/role/add/',this.validateForm.value).subscribe((json)=>{
this.isLoadingSave=true;
if(json.is_success){
this.message.success(`新增成功!`);
this.router.navigate(['app/system/roles'])
}else{
this.message.error(`新增失败!`);
}
})
}else if(this.modifyType==2){
this.isLoadingSave=true;
this.http.put('/sysapi/setting/role/update/'+this.roleId,this.validateForm.value).subscribe((json)=>{
if(json.is_success){
this.message.success(`修改成功!`);
this.router.navigate(['app/system/roles'])
}else{
this.message.error(`修改失败!`);
}
})
}
}
//修改时查询该角色下的所有用户
queryUserById():void{
this.http.get('/sysapi/setting/role/users/'+this.roleId).subscribe((json)=>{
if(json.is_success){
console.log(12121212)
console.log(json.body)
json.body.forEach(item=>{
item.checked=true;
item.disabled=false;
this.userSelecteds = [ ...this.userSelecteds, item];
})
}else{
}
})
}
//根据id查询角色详情
queryDetail():void{
this.http.get('/sysapi/setting/role/detail/find',{rid:this.roleId}).subscribe((json)=>{
if(json.is_success){
if(json.body){
this.statusParamsDetail=3;
//数据回填
let item=json.body;
this.validateForm.patchValue({
role_name:item.role_name,
role_type:item.role_type, //0=系统内置(不可删除) ，1=用户定义
description:item.description,
role_code:item.role_code,
status:item.status,
})
this.permissionChecked=item.permission;
console.log(22211111)
console.log(this.permissionChecked)
this.initTree();
}else{
this.statusParamsDetail=4;
}
}else{
this.statusParamsDetail=0;
}
})
}
//保存机构负责人
userSave(){
console.log(this.userData);
this.userData.forEach(item=>{
if(item.checked&&!item.disabled){
// 增加数据
this.userSelecteds = [ ...this.userSelecteds, item];
}
})
this.visibleUsers = false;
console.log(this.userSelecteds)
}
//处理机构负责人选择和数据回填
userSelect(){
if(this.userData){
this.userData.forEach(item=>{
this.userSelecteds.forEach(option=>{
if(item.uid==option.uid){
item.checked=true;
item.disabled=true;
}
})
})
}
}
//删除机构负责人
delectConfirm(item){
this.userSelecteds=this.userSelecteds.filter(function(option){
return item.uid!==option.uid
})
}
//打开机构负责人抽屉
openUsers(){
this.visibleUsers = true;
this.queryTable();
}
//关闭机构选择页面
closeUser(): void {
this.visibleUsers = false;
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
}
//获取用户列表
queryTable():void{
this.statusParamsUsers.status=1;
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
if(json.is_success){
let data=json.body.list;
this.collectionSize=json.body.total;
if(json.body.list&&json.body.list.length>0){
this.statusParamsUsers.status=3;
data.forEach(item=>{
if(this.userSelecteds.length>0){
this.userSelecteds.forEach(option=>{
if(item.uid==option.uid){
item.checked=true;
item.disabled=true;
}
})
}else{
item.checked=false;
item.disabled=false;
}
})
}else{
this.statusParamsUsers.status=4;
}
this.userData=data;
console.log(5555)
console.log(data)
}else{
this.statusParamsUsers.status=0;
}
console.log(66666)
console.log(this.userSelecteds)
})
}
//新树模型参数设置
public zNodes: any[];
setting = {
data: {
simpleData: {
enable: true
}
},
view: {
showLine: true,
dblClickExpand: false,
showIcon:true
},
check:{
autoCheckTrigger:true,
chkboxType:{"Y":"ps","N":"ps"},
enable: true,
chkStyle: "checkbox",
},
callback: {
//节点点击事件
onClick: (event, treeId, treeNode, clickFlag) => {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode);
this.treeSelected=treeNode;
this.parentNode=this.treeSelected.getParentNode();
if(!this.parentNode){
this.isTreeTop=true;
}else{
this.isTreeTop=false;
}
},
//节点展开事件
onExpand: (event, treeId, treeNode) => {
}
},
};
//新树模型
initTree(){
this.http.get('/sysapi/setting/permission/menu/list').subscribe(json=>{
if(json.is_success){
if(json.body&&json.body.length>0){
if(this.modifyType==2&&this.permissionChecked.length>0){
json.body.forEach(item=>{
this.foreachNode(item);
})
}
}
}
let treeList=[];
treeList.push({ //一层目录
name:"全部权限",
isParent:true,
open:true,
id:'',
children:json.body
});
this.zNodes=treeList;
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
let node = zTree.getNodes();
})
}
//递归方法处理权限树回填
foreachNode(node){
this.setNode(node);
if(node.children&&node.children.length>0){
node.children.forEach(item=>{
this.foreachNode(item)
})
}
}
//递归方法，处理单个节点
setNode(node){
this.permissionChecked.forEach(item=>{
if(item.pid==node.id){
console.log(node.name)
node.checked=true;
}
})
}
}
src/app/pages/system-management/role-management/role-management.component.html
+60 -3
View File
@@ -1,3 +1,60 @@
<p>
role-management works!
</p>
<div class="system-main-container">
<div class="user-manage">
<div class="system-main-content card" id="main-box">
<div class="search-box">
<div nz-row>
<div nz-col nzSpan="8">
<nz-form-item >
<nz-form-label class="left">角色名称</nz-form-label>
<nz-form-control nzSpan="17">
<input nz-input [(ngModel)]='search.role_name' 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" (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
<button (click)="reset()" 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 (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
</div>
</div>
<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData">
<thead>
<tr>
<th>角色名称</th>
<th>角色类型</th>
<th>创建人</th>
<th>创建日期</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data">
<td>{{item.role_name}}</td>
<td><span *ngIf="item.role_type==0">系统内置</span><span *ngIf="item.role_type==1">用户定义</span></td>
<td>{{item.create_by}}</td>
<td>{{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
<nz-divider nzType="vertical"></nz-divider>
<i nz-popconfirm nzTitle="确定删除该角色?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
</td>
</tr>
</tbody>
</nz-table>
<div class="page-box" *ngIf="statusParamsTable.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div>
</div>
</div>
</div>
</div>
src/app/pages/system-management/role-management/role-management.component.scss
+20
View File
@@ -0,0 +1,20 @@
@import "../../main.scss";
.system-main-container{
.user-manage{
.system-main-content{
overflow-y:scroll;
}
.card{
}
.tree-box{
overflow-y:scroll;
}
}
}
.user-detail{
.detail-item-text{
color: #1890ff;
}
}
src/app/pages/system-management/role-management/role-management.component.ts
+84 -3
View File
@@ -1,4 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';
import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd';
import 'ztree';
declare var $: any;
declare var jQuery: any;
@Component({
selector: 'app-role-management',
@@ -6,10 +13,84 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./role-management.component.scss']
})
export class RoleManagementComponent implements OnInit {
collectionSize:any ;
public tableData:any=[];
statusParamsTable:any={ //获取用户列表接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
constructor() { }
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
public search:any={
page_index:'1',
page_size:'10',
role_name:'',
}
visible = false; //用户详情抽屉框显示隐藏
userDetail:any={}; //用户详情
ngOnInit() {
}
constructor(
private http:HttpClientService,
private router:Router,
private message: NzMessageService,
) { }
ngOnInit() {
// 页面监听 动态改变表单高度
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
})
this.queryTable();
}
//新增、修改 1新增 2修改
addModify(type,item?){
if(type==1){
this.router.navigate(['app/system/roles/modify'],{queryParams:{operateType:1}})
}else if(type==2){
this.router.navigate(['app/system/roles/modify'],{queryParams:{operateType:2,id:item.rid}})
}
}
//删除
delectConfirm(item){
this.http.delete('/sysapi/setting/role/delete/'+item.rid).subscribe((json)=>{
if(json.is_success){
this.message.success(`删除成功!`);
this.queryTable();
}else{
this.message.error(`删除失败`)
}
})
}
//重置，重置搜索条件
reset(){
this.search.page_index=1;
this.search.page_size=10;
this.search.role_name='';
this.queryTable();
}
//获取列表
queryTable():void{
this.statusParamsTable.status=1;
this.http.get('/sysapi/setting/role/list',this.search).subscribe((json)=>{
if(json.is_success){
this.tableData=json.body.list;
this.collectionSize=json.body.total;
if(json.body.list&&json.body.list.length>0){
this.statusParamsTable.status=3;
}else{
this.statusParamsTable.status=4;
}
}else{
this.statusParamsTable.status=0;
}
})
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
}
}
src/app/pages/system-management/system-management-routing.module.ts
+6
View File
@@ -9,6 +9,7 @@ import { DepartmentManagementComponent } from './department-management/departmen
import { OperationLogsComponent } from './operation-logs/operation-logs.component';
import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component';
import { RoleManagementModifyComponent } from './role-management/role-management-modify/role-management-modify.component';
const systemManagementRoutes: Routes = [
{
@@ -30,6 +31,11 @@ const systemManagementRoutes: Routes = [
component: RoleManagementComponent,
data: { preload: true, reuse: false }
},
{
path: 'roles/modify',
component: RoleManagementModifyComponent,
data: { preload: true, reuse: false }
},
{
path: 'users',
component: UserManagementComponent,
src/app/pages/system-management/system-management.module.ts
+2
View File
@@ -22,6 +22,7 @@ import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/
import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-agency.component';
import { ComponentsModule } from '../../components/components.module';
import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component';
import { RoleManagementModifyComponent } from './role-management/role-management-modify/role-management-modify.component';
@NgModule({
imports: [
CommonModule,
@@ -44,6 +45,7 @@ import { UserManagementModifyComponent } from './user-management/user-management
MsgAlertWarningComponent,
FlightAgencyComponent,
UserManagementModifyComponent,
RoleManagementModifyComponent,
],
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.html
+1 -1
View File
@@ -26,7 +26,7 @@
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>所属机构</nz-form-label>
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>所属机构</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<span *ngIf="orgDetail">
<nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)" >{{orgDetail.organization}}</nz-tag>
src/app/pages/system-management/user-management/user-management.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="system-main-container">
<div class="system-main-container">
<div class="user-manage">
<div class="tree-box" id="tree-box">
<app-request-status [statusParams]='statusParamsTree'></app-request-status>