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

feat：将表格中的需要排序的方法 和排序传的字段抽为公共方法

Browse Source
This commit is contained in:
zhangyu
2020-08-07 11:11:43 +08:00
parent 4103243e1c
commit a098fc7be6
16 changed files with 229 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -767,31 +767,6 @@ export default {
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
console.info(chartItem,title)
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'state':
case 'alertRule':
case 'severity':
case 'startAt':
case 'endAt':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'am.id';
case 'state': return'am.state';
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='';

29
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

@@ -53,8 +53,8 @@
:label="item.label"
:show-overflow-tooltip="item.prop != 'labels'"
min-width="110px"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'alertMessage')"
:prop="$tableSet.propTitle(item.prop,'alertMessage')"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" :column="item">
@@ -740,31 +740,6 @@
this.$refs.moduleBox.show(false, false);
this.viewAssetState = false;
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'state':
case 'alertRule':
case 'severity':
case 'startAt':
case 'endAt':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'am.id';
case 'state': return'am.state';
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){
this.$emit('tableDataSort',item);

25
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -562,31 +562,6 @@
}
this.getAlertList();
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'state':
case 'alertRule':
case 'severity':
case 'startAt':
case 'endAt':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'am.id';
case 'state': return'am.state';
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='';

31
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -57,8 +57,8 @@
:key="`col-${index}`"
:label="item.label"
min-width="110px"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'endpointTab')"
:prop="$tableSet.propTitle(item.prop,'endpointTab')"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" :column="item">
@@ -366,33 +366,6 @@
// this.getEndpointTableData();
// });
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'asset':
case 'port':
case 'project':
case 'module':
case 'type':
// 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 'project': return'p.name';
case 'module': return'm.name';
case 'type': return'm.type';
// case 'path': return'e.path';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';

205
nezha-fronted/src/components/common/js/tools.js
View File

@@ -485,6 +485,211 @@ export const chartResizeTool = {
}
};
//table 方法
export const tableSet = {
//是否需要排序
sortableShow(prop,from){
switch(prop){
// alert
case 'id':
case 'state': if(from === 'project' || from=== 'endpointTab'){return false}
case 'alertRule':
case 'severity':
case 'startAt':
case 'endAt':
// asset
case 'ID':
case 'HOST':
case 'SN':
case 'assetType':
case 'purchaseDate':
// case 'state':
case 'pingStatus':
case 'dataCenter':
case 'cabinet':
case 'model':
// case 'vendor':
case 'principal':
// project
// case 'id':
case 'asset':
case 'port':
case 'project':
case 'module':
case 'type':
// dc
// case 'id':
case 'name':
case 'area':
//endpointTab
// case 'id':
// case 'asset':
// case 'port':
// case 'project':
// case 'module':
// case 'type':
// model
// case 'id':
// case 'name':
// case 'type':
case 'vendor':
// promServer
// case 'id':
// case 'name':
// case 'type':
// case 'vendor':
// mib
// case 'id':
// case 'name':
case 'filename':
case 'updateAt':
// operationlog
// case 'id':
case 'username':
case 'ip':
case 'operation':
// case 'type':
case 'createDate':
case 'time':
// temrminallog
// case 'id':
case 'host':
// case 'port':
case 'protocol':
case 'user':
case 'cmd':
// case 'time':
//config
// case 'id':
case 'alertName':
case 'threshold':
// case 'severity':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop,from){
switch(from){
case 'asset':
switch(prop){
case 'ID': return'ass.id';
case 'HOST': return'ass.host';
case 'SN': return'ass.sn';
case 'assetType': return 'sdtt.value';
case 'purchaseDate': return'ass.purchase_date';
case 'state': return 'ass.state';
case 'pingStatus': return 'assp.rtt';
case 'dataCenter': return 'idc.name';
case 'cabinet': return 'cab.name';
case 'model': return 'mo.name';
case 'vendor': return 'sdt.value';
case 'principal': return 'su.username';
default : return prop;
}
case 'alertMessage':
switch(prop){
case 'id': return'am.id';
case 'state': return'am.state';
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;
}
case 'project':
switch(prop){
case 'id': return'e.id';
case 'asset': return'a.host';
case 'port': return'e.port';
case 'project': return'p.name';
case 'module': return'm.name';
case 'type': return'm.type';
// case 'path': return'e.path';
default : return prop;
}
case 'dc':
switch(prop){
case 'id': return'i.id';
case 'name': return'i.name';
case 'area': return'sa.name';
default : return prop;
}
case 'endpointTab':
switch(prop){
case 'id': return'e.id';
case 'asset': return'a.host';
case 'port': return'e.port';
case 'project': return'p.name';
case 'module': return'm.name';
case 'type': return'm.type';
// case 'path': return'e.path';
default : return prop;
}
case 'model':
switch(prop){
case 'id': return'mo.id';
case 'name': return'mo.name';
case 'type': return'dictt.value';
case 'vendor': return'dict.value';
default : return prop;
}
case 'promServer':
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;
}
case 'mib':
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;
}
case 'operationlog':
switch(prop){
case 'id': return 'sl.id';
case 'username': return 'su.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;
}
case 'temrminallog':
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;
}
case 'alertRules':
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;
}
default: break;
}
},
}
export function blankPromise() {
return new Promise(resolve => {resolve();});
}

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

