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

NEZ-351 perf: project相关侧滑重构

Browse Source
This commit is contained in:
chenjinsong
2020-07-28 19:42:25 +08:00
parent 9b7454a92d
commit bc8ec89053
5 changed files with 760 additions and 1023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@
>
<el-submenu :index="'-3'" popper-class="nz-submenu" class="icon-menu-item">
<template slot="title">
<i class="nz-icon-navmore nz-icon"></i>
<i class="nz-icon-navmore nz-icon" style="font-size: 17px;"></i>
</template>
<template v-for="(item, index) in linkData">
<el-menu-item :index="'0-' + index">
@@ -18,7 +18,7 @@
</template>
</el-submenu>
<el-submenu :index="'-1'" class="icon-menu-item" popper-class="display-none">
<div slot="title" class="el-submenu__title" @click="cli()" >
<div slot="title" class="el-submenu__title" @click="cli" >
<i class="nz-icon nz-icon-cli"></i>
<div class="right-tip" v-show="$store.state.consoleCount>0">{{$store.state.consoleCount<=10?$store.state.consoleCount:'10+'}}</div>
</div>
@@ -150,16 +150,12 @@
</el-submenu>
</el-menu>
<panel-box :panel="editPanel" @reload="panelListReload" @reloadForDel="" ref="panelBox"></panel-box>
<project-box :project="editProject" ref="projectBox"></project-box>
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
<project-box v-if="rightBox.project.show" :project="editProject" ref="projectBox"></project-box>
<module-box v-if="rightBox.module.show" :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
<add-endpoint-box v-if="rightBox.endpoint.show" :currentProject="currentProject" :currentModule="currentModule" @reload=""
ref="addEndpointBox"></add-endpoint-box>
<!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="refreshAsset" ref="assetAddUnit"
@sendStateData="closeAsset"></asset-add-unit>-->
<asset-box :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" v-if="assetBoxShow"
ref="assetAddUnit"></asset-box>
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
<asset-box v-if="rightBox.asset.show" :edit-unit-show='addUnitShow' @refreshData="refreshAsset" @sendStateData="closeAsset" ref="assetAddUnit"></asset-box>
<alert-config-box v-if="rightBox.alertRule.show" :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
<change-password :cur-user="username" :show-dialog="showChangePwd" @click="showPwdDialog" @dialogClosed="dialogClosed"></change-password>
</div>
</template>
@@ -174,6 +170,13 @@
},
data() {
return {
rightBox: {
project: {show: false},
module: {show: false},
endpoint: {show: false},
asset: {show: false},
alertRule: {show: false},
},
username: sessionStorage.getItem("nz-username"),
language: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en',
assetData: [],
@@ -181,10 +184,6 @@
activeItemIndex:'',
activeItemIndexes: [],
hoverItemIndex: '',
editPanel:{//新增or编辑的panel
id:'',
name: ''
},
projectData: [], //顶部菜单project列表中的数据
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
@@ -257,15 +256,6 @@
}
},
methods: {
closeAsset() {
this.addUnitShow = false;
this.assetBoxShow = false;
},
refreshAsset(flag) {
if (flag && this.$route.path == "/asset") {
window.location.reload();
}
},
cli(){
this.$store.commit('openConsole');
},
@@ -284,14 +274,11 @@
},
createBox(item) {
if (item.type == 0) {
this.$refs.panelBox.show(true);
this.editPanel = {id: '', name: ''};
}else if (item.type == 1) {
this.$refs.projectBox.show(true,true);
if (item.type == 1) {
this.rightBox.project.show = true;
this.editProject = {id: '', name: '', remark: ''};
} else if (item.type == 2) {
this.$refs.moduleBox.show(true,true);
this.rightBox.module.show = true;
this.editModule = {
id: '',
name: '',
@@ -437,8 +424,8 @@
})
},
toEditProject(p) {
this.$refs.projectBox.show(true,true);
this.editProject = Object.assign({}, p);
this.rightBox.project.show = true;
},
indOf(a, b) {
let c = [];

82
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -1,18 +1,16 @@
<template>
<transition name="right-box">
<div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
<div class="right-box right-box-add-endpoint" :class="{'right-box-add-endpoint-snmp': currentModuleCopy.type && currentModuleCopy.type.toLowerCase() == 'snmp'}" @mousedown="showEditParamBox(false)" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
</div>
<div class="right-box-top-btns"></div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{$t("overall.createEndpoint")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpointForm" :model="endpointForm" :rules="rules">
<el-form class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="addEndpoint" :model="endpoint" :rules="rules">
<!--project-->
<el-form-item :label='$t("project.project.project")' prop="projectId">
<el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProjectCopy" placeholder="" size="small">
@@ -223,7 +221,6 @@
</transition>
<!--end--param编辑框-->
</div>
</transition>
</template>
<script>
@@ -245,7 +242,7 @@
},
paramBorderColor: '#dcdfe6',
endpointTouch: false,
endpointForm: {projectId: '', moduleId: '', endpointList: []},
endpoint: {projectId: '', moduleId: '', endpointList: []},
currentModuleCopy: {},
currentProjectCopy: {id: ''},
tempParamObj: [],
@@ -292,12 +289,6 @@
}
},
methods: {
show(show) {
this.rightBox.show = show;
this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原
this.endpointForm = {projectId: '', moduleId: '', endpointList:[]}
},
//子弹框控制 obj: module或endpoint对象 type:1module2endpoint
showEditParamBox(show, obj, type, e) {
if (show) {
@@ -341,15 +332,13 @@
this.editParamBox.show = show;
},
clickos() {
this.esc();
clickOutside() {
this.esc(false);
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
this.editParamBox.show = false;
this.endpointTouch = false;
esc(refresh) {
this.$emit("close", refresh);
},
// 新增param
@@ -375,7 +364,7 @@
this.tempEndpoint2 = JSON.parse(JSON.stringify(endpoint));
},
editEndpoint(endpoint) {
this.$refs.addEndpointForm.validate((valid) => {
this.$refs.addEndpoint.validate((valid) => {
if (valid) {
endpoint.isEdit = false;
this.tempEndpoint2 = {};
@@ -444,8 +433,8 @@
changeProject(project) {
this.currentModuleCopy = {};
this.endpointForm.moduleId = '';
this.endpointForm.projectId = project.id;
this.endpoint.moduleId = '';
this.endpoint.projectId = project.id;
this.editParamBox.show = false;
this.tempParamObj = [];
this.endpointList = [];
@@ -454,7 +443,7 @@
},
changeModule(module) {
this.endpointForm.moduleId = module.id;
this.endpoint.moduleId = module.id;
this.editParamBox.show = false;
this.tempParamObj = [];
},
@@ -484,8 +473,8 @@
});
this.assetList.splice(index, 1);
this.endpointTouch = true;
this.endpointForm.projectId = this.currentProjectCopy.id;
this.endpointForm.moduleId = this.currentModuleCopy.id;
this.endpoint.projectId = this.currentProjectCopy.id;
this.endpoint.moduleId = this.currentModuleCopy.id;
this.$refs.assetScrollbar.update();
},
@@ -525,11 +514,11 @@
//保存endpoint
save() {
this.endpointForm.projectId = this.currentProjectCopy.id;
this.endpointForm.moduleId = this.currentModuleCopy.id;
this.endpoint.projectId = this.currentProjectCopy.id;
this.endpoint.moduleId = this.currentModuleCopy.id;
if (this.endpointList.length == 0) {
this.endpointTouch = true;
this.$refs.addEndpointForm.validate();
this.$refs.addEndpoint.validate();
return false;
}
//对endpointList进行处理，避免携带过多无用数据
@@ -538,13 +527,12 @@
let endpoint = {moduleId: item.moduleId, assetId: item.assetId, port: item.port, param: item.param, path: item.path, host: item.host};
endpointList.push(endpoint);
});
this.$refs.addEndpointForm.validate((valid) => {
this.$refs.addEndpoint.validate((valid) => {
if (valid) {
this.$post('endpoint', endpointList).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc();
this.$emit("reload");
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -578,8 +566,7 @@
this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$emit('reload');
this.rightBox.show = false;
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -602,21 +589,13 @@
row.index = rowIndex;
}
},
computed: {
projectListReloadWatch() {
return this.$store.state.projectListChange;
},
moduleListReloadWatch() {
return this.$store.state.moduleListChange;
},
},
created() {
this.getProjectList();
this.getAssetList();
},
watch: {
endpointList(n, o) {
this.endpointForm.endpointList = n;
this.endpoint.endpointList = n;
if (n.length > 0) {
this.paramBorderColor = '#dcdfe6';
} else {
@@ -624,16 +603,19 @@
}
},
currentProject(n, o) {
this.currentProjectCopy=Object.assign({},n);
this.endpointForm.projectId = n.id;
currentProject: {
immediate: true,
handler(n, o) {
this.currentProjectCopy = Object.assign({}, n);
this.endpoint.projectId = n.id;
this.getModuleList(n.id);
}
},
currentModule: {
immediate: true,
handler(n, o) {
if(n) {
this.endpointForm.moduleId = n.id;
this.endpoint.moduleId = n.id;
this.currentModuleCopy = JSON.parse(JSON.stringify(n));
}
@@ -651,12 +633,6 @@
}
}
},
projectListReloadWatch(n, o) {
this.getProjectList();
},
moduleListReloadWatch(n, o) {
this.getModuleList(this.currentProjectCopy.id);
}
}
}
</script>

238
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -1,45 +1,38 @@
<template>
<transition name="right-box">
<div class="right-box right-box-edit-endpoint" v-if="rightBox.show" v-clickoutside="clickos">
<div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button id="edit-ep-del" type="button" v-if="editEndpoint.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button id="edit-ep-edit" v-if="!rightBox.isEdit" type="button" @click="toEdit(true)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{$t("project.endpoint.editEndpoint") + " ID：" + editEndpoint.id}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="endpoint" label-position="right" label-width="120px" :rules="rules" ref="endPointForm">
<el-form class="right-box-form right-box-form-left" :model="editEndpoint" label-position="right" label-width="120px" :rules="rules" ref="endpointForm">
<!--project-->
<el-form-item :label="$t('project.project.project')" prop="project.id">
<el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.projectId" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select @change="((val) => {changeProject(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.projectId" placeholder="" size="small">
<el-option :id="'edit-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
</el-form-item>
<!--module-->
<el-form-item :label="$t('project.module.module')" prop="module.id">
<el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="endpoint.moduleId" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select @change="((val) => {changeModule(val);})" value-key="id" popper-class="config-dropdown" v-model="editEndpoint.moduleId" placeholder="" size="small">
<el-option :id="'edit-module-'+item.id" v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
</el-form-item>
<!--asset-->
<el-form-item :label="$t('asset.asset')" prop="assetId">
<el-autocomplete
:fetch-suggestions="assetSuggestion"
v-model.trim="endpoint.asset.host"
v-model.trim="editEndpoint.asset.host"
placeholder=""
@select="selectAsset"
@change.native="inputAsset"
@@ -49,96 +42,25 @@
style="width: 100%;"
>
</el-autocomplete>
<!--<el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && endpoint.asset" placeholder="" :value="endpoint.asset.host" size="small"></el-input>
<el-input class="right-box-row-with-btn" readonly v-if="rightBox.isEdit && !endpoint.asset" placeholder="" value="" size="small"></el-input>
<el-popover placement="left" width="400" v-model="subBox.show" popper-class="nz-pop">
<div class="pop-window-assetType-content">
&lt;!&ndash; begin&#45;&#45;顶部按钮&ndash;&gt;
<div class="pop-top-btns">
<button type="button" @click="subEsc" class="nz-btn nz-btn-size-alien nz-btn-size-small nz-btn-style-light nz-btn-min-width-35" id="edit-ep-subesc">
<span class="pop-top-btn-icon"><i class="el-icon-close"></i></span>
<span class="pop-top-btn-txt">{{$t('overall.esc')}}</span>
</button>
</div>
&lt;!&ndash; end&#45;&#45;顶部按钮&ndash;&gt;
&lt;!&ndash;begin&#45;&#45;标题&ndash;&gt;
<div class="pop-title">{{subBox.title}}</div>
&lt;!&ndash;end&#45;&#45;标题&ndash;&gt;
&lt;!&ndash;&ndash;&gt;
<div class="pop-item-wider " >
&lt;!&ndash; begin&#45;&#45;搜索框&ndash;&gt;
<div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search">
<button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-prepend" @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
<span>
<i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
<i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
</span>
</button><div class="endpoint-asset-search-input">
<el-input class="input-x-mini-22 nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input>
</div><button type="button" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square nz-input-group-append" >
<i @click="searchAsset" class="el-icon-search" id="edit-ep-search-asset"></i>
</button>
<div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
<div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item" id="edit-ep-search-ip">IP</div>
<div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item" id="edit-ep-search-sn">SN</div>
</div>
</div>
&lt;!&ndash; end&#45;&#45;搜索框&ndash;&gt;
&lt;!&ndash; begin&#45;&#45;table&ndash;&gt;
<div class="endpoint-sub-table">
<div class="endpoint-sub-table-head">
<div class="endpoint-sub-table-col">IP</div>
<div class="endpoint-sub-table-col">SN</div>
</div>
<div class="line-100"></div>
<div class="endpoint-sub-table-body">
<div v-if="selectedAsset.id != ''" :data="selectedAsset.id" class="endpoint-sub-table-row endpoint-sub-table-row-selected">
<div class="endpoint-sub-table-col">{{selectedAsset.host}}</div>
<div class="endpoint-sub-table-col">{{selectedAsset.sn}}</div>
</div>
<div v-else class="endpoint-sub-table-row"></div>
<div id="edit-select-asset" @click="selectAsset(item)" :data="item.id" v-for="item in assetList" class="endpoint-sub-table-row" :class="{'endpoint-sub-table-row-active': item.id == selectedAsset.id}">
<div class="endpoint-sub-table-col">{{item.host}}</div>
<div class="endpoint-sub-table-col">{{item.sn}}</div>
</div>
</div>
<div class="endpoint-sub-table-paginate">
<div class="endpoint-sub-table-paginate-all">All:&nbsp;{{assetPageObj.total}}</div>
<el-pagination background :pager-count="5" layout="prev, pager, next" @current-change="(currentPage) => {getAssetList(currentPage)}" :total="assetPageObj.total"></el-pagination>
</div>
</div>
&lt;!&ndash; end&#45;&#45;table&ndash;&gt;
</div>
</div>
<div slot="reference" @click.prevent="" class="right-box-row-btn" v-if="rightBox.isEdit">
<span class="el-icon-more"></span>
</div>
</el-popover>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>-->
</el-form-item>
<!--host-->
<el-form-item :label="$t('project.endpoint.host')" prop="host">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.host" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
<el-input placeholder="" v-model="editEndpoint.host" size="small"></el-input>
</el-form-item>
<!--port-->
<el-form-item :label="$t('project.endpoint.port')" prop="port">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.port" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.port}}</div>
<el-input placeholder="" v-model="editEndpoint.port" size="small"></el-input>
</el-form-item>
<!--path-->
<el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="currentModule.type.toLowerCase() == 'http'">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="endpoint.path" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.path}}</div>
<el-form-item :label="$t('project.endpoint.path')" prop="path" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
<el-input placeholder="" v-model="editEndpoint.path" size="small"></el-input>
</el-form-item>
<!--param-->
<el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'">
<el-form-item class="right-box-form-param" v-if="editEndpoint.module.type.toLowerCase() == 'http'">
<template slot="label">
<span>{{$t('project.endpoint.param')}}</span>
</template>
<div v-if="rightBox.isEdit" style="text-align: right">
<div style="text-align: right">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button type="button" id="edit-clear-all" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span><i class="el-icon-delete"></i></span>
@@ -147,9 +69,9 @@
<span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
</button>
</div>
<div v-if="rightBox.isEdit" class="param-box param-box-module">
<div class="param-box param-box-module">
<el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
<div class="param-box-row" v-for="(item, index) in endpoint.paramObj">
<div class="param-box-row" v-for="(item, index) in editEndpoint.paramObj">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
</el-form-item>
@@ -161,10 +83,6 @@
</div>
</el-scrollbar>
</div>
<div v-else v-for="(item, index) in endpoint.paramObj" v-if="!rightBox.isEdit">
<div class="right-box-form-content-txt">{{item.key}}={{item.value}}</div>
</div>
</el-form-item>
</el-form>
</el-scrollbar>
@@ -176,31 +94,26 @@
<button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<button @click="save" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "endpointBox",
props: {
postEndpoint: Object,
endpoint: Object,
},
data() {
return {
endpoint:null,
rightBox: {show: false, title: '',isEdit: false},
editEndpoint: {},
subBox: {show: false, title: this.$t("overall.asset")}, //asset子弹框
assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
assetPageObj: {pageNo: 1, pageSize: 11, total: 0},
selectedAsset: {id: '', host: '', sn: ''}, //endpoint侧滑框中选中的asset
currentProject: null,
currentModule: null,
projectList: [],
moduleList: [],
assetList: [],
@@ -224,34 +137,14 @@
}
},
methods: {
show(show) {
this.rightBox.show = show;
},
toEdit(show, id) {
this.rightBox.isEdit = show;
this.rightBox.show = true;
this.$nextTick(()=>{
if (show) {
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + id;
this.currentProject=this.projectList.find(item=>{return item.id == this.endpoint.projectId})
this.getModuleList(this.endpoint.projectId,true)
} else {
this.rightBox.title = this.$t("project.endpoint.endpoint") + " ID：" + id;
}
});
},
//endpoint弹框中asset子弹框控制
showSubBox(show) {
this.subBox.show = show;
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
this.subBox.show = false;
this.$emit("close");
esc(refresh) {
this.$emit("close", refresh);
},
/*关闭子弹框*/
@@ -259,8 +152,8 @@
this.subBox.show = false;
},
clickos() {
this.esc();
clickOutside() {
this.esc(false);
},
// 清除param
@@ -303,29 +196,33 @@
/*获取project列表*/
getProjectList() {
return new Promise(resolve => {
this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
if (response.code === 200) {
this.projectList = response.data.list;
if ((!this.currentProject || !this.currentProject.id) && this.projectList.length > 0) {
this.currentProject = this.projectList[0];
if (!this.editEndpoint.projectId && this.projectList.length > 0) {
this.editEndpoint.projectId = this.projectList[0].id;
}
}
resolve();
});
});
},
//project下拉框点击事件
changeProject(projectId) {
this.currentModule = {id: '', name: '', project: {},type:'', port: '', path: '', param: '', paramObj: []};
this.getModuleList(projectId);
this.endpoint.moduleId='';
this.editEndpoint.projectId = projectId;
this.editEndpoint.moduleId = '';
},
//project下拉框点击事件
changeModule(moduleId) {
this.currentModule = this.moduleList.find(item=>{return item.id == this.endpoint.moduleId});
this.endpoint.port = this.currentModule.port;
this.endpoint.path = this.currentModule.path;
this.endpoint.paramObj = this.currentModule.paramObj;
let newModule = this.moduleList.find(item => {return item.id == this.endpoint.moduleId});
this.editEndpoint.moduleId = moduleId;
this.editEndpoint.port = newModule.port;
this.editEndpoint.path = newModule.path;
this.editEndpoint.paramObj = newModule.paramObj;
},
// 获取endpoint弹框中的asset子弹框里asset列表数据
@@ -359,26 +256,26 @@
// endpoint弹框中的asset子弹框里asset选择事件
selectAsset(obj) {
this.selectedAsset = obj;
this.endpoint.host = obj.host;
this.endpoint.assetId = obj.id;
this.$refs.endPointForm.validate();
this.editEndpoint.host = obj.host;
this.editEndpoint.assetId = obj.id;
this.$refs.endpointForm.validate();
},
inputAsset(e) {
this.endpoint.assetId = "";
this.editEndpoint.assetId = "";
let host = e.target.value;
if (host) {
for (let i = 0; i < this.assetList.length; i++) {
if (host == this.assetList[i].host) {
this.endpoint.assetId = this.assetList[i].id;
this.editEndpoint.assetId = this.assetList[i].id;
this.selectedAsset = this.assetList[i];
this.endpoint.host = host;
this.editEndpoint.host = host;
break;
}
}
}
},
// 获取endpoint弹框中module下拉框数据
getModuleList(projectId,setCurModule=false) {
getModuleList(projectId, setCurModule = false) {
this.$get('module', {projectId: projectId}).then(response => {
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
@@ -394,7 +291,7 @@
}
this.moduleList = response.data.list;
if(setCurModule){
this.currentModule=this.moduleList.find(item=>{return item.id == this.endpoint.moduleId});
this.editEndpoint.moduleId = this.moduleList.find(item => {return item.id == this.editEndpoint.moduleId}).id;
}
}
});
@@ -402,18 +299,15 @@
//保存endpoint
save() {
this.$refs.endPointForm.validate((valide=>{
this.$refs.endpointForm.validate((valide=>{
if(valide){
this.endpoint.moduleId = this.currentModule.id;
this.endpoint.projectId = this.currentProject.id;
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
this.editEndpoint.param = this.paramToJson(this.editEndpoint.paramObj);
let requestData = [];
requestData.push(this.endpoint);
requestData.push(this.editEndpoint);
this.$put('endpoint', requestData).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc();
this.$emit("reload");
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -422,7 +316,6 @@
return false;
}
}))
},
//删除endpoint
@@ -432,11 +325,10 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("endpoint?ids=" + this.endpoint.id).then(response => {
this.$delete("endpoint?ids=" + this.editEndpoint.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$emit('reload');
this.rightBox.show = false;
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -463,33 +355,19 @@
callback(data);
},
},
created() {
this.getProjectList();
mounted() {
this.getProjectList().then(response => {
this.getModuleList(this.editEndpoint.projectId);
});
this.getAssetList();
},
computed: {
projectListReloadWatch() {
return this.$store.state.projectListChange;
},
moduleListReloadWatch() {
return this.$store.state.moduleListChange;
},
},
mounted() {
// setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100);
},
watch: {
projectListReloadWatch(n, o) {
this.getProjectList();
},
moduleListReloadWatch(n, o) {
this.getModuleList(this.currentProject.id);
},
postEndpoint:{
immediate:true,
deep:true,
handler(n,o){
this.endpoint=Object.assign({},n)
endpoint:{
immediate: true,
deep: true,
handler(n, o) {
console.info(n)
this.editEndpoint = JSON.parse(JSON.stringify(n));
},
},
}

221
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -1,48 +1,41 @@
<template>
<transition name="right-box">
<div class="right-box right-box-module" v-if="rightBox.show" v-clickoutside="clickos">
<div class="right-box right-box-module" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="module-del" type="button" v-if="currentModule.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<button id="module-del" type="button" v-if="editModule.id" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light">
<span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button v-if="!rightBox.isEdit && currentModule.buildIn != 1" id="module-save" type="button" @click="saveOrToEdit" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-edit"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.edit')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<div class="right-box-title">{{editModule.id ? $t("project.module.editModule") + " ID：" + editModule.id : $t("project.module.createModule")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form class="right-box-form right-box-form-left" :model="currentModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
<el-form class="right-box-form right-box-form-left" :model="editModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
<el-form-item :label='$t("project.project.project")' prop="project">
<el-select v-if="rightBox.isEdit" value-key="id" popper-class="config-dropdown" v-model="currentModule.project" placeholder="" size="small">
<el-select value-key="id" popper-class="config-dropdown" v-model="editModule.project" placeholder="" size="small">
<el-option :id="'module-project-'+item.id" v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<div v-if="!rightBox.isEdit && currentModule.project" class="right-box-form-content-txt">{{currentModule.project.name}}</div>
</el-form-item>
<el-form-item :label='$t("project.module.moduleName")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="currentModule.name" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.name}}</div>
<el-input placeholder="" maxlength="64" show-word-limit v-model="editModule.name" size="small"></el-input>
</el-form-item>
<div class="nz-tab module-box-type">
<div class="nz-tab-item-box" @click="changeType('http')" id="module-type-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : currentModule.type.toLowerCase() == 'http', 'unclickable': currentModule.id}">HTTP</div>
<div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'http', 'unclickable': editModule.id}">HTTP</div>
</div>
<div @click="changeType('snmp')" class="nz-tab-item-box" id="module-type-2">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : currentModule.type.toLowerCase() == 'snmp', 'unclickable': currentModule.id}">SNMP</div>
<div class="nz-tab-item" :class="{'nz-tab-item-active' : editModule.type.toLowerCase() == 'snmp', 'unclickable': editModule.id}">SNMP</div>
</div>
</div>
<!-- snmp表单 -->
<span class="snmp-form" v-if="currentModule.type && currentModule.type == 'snmp'">
<span class="snmp-form" v-if="editModule.type && editModule.type == 'snmp'">
<div class="right-box-sub-title">SNMP settings</div>
<div class="line-100 right-box-line"></div>
@@ -52,7 +45,7 @@
</el-col>
<el-col :span="18">
<el-form-item prop="walk">
<select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="currentModule.walk">
<select-walk ref="selectWalk" :walkData="walkData" :expandedWalk="expandedWalkData" :placement="'bottom-start'" @selectWalk="selectWalk" :currentWalk="editModule.walk">
<template v-slot:trigger>
<div class="el-cascader">
<div class="el-input">
@@ -60,7 +53,7 @@
</div>
<div class="el-cascader__tags">
<el-scrollbar style="height: 100%;" ref="walkScrollbar">
<span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in currentModule.walk">
<span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in editModule.walk">
<span v-html="mibName(item)"></span>
<div class="walk-close-box" @click.stop="removeWalk(item)">
<i class="el-tag__close el-icon-close walk-close"></i>
@@ -81,7 +74,7 @@
</el-col>
<el-col :span="18">
<el-form-item prop="version">
<el-radio-group v-model.number="currentModule.version" size="small">
<el-radio-group v-model.number="editModule.version" size="small">
<el-radio-button :label="2"></el-radio-button>
<el-radio-button :label="3"></el-radio-button>
</el-radio-group>
@@ -95,7 +88,7 @@
</el-col>
<el-col :span="18">
<el-form-item prop="max_repetitions">
<el-input v-model.number="currentModule.max_repetitions" size="small"></el-input>
<el-input v-model.number="editModule.max_repetitions" size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -106,7 +99,7 @@
</el-col>
<el-col :span="18">
<el-form-item prop="retries">
<el-input v-model.number="currentModule.retries" size="small"></el-input>
<el-input v-model.number="editModule.retries" size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -117,7 +110,7 @@
</el-col>
<el-col :span="18">
<el-form-item prop="timeout">
<el-input v-model.number="currentModule.timeout" size="small">
<el-input v-model.number="editModule.timeout" size="small">
<template slot="append">second</template>
</el-input>
</el-form-item>
@@ -138,20 +131,20 @@
</el-col>
<el-col :span="18">
<el-form-item prop="community">
<el-input v-model.trim="currentModule.community" maxlength="64" show-word-limit size="small"></el-input>
<el-input v-model.trim="editModule.community" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--SNMP V3 setting-->
<template v-if="currentModule.version == 3">
<template v-if="editModule.version == 3">
<el-row>
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('login.username')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="username">
<el-input v-model.trim="currentModule.username" maxlength="64" show-word-limit size="small"></el-input>
<el-input v-model.trim="editModule.username" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -162,7 +155,7 @@
</el-col>
<el-col :span="18">
<el-form-item prop="security_level">
<el-radio-group v-model="currentModule.security_level" size="small" @change="updateScrollbar">
<el-radio-group v-model="editModule.security_level" size="small" @change="updateScrollbar">
<el-radio-button label="noAuthNoPriv"></el-radio-button>
<el-radio-button label="authNoPriv"></el-radio-button>
<el-radio-button label="authPriv"></el-radio-button>
@@ -171,24 +164,24 @@
</el-col>
</el-row>
<el-row v-if="currentModule.security_level == 'authNoPriv' || currentModule.security_level == 'authPriv'">
<el-row v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('login.password')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="password">
<el-input v-model.trim="currentModule.password" maxlength="64" show-word-limit size="small"></el-input>
<el-input v-model.trim="editModule.password" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row class="same-label-width" v-if="currentModule.security_level == 'authNoPriv' || currentModule.security_level == 'authPriv'">
<el-row class="same-label-width" v-if="editModule.security_level == 'authNoPriv' || editModule.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label">{{$t('project.module.authProtocol')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="auth_protocol">
<el-radio-group v-model="currentModule.auth_protocol" size="small">
<el-radio-group v-model="editModule.auth_protocol" size="small">
<el-radio-button label="MD5"></el-radio-button>
<el-radio-button label="SHA"></el-radio-button>
</el-radio-group>
@@ -196,13 +189,13 @@
</el-col>
</el-row>
<el-row class="same-label-width" v-if="currentModule.security_level == 'authPriv'">
<el-row class="same-label-width" v-if="editModule.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label">{{$t('project.module.privProtocol')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="priv_protocol">
<el-radio-group v-model="currentModule.priv_protocol" size="small">
<el-radio-group v-model="editModule.priv_protocol" size="small">
<el-radio-button label="DES"></el-radio-button>
<el-radio-button label="AES"></el-radio-button>
</el-radio-group>
@@ -210,13 +203,13 @@
</el-col>
</el-row>
<el-row v-if="currentModule.security_level == 'authPriv'">
<el-row v-if="editModule.security_level == 'authPriv'">
<el-col :span="6">
<div class="sub-label sub-label-required">{{$t('project.module.privPassword')}}</div>
</el-col>
<el-col :span="18">
<el-form-item prop="priv_password">
<el-input v-model.trim="currentModule.priv_password" maxlength="64" show-word-limit size="small"></el-input>
<el-input v-model.trim="editModule.priv_password" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
@@ -228,32 +221,30 @@
</el-col>
<el-col :span="18">
<el-form-item prop="context_name">
<el-input v-model.trim="currentModule.context_name" maxlength="64" show-word-limit size="small"></el-input>
<el-input v-model.trim="editModule.context_name" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
</el-col>
</el-row>
</span>
<div class="right-box-form-tip" v-if="rightBox.isEdit">
<div class="right-box-form-tip">
{{$t('project.module.tip.defaultEndpointSet')}}
<div class="line-100"></div>
{{$t('project.module.tip.relation')}}
</div>
<el-form-item :label='$t("project.endpoint.port")' prop="port" >
<el-input v-if="rightBox.isEdit" placeholder="" v-model.number="currentModule.port" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.port}}</div>
<el-input placeholder="" v-model.number="editModule.port" size="small"></el-input>
</el-form-item>
<el-form-item v-if="currentModule.type && currentModule.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="currentModule.path" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.path}}</div>
<el-form-item v-if="editModule.type && editModule.type.toLowerCase() == 'http'" :label='$t("project.endpoint.path")' prop="path">
<el-input placeholder="" v-model="editModule.path" size="small"></el-input>
</el-form-item>
<el-form-item class="right-box-form-param" v-if="currentModule.type.toLowerCase() == 'http'">
<el-form-item class="right-box-form-param" v-if="editModule.type.toLowerCase() == 'http'">
<template slot="label">
<span>{{$t('project.endpoint.param')}}</span>
<div class="right-box-form-btns" v-if="rightBox.isEdit">
<div class="right-box-form-btns">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button id="module-clear-all" type="button" @click="clearAllParam" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span><i class="el-icon-delete"></i></span>
@@ -264,9 +255,9 @@
</div>
</template>
<div v-if="rightBox.isEdit" class="param-box param-box-module">
<div class="param-box param-box-module">
<el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
<div class="param-box-row" v-for="(item, index) in currentModule.paramObj">
<div class="param-box-row" v-for="(item, index) in editModule.paramObj">
<el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
<el-input placeholder="key" size="mini" v-model="item.key"></el-input>
</el-form-item>
@@ -278,15 +269,10 @@
</div>
</el-scrollbar>
</div>
<div v-for="(item, index) in currentModule.paramObj" v-if="!rightBox.isEdit">
<div class="right-box-form-content-txt">{{item.key}}={{item.value}}</div>
</div>
</el-form-item>
<el-form-item :label='$t("project.module.description")' prop="remark">
<el-input v-if="rightBox.isEdit" type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="currentModule.remark" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModule.remark}}</div>
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="editModule.remark" size="small"></el-input>
</el-form-item>
</el-form>
@@ -297,12 +283,11 @@
<button @click="esc" id="module-box-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="rightBox.isEdit" @click="saveOrToEdit" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<button @click="save" id="module-box-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</transition>
</template>
<script>
@@ -322,12 +307,7 @@
return {
walkData: [],
expandedWalkData: [],
currentModule: {},
rightBox: {
show: false,
title: '',
isEdit:false
},
editModule: {},
rules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'},
@@ -339,9 +319,6 @@
port: [
{validator:port, trigger: 'blur'},
],
/*walk: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],*/
username: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
@@ -366,10 +343,10 @@
},
methods: {
selectWalk(walk) {
if (this.currentModule.walk.indexOf(walk) != -1) {
this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
if (this.editModule.walk.indexOf(walk) != -1) {
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
} else {
this.currentModule.walk.push(walk);
this.editModule.walk.push(walk);
}
this.$refs.walkScrollbar.update();
@@ -418,13 +395,15 @@
},
removeWalk(walk) {
this.currentModule.walk.splice(this.currentModule.walk.indexOf(walk), 1);
this.editModule.walk.splice(this.editModule.walk.indexOf(walk), 1);
this.$refs.selectWalk.$refs.walkTree.setChecked(walk, false);
},
initWalk() {
this.$nextTick(() => {
if (this.$refs.selectWalk) {
this.$refs.selectWalk.show();
}
})
},
@@ -451,24 +430,19 @@
}
},
show(show, isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit = isEdit;
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
esc(refresh) {
this.$emit("close", refresh);
},
clickos() {
this.esc();
clickOutside() {
this.esc(false);
},
changeType(type) {
if (this.currentModule.id) {
if (this.editModule.id) {
return;
}
this.currentModule.type = type;
this.editModule.type = type;
this.updateScrollbar();
},
//转化snmpParam属性
@@ -523,34 +497,33 @@
},
/*保存*/
save() {
this.currentModule.param = this.paramToJson(this.currentModule.paramObj);
this.editModule.param = this.paramToJson(this.editModule.paramObj);
this.$refs.moduleForm.validate((valid) => {
if (valid) {
if (this.currentModule.type.toLowerCase() == 'snmp') {
this.parseSnmpParam(this.currentModule);
if (this.editModule.type.toLowerCase() == 'snmp') {
this.parseSnmpParam(this.editModule);
} else {
if (this.currentModule.snmpParam) {
this.currentModule.snmpParam = "";
if (this.editModule.snmpParam) {
this.editModule.snmpParam = "";
}
}
this.currentModule.projectId = this.currentModule.project.id;
if (this.currentModule.id) {
this.$put('module', this.currentModule).then(response => {
this.editModule.projectId = this.editModule.project.id;
if (this.editModule.id) {
this.$put('module', this.editModule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$store.commit('moduleListChange');
this.rightBox.show = false;
this.$emit('reload');
//this.$store.commit('moduleListChange');
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('module', this.currentModule).then(response => {
this.$post('module', this.editModule).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$store.commit('moduleListChange');
this.rightBox.show = false;
//this.$store.commit('moduleListChange');
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -561,14 +534,6 @@
}
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.module.editModule") + " ID：" + this.currentModule.id;
} else {
this.save();
}
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
@@ -576,11 +541,11 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("module?ids=" + this.currentModule.id).then(response => {
this.$delete("module?ids=" + this.editModule.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false;
this.$store.commit('moduleListChange');
//this.$store.commit('moduleListChange');
this.esc(true);
} else {
this.$message.error(response.msg);
}
@@ -589,50 +554,40 @@
},
/*获取project列表*/
getProjectList: function() {
getProjectList() {
this.$get('project', {pageSize: -1, pageNo: 1}).then(response => {
if (response.code === 200) {
this.projectList = response.data.list;
if (this.currentProject && this.currentProject.id) {
/*for (let i = 0; i < this.projectList.length; i++) {
if (this.projectList[i].id == this.currentProject.id) {
this.currentProject = this.projectList[i];
break;
}
}*/
} else {
}
}
});
},
// 清除param
clearAllParam: function() {
this.currentModule.paramObj = [];
clearAllParam() {
this.editModule.paramObj = [];
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
// 新增param
addParam: function() {
this.currentModule.paramObj.push({key: '', value: ''});
addParam() {
this.editModule.paramObj.push({key: '', value: ''});
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
// 移除单个param
removeParam: function(index) {
this.currentModule.paramObj.splice(index, 1);
removeParam(index) {
this.editModule.paramObj.splice(index, 1);
this.$nextTick(() => {
this.$refs.paramBoxScrollbar.update();
});
},
//将param转为json字符串格式
paramToJson: function(param) {
paramToJson(param) {
let tempParam = {};
for (let i = 0; i < param.length; i++) {
eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
@@ -655,9 +610,6 @@
this.getProjectList();
},
computed: {
projectListReloadWatch() {
return this.$store.state.projectListChange;
},
mibName() {
return (value) => {
return this.getMibName(this.walkData, value);
@@ -669,26 +621,10 @@
immediate: true,
deep: true,
handler(n, o) {
this.currentModule = JSON.parse(JSON.stringify(n));
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("project.module.editModule") + " ID：" + n.id : this.$t("project.module.module") + " ID：" + n.id ;
if (n.snmpParam) {
this.reparseSnmpParam(this.currentModule);
}
} else if (n) {
this.rightBox.title = this.$t("project.module.createModule");
if (!n.type) {
n.type = 'http';
} else if (n.type.toLowerCase() == 'snmp') {
if (n.snmpParam) {
this.reparseSnmpParam(this.currentModule);
}
}
}
this.editModule = JSON.parse(JSON.stringify(n));
}
},
currentModule: {
editModule: {
immediate: true,
deep: true,
handler(n, o) {
@@ -706,9 +642,6 @@
}
}
},
projectListReloadWatch(n, o) {
this.getProjectList();
}
}
}
</script>

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

@@ -26,10 +26,10 @@
<el-scrollbar ref="leftScrollbar" style="height: 100%">
<div class="sidebar-title too-long-split">{{$t('project.project.project')}}</div>
<div class="sidebar-info">
<el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top:0px;" @change="projectChange" ref="projectLeft">
<el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top: 0px;" ref="projectLeft">
<el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
<template slot="title">
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id==currentProject.id}" @click="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject($event,item)" :id="'project-module-'+item.id">
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
<span slot="reference" class="">
@@ -41,15 +41,15 @@
</div>
</template>
<div class="sidebar-info sub-sidebar-info" >
<div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="toAddModule">
<div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item sidebar-info-item-add" @click="addModule">
<i class="nz-icon nz-icon-create-square"></i>
</div>
<template v-else>
<div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(module)" :id="'project-module-'+module.id">
<div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
<div :id="`module-${module.id}`" class="item-tip">
<div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
<span class="too-long-split" style="width: 120px;">{{module.name}}</span>
<div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="toEditModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
<div v-show="module.buildIn != 1" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" @click.stop="editModule(module)" :id="'project-module-edit-'+module.id" ><i class="nz-icon nz-icon-edit"></i></div>
</div>
</div>
</template>
@@ -77,7 +77,7 @@
class="margin-l-20"
>
<template slot="optionZone">
<button @click.stop="toCreateEndpoint" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<button @click.stop="addEndpoint" :title="$t('overall.createEndpoint')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<i class="nz-icon nz-icon-create-square"></i>
</button>
</template>
@@ -109,7 +109,7 @@
: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>
<span v-if="item.prop == 'asset' && scope.row[item.prop]" class="link" @click="detailEndpoint(scope.row)">{{scope.row[item.prop].host}}</span>
<span v-else-if="item.prop == 'param'">
<template v-if="scope.row.paramObj">
<span v-for="(p,i) in scope.row.paramObj">{{p.key}}={{p.value}}<span v-if="i < scope.row.paramObj.length-1">，</span></span>
@@ -118,13 +118,12 @@
</span>
<template v-else-if="item.prop == 'type'">{{currentModule.type}}</template>
<div v-else-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
<span :title="$t('overall.view')" @click="detailEndpoint(scope.row)" class="content-right-option" :id="'edp-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;
<span :title="$t('overall.query')" @click="showEndpoint(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
<span :title="$t('overall.query')" @click="query(scope.row)" class="content-right-option" :id="'edp-query-'+scope.row.id"><i class="el-icon-search"></i></span>
&nbsp;
<span :title="$t('overall.edit')" @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.edit')" @click="editEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
</div>
<!-- <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
<span v-else-if="item.prop == 'state'" >
<el-popover placement="right" width="50" trigger="hover" :popper-class="scope.row.state == '1'?'small-pop':''">
<div slot="reference" style="width: 20px">
@@ -157,7 +156,7 @@
</div>
<transition name="el-zoom-in-bottom">
<bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-full-screen="bottomBox.isFullScreen"
:from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="currentEndpoint" :asset-detail="bottomBox.assetDetail"
:from="'endpoint'" :target-tab.sync="bottomBox.targetTab" :detail="bottomBox.endpointDetail" :obj="endpoint" :asset-detail="bottomBox.assetDetail"
@closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</transition>
</div>
@@ -173,18 +172,21 @@
@tablelable="tablelabelEmit"
ref="elementset"
></element-set>
<module-box :current-project="currentProject" :module="editModule" @reload="getAllModuleList" ref="moduleBox"></module-box>
<edit-endpoint-box :project="currentProject" :module="currentModule" :post-endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
<add-endpoint-box :current-project="endpointEditInfos.project" :current-module="endpointEditInfos.module" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
<transition name="right-box">
<module-box v-if="rightBox.module.show" :current-project="currentProject" :module="module" @close="closeModuleRightBox" ref="moduleBox"></module-box>
</transition>
<transition name="right-box">
<add-endpoint-box v-if="rightBox.addEndpoint.show" :current-project="currentProject" :current-module="currentModule" @close="closeAddEndpointRightBox" ref="addEndpointBox"></add-endpoint-box>
</transition>
<transition name="right-box">
<edit-endpoint-box v-if="rightBox.editEndpoint.show" :project="currentProject" :module="currentModule" :endpoint="endpoint" @close="closeEditEndpointRightBox" ref="editEndpointBox"></edit-endpoint-box>
</transition>
</div>
</template>
<script>
import exportXLSX from "../../common/exportXLSX";
import loading from "../../common/loading";
import chartDataFormat from "../../charts/chartDataFormat";
import bus from '../../../libs/bus'
import panelTab from '../../common/bottomBox/tabs/panelTab'
export default {
@@ -196,6 +198,11 @@
},
data() {
return {
rightBox: {
module: {show: false},
addEndpoint: {show: false},
editEndpoint: {show: false},
},
/*二级页面相关*/
bottomBox: {
endpoint: {}, //asset详情
@@ -224,13 +231,13 @@
tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
endpointEditInfos:{
endpoint:{
project:null,
module:null,
},
userData: [],
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpointTableTitle: [
{
label: this.$t("project.endpoint.endpointId"),
@@ -284,15 +291,16 @@
pageSize: 50,
total:0
},
currentEndpoint: {},
endpoint: {},
currentProjectTitle:'',
moduleList: [],
projectList: [],
pageType:'',//project endpoint
currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
editModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //编辑的module
currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //endpoint弹框用来回显module
module: {}, //编辑的module
blankModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //空白module
currentModule: {id: '', type: '', name: '', project: {}, port: '', path: '', param: '', paramObj: [], snmpParam: ''}, //用来回显的module
endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
endpointSearchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
@@ -437,10 +445,10 @@
}
}
},
getProjectList:function(reload){
getProjectList(reload) {
this.$get('project',{pageSize:-1}).then(response=>{
if(response.code == 200){
this.projectList=response.data.list;
this.projectList = response.data.list;
if (reload) {
if (this.projectList.length > 0) {
this.currentProject = this.projectList[0];
@@ -451,41 +459,42 @@
}
})
},
getProjectModule:function(projectId){
//return [];
let moduleList=Object.assign([],this.moduleList);
return moduleList.filter((item,index)=>{
return item.project.id==projectId;
getProjectModule(projectId) {
let moduleList = JSON.parse(JSON.stringify(this.moduleList));
return moduleList.filter((item,index) => {
return item.project.id == projectId;
})
},
projectChange:function(){
//展开后为避免左侧无数据，显示对应project的第一个module下的endpoint
// let currentProjectId=this.currentProjectTitle&&this.cuurentProjectTitle != ""?this.currentProjectTitle.split('-')[this.currentProjectTitle.split('-').length -1]:"";
// if(currentProjectId != ''){
// currentProjectId=Number.parseInt(currentProjectId);
// let moduleList=this.getProjectModule(currentProjectId);
// this.currentModule=moduleList[0];
// this.currentProject=this.projectList.find((item)=>{
// return item.id == currentProjectId
// })
// this.getEndpointTableData();
// // this.$store.commit('setProject',null)
// }
},
detailProjectInfo:function(event,project){
detailProject(event, project) {
this.pageType = 'project';
if(event){
if(project){
this.currentProject=project;
// this.$store.commit('setProject',this.currentProject)
if(event) {
if(project) {
this.currentProject = project;
}
// this.$refs.projectLeft.setActiveNames([]);
}else{
this.currentProjectTitle=this.currentProject.name+"-"+this.currentProject.id
} else {
this.currentProjectTitle = this.currentProject.name + "-" + this.currentProject.id;
}
this.currentModule={};
this.currentModule = {};
},
getAllModuleList:function(){
closeModuleRightBox(refresh) {
this.rightBox.module.show = false;
if (refresh) {
this.getAllModuleList();
}
},
closeAddEndpointRightBox(refresh) {
this.rightBox.addEndpoint.show = false;
if (refresh) {
this.getEndpointTableData();
}
},
closeEditEndpointRightBox(refresh) {
this.rightBox.editEndpoint.show = false;
if (refresh) {
this.getEndpointTableData();
}
},
getAllModuleList() {
this.$get('module', { pageSize: -1, pageNo: 1}).then(response => {
if (response.code === 200) {
this.moduleList = response.data.list;
@@ -500,46 +509,39 @@
//console.error(response.data.list[i], err);
}
}
// if (this.moduleList.length > 0) {
// this.currentModule = this.moduleList[0];
// } else {
// this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
// }
}
});
},
//左侧module列表选中切换
changeModule(module) {
changeModule(project, module) {
this.currentModule = module;
this.endpointSearchLabel = {moduleId: ''};
this.$refs.projectSearch.clearSearch();
this.bottomBox.showSubList = false;
this.currentProject = {};
this.currentProject = project;
},
//弹出endpoint编辑页
toEditEndpoint(endpoint) {
this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
this.$set(this.editEndpoint,'projectId',this.currentModule.project.id)
this.$set(this.editEndpoint,'moduleId',this.currentModule.id)
editEndpoint(endpoint) {
this.endpoint = JSON.parse(JSON.stringify(endpoint));
this.$set(this.endpoint,'projectId',this.currentModule.project.id)
this.$set(this.endpoint,'moduleId',this.currentModule.id)
this.rightBoxHandler(3);
this.$refs.editEndpointBox.toEdit(true, this.editEndpoint.id);
if (!this.editEndpoint.paramObj) {
this.$set(this.editEndpoint, 'paramObj', []);
this.rightBox.editEndpoint.show = true;
if (!this.endpoint.paramObj) {
this.$set(this.endpoint, 'paramObj', []);
}
},
toCreateEndpoint() {
this.endpointEditInfos.project=Object.assign({},this.currentModule.project);
this.endpointEditInfos.module=Object.assign({},this.currentModule)
this.$refs.addEndpointBox.show(true);
this.$refs.addEndpointBox.clearEndpoints();
addEndpoint() {
this.endpoint.project = Object.assign({},this.currentModule.project);
this.endpoint.module = Object.assign({},this.currentModule);
this.rightBox.addEndpoint.show = true;
},
//查看endpoint详情
detail(endpoint) {
this.currentEndpoint = Object.assign({}, endpoint);
detailEndpoint(endpoint) {
this.endpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = "panel";
this.bottomBox.showSubList = true;
},
@@ -559,40 +561,36 @@
this.$set(module, 'context_name', '');
},
//弹出module编辑页
toEditModule(module) {
editModule(module) {
this.currentModule = JSON.parse(JSON.stringify(module));
if (!this.currentModule.paramObj) {
this.$set(this.currentModule, 'paramObj', []);
}
this.editModule = JSON.parse(JSON.stringify(module));
if (!this.editModule.paramObj) {
this.$set(this.editModule, 'paramObj', []);
this.module = JSON.parse(JSON.stringify(module));
if (!this.module.paramObj) {
this.$set(this.module, 'paramObj', []);
}
if (this.editModule.snmpParam) {
this.initSnmpParam(this.editModule);
if (this.module.snmpParam) {
this.initSnmpParam(this.module);
}
this.rightBoxHandler(2);
this.rightBox.module.show = true;
this.$nextTick(() => {
this.$refs.moduleBox.initWalk();
});
},
toAddModule() {
this.editModule = {id: '', type: '', name: '', project: this.currentProject, port: '', path: '', param: '', paramObj: [], snmpParam: ''};
this.rightBoxHandler(2);
addModule() {
this.module = this.newModule();
this.rightBox.module.show = true;
this.$nextTick(() => {
this.$refs.moduleBox.initWalk();
});
},
newModule() {
return JSON.parse(JSON.stringify(this.blankModule));
},
//asset弹框控制
/*tabControl(data) {
if (data === 'close') {
this.viewAssetState = false
this.$refs['assetEditUnit'].tabView = false
}
},*/
//搜索
endpointSearch: function(searchObj) {
endpointSearch(searchObj) {
let orderBy='';
if(this.endpointSearchLabel.orderBy){
orderBy=this.endpointSearchLabel.orderBy
@@ -610,41 +608,6 @@
this.getEndpointTableData();
},
//控制弹框状态 type 1:project; 2:module; 3:editEndponit; 4:addEndpoint;
rightBoxHandler(type) {
if (type == 1) {
this.$refs.projectBox.show(true);
if (this.$refs.moduleBox) {
this.$refs.moduleBox.show(false);
}
if (this.$refs.editEndpointBox) {
this.$refs.editEndpointBox.show(false);
}
//this.$refs.addEndpointBox.show(false);
} else if (type == 2) {
this.$refs.moduleBox.show(true,true);
if (this.$refs.projectBox) {
this.$refs.projectBox.show(false);
}
if (this.$refs.editEndpointBox) {
this.$refs.editEndpointBox.show(false);
}
//this.$refs.addEndpointBox.show(false);
} else if (type == 3) {
this.$refs.editEndpointBox.show(true);
if (this.$refs.projectBox) {
this.$refs.projectBox.show(false);
}
if (this.$refs.moduleBox) {
this.$refs.moduleBox.show(false);
}
//this.$refs.addEndpointBox.show(false);
} else if (type == 4) {
}
},
dateFormat(time) {
if (!time) {
return '-';
@@ -660,15 +623,15 @@
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
},
viewAsset(endpoint) {
this.currentEndpoint = Object.assign({}, endpoint);
this.endpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = 'assetDetail';
this.bottomBox.showSubList = true;
/*this.viewAssetState=true;
this.$refs.assetEditUnit.getAssetData(id);
this.$refs.assetEditUnit.tabView=true;*/
},
showEndpoint(endpoint) {
this.currentEndpoint = Object.assign({}, endpoint);
query(endpoint) {
this.endpoint = Object.assign({}, endpoint);
this.bottomBox.targetTab = 'endpointQuery';
this.bottomBox.showSubList = true;
},
@@ -914,7 +877,7 @@
immediate:true,
handler(n, o) {
this.currentProject = Object.assign({}, n);
this.detailProjectInfo();
this.detailProject();
}
},
projectListChange:function(n,o){
@@ -940,7 +903,7 @@
let vm = this;
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
currentEndpoint: {
endpoint: {
deep: true,
handler(n) {
this.bottomBox.endpointDetail = this.convertToDetail(n);