feat: alert-message导出

2020-04-08 20:27:07 +08:00
parent b0363833a4
commit fcc269b8e2
4 changed files with 152 additions and 92 deletions
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1501,3 +1501,95 @@ li{
  transform: scale(0.6);
  display:inline-block;
 }
+
+
+/*export相关*/
+.export-xlsx .el-dialog__body{
+  padding: 10px 20px 20px 20px;
+}
+.export-xlsx .el-button:focus, .export-xlsx .el-button:hover {
+  color: unset;
+  border-color: unset;
+  background-color:unset;
+}
+.dropdownBtn .el-button--primary{
+  top:2px;
+  padding: 0 8px;
+  background-image: linear-gradient(180deg, #fff 0%, #E0E0E0 100%);
+  border: 0px;
+  color: #666;
+  -webkit-box-shadow: 0 0 1px 1px rgba(162,162,162,0.5);
+  box-shadow: 0 0 1px 1px rgba(162,162,162,0.5);
+  letter-spacing: 0;
+  background-color: unset;
+}
+.dropdownBtn .el-button--primary:hover{
+  background-image: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%) !important;
+}
+.dropdownBtn .el-button--mini{
+  font-size: 12px;
+  height: 24px;
+}
+.dropdownBtn .el-button--mini:first-of-type {
+  right: 3px;
+}
+.el-dropdown .el-button-group{
+  display: block;
+  position: relative;
+  top:-2px;
+}
+.export-xlsx .el-dropdown .el-dropdown__caret-button {
+  padding-left: 5px;
+  padding-right: 5px;
+  border-left: none;
+  top:0px;
+  left: -1px;
+}
+.footer:before{
+  /*content: '';*/
+  /*clear:both;*/
+  /*display: block;*/
+  /*height: 40px;*/
+}
+.upload-body{
+  text-align: center;
+}
+.result-detail li{
+  line-height: 20px;
+  font-size: 12px;
+}
+.result-detail{
+  height: 100px;
+  /*overflow-y: auto;*/
+  margin-bottom: 20px;
+}
+.result-body{
+  text-align: left;
+  line-height: 20px;
+  font-size: 12px;
+  vertical-align: middle;
+}
+.result-title{
+  font-weight: bold;
+}
+/**dialog 在视图中居中显示start*/
+.export-xlsx .el-dialog{
+  display: flex;
+  flex-direction: column;
+  margin:0 !important;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%,-50%);
+  /*height:600px;*/
+  max-height:calc(100% - 30px);
+  max-width:calc(100% - 30px);
+}
+.export-xlsx .el-dialog .el-dialog__body{
+  flex:1;
+  overflow: auto;
+}
+/**dialog 在视图中居中显示end*/
+.dropdown-content{
+  font-size: 14px !important;
+}
--- a/nezha-fronted/src/components/common/exportXLSX.vue
+++ b/nezha-fronted/src/components/common/exportXLSX.vue
@@ -260,94 +260,3 @@
  }
  /*去除上传文件动画end*/
 </style>
-<style>
-  .export-xlsx .el-dialog__body{
-    padding: 10px 20px 20px 20px;
-  }
-  .export-xlsx .el-button:focus, .export-xlsx .el-button:hover {
-    color: unset;
-    border-color: unset;
-    background-color:unset;
-  }
-  .dropdownBtn .el-button--primary{
-    top:2px;
-    padding: 0 8px;
-    background-image: linear-gradient(180deg, #fff 0%, #E0E0E0 100%);
-    border: 0px;
-    color: #666;
-    -webkit-box-shadow: 0 0 1px 1px rgba(162,162,162,0.5);
-    box-shadow: 0 0 1px 1px rgba(162,162,162,0.5);
-    letter-spacing: 0;
-    background-color: unset;
-  }
-  .dropdownBtn .el-button--primary:hover{
-    background-image: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%) !important;
-  }
-  .dropdownBtn .el-button--mini{
-    font-size: 12px;
-    height: 24px;
-  }
-  .dropdownBtn .el-button--mini:first-of-type {
-    right: 3px;
-  }
-  .el-dropdown .el-button-group{
-    display: block;
-    position: relative;
-    top:-2px;
-  }
-  .export-xlsx .el-dropdown .el-dropdown__caret-button {
-    padding-left: 5px;
-    padding-right: 5px;
-    border-left: none;
-    top:0px;
-    left: -1px;
-  }
-  .footer:before{
-    /*content: '';*/
-    /*clear:both;*/
-    /*display: block;*/
-    /*height: 40px;*/
-  }
-  .upload-body{
-    text-align: center;
-  }
-  .result-detail li{
-    line-height: 20px;
-    font-size: 12px;
-  }
-  .result-detail{
-    height: 100px;
-    /*overflow-y: auto;*/
-    margin-bottom: 20px;
-  }
-  .result-body{
-    text-align: left;
-    line-height: 20px;
-    font-size: 12px;
-    vertical-align: middle;
-  }
-  .result-title{
-    font-weight: bold;
-  }
-  /**dialog 在视图中居中显示start*/
-  .export-xlsx .el-dialog{
-    display: flex;
-    flex-direction: column;
-    margin:0 !important;
-    position:absolute;
-    top:50%;
-    left:50%;
-    transform:translate(-50%,-50%);
-    /*height:600px;*/
-    max-height:calc(100% - 30px);
-    max-width:calc(100% - 30px);
-  }
-  .export-xlsx .el-dialog .el-dialog__body{
-    flex:1;
-    overflow: auto;
-  }
-  /**dialog 在视图中居中显示end*/
-  .dropdown-content{
-    font-size: 14px !important;
-  }
-</style>
--- a/nezha-fronted/src/components/common/popBox/selectWalk.vue
+++ b/nezha-fronted/src/components/common/popBox/selectWalk.vue
@@ -1,7 +1,7 @@
 <template>
  <el-popover @show="tempWalk.detailShow = false" v-if="popBox.show" :placement="placement" width="367" ref="selectWalkPopBox" popper-class="nz-pop nz-pop-select-walk" transition="slide">
    <div class="pop-item-wider" @click="tempWalk.detailShow = false">