@@ -53,8 +53,8 @@
show-overflow-tooltip
min-width="110px"
:sort-orders="['ascending', 'descending']"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'alertRules')"
:prop="$tableSet.propTitle(item.prop,'alertRules')"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
@@ -450,27 +450,6 @@
detail.description = obj.description;
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='';

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

@@ -755,31 +755,6 @@
this.$refs.moduleBox.show(false, false);
this.viewAssetState = false;
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'state':
case 'alertRule':
case 'severity':
case 'startAt':
case 'endAt':
return'custom';
default : return false;
}
},
// prop字段
propTitle(prop){
switch(prop){
case 'id': return'am.id';
case 'state': return'am.state';
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='';

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

@@ -55,8 +55,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)"
:sortable="$tableSet.sortableShow(item.prop,'asset')"
:prop="$tableSet.propTitle(item.prop,'asset')"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" :column="item">
@@ -585,43 +585,6 @@
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 'assetType':
case 'purchaseDate':
case 'state':
case 'pingStatus':
case 'dataCenter':
case 'cabinet':
case 'model':
case 'vendor':
case 'principal':
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 'assetType': return 'sdtt.value';
case 'purchaseDate': return'ass.purchase_date';
case 'state': return 'ass.state';
case 'pingStatus': return 'assp.rtt';
case 'dataCenter': return 'idc.name';
case 'cabinet': return 'cab.name';
case 'model': return 'mo.name';
case 'vendor': return 'sdt.value';
case 'principal': return 'su.username';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';

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

@@ -51,8 +51,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'dc')"
:prop="$tableSet.propTitle(item.prop,'dc')"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
@@ -395,25 +395,6 @@
this.bottomBox.dc = JSON.parse(JSON.stringify(dc));
this.bottomBox.showSubList = true;
},
//是否需要排序
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 = '';

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

@@ -37,8 +37,8 @@
</transition>
<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="tools.loading" @sort-change="tableDataSort">
<el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
:key="`col-${index}`" :label="item.label" :sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:key="`col-${index}`" :label="item.label" :sortable="$tableSet.sortableShow(item.prop,'mib')"
:prop="$tableSet.propTitle(item.prop,'mib')"
:sort-orders="['ascending', 'descending']">
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
@@ -306,27 +306,6 @@
}
})
},
//是否需要排序
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='';

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

@@ -47,8 +47,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'model')"
:prop="$tableSet.propTitle(item.prop,'model')"
:sort-orders="['ascending', 'descending']">
<template slot-scope="scope" :column="item">
<template v-if="item.prop == 'vendor'" >{{scope.row[item.prop].value}}</template>
@@ -305,27 +305,6 @@
}
this.getTableData();
},
//是否需要排序
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'dictt.value';
case 'vendor': return'dict.value';
default : return prop;
}
},
// 数据排序
tableDataSort(item) {
let orderBy='';

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

@@ -42,8 +42,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'operationlog')"
:prop="$tableSet.propTitle(item.prop,'operationlog')"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" :column="item">
@@ -246,33 +246,6 @@
}
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 'su.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='';

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

@@ -37,8 +37,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'promServer')"
:prop="$tableSet.propTitle(item.prop,'promServer')"
:sort-orders="['ascending', 'descending']">
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'" >{{scope.row[item.prop]?scope.row[item.prop].name:'-'}}</span>
@@ -360,29 +360,6 @@
});
});
},
//是否需要排序
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 = '';

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

@@ -41,8 +41,8 @@
:width="item.width"
:key="`col-${index}`"
:label="item.label"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'temrminallog')"
:prop="$tableSet.propTitle(item.prop,'temrminallog')"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" :column="item">
@@ -271,33 +271,6 @@
}
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='';

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

@@ -73,8 +73,8 @@
:key="`col-${index}`"
:label="item.label"
min-width="110px"
:sortable="sortableShow(item.prop)"
:prop="propTitle(item.prop)"
:sortable="$tableSet.sortableShow(item.prop,'project')"
:prop="$tableSet.propTitle(item.prop,'project')"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" :column="item" >
@@ -546,33 +546,6 @@
}
})
},
//是否需要排序
sortableShow(prop){
switch(prop){
case 'id':
case 'asset':
case 'port':
case 'project':
case 'module':
case 'type':
// 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 'project': return'p.name';
case 'module': return'm.name';
case 'type': return'm.type';
// case 'path': return'e.path';
default : return prop;
}
},
// 数据排序
tableDataSort(item){
let orderBy='';

3
nezha-fronted/src/main.js
View File

@@ -19,7 +19,7 @@ import plTable from 'pl-table'
import 'pl-table/themes/index.css'
import {post, get, put, del} from './http.js'
import {toTop, clickoutside, scrollBar, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool} from './components/common/js/tools.js';
import {toTop, clickoutside, scrollBar, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet} from './components/common/js/tools.js';
import * as tools from './components/common/js/tools.js';
import * as constants from './components/common/js/constants.js'
@@ -76,6 +76,7 @@ Vue.prototype.$bottomBoxWindow = bottomBoxWindow; //底部上滑框控制
Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix;
Vue.prototype.$unixTimeParseToString = unixTimeParseToString;
Vue.prototype.$chartResizeTool = chartResizeTool;
Vue.prototype.$tableSet = tableSet;
Vue.prototype.$tableHeight = { //列表页表格的高度
normal: 'calc(100% - 100px)', //常规高度，特例在下方定义
openSubList: { //打开二级列表后的高度