airport-chengdu-web/src/app/pages/system-management/personal-settings/personal-settings.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClientService } from '../../../services/http-client.service';


@Component({
  selector: 'app-personal-settings',
  templateUrl: './personal-settings.component.html',
  styleUrls: ['./personal-settings.component.scss','../../main.scss'],
  providers:[HttpClientService]
})
export class PersonalSettingsComponent implements OnInit {
	public list: any[] = []; //原始数据项
	public sourceList: any[] = [];	//临时数据项-可选项
	public targetList:any=[];	//临时数据项-已选项
	public disableRight:any=true; //单个右移控制按钮可选状态 true 禁止选择  false可选择
	public disabledLeft:any=true; //单个左移控制按钮可选状态 true 禁止选择  false可选择
	public disableUp:any=true;  //上移控制按钮可选状态 true 禁止选择  false可选择
	public disableDown:any=true; //下移控制按钮可选状态 true 禁止选择  false可选择
	public disabledUpTop:any=true; //置顶控制按钮可选状态 true 禁止选择  false可选择
	public disabledDownBtm:any=true; //最低控制按钮可选状态 true 禁止选择  false可选择
	public selectedType:any=''; //当前选中项所在项目  1在可选项  2在已选项框
	public moveIndex:any='false';
	public search:any={
		page_index:'1',
		page_size:'10',
		role_name:'',
	}

	constructor(
		private http:HttpClientService,
		) { }

	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);
		})
		this.queryTable();
	}
	//对象数组深度复制
	deepCopy(data){
		let itemObj={
			bgColor:'#fafafa',
		};
		for(let key in data){
			itemObj[key]=data[key];
		}
		return itemObj;
	}
	//上下调整项目顺序  type 1上移  2下移  3置顶  4置底 要做头尾判断
	moveUpDown(type){
		let index=this.moveIndex;
		if(type==1){
			this.targetList[index] = this.targetList.splice(index-1, 1, this.targetList[index])[0];
	    	this.moveIndex--;
		}else if(type==2){
			this.targetList[index] = this.targetList.splice(index+1, 1, this.targetList[index])[0];
	    	this.moveIndex++;
		}else if(type==3){
			let item=this.targetList[index];
			this.targetList.splice(index,1)
			this.targetList.unshift(item);
			this.moveIndex=0;
		}else if(type==4){
			this.targetList.push(this.targetList[index]);
			this.targetList.splice(index,1);
			this.moveIndex=this.targetList.length-1;
		}
		this.btnStatusContrl();
		
	}
	//左右选择项目 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;
		this.sortBtnDisabled();
	}
	//选中选框中的项 type 1可选框的项  2已选框的项
	selectNode(item,index,type){
		this.selectedType=type;
		this.moveIndex=index;
		if(type==1){
			this.disabledLeft=true;
			this.disableRight=false;
			this.sortBtnDisabled();
		}else if(type==2){
			this.disableRight=true;
			this.disabledLeft=false;
			this.btnStatusContrl();
		}
		
	}
	//右侧上下移懂按钮禁用状态控制
	btnStatusContrl(){
		let len=this.targetList.length;
		if(len<2){
			this.disabledUpTop=true;
			this.disableDown=true;
		}
		if(this.moveIndex==0){
			this.disabledUpTop=true;
			this.disableUp=true;
		}else{
			this.disabledUpTop=false
			this.disableUp=false;
		}
		if(this.moveIndex==len-1){
			this.disabledDownBtm=true;
			this.disableDown=true;
		}else{
			this.disabledDownBtm=false;
			this.disableDown=false;
		}
	}
	//排序按钮状态统一控制
	sortBtnDisabled(){
		this.disableDown=true;
		this.disableUp=true;
		this.disabledDownBtm=true;
		this.disabledUpTop=true;

	}
	//保存-自定义列显示保存
	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=[];
	}
	//获取列表
	queryTable():void{
		console.log(1111)
	this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
			if(json.is_success){
				console.log(2222)
			}else{
				alert(json.err_msg)
			}
		})
	}

}