操作日志和数据同步用户体验及逻辑优化

This commit is contained in:
zhouyuejun
2019-02-26 11:14:31 +08:00
parent f231197046
commit 430d096d92
9 changed files with 316 additions and 237 deletions
@@ -1,28 +1,35 @@
<div class="system-main-container"> <div class="system-main-container">
<div class="system-main-content card"> <div class="system-main-content card">
<div nz-row> <div>
<div nz-col nzSpan="8"> <div class="dip mr-5">
<nz-form-item> <nz-form-item>
<nz-form-label class="left">请求的消息类型</nz-form-label> <nz-form-label class="mr-1" style="vertical-align:top">请求的消息类型</nz-form-label>
<nz-form-control nzSpan="10"> <nz-form-control style="display:inline-block">
<nz-select style="width: 160px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose"> <nz-select style="width: 200px;" [(ngModel)]="selectedValue" nzAllowClear nzPlaceHolder="Choose">
<nz-option nzValue="1" nzLabel="日航班计划"></nz-option> <nz-option nzValue="1" nzLabel="日航班计划"></nz-option>
</nz-select> </nz-select>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div nz-col nzSpan="9"> <div class="dip">
<nz-form-item> <nz-form-item>
<nz-form-label class="left">时间</nz-form-label> <nz-form-label class="mr-1" style="vertical-align:top">时间</nz-form-label>
<nz-form-control nzSpan="20"> <nz-form-control style="display:inline-block">
<nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> <nz-date-picker class="mr-2" [nzShowToday]="false" [nzDisabledDate]="disabledStartDate" [nzShowTime]="{nzFormat:'HH:mm'}" nzFormat="yyyy-MM-dd HH:mm"
[(ngModel)]="startValue" nzPlaceHolder="请选择开始日期" (ngModelChange)="onStartChange($event)"
(nzOnOpenChange)="handleStartOpenChange($event)">
</nz-date-picker>
<nz-date-picker [nzShowToday]="false" [nzDisabledDate]="disabledEndDate" [nzShowTime]="{nzFormat:'HH:mm'}" nzFormat="yyyy-MM-dd HH:mm"
[(ngModel)]="endValue" nzPlaceHolder="请选择结束时间" [nzOpen]="endOpen" (ngModelChange)="onEndChange($event)"
(nzOnOpenChange)="handleEndOpenChange($event)">
</nz-date-picker>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<div class="user-footer"> <div class="user-footer">
<button (click)='save()' nz-button nzType="primary" class="mr10" [disabled]='!dateRange'>确定</button> <button (click)='save()' nz-button nzType="primary" class="mr10" [disabled]='!dateRange'>确定</button>
<button (click)='cancel()' nz-button nzType="default">取消</button> <!-- <button (click)='cancel()' nz-button nzType="default">取消</button> -->
</div> </div>
</div> </div>
</div> </div>
@@ -18,16 +18,50 @@ export class DataSynchronizeComponent implements OnInit {
constructor( constructor(
private http: HttpClientService, private http: HttpClientService,
private message: NzMessageService, private message: NzMessageService,
private modal: NzModalService,
) { } ) { }
endOpen: boolean = false;
startValue: Date = null;
endValue: Date = null;
ngOnInit() { ngOnInit() {
} }
onChange(result: Date): void {
this.search.startDate=this.changeDate(result[0]);
this.search.endDate=this.changeDate(result[1]);
disabledStartDate = (startValue: Date): boolean => {
if (!startValue || !this.endValue) {
return false;
} }
return startValue.getTime() >= this.endValue.getTime();
};
disabledEndDate = (endValue: Date): boolean => {
if (!endValue || !this.startValue) {
return false;
}
return endValue.getTime() <= this.startValue.getTime();
};
onStartChange(date: Date): void {
this.startValue = date;
this.search.startDate = this.changeDate(date)
}
onEndChange(date: Date): void {
this.endValue = date;
this.search.endDate = this.changeDate(date)
console.log(this.search.endDate)
}
handleStartOpenChange(open: boolean): void {
if (!open && this.startValue) {
this.endOpen = true;
}
}
handleEndOpenChange(open: boolean): void {
this.endOpen = open;
}
//日期时间处理 //日期时间处理
changeDate(time) { changeDate(time) {
var date = new Date(time); var date = new Date(time);
@@ -37,7 +71,7 @@ export class DataSynchronizeComponent implements OnInit {
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ''; var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + '';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ''; var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + '';
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() + ''; var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() + '';
return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s; return Y + '-' + M + '-' + D + ' ' + h + ':' + m ;
} }
//保存 //保存
@@ -1,35 +1,38 @@
<div class="system-main-container"> <div class="system-main-container">
<div class="user-manage"> <div class="user-manage">
<div class="system-main-content card" id="main-box"> <div class="system-main-content card" id="main-box-logs">
<div class="search-box"> <div class="search-box">
<div nz-row> <div class="dip mr-5">
<div nz-col nzSpan="8">
<nz-form-item> <nz-form-item>
<nz-form-label class="left">关键词</nz-form-label> <nz-form-label class="mr-1" style="vertical-align:top">关键词</nz-form-label>
<nz-form-control nzSpan="17"> <nz-form-control style="display:inline-block">
<input nz-input [(ngModel)]='search.keyword' placeholder="请输入关键词"> <input nz-input [(ngModel)]='search.keyword' placeholder="请输入关键词">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div nz-col nzSpan="9"> <div class="dip mr-4">
<nz-form-item> <nz-form-item>
<nz-form-label class="left">时间</nz-form-label> <nz-form-label class="mr-1" style="vertical-align:top">时间</nz-form-label>
<nz-form-control nzSpan="20"> <nz-form-control style="display:inline-block">
<nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker> <nz-date-picker [nzShowToday]="false" class="mr-2" [nzDisabledDate]="disabledStartDate" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss"
[(ngModel)]="startValue" nzPlaceHolder="请选择开始时间" (ngModelChange)="onStartChange($event)"
(nzOnOpenChange)="handleStartOpenChange($event)">
</nz-date-picker>
<nz-date-picker [nzShowToday]="false" [nzDisabledDate]="disabledEndDate" nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss"
[(ngModel)]="endValue" nzPlaceHolder="请选择结束时间" [nzOpen]="endOpen"
(ngModelChange)="onEndChange($event)" (nzOnOpenChange)="handleEndOpenChange($event)">
</nz-date-picker>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div nz-col nzSpan="6"> <div class="dip">
<nz-form-item> <nz-form-item>
<nz-form-control nzSpan="24"> <nz-form-control>
<button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></i>查询</button> <button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
<button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button> <button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
</div>
</div> </div>
<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status> <app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'> <div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
@@ -54,7 +57,8 @@
</tbody> </tbody>
</nz-table> </nz-table>
<div class="page-box" *ngIf="statusParamsTable.status==3"> <div class="page-box" *ngIf="statusParamsTable.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination> <nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)'
[nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div> </div>
</div> </div>
@@ -3,7 +3,6 @@ import { HttpClientService } from '../../../services/http-client.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd'; import { NzMessageService } from 'ng-zorro-antd';
@Component({ @Component({
selector: 'app-operation-logs', selector: 'app-operation-logs',
templateUrl: './operation-logs.component.html', templateUrl: './operation-logs.component.html',
@@ -34,21 +33,53 @@ export class OperationLogsComponent implements OnInit {
'UPDATE': '修改', 'UPDATE': '修改',
'DELETE': '删除', 'DELETE': '删除',
}; };
dateRange = [];
endOpen: boolean = false;
startValue: Date = null;
endValue: Date = null;
constructor( constructor(
private http: HttpClientService, private http: HttpClientService,
private router:Router,
private message: NzMessageService,
) { } ) { }
ngOnInit() { ngOnInit() {
this.queryTable(); this.queryTable();
} }
onChange(result: Date): void {
this.search.date_start=this.changeDate(result[0]);
this.search.date_end=this.changeDate(result[1]);
disabledStartDate = (startValue: Date): boolean => {
if (!startValue || !this.endValue) {
return false;
} }
return startValue.getTime() >= this.endValue.getTime();
};
disabledEndDate = (endValue: Date): boolean => {
if (!endValue || !this.startValue) {
return false;
}
return endValue.getTime() <= this.startValue.getTime();
};
onStartChange(date: Date): void {
this.startValue = date;
this.search.date_start = this.changeDate(date)
}
onEndChange(date: Date): void {
this.endValue = date;
this.search.date_end = this.changeDate(date)
}
handleStartOpenChange(open: boolean): void {
if (!open && this.startValue) {
this.endOpen = true;
}
}
handleEndOpenChange(open: boolean): void {
this.endOpen = open;
}
//日期时间处理 //日期时间处理
changeDate(time) { changeDate(time) {
var date = new Date(time); var date = new Date(time);
@@ -66,8 +97,9 @@ export class OperationLogsComponent implements OnInit {
this.search.page_size = 10; this.search.page_size = 10;
this.search.keyword = ''; this.search.keyword = '';
this.search.date_start = ''; this.search.date_start = '';
this.startValue = null;
this.search.date_end = ''; this.search.date_end = '';
this.queryTable(); this.endValue = null;
} }
//获取列表 //获取列表
queryTable(): void { queryTable(): void {
@@ -1,5 +1,5 @@
<div class="system-main-container"> <div class="system-main-container">
<div class="card " id="main-box"> <div class="card " id="main-box-setting">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" class="self-main-content"> <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" class="self-main-content">
<nz-tab nzTitle="自定义显示列"> <nz-tab nzTitle="自定义显示列">
<div class="self-row-box"> <div class="self-row-box">
@@ -41,9 +41,9 @@ export class PersonalSettingsComponent implements OnInit {
ngOnInit() { ngOnInit() {
// 页面监听 动态改变表单高度 // 页面监听 动态改变表单高度
$('#main-box').css('height', (document.documentElement.clientHeight - 106 + 'px')); $('#main-box-setting').css('height', (document.documentElement.clientHeight - 106 + 'px'));
$(window).resize(function () { $(window).resize(function () {
$('#main-box').css('height', (document.documentElement.clientHeight - 106 + 'px')); $('#main-box-setting').css('height', (document.documentElement.clientHeight - 106 + 'px'));
}) })
//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=[{"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.defaultCols = [ this.defaultCols = [
@@ -57,14 +57,15 @@ export class RoleManagementComponent implements OnInit {
}) })
} }
//重置,重置搜索条件 //重置,重置搜索条件
reset(){ // reset(){
this.search.page_index=1; // this.search.page_index=1;
this.search.page_size=10; // this.search.page_size=10;
this.search.role_name=''; // this.search.role_name='';
this.queryTable(); // this.queryTable();
} // }
//获取列表 //获取列表
queryTable():void{ queryTable():void{
this.search.page_index=1;
this.statusParamsTable.status=1; this.statusParamsTable.status=1;
this.tableData=[]; this.tableData=[];
this.http.get('/sysapi/setting/role/list',this.search).subscribe((json)=>{ this.http.get('/sysapi/setting/role/list',this.search).subscribe((json)=>{
@@ -5,7 +5,7 @@
<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul> <ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
</div> </div>
<!-- <div nz-col nzSpan="1"></div> --> <!-- <div nz-col nzSpan="1"></div> -->
<div class="system-main-content card" id="main-box"> <div class="system-main-content card" id="main-box-user">
<div class="search-box"> <div class="search-box">
<div class="dip mr-4"> <div class="dip mr-4">
<nz-form-item> <nz-form-item>
@@ -45,10 +45,10 @@ export class UserManagementComponent implements OnInit {
ngOnInit() { ngOnInit() {
// 页面监听 动态改变表单高度 // 页面监听 动态改变表单高度
$('#tree-box').css('height',(document.documentElement.clientHeight-106+'px')); $('#tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px')); $('#main-box-user').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){ $(window).resize(function(){
$('#tree-box').css('height',(document.documentElement.clientHeight-126+'px')); $('#tree-box').css('height',(document.documentElement.clientHeight-126+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-126+'px')); $('#main-box-user').css('height',(document.documentElement.clientHeight-126+'px'));
}) })
this.initTree(); this.initTree();
this.queryTable(); this.queryTable();
@@ -96,15 +96,16 @@ export class UserManagementComponent implements OnInit {
this.visible = false; this.visible = false;
} }
//重置,重置搜索条件 //重置,重置搜索条件
reset(){ // reset(){
this.search.page_index=1; // this.search.page_index=1;
this.search.page_size=10; // this.search.page_size=10;
this.search.real_name=''; // this.search.real_name='';
this.search.login_name=''; // this.search.login_name='';
this.queryTable(); // this.queryTable();
} // }
//获取列表 //获取列表
queryTable():void{ queryTable():void{
this.search.page_index=1;
this.statusParamsTable.status=1; this.statusParamsTable.status=1;
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{ this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
if(json.is_success){ if(json.is_success){