个人设置-自定义显示列接口联调
This commit is contained in:
liweijin
+2
-2
@@ -5,7 +5,7 @@
|
||||
<button (click)="resetBgColor(item)" nz-button nzType="default"><i nz-icon type="reload" theme="outline"></i>恢复默认值</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 nzType="primary">保存</button>
|
||||
<button (click)='cancel()' nzPlacement="top" nz-tooltip nz-button nzType="default">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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()' nzTitle="保存配置" [nzLoading]="isLoadingSave" nzPlacement="top" nz-tooltip nz-button nzType="primary">保存</button>
|
||||
<button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzType="default">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</nz-tab>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
.system-main-container{
|
||||
.self-main-content{
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ant-tabs{
|
||||
.self-row-box{
|
||||
display: inline-block;
|
||||
|
||||
@@ -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;
|
||||
@@ -157,29 +207,94 @@ export class PersonalSettingsComponent implements OnInit {
|
||||
saveSelf(){
|
||||
console.log(this.targetList);
|
||||
console.log(this.sourceList);
|
||||
this.sourceList.forEach((item,index)=>{
|
||||
item.COL_ORDER=index+1
|
||||
})
|
||||
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 colsParams:any={
|
||||
envCode:'web',
|
||||
groupCode:'userSettingCol',
|
||||
id:'',
|
||||
settingContent:settingContent,
|
||||
userid:''
|
||||
}
|
||||
console.log(colsParams)
|
||||
let params:any='';
|
||||
//判断settingContent是否有列设置项，如果没有则push进去，如果有，则替换原来的settingContent
|
||||
if(this.colsData&&this.colsData.length>0){
|
||||
this.colsData.forEach(item=>{
|
||||
item.userid='';
|
||||
item.settingContent=settingContent;
|
||||
})
|
||||
params=this.colsData[0];
|
||||
console.log(8888)
|
||||
}else{
|
||||
console.log(99999)
|
||||
params=colsParams;
|
||||
}
|
||||
this.isLoadingSave=true;
|
||||
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(`保存成功!`);
|
||||
this.queryTable();
|
||||
}
|
||||
})
|
||||
}
|
||||
//重置数据
|
||||
cancelSelf(){
|
||||
this.sourceList=[];
|
||||
//等后台接口出来后，重置this.sourceList this.targetList
|
||||
//深度复制
|
||||
this.list.forEach(item=>{
|
||||
let option=this.deepCopy(item);
|
||||
this.sourceList.push(option);
|
||||
})
|
||||
this.listsCope(this.list,this.sourceList);
|
||||
this.targetList=[];
|
||||
}
|
||||
//获取列表
|
||||
queryTable():void{
|
||||
console.log(1111)
|
||||
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
|
||||
this.statusParamsData.status=1;
|
||||
this.http.get('/adminapi/settings/uisettings',{groupCode:'userSettingCol'}).subscribe((json)=>{
|
||||
if(json.is_success){
|
||||
console.log(2222)
|
||||
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{
|
||||
alert(json.err_msg)
|
||||
this.statusParamsData.status=0;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user