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

perf: endpoint弹框样式调整及字段校验

Browse Source 
1.endpoint弹框，校验未完成
2.module弹框bug修复
This commit is contained in:
chenjinsong
2019-12-31 19:02:58 +08:00
parent 65a2e31304
commit 2d0132e8c7
8 changed files with 317 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
nezha-fronted/src/assets/css/main.css
View File

@@ -55,6 +55,19 @@ html {
.right-child-box .line-100 { .right-child-box .line-100 {
background: #DCDFE6; background: #DCDFE6;
} }
.width-50 {
width: 50% !important;
}
.width-100 {
width: 100% !important;
}
.height-50 {
height: 50% !important;
}
.height-100 {
height: 100% !important;
}
/* begin--按钮组件*/ /* begin--按钮组件*/
.nz-btn { .nz-btn {
border-radius: 4px; border-radius: 4px;
@@ -72,6 +85,7 @@ html {
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
padding: 2px 12px; padding: 2px 12px;
font-weight: 500;
} }
.nz-btn.nz-btn-style-normal { /* 蓝色按钮 */ .nz-btn.nz-btn-style-normal { /* 蓝色按钮 */
background-color: #16b; background-color: #16b;
@@ -89,10 +103,10 @@ html {
color: #444; color: #444;
text-shadow: 0 1px 1px rgba(255,255,255,.75); text-shadow: 0 1px 1px rgba(255,255,255,.75);
} }
.nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标无文字的情况下使用*/ .nz-btn.nz-btn-size-small.nz-btn-style-square { /* 单图标时是个正方形*/
padding: 2px 5px; padding: 2px 5px;
} }
.nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标无文字的情况下使用*/ .nz-btn.nz-btn-size-normal.nz-btn-style-square { /* 单图标时是个正方形*/
padding: 4px 6px; padding: 4px 6px;
} }
.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) { .nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
@@ -120,6 +134,25 @@ html {
border-top-left-radius: 0; border-top-left-radius: 0;
} }
/* end--按钮组件*/ /* end--按钮组件*/
/* begin--el-input扩展 */
.input-x-mini .el-input__inner {
height: 24px;
line-height: 24px;
padding: 0 5px;
font-size: 12px;
}
.nz-input-group-prepend {
border-radius: 4px 0 0 4px;
}
.nz-input-group-middle, .nz-input-group-middle .el-input__inner {
border-radius: 0;
}
.nz-input-group-append {
border-radius: 0 4px 4px 0;
}
/* end--el-input扩展 */
/* end--通用*/ /* end--通用*/
/* begin--左侧列表*/ /* begin--左侧列表*/
@@ -270,15 +303,15 @@ html {
height: calc(100% - 100px); height: calc(100% - 100px);
} }
.right-box-add-endpoint { .right-box-add-endpoint {
width: 820px; width: 840px;
height: calc(100% - 100px); height: calc(100% - 100px);
} }
/* begin--右侧弹框--顶部按钮*/ /* begin--右侧弹框--顶部按钮*/
.right-box-top-btns { .right-box-top-btns {
text-align: center; text-align: center;
float: right; float: right;
padding-right: 20px; padding-right: 10px;
padding-top: 5px; padding-top: 8px;
} }
/* end--右侧弹框--顶部按钮*/ /* end--右侧弹框--顶部按钮*/
@@ -300,6 +333,9 @@ html {
.right-box-form { .right-box-form {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
.right-box-add-endpoint .right-box-form {
height: 100%;
}
.right-box-form .el-form-item { .right-box-form .el-form-item {
margin-bottom: 15px; margin-bottom: 15px;
} }
@@ -314,8 +350,11 @@ html {
.right-box-form .el-form-item__content { .right-box-form .el-form-item__content {
line-height: 32px; line-height: 32px;
} }
.right-box-form-box .el-scrollbar__view {
height: 100%;
}
.right-box-form-row { .right-box-form-row {
margin-top: 16px; margin-top: 22px;
} }
.right-box-form-content { .right-box-form-content {
line-height: 32px; line-height: 32px;
@@ -448,16 +487,9 @@ html {
} }
/* end--右侧弹框--底部按钮*/ /* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/ /* end--右侧弹框*/
/* begin--endpoint->子弹框asset搜索框前缀和后缀*/ /* begin--endpoint->子弹框asset搜索框前缀和后缀*/
.right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend, .assets-box .el-input-group__append, .assets-box .el-input-group__prepend { .right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend, .assets-box .el-input-group__append, .assets-box .el-input-group__prepend {
background-color: #656565;
color: white;
vertical-align: middle;
display: table-cell;
position: relative;
padding: 0 8px;
border: none;
font-size: 13px;
} }
/* end--endpoint->子弹框asset搜索框前缀和后缀*/ /* end--endpoint->子弹框asset搜索框前缀和后缀*/

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

@@ -205,7 +205,7 @@
</div>--> </div>-->
</div> </div>
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box> <project-box :project="editProject" ref="projectBox"></project-box>
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box> <module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" <add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload=""
ref="addEndpointBox"></add-endpoint-box> ref="addEndpointBox"></add-endpoint-box>
@@ -428,9 +428,6 @@
this.$refs.projectBox.show(true); this.$refs.projectBox.show(true);
this.editProject = Object.assign({}, p); this.editProject = Object.assign({}, p);
}, },
projectReload() {
this.getProjectList();
},
logout() { logout() {
this.$get('logout'); this.$get('logout');
this.jumpTo('login'); this.jumpTo('login');
@@ -449,7 +446,7 @@
}, },
computed: { computed: {
projectListReloadWatch() { projectListReloadWatch() {
return this.$store.state.projectListReload; return this.$store.state.projectListChange;
}, },
getIdcData() { getIdcData() {
return this.$store.state.assetData.idcData return this.$store.state.assetData.idcData
@@ -463,10 +460,7 @@
deep: true, deep: true,
}, },
projectListReloadWatch(n, o) { projectListReloadWatch(n, o) {
if (n) { this.getProjectList();
this.getProjectList();
this.$store.commit('projectListChange', false);
}
} }
} }
} }

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

@@ -3,18 +3,12 @@
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)"> <div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
<!-- begin--顶部按钮--> <!-- begin--顶部按钮-->
<div class="right-box-top-btns"> <div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc"> <button type="button" @click="save" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<div class="right-box-btn-icon"> <span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
<i class="el-icon-close"></i> </button>
</div> <button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span>{{$t('overall.esc')}}</span> <span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</div> </button>
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
<div class="right-box-btn-icon">
<i class="el-icon-edit-outline"></i>
</div>
<span>{{$t('overall.save')}}</span>
</div>
</div> </div>
<!-- end--顶部按钮--> <!-- end--顶部按钮-->
@@ -23,126 +17,122 @@
<!-- end--标题--> <!-- end--标题-->
<!-- begin--表单--> <!-- begin--表单-->
<div class="right-box-form"> <el-scrollbar class="right-box-form-box">
<!--project--> <el-form class="right-box-form" label-position="top" ref="addEndpointForm" :model="endpointForm" :rules="rules">
<div class="right-box-form-row"> <!--project-->
<div class="right-box-form-label">{{$t("project.project.project")}}</div> <el-form-item :label='$t("project.project.project")' prop="projectId">
<div class="right-box-form-content">
<el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" size="small"> <el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" size="small">
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option> <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select> </el-select>
</div> </el-form-item>
</div> <!--module-->
<!--module--> <el-form-item :label='$t("project.module.module")' prop="moduleId">
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
<div class="right-box-form-content">
<el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small"> <el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small">
<el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option> <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select> </el-select>
</div> </el-form-item>
</div> <!--asset和endpoint-->
<!--asset和endpoint--> <div class="right-box-form-row right-child-boxes">
<div class="right-box-form-row right-child-boxes"> <div class="right-child-box assets-box">
<div class="right-child-box assets-box"> <!--begin--标题-->
<!-- begin--标题--> <div class="right-child-box-title">{{$t('asset.asset')}}</div>
<div class="right-child-box-title">{{$t('asset.asset')}}</div> <!--end--标题-->
<!-- end--标题--> <!--begin--搜索框-->
<!-- begin--搜索框--> <div class="endpoint-asset-search">
<el-input placeholder="" v-model="assetSearch.text"> <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">
<template slot="prepend"> <span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
<div class="endpoint-asset-prepend"> <span>
<div class="endpoint-asset-label"> <i v-if="assetSearch.dropdownShow" class="el-icon-caret-top"></i>
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span> <i v-if="!assetSearch.dropdownShow" class="el-icon-caret-bottom"></i>
<span @click="assetSearch.dropdownShow = !assetSearch.dropdownShow"> </span>
<i v-if="assetSearch.dropdownShow" class="el-icon-arrow-up"></i> </button><div
<i v-if="!assetSearch.dropdownShow" class="el-icon-arrow-down"></i> class="endpoint-asset-search-input">
</span> <el-input class="input-x-mini nz-input-group-middle" placeholder="" v-model="assetSearch.text"></el-input>
</div> </div><button
<div class="endpoint-asset-dropdown" v-if="assetSearch.dropdownShow"> 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"></i></button>
<div @click="dropdownSelect('IP')" class="endpoint-asset-dropdown-item">IP</div>
<div @click="dropdownSelect('SN')" class="endpoint-asset-dropdown-item">SN</div> <div class="endpoint-asset-search-dropdown" v-if="assetSearch.dropdownShow">
</div> <div @click="dropdownSelect('IP')" class="endpoint-asset-search-dropdown-item">IP</div>
</div> <div @click="dropdownSelect('SN')" class="endpoint-asset-search-dropdown-item">SN</div>
</template>
<template slot="append"><i @click="searchAsset" class="el-icon-search"></i></template>
</el-input>
<!--end--搜索框-->
<!-- begin--table-->
<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="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row">
<div class="endpoint-sub-table-col">{{item.host}}</div>
<div class="endpoint-sub-table-col">{{item.sn}}</div>
</div> </div>
</div> </div>
</div>
<!-- end--table--> <!--end--搜索框-->
</div> <!-- begin--table-->
<!--右侧endpoint列表--> <div class="endpoint-sub-table">
<div class="right-child-box endpoints-box"> <div class="endpoint-sub-table-head">
<!--module--> <div class="endpoint-sub-table-col">IP</div>
<div class="endpoints-box-module-info"> <div class="endpoint-sub-table-col">SN</div>
<div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
<el-input class="module-info module-info-port" size="mini" v-model="currentModuleCopy.port"></el-input>
<el-popover
placement="bottom"
width="200"
trigger="hover"
>
<div class="endpoint-param-pop">
<div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
</div> </div>
<el-input @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param" size="mini" v-model="currentModuleCopy.param"></el-input> <div class="line-100"></div>
</el-popover> <div class="endpoint-sub-table-body">
<el-input class="module-info module-info-path" size="mini" v-model="currentModuleCopy.path"></el-input> <div v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
<el-button class="module-info module-info-cover" size="mini" @click="coverEndpoint">{{$t('overall.cover')}}</el-button> <div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row">
<div class="endpoint-sub-table-col">{{item.host}}</div>
<div class="endpoint-sub-table-col">{{item.sn}}</div>
</div>
</div>
</div>
<!--end--table-->
</div> </div>
<!--endpoints--> <!--右侧endpoint列表-->
<div class="endpoints-box-endpoints"> <div class="right-child-box endpoints-box">
<el-table <!--module-->
:data="endpointList" <div class="endpoints-box-module-info">
ref="endpointTable" <div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
style="width: 100%;border-radius: 4px;" <el-input class="module-info module-info-port input-x-mini" v-model="currentModuleCopy.port"></el-input>
height="calc(100% - 40px)" <el-popover
empty-text=" "> placement="bottom"
<el-table-column width="200"
type="selection" trigger="hover"
width="25"
style="padding: 0 1px;">
</el-table-column>
<el-table-column
label-class-name="endpoints-box-endpoints-title"
v-for="(title, index) in endpointTableTitle"
v-if="title.show"
:width="title.width"
:key="`col-${index}`"
:label="title.label"
> >
<template slot-scope="scope" :column="title"> <div class="endpoint-param-pop">
<span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span> <div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
<span v-else-if="title.prop == 'param'"> </div>
<el-popover <el-input @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param input-x-mini" v-model="currentModuleCopy.param"></el-input>
placement="bottom" </el-popover>
width="200" <el-input class="module-info module-info-path input-x-mini" v-model="currentModuleCopy.path"></el-input>
trigger="hover" <button type="button" @click="coverEndpoint" class="nz-btn nz-btn-size-small nz-btn-style-light nz-btn-style-square module-info module-info-cover">{{$t('overall.cover')}}</button>
> </div>
<div class="endpoint-param-pop"> <!--endpoints-->
<div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div> <div class="endpoints-box-endpoints">
</div> <el-table
<span slot="reference"> :data="endpointList"
<span @mousedown.stop v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span> ref="endpointTable"
<span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param" size="mini" v-model="scope.row.param"></el-input></span> style="width: 100%;border-radius: 4px;"
</span> height="calc(100% - 36px)"
</el-popover> empty-text=" ">
</span> <el-table-column
<span v-else-if="title.prop == 'path'"> type="selection"
width="25"
style="padding: 0 1px;">
</el-table-column>
<el-table-column
label-class-name="endpoints-box-endpoints-title"
v-for="(title, index) in endpointTableTitle"
v-if="title.show"
:width="title.width"
:key="`col-${index}`"
:label="title.label"
>
<template slot-scope="scope" :column="title">
<span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
<span v-else-if="title.prop == 'param'">
<el-popover
placement="bottom"
width="200"
trigger="hover"
>
<div class="endpoint-param-pop">
<div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
</div>
<span slot="reference">
<span @mousedown.stop v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
<span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param input-x-mini" v-model="scope.row.param"></el-input></span>
</span>
</el-popover>
</span>
<span v-else-if="title.prop == 'path'">
<el-popover <el-popover
placement="bottom" placement="bottom"
width="100" width="100"
@@ -151,55 +141,50 @@
> >
<span slot="reference"> <span slot="reference">
<span v-if="!scope.row.isEdit">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span> <span v-if="!scope.row.isEdit">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.path"></el-input></span> <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.path"></el-input></span>
</span> </span>
</el-popover> </el-popover>
</span> </span>
<span v-else-if="title.prop == 'port'"> <span v-else-if="title.prop == 'port'">
<span v-if="!scope.row.isEdit">{{scope.row.port}}</span> <span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.port"></el-input></span> <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.port"></el-input></span>
</span> </span>
<span v-else-if="title.prop == 'host'"> <span v-else-if="title.prop == 'host'">
<span v-if="!scope.row.isEdit">{{scope.row.host}}</span> <span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.host"></el-input></span> <span @mousedown.stop v-else><el-input class="endpoint-info input-x-mini" v-model="scope.row.host"></el-input></span>
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="" width="56"> <el-table-column label="" width="56">
<template slot-scope="scope" :column="title"> <template slot-scope="scope" :column="title">
<div> <div>
<span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span> <span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
<span v-else class="endpoint-box-row-symbol" @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span> <span v-else class="endpoint-box-row-symbol" @mousedown.stop @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
<span class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="el-icon-minus"></i></span> <span class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="nz-icon nz-icon-minus-square"></i></span>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div> <div>
<el-button class="endpoints-clear-btn" size="mini" @click="clearSelection">{{$t('overall.clear')}}</el-button> <button type="button" @click="clearSelection" class="nz-btn nz-btn-size-small nz-btn-style-light endpoints-clear-btn">{{$t('overall.clear')}}</button>
<span style="display: inline-block; float: right;line-height: 39px;padding-right: 15px;">All: {{this.endpointList.length}}</span> <span style="display: inline-block; font-size: 14px; float: right;line-height: 35px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-form>
</div>
<!-- end--表单-->
<!-- begin--底部按钮--> </el-scrollbar>
<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{$t('overall.create')}}</div>
</div>
<!-- end--底部按钮-->
<!--start--param编辑框--> <!--start--param编辑框-->
<transition name="right-sub-box"> <transition name="right-sub-box">
<div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'"> <div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
<div class="param-box"> <div class="param-box">
<div class="param-box-row" v-for="(item, index) in tempParamObj"> <div class="param-box-row" v-for="(item, index) in tempParamObj">
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input> <el-input placeholder="key" class="param-box-row-key input-x-mini" v-model="item.key"></el-input>
<span class="param-box-row-eq">=</span> <span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input> <el-input placeholder="value" class="param-box-row-value input-x-mini" v-model="item.value"></el-input>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span> <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-minus-square"></i></span>
</div> </div>
</div> </div>
<div style="width: 100%; text-align: center; height: 25px;"> <div style="width: 100%; text-align: center; height: 25px;">
@@ -221,6 +206,15 @@
}, },
data() { data() {
return { return {
rules: {
projectId: [
{required: true, message: this.$t('validate.required'), trigger: 'change'}
],
moduleId: [
{required: true, message: this.$t('validate.required'), trigger: 'change'}
],
},
endpointForm: {projectId: '', moduleId: '', endpointList:[]},
currentModuleCopy: {}, currentModuleCopy: {},
tempParamObj: [], tempParamObj: [],
tempEndpoint: {}, tempEndpoint: {},
@@ -268,6 +262,7 @@
show(show) { show(show) {
this.rightBox.show = show; this.rightBox.show = show;
this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原 this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原
this.endpointForm = {projectId: '', moduleId: '', endpointList:[]}
}, },
//子弹框控制 obj: module或endpoint对象 type:1module2endpoint //子弹框控制 obj: module或endpoint对象 type:1module2endpoint
@@ -330,9 +325,11 @@
//编辑endpoint //编辑endpoint
toEditEndpoint(endpoint) { toEditEndpoint(endpoint) {
console.info(1)
endpoint.isEdit = true; endpoint.isEdit = true;
}, },
editEndpoint(endpoint) { editEndpoint(endpoint) {
console.info(2)
endpoint.isEdit = false; endpoint.isEdit = false;
}, },
@@ -396,6 +393,8 @@
changeProject(project) { changeProject(project) {
this.currentModuleCopy = {}; this.currentModuleCopy = {};
this.endpointForm.moduleId = '';
this.endpointForm.projectId = project.id;
this.editParamBox.show = false; this.editParamBox.show = false;
this.tempParamObj = []; this.tempParamObj = [];
this.endpointList = []; this.endpointList = [];
@@ -403,6 +402,7 @@
}, },
changeModule(module) { changeModule(module) {
this.endpointForm.moduleId = module.id;
this.editParamBox.show = false; this.editParamBox.show = false;
this.tempParamObj = []; this.tempParamObj = [];
}, },
@@ -469,15 +469,23 @@
//保存endpoint //保存endpoint
save() { save() {
this.$post('endpoint', this.endpointList).then(response => { this.endpointForm.projectId = this.currentProject.id;
if (response.code === 200) { this.endpointForm.moduleId = this.currentModuleCopy.id;
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$refs.addEndpointForm.validate((valid) => {
this.esc(); if (valid) {
this.$emit("reload"); this.$post('endpoint', this.endpointList).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc();
this.$emit("reload");
} else {
this.$message.error(response.msg);
}
});
} else { } else {
this.$message.error(response.msg); return false;
} }
}); })
}, },
//覆盖endpoint的port/path/param //覆盖endpoint的port/path/param
@@ -522,6 +530,14 @@
this.endpointList = []; this.endpointList = [];
} }
}, },
computed: {
projectListReloadWatch() {
return this.$store.state.projectListChange;
},
moduleListReloadWatch() {
return this.$store.state.moduleListChange;
},
},
created() { created() {
this.getProjectList(); this.getProjectList();
this.getAssetList(); this.getAssetList();
@@ -530,8 +546,17 @@
currentProject(n, o) { currentProject(n, o) {
this.getModuleList(n.id); this.getModuleList(n.id);
}, },
currentModule(n, o) { currentModule: {
this.currentModuleCopy = JSON.parse(JSON.stringify(n)); immediate: true,
handler(n, o) {
this.currentModuleCopy = JSON.parse(JSON.stringify(n));
}
},
projectListReloadWatch(n, o) {
this.getProjectList();
},
moduleListReloadWatch(n, o) {
this.getModuleList(this.currentProject.id);
} }
} }
} }
@@ -566,6 +591,7 @@
.param-box { .param-box {
height: 200px; height: 200px;
overflow: auto; overflow: auto;
border: none;
} }
.param-box-row { .param-box-row {
padding: 7px 0 0 0; padding: 7px 0 0 0;
@@ -580,45 +606,17 @@
} }
.param-box-row-eq { .param-box-row-eq {
display: inline-block; display: inline-block;
width: 18px; width: 14px;
text-align: center; text-align: center;
height: 22px; height: 22px;
line-height: 22px; line-height: 22px;
color: #c4c7cF; color: #c4c7cF;
} }
.param-box-row-symbol:first-of-type {
font-size: 18px;
color: #bbbbbb;
text-align: center;
display: inline-block;
position: absolute;
top: 7px;
right: 34px;
cursor: pointer;
}
.param-box-row-symbol:last-of-type {
font-size: 12px;
color: #bbbbbb;
border: 1px solid #bbbbbb;
text-align: center;
height: 12px;
width: 14px;
display: inline-block;
position: absolute;
top: 12px;
left: 135px;
cursor: pointer;
}
.param-box-row-symbol>i {
position: absolute;
top: 1px;
right: 1px;
}
/* end--param*/ /* end--param*/
/* begin--小盒子*/ /* begin--小盒子*/
.right-child-boxes { .right-child-boxes {
height: calc(100% - 279px); height: calc(100% - 196px);
position: relative; position: relative;
} }
.endpoint-to-right-symbol { .endpoint-to-right-symbol {
@@ -674,12 +672,12 @@
display: inline-block; display: inline-block;
} }
.module-info-port { .module-info-port {
width: 55px; width: 53px;
right: 210px; right: 209px;
} }
.module-info-param { .module-info-param {
width: 88px; width: 89px;
right: 118px; right: 116px;
} }
.module-info-path { .module-info-path {
width: 60px; width: 60px;
@@ -690,11 +688,7 @@
} }
.right-child-box .module-info-cover { .right-child-box .module-info-cover {
right: 4px; right: 4px;
height: 24px; padding: 2px 4px;
padding: 5px 5px;
background: #656565;
color: white;
border-radius: 4px;
} }
.endpoints-box-endpoints { .endpoints-box-endpoints {
border-radius: 4px; border-radius: 4px;
@@ -714,49 +708,57 @@
height: 225px; height: 225px;
position: fixed; position: fixed;
z-index: 2; z-index: 2;
padding: 0 0 0 10px; padding: 0;
} }
/* begin--搜索框*/ /* begin--搜索框*/
.endpoint-asset-prepend { .endpoint-asset-search {
border-radius: 4px 0 0 4px; display: inline-block;
float: right;
padding: 7px 8px 0 0;
position: relative;
} }
.endpoint-asset-label { .endpoint-asset-search-dropdown {
line-height: 26px;
height: 26px;
}
.endpoint-asset-dropdown {
position: absolute; position: absolute;
top: 27px; top: 34px;
background-color: #656565; background-color: #444;
border-radius: 4px; border-radius: 4px;
width: 52px; width: 44px;
left: 0; left: 0;
} }
.endpoint-asset-dropdown-item { .endpoint-asset-search-dropdown-item {
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
height: 22px; height: 22px;
cursor: default; cursor: default;
color: white;
font-size: 12px;
} }
.endpoint-asset-label-txt { .endpoint-asset-label-txt {
display: inline-block; display: inline-block;
width: 19px; width: 19px;
text-align: center; text-align: center;
} }
.endpoint-asset-dropdown-item:first-of-type { .endpoint-asset-search-dropdown-item:first-of-type {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
.endpoint-asset-dropdown-item:last-of-type { .endpoint-asset-search-dropdown-item:last-of-type {
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} }
.endpoint-asset-dropdown-item:hover { .endpoint-asset-search-dropdown-item:hover {
background-color: #3a8ee6; background-color: #222;
color: #ff9900;
}
.endpoint-asset-search-input {
display: inline-block;
width: 100px;
vertical-align: middle;
} }
/* end--搜索框*/ /* end--搜索框*/
/* begin--table*/ /* begin--table*/
.endpoint-sub-table { .endpoint-sub-table {
padding-top: 15px; padding-top: 15px;
height: 100%; height: calc(100% - 45px);
} }
.line-100 { .line-100 {
margin-bottom: 3px; margin-bottom: 3px;
@@ -796,7 +798,7 @@
font-size: 15px; font-size: 15px;
position: relative; position: relative;
overflow: auto; overflow: auto;
height: calc(100% - 95px); height: calc(100% - 34px);
} }
.endpoint-sub-table-body-dialog { .endpoint-sub-table-body-dialog {
width: 100%; width: 100%;
@@ -806,20 +808,13 @@
opacity: 0.2; opacity: 0.2;
} }
.endpoints-clear-btn { .endpoints-clear-btn {
margin: 6px 0 0 10px; margin: 6px 0 0 7px;
} }
/* end--table*/ /* end--table*/
/* end--子弹框*/ /* end--子弹框*/
</style> </style>
<style> <style>
.endpoints-box-module-info .el-input input,
.endpoints-box-endpoints .el-input input,
.right-sub-box .el-input input{
padding: 0 5px;
height: 24px;
line-height: 24px;
}
.endpoints-box-endpoints-title { .endpoints-box-endpoints-title {
color: black; color: black;
font-weight: 400; font-weight: 400;

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

@@ -386,6 +386,14 @@
this.getProjectList(); this.getProjectList();
this.getAssetList(); this.getAssetList();
}, },
computed: {
projectListReloadWatch() {
return this.$store.state.projectListChange;
},
moduleListReloadWatch() {
return this.$store.state.moduleListChange;
},
},
mounted() { mounted() {
setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100); setTimeout(()=>{this.getModuleList(this.currentProject.id);}, 100);
}, },
@@ -396,6 +404,12 @@
} else { } else {
this.rightBox.title = this.$t("project.endpoint.createEndpoint"); this.rightBox.title = this.$t("project.endpoint.createEndpoint");
} }
},
projectListReloadWatch(n, o) {
this.getProjectList();
},
moduleListReloadWatch(n, o) {
this.getModuleList(this.currentProject.id);
} }
} }
} }

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

