feat:mib列表及配置功能

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

@@ -802,7 +802,7 @@ li{
 
 /*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
 .right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
-.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-add-asset, .right-box-add-chart {
+.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model,.right-box-mib, .right-box-add-asset, .right-box-add-chart {
   width: 520px;
 }
 .right-box-chart .el-input__inner, .right-box-chart input {

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

@@ -107,6 +107,9 @@
         <el-menu-item index="5-3">
           <div @click="jumpTo('model')" :class="{'menu-item-active' :(activeIndex == 'model' )}">{{$t('config.model.model')}}</div>
         </el-menu-item>
+        <el-menu-item index="5-4">
+          <div @click="jumpTo('mib')" :class="{'menu-item-active' :(activeIndex == 'mib' )}">{{$t('config.mib.mib')}}</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

@@ -46,6 +46,7 @@ const en = {
     createDatacenter:'create datacenter',
     createCabinet:'create cabinet',
     createModel:'create model',
+    createMib:'create mib',
     exportExcel:'Export',
     importExcel:'Import',
     importExcelLower:'import',
@@ -493,6 +494,13 @@ const en = {
       remark:'Remark',
       updateUser:'Update User',
       updateAt:'Update Time',
+      editMib:'Edit Mib',
+      models:'Models',
+      modelTip:'please select models',
+      createMib:'Create Mib',
+      mibFile:'Mib File',
+      uploadTip:'please upload mib file',
+      requiredMibFile:'mib file is required',
     }
   },
   alert: {

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

@@ -0,0 +1,319 @@
+<template>
+  <transition name="right-box">
+    <div class="right-box right-box-mib" v-if="rightBox.show" v-clickoutside="clickos" >
+      <!-- begin--顶部按钮-->
+      <div class="right-box-top-btns">
+        <button id="mib-del" type="button" v-if="currentMib.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="mib-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="currentMib" label-position="top" :rules="rules" ref="mibForm">
+          <!--mib名称-->
+          <el-form-item :label='$t("overall.name")' prop="name">
+            <el-input v-if="rightBox.isEdit" placeholder="" maxlength="64" show-word-limit v-model.trim="currentMib.name" size="small"></el-input>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.name}}</div>
+          </el-form-item>
+
+          <el-form-item :label='$t("config.mib.models")' prop="models">
+            <el-cascader
+              v-if="rightBox.isEdit"
+              :options="modelOptions"
+              :props="modelProps"
+              :show-all-levels="false"
+              v-model="selectedModels"
+              @change="selectedModelChange"
+              ref="modelSelector"
+              collapse-tags
+              :placeholder="$t('config.mib.modelTip')"
+              size="small"
+              class="right-box-form-row"
+              clearable></el-cascader>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">
+              <span v-for="(n,i) in selectedModels" :key="n.name+'-'+n.id+'-'+i" >
+                <template v-if="i < selectedModels.length-1">
+                  {{n.name}}，
+                </template>
+                <template v-else>{{n.name}}</template>
+              </span>
+            </div>
+          </el-form-item>
+          <el-form-item :label="$t('config.mib.remark')" prop="remark">
+            <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentMib.remark" size="small"></el-input>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.remark}}</div>
+          </el-form-item>
+          <el-form-item :label="$t('config.mib.mibFile')" prop="file" :rules="!currentMib.id?[{validator:checkMibFile,trigger:'change'},{required: true,message:' ',trigger: 'blur'}]:[{validator:checkMibFile,trigger:'change'}]">
+            <el-upload v-if="rightBox.isEdit" :multiple="false" action="" :file-list="uploadFileList" :on-change="uploadChange"  :auto-upload="false" accept="">
+              <div slot="tip" class="el-upload__tip" >
+                <span v-if="!currentMib.fileName">{{$t('config.mib.uploadTip')}}</span>
+                <span v-else>{{currentMib.fileName}}</span>
+                <span v-if="uploadErrorMsg" style="color: #F56C6C"><br>{{uploadErrorMsg}}</span>
+              </div>
+              <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+                <span class="top-tool-btn-txt" >{{$t('overall.upload')}}</span>
+              </button>
+            </el-upload>
+            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentMib.fileName}}</div>
+          </el-form-item>
+
+        </el-form>
+      </el-scrollbar>
+
+      <!--底部按钮-->
+      <div class="right-box-bottom-btns">
+        <button @click="esc" id="model-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="model-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>
+  export default {
+    name: "modelBox",
+    props: {
+      mib: Object
+    },
+    data() {
+      let $temp=this;
+      return {
+        currentMib: {
+          id: '',
+          name: '',
+          remark:'',
+          models:'',
+          file:null,
+        },
+        rightBox: {
+          show: false,
+          title: '',
+          isEdit: false
+        },
+        rules: {
+          name: [
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+          models:[
+            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
+          ],
+        },
+        checkMibFile : (rule, value, callback) => {
+          setTimeout(() => {
+            if(!$temp.currentMib.id){
+              if(!$temp.uploadFile || !$temp.uploadFile.raw){
+                $temp.uploadErrorMsg=$temp.$t('config.mib.requiredMibFile');
+                return callback(new Error(' '));
+              }else{
+                $temp.uploadErrorMsg=null;
+                return callback()
+              }
+            }else{
+              $temp.uploadErrorMsg=null;
+              return callback();
+            }
+          }, 500);
+        },
+        selectedModels:[],
+        modelOptions:[],
+        modelProps: { multiple: true ,emitPath:false},
+        uploadFileList:[],
+        uploadFile:null,
+        uploadErrorMsg:null,
+      }
+    },
+    created:function(){
+
+    },
+    methods: {
+      show(show, isEdit) {
+        this.rightBox.show = show;
+        this.rightBox.isEdit = isEdit;
+      },
+      clickos() {
+        this.rightBox.show = false;
+      },
+      /*关闭弹框*/
+      esc() {
+        this.rightBox.show = false;
+      },
+      queryModelInfos:function(){
+        this.$get('model?pageSize=-1').then(response=>{
+          if(response.code == 200){
+            let modelInfos=response.data.list;
+            let sortModels={};
+            modelInfos.forEach((item)=>{
+              if(!sortModels[item.type.value]){//没有这个assetType
+                sortModels[item.type.value]={}
+              }
+              if(!sortModels[item.type.value][item.vendor.value]){
+                sortModels[item.type.value][item.vendor.value]=[];
+              }
+              item.label=item.name;
+              item.value=item.id;
+              sortModels[item.type.value][item.vendor.value].push(item);
+            })
+            for (let assetType of Object.keys(sortModels)){
+              let option={
+                label:assetType,
+                value:assetType,
+                children:[]
+              }
+              for(let vendor of Object.keys(sortModels[assetType])){
+                let child={
+                  label:vendor,
+                  value:vendor,
+                  children: sortModels[assetType][vendor]
+                }
+                option.children.push(child);
+              }
+              this.modelOptions.push(option);
+            }
+          }
+        })
+      },
+      selectedModelChange:function(nodes){
+        let selectedNodes=this.selectedModels;
+        if(selectedNodes && selectedNodes.length>0){
+          let models='';
+          for(let node of selectedNodes){
+            models+=node+',';
+          }
+          this.currentMib.models=models.substr(0,models.length-1);
+        }else{
+          this.currentMib.models='';
+        }
+        this.$refs.mibForm.validateField('models')
+      },
+      uploadChange:function(file,fileList){
+        if (fileList.length > 0) {
+          this.uploadFileList = [fileList[fileList.length - 1]]
+        }
+        this.uploadFile = this.uploadFileList[0];
+        this.validateFile();
+      },
+      validateFile:function(){
+
+      },
+      /*保存*/
+      save() {
+        this.$refs.mibForm.validate((valid) => {
+          if (valid) {
+            let form = new FormData();
+            form.append('name',this.currentMib.name);
+            form.append('remark',this.currentMib.remark);
+            form.append('models',this.currentMib.models);
+            form.append('file',this.uploadFile&&this.uploadFile.raw?this.uploadFile.raw:null);
+            this.$post('/mib',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
+              if(response.code==200 && response.msg=='success'){
+                this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
+                this.esc();
+                this.$emit('after');
+              }else{
+                this.$message.error(response.msg);
+              }
+            })
+          }
+        })
+      },
+      saveOrToEdit: function() {
+        if (!this.rightBox.isEdit) {
+          this.rightBox.isEdit = true;
+          this.rightBox.title = this.$t("config.mib.editMib") + "  ID：" + this.currentMib.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("mib?ids=" + this.currentMib.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.rightBox.show = false;
+              this.$emit("reload");
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        });
+      },
+    },
+    mounted() {
+      this.queryModelInfos();
+    },
+    computed: {
+    },
+    watch: {
+      mib: {
+        immediate: true,
+        deep:true,
+        handler(n, o) {
+          this.currentMib = Object.assign({},n);
+          if(this.currentMib.modelsDetail && this.currentMib.modelsDetail.length>0){
+            for(let model of this.currentMib.modelsDetail){
+              model.label=model.name;
+              model.value=model.id;
+              this.selectedModels.push(model);
+            }
+          }else{
+            this.selectedModels=[];
+          }
+          if (n && n.id) {
+            this.rightBox.title =this.rightBox.isEdit? this.$t("config.mib.editMib") + "  ID：" + n.id : this.$t("config.mib.mib") + "  ID：" + n.id ;
+          } else {
+            this.rightBox.title = this.$t("config.mib.createMib");
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style>
+  .right-box-mib .right-box-form-row{
+    width: 100%;
+  }
+</style>
+<style scoped>
+  /*去除上传文件动画start*/
+  /*.upload-demo {*/
+  /*  display: flex;*/
+  /*}*/
+  /deep/ .el-list-enter-active,
+  /deep/ .el-list-leave-active {
+    transition: none;
+  }
+  .nz-tab {
+    margin-bottom: 22px;
+    margin-left: 13px;
+  }
+  /deep/ .el-list-enter,
+  /deep/ .el-list-leave-active {
+    opacity: 0;
+  }
+  /deep/ .el-upload-list {
+    height: 40px;
+  }
+  /*去除上传文件动画end*/
+</style>

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

@@ -70,11 +70,7 @@
               </template>
             </el-autocomplete>
           </el-form-item>
-          <el-form-item :label="$t('config.model.remark')" prop="remark">
-            <el-input maxlength="512" rows="4" show-word-limit v-if="rightBox.isEdit" type="textarea" placeholder="" v-model.trim="currentModel.remark" size="small"></el-input>
-            <div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{currentModel.remark}}</div>
-          </el-form-item>
-        </el-form>
+        </el-form>save
       </el-scrollbar>
 
       <!--底部按钮-->

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

@@ -18,6 +18,9 @@
         <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
           {{$t('config.model.model')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
+          {{$t('config.mib.mib')}}
+        </div>
       </div>
     </div>
     <div class="content-right">

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

@@ -48,6 +48,9 @@
           <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
             {{$t('config.model.model')}}
           </div>
+          <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
+            {{$t('config.mib.mib')}}
+          </div>
         </div>
       </div>
       <!--dc table start-->

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

@@ -0,0 +1,338 @@
+<style scoped>
+  .mib {
+    height: 100%;
+  }
+</style>
+<template>
+  <div class="mib">
+    <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="mib-jump-account">
+          {{$t('config.account.account')}}
+        </div>
+        <div class="sidebar-info-item" @click="jumpTo('promServer')" id="mib-jump-prom">{{$t('config.promServer.promServerList')}}</div>
+        <div class="sidebar-info-item" @click="jumpTo('dc')" id="mib-jump-dc">
+          {{$t('config.dc.dc')}}
+        </div>
+        <div class="sidebar-info-item " id="mib-jump-model" @click="jumpTo('model')">
+          {{$t('config.model.model')}}
+        </div>
+        <div class="sidebar-info-item sidebar-info-item-active" id="mib-jump-mib">
+          {{$t('config.mib.mib')}}
+        </div>
+      </div>
+    </div>
+    <div class="content-right">
+      <div class="top-tools">
+        <div class="top-tool-main-right">
+          <div class="top-tool-search">
+            <search-input :searchMsg="searchMsg" @search="search"></search-input>
+          </div>
+          <button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
+                  id="mib-add">
+            <i class="nz-icon-create-square nz-icon"></i>
+          </button>
+        </div>
+      </div>
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table" v-scrollBar:el-table>
+        <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">
+            <template v-if="item.prop == 'updateUser'" >{{scope.row[item.prop].name}}</template>
+            <template v-else-if="item.prop == 'fileName' && scope.row[item.prop]" >
+              <span class="clickable" @click="downloadMib(scope.row.id)">{{scope.row[item.prop]}}</span>
+            </template>
+            <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0">
+              <span v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" >
+                <template v-if="i < scope.row['modelsDetail'].length-1">
+                  {{n.name}}，
+                </template>
+                <template v-else>{{n.name}}</template>
+              </span>
+            </template>
+            <div v-else-if="item.prop == 'option'" class="content-right-options">
+              <span :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option" :id="'mib-detail-'+scope.row.id"><i class="nz-icon nz-icon-view"></i></span>
+              &nbsp;
+              <span :title="$t('overall.edit')" @click="toEdit(scope.row)" class="content-right-option" :id="'mib-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="'mib-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
+            </div>
+            <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+            <template v-else>-</template>
+          </template>
+        </el-table-column>
+        <el-table-column :resizable="false" 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 :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
+    </div>
+
+    <element-set
+      v-clickoutside="elementsetHide"
+      :table-title="tableTitle"
+      :dropCol="dropCol"
+      @tablelable="tablelabelEmit"
+      ref="elementset"
+    ></element-set>
+    <mib-box ref="mibBox" :mib="mib" @reload="getTableData" @after="getTableData()"></mib-box>
+  </div>
+
+</template>
+<script>
+  import axios from 'axios'
+  export default {
+    name: "mib",
+    data() {
+      return {
+        tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
+        showTopBtn: false,
+        mib: {
+          id: '',
+          name: '',
+          remark:'',
+          models:'',
+          file:null,
+        },
+        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('config.mib.fileName'),
+            prop: 'fileName',
+            show: true,
+          },{
+            label: this.$t('config.mib.models'),
+            prop: 'modelsDetail',
+            show: true,
+          },{
+            label: this.$t('config.mib.remark'),
+            prop: 'remark',
+            show: true,
+          },{
+            label: this.$t('config.mib.updateUser'),
+            prop: 'updateUser',
+            show: true,
+          },{
+            label: this.$t('config.mib.updateAt'),
+            prop: 'updateAt',
+            show: true,
+          },{
+            label: this.$t('config.account.option'),
+            prop: 'option',
+            show: true,
+            width: 120
+          }
+        ],
+        tablelable: [],
+        dropCol: [],
+        tableData: [],
+        searchMsg: { //给搜索框子组件传递的信息
+          zheze_none: true,
+          searchLabelList: [{
+            id: 1,
+            name: 'ID',
+            type: 'input',
+            label: 'id',
+            disabled: false
+          }, {
+            id: 5,
+            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;
+      },
+      clickos() {
+        this.rightBox.show = false;
+      },
+      toEdit: function (u) {
+        this.mib = Object.assign({}, u);
+        this.$refs.mibBox.show(true, true);
+      },
+      del: function (u) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("mib?ids=" + u.id).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.getTableData();
+              this.rightBox.show = false;
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      detail: function (u) {
+        this.mib = Object.assign({}, u);
+        this.$refs.mibBox.show(true, false);
+      },
+      toAdd: function () {
+        this.cleanMib();
+        this.$refs.mibBox.show(true, true);
+      },
+      esc: function () {
+        this.rightBox.show = false;
+      },
+      jumpTo(data, id) {
+        this.$router.push({
+          path: "/" + data,
+          query: {
+            t: +new Date()
+          }
+        });
+      },
+      getTableData: function () {
+        this.tableData = [];
+        this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
+        this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
+        this.$get('mib', this.searchLabel).then(response => {
+          if (response.code === 200) {
+            this.tableData = response.data.list;
+            this.pageObj.total = response.data.total
+          }
+        })
+      },
+      pageNo(val) {
+        this.pageObj.pageNo = val;
+        this.getTableData();
+      },
+      pageSize(val) {
+        this.pageObj.pageSize = val;
+        localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
+        this.getTableData();
+      },
+      search: function (searchObj) {
+        this.pageObj.pageNo = 1;
+        this.searchLabel = {};
+        for (let item in searchObj) {
+          if (searchObj[item]) {
+            this.$set(this.searchLabel, item, searchObj[item]);
+          }
+        }
+        this.getTableData();
+      },
+      downloadMib:function(mibId){
+        axios.get('/mib/download?id='+mibId,{responseType: 'blob'}).then(data=>{
+          let fileName = new Date().getTime()+'.txt';
+          let disposition=data.headers['content-disposition'];
+          if(disposition){
+            fileName=disposition.split(';')[1].split('filename=')[1]
+          }
+          // 由于ie不支持download属性，故需要做兼容判断
+          if (navigator.appVersion.toString().indexOf('.NET') > 0) {
+            // ie独有的msSaveBlob属性，data.data为Blob文件流
+            window.navigator.msSaveBlob(data.data, fileName)
+          } else {
+            // 以下流程即为文章开始的下载流程
+            let url = window.URL.createObjectURL(data.data)
+            let link = document.createElement('a')
+            link.style.display = 'none'
+            link.href = url
+            link.download = fileName
+            document.body.appendChild(link)
+            link.click()
+            window.URL.revokeObjectURL(link.href);
+          }
+        })
+      },
+      cleanMib() {
+        this.mib = {
+          id: '',
+          name: '',
+          remark:'',
+          file:'',
+          models:'',
+          file:null,
+        };
+      }
+    },
+    mounted: function () {
+      //是否存在分页缓存
+      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
+      if (pageSize != 'undefined' && pageSize != null) {
+        this.pageObj.pageSize = pageSize
+      }
+
+      this.getTableData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.mibTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 50) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
+      });
+      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;
+    },
+    watch: {
+
+    }
+  }
+</script>

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

@@ -18,6 +18,9 @@
         <div class="sidebar-info-item sidebar-info-item-active" id="model-jump-model">
           {{$t('config.model.model')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
+          {{$t('config.mib.mib')}}
+        </div>
       </div>
     </div>
     <div class="content-right">

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

@@ -18,6 +18,9 @@
         <div class="sidebar-info-item" @click="jumpTo('model')" id="account-jump-model">
           {{$t('config.model.model')}}
         </div>
+        <div class="sidebar-info-item" @click="jumpTo('mib')" id="account-jump-mib">
+          {{$t('config.mib.mib')}}
+        </div>
       </div>
     </div>
     <div class="content-right">

nezha-fronted/src/main.js

@@ -40,6 +40,7 @@ import cabinetBottomBox from "./components/common/bottomBox/cabinetBottomBox"; /
 import PerfectScrollbar from "perfect-scrollbar";
 import "perfect-scrollbar/css/perfect-scrollbar.css";
 import loading from "./components/common/loading";
+import mibBox from "./components/common/rightBox/mibBox";
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -62,6 +63,7 @@ Vue.component("select-area", selectArea);
 Vue.component('loading',loading);
 Vue.component('alert-message-box',alertMessageBox);
 Vue.component('cabinet-bottom-box',cabinetBottomBox);
+Vue.component('mib-box',mibBox);
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$post = post;

nezha-fronted/src/router/index.js

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