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

feat: dc列表、弹框初版

Browse Source
This commit is contained in:
陈劲松
2020-02-21 17:57:19 +08:00
parent 3fb38a8660
commit 097b6b33f0
13 changed files with 463 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -451,6 +451,11 @@ li{
width: 260px;
margin: -1px 20px 0 0;
}
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
.top-tool-right {
display: flex;
align-content: center;
@@ -619,7 +624,7 @@ li{
}
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint, .right-box-panel {
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint, .right-box-panel, .right-box-dc {
width: 520px;
}
.right-box-add-asset, .right-box-add-chart {

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

@@ -91,6 +91,9 @@
<el-menu-item index="5-1">
<div @click="jumpTo('promServer')" :class="{'menu-item-active' :(activeIndex == 'promServer' )}">{{$t('config.promServer.promServerList')}}</div>
</el-menu-item>
<el-menu-item index="5-2">
<div @click="jumpTo('dc')" :class="{'menu-item-active' :(activeIndex == 'dc' )}">{{$t('config.dc.dc')}}</div>
</el-menu-item>
</el-submenu>
<el-submenu index="6" popper-class="nz-submenu">
<template slot="title">

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

@@ -351,6 +351,10 @@ const en = {
type: 'Type',//"类别"
checkTime: 'Check time'
},
dc: {
dc: 'Datacenter',
}
},
alert: {
alert: 'Alert',//"告警"

160
nezha-fronted/src/components/common/rightBox/dcBox.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<transition name="right-box">
<div class="right-box right-box-dc" v-if="rightBox.show">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="dc-del" type="button" v-if="dc.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">
<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" id="dc-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>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="dc" label-position="top" :rules="rules" ref="dcForm">
<el-form-item :label='$t("overall.name")' prop="name">
<el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model="dc.name" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{dc.name}}</div>
</el-form-item>
<el-form-item :label='$t("asset.createAssetTab.location")' prop="location">
<el-input v-if="rightBox.isEdit" placeholder="" v-model="dc.location" size="small"></el-input>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{dc.location}}</div>
</el-form-item>
</el-form>
</el-scrollbar>
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="dc-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="dc-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>
import {noSpecialChar} from "../js/validate";
export default {
name: "dcBox",
props: {
dc: Object
},
data() {
return {
rightBox: {
show: false,
title: '',
isEdit: false
},
rules: {
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'},
{validator: noSpecialChar,trigger: "change"}
],
},
projectList: [],
}
},
methods: {
show(show, isEdit) {
this.rightBox.show = show;
this.rightBox.isEdit = isEdit;
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;
},
/*保存*/
save() {
this.$refs.dcForm.validate((valid) => {
if (valid) {
if (this.dc.id) {
this.$put('idc', this.dc).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
this.$emit('reload');
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('idc', this.dc).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.rightBox.show = false;
} else {
this.$message.error(response.msg);
}
});
}
} else {
return false;
}
});
},
saveOrToEdit: function() {
if (!this.rightBox.isEdit) {
this.rightBox.isEdit = true;
this.rightBox.title = this.$t("asset.createAssetTab.editIdcTab.title") + " ID：" + this.dc.id;
} else {
this.save();
}
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("idc?ids=" + this.dc.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('dcListChange');
} else {
this.$message.error(response.msg);
}
});
});
},
},
created() {
},
computed: {
},
watch: {
dc: {
immediate: true,
deep:true,
handler(n, o) {
if (n && n.id) {
this.rightBox.title =this.rightBox.isEdit? this.$t("asset.createAssetTab.editIdcTab.title") + " ID：" + n.id : this.$t("config.dc.dc") + " ID：" + n.id ;
} else {
this.rightBox.title = this.$t("asset.createAssetTab.AddIdcTab.title");
}
}
},
}
}
</script>
<style scoped>
</style>

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

@@ -2,12 +2,6 @@
.config {
height: 100%;
}
.top-tools #alert-add .top-tool-btn-txt .nz-icon {
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
</style>
<template>
<div class="config">

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

@@ -734,11 +734,6 @@
.tab-input-square-high {
border: 1px solid #1166bb;
}
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
</style>
<style lang="scss">

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

