From d299e0ee1df5794a2833b9e42ee980c8ee57d300 Mon Sep 17 00:00:00 2001 From: liweijin <610336687@qq.com> Date: Tue, 13 Nov 2018 09:48:48 +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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 5 ++ package.json | 1 + .../color-settings.component.html | 11 ++++ .../color-settings.component.scss | 22 +++++++ .../color-settings.component.spec.ts | 25 ++++++++ .../color-settings.component.ts | 28 +++++++++ .../personal-settings.component.html | 26 ++++---- .../personal-settings.component.scss | 61 +++++++++++-------- .../personal-settings.component.ts | 16 +++-- .../system-management.module.ts | 9 ++- 10 files changed, 157 insertions(+), 47 deletions(-) create mode 100644 src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html create mode 100644 src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss create mode 100644 src/app/pages/system-management/personal-settings/color-settings/color-settings.component.spec.ts create mode 100644 src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts diff --git a/package-lock.json b/package-lock.json index ed543a1..dababff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6546,6 +6546,11 @@ "tslib": "1.9.3" } }, + "ngx-color-picker": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-7.0.1.tgz", + "integrity": "sha512-QPv4LA0OE8fWBguM06mMMILufBvV2KbROT5CvFPNxW1Z1TwOuE6nixXHi0k2aPSszHKsjppxZlVc2kXOmv5voQ==" + }, "nice-try": { "version": "1.0.5", "resolved": "http://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index c8c4ec3..6d0f912 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "font-awesome": "^4.7.0", "jquery": "^3.3.1", "ng-zorro-antd": "^1.8.0", + "ngx-color-picker": "^7.0.1", "rxjs": "^6.0.0", "zone.js": "^0.8.26" }, 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 new file mode 100644 index 0000000..5b1c668 --- /dev/null +++ b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.html @@ -0,0 +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 new file mode 100644 index 0000000..e176a0a --- /dev/null +++ b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.scss @@ -0,0 +1,22 @@ +.color-settings-container{ + .data-list-box{ + display: inline-block; + .text-box{ + display: inline-block; + margin-right: 10px; + margin-bottom: 10px; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + cursor: pointer; + } + } + .color-picker-box{ + margin: 0 auto; + margin-top: 40px; + .setting-font{ + margin-right: 10px; + } + } +} \ No newline at end of file diff --git a/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.spec.ts b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.spec.ts new file mode 100644 index 0000000..0a4bc29 --- /dev/null +++ b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ColorSettingsComponent } from './color-settings.component'; + +describe('ColorSettingsComponent', () => { + let component: ColorSettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ColorSettingsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ColorSettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 0000000..8237003 --- /dev/null +++ b/src/app/pages/system-management/personal-settings/color-settings/color-settings.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-color-settings', + templateUrl: './color-settings.component.html', + styleUrls: ['./color-settings.component.scss'] +}) +export class ColorSettingsComponent implements OnInit { + cmykColor:any; + color:any; + list:any=[]; + 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'; + }) + + } + //设置颜色 + colorPicker(type){ + + } + + +} 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 3a23f6d..f0502cd 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 @@ -5,7 +5,7 @@
-
可选列
+
可选列（{{sourceList.length}}）
    • @@ -14,13 +14,13 @@
- - - - + + + +
-
已选列
+
已选列（{{targetList.length}}）
    • @@ -30,15 +30,15 @@
- - - - + + + +
- - + +
@@ -55,7 +55,7 @@ ORMS启动路径 - 颜色配置 + 刷新设置 diff --git a/src/app/pages/system-management/personal-settings/personal-settings.component.scss b/src/app/pages/system-management/personal-settings/personal-settings.component.scss index 0d5bed4..76b13c8 100644 --- a/src/app/pages/system-management/personal-settings/personal-settings.component.scss +++ b/src/app/pages/system-management/personal-settings/personal-settings.component.scss @@ -2,37 +2,44 @@ padding: 30px 20px; width: 100%; height: 100%; + min-height: 300px; background-color: #fff; - .self-row-box{ - display: inline-block; - .self-row-footer{ + .ant-tabs{ + height: 100%; + .self-row-box{ display: inline-block; - position: relative; - margin-left: 46%; - 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; + .self-row-footer{ + display: inline-block; + position: relative; + margin-left: 46%; + margin-top: 40px; + transform:translate(-50%,0); + button:first-child { + margin-right: 20px; } } - .move-btn-box{ - display: inline-block; - margin: 0 10px; - position: relative; - top: 60px; - .move-btn{ - display: block; - margin-bottom: 8px + .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 + } } } } 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 d9da7e1..c29f53e 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 @@ -22,17 +22,23 @@ export class PersonalSettingsComponent implements OnInit { constructor() { } ngOnInit() { - //备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据 - this.sourceList=[{"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=[{"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.sourceList=[...this.list]; } //保存-自定义列显示保存 saveSelf(){ console.log(this.targetList); - + console.log(this.sourceList); } - //重置数据 + //重置数据 cancelSelf(){ - + //等后台接口出来后，重置this.sourceList this.targetList + this.sourceList=this.list; + this.targetList=[]; } //上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断 moveUpDown(type){ diff --git a/src/app/pages/system-management/system-management.module.ts b/src/app/pages/system-management/system-management.module.ts index 9f7bd64..8c43d01 100644 --- a/src/app/pages/system-management/system-management.module.ts +++ b/src/app/pages/system-management/system-management.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { ColorPickerModule } from 'ngx-color-picker'; import { SystemManagementComponent } from './system-management.component'; import { PersonalSettingsComponent } from './personal-settings/personal-settings.component'; import { RoleManagementComponent } from './role-management/role-management.component'; @@ -14,13 +15,15 @@ import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; import { registerLocaleData } from '@angular/common'; import zh from '@angular/common/locales/zh'; registerLocaleData(zh); +import { ColorSettingsComponent } from './personal-settings/color-settings/color-settings.component'; @NgModule({ imports: [ CommonModule, SystemManagementRouting, /** 导入 ng-zorro-antd 模块 **/ - NgZorroAntdModule + NgZorroAntdModule, + ColorPickerModule ], /** 配置 ng-zorro-antd 国际化 **/ providers : [ { provide: NZ_I18N, useValue: zh_CN } ], @@ -31,6 +34,8 @@ registerLocaleData(zh); UserManagementComponent, DepartmentManagementComponent, OperationLogsComponent, - DataSynchronizeComponent] + DataSynchronizeComponent, + ColorSettingsComponent, + ] }) export class SystemManagementModule { }