From 31d76d0e4dc79a4b91a03797899026cf0920d897 Mon Sep 17 00:00:00 2001
From: likexuan <likexuan@geedgenetworks.com>
Date: Wed, 4 Jan 2023 11:10:03 +0800
Subject: [PATCH] =?UTF-8?q?perf=20:=20deleteButton=20=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/deleteButton.vue    |  1 -
 .../src/components/common/mixin/table.js      |  5 ----
 .../common/table/alert/alertMessageTable.vue  | 19 +------------
 .../common/table/alert/alertRuleTable.vue     | 21 ++-------------
 .../common/table/alert/alertSilenceTable.vue  | 27 +------------------
 .../common/table/asset/assetTable.vue         |  4 +--
 .../components/common/table/nzDataList.vue    | 11 ++++----
 .../common/table/settings/agentTable.vue      | 20 ++------------
 .../common/table/settings/assetTypeTable.vue  | 17 +-----------
 .../common/table/settings/backupsTable.vue    | 17 +-----------
 .../common/table/settings/cabinetTable.vue    | 20 +-------------
 .../common/table/settings/chartTmplTable.vue  | 20 ++------------
 .../table/settings/credentialsTable.vue       | 20 ++------------
 .../table/settings/dashboardTmplTable.vue     | 20 ++------------
 .../common/table/settings/exprTmplTable.vue   | 20 ++------------
 .../table/settings/globalizationTable.vue     | 18 +------------
 .../common/table/settings/ipDetailsTable.vue  | 21 +--------------
 .../common/table/settings/ipamTable.vue       | 17 +-----------
 .../common/table/settings/issueTable.vue      | 18 ++-----------
 .../common/table/settings/menuTable.vue       | 16 +----------
 .../common/table/settings/mibTable.vue        | 20 ++------------
 .../common/table/settings/recordRuleTable.vue | 20 ++------------
 .../common/table/settings/roleTable.vue       | 21 ++-------------
 .../common/table/settings/userTable.vue       | 21 ++-------------
 .../page/config/system/linkTable.vue          | 18 +------------
 .../page/config/system/notifyMethodTable.vue  | 18 +------------
 26 files changed, 40 insertions(+), 410 deletions(-)

diff --git a/nezha-fronted/src/components/common/deleteButton.vue b/nezha-fronted/src/components/common/deleteButton.vue
index eb9d91400..b1ef9daea 100644
--- a/nezha-fronted/src/components/common/deleteButton.vue
+++ b/nezha-fronted/src/components/common/deleteButton.vue
@@ -87,7 +87,6 @@
 </template>
 
 <script>
