285 lines
13 KiB
TypeScript
285 lines
13 KiB
TypeScript
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',
|
|
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: '',
|
|
}
|
|
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() {
|
|
// 页面监听 动态改变表单高度
|
|
$('#main-box-setting').css('height', (document.documentElement.clientHeight - 106 + 'px'));
|
|
$(window).resize(function () {
|
|
$('#main-box-setting').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_WIDTH": "85px" },
|
|
{ "COL_CODE": "GCTM", "COL_CN": "登机结束", "COL_ORDER": "2", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "BOTM", "COL_CN": "登机开始", "COL_ORDER": "3", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "ABDG", "COL_CN": "登机桥", "COL_ORDER": "4", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "AOTM_D", "COL_CN": "撤桥时间", "COL_ORDER": "5", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "AOTM_A", "COL_CN": "靠桥时间", "COL_ORDER": "6", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "BELT", "COL_CN": "转盘号", "COL_ORDER": "7", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "CHKC", "COL_CN": "值机柜台", "COL_ORDER": "8", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "CCTM", "COL_CN": "值机结束", "COL_ORDER": "9", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "COTM", "COL_CN": "值机开始", "COL_ORDER": "10", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "CHTM_OFF", "COL_CN": "下轮挡", "COL_ORDER": "11", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "CHTM_ON", "COL_CN": "上轮挡", "COL_ORDER": "12", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "LACL", "COL_CN": "最后通知时间", "COL_ORDER": "13", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "CHUT", "COL_CN": "行李传送带", "COL_ORDER": "14", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "RENO", "COL_CN": "飞机号", "COL_ORDER": "15", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "ALCD", "COL_CN": "航空公司", "COL_ORDER": "16", "COL_WIDTH": "185px" },
|
|
{ "COL_CODE": "ACTT", "COL_CN": "实际到达／出发", "COL_ORDER": "17", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "PSST", "COL_CN": "计划机位", "COL_ORDER": "18", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "ESTT", "COL_CN": "预计到达／出发 ", "COL_ORDER": "19", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "MVIN", "COL_CN": "到达/出发", "COL_ORDER": "20", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "ERUT", "COL_CN": "航线", "COL_ORDER": "21", "COL_WIDTH": "245px" },
|
|
{ "COL_CODE": "FLNO", "COL_CN": "航班号", "COL_ORDER": "22", "COL_WIDTH": "140px" },
|
|
{ "COL_CODE": "FTSS", "COL_CN": "运营状态", "COL_ORDER": "23", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "FLIN", "COL_CN": "航线类别", "COL_ORDER": "24", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "SODT", "COL_CN": "计划到达／出发", "COL_ORDER": "25", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "TRML", "COL_CN": "航站楼", "COL_ORDER": "26", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "FLTY", "COL_CN": "航班类别", "COL_ORDER": "27", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "GTDT", "COL_CN": "登机门号 ", "COL_ORDER": "28", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "PADT", "COL_CN": "前站起飞时间", "COL_ORDER": "29", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "CSFT", "COL_CN": "共享航班号", "COL_ORDER": "30", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "STND", "COL_CN": "当前机位", "COL_ORDER": "31", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "FLDT", "COL_CN": "航班日期", "COL_ORDER": "32", "COL_WIDTH": "85px" },
|
|
{ "COL_CODE": "ARSF", "COL_CN": "到港共享航班", "COL_ORDER": "33", "COL_WIDTH": "120px" },
|
|
{ "COL_CODE": "DESF", "COL_CN": "离港共享航班", "COL_ORDER": "34", "COL_WIDTH": "120px" },
|
|
]
|
|
/*
|
|
备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
|
|
这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
|
|
*/
|
|
|
|
this.queryTable();
|
|
}
|
|
//对象数组深度复制
|
|
deepCopy(data) {
|
|
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;
|
|
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;
|
|
|
|
}
|
|
//保存-自定义列显示保存
|
|
/*
|
|
各模块groupCode命名定义
|
|
groupCode:'userSettingColor',
|
|
groupCode:'userSettingCol',
|
|
groupCode:'userSettingMsgAlert',
|
|
groupCode:'userSettingMsgVoice',
|
|
groupCode:'userSettingFlyAgency',
|
|
*/
|
|
saveSelf() {
|
|
this.sourceList.forEach((item, index) => {
|
|
item.COL_ORDER = index + 1
|
|
})
|
|
this.targetList.forEach((item, index) => {
|
|
item.COL_ORDER = index + 1
|
|
})
|
|
let content = {
|
|
defaultData: this.defaultCols,
|
|
sourceList: this.sourceList,
|
|
targetList: this.targetList,
|
|
}
|
|
let settingContent = JSON.stringify(content);
|
|
let params: any = {
|
|
envCode: 'web',
|
|
groupCode: 'userSettingCol',
|
|
settingContent: settingContent,
|
|
}
|
|
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(`保存失败!`);
|
|
}
|
|
})
|
|
}
|
|
//重置数据
|
|
cancelSelf() {
|
|
this.queryTable();
|
|
}
|
|
//获取列表
|
|
queryTable(): void {
|
|
this.statusParamsData.status = 1;
|
|
this.list = [];
|
|
this.sourceList = [];
|
|
this.targetList = [];
|
|
this.colsData = '';
|
|
this.http.get('/adminapi/settings/uisettings', { groupCode: 'userSettingCol' }).subscribe((json) => {
|
|
if (json.is_success) {
|
|
this.statusParamsData.status = 3;
|
|
let data = json.body;
|
|
this.colsData = json.body;
|
|
//当data为空是，初始化
|
|
this.listsCope(this.defaultCols, this.list);
|
|
//判断data是否为空，空的时候则为最初的初始化；如果不为空，则有设置过个人设置的某个模块
|
|
if (data && data.length > 0) {
|
|
data.forEach(item => {
|
|
if (item.settingContent) {
|
|
let content = JSON.parse(item.settingContent);
|
|
this.listsCope(content.sourceList, this.sourceList);
|
|
this.listsCope(content.targetList, this.targetList);
|
|
} else {
|
|
this.listsCope(this.list, this.sourceList);
|
|
}
|
|
})
|
|
} else {
|
|
//接口数据为空，说明各个模块设置都为未初始化,可选项则为默认全部列
|
|
this.listsCope(this.list, this.sourceList);
|
|
}
|
|
} else {
|
|
this.statusParamsData.status = 0;
|
|
}
|
|
})
|
|
}
|
|
}
|