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

NEZ-354 feat ：表格添加根据字段排序的功能

Browse Source
This commit is contained in:
zhangyu
2020-07-15 18:32:25 +08:00
parent 514b907c97
commit 78dfc11028
11 changed files with 495 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,9 @@
v-scrollBar:el-table="'large'"
v-loading="loading"
:cell-class-name="messageStyle"
style="width: 100%;">
style="width: 100%;"
@sort-change="tableDataSort"
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
@@ -50,7 +52,8 @@
:label="item.label"
show-overflow-tooltip
min-width="110px"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
@@ -434,6 +437,10 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
@@ -441,6 +448,9 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getTableData();
},
// 全屏
@@ -533,6 +543,39 @@
detail.push({label: this.$t("alert.message"), value: obj.alertNum});*/
return detail;
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'alertName':
case 'threshold':
case 'severity':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'ar.id';
case 'alertName': return'ar.alert_name';
case 'threshold': return'ar.threshold';
case 'severity': return'ar.severity';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
watch: {
showSubList(n) {

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

@@ -49,7 +49,8 @@
v-loading="loading"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
style="width: 100%;">
style="width: 100%;"
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
type="selection"
@@ -66,6 +67,8 @@
:label="item.label"
:show-overflow-tooltip="item.prop != 'labels'"
min-width="110px"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
>
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'alertRule'">
@@ -836,6 +839,10 @@
this.getAlertList();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
@@ -847,6 +854,9 @@
}
}
}
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getAlertList();
},
viewRule: function (id) {
@@ -895,6 +905,40 @@
this.$refs.projectBox.show(false, false);
this.$refs.moduleBox.show(false, false);
this.viewAssetState = false;
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'alertRule':
case 'severity':
case 'startAt':
case 'endAt':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'alertRule': return'ar.alert_name';
case 'severity': return'am.severity';
case 'startAt': return'am.start_at';
case 'endAt': return'am.end_at';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.pageObj.orderBy=orderBy;
this.$set(this.searchLabel, "orderBy", orderBy);
this.getAlertList();
}
},
watch: {

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

@@ -92,6 +92,7 @@
tooltip-effect="light"
ref="assetTable"
:cell-class-name="messageStyle"
@sort-change="tableDataSort"
>
<el-table-column
:resizable="false"
@@ -104,6 +105,8 @@
:show-overflow-tooltip="item.prop != 'Alert' || item.prop != 'Module'"
min-width="110px"
:class-name="item.prop == 'option' ? 'content-right-options' : ''"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop=='ID'">
@@ -863,6 +866,10 @@
})
},
search(searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
@@ -870,6 +877,9 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getAssetData();
},
convertToDetail(obj) {
@@ -948,6 +958,39 @@
let seconds=time.getSeconds() > 9 ? time.getSeconds():('0'+time.getSeconds());
return this.$t('asset.assetStatPre')+year+ds+month+ds+day+' '+hours+ts+minutes+ts+seconds;
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'ID':
case 'HOST':
case 'SN':
case 'purchaseDate':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'ID': return'ass.id';
case 'HOST': return'ass.host';
case 'SN': return'ass.sn';
case 'purchaseDate': return'ass.purchase_date';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getAssetData();
}
},
created() {

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

@@ -59,7 +59,8 @@
:height="mainTableHeight"
v-loading="loading"
v-scrollBar:el-table="'large'"
style="width: 100%;">
style="width: 100%;"
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
@@ -67,6 +68,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="item.prop!='option'&&item.prop!='status'?'custom':false"
:prop="item.prop"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
@@ -452,6 +455,18 @@
}
this.getTableData();
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
computed: {
isCurrentUser() {

43
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -61,7 +61,8 @@
ref="dcTable"
v-loading="loading"
:cell-class-name="assetStatClassName"
style="width: 100%;">
style="width: 100%;"
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
show-overflow-tooltip
@@ -70,6 +71,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
@@ -414,6 +417,10 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
@@ -421,6 +428,9 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getTableData();
},
showCabinet:function(dc){
@@ -434,6 +444,37 @@
/*let temp=this;
setTimeout(function(){temp.$refs.cabSearchInput.clear_input();},100)*/
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'name':
case 'area':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'i.id';
case 'name': return'i.name';
case 'area': return'sa.name';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
watch: {
cabinetDc: {

45
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -54,9 +54,10 @@
</button>
</div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="loading">
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="loading" @sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
:key="`col-${index}`" :label="item.label">
:key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)">
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
<template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
@@ -317,6 +318,10 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.pageObj.pageNo = 1;
this.searchLabel = {};
for (let item in searchObj) {
@@ -324,6 +329,9 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getTableData();
},
downloadMib:function(mibId){
@@ -360,8 +368,41 @@
file:null,
};
this.$refs.mibBox.clearData();
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'name':
case 'filename':
case 'updateAt':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'sm.id';
case 'name': return'sm.name';
case 'filename': return'sm.file_name';
case 'updateAt': return'sm.update_at';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
mounted: function () {
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);

64
nezha-fronted/src/components/page/config/model.vue
View File

@@ -47,10 +47,26 @@
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<el-table :data="tableData" border style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
v-loading="loading" :cell-class-name="assetStatClassName" v-show="mainResizeShow" :height="mainTableHeight">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
<el-table :data="tableData"
border style="width: 100%;"
ref="modelTable"
class="nz-table"
v-scrollBar
:el-table="'large'"
v-loading="loading"
:cell-class-name="assetStatClassName"
v-show="mainResizeShow"
:height="mainTableHeight"
@sort-change="tableDataSort"
>
<el-table-column :resizable="false"
v-for="(item, index) in tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)">
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
<template v-else-if="item.prop == 'type'" >{{scope.row[item.prop].value}}</template>
@@ -319,6 +335,10 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.pageObj.pageNo = 1;
this.searchLabel = {};
for (let item in searchObj) {
@@ -326,6 +346,9 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getTableData();
},
cleanModel() {
@@ -340,8 +363,41 @@
typeCode: '',
uSize:1,
};
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'name':
case 'type':
case 'vendor':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'mo.id';
case 'name': return'mo.name';
case 'type': return'dict1.value';
case 'vendor': return'dict.value';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
mounted: function () {
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);

54
nezha-fronted/src/components/page/config/operationlog.vue
View File

@@ -53,7 +53,9 @@
v-loading="loading"
v-scrollBar:el-table="'large'"
:cell-class-name="messageStyle"
style="width: 100%;">
style="width: 100%;"
@sort-change="tableDataSort"
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
@@ -61,6 +63,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'time'">
@@ -313,6 +317,10 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
@@ -320,8 +328,50 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getTableData();
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getTableData();
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'username':
case 'ip':
case 'operation':
case 'type':
case 'createDate':
case 'time':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return 'sl.id';
case 'username': return 'sl.username';
case 'ip': return 'sl.ip';
case 'operation': return 'sl.operation';
case 'type': return 'sl.type';
case 'createDate': return 'sl.create_date';
case 'time': return 'sl.time';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
computed: {
isCurrentUser() {

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

@@ -48,9 +48,15 @@
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
@sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)">
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
@@ -616,6 +622,10 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.pageObj.pageNo = 1;
this.searchLabel = {};
for (let item in searchObj) {
@@ -623,6 +633,9 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getTableData();
},
addNewData(type) {
@@ -695,6 +708,41 @@
item.show(false)
})
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'idc':
case 'host':
case 'port':
case 'type':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'id';
case 'idc': return'idc_id';
case 'host': return'host';
case 'port': return'port';
case 'type': return'type';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
mounted: function () {
//是否存在分页缓存

53
nezha-fronted/src/components/page/config/terminallog.vue
View File

@@ -53,7 +53,8 @@
v-scrollBar:el-table="'large'"
v-loading="loading"
:cell-class-name="messageStyle"
style="width: 100%;">
style="width: 100%;"
@sort-change="tableDataSort">
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
@@ -61,6 +62,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'lang'">
@@ -333,6 +336,10 @@
this.getTableData();
},
search: function (searchObj) {
let orderBy='';
if(this.searchLabel.orderBy){
orderBy=this.searchLabel.orderBy
}
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
@@ -340,8 +347,50 @@
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getTableData();
if(orderBy){
this.$set(this.searchLabel, 'orderBy', orderBy);
}
this.getTableData();
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'host':
case 'port':
case 'protocol':
case 'user':
case 'cmd':
case 'time':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return 'id';
case 'host': return 'host';
case 'port': return 'port';
case 'protocol': return 'protocol';
case 'user': return 'user';
case 'cmd': return 'cmd';
case 'time': return 'time';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
},
computed: {
isCurrentUser() {

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

@@ -94,7 +94,9 @@
v-show="mainResizeShow"
ref="endpointTable"
v-loading="loading"
style="width: 100%;">
style="width: 100%;"
@sort-change="tableDataSort"
>
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
@@ -103,6 +105,8 @@
:key="`col-${index}`"
:label="item.label"
min-width="110px"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
>
<template slot-scope="scope" :column="item" >
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detail(scope.row)">{{scope.row[item.prop].host}}</span>
@@ -578,6 +582,10 @@
},*/
//搜索
endpointSearch: function(searchObj) {
let orderBy='';
if(this.endpointSearchLabel.orderBy){
orderBy=this.endpointSearchLabel.orderBy
}
this.endpointSearchLabel = {};
this.endpointPageObj.pageNo = 1;
for (let item in searchObj) {
@@ -585,6 +593,9 @@
this.$set(this.endpointSearchLabel, item, searchObj[item]);
}
}
if(orderBy){
this.$set(this.endpointSearchLabel, 'orderBy', orderBy);
}
this.getEndpointTableData();
},
@@ -774,6 +785,39 @@
this.userData = response.data.list
}
})
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'asset':
case 'port':
case 'path':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'e.id';
case 'asset': return'a.host';
case 'port': return'e.port';
case 'path': return'e.path';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';
if(item.order==='ascending'){
orderBy=item.prop;
}
if(item.order==='descending'){
orderBy='-'+item.prop;
}
this.$set(this.endpointSearchLabel, "orderBy", orderBy);
this.getEndpointTableData();
}
},
created() {