106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
import { Component, OnInit } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-msg-alert-warning',
|
|
templateUrl: './msg-alert-warning.component.html',
|
|
styleUrls: ['./msg-alert-warning.component.scss']
|
|
})
|
|
export class MsgAlertWarningComponent implements OnInit {
|
|
public list: any[] = []; //原始数据项
|
|
public sourceList: any[] = []; //临时数据项-可选项
|
|
public targetList:any=[]; //临时数据项-已选项
|
|
public disableRight:any=true; //单个右移控制按钮可选状态 true 禁止选择 false可选择
|
|
public disabledLeft:any=true; //单个左移控制按钮可选状态 true 禁止选择 false可选择
|
|
public selectedType:any=''; //当前选中项所在项目 1在可选项 2在已选项框
|
|
public moveIndex:any='false';
|
|
|
|
constructor() { }
|
|
|
|
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"} ]
|
|
/*
|
|
备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
|
|
这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
|
|
*/
|
|
//深度复制
|
|
this.list.forEach(item=>{
|
|
let option=this.deepCopy(item);
|
|
this.sourceList.push(option);
|
|
})
|
|
}
|
|
|
|
//对象数组深度复制
|
|
deepCopy(data){
|
|
let itemObj={
|
|
bgColor:'#fafafa',
|
|
};
|
|
for(let key in data){
|
|
itemObj[key]=data[key];
|
|
}
|
|
return itemObj;
|
|
}
|
|
//左右选择项目 type 1右移 2左移 3全部右移 4全部左移
|
|
moveCross(type){
|
|
let index=this.moveIndex;
|
|
if(type==1){
|
|
let item=this.sourceList[index];
|
|
this.sourceList.splice(index,1)
|
|
this.targetList.push(item);
|
|
if(this.sourceList.length==0){
|
|
this.disableRight=true;
|
|
}
|
|
}else if(type==2){
|
|
let item=this.targetList[index];
|
|
this.targetList.splice(index,1)
|
|
this.sourceList.push(item);
|
|
if(this.targetList.length==0){
|
|
this.disabledLeft=true;
|
|
}
|
|
}else if(type==3){
|
|
this.sourceList.forEach(item=>{
|
|
this.targetList.push(item)
|
|
})
|
|
this.sourceList=[];
|
|
}else if(type==4){
|
|
this.targetList.forEach(item=>{
|
|
this.sourceList.push(item)
|
|
})
|
|
this.targetList=[];
|
|
}
|
|
this.moveIndex='false';
|
|
this.selectedType='';
|
|
this.disabledLeft=true;
|
|
this.disableRight=true;
|
|
}
|
|
//选中选框中的项 type 1可选框的项 2已选框的项
|
|
selectNode(item,index,type){
|
|
this.selectedType=type;
|
|
this.moveIndex=index;
|
|
if(type==1){
|
|
this.disabledLeft=true;
|
|
this.disableRight=false;
|
|
}else if(type==2){
|
|
this.disableRight=true;
|
|
this.disabledLeft=false;
|
|
}
|
|
|
|
}
|
|
//保存-自定义列显示保存
|
|
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.targetList=[];
|
|
}
|
|
|
|
}
|