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

Merge remote-tracking branch 'origin/codeCheck' into codeCheck

Browse Source
This commit is contained in:
wanghaoyu
2019-12-12 17:07:41 +08:00
parent 7771994ef1 3b00a52538
commit 8aa9a13d59
6 changed files with 495 additions and 767 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -125,11 +125,13 @@ color: white;
}
.top-tools .top-tool-btn-active {
color: white;
border: 1px solid #656565;
background-color: #656565;
}
.top-tools .top-tool-btn-active:focus, .top-tools .top-tool-btn-active:hover {
color: white;
background-color: #656565;
border: 1px solid #656565;
}
.top-tools .top-tool-btn-txt {
font-size: 14px;
@@ -153,6 +155,7 @@ color: white;
text-align: center;
}
/* end--分页*/
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right {
from {right: -800px}
@@ -169,9 +172,179 @@ color: white;
animation: slide-out-to-right 0.4s;
}
/* end--右弹框滑入滑出动画*/
/* begin--右子弹框动画*/
@keyframes appear {
from {opacity:0}
to {opacity:1}
}
@keyframes disappear {
from {opacity:1}
to {opacity:0}
}
.right-sub-box-enter-active {
animation: appear 0.4s;
}
.right-sub-box-leave-active {
animation: disappear 0.4s;
}
/* end--右子弹框动画*/
/* end--右侧内容*/
/* start--自定义可编辑的el-select下拉框样式*/
/* begin--右侧弹框*/
.right-box, .right-sub-box {
position: fixed;
top: 80px;
right: 15px;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-endpoint {
width: 520px;
height: calc(100% - 100px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
display: inline-block;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 20px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: 100%;
}
.right-box-form-content .right-box-row-with-btn {
width: calc(100% - 38px);
vertical-align: top;
}
.right-box-row-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
cursor: pointer;
}
.right-box-row-btn-active {
color: white;
border: 1px solid #656565;
background-color: #656565;
}
.right-box-row-btn:hover {
border: 1px solid #C0C4CC;
}
.right-box-row-btn-active:hover {
border: 1px solid #656565;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
/* begin--endpoint->子弹框asset搜索框前缀和后缀*/
.right-sub-box .el-input-group__append, .right-sub-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;
}
.right-sub-box .el-input-group__prepend {
border-radius: 4px 0 0 4px;
}
.right-sub-box .el-input-group__append {
border-radius: 0 4px 4px 0;
}
/* end--endpoint->子弹框asset搜索框前缀和后缀*/
/* begin--自定义可编辑的el-select下拉框样式*/
.config-dropdown {
width: 550px;
}

9
nezha-fronted/src/components/common/language/en.js
View File

@@ -14,7 +14,8 @@ const en = {
save: 'Save',
search: 'Search',
add: "Add",
option: "Option"
option: "Option",
clearAll: "Clear All"
},
asset:{
tableTitle: {
@@ -103,6 +104,12 @@ const en = {
}
},
project: {
project: {
project: "Project"
},
module: {
module: "Module"
},
endpoint: {
createEndpoint: "Create Endpoint",
editEndpoint: "Edit Endpoint",

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

@@ -19,127 +19,6 @@
.account-list-option .el-icon-view:hover {
color: #409EFF;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
top: 80px;
right: 15px;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
.right-box-account {
width: 550px;
height: calc(100% - 100px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 25px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: calc(100% - 38px);
vertical-align: top;
}
.el-select-add-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
</style>
<template>
<div class="account">
@@ -190,7 +69,7 @@
</div>
<transition name="right-box">
<div class="right-box right-box-account" v-if="rightBox.show">
<div class="right-box right-box-alert-config" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
@@ -304,7 +183,7 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
<div class="right-box-form-content">
<el-select value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
@click.native="blurEditReceiver()"
v-for="item in receiverData"
@@ -327,7 +206,7 @@
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn" v-if="rightBox.isEdit">
<div class="right-box-row-btn" v-if="rightBox.isEdit">
<span class="el-icon-plus"></span>
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>

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

@@ -25,127 +25,6 @@
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
top: 80px;
right: 15px;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
.right-box-account {
width: 550px;
height: calc(100% - 100px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 25px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: calc(100% - 38px);
vertical-align: top;
}
.el-select-add-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right {
@@ -289,7 +168,7 @@
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
<div class="right-box-form-content">
<el-select value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
@click.native="blurEditReceiver()"
v-for="item in receiverData"
@@ -312,7 +191,7 @@
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn" v-if="rightBox.isEdit">
<div class="right-box-row-btn" v-if="rightBox.isEdit">
<span class="el-icon-plus"></span>
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">
@@ -413,7 +292,6 @@ export default {
label: this.$t('config.account.createTime'),
prop: 'createTime',
show: true,
width: 240
}, {
label: this.$t('config.account.enable'),
prop: 'status',
@@ -423,255 +301,10 @@ export default {
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 100
}
],
tableData: [],
/*tableData: [{
userId: '1',
username: '王小虎1',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '2',
username: '王小虎2',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '0'
}, {
userId: '3',
username: '王小虎3',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '4',
username: '王小虎4',
email: 'c92c@qq.com',
lang: 'zh',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '5',
username: '王小虎5',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '6',
username: '王小虎6',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '7',
username: '王小虎7',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '8',
username: '王小虎8',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}, {
id: '5',
isEdit: false,
name: '小组啊小组5'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '9',
username: '王小虎9',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '10',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '222',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '223',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '224',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '226',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '225',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '2',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}, {
userId: '2',
username: '王小虎',
email: 'c92c@qq.com',
lang: 'en',
receiver: [{
id: '1',
name: 'group1'
}, {
id: '2',
name: 'group2'
}, {
id: '3',
name: '小组3'
}],
createTime: '2019-11-28 21:39:05',
status: '1'
}],*/
receiverData: [{
id: '1',
name: 'group1',

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

@@ -23,144 +23,6 @@
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
top: 80px;
right: 15px;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
.right-box-prom {
width: 550px;
height: calc(100% - 100px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
}
.right-box-top-btn-full {
background-color: #656565;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 25px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: calc(100% - 38px);
vertical-align: top;
}
.el-select-add-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
display: inline-block;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
}
.right-box-bottom-btn-50 {
width: 50%;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
/* begin--右弹框滑入滑出动画*/
@keyframes slide-in-from-right {
from {right: -800px}
to {right: 0}
}
@keyframes slide-out-to-right {
from {right: 0}
to {right: -800px}
}
.right-box-enter-active {
animation: slide-in-from-right 0.4s;
}
.right-box-leave-active {
animation: slide-out-to-right 0.4s;
}
/* end--右弹框滑入滑出动画*/
</style>
<template>
<div class="prom">
@@ -249,7 +111,7 @@
<div class="right-box-form-row">
<div class="right-box-form-label">IDC</div>
<div class="right-box-form-content">
<el-select value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option
@click.native="blurEditIdc()"
v-for="item in idcData"
@@ -272,7 +134,7 @@
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="el-select-add-btn" v-if="rightBox.isEdit">
<div class="right-box-row-btn" v-if="rightBox.isEdit">
<span class="el-icon-plus"></span>
</div>
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>

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

@@ -20,127 +20,125 @@
color: #409EFF;
}
/* begin--右侧弹框*/
.right-box {
position: fixed;
top: 80px;
right: 15px;
z-index: 1;
border-radius: 8px;
box-shadow: 0 0 15px #ccc;
background-color: white;
padding: 0 20px;
}
.right-box-project {
width: 550px;
height: calc(100% - 100px);
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;
}
.right-box-top-btn {
border-radius: 0 0 9px 9px;
/* start--param*/
.param-btn {
float: right;
color: #656565;
height: 30px;
font-size: 12px;
padding: 3px 8px 1px 8px;
border: 1px solid #aaaaaa;
border-top: none;
cursor: pointer;
margin-left: 20px;
height: 27px;
margin-top: -3px;
}
.right-box-top-btn-full {
.param-btn-active {
background-color: #656565;
color: white;
border: 1px solid #656565;
border-top: none;
color: white;
}
/* end--右侧弹框--顶部按钮*/
/* begin--右侧弹框--内容*/
.right-box-title {
height: 30px;
line-height: 40px;
text-align: left;
}
.right-box-form {
margin-top: 35px;
}
.right-box-form-row {
margin-top: 25px;
}
.right-box-form-label {
margin-bottom: 8px;
text-align: left;
}
.right-box-form-content {
line-height: 32px;
text-align: left;
width: 100%;
}
.right-box-form-content-txt {
padding-left: 11px;
}
.right-box-form-content .el-select {
width: calc(100% - 38px);
vertical-align: top;
}
.el-select-add-btn {
width: 33px;
height: 33px;
display: inline-block;
text-align: center;
border-radius: 5px;
border: 1px solid #DCDFE6;
box-sizing: border-box;
color: #C7C9CE;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.el-select-add-btn:hover {
border: 1px solid #C0C4CC;
cursor: pointer;
}
/* end--右侧弹框--内容*/
/* begin--右侧弹框--底部按钮*/
.right-box-bottom-btns {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
left: 0;
text-align: center;
}
.right-box-bottom-btn:first-of-type {
border-bottom-left-radius: 8px;
}
.right-box-bottom-btn:last-of-type{
border-bottom-right-radius: 8px;
}
.right-box-bottom-btn {
display: inline-block;
.param-btn-active:hover, .param-btn-active:focus {
background-color: #656565;
color: white;
height: 100%;
line-height: 40px;
cursor: pointer;
width: 100%;
}
.config-dropdown-label-input {
width: 50%;
.param-btn-clear {
background-color: #D4D4D4;
border: 1px solid #D4D4D4;
color: white;
}
.param-btn-clear:hover, .param-btn-clear:focus {
background-color: #D4D4D4;
color: white;
}
.param-box {
height: 303px;
border: 1px solid #DCDFE6;
border-radius: 4px;
padding: 0 10px;
}
.param-box-row {
padding: 7px 0 0 0;
position: relative;
}
.param-box-row:last-of-type {
padding-bottom: 7px;
}
.param-box-row-key, .param-box-row-value {
display: inline-block;
width: 41.5%;
}
.right-box-bottom-btn-cancel {
background-color: #DADADA;
color: #656565;
.param-box-row-eq {
display: inline-block;
width: 22px;
text-align: center;
height: 32px;
line-height: 32px;
color: #c4c7cF;
}
.right-box-bottom-btn-50 {
width: 50%;
.param-box-row-symbol {
font-size: 12px;
color: #c4c7cF;
border: 1px solid #c4c7cF;
text-align: center;
height: 12px;
width: 14px;
display: inline-block;
position: absolute;
top: 17px;
right: 25px;
cursor: pointer;
}
/* end--右侧弹框--底部按钮*/
/* end--右侧弹框*/
.param-box-row-symbol>i {
position: absolute;
top: 1px;
right: 1px;
}
/* end--param*/
/* begin--子弹框*/
.right-sub-box {
width: 330px;
height: calc(50%);
position: absolute;
top: 380px;
right: 100px;
z-index: 2;
}
.right-sub-box .el-input-group {
width: 60%;
float: right;
margin: 7px 0 0 0;
}
.endpoint-asset-prepend {
border-radius: 4px 0 0 4px;
}
.endpoint-asset-label {
line-height: 26px;
height: 26px;
}
.endpoint-asset-dropdown {
position: absolute;
top: 27px;
background-color: #656565;
border-radius: 4px;
width: 52px;
left: 0;
}
.endpoint-asset-dropdown-item {
text-align: center;
line-height: 22px;
height: 22px;
cursor: default;
}
.endpoint-asset-label-txt {
display: inline-block;
width: 19px;
}
.endpoint-asset-dropdown-item:first-of-type {
border-radius: 4px 4px 0 0;
}
.endpoint-asset-dropdown-item:last-of-type {
border-radius: 0 0 4px 4px;
}
.endpoint-asset-dropdown-item:hover {
background-color: #3a8ee6;
}
/* end--子弹框*/
</style>
<template>
<div class="project">
@@ -173,7 +171,7 @@
></el-input>
</div>
<el-table
:data="tableData"
:data="endPointTableData"
border
height="calc(100% - 65px)"
style="width: 100%;">
@@ -185,9 +183,8 @@
:label="item.label"
>
<template slot-scope="scope" :column="item">
<!--<span v-if="item.prop == 'asset'">{{scope.row[item.prop].name}}</span>
<span v-else>{{scope.row[item.prop]}}</span>-->
<span>{{scope.row[item.prop]}}</span>
<span v-if="item.prop == 'asset'">{{scope.row[item.prop].host}}</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column :label="$t('overall.option')" width="100">
@@ -204,10 +201,10 @@
<!-- begin--右弹框-->
<transition name="right-box">
<div class="right-box right-box-project" v-if="rightBox.show">
<div class="right-box right-box-endpoint" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
<div class="right-box-btn-icon">
<i class="el-icon-close"></i>
</div>
@@ -235,24 +232,87 @@
<!-- begin--表单-->
<div class="right-box-form">
<!--project-->
<div class="right-box-form-row">
<div class="right-box-form-label">IDC</div>
<div class="right-box-form-content">aaa
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
<div class="right-box-form-content">
<el-select @change="((val) => {getModuleData(val.id)})" value-key="id" popper-class="config-dropdown" v-model="endpoint.project" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option v-for="item in projectData" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.project.name}}</div>
</div>
</div>
<!--module-->
<div class="right-box-form-row">
<div class="right-box-form-label">Host</div>
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
<div class="right-box-form-content">
<el-select @change="((val) => {changeModule(val.id)})" value-key="id" popper-class="config-dropdown" v-model="selectedModule" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option v-for="item in moduleData" :key="item.id" :label="item.name" :value="item"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.module.name}}</div>
</div>
</div>
<!--host-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.host")}}</div>
<div class="right-box-form-content">
<el-input
type="text"
class="right-box-row-with-btn"
v-if="rightBox.isEdit"
placeholder=""
v-model="endpoint.host"
size="small"
></el-input>
<div @click="showSubShow" class="right-box-row-btn right-box-row-btn-active" v-if="rightBox.isEdit">
<span class="el-icon-more"></span>
</div>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{endpoint.host}}</div>
</div>
</div>
<!--port-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.port")}}</div>
<div class="right-box-form-content">
<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>
</div>
</div>
<!--path-->
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t("project.endpoint.path")}}</div>
<div class="right-box-form-content">
<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>
</div>
</div>
<!--param-->
<div class="right-box-form-row">
<div class="right-box-form-label">
{{$t("project.endpoint.param")}}
<el-button class="param-btn param-btn-active margin-l-10" size="mini" @click="addParam"><i class="el-icon-plus"></i>{{$t('overall.add')}}</el-button>
<el-button class="param-btn param-btn-clear" size="mini" @click="clearAllParam">{{$t('overall.clearAll')}}</el-button>
</div>
<div class="right-box-form-content">
<div class="param-box">
<div class="param-box-row" v-for="(item, index) in paramObj">
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
<span class="param-box-row-eq">=</span>
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
</div>
</div>
</div>
</div>
</div>
<!-- end--表单-->
@@ -261,9 +321,39 @@
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{endpoint.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
</div>
<!-- end--底部按钮-->
</div>
</transition>
<!-- begin--子弹框-->
<transition name="right-sub-box">
<div class="right-sub-box" v-if="rightSubBox.show">
<!-- begin--标题-->
<div class="right-box-title">{{rightSubBox.title}}</div>
<!-- end--标题-->
<!-- begin--搜索框-->
<el-input placeholder="" v-model="assetSearch.text">
<template slot="prepend">
<div class="endpoint-asset-prepend">
<div class="endpoint-asset-label">
<span class="endpoint-asset-label-txt">{{assetSearch.label}}</span>
<span @click="assetSearch.dropdownShow = !assetSearch.dropdownShow">
<i v-if="assetSearch.dropdownShow" class="el-icon-arrow-up"></i>
<i v-if="!assetSearch.dropdownShow" class="el-icon-arrow-down"></i>
</span>
</div>
<div class="endpoint-asset-dropdown" v-if="assetSearch.dropdownShow">
<div @click="dropdownSelect('IP')" class="endpoint-asset-dropdown-item">IP</div>
<div @click="dropdownSelect('SN')" class="endpoint-asset-dropdown-item">SN</div>
</div>
</div>
</template>
<template slot="append"><i class="el-icon-search"></i></template>
</el-input>
<!-- end--搜索框-->
</div>
</transition>
<!-- end--子弹框-->
</div>
</template>
@@ -277,6 +367,17 @@ export default {
isEdit: false, //false查看，true编辑
title: ''
},
rightSubBox: { //弹出框相关
show: false,
title: this.$t("overall.asset")
},
assetSearch: {
ip: '',
sn: '',
text: '',
label: 'IP',
dropdownShow: false
},
pageObj: {
pageNo: 1,
pageSize: 20,
@@ -290,7 +391,11 @@ export default {
path: '',
asset: {id: '', name: '', host: ''},
project: {id: '', name: ''},
module: {id: '', name: ''}
module: {id: '', name: '', param: '', paramObj: {}}
},
selectedModule: {
id: '',
name: ''
},
tableTitle: [
{
@@ -325,20 +430,72 @@ export default {
show: true,
}
],
tableData: []
endPointTableData: [],
projectData: [],
moduleData: [],
paramObj: []
}
},
methods: {
getTableData: function() {
showSubShow: function() {
this.rightSubBox.show = !this.rightSubBox.show;
},
getEndPointTableData: function() {
this.$get('endpoint', this.pageObj).then(response => {
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
for (var i = 0; i < response.data.list.length; i++) {
try {
var tempObj = JSON.parse(response.data.list[i].param);
} catch (err) {
}
response.data.list[i].paramObj = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
}
}
this.endPointTableData = response.data.list;
this.pageObj.total = response.data.total;
}
})
});
},
getProjectData: function() {
this.$get('project').then(response => {
if (response.code === 200) {
this.projectData = response.data.list;
}
});
},
getModuleData: function(projectId) {
// module选择改变时，记录旧module的id值(endpoint.moduleId)和对应的endpoint的param(endpoint.和对应的endpoint.param)，
// 然后改变，改变后param用module的值，如果改回旧module，则恢复endpoint的param
this.selectedModule = {id: '', name: ''};
this.$get('module', {projectId: projectId}).then(response => {
if (response.code === 200) {
for (var i = 0; i < response.data.list.length; i++) {
var tempObj = JSON.parse(response.data.list[i].param);
response.data.list[i].paramObj = [];
for (let k in tempObj) {
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
}
}
this.moduleData = response.data.list;
}
});
},
changeModule: function(moduleId) {
if (moduleId == this.endpoint.moduleId) {
this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
} else {
this.paramObj = JSON.parse(JSON.stringify(this.selectedModule.paramObj));
}
},
toEdit: function(u) {
this.getModuleData(u.project.id);
this.selectedModule = Object.assign({}, u.module);
this.endpoint = Object.assign({}, u);
//this.paramObj = this.endpoint.paramObj;
this.paramObj = JSON.parse(JSON.stringify(this.endpoint.paramObj));
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + u.id;
this.rightBox.show = true;
@@ -347,12 +504,14 @@ export default {
},
toAdd: function() {
this.cleanEndpoint();
this.paramObj = [];
this.moduleData = [];
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.createEndpoint");
this.rightBox.show = true;
},
detail: function(u) {
this.alertRule = Object.assign({}, u);
this.endpoint = Object.assign({}, u);
this.rightBox.isEdit = false;
this.rightBox.title = this.$t("project.endpoint.endpoint") + " ID：" + u.id;
this.rightBox.show = true;
@@ -360,11 +519,20 @@ export default {
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + this.alertRule.id;
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + this.endpoint.id;
}
},
save: function() {
},
clearAllParam: function() {
this.paramObj = [];
},
addParam: function() {
this.paramObj.push({key: '', value: ''});
},
removeParam: function(index) {
this.paramObj.splice(index, 1);
},
esc: function() {
this.rightBox.show = false;
@@ -383,15 +551,21 @@ export default {
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
this.getEndPointTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getTableData();
this.getEndPointTableData();
},
dropdownSelect: function(label) {
this.assetSearch.label = label;
this.assetSearch.dropdownShow = false;
}
},
mounted: function() {
this.getTableData();
this.getEndPointTableData();
this.getProjectData();
}
}
</script>