-      <div v-if="tempWalk.detailShow" class="el-popover nz-pop walk-pop" :style="{left: detailPopPosition.left, top: detailPopPosition.top}">
+      <div v-if="tempWalk.detailShow" class="el-popover walk-pop" :style="{left: detailPopPosition.left, top: detailPopPosition.top}">
        <p><span class="metirc-tip-list">Name&nbsp;:&nbsp;</span><span>{{tempWalk.name}}</span></p>
        <p><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{tempWalk.objectID}}</span></p>
        <p><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(tempWalk.objectID)}}</span></p>
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -21,6 +21,10 @@
            <div class="top-tool-search">
              <search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
            </div>
+            <button type="button" @click="showExportDialog" :title="$t('overall.exportExcelLower')"
+                    class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
+              <i class="el-icon-download"></i>
+            </button>
          </div>
          <div class="pagination-top pagination-top-hide display-none"></div>
        </div>
@@ -126,11 +130,24 @@
      @tablelable="tablelabelEmit"
      ref="elementset"
    ></element-set>
+    <div class="export-xlsx">
+      <el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-dialog">
+        <div class="upload-body">
+          <button @click="exportCur" class="el-button el-button--default el-button--small">
+            <span>{{$t('overall.exportCur')}}</span>
+          </button>
+          <button  @click="exportAll" class="el-button el-button--default el-button--small">
+            <span>{{$t('overall.exportAll')}}</span>
+          </button>
+        </div>
+      </el-dialog>
+    </div>
  </div>

 </template>
 <script>
  import bus from '../../../libs/bus';
+  import axios from 'axios'
  var vm;
  export default {
    name: "alertList",
@@ -148,6 +165,10 @@
        showSubList: false, //是否展示二级列表
        mainTableHeight: this.$tableHeight.normal, //主列表table高度

+        //导出相关
+        importBox: {show:false, title:this.$t('overall.exportExcel')},
+
+
        tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
        showTopBtn: false,
        pageObj: {
@@ -337,6 +358,44 @@
          this.$refs['assetEditUnit'].tabView = false
        }
      },
+      showExportDialog() {
+        this.importBox.show = true;
+      },
+      closeDialog() {
+        this.importBox.show = false;
+      },
+      exportCur:function(){
+        this.exportExcel(this.searchLabel);
+        this.closeDialog();
+      },
+      exportAll:function(){
+        this.searchLabel.pageSize = -1;
+        this.exportExcel(this.searchLabel);
+        this.closeDialog();
+      },
+      exportExcel:function(params){
+        let temp=this;
+        if(!params){
+          params=temp.params;
+        }
+        axios.get("alert/message/export", {responseType:'blob', params: params}).then(res=>{
+          let fileName = 'alert-message-'+temp.getTimeString()+'.xlsx';
+          if(window.navigator.msSaveOrOpenBlob){
+            // 兼容ie11
+            let blobObject = new Blob([res.data]);
+            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
+          }else{
+            let url = URL.createObjectURL(new Blob([res.data]));
+            let a = document.createElement('a');
+            document.body.appendChild(a); //此处增加了将创建的添加到body当中
+            a.href = url;
+            a.download = fileName;
+            a.target = '_blank';
+            a.click();
+            a.remove(); //将a标签移除
+          }
+        })
+      },
      // 全屏
      fullScreen() {
        this.$bottomBoxWindow.fullScreen(vm);