-import bus from '@/libs/bus'
 export default {
   name: 'deleteButton',
   data () {
diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js
index 533aba435..8db664808 100644
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -52,11 +52,6 @@ export default {
           break
         }
         case 'delete-rel': {
-          // this.$emit('deleteRel', {
-          //   row: row,
-          //   url: this.api,
-          //   ...param
-          // })
           this.$store.dispatch('deleteTableRel', {
             row: row,
             url: this.api,
diff --git a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
index 2895f40ce..4633cfd88 100644
--- a/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertMessageTable.vue
@@ -113,22 +113,6 @@
             <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_delete'" :command="['delete', scope.row, 'singleDel']"><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>
@@ -167,11 +151,10 @@ 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, deleteButton
+    alertRuleInfo: alertRuleInfo
   },
   props: {
     nowTime: {
diff --git a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
index c2a28087a..d3ef497ed 100644
--- a/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertRuleTable.vue
@@ -152,23 +152,7 @@
           </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]" :class="'nz-el-dropdown-menu-item'">
-            <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_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true, deleteTitle:'alert.alertRule'}]"><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_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>
@@ -189,12 +173,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 export default {
   name: 'alertRuleTable',
-  components: { deleteButton, copy },
+  components: { copy },
   mixins: [table],
   props: {
     loading: Boolean
diff --git a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
index 940c2ae03..d526e0d9b 100644
--- a/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
+++ b/nezha-fronted/src/components/common/table/alert/alertSilenceTable.vue
@@ -156,30 +156,7 @@
                 $t("overall.duplicate")
               }}</span></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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'alertSilence_expire'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true, deleteTitle:'overall.silence'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -201,13 +178,11 @@ 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'
 import copy from '@/components/common/copy'
 export default {
   name: 'alertSilenceTable',
   components: {
     nzAlertTag,
-    deleteButton,
     copy
   },
   mixins: [table],
diff --git a/nezha-fronted/src/components/common/table/asset/assetTable.vue b/nezha-fronted/src/components/common/table/asset/assetTable.vue
index 0616a35fc..7a0dfab86 100644
--- a/nezha-fronted/src/components/common/table/asset/assetTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetTable.vue
@@ -196,7 +196,6 @@
 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'
@@ -207,8 +206,7 @@ export default {
   components: {
     alertLabel: alertLabel,
     alertDaysInfo,
-    copy,
-    deleteButton
+    copy
   },
   props: {
     showOption: {
diff --git a/nezha-fronted/src/components/common/table/nzDataList.vue b/nezha-fronted/src/components/common/table/nzDataList.vue
index 262dcaeba..203d33847 100644
--- a/nezha-fronted/src/components/common/table/nzDataList.vue
+++ b/nezha-fronted/src/components/common/table/nzDataList.vue
@@ -104,8 +104,8 @@
       ref="deleteButton"
       :from="'endpoint'"
       :forceDeleteShow="forceDeleteShow"
-      :deleteTitle="'project.endpoint.endpoint'"
-      :type="'hide'"
+      :deleteTitle="deleteTitle"
+      :type="'link'"
       :title="$t('overall.delete')"
       :api="api"
       :single="single"
@@ -122,7 +122,6 @@ import { bottomBoxWindow } from '@/components/common/js/tools'
 import panelChart from '@/components/chart/panelChart'
 import bus from '@/libs/bus'
 import routerPathParams from '@/components/common/mixin/routerPathParams'
-import lodash from 'lodash'
 import SearchBox from '@/components/common/searchBox/searchBox'
 import deleteButton from '@/components/common/deleteButton'
 export default {
@@ -188,6 +187,7 @@ export default {
       singleDelete: [],
       api: '',
       single: true,
+      deleteTitle: '',
       forceDeleteShow: false,
       delFlag: false,
       fromRoute: fromRoute,
@@ -214,11 +214,12 @@ export default {
     bus.$on('delTableRow', this.delTableRow)
   },
   methods: {
-    delTableRelRow (url, row, forceDeleteShow = false, single = false) {
+    delTableRelRow (url, row, forceDeleteShow = false, single = false, deleteTitle = '') {
       this.api = url
       this.singleDelete = [row]
       this.forceDeleteShow = forceDeleteShow
       this.single = single
+      this.deleteTitle = deleteTitle
       this.$refs.deleteButton.batchDelete()
     },
     delTableRow (ids) { // 接收一个 删除的id数组 判断当前底部弹窗id 是否包含 包含则关闭当前弹窗
@@ -291,7 +292,7 @@ export default {
     },
     showDeleteTableRel (n) {
       if (n) {
-        this.delTableRelRow(this.deleteTableRel.url, this.deleteTableRel.row, this.deleteTableRel.forceDeleteShow, this.deleteTableRel.single)
+        this.delTableRelRow(this.deleteTableRel.url, this.deleteTableRel.row, this.deleteTableRel.forceDeleteShow, this.deleteTableRel.single, this.deleteTableRel.deleteTitle)
       }
     }
   },
diff --git a/nezha-fronted/src/components/common/table/settings/agentTable.vue b/nezha-fronted/src/components/common/table/settings/agentTable.vue
index 53abc39db..af3f26dff 100644
--- a/nezha-fronted/src/components/common/table/settings/agentTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/agentTable.vue
@@ -85,22 +85,7 @@
           <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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'agent_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -129,7 +114,6 @@ 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'
 import copy from '@/components/common/copy'
 export default {
   name: 'agentTable',
@@ -138,7 +122,7 @@ export default {
   },
   mixins: [table],
   components: {
-    alertStateInfo, deleteButton, copy
+    alertStateInfo, copy
   },
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue b/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
index f66a0b92a..8e2e26b4e 100644
--- a/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/assetTypeTable.vue
@@ -78,20 +78,7 @@
           </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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'assetType_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -110,13 +97,11 @@
 
 <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 {
diff --git a/nezha-fronted/src/components/common/table/settings/backupsTable.vue b/nezha-fronted/src/components/common/table/settings/backupsTable.vue
index 35feb7edf..4e6f6944a 100644
--- a/nezha-fronted/src/components/common/table/settings/backupsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/backupsTable.vue
@@ -57,20 +57,7 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'backup_restore'" :command="['restore', scope.row]" disabled><i class="nz-icon-shujubeifenhuifu nz-icon"></i><span>{{$t('backup.RestoreNow')}}</span></el-dropdown-item>
-            <el-dropdown-item v-has="'backup_del'" :command="['delete', scope.row]" :class="'nz-el-dropdown-menu-item'">
-                  <delete-button
-                    ref="deleteButton"
-                    :forceDeleteShow="false"
-                    id="backup-delete"
-                    :from="'backup'"
-                    :type="'link'"
-                    :title="$t('overall.delete')"
-                    :api="'/sys/backup'"
-                    :single="true"
-                    :delete-objs="singleDelete"
-                    @before="delFlag=true"
-                    ></delete-button>
-              </el-dropdown-item>
+            <el-dropdown-item v-has="'backup_del'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -92,12 +79,10 @@
 import { post, put } from '@/http'
 import axios from 'axios'
 import bus from '@/libs/bus'
-import deleteButton from '@/components/common/deleteButton'
 
 export default {
   name: 'backupsTable',
   mixins: [],
-  components: { deleteButton },
   props: {
     loading: Boolean,
     customTableTitle: Array,
diff --git a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue b/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
index 303e70514..81f5faac8 100644
--- a/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/cabinetTable.vue
@@ -39,21 +39,7 @@
           </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'" :class="'nz-el-dropdown-menu-item'">
-                  <delete-button
-                  ref="deleteButton"
-                  :from="'cabinet'"
-                  :forceDeleteShow="true"
-                  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-item v-has="'dc_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -72,12 +58,8 @@
 
 <script>
 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, deleteButton },
   mixins: [table],
   props: {
     loading: Boolean
diff --git a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
index 1993bfbb0..07c5a89b6 100644
--- a/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/chartTmplTable.vue
@@ -65,22 +65,7 @@
           </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]" :class="'nz-el-dropdown-menu-item'">
-                  <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_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><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_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>
@@ -102,12 +87,11 @@
 <script>
 import table from '@/components/common/mixin/table'
 import { chart as chartConstant } from '@/components/common/js/constants'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 export default {
   name: 'chartTmplTable',
   mixins: [table],
-  components: { deleteButton, copy },
+  components: { copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/credentialsTable.vue b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
index 6122526b3..824622d72 100644
--- a/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/credentialsTable.vue
@@ -80,22 +80,7 @@
             <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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'credential_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -114,14 +99,13 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 export default {
   name: 'credentialsTable',
   props: {
     loading: Boolean
   },
-  components: { deleteButton, copy },
+  components: { copy },
   mixins: [table],
   data () {
     return {
diff --git a/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue b/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
index f83ae6f41..774c0e259 100644
--- a/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/dashboardTmplTable.vue
@@ -65,22 +65,7 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
             <el-dropdown-item v-has="'dashboard_temp_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="'dashboard_temp_delete'" :command="['delete', scope.row]" :class="'nz-el-dropdown-menu-item'">
-              <delete-button
-                ref="deleteButton"
-                :from="'dashboardTemp'"
-                :forceDeleteShow="false"
-                :type="'link'"
-                :title="$t('overall.delete')"
-                id="alert-msg-delete"
-                v-has="'dashboard_temp_delete'"
-                :api="api"
-                :single="true"
-                :delete-objs="singleDelete"
-                @before="delFlag=true"
-                >
-              </delete-button>
-              </el-dropdown-item>
+            <el-dropdown-item v-has="'dashboard_temp_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><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="'dashboard_temp_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="'dashboard_temp_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>
@@ -101,12 +86,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 export default {
   name: 'dashboardTmplTable',
   mixins: [table],
-  components: { deleteButton, copy },
+  components: { copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
index c7cf33c80..9c5e19a2b 100644
--- a/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/exprTmplTable.vue
@@ -66,22 +66,7 @@
           </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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'expressionTemplate_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -100,12 +85,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 export default {
   name: 'exprTmplTable',
   mixins: [table],
-  components: { deleteButton, copy },
+  components: { copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/globalizationTable.vue b/nezha-fronted/src/components/common/table/settings/globalizationTable.vue
index 12f86d6ea..9a6b97cbe 100644
--- a/nezha-fronted/src/components/common/table/settings/globalizationTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/globalizationTable.vue
@@ -55,22 +55,8 @@
             <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 :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="'i18n_delete'" :command="['delete', scope.row]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'i18n_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -89,11 +75,9 @@
 
 <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
   },
diff --git a/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue b/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue
index 529a350c0..ab51f1dd5 100644
--- a/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/ipDetailsTable.vue
@@ -65,22 +65,7 @@
             <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]" :class="'nz-el-dropdown-menu-item'">
-                  <delete-button
-                  ref="deleteButton"
-                  :from="'ipDetails'"
-                  :forceDeleteShow="false"
-                  :title="$t('overall.delete')"
-                  v-has="'ipam_delete'"
-                  :type="'link'"
-                  id="account-list-delete"
-                  :api="api"
-                  :single="true"
-                  :delete-objs="singleDelete"
-                  @before="delFlag=true"
-                  ></delete-button>
-              </el-dropdown-item>
+            <el-dropdown-item v-has="'ipam_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -99,13 +84,9 @@
 
 <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
   },
diff --git a/nezha-fronted/src/components/common/table/settings/ipamTable.vue b/nezha-fronted/src/components/common/table/settings/ipamTable.vue
index 785064899..e52119076 100644
--- a/nezha-fronted/src/components/common/table/settings/ipamTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/ipamTable.vue
@@ -71,22 +71,7 @@
           <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]" :class="'nz-el-dropdown-menu-item'">
-                  <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_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true}]"><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_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>
diff --git a/nezha-fronted/src/components/common/table/settings/issueTable.vue b/nezha-fronted/src/components/common/table/settings/issueTable.vue
index 7f3ef14ed..255c70462 100644
--- a/nezha-fronted/src/components/common/table/settings/issueTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/issueTable.vue
@@ -103,19 +103,7 @@
           <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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -135,13 +123,11 @@
 <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,
-    deleteButton
+    copy
   },
 
   props: {
diff --git a/nezha-fronted/src/components/common/table/settings/menuTable.vue b/nezha-fronted/src/components/common/table/settings/menuTable.vue
index df2f8d8e0..9790b6788 100644
--- a/nezha-fronted/src/components/common/table/settings/menuTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/menuTable.vue
@@ -67,19 +67,7 @@
             <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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'monitor_module_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -98,11 +86,9 @@
 
 <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
   },
diff --git a/nezha-fronted/src/components/common/table/settings/mibTable.vue b/nezha-fronted/src/components/common/table/settings/mibTable.vue
index f55304ea6..0f4f5d8bd 100644
--- a/nezha-fronted/src/components/common/table/settings/mibTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/mibTable.vue
@@ -95,22 +95,7 @@
           </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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'snmp_mibFile_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -129,13 +114,12 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 import axios from 'axios'
 export default {
   name: 'mibTable',
   mixins: [table],
-  components: { deleteButton, copy },
+  components: { copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
index 7cc4d126a..f179048c6 100644
--- a/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/recordRuleTable.vue
@@ -116,21 +116,7 @@
           <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, {copyName: '_copy'}]"><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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-if="!scope.row.buildIn" v-has="'record_rule_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -152,13 +138,11 @@ 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,
-    deleteButton
+    copy
   },
   mixins: [table],
   props: {
diff --git a/nezha-fronted/src/components/common/table/settings/roleTable.vue b/nezha-fronted/src/components/common/table/settings/roleTable.vue
index 2748f3988..25c71c771 100644
--- a/nezha-fronted/src/components/common/table/settings/roleTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/roleTable.vue
@@ -68,23 +68,7 @@
           </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)" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'role_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:true, single:true, deleteTitle:'config.roles.roles'}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -103,12 +87,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 export default {
   name: 'roleTable',
   mixins: [table],
-  components: { deleteButton, copy },
+  components: { copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/common/table/settings/userTable.vue b/nezha-fronted/src/components/common/table/settings/userTable.vue
index f7eb26bdd..4ecf0f48b 100644
--- a/nezha-fronted/src/components/common/table/settings/userTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/userTable.vue
@@ -103,23 +103,7 @@
           <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" :class="'nz-el-dropdown-menu-item'">
-                  <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_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true, deleteTitle:'config.user.user'}]"><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_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>
@@ -140,12 +124,11 @@
 
 <script>
 import table from '@/components/common/mixin/table'
-import deleteButton from '@/components/common/deleteButton'
 import copy from '@/components/common/copy'
 export default {
   name: 'userTable',
   mixins: [table],
-  components: { deleteButton, copy },
+  components: { copy },
   props: {
     loading: Boolean
   },
diff --git a/nezha-fronted/src/components/page/config/system/linkTable.vue b/nezha-fronted/src/components/page/config/system/linkTable.vue
index caaf6f172..acfc14011 100644
--- a/nezha-fronted/src/components/page/config/system/linkTable.vue
+++ b/nezha-fronted/src/components/page/config/system/linkTable.vue
@@ -71,21 +71,7 @@
                 <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]">
-                  <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-item v-has="'system_link_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </template>
@@ -107,13 +93,11 @@
 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 {
diff --git a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
index 3b01a2838..9d0c13347 100644
--- a/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
+++ b/nezha-fronted/src/components/page/config/system/notifyMethodTable.vue
@@ -81,21 +81,7 @@
                 <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]" :class="'nz-el-dropdown-menu-item'">
-                  <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-item v-has="'system_notification_delete'" :command="['delete-rel', scope.row, {forceDeleteShow:false, single:true}]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </template>
@@ -116,13 +102,11 @@
 <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 {