Merge branch 'develop-2'
This commit is contained in:
zhouyuejun
+6
-2
@@ -35,11 +35,15 @@
|
|||||||
"node_modules/bootstrap/scss/bootstrap.scss",
|
"node_modules/bootstrap/scss/bootstrap.scss",
|
||||||
"node_modules/font-awesome/scss/font-awesome.scss",
|
"node_modules/font-awesome/scss/font-awesome.scss",
|
||||||
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
|
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
|
||||||
"src/styles.scss"
|
"src/styles.scss",
|
||||||
|
"node_modules/ztree/css/zTreeStyle/zTreeStyle.css"
|
||||||
],
|
],
|
||||||
"scripts": [
|
"scripts": [
|
||||||
"node_modules/jquery/dist/jquery.min.js",
|
"node_modules/jquery/dist/jquery.min.js",
|
||||||
"node_modules/bootstrap/dist/js/bootstrap.min.js"
|
"node_modules/bootstrap/dist/js/bootstrap.min.js",
|
||||||
|
"node_modules/ztree/js/jquery.ztree.core.min.js",
|
||||||
|
"node_modules/ztree/js/jquery.ztree.excheck.min.js",
|
||||||
|
"node_modules/ztree/js/jquery.ztree.exhide.min.js"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
|
|||||||
Generated
+5
@@ -6546,6 +6546,11 @@
|
|||||||
"tslib": "1.9.3"
|
"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": {
|
"nice-try": {
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
"resolved": "http://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
|
"resolved": "http://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
|
||||||
|
|||||||
+4
-2
@@ -3,7 +3,7 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"ng": "ng",
|
"ng": "ng",
|
||||||
"start": "ng serve",
|
"start": "ng serve --proxy-config proxy.conf.json",
|
||||||
"build": "ng build",
|
"build": "ng build",
|
||||||
"test": "ng test",
|
"test": "ng test",
|
||||||
"lint": "ng lint",
|
"lint": "ng lint",
|
||||||
@@ -25,8 +25,10 @@
|
|||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"jquery": "^3.3.1",
|
"jquery": "^3.3.1",
|
||||||
"ng-zorro-antd": "^1.8.0",
|
"ng-zorro-antd": "^1.8.0",
|
||||||
|
"ngx-color-picker": "^7.0.1",
|
||||||
"rxjs": "^6.0.0",
|
"rxjs": "^6.0.0",
|
||||||
"zone.js": "^0.8.26"
|
"zone.js": "^0.8.26",
|
||||||
|
"ztree": "^3.5.24"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "~0.6.1",
|
"@angular-devkit/build-angular": "~0.6.1",
|
||||||
|
|||||||
@@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
|
||||||
|
"/sysapi":{
|
||||||
|
"target": "http://130.120.3.231:91",
|
||||||
|
"secure": false,
|
||||||
|
"changeOrigin": true,
|
||||||
|
"ws": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
.system-main-container {
|
||||||
|
padding: 20px 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
.system-main-body{
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card{
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-box{
|
||||||
|
float: left;
|
||||||
|
padding: 20px;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 目录树样式 */
|
||||||
|
:host /deep/ ul.tree{
|
||||||
|
padding-left: 25px;
|
||||||
|
line-height: 30px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
:host /deep/ .node-value{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 10px;
|
||||||
|
border-radius:3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
:host /deep/ .node-selected{
|
||||||
|
background-color: #dcdcdc
|
||||||
|
}
|
||||||
+11
@@ -0,0 +1,11 @@
|
|||||||
|
<div class="color-settings-container">
|
||||||
|
<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)='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>
|
||||||
+29
@@ -0,0 +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: 444px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+25
@@ -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<ColorSettingsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ ColorSettingsComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ColorSettingsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
+57
@@ -0,0 +1,57 @@
|
|||||||
|
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=[]; //源数据
|
||||||
|
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=>{
|
||||||
|
let option=this.deepCopy(item);
|
||||||
|
this.DataList.push(option);
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
//设置颜色 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);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
+15
@@ -0,0 +1,15 @@
|
|||||||
|
<div class="flight-agency-container">
|
||||||
|
<p>请选择需要提示的航班代理</p>
|
||||||
|
<div class="radio-group-box">
|
||||||
|
<nz-radio-group [(ngModel)]="radioValue">
|
||||||
|
<label nz-radio nzValue="1">全部代理</label>
|
||||||
|
<label nz-radio nzValue="2">机场代理</label>
|
||||||
|
<label nz-radio nzValue="3">国航代理</label>
|
||||||
|
<label nz-radio nzValue="4">川航代理</label>
|
||||||
|
</nz-radio-group>
|
||||||
|
</div>
|
||||||
|
<div class="self-row-footer">
|
||||||
|
<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>
|
||||||
+15
@@ -0,0 +1,15 @@
|
|||||||
|
.flight-agency-container{
|
||||||
|
.radio-group-box{
|
||||||
|
|
||||||
|
}
|
||||||
|
.self-row-footer{
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 46%;
|
||||||
|
margin-top: 100px;
|
||||||
|
transform:translate(-50%,0);
|
||||||
|
button:first-child {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+25
@@ -0,0 +1,25 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FlightAgencyComponent } from './flight-agency.component';
|
||||||
|
|
||||||
|
describe('FlightAgencyComponent', () => {
|
||||||
|
let component: FlightAgencyComponent;
|
||||||
|
let fixture: ComponentFixture<FlightAgencyComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ FlightAgencyComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(FlightAgencyComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-flight-agency',
|
||||||
|
templateUrl: './flight-agency.component.html',
|
||||||
|
styleUrls: ['./flight-agency.component.scss']
|
||||||
|
})
|
||||||
|
export class FlightAgencyComponent implements OnInit {
|
||||||
|
public radioValue='1';
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
//保存
|
||||||
|
save(){
|
||||||
|
|
||||||
|
}
|
||||||
|
//取消
|
||||||
|
cancel(){
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
+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=[];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
+53
-58
@@ -1,64 +1,59 @@
|
|||||||
<div class="main-container">
|
<div class="system-main-container">
|
||||||
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
|
<div class="card">
|
||||||
<nz-tab nzTitle="自定义显示列">
|
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
|
||||||
<div class="self-row-box">
|
<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>
|
||||||
|
</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 class="self-row-content">
|
</div>
|
||||||
<div class="ant-transfer-list">
|
</div>
|
||||||
<div class="ant-transfer-list-header">可选列</div>
|
<div class="move-btn-box">
|
||||||
<div class="ant-transfer-list-body">
|
<button (click)='moveUpDown(3)' nzTitle="置顶" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledUpTop' nzType="primary"><i nz-icon type="arrow-up" theme="outline"></i></button>
|
||||||
<ul class="ant-transfer-list-content">
|
<button (click)='moveUpDown(1)' nzTitle="上移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableUp' nzType="primary"><i nz-icon type="up" theme="outline"></i></button>
|
||||||
<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>
|
<button (click)='moveUpDown(2)' nzTitle="下移" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disableDown' nzType="primary"><i nz-icon type="down" theme="outline"></i></button>
|
||||||
<div class="self-row-tips" *ngIf="!sourceList.length>0">暂无数据</div>
|
<button (click)='moveUpDown(4)' nzTitle="置底" nzPlacement="right" nz-tooltip class="move-btn" nz-button nzSize="large" [disabled]='disabledDownBtm' nzType="primary"><i nz-icon type="arrow-down" theme="outline"></i></button>
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="move-btn-box">
|
<div class="self-row-footer">
|
||||||
<button (click)='moveCross(3)' 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)='saveSelf()' nzTitle="保存配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
|
||||||
<button (click)='moveCross(1)' 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)='cancelSelf()' nzTitle="取消配置" nzPlacement="top" nz-tooltip nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
|
||||||
<button (click)='moveCross(2)' 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)' 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">已选列</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 class="move-btn-box">
|
|
||||||
<button (click)='moveUpDown(3)' class="move-btn" nz-button nzSize="large" [disabled]='disabledUpTop' nzType="primary"><i nz-icon type="arrow-up" theme="outline"></i></button>
|
|
||||||
<button (click)='moveUpDown(1)' class="move-btn" nz-button nzSize="large" [disabled]='disableUp' nzType="primary"><i nz-icon type="up" theme="outline"></i></button>
|
|
||||||
<button (click)='moveUpDown(2)' class="move-btn" nz-button nzSize="large" [disabled]='disableDown' nzType="primary"><i nz-icon type="down" theme="outline"></i></button>
|
|
||||||
<button (click)='moveUpDown(4)' class="move-btn" nz-button nzSize="large" [disabled]='disabledDownBtm' nzType="primary"><i nz-icon type="arrow-down" theme="outline"></i></button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="self-row-footer">
|
</nz-tab>
|
||||||
<button (click)='saveSelf()' nz-button nzSize="large" nzType="primary"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
|
<nz-tab nzTitle="消息警示提醒">
|
||||||
<button (click)='cancelSelf()' nz-button nzSize="large" nzType="default"><i class="fa fa-times" aria-hidden="true"></i> 取消</button>
|
<app-msg-alert-warning></app-msg-alert-warning>
|
||||||
</div>
|
</nz-tab>
|
||||||
</div>
|
<nz-tab nzTitle="消息声音提醒">
|
||||||
</nz-tab>
|
<app-msg-alert-warning></app-msg-alert-warning>
|
||||||
<nz-tab nzTitle="消息警示提醒">
|
</nz-tab>
|
||||||
消息警示提醒
|
<nz-tab nzTitle="航班代理">
|
||||||
</nz-tab>
|
<app-flight-agency></app-flight-agency>
|
||||||
<nz-tab nzTitle="消息声音提醒">
|
</nz-tab>
|
||||||
消息声音提醒
|
<nz-tab nzTitle="颜色配置">
|
||||||
</nz-tab>
|
<app-color-settings></app-color-settings>
|
||||||
<nz-tab nzTitle="航班代理">
|
</nz-tab>
|
||||||
航班代理
|
</nz-tabset>
|
||||||
</nz-tab>
|
</div>
|
||||||
<nz-tab nzTitle="ORMS启动路径">
|
|
||||||
ORMS启动路径
|
|
||||||
</nz-tab>
|
|
||||||
<nz-tab nzTitle="颜色配置">
|
|
||||||
颜色配置
|
|
||||||
</nz-tab>
|
|
||||||
<nz-tab nzTitle="刷新设置">
|
|
||||||
刷新设置
|
|
||||||
</nz-tab>
|
|
||||||
</nz-tabset>
|
|
||||||
</div>
|
</div>
|
||||||
+33
-32
@@ -1,38 +1,39 @@
|
|||||||
.main-container{
|
.system-main-container{
|
||||||
padding: 30px 20px;
|
.ant-tabs{
|
||||||
width: 100%;
|
.self-row-box{
|
||||||
height: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
.self-row-box{
|
|
||||||
display: inline-block;
|
|
||||||
.self-row-footer{
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
.self-row-footer{
|
||||||
margin-left: 46%;
|
display: inline-block;
|
||||||
margin-top: 40px;
|
position: relative;
|
||||||
transform:translate(-50%,0);
|
margin-left: 46%;
|
||||||
button:first-child {
|
margin-top: 40px;
|
||||||
margin-right: 20px;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.move-btn-box{
|
.self-row-content{
|
||||||
display: inline-block;
|
.ant-transfer-list{
|
||||||
margin: 0 10px;
|
width: 300px;
|
||||||
position: relative;
|
height: 500px;
|
||||||
top: 60px;
|
.self-row-tips{
|
||||||
.move-btn{
|
text-align: center;
|
||||||
display: block;
|
position: relative;
|
||||||
margin-bottom: 8px
|
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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { HttpClientService } from '../../../services/http-client.service';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-personal-settings',
|
selector: 'app-personal-settings',
|
||||||
templateUrl: './personal-settings.component.html',
|
templateUrl: './personal-settings.component.html',
|
||||||
styleUrls: ['./personal-settings.component.scss']
|
styleUrls: ['./personal-settings.component.scss','../../main.scss'],
|
||||||
|
providers:[HttpClientService]
|
||||||
})
|
})
|
||||||
export class PersonalSettingsComponent implements OnInit {
|
export class PersonalSettingsComponent implements OnInit {
|
||||||
public list: any[] = []; //原始数据项
|
public list: any[] = []; //原始数据项
|
||||||
@@ -16,23 +19,38 @@ export class PersonalSettingsComponent implements OnInit {
|
|||||||
public disabledUpTop:any=true; //置顶控制按钮可选状态 true 禁止选择 false可选择
|
public disabledUpTop:any=true; //置顶控制按钮可选状态 true 禁止选择 false可选择
|
||||||
public disabledDownBtm:any=true; //最低控制按钮可选状态 true 禁止选择 false可选择
|
public disabledDownBtm:any=true; //最低控制按钮可选状态 true 禁止选择 false可选择
|
||||||
public selectedType:any=''; //当前选中项所在项目 1在可选项 2在已选项框
|
public selectedType:any=''; //当前选中项所在项目 1在可选项 2在已选项框
|
||||||
|
public moveIndex:any='false';
|
||||||
|
public search:any={
|
||||||
|
page_index:'1',
|
||||||
|
page_size:'10',
|
||||||
|
role_name:'',
|
||||||
|
}
|
||||||
|
|
||||||
moveIndex:any='false';
|
constructor(
|
||||||
|
private http:HttpClientService,
|
||||||
constructor() { }
|
) { }
|
||||||
|
|
||||||
ngOnInit() {
|
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.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"} ]
|
/*
|
||||||
|
备注：实际数据中，把原始数据录入到临时变量中，方便取消按钮，重置数据
|
||||||
|
这里数组复制不能用浅复制sourceList=list;而是要用深度复制，this.sourceList=[...this.list]
|
||||||
|
*/
|
||||||
|
this.list.forEach(item=>{
|
||||||
|
let option=this.deepCopy(item);
|
||||||
|
this.sourceList.push(option);
|
||||||
|
})
|
||||||
|
this.queryTable();
|
||||||
}
|
}
|
||||||
//保存-自定义列显示保存
|
//对象数组深度复制
|
||||||
saveSelf(){
|
deepCopy(data){
|
||||||
console.log(this.targetList);
|
let itemObj={
|
||||||
|
bgColor:'#fafafa',
|
||||||
}
|
};
|
||||||
//重置数据
|
for(let key in data){
|
||||||
cancelSelf(){
|
itemObj[key]=data[key];
|
||||||
|
}
|
||||||
|
return itemObj;
|
||||||
}
|
}
|
||||||
//上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断
|
//上下调整项目顺序 type 1上移 2下移 3置顶 4置底 要做头尾判断
|
||||||
moveUpDown(type){
|
moveUpDown(type){
|
||||||
@@ -135,6 +153,33 @@ export class PersonalSettingsComponent implements OnInit {
|
|||||||
this.disabledUpTop=true;
|
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=[];
|
||||||
|
}
|
||||||
|
//获取列表
|
||||||
|
queryTable():void{
|
||||||
|
console.log(1111)
|
||||||
|
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
|
||||||
|
if(json.is_success){
|
||||||
|
console.log(2222)
|
||||||
|
}else{
|
||||||
|
alert(json.err_msg)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { ColorPickerModule } from 'ngx-color-picker';
|
||||||
import { SystemManagementComponent } from './system-management.component';
|
import { SystemManagementComponent } from './system-management.component';
|
||||||
import { PersonalSettingsComponent } from './personal-settings/personal-settings.component';
|
import { PersonalSettingsComponent } from './personal-settings/personal-settings.component';
|
||||||
import { RoleManagementComponent } from './role-management/role-management.component';
|
import { RoleManagementComponent } from './role-management/role-management.component';
|
||||||
@@ -8,22 +10,26 @@ import { DepartmentManagementComponent } from './department-management/departmen
|
|||||||
import { OperationLogsComponent } from './operation-logs/operation-logs.component';
|
import { OperationLogsComponent } from './operation-logs/operation-logs.component';
|
||||||
import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
|
import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component';
|
||||||
|
|
||||||
|
|
||||||
import { SystemManagementRouting } from './system-management-routing.module'
|
import { SystemManagementRouting } from './system-management-routing.module'
|
||||||
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
|
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
|
||||||
|
|
||||||
import { registerLocaleData } from '@angular/common';
|
import { registerLocaleData } from '@angular/common';
|
||||||
import zh from '@angular/common/locales/zh';
|
import zh from '@angular/common/locales/zh';
|
||||||
registerLocaleData(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';
|
||||||
|
import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-agency.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule,
|
CommonModule,
|
||||||
SystemManagementRouting,
|
SystemManagementRouting,
|
||||||
/** 导入 ng-zorro-antd 模块 **/
|
NgZorroAntdModule,
|
||||||
NgZorroAntdModule
|
ColorPickerModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
|
FormsModule
|
||||||
],
|
],
|
||||||
/** 配置 ng-zorro-antd 国际化 **/
|
|
||||||
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
|
|
||||||
declarations: [
|
declarations: [
|
||||||
SystemManagementComponent,
|
SystemManagementComponent,
|
||||||
PersonalSettingsComponent,
|
PersonalSettingsComponent,
|
||||||
@@ -31,6 +37,12 @@ registerLocaleData(zh);
|
|||||||
UserManagementComponent,
|
UserManagementComponent,
|
||||||
DepartmentManagementComponent,
|
DepartmentManagementComponent,
|
||||||
OperationLogsComponent,
|
OperationLogsComponent,
|
||||||
DataSynchronizeComponent]
|
DataSynchronizeComponent,
|
||||||
|
ColorSettingsComponent,
|
||||||
|
MsgAlertWarningComponent,
|
||||||
|
FlightAgencyComponent,
|
||||||
|
|
||||||
|
],
|
||||||
|
providers : [ { provide: NZ_I18N, useValue: zh_CN } ],
|
||||||
})
|
})
|
||||||
export class SystemManagementModule { }
|
export class SystemManagementModule { }
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
<p>
|
<div class="system-main-container">
|
||||||
user-management works!
|
<div class="user-manage">
|
||||||
</p>
|
<div class="tree-box">
|
||||||
|
<ul id="treeDemo" class="ztree"></ul>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,5 @@
|
|||||||
|
.user-manage{
|
||||||
|
.card{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,15 +1,98 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { HttpClientService } from '../../../services/http-client.service';
|
||||||
|
|
||||||
|
import 'ztree';
|
||||||
|
declare var $: any;
|
||||||
|
declare var jQuery: any;
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-user-management',
|
selector: 'app-user-management',
|
||||||
templateUrl: './user-management.component.html',
|
templateUrl: './user-management.component.html',
|
||||||
styleUrls: ['./user-management.component.scss']
|
styleUrls: ['./user-management.component.scss','../../main.scss']
|
||||||
})
|
})
|
||||||
export class UserManagementComponent implements OnInit {
|
export class UserManagementComponent implements OnInit {
|
||||||
|
treeSelected:any; //树模型-当前选中项
|
||||||
|
public search:any={
|
||||||
|
page_index:'1',
|
||||||
|
page_size:'10',
|
||||||
|
real_name:'',
|
||||||
|
login_name:'',
|
||||||
|
orgId:'',
|
||||||
|
}
|
||||||
|
parentNode:any;
|
||||||
|
parentName:any;
|
||||||
|
isTreeTop:any=false; //判断是否为树最顶层
|
||||||
|
|
||||||
constructor() { }
|
constructor(
|
||||||
|
private http:HttpClientService,
|
||||||
|
) { }
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
}
|
this.initTree();
|
||||||
|
}
|
||||||
|
//树模型参数设置
|
||||||
|
public zNodes: any[];
|
||||||
|
setting = {
|
||||||
|
data: {
|
||||||
|
simpleData: {
|
||||||
|
enable: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
view: {
|
||||||
|
showLine: false,
|
||||||
|
dblClickExpand: false,
|
||||||
|
showIcon:true
|
||||||
|
},
|
||||||
|
callback: {
|
||||||
|
//节点点击事件
|
||||||
|
onClick: (event, treeId, treeNode, clickFlag) => {
|
||||||
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||||
|
zTree.expandNode(treeNode);
|
||||||
|
this.treeSelected=treeNode;
|
||||||
|
this.search.orgId=this.treeSelected.id;
|
||||||
|
this.parentNode=this.treeSelected.getParentNode();
|
||||||
|
if(!this.parentNode){
|
||||||
|
this.isTreeTop=true;
|
||||||
|
}else{
|
||||||
|
this.isTreeTop=false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//节点展开事件
|
||||||
|
onExpand: (event, treeId, treeNode) => {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
//新树模型
|
||||||
|
initTree(){
|
||||||
|
//获取目录列表
|
||||||
|
this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
|
||||||
|
if(json.is_success&&json.body){
|
||||||
|
let children=[];
|
||||||
|
for(var i=0;i<json.body.length;i++){
|
||||||
|
let option=json.body[i];
|
||||||
|
option.name=option.organization;
|
||||||
|
if(option.pid){
|
||||||
|
option.pId=option.pid;
|
||||||
|
}else{
|
||||||
|
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
json.body.push({
|
||||||
|
name:"全部机构",
|
||||||
|
isParent:true,
|
||||||
|
open:true,
|
||||||
|
id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.zNodes=json.body;
|
||||||
|
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
|
||||||
|
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||||
|
let node = zTree.getNodes();
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -60,15 +60,27 @@ export class HttpClientService {
|
|||||||
* @param url
|
* @param url
|
||||||
* @param options
|
* @param options
|
||||||
*/
|
*/
|
||||||
get(url: string, options: {
|
get(url: string,params?:object, options?: {
|
||||||
headers?: HttpHeaders | { [header: string]: string | string[] },
|
headers?: HttpHeaders | { [header: string]: string | string[] },
|
||||||
observe?: HttpObserve,
|
observe?: HttpObserve,
|
||||||
params?: HttpParams | { [param: string]: string | string[] },
|
params?: HttpParams | { [param: string]: string | string[] },
|
||||||
reportProgress?: boolean,
|
reportProgress?: boolean,
|
||||||
responseType?: 'arraybuffer' | 'blob' | 'json' | 'text',
|
responseType?: 'arraybuffer' | 'blob' | 'json' | 'text',
|
||||||
withCredentials?: boolean,
|
withCredentials?: boolean,
|
||||||
} = {}): Observable<any> {
|
} ): Observable<any> {
|
||||||
return this.commonProcess(this.httpClient.get(url, options = {}));
|
let paramsString = [];
|
||||||
|
url = url + '?'
|
||||||
|
let t = Math.random();
|
||||||
|
if (params&¶ms) {
|
||||||
|
for (const key in params) {
|
||||||
|
if (params[key] !== '') {
|
||||||
|
paramsString.push([key, params[key]].join('='))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this.commonProcess(this.httpClient.get(encodeURI(url + paramsString.join('&') + '&t=' + t), options = {}));
|
||||||
|
}else{
|
||||||
|
return this.commonProcess(this.httpClient.get(url + 't=' + t, options = {}));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user