From b8c4045a078ab0830e637f5d98d64e693be9cee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Thu, 9 Apr 2020 12:19:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20alert-message=E5=AF=BC=E5=87=BA?=
 =?UTF-8?q?=E3=80=81=E5=88=A0=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |  26 +++++
 .../common/bottomBox/tabs/alertMessageTab.vue | 106 +++++++++++++++++-
 .../src/components/page/alert/list.vue        |  66 ++++++++++-
 .../src/components/page/project/project.vue   |   2 +-
 4 files changed, 192 insertions(+), 8 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 4c8f7bebe..88fe8254b 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1363,6 +1363,32 @@ li{
   color: $box-title-color;
   font-weight: bold;
 }
+
+.alert-clean-pop.el-popover {
+  min-width: 30px;
+  padding: 5px 0;
+  text-align: center;
+  top: 20px;
+}
+.sub-list .alert-clean-pop.el-popover {
+  top: 1px;
+}
+.alert-clean-pop::after {
+  content: '';
+  display: block;
+  width:0;
+  height:0;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 0;
+  border: 5px;
+  border-style: solid dashed dashed dashed;
+  border-color: #fff transparent transparent transparent;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 10px);
+}
 /*列表中状态字段 的小圆点*/
 .active-icon{
   margin-top:15px;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index d8a380434..0b6476281 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span class="sub-list">
     <div class="sub-top-tools">
       <div class="sub-list-tabs">
         <div class="sub-list-tab-title">
@@ -14,8 +14,17 @@
         <div class="top-tool-search">
           <search-input :default-item="'alertMessageState'" :default-value="defaultSearchValue" :searchMsg="searchMsg" @search="search"></search-input>
         </div>
+        <button type="button" @click="importBox.show = true" :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>
+    <!--删除message按钮-->
+    <div class="el-popover alert-clean-pop" @click="toDeleteMessage" v-if="deleteBox.ids.length > 0">
+      <i style="cursor: pointer" class="el-icon-delete"></i>
+    </div>
+
     <el-table
       class="nz-table"
       :data="tableData"
@@ -27,7 +36,15 @@
       v-scrollBar:el-table
       :height="$tableHeight.openSubList.subList"
       :cell-class-name="labelsClassName"
+      @selection-change="selectChange"
       style="width: 100%;">
+      <el-table-column
+        :resizable="false"
+        type="selection"
+        width="38"
+        align="center"
+      >
+      </el-table-column>
       <el-table-column
         :resizable="false"
         v-for="(item, index) in tablelable"
@@ -73,6 +90,7 @@
           </div>-->
           <template v-else-if="item.prop == 'labels'">
             <el-tag v-if="key != 'alertname' && key != 'severity'"
+                    :key="key"
                     type="info"
                     size="mini" v-for="(value, key) in scope.row.labels" :key="key" class="alert-message-tag">{{key}}：{{value}}</el-tag>
           </template>
@@ -109,10 +127,40 @@
       @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="importBox.show = false" 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 class="export-xlsx">
+      <el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="deleteBox.show = false" class="nz-message">
+        <div class="upload-body">
+          <el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
+          <div style="text-align: right; margin-top: 10px;">
+            <button @click="deleteBox.show = false" class="el-button el-button--default el-button--small">
+              <span>{{$t('tip.no')}}</span>
+            </button>
+            <button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
+              <span>{{$t('tip.yes')}}</span>
+            </button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
   </span>
 </template>
 
 <script>
+  import axios from 'axios'
   export default {
     name: "alertMessageTab",
     components: {
@@ -133,6 +181,10 @@
           pageSize: 20,
           total: 0
         },
+
+        importBox: {show: false, title:this.$t('overall.exportExcel')},
+        deleteBox: {show: false, ids: [], remark: ''},
+
         tableTitle: [
           {
             label: this.$t("alert.alertName"),
@@ -270,6 +322,58 @@
       changeTab(tab) {
         this.$emit('changeTab', tab);
       },
+      toDeleteMessage() {
+        this.deleteBox.show = true;
+      },
+      deleteMessage() {
+        this.$put("alert/message", this.deleteBox).then(res => {
+          if (res.code === 200) {
+            this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+            this.getAlertList();
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+      },
+      selectChange(s) {
+        this.deleteBox.ids = [];
+        s.forEach(item => {
+          this.deleteBox.ids.push(item.id);
+        });
+      },
+      exportCur:function(){
+        this.exportExcel(this.searchLabel);
+        this.importBox.show = false;
+      },
+      exportAll:function(){
+        let temp = JSON.parse(JSON.stringify(this.searchLabel));
+        temp.pageSize = -1;
+        this.exportExcel(temp);
+        this.importBox.show = false;
+      },
+      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标签移除
+          }
+        })
+      },
       getAlertList() {
         this.tableData = [];
         this.loading = true;
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 0d65415ce..968958bc8 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -28,6 +28,9 @@
           </div>
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
+        <div class="el-popover alert-clean-pop" @click="toDeleteMessage" v-if="deleteBox.ids.length > 0">
+          <i style="cursor: pointer" class="el-icon-delete"></i>
+        </div>
         <el-table
           class="nz-table"
           :data="tableData"
@@ -38,7 +41,15 @@
           :height="mainTableHeight"
           v-scrollBar:el-table
           :cell-class-name="labelsClassName"
+          @selection-change="selectChange"
           style="width: 100%;">
+          <el-table-column
+            :resizable="false"
+            type="selection"
+            width="38"
+            align="center"
+          >
+          </el-table-column>
           <el-table-column
             :resizable="false"
             v-for="(item, index) in tablelable"
@@ -88,6 +99,7 @@
                         :key="key"
                         :class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
                         v-if="key != 'alertname' && key != 'severity'"
+                        :key="key"
                         :type="tagType(key)"
                         size="mini" v-for="(value, key) in scope.row.labels" class="alert-message-tag">{{key}}：{{value}}</el-tag>
               </template>
@@ -131,18 +143,35 @@
       @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">
+          <button @click="exportAll" class="el-button el-button--default el-button--small">
             <span>{{$t('overall.exportAll')}}</span>
           </button>
         </div>
       </el-dialog>
     </div>
+    <!--删除确认提示-->
+    <div class="export-xlsx">
+      <el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
+        <div class="upload-body">
+          <el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
+          <div style="text-align: right; margin-top: 10px;">
+            <button @click="closeDialog" class="el-button el-button--default el-button--small">
+              <span>{{$t('tip.no')}}</span>
+            </button>
+            <button @click="deleteMessage" class="el-button el-button--default el-button--small el-button--primary">
+              <span>{{$t('tip.yes')}}</span>
+            </button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
   </div>
 
 </template>
@@ -167,8 +196,8 @@
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
 
         //导出相关
-        importBox: {show:false, title:this.$t('overall.exportExcel')},
-
+        importBox: {show: false, title:this.$t('overall.exportExcel')},
+        deleteBox: {show: false, ids: [], remark: ''},
 
         tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false,
@@ -223,7 +252,11 @@
             label: this.$t('alert.endAt'),
             prop: 'endAt',
             show: true,
-          }
+          }, /*{
+            label: this.$t('config.account.option'),
+            prop: 'option',
+            show: true
+          }*/
         ],
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
@@ -359,19 +392,40 @@
           this.$refs['assetEditUnit'].tabView = false
         }
       },
