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

fix: asset弹框交互bug修复

Browse Source 
1.asset新增、修改dc后，左侧列表和顶部菜单同步
2.修复alert、project点开asset弹框后无法关闭的问题
This commit is contained in:
chenjinsong
2020-01-08 10:17:31 +08:00
parent eaaf09a9d8
commit 7cc8c1b065
7 changed files with 46 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/header.vue
View File

@@ -474,7 +474,7 @@
return this.$store.state.projectListChange;
},
getIdcData() {
return this.$store.state.assetData.idcData
return this.$store.state.assetDcList;
}
},
watch: {

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

@@ -1,10 +1,10 @@
<style scoped>
.account {
.config {
height: 100%;
}
</style>
<template>
<div class="account">
<div class="config">
<div class="content-left">
<div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info">
@@ -34,7 +34,7 @@
show-overflow-tooltip
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="account-list-options">
<div v-if="item.prop == 'option'" class="content-right-options">
<span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
<span @click="detail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
<span @click="toEdit(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
@@ -49,8 +49,8 @@
</span>
<!-- <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
<div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
</div>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
@@ -61,7 +61,7 @@
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
<module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>
<asset-edit-unit :edit-unit-show='viewAsset' @refreshData="" @sendStateData="" ref="assetEditUnit"></asset-edit-unit>
<asset-edit-unit :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
</div>
</template>
@@ -219,6 +219,13 @@ export default {
})
});
},
//asset弹框控制
tabControl(data) {
if (data === 'close') {
this.viewAsset = false
this.$refs['assetEditUnit'].tabView = false
}
},
toAdd: function() {
this.cleanAlertRule();
this.$refs.alertConfigBox.show(true, true);

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

@@ -1,165 +1,10 @@
<style scoped>
.account {
.list {
height: 100%;
}
.account-list-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.account-list-option .el-icon-delete {
color: #F98D9A;
}
.account-list-option .el-icon-delete:hover {
color: #D96D7A;
}
.account-list-option .el-icon-view {
color: #60BEFF;
}
.account-list-option .el-icon-view:hover {
color: #409EFF;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
top: 80px;
right: 15px;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
.right-box-account {
width: 550px;
height: calc(100% - 100px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 25px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: calc(100% - 38px);
vertical-align: top;
}
.el-select-add-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right {
from {right: -800px}
to {right: 0}
}
@keyframes slide-out-to-right {
from {right: 0}
to {right: -800px}
}
.right-box-enter-active {
animation: slide-in-from-right 0.4s;
}
.right-box-leave-active {
animation: slide-out-to-right 0.4s;
}
/* end--右弹框滑入滑出动画*/
</style>
<template>
<div class="account">
<div class="list">
<div class="content-left">
<div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info">
@@ -185,10 +30,10 @@
:label="item.label"
>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'alertRule'" class="account-list-option" @click="viewRule(scope.row[item.prop].id)">
<span v-if="item.prop == 'alertRule'" class="content-right-option" @click="viewRule(scope.row[item.prop].id)">
{{scope.row[item.prop].alertName}}
</span>
<div v-else-if="item.prop == 'type'" class="account-list-options">
<div v-else-if="item.prop == 'type'" class="content-right-options">
<span v-if="scope.row[item.prop] == 1" >Project</span>
<span v-if="scope.row[item.prop] == 2" >Module</span>
<span v-if="scope.row[item.prop] == 3" >Device</span>
@@ -199,11 +44,11 @@
<span v-if="scope.row[item.prop] == 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
</span>
<div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="account-list-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
<span v-if="scope.row['type'] == 3 && scope.row[item.prop]" class="content-right-option" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
</div>
<div v-else-if="item.prop == 'state'">
<span class="account-list-option">
<span class="">
{{scope.row['state'] == 1 ? "Pending" : ""}}
{{scope.row['state'] == 2 ? "Expired" : ""}}
</span>
@@ -217,7 +62,7 @@
<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
<module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="" ref="assetEditUnit"></asset-edit-unit>
<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
</div>
</template>
@@ -344,6 +189,13 @@ export default {
}
})
},
//asset弹框控制
tabControl(data) {
if (data === 'close') {
this.viewAssetState = false
this.$refs['assetEditUnit'].tabView = false
}
},
jumpTo(data,id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id

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

@@ -887,7 +887,7 @@
if (response.code === 200) {
this.IDCOptionData = response.data.list;
this.markOptionData(this.IDCOptionData)
//this.$store.state.assetData.idcData = this.IDCOptionData;
this.$store.commit('assetDcListChange');
this.$emit('refreshData');
}
})

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

@@ -960,8 +960,8 @@
this.$get('idc').then(response => {
if (response.code === 200) {
this.IDCOptionData = response.data.list;
this.markOptionData(this.IDCOptionData)
//this.$store.state.assetData.idcData = this.IDCOptionData
this.markOptionData(this.IDCOptionData);
this.$store.commit('assetDcListChange');
this.$emit('refreshData');
}
})

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

@@ -79,7 +79,7 @@
:label="item.label"
>
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'asset' && scope.row[item.prop]" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="content-right-option" @click="viewAsset(scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-else-if="item.prop == 'param'">
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
</span>
@@ -103,7 +103,7 @@
<module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
<edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="" @sendStateData="" ref="assetEditUnit"></asset-edit-unit>
<asset-edit-unit :edit-unit-show='viewAssetState' @refreshData="getEndpointTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit>
</div>
</template>
@@ -355,6 +355,14 @@
this.rightBoxHandler(2);
},
//asset弹框控制
tabControl(data) {
if (data === 'close') {
this.viewAssetState = false
this.$refs['assetEditUnit'].tabView = false
}
},
//搜索
endpointSearch: function(searchObj) {
this.endpointSearchLabel = {};

4
nezha-fronted/src/store/index.js
View File

@@ -8,6 +8,7 @@ const store = new Vuex.Store({
selectedData:'',
step: 0
},
assetDcList: 0,
currentProject: {
id: '',
name: '',
@@ -35,6 +36,9 @@ const store = new Vuex.Store({
},
panelListChange(state,status){
state.panelListReload = status;
},
assetDcListChange(state) {
state.assetDcList++;
}
},
actions: {