From 58eff4ad236defd38c2b1d916c82cce9d9efd1ea Mon Sep 17 00:00:00 2001 From: liweijin <610336687@qq.com> Date: Tue, 13 Nov 2018 14:22:31 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E8=AE=BE=E7=BD=AE-=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E8=AE=BE=E7=BD=AE=E3=80=81=E6=B6=88=E6=81=AF=E8=AD=A6?= =?UTF-8?q?=E7=A4=BA=E6=8F=90=E9=86=92=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../color-settings.component.html | 14 +-- .../color-settings.component.scss | 25 +++-- .../color-settings.component.ts | 45 ++++++-- .../msg-alert-warning.component.html | 35 ++++++ .../msg-alert-warning.component.scss | 42 +++++++ .../msg-alert-warning.component.spec.ts | 25 +++++ .../msg-alert-warning.component.ts | 105 ++++++++++++++++++ .../personal-settings.component.html | 13 +-- .../personal-settings.component.ts | 43 ++++--- .../system-management.module.ts | 8 +- 10 files changed, 308 insertions(+), 47 deletions(-) create mode 100644 src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.html create mode 100644 src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.scss create mode 100644 src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.spec.ts create mode 100644 src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.ts diff --git a/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html index 5b1c668..8c55ef5 100644 --- a/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html +++ b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html @@ -1,11 +1,11 @@
-
-
航班时间
+
+
航班时间
+ +
- - + +
-
\ No newline at end of file +
diff --git a/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss index e176a0a..ecc9bad 100644 --- a/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss +++ b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss @@ -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; + } + } } \ No newline at end of file diff --git a/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts index 8237003..e0a7cab 100644 --- a/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts +++ b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts @@ -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); + }) + } + } diff --git a/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.html b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.html new file mode 100644 index 0000000..79cf422 --- /dev/null +++ b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.html @@ -0,0 +1,35 @@ +
+
+
+
+
可选列（{{sourceList.length}}）
+
+
    +
    • +
    暂无数据
    +
+
+
+
+ + + + +
+
+
已选列（{{targetList.length}}）
+
+
    +
    • +
    暂无数据
    +
+ +
+
+
+
+ + +
+
+
\ No newline at end of file diff --git a/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.scss b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.scss new file mode 100644 index 0000000..772e344 --- /dev/null +++ b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.scss @@ -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; +} \ No newline at end of file diff --git a/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.spec.ts b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.spec.ts new file mode 100644 index 0000000..3f6839c --- /dev/null +++ b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MsgAlertWarningComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MsgAlertWarningComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.ts b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.ts new file mode 100644 index 0000000..970f55b --- /dev/null +++ b/src/app/pages/system-management/personal-settings/msg-alert-warning/msg-alert-warning.component.ts @@ -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=[]; + } + +} diff --git a/src/app/pages/system-management/personal-settings/personal-settings.component.html b/src/app/pages/system-management/personal-settings/personal-settings.component.html index f0502cd..ea55692 100644 --- a/src/app/pages/system-management/personal-settings/personal-settings.component.html +++ b/src/app/pages/system-management/personal-settings/personal-settings.component.html @@ -2,29 +2,28 @@
-
可选列（{{sourceList.length}}）
    • -
    暂无数据
    +
    暂无数据
- + - +
已选列（{{targetList.length}}）
    • -
    暂无数据
    +
    暂无数据
@@ -43,10 +42,10 @@
- 消息警示提醒 + - 消息声音提醒 + 航班代理 diff --git a/src/app/pages/system-management/personal-settings/personal-settings.component.ts b/src/app/pages/system-management/personal-settings/personal-settings.component.ts index c29f53e..ad9dca2 100644 --- a/src/app/pages/system-management/personal-settings/personal-settings.component.ts +++ b/src/app/pages/system-management/personal-settings/personal-settings.component.ts @@ -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=[]; + } } \ No newline at end of file diff --git a/src/app/pages/system-management/system-management.module.ts b/src/app/pages/system-management/system-management.module.ts index 8c43d01..351380a 100644 --- a/src/app/pages/system-management/system-management.module.ts +++ b/src/app/pages/system-management/system-management.module.ts @@ -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 { }