feat: dc列表、弹框初版

nezha-fronted/src/assets/stylus/main.scss

@@ -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 {

nezha-fronted/src/components/common/header.vue

@@ -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">

nezha-fronted/src/components/common/language/en.js

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

nezha-fronted/src/components/common/rightBox/dcBox.vue

@@ -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>

nezha-fronted/src/components/page/alert/config.vue

@@ -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">

nezha-fronted/src/components/page/asset/asset.vue

@@ -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">
 

nezha-fronted/src/components/page/config/account.vue

@@ -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: {

nezha-fronted/src/components/page/config/dc.vue

@@ -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>

nezha-fronted/src/components/page/config/promServer.vue

@@ -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: {

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -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;

nezha-fronted/src/components/page/project/project.vue

@@ -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;

nezha-fronted/src/main.js

@@ -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;

nezha-fronted/src/router/index.js

@@ -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),