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

This commit is contained in:
liweijin
2018-11-13 14:22:31 +08:00
parent d299e0ee1d
commit 58eff4ad23
10 changed files with 308 additions and 47 deletions
@@ -1,11 +1,11 @@
<div class="color-settings-container">
<div class="data-list-box" *ngFor='let item of list'>
<div class="text-box"
[colorPicker]="color"
(colorPickerChange)="item.color=$event;item.bgColor=$event" [ngStyle]="{'background-color':item.bgColor,'color':item.color}">航班时间</div>
<div class="data-list-box" *ngFor='let item of DataList'>
<div class="text-box" [ngStyle]="{'background-color':item.bgColor}">航班时间</div>
<button [colorPicker]="color" (colorPickerChange)="colorPicker($event,item)" class="setting-bg-color" nz-button nzType="default"><i nz-icon type="setting" theme="outline"></i>设置背景</button>
<button (click)="resetBgColor(item)" nz-button nzType="default"><i nz-icon type="reload" theme="outline"></i>恢复默认值</button>
</div>
<div class="color-picker-box">
<button (click)='colorPicker(1)' class="setting-font" nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 设置字体</button>
<button (click)='colorPicker(2)' nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 设置背景</button>
<button (click)='save()' nzTitle="保存设置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancel()' nzTitle="取消设置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div>
</div>
</div>
@@ -1,22 +1,29 @@
.color-settings-container{
max-width: 800px;
.data-list-box{
display: inline-block;
.text-box{
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
width: 100px;
height: 40px;
line-height: 40px;
width: 524px;
height: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
}
.color-picker-box{
margin: 0 auto;
margin-top: 40px;
.setting-font{
.setting-bg-color{
margin-right: 10px;
}
}
.color-picker-box{
display: inline-block;
position: relative;
top: 40px;
left: 50%;
transform:translate(-50%,0);
button:first-child{
margin-right: 20px;
}
}
}
@@ -8,21 +8,50 @@ import { Component, OnInit } from '@angular/core';
export class ColorSettingsComponent implements OnInit {
cmykColor:any;
color:any;
list:any=[];
list:any=[]; //源数据
DataList:any=[]; //临时项目列表,如果保存就传改变量,如果取消,则重置为list的源数据
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"} ] ;
//深度复制
this.list.forEach(item=>{
item.color='#333';
item.bgColor='#fafafa';
let option=this.deepCopy(item);
this.DataList.push(option);
})
}
//设置颜色
colorPicker(type){
//设置颜色 1设置字体颜色 2设置背景颜色 3重置字体颜色
colorPicker(event,item){
item.bgColor=event;
}
//背景色恢复默认值
resetBgColor(item){
item.bgColor='#fafafa';
}
//对象数组深度复制
deepCopy(data){
let itemObj={
bgColor:'#fafafa',
};
for(let key in data){
itemObj[key]=data[key];
}
return itemObj;
}
//保存
save(){
console.log(this.list)
console.log(this.DataList)
}
//取消
cancel(){
this.DataList=[];
//深度复制
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.DataList.push(option);
})
}
}
@@ -0,0 +1,35 @@
<div class="msg-alert-main-container">
<div class="self-row-box">
<div class="self-row-content">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">可选列({{sourceList.length}}</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,1)" [ngClass]="{'bg':moveIndex==i&&selectedType==1}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of sourceList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(sourceList.length>0)">暂无数据</div>
</ul>
</div>
</div>
<div class="move-btn-box">
<button (click)='moveCross(3)' nzTitle="全部右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(sourceList.length>0)' nzType="primary"><i nz-icon type="double-right" theme="outline"></i></button>
<button (click)='moveCross(1)' nzTitle="右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableRight||sourceList.length==0' nzType="primary"><i nz-icon type="right" theme="outline"></i></button>
<button (click)='moveCross(2)' nzTitle="左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledLeft||targetList.length==0' nzType="primary"><i nz-icon type="left" theme="outline"></i></button>
<button (click)='moveCross(4)' nzTitle="全部左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(targetList.length>0)' nzType="primary"><i nz-icon type="double-left" theme="outline"></i></button>
</div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">已选列({{targetList.length}}</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,2)" [ngClass]="{'bg':moveIndex==i&&selectedType==2}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of targetList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!(targetList.length>0)">暂无数据</div>
</ul>
</div>
</div>
</div>
<div class="self-row-footer">
<button (click)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
<button (click)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
</div>
</div>
</div>
@@ -0,0 +1,42 @@
.msg-alert-main-container{
.self-row-box{
display: inline-block;
.self-row-footer{
display: inline-block;
position: relative;
margin-left: 50%;
margin-top: 40px;
transform:translate(-50%,0);
button:first-child {
margin-right: 20px;
}
}
.self-row-content{
.ant-transfer-list{
width: 300px;
height: 500px;
.self-row-tips{
text-align: center;
position: relative;
top: 190px;
}
.ant-transfer-list-header{
font-weight: bold;
}
}
.move-btn-box{
display: inline-block;
margin: 0 10px;
position: relative;
top: 60px;
.move-btn{
display: block;
margin-bottom: 8px
}
}
}
}
}
.bg{
background-color: #e6f7ff;
}
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MsgAlertWarningComponent } from './msg-alert-warning.component';
describe('MsgAlertWarningComponent', () => {
let component: MsgAlertWarningComponent;
let fixture: ComponentFixture<MsgAlertWarningComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MsgAlertWarningComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MsgAlertWarningComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -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=[];
}
}
@@ -2,29 +2,28 @@
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
<nz-tab nzTitle="自定义显示列">
<div class="self-row-box">
<div class="self-row-content">
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">可选列({{sourceList.length}}</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,1)" [ngClass]="{'bg':moveIndex==i&&selectedType==1}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of sourceList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!sourceList.length>0">暂无数据</div>
<div class="self-row-tips" *ngIf="!(sourceList.length>0)">暂无数据</div>
</ul>
</div>
</div>
<div class="move-btn-box">
<button (click)='moveCross(3)' nzTitle="全部右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!sourceList.length>0' nzType="primary"><i nz-icon type="double-right" theme="outline"></i></button>
<button (click)='moveCross(3)' nzTitle="全部右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(sourceList.length>0)' nzType="primary"><i nz-icon type="double-right" theme="outline"></i></button>
<button (click)='moveCross(1)' nzTitle="右移" nzPlacement="left" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableRight||sourceList.length==0' nzType="primary"><i nz-icon type="right" theme="outline"></i></button>
<button (click)='moveCross(2)' nzTitle="左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledLeft||targetList.length==0' nzType="primary"><i nz-icon type="left" theme="outline"></i></button>
<button (click)='moveCross(4)' nzTitle="全部左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!targetList.length>0' nzType="primary"><i nz-icon type="double-left" theme="outline"></i></button>
<button (click)='moveCross(4)' nzTitle="全部左移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='!(targetList.length>0)' nzType="primary"><i nz-icon type="double-left" theme="outline"></i></button>
</div>
<div class="ant-transfer-list">
<div class="ant-transfer-list-header">已选列({{targetList.length}}</div>
<div class="ant-transfer-list-body">
<ul class="ant-transfer-list-content">
<li (click)="selectNode(item,i,2)" [ngClass]="{'bg':moveIndex==i&&selectedType==2}" class="ant-transfer-list-content-item ng-star-inserted" *ngFor="let item of targetList;let i=index"><label class="ant-checkbox-wrapper ng-untouched ng-pristine ng-valid"><span>{{item.COL_CN}}</span></label></li>
<div class="self-row-tips" *ngIf="!targetList.length>0">暂无数据</div>
<div class="self-row-tips" *ngIf="!(targetList.length>0)">暂无数据</div>
</ul>
</div>
@@ -43,10 +42,10 @@
</div>
</nz-tab>
<nz-tab nzTitle="消息警示提醒">
消息警示提醒
<app-msg-alert-warning></app-msg-alert-warning>
</nz-tab>
<nz-tab nzTitle="消息声音提醒">
消息声音提醒
<app-msg-alert-warning></app-msg-alert-warning>
</nz-tab>
<nz-tab nzTitle="航班代理">
航班代理
@@ -16,8 +16,7 @@ export class PersonalSettingsComponent implements OnInit {
public disabledUpTop:any=true; //置顶控制按钮可选状态 true 禁止选择 false可选择
public disabledDownBtm:any=true; //最低控制按钮可选状态 true 禁止选择 false可选择
public selectedType:any=''; //当前选中项所在项目 1在可选项 2在已选项框
moveIndex:any='false';
public moveIndex:any='false';
constructor() { }
@@ -27,18 +26,20 @@ export class PersonalSettingsComponent implements OnInit {
备注:实际数据中,把原始数据录入到临时变量中,方便取消按钮,重置数据
这里数组复制不能用浅复制sourceList=list;而是要用深度复制,this.sourceList=[...this.list]
*/
this.sourceList=[...this.list];
this.list.forEach(item=>{
let option=this.deepCopy(item);
this.sourceList.push(option);
})
}
//保存-自定义列显示保存
saveSelf(){
console.log(this.targetList);
console.log(this.sourceList);
}
//重置数据
cancelSelf(){
//等后台接口出来后,重置this.sourceList this.targetList
this.sourceList=this.list;
this.targetList=[];
//对象数组深度复制
deepCopy(data){
let itemObj={
bgColor:'#fafafa',
};
for(let key in data){
itemObj[key]=data[key];
}
return itemObj;
}
//上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断
moveUpDown(type){
@@ -141,6 +142,22 @@ export class PersonalSettingsComponent implements OnInit {
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=[];
}
}
@@ -16,6 +16,7 @@ import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);
import { ColorSettingsComponent } from './personal-settings/color-settings/color-settings.component';
import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/msg-alert-warning.component';
@NgModule({
imports: [
@@ -25,8 +26,6 @@ import { ColorSettingsComponent } from './personal-settings/color-settings/color
NgZorroAntdModule,
ColorPickerModule
],
/** 配置 ng-zorro-antd 国际化 **/
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
declarations: [
SystemManagementComponent,
PersonalSettingsComponent,
@@ -36,6 +35,9 @@ import { ColorSettingsComponent } from './personal-settings/color-settings/color
OperationLogsComponent,
DataSynchronizeComponent,
ColorSettingsComponent,
]
MsgAlertWarningComponent,
],
/** 配置 ng-zorro-antd 国际化 **/
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
})
export class SystemManagementModule { }