@@ -41,7 +41,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="module" label-position="top" :rules="rules" ref="moduleForm"> <el-form class="right-box-form" :model="module" label-position="top" :rules="rules" ref="moduleForm">
<el-form-item :label='$t("project.project.project")' prop="project"> <el-form-item :label='$t("project.project.project")' prop="project.id">
<el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small"> <el-select value-key="id" popper-class="config-dropdown" v-model="module.project" placeholder="" size="small">
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option> <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select> </el-select>
@@ -65,7 +65,7 @@
</el-form-item> </el-form-item>
<el-form-item class="right-box-form-param"> <el-form-item class="right-box-form-param">
<template slot="label"> <template slot="label">
<span>Label</span> <span>{{$t('project.endpoint.param')}}</span>
<div class="right-box-form-btns"> <div class="right-box-form-btns">
<button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button> <button style="display: none;">第一个button会出现意料之外的hover样式，找不到原因，只好加个不可见的button规避问题</button>
<button type="button" @click="clearAllParam" class="nz-btn nz-btn-size-small nz-btn-style-light"> <button type="button" @click="clearAllParam" class="nz-btn nz-btn-size-small nz-btn-style-light">
@@ -211,22 +211,22 @@
this.module.param = this.paramToJson(this.module.paramObj); this.module.param = this.paramToJson(this.module.paramObj);
this.$refs.moduleForm.validate((valid) => { this.$refs.moduleForm.validate((valid) => {
if (valid) { if (valid) {
this.module.projectId = this.module.project.id;
if (this.module.id) { if (this.module.id) {
this.$put('module', this.module).then(response => { this.$put('module', this.module).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload"); this.$store.commit('moduleListChange');
this.rightBox.show = false; this.rightBox.show = false;
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
}); });
} else { } else {
this.module.projectId = this.module.project.id;
this.$post('module', this.module).then(response => { this.$post('module', this.module).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload"); this.$store.commit('moduleListChange');
this.rightBox.show = false; this.rightBox.show = false;
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
@@ -234,7 +234,6 @@
}); });
} }
} else { } else {
console.log('error submit!!');
return false; return false;
} }
}); });
@@ -251,7 +250,7 @@
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false; this.rightBox.show = false;
this.$emit("reload"); this.$store.commit('moduleListChange');
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
@@ -310,6 +309,11 @@
created() { created() {
this.getProjectList(); this.getProjectList();
}, },
computed: {
projectListReloadWatch() {
return this.$store.state.projectListChange;
},
},
watch: { watch: {
module: { module: {
immediate: true, immediate: true,
@@ -320,6 +324,9 @@
this.rightBox.title = this.$t("project.module.createModule"); this.rightBox.title = this.$t("project.module.createModule");
} }
} }
},
projectListReloadWatch(n, o) {
this.getProjectList();
} }
} }
} }

