个人设置-颜色设置、消息警示提醒开发

2018-11-13 14:22:31 +08:00
parent d299e0ee1d
commit 58eff4ad23
10 changed files with 308 additions and 47 deletions
@@ -0,0 +1,105 @@
+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=[];
+	}
+
+}