各模块card高度设置

This commit is contained in:
liweijin
2018-12-19 18:01:10 +08:00
parent 651bad5fc5
commit ac6fa58583
16 changed files with 84 additions and 64 deletions
+1 -1
View File
@@ -39,11 +39,11 @@
}
}
.card{
height: 100%;
background: #fff;
padding: 20px;
box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.15);
border-radius: 0;
margin-bottom: 20px;
}
.tree-box{
@@ -61,11 +61,11 @@ export class DepartmentManagementComponent implements OnInit {
}
ngOnInit() {
$('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('.main-content').css('height',(document.documentElement.clientHeight-106+'px'));
$('.tree-box').css('height',(document.documentElement.clientHeight-126+'px'));
$('.main-content').css('height',(document.documentElement.clientHeight-126+'px'));
$(window).resize(function(){
$('.tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('.main-content').css('height',(document.documentElement.clientHeight-106+'px'));
$('.tree-box').css('height',(document.documentElement.clientHeight-126+'px'));
$('.main-content').css('height',(document.documentElement.clientHeight-126+'px'));
})
//表单实例化
this.validateForm = this.fb.group({
@@ -1,7 +1,12 @@
<div class="system-main-container">
<div class="navigation">
<nz-breadcrumb>
<nz-breadcrumb-item>系统管理</nz-breadcrumb-item>
<nz-breadcrumb-item>操作日志</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div class="user-manage">
<div class="system-main-content card" id="main-box">
<div class="system-main-content card">
<div class="search-box">
<div nz-row>
<div nz-col nzSpan="8">
@@ -1,8 +1,11 @@
@import "../../main.scss";
.system-main-container{
padding-top: 10px;
padding-bottom: 0;
overflow-y:auto;
.user-manage{
.system-main-content{
overflow-y:scroll;
}
.card{
@@ -42,11 +42,6 @@ export class OperationLogsComponent implements OnInit {
) { }
ngOnInit() {
// 页面监听 动态改变表单高度
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
})
this.queryTable();
}
onChange(result: Date): void {
@@ -55,17 +50,21 @@ export class OperationLogsComponent implements OnInit {
}
//重置,重置搜索条件
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{
queryTable(params?):void{
this.statusParamsTable.status=1;
this.tableData=[];
this.collectionSize='';
if(params){
this.search.page_index=params;
}else{
this.search.page_index='1';
}
this.http.get('/sysapi/oplog/list',this.search).subscribe((json)=>{
if(json.is_success){
this.tableData=json.body.recordList;
@@ -82,8 +81,7 @@ export class OperationLogsComponent implements OnInit {
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
this.queryTable(event);
}
}
@@ -1,5 +1,11 @@
<div class="system-main-container">
<div class="card " id="main-box">
<div class="navigation">
<nz-breadcrumb>
<nz-breadcrumb-item>系统管理</nz-breadcrumb-item>
<nz-breadcrumb-item>个人设置</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div class="card ">
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" class="self-main-content">
<nz-tab nzTitle="自定义显示列">
<div class="self-row-box">
@@ -1,6 +1,10 @@
@import "../../main.scss";
.system-main-container{
.self-main-content{
padding-top: 10px;
padding-bottom: 0;
overflow-y:auto;
.self-main-content{
// overflow-y: auto;
height: 100%;
}
.ant-tabs{
@@ -8,7 +8,7 @@ declare var jQuery: any;
@Component({
selector: 'app-personal-settings',
templateUrl: './personal-settings.component.html',
styleUrls: ['./personal-settings.component.scss','../../main.scss'],
styleUrls: ['./personal-settings.component.scss'],
providers:[HttpClientService]
})
export class PersonalSettingsComponent implements OnInit {
@@ -40,11 +40,6 @@ export class PersonalSettingsComponent implements OnInit {
) { }
ngOnInit() {
// 页面监听 动态改变表单高度
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('#main-box').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.defaultCols=[
{"COL_CODE":"ACFT", "COL_CN":"机型", "COL_ORDER":"1"},
@@ -1,10 +1,11 @@
@import "../../../main.scss";
.system-main-container{
padding-top: 10px;
padding-bottom: 0;
overflow-y:auto;
}
.user-modify-box{
position: relative;
overflow-y:auto;
.user-footer{
text-align: center;
margin-top: -20px;
@@ -1,12 +1,8 @@
<div class="system-main-container">
<div class="navigation">
<nz-breadcrumb>
<nz-breadcrumb-item>
角色管理
</nz-breadcrumb-item>
<nz-breadcrumb-item>
列表
</nz-breadcrumb-item>
<nz-breadcrumb-item>角色管理</nz-breadcrumb-item>
<nz-breadcrumb-item>列表</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div class="user-manage">
@@ -1,9 +1,11 @@
@import "../../main.scss";
.system-main-container{
padding-top: 10px;
padding-bottom: 0;
overflow-y:auto;
.user-manage{
.system-main-content{
overflow-y:scroll;
}
.card{
@@ -35,11 +35,6 @@ export class RoleManagementComponent implements OnInit {
) { }
ngOnInit() {
// 页面监听 动态改变表单高度
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
})
this.queryTable();
}
//新增、修改 1新增 2修改
@@ -63,14 +58,17 @@ export class RoleManagementComponent implements OnInit {
}
//重置,重置搜索条件
reset(){
this.search.page_index=1;
this.search.page_size=10;
this.search.role_name='';
this.queryTable();
}
//获取列表
queryTable():void{
queryTable(params?):void{
this.statusParamsTable.status=1;
if(params){
this.search.page_index=params;
}else{
this.search.page_index='1';
}
this.tableData=[];
this.http.get('/sysapi/setting/role/list',this.search).subscribe((json)=>{
if(json.is_success){
@@ -88,8 +86,7 @@ export class RoleManagementComponent implements OnInit {
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
this.queryTable(event);
}
}
@@ -1,6 +1,8 @@
.system-main-container{
overflow-y:scroll;
}
.user-modify-box{
position: relative;
overflow-y:scroll;
.user-footer{
text-align: center;
margin-top: -20px;
@@ -1,12 +1,8 @@
<div class="system-main-container">
<div class="navigation">
<nz-breadcrumb>
<nz-breadcrumb-item>
用户管理
</nz-breadcrumb-item>
<nz-breadcrumb-item>
列表
</nz-breadcrumb-item>
<nz-breadcrumb-item>用户管理</nz-breadcrumb-item>
<nz-breadcrumb-item>列表</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div class="user-manage">
@@ -48,7 +44,7 @@
</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">
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData" [nzScroll]="{ y: (tableHeight+'px') }">
<thead>
<tr>
<th>姓名</th>
@@ -3,7 +3,7 @@
padding-top: 10px;
.user-manage{
.system-main-content{
overflow-y:scroll;
}
.card{
@@ -19,3 +19,6 @@
color: #1890ff;
}
}
.ant-table-tbody{
}
@@ -34,7 +34,7 @@ export class UserManagementComponent implements OnInit {
}
visible = false;
userDetail:any={}; //用户详情
tableHeight:any='100';
constructor(
private http:HttpClientService,
@@ -44,11 +44,19 @@ export class UserManagementComponent implements OnInit {
ngOnInit() {
// 页面监听 动态改变表单高度
$('#tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#tree-box').css('height',(document.documentElement.clientHeight-126+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-126+'px'));
let winHeight=document.documentElement.clientHeight;
if(winHeight-396>100){
this.tableHeight=winHeight-396;
}
$(window).resize(function(){
$('#tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#tree-box').css('height',(document.documentElement.clientHeight-126+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-126+'px'));
let winHeight2=document.documentElement.clientHeight;
if(winHeight2-396>100){
this.tableHeight=winHeight2-396;
}
})
this.initTree();
this.queryTable();
@@ -100,15 +108,20 @@ export class UserManagementComponent implements OnInit {
}
//重置,重置搜索条件
reset(){
this.search.page_index=1;
this.search.page_size=10;
this.search.real_name='';
this.search.login_name='';
this.queryTable();
}
//获取列表
queryTable():void{
queryTable(params?):void{
this.statusParamsTable.status=1;
this.tableData=[];
this.collectionSize='';
if(params){
this.search.page_index=params;
}else{
this.search.page_index='1';
}
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
if(json.is_success){
this.tableData=json.body.list;
@@ -125,8 +138,7 @@ export class UserManagementComponent implements OnInit {
}
//翻页
pageChange(event){
this.search.page_index=event;
this.queryTable();
this.queryTable(event);
}
//树模型参数设置
public zNodes: any[];