cdia/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/system-management/operation-logs/operation-logs.component.html
+67 -63
View File
@@ -1,63 +1,67 @@
<div class="system-main-container">
<div class="user-manage">
<div class="system-main-content card" id="main-box">
<div class="search-box">
<div nz-row>
<div nz-col nzSpan="8">
<nz-form-item >
<nz-form-label class="left">关键词</nz-form-label>
<nz-form-control nzSpan="17">
<input nz-input [(ngModel)]='search.keyword' placeholder="请输入关键词">
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="9">
<nz-form-item >
<nz-form-label class="left">时间</nz-form-label>
<nz-form-control nzSpan="20">
<nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="6">
<nz-form-item >
<nz-form-control nzSpan="24">
<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>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
<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'>
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>模块</th>
<th>操作内容</th>
<th>操作时间</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data;let i=index">
<td>{{i+1}}</td>
<td>{{item.user_name}}</td>
<td>{{item.model_name}}</td>
<td>{{item.summary}}</td>
<td>{{item.log_datetime| date:'yyyy-MM-dd HH:mm:ss'}}</td>
</tr>
</tbody>
</nz-table>
<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>
</div>
</div>
</div>
</div>
</div>
<div class="system-main-container">
<div class="user-manage">
<div class="system-main-content card" id="main-box-logs">
<div class="search-box">
<div class="dip mr-5">
<nz-form-item>
<nz-form-label class="mr-1" style="vertical-align:top">关键词</nz-form-label>
<nz-form-control style="display:inline-block">
<input nz-input [(ngModel)]='search.keyword' placeholder="请输入关键词">
</nz-form-control>
</nz-form-item>
</div>
<div class="dip mr-4">
<nz-form-item>
<nz-form-label class="mr-1" style="vertical-align:top">时间</nz-form-label>
<nz-form-control style="display:inline-block">
<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-item>
</div>
<div class="dip">
<nz-form-item>
<nz-form-control>
<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>
</nz-form-control>
</nz-form-item>
</div>
</div>
<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'>
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>模块</th>
<th>操作内容</th>
<th>操作时间</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataSet.data;let i=index">
<td>{{i+1}}</td>
<td>{{item.user_name}}</td>
<td>{{item.model_name}}</td>
<td>{{item.summary}}</td>
<td>{{item.log_datetime| date:'yyyy-MM-dd HH:mm:ss'}}</td>
</tr>
</tbody>
</nz-table>
<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>
</div>
</div>
</div>
</div>
</div>
src/app/pages/system-management/operation-logs/operation-logs.component.ts
+117 -85
View File
@@ -3,94 +3,126 @@ import { HttpClientService } from '../../../services/http-client.service';
import { Router } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'app-operation-logs',
templateUrl: './operation-logs.component.html',
styleUrls: ['./operation-logs.component.scss']
selector: 'app-operation-logs',
templateUrl: './operation-logs.component.html',
styleUrls: ['./operation-logs.component.scss']
})
export class OperationLogsComponent implements OnInit {
collectionSize:any ;
public tableData:any=[];
statusParamsTable:any={ //获取用户列表接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
public search:any={
page_index:'1',
page_size:'10',
date_start:'',
date_end:'',
keyword:'',
orgId:'',
}
logType:any={
'LOGIN':'登录',
'LOGOUT':'退出',
'USER_UI_SET':'修改用户设置',
'USER_INFO_OPT':'增删改用户信息',
};
optType:any={
'ADD':'新增',
'UPDATE':'修改',
'DELETE':'删除',
};
dateRange = [];
constructor(
private http:HttpClientService,
private router:Router,
private message: NzMessageService,
) { }
collectionSize: any;
public tableData: any = [];
statusParamsTable: any = { //获取用户列表接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status: 1,
}
public search: any = {
page_index: '1',
page_size: '10',
date_start: '',
date_end: '',
keyword: '',
orgId: '',
}
logType: any = {
'LOGIN': '登录',
'LOGOUT': '退出',
'USER_UI_SET': '修改用户设置',
'USER_INFO_OPT': '增删改用户信息',
};
optType: any = {
'ADD': '新增',
'UPDATE': '修改',
'DELETE': '删除',
};
ngOnInit() {
this.queryTable();
}
onChange(result: Date): void {
this.search.date_start=this.changeDate(result[0]);
this.search.date_end=this.changeDate(result[1]);
}
//日期时间处理
changeDate(time){
var date = new Date(time);
var Y = date.getFullYear()+'';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1)+'';
var D = (date.getDate()<10?'0'+date.getDate():date.getDate())+'';
var h = (date.getHours()<10?'0'+date.getHours():date.getHours())+'' ;
var m = (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes())+'';
var s = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds()+'';
return Y+'-'+M+'-'+D+' '+h+':'+m+':'+s;
}
//重置，重置搜索条件
reset(){
this.search.page_index=1;
this.search.page_size=10;
this.search.keyword='';
this.search.date_start='';
this.search.date_end='';
this.queryTable();
}
//获取列表
queryTable():void{
this.statusParamsTable.status=1;
this.tableData=[];
this.http.get('/sysapi/oplog/list',this.search).subscribe((json)=>{
if(json.is_success){
this.tableData=json.body.recordList;
this.collectionSize=json.body.recordCount;
if(json.body.recordList&&json.body.recordList.length>0){
this.statusParamsTable.status=3;
}else{
this.statusParamsTable.status=4;
}
}else{
this.statusParamsTable.status=0;
}
})
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
}
endOpen: boolean = false;
startValue: Date = null;
endValue: Date = null;
constructor(
private http: HttpClientService,
) { }
ngOnInit() {
this.queryTable();
}
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) {
var date = new Date(time);
var Y = date.getFullYear() + '';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '';
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '';
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + '';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + '';
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() + '';
return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
}
//重置，重置搜索条件
reset() {
this.search.page_index = 1;
this.search.page_size = 10;
this.search.keyword = '';
this.search.date_start = '';
this.startValue = null;
this.search.date_end = '';
this.endValue = null;
}
//获取列表
queryTable(): void {
this.statusParamsTable.status = 1;
this.tableData = [];
this.http.get('/sysapi/oplog/list', this.search).subscribe((json) => {
if (json.is_success) {
this.tableData = json.body.recordList;
this.collectionSize = json.body.recordCount;
if (json.body.recordList && json.body.recordList.length > 0) {
this.statusParamsTable.status = 3;
} else {
this.statusParamsTable.status = 4;
}
} else {
this.statusParamsTable.status = 0;
}
})
}
//翻页
pageChange(event) {
this.search.page_index = event;
this.queryTable();
}
}