NEZ-427 feat:所有列表页面添加多选删除

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

@@ -2254,3 +2254,10 @@ li{
 .alert-level-P3{
   background: #f7ba78;
 }
+.required-marker {
+  label:before{
+    content: '*';
+    color: #F56C6C;
+    margin-right: 4px;
+  }
+}

nezha-fronted/src/components/common/alert/alertMessageTable.vue

@@ -3,11 +3,6 @@
 </style>
 <template>
   <div :class="{'contentTable':!projectAlertId,'relative-position':true,'contentProject':projectAlertId}">
-    <transition name="el-zoom-in-bottom">
-      <div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0">
-        <i style="cursor: pointer" class="nz-icon nz-icon-delete"></i>
-      </div>
-    </transition>
     <!-- 自定义table列 -->
     <transition name="el-zoom-in-top">
       <element-set
@@ -39,7 +34,7 @@
       <el-table-column
         :resizable="false"
         type="selection"
-        width="38"
+        width="40"
         align="center"
       >
       </el-table-column>
@@ -187,7 +182,11 @@
     <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>
+          <el-form ref="remarkForm" :model="deleteBox">
+            <el-form-item :rules="[{required: true, message: this.$t('validate.required'), trigger: 'blur'}]" prop="remark">
+              <el-input type="textarea" :placeholder="$t('alert.description')" v-model="deleteBox.remark"></el-input>
+            </el-form-item>
+          </el-form>
           <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>
@@ -409,6 +408,7 @@
           this.queryChartDate()
         })
       },
+
       formatThreshold:function(value,unit){
         let unitMethod=chartDataFormat.getUnit(unit)
         if(unitMethod&&value){
@@ -598,13 +598,19 @@
         if (obj) {
           this.deleteBox.ids = obj.id + "";
         }
+        this.deleteBox.remark="";
         this.deleteBox.show = true;
       },
       deleteMessage() {
-        this.$emit('deleteMessage',this.deleteBox,()=>{
+        this.$refs.remarkForm.validate(valid => {
-          this.deleteBox.ids=[];
+          console.log('valid',valid)
-        });
+          if (valid) {
-        this.deleteBox.show = false;
+            this.$emit('deleteMessage',this.deleteBox,()=>{
+              this.deleteBox.ids=[];
+            });
+            this.deleteBox.show = false;
+          }
+        })
       },
       selectChange(s) {
         let ids = [];
@@ -613,6 +619,7 @@
           ids.push(item.id);
         });
         this.deleteBox.ids = ids.join(",");