+      toDeleteMessage() {
+        this.deleteBox.show = true;
+      },
+      deleteMessage() {
+        this.$put("alert/message", this.deleteBox).then(res => {
+          if (res.code === 200) {
+            this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+            this.getAlertList();
+          } else {
+            this.$message.error(res.msg);
+          }
+        })
+      },
+      selectChange(s) {
+        this.deleteBox.ids = [];
+        s.forEach(item => {
+          this.deleteBox.ids.push(item.id);
+        });
+      },
       showExportDialog() {
         this.importBox.show = true;
       },
       closeDialog() {
         this.importBox.show = false;
+        this.deleteBox.show = false;
       },
       exportCur:function(){
         this.exportExcel(this.searchLabel);
         this.closeDialog();
       },
       exportAll:function(){
-        this.searchLabel.pageSize = -1;
-        this.exportExcel(this.searchLabel);
+        let temp = JSON.parse(JSON.stringify(this.searchLabel));
+        temp.pageSize = -1;
+        this.exportExcel(temp);
         this.closeDialog();
       },
       exportExcel:function(params){
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index b1af41c17..7ffad9d0a 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -1244,7 +1244,7 @@
   .table-header-inner{
     position: absolute;
     z-index: 1;
-    top: 44px;
+    top: 40px;
     left: 11px;
     cursor: pointer;
   }