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=[]; } }