个人设置-颜色设置、消息警示提醒开发
This commit is contained in:
liweijin
+35
@@ -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>
|
||||
+42
@@ -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;
|
||||
}
|
||||
+25
@@ -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();
|
||||
});
|
||||
});
|
||||
+105
@@ -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=[];
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user