gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 全局调整

Browse Source 
1.表头配置放在末位，且不会被隐藏
2.表头配置弹框出现在按钮下方
This commit is contained in:
陈劲松
2020-02-18 11:05:57 +08:00
parent 7e118b0601
commit 90981fca4a
7 changed files with 68 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -530,22 +530,13 @@ li{
background-color: #f0f0f0;
}
.nz-table-gear {
display: inline-block;
width: 8px;
box-sizing: border-box;
border-left: 1px solid white;
position: relative;
}
.nz-table-gear>i {
cursor: pointer;
position: absolute;
left: 7px;
}
.nz-table-txt {
border-right: 1px solid #d4d4d4;
width: calc(100% - 19px);
display: inline-block;
box-sizing: border-box;
left: -3px;
}
/* end--内容*/

26
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -54,17 +54,6 @@
show-overflow-tooltip
min-width="110px"
>
<template slot="header" slot-scope="scope">
<template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<div v-else>
<span>{{item.label}}</span>
</div>
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'alert-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
@@ -93,6 +82,13 @@
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -240,7 +236,7 @@
label: this.$t('alert.config.option'),
prop: 'option',
show: true,
width: 230
width: 120
}
],
tableData: [],
@@ -264,11 +260,11 @@
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h);
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {

24
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -38,17 +38,6 @@
show-overflow-tooltip
min-width="110px"
>
<template slot="header" slot-scope="scope">
<template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<div v-else>
<span>{{item.label}}</span>
</div>
</template>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'">
<div class="link too-long-split"
@@ -92,6 +81,13 @@
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -245,11 +241,11 @@
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h);
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {

26
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -63,17 +63,6 @@
min-width="110px"
:class-name="item.prop == 'option' ? 'content-right-options' : ''"
>
<template slot="header" slot-scope="scope">
<template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" id="asset-tab-set" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<div v-else>
<span>{{item.label}}</span>
</div>
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop=='ID'">
<span>{{scope.row.id}}</span>
@@ -167,6 +156,13 @@
</template>
</template>
</el-table-column>
<el-table-column width="28" fixed="right">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -303,7 +299,7 @@
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 280,
width: 150,
fixed:'right'
}],
tableData: [],
@@ -454,11 +450,11 @@
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h);
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
},
elementsetHide() {

19
nezha-fronted/src/components/page/config/account.vue
View File

@@ -49,7 +49,7 @@
:key="`col-${index}`"
:label="item.label"
>
<template slot="header" slot-scope="scope">
<!--<template slot="header" slot-scope="scope">
<template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
@@ -59,7 +59,7 @@
<div v-else>
<span>{{item.label}}</span>
</div>
</template>
</template>-->
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
@@ -89,6 +89,13 @@
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -230,7 +237,7 @@
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 230
width: 120
}
],
tablelable: [],
@@ -301,11 +308,11 @@
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h);
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {

26
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -38,17 +38,6 @@
<el-table :data="tableData" border height="calc(100% - 160px)" style="width: 100%;" class="nz-table">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
<template slot="header" slot-scope="scope">
<template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" id="prom-tab-set" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<div v-else>
<span>{{item.label}}</span>
</div>
</template>
<template slot-scope="scope" :column="item">
<idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox"
:post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false"
@@ -82,6 +71,13 @@
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
@@ -267,7 +263,7 @@
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 230
width: 120
}
],
tablelable: [],
@@ -357,11 +353,11 @@
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h);
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {

26
nezha-fronted/src/components/page/project/project.vue
View File

@@ -122,17 +122,6 @@
:label="item.label"
min-width="110px"
>
<template slot="header" slot-scope="scope">
<template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<div v-else>
<span>{{item.label}}</span>
</div>
</template>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-else-if="item.prop == 'param'">
@@ -157,6 +146,13 @@
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
</div>
@@ -346,7 +342,7 @@
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 200
width: 120
}
],
endpointTableData: [],
@@ -692,11 +688,11 @@
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX - 250 : e.clientX - 250 - dw;
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h);
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony });
},
elementsetHide() {