@@ -2,22 +2,19 @@
.account {
height: 100%;
}
.top-tools .top-tool-btn-txt .nz-icon {
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
</style>
<template>
<div class="account">
<div class="content-left">
<div class="sidebar-title">Config</div>
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('config.account.account')}}</div>
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
{{$t('config.promServer.promServerList')}}
</div>
<div class="sidebar-info-item" @click="jumpTo('dc')" id="account-jump-dc">
{{$t('config.dc.dc')}}
</div>
</div>
</div>
<div class="content-right">
@@ -49,17 +46,6 @@
:key="`col-${index}`"
:label="item.label"
>
<!--<template slot="header" slot-scope="scope">
<template v-if="index==tablelable.length-1">
<span class="nz-table-txt">{{item.label}}</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<div v-else>
<span>{{item.label}}</span>
</div>
</template>-->
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'account-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
@@ -426,8 +412,6 @@
this.tabSave();
},
jumpTo(data, id) {
this.$store.state.assetData.moduleData = data;
this.$store.state.assetData.selectedData = id;
this.$router.push({
path: "/" + data,
query: {

275
nezha-fronted/src/components/page/config/dc.vue Normal file
View File

@@ -0,0 +1,275 @@
<style scoped>
.dc {
height: 100%;
}
</style>
<template>
<div class="dc">
<div class="content-left">
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
{{$t('config.account.account')}}
</div>
<div class="sidebar-info-item" @click="jumpTo('promServer')" id="account-jump-promserver">
{{$t('config.promServer.promServerList')}}
</div>
<div class="sidebar-info-item sidebar-info-item-active" id="account-jump-dc">
{{$t('config.dc.dc')}}
</div>
</div>
</div>
<div class="content-right">
<div class="top-tools">
<div></div>
<div>
<button type="button" @click=""
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82" id="dc-add">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
</div>
</div>
<el-table
class="nz-table"
:data="tableData"
border
height="calc(100% - 160px)"
style="width: 100%;">
<el-table-column
:resizable="false"
v-for="(item, index) in tablelable"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'dc-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
&nbsp;
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<template v-if="item.prop == 'principal'">
<template v-for="item in userData">
<template v-if="scope.row.principal == item.userId">{{item.username}}</template>
</template>
</template>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<element-set
v-clickoutside="elementsetHide"
:dropCol="dropCol"
@tablelable="tablelabelEmit"
:table-title="tableTitle"
ref="elementset"
></element-set>
<dc-box ref="dcBox" :dc="currentDc"></dc-box>
</div>
</template>
<script>
export default {
name: "account",
data() {
return {
dc: {
id: '',
name: '',
location: '',
tel: '',
principal: '',
areaId: ''
},
currentDc: {
id: '',
name: '',
location: '',
tel: '',
principal: '',
areaId: ''
},
pageObj: {
pageNo: 1,
pageSize: 20,
total: 0
},
tableTitle: [
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t("overall.name"),
prop: 'name',
show: true,
}, {
label: this.$t("asset.createAssetTab.location"),
prop: 'location',
show: true,
}, {
label: this.$t('asset.createAssetTab.tel'),
prop: 'tel',
show: true,
}, {
label: this.$t('asset.createAssetTab.principal'),
prop: 'principal',
show: true
}, {
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 120
}
],
tablelable: [],
dropCol: [],
tableData: [],
userData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 10,
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false
}],
},
searchLabel: {}, //搜索参数
}
},
methods: {
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
screen: 0
};
eventfixed[s] = 1;
e.preventDefault();
this.$store.commit('setHeaderTable', this.tablelable);
this.$store.commit('setEventfixed', eventfixed);
const h = document.documentElement.clientHeight;
const w = document.documentElement.clientWidth;
const dw = this.$refs.elementset.$el.offsetWidth;
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20
: e.clientY + 20 - (e.clientY + dh - h);
this.$store.commit('setPosition', {positionx, positiony});
},
elementsetHide() {
//悬浮点击空白隐藏
this.$refs.elementset.elementsetHide();
},
tablelabelEmit(data) {
//获取子组件传过来的参数
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
jumpTo(data, id) {
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
edit: function (u) {
this.currentDc = JSON.parse(JSON.stringify(u));
this.$refs.dcBox.show(true, true);
},
detail(u) {
this.currentDc = JSON.parse(JSON.stringify(u));
this.$refs.dcBox.show(true, false);
},
del: function (u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("idc/ids=" + u.userId).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
});
});
},
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('idc', this.searchLabel).then(response => {
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
}
})
},
getUserData() {
this.$get('sys/user/list', {pageSize: -1, pageNo: 1}).then(response => {
if (response.code === 200) {
this.userData = response.data.list;
}
})
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
this.getTableData();
},
search: function (searchObj) {
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getTableData();
}
},
computed: {
},
mounted() {
this.getTableData();
this.$nextTick(function(){
this.getUserData();
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
}
}
</script>

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

@@ -2,22 +2,19 @@
.prom {
height: 100%;
}
.top-tools .top-tool-btn-txt .nz-icon {
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
</style>
<template>
<div class="prom">
<div class="content-left">
<div class="sidebar-title">{{$t('config.config')}}</div>
<div class="sidebar-title">{{$t('overall.config')}}</div>
<div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('account')" id="prom-jump-account">
{{$t('config.account.account')}}
</div>
<div class="sidebar-info-item sidebar-info-item-active">{{$t('config.promServer.promServerList')}}</div>
<div class="sidebar-info-item" @click="jumpTo('dc')" id="account-jump-dc">
{{$t('config.dc.dc')}}
</div>
</div>
</div>
<div class="content-right">
@@ -513,8 +510,6 @@
this.rightBox.show = false;
},
jumpTo(data, id) {
this.$store.state.assetData.moduleData = data
this.$store.state.assetData.selectedData = id
this.$router.push({
path: "/" + data,
query: {

6
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -675,12 +675,6 @@
margin-right: 1px;
}
.top-tools .top-tool-btn-txt .nz-icon {
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
.top-tools {
button {
background: $btn-light-background-color;

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

@@ -1339,11 +1339,6 @@
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
/* start--param*/
.param-btn {
float: right;

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

@@ -32,6 +32,8 @@ import dcConfigBox from "./components/common/popBox/dcConfig"; //idc配置弹框
import panelBox from "./components/common/rightBox/panelBox"; //面板弹框组件
import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹框组件
import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
import dcBox from "./components/common/rightBox/dcBox"; //dc弹框
Vue.component("Pagination", Pagination);
Vue.component("searchInput", searchInput);
@@ -48,6 +50,7 @@ Vue.component("idc-config-box", dcConfigBox);
Vue.component("panel-box", panelBox);
Vue.component("module-list-pop", moduleListPop);
Vue.component("cabinet-config-box", cabinetConfigBox);
Vue.component("dc-box", dcBox);
Vue.prototype.$axios = axios;
Vue.prototype.$post = post;

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

@@ -56,6 +56,10 @@ export default new Router({
path: '/promServer',
component: resolve => require(['../components/page/config/promServer.vue'], resolve),
},
{
path: '/dc',
component: resolve => require(['../components/page/config/dc.vue'], resolve),
},
{
path: '/alertList',
component: resolve => require(['../components/page/alert/list.vue'], resolve),