NEZ-2244 fix : 列表删除按钮样式 和 批量删除 confirm 样式统一

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -325,6 +325,25 @@
         &>.table-operation-item:hover {
           background-color: $--button-primary-hover-background-color;
         }
+        .delete-button.table-operation-item {
+          justify-content: center;
+          align-items: center;
+          width: 30px;
+          margin-right: 10px;
+          border: none;
+          border-radius: $--button-border-radius;
+          background-color: $--button-primary-background-color;
+          opacity: 1;
+          cursor: pointer;
+          transition: all .2s;
+          i {
+            color: $--button-primary-color;
+            font-size: 12px;
+          }
+        }
+        .delete-button.table-operation-item:hover {
+          background-color: $--button-primary-hover-background-color;
+        }
         .table-operation-item.table-operation-item--more {
           justify-content: center;
           align-items: center;

nezha-fronted/src/assets/css/components/common/deleteButton.scss

@@ -97,5 +97,6 @@
   }
   .check-title{
     color: $--color-text-regular;
+    vertical-align: middle;
   }
 }

nezha-fronted/src/assets/css/components/common/table/settings/backupsTable.scss

@@ -1,73 +1,74 @@
-.backups-table{
+.backups-table {
   .nz-table-list {
-      .el-table__row{
+    .el-table__row {
-        td:last-of-type{
+      td:last-of-type {
-          // border-bottom: 1px solid $--border-color-light !important;
+        // border-bottom: 1px solid $--border-color-light !important;
-          border: none !important;
+        border: none !important;
-        }
       }
+    }
   }
-    .el-table:not(.chart-table) {
+  .el-table:not(.chart-table) {
-      .table-operation-items {
+    .table-operation-items {
+      display: flex;
+      justify-content: center;
+      .table-operation-item.delete-button {
+        background: $--background-color-2 !important;
+        border: 1px solid $--border-color-base !important;
+      }
+      .table-operation-edit {
+        background: $--background-color-2;
+        border: 1px solid $--border-color-base;
+        border-radius: 2px;
+        width: 30px;
+        height: 22px;
+        i {
+          font-size: 12px !important;
+        }
+      }
+      .table-operation-del {
+        background: $--background-color-2;
+        border: 1px solid $--border-color-base;
+        border-radius: 2px;
+        width: 22px;
+        height: 22px;
+        i {
+          font-size: 12px !important;
+        }
+      }
+      .table-operation-button {
+        border: none;
+        background-color: $--color-primary;
+        color: $--button-primary-color;
         display: flex;
+        text-align: center;
+        line-height: 22px;
         justify-content: center;
-        
+        align-items: center;
-        .table-operation-edit {
+        height: 22px;
-          background: $--background-color-2;
+        width: 30px;
-          border: 1px solid $--border-color-base;
+        padding: 0 5px 0 5px;
-          border-radius: 2px;
+        margin-right: 10px;
-          width: 30px;
+        cursor: pointer;
-          height: 22px;
+        i.nz-icon-beifen.nz-icon::before {
-          i{
+          font-size: 12px;
-            font-size: 12px !important;
-          }
-        }
-        .table-operation-del{
-          background: $--background-color-2;
-          border: 1px solid $--border-color-base;
-          border-radius: 2px;
-          width: 22px;
-          height: 22px;
-          i{
-            font-size: 12px !important;
-          }
-        }
-        .table-operation-button {
-          border: none;
-          background-color: $--color-primary;
-          color: $--button-primary-color;
-          display: flex;
-          text-align: center;
-          line-height: 22px;
-          justify-content: center;
-          align-items: center;
-          height: 22px;
-          width: 30px;
-          padding: 0 5px 0 5px;
-          margin-right: 10px;
-          cursor: pointer;
-          i.nz-icon-beifen.nz-icon::before {
-            font-size: 12px;
-          }
         }
       }
     }
+  }
 
-    .nz-icon-shujubeifenhuifu::before{
+  .nz-icon-shujubeifenhuifu::before {
-      font-size: 12px;
+    font-size: 12px;
-    }
+  }
-    .el-table--border td:first-child .cell{
+  .el-table--border td:first-child .cell {
-      padding-left: 20px !important;
+    padding-left: 20px !important;
-    }
+  }
 
-
+  .el-table__empty-block {
-
+    .el-table__empty-text {
-    .el-table__empty-block{
+      .table-no-data {
-      .el-table__empty-text{
+        height: 200px;
-        .table-no-data{
+        padding-top: 70px;
-          height: 200px;
-          padding-top: 70px;
-        }
       }
     }
+  }
 }

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

@@ -39,6 +39,7 @@
                 <delete-button
                   ref="deleteButton"
                   :from="'ipDetails'"
+                  :single="false"
                   :type="'link'"
                   :title="$t('overall.batchDel')"
                   v-has="'ipam_delete'"

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

@@ -29,6 +29,7 @@
         <delete-button
           ref="deleteButton"
           :from="'alertMessageTab'"
+          :single="false"
           :forceDeleteShow="false"
           :clickFunction="openDelMessageBox"
           :delete-objs="batchDeleteObjs"

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

@@ -58,6 +58,7 @@
                 <delete-button
                   ref="deleteButton"
                   :from="'cabinetTab'"
+                  :single="false"
                   :forceDeleteShow="false"
                   :type="'link'"
                   :title="$t('overall.batchDel')"

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

@@ -34,6 +34,7 @@
         </export-excel>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'endpoint'"
           :forceDeleteShow="false"
           :delete-objs="batchDeleteObjs"

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

@@ -5,7 +5,7 @@
         <span><i class="nz-icon nz-icon-delete" ></i></span>
       </button>
     </div>
-
+    <button v-if="this.type === 'btn'" class="table-operation-item delete-button" :id="id" @click="batchDelete" :title="$t('overall.delete')"><i class="nz-icon nz-icon-delete"></i></button>
     <div v-if="this.type === 'link'" :id="id" @click="batchDelete" :title="$t('overall.delete')">
       <span><i class="nz-icon nz-icon-delete" ></i>{{title}}</span>
     </div>
@@ -98,6 +98,7 @@ export default {
       dialogVisible: false,
       idShow: true,
       idStr: [],
+      backupName: [],
       deleteData: [],
       forceDelete: 0,
       batchDeleteObjs: [],
@@ -126,40 +127,73 @@ export default {
     deleteTitle: {
       type: String,
       default: 'project.topology.data'
+    },
+    single: {
+      type: Boolean
     }
   },
+  inject: ['getTableData'],
   methods: {
     batchDelete: function () {
-      this.$emit('before')
+      if (!this.single) {
-      if (this.deleteObjs.length < 1) return
+        this.$emit('before')
-      if (this.clickFunction) {
+        if (this.deleteObjs.length < 1) return
-        this.clickFunction()
+        if (this.clickFunction) {
-        return
+          this.clickFunction()
+          return
+        }
+        this.idShow = true
+        this.prepare = true
+        this.process = false
+        this.finish = false
+        this.forceDelete = 0
+        this.deleteData = this.$loadsh.cloneDeep(this.deleteObjs).map(item => {
+          item.type = this.from
+          return item
+        })
+        this.checkAll = true
+        this.idStr = this.deleteData.map(item => item.id)
+        this.dialogVisible = true
+      } else {
+        setTimeout(() => {
+          this.$emit('before')
+          if (this.deleteObjs.length < 1) return
+          if (this.clickFunction) {
+            this.clickFunction()
+            return
+          }
+          this.idShow = true
+          this.prepare = true
+          this.process = false
+          this.finish = false
+          this.forceDelete = 0
+          this.deleteData = this.$loadsh.cloneDeep(this.deleteObjs).map(item => {
+            item.type = this.from
+            return item
+          })
+          this.checkAll = true
+          this.idStr = this.deleteData.map(item => item.id)
+          if (this.from == 'backup') {
+            this.backupName = this.deleteData.map(item => item.fileName)
+          }
+          this.dialogVisible = true
+        }, 50)
       }
-      this.idShow = true
-      this.prepare = true
-      this.process = false
-      this.finish = false
-      this.forceDelete = 0
-      this.deleteData = this.$loadsh.cloneDeep(this.deleteObjs).map(item => {
-        item.type = this.from
-        return item
-      })
-      this.checkAll = true
-      this.idStr = this.deleteData.map(item => item.id)
-      this.dialogVisible = true
     },
     handleClose () {
       this.dialogVisible = false
       if (this.finish) {
         this.$emit('after')
+        if (this.single) {
+          this.getTableData()
+        }
       }
     },
     batchDeleteYes () {
       if (!this.forceDeleteShow) {
         this.forceDelete = 1
       }
-      this.$delete(this.api + `?ids=${this.idStr.join(',')}&force=${this.forceDelete}`).then(res => {
+      this.$delete(this.api + `?ids=${this.idStr.join(',')}&force=${this.forceDelete}` + `${this.from == 'backup' ? '&filename=' + this.backupName : ''}`).then(res => {
         this.idShow = false
         this.prepare = false
         this.process = true

nezha-fronted/src/components/common/mixin/dataList.js

@@ -45,6 +45,11 @@ export default {
       searchCheckBox: {}
     }
   },
+  provide () {
+    return {
+      getTableData: this.getTableData
+    }
+  },
   methods: {
     sortableShow: tableSet.sortableShow,
     propTitle: tableSet.propTitle,

nezha-fronted/src/components/common/mixin/table.js

@@ -27,14 +27,24 @@ export default {
     return {
       operationWidth: '165', // 操作列宽
       orderBy: null,
-      severityDataWeight: this.$store.getters.severityDataWeight
+      severityDataWeight: this.$store.getters.severityDataWeight,
+      singleDelete: []
     }
   },
   methods: {
     tableOperation ([command, row, param]) {
       switch (command) {
+        // case 'delete': {
+        //   this.$emit('del', row)
+        //   break
+        // }
         case 'delete': {
-          this.$emit('del', row)
+          if (this.singleDelete.length === 0) {
+            this.singleDelete.push(row)
+          } else {
+            this.singleDelete = []
+            this.singleDelete.push(row)
+          }
           break
         }
         case 'ack': {

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

@@ -112,7 +112,23 @@
             </div>
             <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
               <!--            <el-dropdown-item :command="['showText', scope.row]"><i class="nz-icon nz-icon-guzhangshuju"></i><span class="operation-dropdown-text">{{$t('alert.config.trbShot')}}</span></el-dropdown-item>-->
-              <el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              <!-- <el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+              <el-dropdown-item v-has="'alertMessage_view'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'alertMessage'"
+                  :forceDeleteShow="false"
+                  :deleteTitle="'alert.alertMessage'"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="alert-msg-delete"
+                  v-has="'alertMessage_expired'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertMessage']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'alertMessage_expired'" :disabled="scope.row.ack === 1" :command="['ack', scope.row]"><i class="nz-icon nz-icon-queren"></i><span class="operation-dropdown-text">{{$t('overall.acknowledge')}}</span></el-dropdown-item>
             </el-dropdown-menu>
@@ -151,10 +167,11 @@ import { calcDurationByStringTimeB } from '../../js/tools'
 import { alertMessage as alertMessageConstant } from '@/components/common/js/constants'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 import alertMessageLabelMixin from '@/components/common/alert/alertMessageLabelMixin'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'alertMessageTable',
   components: {
-    alertRuleInfo: alertRuleInfo
+    alertRuleInfo: alertRuleInfo,deleteButton
   },
   props: {
     nowTime: {

nezha-fronted/src/components/common/table/alert/alertRuleTable.vue

@@ -149,7 +149,23 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_delete'" :command="['delete', scope.row]">
+            <delete-button
+                  ref="deleteButton"
+                  :from="'alertRule'"
+                  :forceDeleteShow="false"
+                  :deleteTitle="'alert.alertRule'"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="alert-rule-delete"
+                  v-has="'alertRule_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+            </el-dropdown-item>
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'alertRule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'alertRule']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
           </el-dropdown-menu>
@@ -170,9 +186,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'alertRuleTable',
+  components: { deleteButton },
   mixins: [table],
   props: {
     loading: Boolean

nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue

@@ -155,14 +155,30 @@
                 $t("overall.duplicate")
               }}</span></el-dropdown-item
             >
-            <el-dropdown-item
+            <!-- <el-dropdown-item
               v-has="'alertSilence_expire'"
               :command="['delete', scope.row]"
               ><i class="nz-icon nz-icon-delete"></i
               ><span class="operation-dropdown-text">{{
                 $t("overall.delete")
               }}</span></el-dropdown-item
-            >
+            > -->
+             <el-dropdown-item v-has="'alertSilence_expire'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'alertSilence'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :deleteTitle="'overall.silence'"
+                  :title="$t('overall.delete')"
+                  id="role-list-delete"
+                  v-has="'alertSilence_expire'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -184,10 +200,12 @@ import table from '@/components/common/mixin/table'
 import { calcDurationByStringTimeB } from '@/components/common/js/tools'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
 import { sameLabels } from '@/components/common/js/constants'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'alertSilenceTable',
   components: {
-    nzAlertTag
+    nzAlertTag,
+    deleteButton
   },
   mixins: [table],
   props: {

nezha-fronted/src/components/common/table/asset/assetMetaTable.vue

@@ -92,7 +92,22 @@
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item v-has="'asset_label_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'asset_label_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'asset_label_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'asset_label_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+             <el-dropdown-item v-has="'asset_label_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'assetMeta'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="asset-meta-delete"
+                  v-has="'asset_label_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -111,9 +126,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'assetLabelTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/asset/assetTable.vue

@@ -163,7 +163,23 @@
               <el-dropdown-item v-if="!assetTab" v-has="'asset_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_connect'" :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">{{$t('config.system.terminal.terminal')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-              <el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              <el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'asset'"
+                  :forceDeleteShow="true"
+                  :deleteTitle="'overall.asset'"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="asset-list-delete"
+                  v-has="'asset_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
+              <!-- <el-dropdown-item v-has="'asset_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'asset']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'asset']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
             </el-dropdown-menu>
@@ -194,6 +210,7 @@
 import table from '@/components/common/mixin/table'
 import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
 // import bus from '@/libs/bus'
+import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 import alertLabel from '@/components/common/alert/alertLabel'
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
@@ -204,7 +221,8 @@ export default {
   components: {
     alertLabel: alertLabel,
     alertDaysInfo,
-    copy
+    copy,
+    deleteButton
   },
   props: {
     showOption: {

nezha-fronted/src/components/common/table/settings/agentTable.vue

@@ -83,7 +83,22 @@
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'agent_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'agent_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'agent_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'agent_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'agent_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'agent'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="promserver-list-delete"
+                  v-has="'agent_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -112,6 +127,7 @@ import bus from '@/libs/bus'
 import table from '@/components/common/mixin/table'
 import { agent } from '@/components/common/js/constants'
 import alertStateInfo from '@/components/common/alert/alertStateInfo'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'agentTable',
   props: {
@@ -119,7 +135,7 @@ export default {
   },
   mixins: [table],
   components: {
-    alertStateInfo
+    alertStateInfo, deleteButton
   },
   data () {
     return {

nezha-fronted/src/components/common/table/settings/assetTypeTable.vue

@@ -78,7 +78,20 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'assetType_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'assetType_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'assetType_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'assetType_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'assetType'"
+                  :forceDeleteShow="false"
+                  id="account-list-delete"
+                  v-has="'user_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -97,11 +110,13 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'asstTypeTable',
   props: {
     loading: Boolean
   },
+  components: { deleteButton },
   mixins: [table],
   data () {
     return {

nezha-fronted/src/components/common/table/settings/backupsTable.vue

@@ -54,9 +54,22 @@
         <button class="table-operation-button" @click="Restore(scope.row)" v-if="scope.row" :title="$t('backup.RestoreNow')">
          <i class="nz-icon-shujubeifenhuifu nz-icon"></i>
         </button>
-        <button class="table-operation-edit" @click="del(scope.row)" v-if="scope.row" :title="$t('overall.delete')">
+        <div v-if="scope.row" @click="tableOperation(scope.row)">
+           <delete-button
+            ref="deleteButton"
+            :forceDeleteShow="false"
+            id="backup-delete"
+            :from="'backup'"
+            :type="'btn'"
+            :api="'/sys/backup'"
+            :single="true"
+            :delete-objs="singleDelete"
+            @before="delFlag=true"
+            ></delete-button>
+          </div>
+        <!-- <button class="table-operation-edit" @click="del(scope.row)" v-if="scope.row" :title="$t('overall.delete')">
           <i class="nz-icon nz-icon-delete" style="font-size='12px'"></i>
-        </button>
+        </button> -->
       </div>
     </el-table-column>
      <template slot="empty">
@@ -76,11 +89,12 @@
 import { post, put } from '@/http'
 import lodash from 'lodash'
 import bus from '@/libs/bus'
+import deleteButton from '@/components/common/deleteButton'
 
 export default {
   name: 'backupsTable',
   mixins: [],
-
+  components: { deleteButton },
   props: {
     loading: Boolean,
     customTableTitle: Array,
@@ -90,6 +104,7 @@ export default {
   },
   data () {
     return {
+      singleDelete: []
       // tableData: [
       //   {
       //     retention: '',
@@ -111,9 +126,6 @@ export default {
       // ]
     }
   },
-
-  components: {},
-
   computed: {},
 
   methods: {
@@ -145,15 +157,15 @@ export default {
         }, 400)
       }
     },
-    del (row) {
+    // del (row) {
-      this.$delete('/sys/backup?filename=' + row.fileName).then(res => {
+    //   this.$delete('/sys/backup?filename=' + row.fileName).then(res => {
-        if (res.code == 200) {
+    //     if (res.code == 200) {
-          this.$emit('getTableData', 'recent')
+    //       this.$emit('getTableData', 'recent')
-        } else {
+    //     } else {
-          this.$message.error(res.msg)
+    //       this.$message.error(res.msg)
-        }
+    //     }
-      })
+    //   })
-    },
+    // },
     changeDate (item) {
       const time = this.utcTimeToTimezoneStr(item)
       const time1 = this.timeFormate(time)
@@ -174,6 +186,16 @@ export default {
     },
     edit () {
       this.$emit('edit', this.tableData[0])
+    },
+    tableOperation (row) {
+      this.$set(row, 'name', row.fileName)
+      if (this.singleDelete.length === 0) {
+        this.singleDelete.push(row)
+      } else {
+        this.singleDelete = []
+        this.singleDelete.push(row)
+      }
+      console.log(this.singleDelete)
     }
   },
 

nezha-fronted/src/components/common/table/settings/cabinetTable.vue

@@ -39,7 +39,21 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'dc_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item :command="['delete', scope.row]" v-has="'dc_delete'">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'cabinet'"
+                  :forceDeleteShow="false"
+                  id="cabinet-delete"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -60,9 +74,10 @@
 import table from '@/components/common/mixin/table'
 import Template from '../../../page/config/template'
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'cabinetTable',
-  components: { Template, alertDaysInfo },
+  components: { Template, alertDaysInfo, deleteButton },
   mixins: [table],
   props: {
     loading: Boolean

nezha-fronted/src/components/common/table/settings/chartTmplTable.vue

@@ -64,7 +64,22 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'chartTemplate_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'chartTemplate_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'chartTemplate_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'chartTemplate_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'chartTemp'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="alert-msg-delete"
+                  v-has="'expressionTemplate_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
             <el-dropdown-item v-has="'chartTemplate_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'chartTemplate_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
           </el-dropdown-menu>
@@ -86,9 +101,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import { chart as chartConstant } from '@/components/common/js/constants'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'chartTmplTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/credentialsTable.vue

@@ -79,7 +79,22 @@
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-            <el-dropdown-item v-has="'credential_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'credential_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'credential_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'credentials'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="mib-list-delete"
+                  v-has="'credential_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -98,11 +113,13 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'credentialsTable',
   props: {
     loading: Boolean
   },
+  components: { deleteButton },
   mixins: [table],
   data () {
     return {

nezha-fronted/src/components/common/table/settings/dcTable.vue

@@ -112,7 +112,23 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'dc_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'dc_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'dc_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'dc_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'datacenter'"
+                  :forceDeleteShow="true"
+                  :deleteTitle="'overall.dc'"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="account-list-delete"
+                  v-has="'dc_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
             <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'datacenter']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -134,11 +150,12 @@
 import table from '@/components/common/mixin/table'
 import { showTableTooltip, hideTableTooltip } from '@/components/common/js/tools'
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'dcTable',
   mixins: [table],
   components: {
-    alertDaysInfo
+    alertDaysInfo, deleteButton
   },
   props: {
     loading: Boolean

nezha-fronted/src/components/common/table/settings/endpointTable.vue

@@ -176,7 +176,23 @@
             <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
               <!--            <el-dropdown-item v-if="!endpointTab" :command="['endpointQuery', scope.row]"><i class="nz-icon nz-icon-search"></i><span class="operation-dropdown-text">{{$t('overall.query')}}</span></el-dropdown-item>-->
               <el-dropdown-item v-if="!endpointTab" v-has="'monitor_endpoint_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-              <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+              <!-- <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+              <el-dropdown-item v-has="'monitor_endpoint_delete'" :command="['delete', scope.row, `sys/endpoint?ids=${scope.row.id}`]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'endpoint'"
+                  :forceDeleteShow="false"
+                  :deleteTitle="'project.endpoint.endpoint'"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="account-list-delete"
+                  v-has="'monitor_endpoint_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
               <el-dropdown-item v-has="'monitor_endpoint_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'endpoint']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
               <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'endpoint']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
@@ -208,11 +224,13 @@ import table from '@/components/common/mixin/table'
 import alertLabel from '../../alert/alertLabel'
 import nzTooltip from '../../alert/nzTooltip'
 import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'endpointTable',
   components: {
     alertLabel,
-    nzTooltip
+    nzTooltip,
+    deleteButton
   },
   mixins: [table, alertLabelMixin],
   props: {

nezha-fronted/src/components/common/table/settings/exprTmplTable.vue

@@ -64,7 +64,22 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'expressionTemplate_add'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'expressionTemplate_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'expressionTemplate_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'expressionTemplate_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'exprTemp'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="alert-msg-delete"
+                  v-has="'expressionTemplate_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -83,9 +98,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'exprTmplTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/globalizationTable.vue

@@ -55,7 +55,21 @@
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-            <el-dropdown-item v-has="'i18n_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'i18n_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'i18n_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'globalization'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="globalization-delete"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -74,9 +88,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'globalizationTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue

@@ -65,7 +65,19 @@
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-            <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'ipDetails'"
+                  :forceDeleteShow="false"
+                  id="account-list-delete"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -84,9 +96,13 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'ipDetailsTable',
   mixins: [table],
+  components:{
+    deleteButton
+  },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/ipamTable.vue

@@ -69,7 +69,22 @@
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'ipam_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'ipam_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'ipam_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'ipam'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="account-list-delete"
+                  v-has="'ipam_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
             <!-- <el-dropdown-item v-has="'ipam_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item> -->
           </el-dropdown-menu>
         </el-dropdown>
@@ -89,9 +104,13 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'ipamTable',
   mixins: [table],
+  components: {
+    deleteButton
+  },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/issueTable.vue

@@ -103,7 +103,19 @@
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'issue'"
+                  :forceDeleteShow="false"
+                  id="issue-delete"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -123,11 +135,13 @@
 <script>
 import table from '@/components/common/mixin/table'
 import copy from '@/components/common/copy'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'issueTable',
   mixins: [table],
   components: {
-    copy
+    copy,
+    deleteButton
   },
 
   props: {

nezha-fronted/src/components/common/table/settings/menuTable.vue

@@ -67,7 +67,19 @@
             <i class="nz-icon nz-icon-more3"></i>
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-            <el-dropdown-item  v-has="'monitor_module_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item  v-has="'monitor_module_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'monitor_module_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'menus'"
+                  :forceDeleteShow="false"
+                  id="menus-list-delete"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -86,9 +98,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'menuTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/mibTable.vue

@@ -94,7 +94,22 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'snmp_mibFile_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'snmp_mibFile_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'snmp_mibFile_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'snmp_mibFile_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'mib'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="mib-list-delete"
+                  v-has="'snmp_mibFile_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -113,10 +128,12 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 import axios from 'axios'
 export default {
   name: 'mibTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/modelTable.vue

@@ -86,7 +86,22 @@
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
 <!--            <el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>-->
             <el-dropdown-item v-has="'model_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'model_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'model_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'model_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'model'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="account-list-delete"
+                  v-has="'model_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
             <el-dropdown-item v-has="'main_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -106,9 +121,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'modelTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/moduleTable.vue

@@ -91,7 +91,23 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'monitor_module_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'monitor_module_delete'" :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'monitor_module_delete'" :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'monitor_module_delete'" :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'module'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :deleteTitle="'project.module.module'"
+                  :title="$t('overall.delete')"
+                  id="account-list-delete"
+                  v-has="'monitor_module_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
             <el-dropdown-item v-has="'monitor_module_edit'" :command="['copy', scope.row, 'module']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'main_edit'" :command="['sync', scope.row]"><i class="nz-icon nz-icon-sync"></i><span class="operation-dropdown-text">{{$t('overall.syncChart')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'module']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
@@ -114,9 +130,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'moduleTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/projectTable.vue

@@ -89,7 +89,23 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item :command="['edit', scope.row]" v-has="'project_edit'"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
-            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" v-has="'project_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" v-has="'project_delete'"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item :command="['delete', scope.row, `sys/user?ids=${scope.row.id}`]" v-has="'project_delete'">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'project'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :deleteTitle="'overall.project'"
+                  :title="$t('overall.delete')"
+                  id="account-list-delete"
+                  v-has="'project_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
             <el-dropdown-item v-has="'project_edit'" :command="['copy', scope.row, 'project']"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'alertSilence_add'" :command="['fastSilence', scope.row, 'project']"><i class="nz-icon nz-icon-fast-silence"></i><span class="operation-dropdown-text">{{$t('overall.silenceAlert')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'asset_add'" :command="['topology', scope.row, 'project']"><i class="nz-icon nz-icon-Topology"></i><span class="operation-dropdown-text">{{$t('overall.topology')}}</span></el-dropdown-item>
@@ -111,9 +127,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'projectTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/recordRuleTable.vue

@@ -116,7 +116,21 @@
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'recordRule'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="record-rule-delete"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -138,11 +152,13 @@ import lodash from 'lodash'
 import copy from '@/components/common/copy'
 import table from '@/components/common/mixin/table'
 import nzAlertTag from '../../../page/alert/nzAlertTag'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'recordRuleTable',
   components: {
     nzAlertTag,
-    copy
+    copy,
+    deleteButton
   },
   mixins: [table],
   props: {

nezha-fronted/src/components/common/table/settings/roleTable.vue

@@ -66,7 +66,23 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'role_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'role_delete'" :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'role_delete'" :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'role_delete'" :command="['delete', scope.row]" :disabled="isBuiltIn(scope.row)">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'roles'"
+                  :forceDeleteShow="true"
+                  :deleteTitle="'config.roles.roles'"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="role-list-batch-delete"
+                  v-has="'role_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -85,9 +101,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'roleTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

nezha-fronted/src/components/common/table/settings/userTable.vue

@@ -102,7 +102,23 @@
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'user_edit'" :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
             <el-dropdown-item v-has="'user_edit'" :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+            <!-- <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+            <el-dropdown-item v-has="'user_delete'" :command="['delete', scope.row]" :disabled="scope.row.id === 1">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'user'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :deleteTitle="'config.user.user'"
+                  :title="$t('overall.delete')"
+                  id="account-list-batch-delete"
+                  v-has="'user_delete'"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
             <el-dropdown-item v-has="'user_edit'" :command="['reset_mfa', scope.row]"><i class="nz-icon nz-icon-zhongzhi2FA"></i><span class="operation-dropdown-text">{{$t('config.user.resetMfa')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -123,9 +139,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'userTable',
   mixins: [table],
+  components: { deleteButton },
   props: {
     loading: Boolean
   },

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

@@ -37,6 +37,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'alertMessage'"
                   :forceDeleteShow="false"
                   :deleteTitle="'alert.alertMessage'"

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

@@ -101,6 +101,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'alertRule'"
                   :forceDeleteShow="false"
                   :deleteTitle="'alert.alertRule'"

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

@@ -22,6 +22,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'alertSilence'"
           :forceDeleteShow="false"
           :deleteTitle="'overall.silence'"

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

@@ -117,6 +117,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'asset'"
                   :forceDeleteShow="true"
                   :deleteTitle="'overall.asset'"

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

@@ -19,6 +19,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'agent'"
           :forceDeleteShow="true"
           id="promserver-list-batch-delete"

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

@@ -36,6 +36,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'assetMeta'"
           :forceDeleteShow="false"
           :delete-objs="batchDeleteObjs"

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

@@ -17,6 +17,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'assetState'"
           :forceDeleteShow="false"
           id="asset-state-list-batch-delete"

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

@@ -16,6 +16,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'assetType'"
           :forceDeleteShow="false"
           id="account-list-batch-delete"

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

@@ -98,7 +98,11 @@ export default {
       isRefresh: ''
     }
   },
-
+  provide () {
+    return {
+      getTableData: this.getTableData
+    }
+  },
   components: { nzDataList, backupsTable, backupsBox },
 
   computed: {},

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

@@ -15,6 +15,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'credentials'"
           :forceDeleteShow="false"
           id="mib-list-batch-delete"

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

@@ -107,6 +107,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'datacenter'"
                   :forceDeleteShow="true"
                   :deleteTitle="'overall.dc'"

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

@@ -33,6 +33,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'ipam'"
                   :forceDeleteShow="true"
                   :type="'link'"

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

@@ -14,6 +14,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'menus'"
           :forceDeleteShow="false"
           id="menus-list-batch-delete"

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

@@ -15,6 +15,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'mib'"
           :forceDeleteShow="false"
           id="mib-list-batch-delete"

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

@@ -33,6 +33,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'model'"
                   :forceDeleteShow="true"
                   :type="'link'"

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

@@ -16,6 +16,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'roles'"
           :forceDeleteShow="true"
           :deleteTitle="'config.roles.roles'"

nezha-fronted/src/components/page/config/system/apiKeyTable.vue

@@ -105,7 +105,20 @@
             <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancel(scope.row)"><span>{{$t('overall.cancel')}}</span></button>
           </template>
           <template v-else>
-            <button class="table-operation-item" @click="$emit('del',scope.row)" v-has="'system_apiKey_delete'" :title="$t('overall.delete')"><i class="nz-icon nz-icon-delete"></i></button>
+           <!-- <button class="table-operation-item" @click="$emit('del',scope.row)" v-has="'system_apiKey_delete'" :title="$t('overall.delete')"><i class="nz-icon nz-icon-delete"></i></button> -->
+            <div @click="tableOperation(scope.row)" v-has="'system_apiKey_delete'">
+              <delete-button
+              ref="deleteButton"
+              :forceDeleteShow="false"
+              id="apiKey-delete"
+              :from="'apiKey'"
+              :type="'btn'"
+              :api="api"
+              :single="true"
+              :delete-objs="singleDelete"
+               @before="delFlag=true"
+              ></delete-button>
+            </div>
           </template>
         </div>
       </el-table-column>
@@ -124,11 +137,13 @@
 <script>
 import { tableCommon } from './systemCommon'
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'apiKeyTable',
   props: {
     loading: Boolean
   },
+  components: { deleteButton },
   mixins: [table, tableCommon],
   data () {
     return {
@@ -179,7 +194,7 @@ export default {
           return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
         }
       },
-      reg: new RegExp("(?<=.{8}).", 'g')
+      reg: new RegExp('(?<=.{8}).', 'g')
     }
   },
   methods: {
@@ -215,6 +230,14 @@ export default {
       }
       delete copy.role
       this.saveOrUpdate(copy)
+    },
+    tableOperation (row) {
+      if (this.singleDelete.length === 0) {
+        this.singleDelete.push(row)
+      } else {
+        this.singleDelete = []
+        this.singleDelete.push(row)
+      }
     }
   },
   mounted () {

nezha-fronted/src/components/page/config/system/linkTable.vue

@@ -71,7 +71,21 @@
                 <i class="nz-icon nz-icon-more3"></i>
               </div>
               <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-                <el-dropdown-item v-has="'system_link_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <!-- <el-dropdown-item v-has="'system_link_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+                <el-dropdown-item v-has="'system_link_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'link'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="link-delete"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </template>
@@ -93,11 +107,13 @@
 import { tableCommon } from './systemCommon'
 import bus from '../../../../libs/bus'
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'linkTable',
   props: {
     loading: Boolean
   },
+  components: { deleteButton },
   mixins: [table, tableCommon],
   data () {
     return {

nezha-fronted/src/components/page/config/system/notifyMethodTable.vue

@@ -81,7 +81,21 @@
                 <i class="nz-icon nz-icon-more3"></i>
               </div>
               <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-                <el-dropdown-item v-has="'system_notification_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <!-- <el-dropdown-item v-has="'system_notification_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item> -->
+                <el-dropdown-item v-has="'system_notification_delete'" :command="['delete', scope.row]">
+                  <delete-button
+                  ref="deleteButton"
+                  :from="'notifyMethod'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.delete')"
+                  id="notify-method-delete"
+                  :api="api"
+                  :single="true"
+                  :delete-objs="singleDelete"
+                  @before="delFlag=true"
+                  ></delete-button>
+              </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </template>
@@ -102,11 +116,13 @@
 <script>
 import table from '@/components/common/mixin/table'
 import { tableCommon } from './systemCommon'
+import deleteButton from '@/components/common/deleteButton'
 export default {
   name: 'notifyMethodTable',
   props: {
     loading: Boolean
   },
+  components: { deleteButton },
   mixins: [table, tableCommon],
   data () {
     return {

nezha-fronted/src/components/page/config/system/selfApiKeyTab.vue

@@ -51,7 +51,7 @@ import { parentTableCommon } from './systemCommon'
 import bus from '@/libs/bus'
 
 export default {
-  name: 'apiKeyTab',
+  name: 'selfApiKeyTab',
   components: { nzDataList, selfApiKeyTable },
   mixins: [dataListMixin, parentTableCommon],
   props: {

nezha-fronted/src/components/page/config/system/selfApiKeyTable.vue

@@ -67,7 +67,20 @@
             <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-mini nz-btn-style-light" type="button" @click="cancel(scope.row)"><span>{{$t('overall.cancel')}}</span></button>
           </template>
           <template v-else>
-            <button class="table-operation-item" @click="$emit('del',scope.row)" v-has="'system_apiKey_delete'"><i class="nz-icon nz-icon-delete"></i></button>
+            <!-- <button class="table-operation-item" @click="$emit('del',scope.row)" v-has="'system_apiKey_delete'"><i class="nz-icon nz-icon-delete"></i></button> -->
+           <div @click="tableOperation(scope.row)" v-has="'system_apiKey_delete'">
+              <delete-button
+              ref="deleteButton"
+              :forceDeleteShow="false"
+              id="self-apiKey-delete"
+              :from="'selfApiKey'"
+              :type="'btn'"
+              :api="api"
+              :single="true"
+              :delete-objs="singleDelete"
+               @before="delFlag=true"
+              ></delete-button>
+            </div>
           </template>
         </div>
       </el-table-column>
@@ -86,11 +99,13 @@
 <script>
 import { tableCommon } from './systemCommon'
 import table from '@/components/common/mixin/table'
+import deleteButton from '@/components/common/deleteButton'
 export default {
-  name: 'apiKeyTable',
+  name: 'selfApiKeyTable',
   props: {
     loading: Boolean
   },
+  components: { deleteButton },
   mixins: [table, tableCommon],
   data () {
     return {
@@ -127,7 +142,7 @@ export default {
           show: true
         }
       ],
-      reg: new RegExp("(?<=.{8}).", 'g')
+      reg: new RegExp('(?<=.{8}).', 'g')
     }
   },
   methods: {
@@ -138,6 +153,14 @@ export default {
     //     return bus.timeFormate(new Date(data), 'YYYY-MM-DD HH:mm:ss')
     //   }
     // }
+    tableOperation (row) {
+      if (this.singleDelete.length === 0) {
+        this.singleDelete.push(row)
+      } else {
+        this.singleDelete = []
+        this.singleDelete.push(row)
+      }
+    }
   },
   created () {
   },

nezha-fronted/src/components/page/config/template/chartTemp.vue

@@ -37,6 +37,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'chartTemp'"
                   :forceDeleteShow="false"
                   :type="'link'"

nezha-fronted/src/components/page/config/template/exprTemp.vue

@@ -30,6 +30,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'exprTemp'"
                   :forceDeleteShow="false"
                   :type="'link'"

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

@@ -69,6 +69,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'user'"
           :forceDeleteShow="false"
           :deleteTitle="'config.user.user'"

nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue

@@ -113,6 +113,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'endpoint'"
                   :forceDeleteShow="false"
                   :deleteTitle="'project.endpoint.endpoint'"

nezha-fronted/src/components/page/monitor/module/moduleList.vue

@@ -104,6 +104,7 @@
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <delete-button
                   ref="deleteButton"
+                  :single="false"
                   :from="'module'"
                   :forceDeleteShow="true"
                   :deleteTitle="'project.module.module'"

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

@@ -16,6 +16,7 @@
         </button>
         <delete-button
           ref="deleteButton"
+          :single="false"
           :from="'project'"
           :forceDeleteShow="true"
           :deleteTitle="'overall.project'"