25
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -29,24 +29,6 @@
</el-form> </el-form>
</el-scrollbar> </el-scrollbar>
<!--&lt;!&ndash; begin&#45;&#45;表单&ndash;&gt;
<div class="right-box-form">
&lt;!&ndash;name&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
<div class="right-box-form-content">
<el-input placeholder="" maxlength="64" show-word-limit v-model="project.name" size="small"></el-input>
</div>
</div>
&lt;!&ndash;description&ndash;&gt;
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.project.description")}}</div>
<div class="right-box-form-content">
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="project.remark" size="small"></el-input>
</div>
</div>
</div>-->
<!-- begin--底部按钮--> <!-- begin--底部按钮-->
<!--<div class="right-box-bottom-btns"> <!--<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div> <div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
@@ -93,8 +75,9 @@
this.$put('project', this.project).then(response => { this.$put('project', this.project).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload");
this.rightBox.show = false; this.rightBox.show = false;
this.$store.commit('projectListChange');
this.$store.commit('setProject', this.project);
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
@@ -103,7 +86,7 @@
this.$post('project', this.project).then(response => { this.$post('project', this.project).then(response => {
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$emit("reload"); this.$store.commit('projectListChange');
this.rightBox.show = false; this.rightBox.show = false;
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
@@ -128,7 +111,7 @@
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.rightBox.show = false; this.rightBox.show = false;
this.$emit("reload"); this.$store.commit('projectListChange');
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }

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

@@ -438,7 +438,10 @@
computed: { computed: {
currentProjectChange() { currentProjectChange() {
return this.$store.state.currentProject; return this.$store.state.currentProject;
} },
moduleListReloadWatch() {
return this.$store.state.moduleListChange;
},
}, },
watch: { watch: {
currentProjectChange(n, o) { currentProjectChange(n, o) {
@@ -457,6 +460,9 @@
this.endpointTableData = []; this.endpointTableData = [];
this.metricsTableData = []; this.metricsTableData = [];
} }
},
moduleListReloadWatch(n, o) {
this.getModuleList(this.currentProject.id);
} }
} }
} }

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

@@ -14,12 +14,9 @@ const store = new Vuex.Store({
name: '', name: '',
remark: '' remark: ''
}, },
projectListReload: false, projectListChange: 0,
createProject: false, moduleListChange: 0,
createModule: false, flushDataSign: false,
createEndpoint: false,
createAlertConfig: false,
flushDataSign:false
}, },
getters: { getters: {
}, },
@@ -30,21 +27,12 @@ const store = new Vuex.Store({
projectRightBoxShow(state, show) { projectRightBoxShow(state, show) {
state.projectBoxShow = show; state.projectBoxShow = show;
}, },
projectListChange(state, reload) { projectListChange(state) {
state.projectListReload = reload; state.projectListChange = state.projectListChange + 1;
},
toCreateProject(state, status) {
state.createProject = status;
},
toCreateModule(state, status) {
state.createModule = status;
},
toCreateEndpoint(state, status) {
state.createEndpoint = status;
},
toCreateAlertConfig(state, status) {
state.createAlertConfig = status;
}, },
moduleListChange(state) {
state.moduleListChange = state.moduleListChange + 1;
}
}, },
actions: { actions: {
} }