+        this.$emit('select-change',s)
       },
       showExportDialog() {
         this.importBox.show = true;

nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue

@@ -21,15 +21,18 @@
             class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
           <i class="nz-icon nz-icon-download1"></i>
         </button>
+        <delete-button :delete-objs="batchDeleteObjs" api="alert/message" @after="getAlertList" :clickFunction="openDelMessageBox"></delete-button>
       </div>
     </div>
     <alertMessageTable
+      ref="alertMessageTable"
       :tableData="tableData"
       :loading="loading"
       :tableHeight="$tableHeight.openSubList.subList"
       :tableId="tableId"
       @tableDataSort="tableDataSort"
       @deleteMessage="deleteMessage"
+      @select-change="(selection)=>{this.batchDeleteObjs=selection}"
     ></alertMessageTable>
     <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     <!--导出-->
@@ -85,12 +88,14 @@
   import chart from '../../../page/dashboard/overview/chart'
   import bus from '../../../../libs/bus'
   import alertMessageTable from '@/components/common/alert/alertMessageTable.vue'
+  import deleteButton from "../../deleteButton";
   export default {
     name: "alertMessageTab",
     components: {
       'nz-alert-tag': nzAlertTag,
       'chart': chart,
       'alertMessageTable':alertMessageTable,
+      'delete-button':deleteButton,
     },
     props: {
       from: String, //来自哪个主页面，有："asset"、"alertRule"
@@ -109,6 +114,7 @@
         requestIndex:0,
         defaultSearchValue: this.obj.alertNum ? 1 : 0,
         showElementSet: false,
+        batchDeleteObjs:[],
         tableId: 'alertListTable', //需要分页的table的id，用于记录每页数量
         showTopBtn: false, //top按钮是否显示
         loading: false,
@@ -453,6 +459,12 @@
       dialogClose() {
         this.graphShow = false;
       },
+      openDelMessageBox:function(){
+        if(this.batchDeleteObjs.length<1) return;
+        if(this.$refs.alertMessageTable){
+          this.$refs.alertMessageTable.toDeleteMessage(false);
+        }
+      },
       del(u) {
         this.$confirm(this.$t("tip.confirmDelete"), {
           confirmButtonText: this.$t("tip.yes"),

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -13,6 +13,7 @@
                 class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
+        <delete-button :delete-objs="batchDeleteObjs" api="cabinet" @after="getTableData"></delete-button>
       </div>
     </div>
     <el-table
@@ -24,7 +25,15 @@
       v-scrollBar:el-table="'large'"
       :cell-class-name="assetStatClassName"
       :height="$tableHeight.noPagination"
-      style="width: 100%;">
+      style="width: 100%;"
+      @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+    >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
       <el-table-column
         :resizable="false"
         v-for="(item, index) in tableTitle"
@@ -80,10 +89,12 @@
 
 <script>
   import cabinetBox from "../../rightBox/cabinetBox";
+  import deleteButton from "../../deleteButton";
   export default {
     name: "cabinetTab",
     components: {
-      "cabinet-box": cabinetBox
+      "cabinet-box": cabinetBox,
+      'delete-button':deleteButton,
     },
     props: {
       obj: Object, //关联的实体对象
@@ -99,6 +110,7 @@
           seq:'',
           uSize:1
         },
+        batchDeleteObjs:[],
         rightBox: {show: false},
         showTopBtn: false, //top按钮是否显示
         loading: false,

nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue

@@ -25,6 +25,7 @@
             </button>
           </template>
         </export-excel>
+        <delete-button :delete-objs="batchDeleteObjs" api="endpoint" @after="getTableData"></delete-button>
       </div>
     </div>
     <!-- 自定义table列 -->
@@ -49,7 +50,14 @@
       ref="endpointTable"
       style="width: 100%;"
       @sort-change="tableDataSort"
+      @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
     >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
       <el-table-column
         :resizable="false"
         v-for="(item, index) in tools.customTableTitle"
@@ -84,6 +92,7 @@
                   :id="'edp-edit-'+scope.row.id">
                   <i class="nz-icon nz-icon-edit"></i>
                 </span>
+            <span :title="$t('overall.delete')" @click.stop="delEndpoint(scope.row)" class="content-right-option" :id="'asset-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
           </div>
           <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
           <span v-else-if="item.prop == 'state'" >
@@ -133,10 +142,12 @@
 <script>
   import exportXLSX from "../../exportXLSX";
   import bus from '@/libs/bus'
+  import deleteButton from "../../deleteButton";
   export default {
     name: "endpointTab",
     components: {
-      'export-excel': exportXLSX
+      'export-excel': exportXLSX,
+      'delete-button':deleteButton,
     },
     props: {
       obj: Object, //关联的实体对象
@@ -157,6 +168,7 @@
           showCustomTableTitle: false, //自定义列弹框是否显示
           customTableTitle: [], //自定义列工具的数据
         },
+        batchDeleteObjs:[],
         endpoint: {}, //用来查看详情和编辑的对象
         endpointSearchLabel:{
 
@@ -287,6 +299,22 @@
           this.getTableData();
         }
       },
+      delEndpoint(endpoint) {
+        this.$confirm(this.$t("tip.confirmDelete"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          this.$delete("endpoint?ids=" + endpoint.id).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);
+            }
+          });
+        });
+      },
       toEdit(endpoint) {
         this.endpoint = JSON.parse(JSON.stringify(endpoint));
         if (!this.endpoint.paramObj) {

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

@@ -0,0 +1,62 @@
+<template>
+    <div class="delete-button">
+      <el-button class="nz-btn nz-btn-size-normal nz-btn-style-light" :class="{'nz-btn-disabled' : deleteObjs.length<1}" @click="batchDelete"><span><i class="nz-icon nz-icon-delete"></i></span></el-button>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "deleteButton",
+    props:{
+      filterFunction:Function,
+      deleteObjs:Array,
+      api:String,
+      clickFunction:Function
+    },
+    methods:{
+      batchDelete:function(){
+        if(this.deleteObjs.length<1) return;
+        if(this.clickFunction){
+          this.clickFunction();
+          return;
+        }
+        this.$confirm(this.$t("tip.confirmBatchDelete",[this.deleteObjs.length]), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'warning'
+        }).then(() => {
+          let params=this.filterParam();
+          this.$delete(this.api+params).then(response => {
+            if (response.code === 200) {
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.$emit('after')
+            } else {
+              this.$message.error(response.msg);
+            }
+          })
+        });
+      },
+      filterParam:function(){
+        let filterFunction=this.filterFunction
+        if(!filterFunction){
+          filterFunction=(arr)=>{return "?ids="+arr.map(t=>t.id).join(',')};
+        }
+
+        return filterFunction(this.deleteObjs);
+
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .delete-button{
+    margin-left: 16px;
+  }
+  .delete-button .nz-icon-delete{
+    color: #ee6723;
+  }
+  .delete-button .nz-btn-disabled .nz-icon-delete{
+    color: #e5e5e5;
+  }
+</style>

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

@@ -374,6 +374,7 @@ const cn = {
   },
   tip: {
     confirmDelete: "确认删除吗？",
+    confirmBatchDelete:'确定删除这{0}条数据吗？',
     assetConfirmDelete: "关联的Endpoint和告警将会被删除，确认删除吗？",
     yes: "是",
     no: "否",

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

@@ -377,6 +377,7 @@ const en = {
   },
   tip: {
     confirmDelete: "Are you sure you want to delete?", //Are you sure you want to delete?
+    confirmBatchDelete:'Are you sure to delete these {0} pieces of data',
     assetConfirmDelete: 'Related endpoints and alerts will be removed, are you sure you want to delete this asset?',//Related endpoints and alerts will be removed, are you sure you want to delete this asset?
     yes: 'Yes', //"是"
     no: "No",//No

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

@@ -75,7 +75,7 @@
             </el-date-picker>
           </div>
         </el-form-item>
-        <el-form-item :label="$t('asset.location')" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
+        <el-form-item :label="$t('asset.location')" class="required-marker" prop="locationInfo" :rules="[{validator:locationValidator, trigger:'blur'}]">
           <location-cascader :disabled="editAsset.modelId ? false : true" :default-model-u-size="modelSize" @change="setLocationData" ref="locationCascader" :idc-option="dcData"></location-cascader>
         </el-form-item>
         <!--tag-->

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

@@ -48,6 +48,7 @@
               </button>
             </template>
           </export-excel>
+          <delete-button :delete-objs="batchDeleteObjs" api="alert/rule" @after="getTableData"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -75,7 +76,14 @@
         style="width: 100%;"
         @sort-change="tableDataSort"
         @row-dblclick="detail"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
       >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
         <el-table-column
           :resizable="false"
           v-for="(item, index) in tools.customTableTitle"
@@ -145,10 +153,12 @@
   import bus from '../../../libs/bus';
   import exportXLSX from "../../common/exportXLSX";
   import chartDataFormat from "../../charts/chartDataFormat";
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "alert-config",
     components: {
       'export-excel': exportXLSX,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -178,7 +188,7 @@
           customTableTitle: [], //自定义列工具的数据
         },
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
-
+        batchDeleteObjs:[],
         tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量
         alertRule: {},
         blankAlertRule: {

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

@@ -29,16 +29,19 @@
                   class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
             <i class="nz-icon nz-icon-download1"></i>
           </button>
+          <delete-button :delete-objs="batchDeleteObjs" api="alert/message" @after="getAlertList" :clickFunction="openDelMessageBox"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
       <alertMessageTable
+        ref="alertMessageTable"
         :tableData="tableData"
         :loading="tools.loading"
         :tableHeight="mainTableHeight"
         :tableId="tableId"
         @tableDataSort="tableDataSort"
         @deleteMessage="deleteMessage"
+        @select-change="(selection)=>{this.batchDeleteObjs=selection}"
       ></alertMessageTable>
       <div class="pagination-bottom" v-show="!bottomBox.showSubList">
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
@@ -102,6 +105,7 @@
   import alertRuleInfo from '../../common/alert/alertRuleInfo'
   import alertLabel from '../../common/alert/alertLabel'
   import alertMessageTable from '../../common/alert/alertMessageTable.vue'
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "alertList",
     components: {
@@ -111,6 +115,7 @@
       'alertLabel':alertLabel,
       'alertMessageTable':alertMessageTable,
       'pick-time':pickTime,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -140,7 +145,7 @@
         //导出相关
         importBox: {show: false, title:this.$t('overall.exportExcel')},
         deleteBox: {show: false, ids: "", remark: '', state: 2},
-
+        batchDeleteObjs:[],
         //详情相关
         graphShow: false,
         chartDatas: [],
@@ -411,6 +416,12 @@
           this.$refs['assetEditUnit'].tabView = false
         }
       },
+      openDelMessageBox:function(){
+        if(this.batchDeleteObjs.length<1) return;
+        if(this.$refs.alertMessageTable){
+          this.$refs.alertMessageTable.toDeleteMessage(false);
+        }
+      },
       toDeleteMessage(obj) {
         if (obj) {
           this.deleteBox.ids = obj.id + "";

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

@@ -10,13 +10,14 @@
             export-url="/asset/export"
             import-url="/asset/import"
             :params="searchLabel"
-            @afterImport="getTableData"
+            @afterImport="afterTableListChange"
           >
             <template slot="optionZone">
               <button @click.stop="add" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
                 <i class="nz-icon nz-icon-create-square"></i></button>
             </template>
           </export-excel>
+          <delete-button :delete-objs="batchDeleteObjs" api="asset" @after="afterTableListChange"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -44,7 +45,14 @@
         :cell-class-name="messageStyle"
         @sort-change="tableDataSort"
         @row-dblclick="detail"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
       >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
         <el-table-column
           :resizable="false"
           v-for="(item, index) in tools.customTableTitle"
@@ -190,11 +198,13 @@
   import bus from "../../../libs/bus";
   import exportXLSX from "../../common/exportXLSX";
   import endpointStatusPop from "./endpointStatusPop";
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "asset",
     components:{
       'export-excel':exportXLSX,
       'endpoint-status-pop':endpointStatusPop,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -225,6 +235,7 @@
           showCustomTableTitle: false, //自定义列弹框是否显示
           customTableTitle: [], //自定义列工具的数据
         },
+        batchDeleteObjs:[],
         asset: {},
         blankAsset: {
           id: '',
@@ -507,8 +518,7 @@
           this.$delete("asset?ids=" + asset.id).then(response => {
             if (response.code === 200) {
               this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
-              this.getTableData();
+             this.afterTableListChange()
-              bus.$emit('asset-list-change')
             } else {
               this.$message.error(response.msg);
             }
@@ -539,11 +549,14 @@
       closeRightBox(refresh) {
         this.rightBox.show = false;
         if (refresh) {
-          this.getTableData();
+         this.afterTableListChange()
-          bus.$emit('asset-list-change')
           this.loadKeys();
         }
       },
+      afterTableListChange:function(){
+        this.getTableData();
+        bus.$emit('asset-list-change')
+      },
       pageNo(val) {
         this.pageObj.pageNo = val;
         this.getTableData()

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

@@ -18,6 +18,7 @@
                   class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
+          <delete-button :delete-objs="batchDeleteObjs" api="sys/user/delete" @after="getTableData" :filter-function="(arr)=>{return '?userIds='+arr.map(t=>t.userId).join(',')}"></delete-button>
         </div>
         <!-- 顶部分页组件，当打开底部上滑框时出现 -->
         <div class="pagination-top pagination-top-hide display-none"></div>
@@ -42,7 +43,15 @@
         v-loading="tools.loading"
         v-scrollBar:el-table="'large'"
         style="width: 100%;"
-        @sort-change="tableDataSort">
+        @sort-change="tableDataSort"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+      >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
         <el-table-column
           :resizable="false"
           v-for="(item, index) in tools.customTableTitle"
@@ -109,13 +118,14 @@
   </div>
 </template>
 <script>
-  import bus from '../../../libs/bus';
+  import deleteButton from "../../common/deleteButton";
   import accountBox from '../../common/rightBox/accountBox';
 
   export default {
     name: "account",
     components: {
-      'account-box': accountBox
+      'account-box': accountBox,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -145,7 +155,7 @@
           customTableTitle: [], //自定义列工具的数据
         },
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
-
+        batchDeleteObjs:[],
         user: {},
 
         tableId: 'accountTable', //需要分页的table的id，用于记录每页数量

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

@@ -17,6 +17,7 @@
                   class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
+          <delete-button :delete-objs="batchDeleteObjs" api="idc" @after="getTableData"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -42,7 +43,15 @@
         v-loading="tools.loading"
         :cell-class-name="assetStatClassName"
         style="width: 100%;"
-        @sort-change="tableDataSort">
+        @sort-change="tableDataSort"
+        @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+      >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
         <el-table-column
           :resizable="false"
           show-overflow-tooltip
@@ -126,11 +135,13 @@
   import bus from '../../../libs/bus';
   import dcBox from "../../common/rightBox/dcBox"; //dc弹框
   import trafficSettingBox from "../../common/rightBox/trafficSetting/trafficSettingBox";
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "dc",
     components:{
       'traffic-setting-box': trafficSettingBox,
-      'dc-box': dcBox
+      'dc-box': dcBox,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -155,6 +166,7 @@
           showCustomTableTitle: false, //自定义列弹框是否显示
           customTableTitle: [], //自定义列工具的数据
         },
+        batchDeleteObjs:[],
         tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
         dc: {},
         blankDc: {

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

@@ -19,10 +19,11 @@
           <div class="top-tool-search">
             <search-input :searchMsg="searchMsg" @search="search"></search-input>
           </div>
-          <button @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20"  :title="$t('overall.createMib')"
+          <button type="button" @click="add" 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>
+          <delete-button :delete-objs="batchDeleteObjs" api="mib" @after="getTableData"></delete-button>
         </div>
       </div>
       <!-- 自定义table列 -->
@@ -35,7 +36,15 @@
           ref="customTableTitle"
         ></element-set>
       </transition>
-      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort">
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort"
+                @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+      >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
         <el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
                          :key="`col-${index}`" :label="item.label" :sortable="$tableSet.sortableShow(item.prop,'mib')"
                          :prop="$tableSet.propTitle(item.prop,'mib')"
@@ -109,11 +118,12 @@
   import axios from 'axios'
   import bus from '../../../libs/bus';
   import mibBrowser from './mibBrowser';
-
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "mib",
     components: {
-      'mib-browser': mibBrowser
+      'mib-browser': mibBrowser,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -127,6 +137,7 @@
           showCustomTableTitle: false, //自定义列弹框是否显示
           customTableTitle: [], //自定义列工具的数据
         },
+        batchDeleteObjs:[],
         tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
         mib: {},
         blankMib: {

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

@@ -16,6 +16,7 @@
                   id="model-add">
                     <i class="nz-icon-create-square nz-icon"></i>
           </button>
+          <delete-button :delete-objs="batchDeleteObjs" api="model" @after="getTableData"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -40,7 +41,14 @@
                 :height="mainTableHeight"
                 @sort-change="tableDataSort"
                 @row-dblclick="panel"
+                @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
       >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
         <el-table-column :resizable="false"
                          v-for="(item, index) in tools.customTableTitle"
                          v-if="item.show"
@@ -101,8 +109,12 @@
 </template>
 <script>
   import bus from '../../../libs/bus';
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "model",
+    components: {
+      'delete-button':deleteButton,
+    },
     data() {
       return {
         /*二级页面相关*/
@@ -126,6 +138,7 @@
           showCustomTableTitle: false, //自定义列弹框是否显示
           customTableTitle: [], //自定义列工具的数据
         },
+        batchDeleteObjs:[],
         tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
 
         rightBox: {show: false},

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

@@ -16,6 +16,7 @@
                   class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
+          <delete-button :delete-objs="batchDeleteObjs" api="promServer" @after="getTableData"></delete-button>
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
@@ -31,7 +32,15 @@
       </transition>
       <el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
                 v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
-                @sort-change="tableDataSort">
+                @sort-change="tableDataSort"
+                @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
+      >
+        <el-table-column
+          :resizable="false"
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
         <el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle"
                          v-if="item.show"
                          :width="item.width"
@@ -95,11 +104,12 @@
 <script>
   import bus from '../../../libs/bus';
   import promServerBox from '../../common/rightBox/promServerBox';
-
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "promServer",
     components: {
-      'prom-server-box': promServerBox
+      'prom-server-box': promServerBox,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -128,7 +138,7 @@
           showCustomTableTitle: false, //自定义列弹框是否显示
           customTableTitle: [], //自定义列工具的数据
         },
-
+        batchDeleteObjs:[],
         tableId: 'promTable', //需要分页的table的id，用于记录每页数量
         promServer: {},
         blankPromServer: {

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

@@ -40,6 +40,7 @@
                 </button>
               </template>
             </export-excel>
+            <delete-button :delete-objs="batchDeleteObjs" api="endpoint" @after="afterCloseImport"></delete-button>
           </div>
           <div class="pagination-top pagination-top-hide display-none"></div>
         </div>
@@ -66,7 +67,14 @@
           style="width: 100%;"
           @sort-change="tableDataSort"
           @row-dblclick="detailEndpoint"
+          @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
         >
+          <el-table-column
+            :resizable="false"
+            type="selection"
+            width="40"
+            align="center">
+          </el-table-column>
           <el-table-column
             :resizable="false"
             v-for="(item, index) in tools.customTableTitle"
@@ -175,6 +183,7 @@
   import panelTab from '../../common/bottomBox/tabs/panelTab'
   import bus from '../../../libs/bus'
   import facade from '@/components/common/project/projectFacade'
+  import deleteButton from "../../common/deleteButton";
   export default {
     name: "project2",
     components: {
@@ -182,6 +191,7 @@
       'loading': loading,
       'panel-tab': panelTab,
       facade,
+      'delete-button':deleteButton,
     },
     data() {
       return {
@@ -213,7 +223,7 @@
           showCustomTableTitle: false, //自定义列弹框是否显示
           customTableTitle: [], //自定义列工具的数据
         },
-
+        batchDeleteObjs:[],
 
         tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
         userData: [],