feat：NEZ-2154 删除 cofirm 页面重构

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

@@ -0,0 +1,93 @@
+.batch-delete-footer{
+  box-shadow: none !important;
+  height: auto !important;
+  display: flex;
+  justify-content: space-between !important;
+}
+.batch-delete-dialog{
+  transition: all 0.3s;
+  .dialog-header {
+    margin-bottom: 10px;
+    word-wrap: break-word;
+    span{
+      word-break: break-word;
+    }
+  }
+  .nz-icon-jinggao{
+    color: $--color-danger;
+  }
+  .nz-icon-import-failed1{
+    color: $--color-danger;
+  }
+  .nz-icon-import-success1{
+    color: $--color-success;
+  }
+  .el-dialog__body {
+    padding: 0 20px;
+  }
+  .tree-header{
+    background: #F6F6F6;
+    padding: 7px 10px 7px 0px;
+    font-weight: 600;
+    .batch-delete-item-id, .batch-delete-item-name{
+      font-weight: 600;
+    }
+  }
+  .tree-body{
+    //min-height: 160px;
+    //max-height: 220px;
+    height: 160px;
+    overflow-y: auto;
+  }
+  .tree-body-item{
+    display: flex;
+    width: 100%;
+    font-size: 14px;
+    color: $--color-text-primary;
+    font-weight: 400;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    box-sizing: border-box;
+    .nz-icon{
+      vertical-align: middle;
+    }
+    .batch-delete-item-id{
+      margin-left: 28px;
+      margin-right: 28px;
+      width: 100px;
+      transition: all 0.3s;
+    }
+    .batch-delete-item-name{
+      margin-left: 14px;
+      flex: 1;
+      .tree-body-children:nth-of-type(1){
+        margin-top: 10px;
+      }
+      transition: all 0.3s;
+    }
+  }
+  .tree-body-children{
+    padding-left: 25px;
+  }
+  .batch-delete-item-text{
+    display: inline-block;
+    width: calc(100% - 40px);
+    vertical-align: middle;
+  }
+  .el-checkbox-group{
+    font-size: 14px;
+    .el-checkbox__label{
+      display: none;
+    }
+  }
+  .nz-icon-caret-right{
+    display:inline-block;
+    transition: all 0.3s;
+    color: $--border-color-base-focus;
+  }
+  .rotate90 {
+    display:inline-block;
+    transform: rotate(90deg);
+    transition: all 0.3s;
+  }
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -77,6 +77,7 @@
 @import './common/pagination.scss';
 @import './common/searchInput.scss';
 @import './common/timePicker.scss';
+@import './common/deleteButton.scss';
 @import './common/filterSearch/filterSearch.scss';
 @import './common/panel/panelVariables.scss';
 

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

@@ -37,7 +37,17 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" v-has="'ipam_delete'" id="account-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'ipDetails'"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  v-has="'ipam_delete'"
+                  id="account-list-batch-delete"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -26,7 +26,16 @@
             class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export">
           <i class="nz-icon nz-icon-download1"></i>
         </button>
-        <delete-button :clickFunction="openDelMessageBox" :delete-objs="batchDeleteObjs" @after="getAlertList" api="alert/message" v-has="['rule_alerts_delete', 'project_endpoint_alerts_delete', 'asset_alerts_delete']" :id="from+'-sub-batch-delete'"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'alertMessageTab'"
+          :forceDeleteShow="false"
+          :clickFunction="openDelMessageBox"
+          :delete-objs="batchDeleteObjs"
+          @after="getAlertList"
+          api="alert/message"
+          v-has="['rule_alerts_delete', 'project_endpoint_alerts_delete', 'asset_alerts_delete']"
+          :id="from+'-sub-batch-delete'"></delete-button>
       </div>
     </div>
     <alertMessageTable
@@ -511,6 +520,9 @@ export default {
           if (response.code === 200) {
             this.$message({ type: 'success', message: this.$t('tip.deleteSuccess') })
             this.getAlertList()
+          } else if (response.data && response.data.list && response.code !== 200) {
+            this.delFlag = true
+            this.$refs.deleteButton && this.$refs.deleteButton.showProcess(response.data.list)
           } else {
             this.$message.error(response.msg)
           }

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

@@ -55,7 +55,19 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="asset-model-batch-delete" v-has="'dc_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'cabinetTab'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="asset-model-batch-delete"
+                  v-has="'dc_delete'"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                ></delete-button>
               </el-dropdown-item>
             </div>
           </template>
@@ -206,6 +218,9 @@ export default {
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
             self.getTableData()
             bus.$emit('cabinet-tab')
+          } else if (response.data && response.data.list && response.code !== 200) {
+            this.delFlag = true
+            this.$refs.deleteButton && this.$refs.deleteButton.showProcess(response.data.list)
           } else {
             this.$message.error(response.msg)
           }

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

@@ -32,7 +32,15 @@
             </button>
           </template>
         </export-excel>
-        <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="endpoint" v-has="'asset_endpoint_delete'" id="endpoint-tab-batch-delete"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'endpoint'"
+          :forceDeleteShow="false"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          api="endpoint"
+          v-has="'asset_endpoint_delete'"
+          id="endpoint-tab-batch-delete"></delete-button>
       </div>
     </div>
     <!-- 自定义table列 -->

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

@@ -6,6 +6,78 @@
     <div v-if="this.type === 'link'" :id="id" :class="{'nz-btn-disabled' : deleteObjs.length<1}" @click="batchDelete" :title="$t('overall.delete')">
       <span><i class="nz-icon nz-icon-delete" ></i>{{title}}</span>
     </div>
+    <el-dialog
+      ref="batchDeleteDialog"
+      id="batch-delete-dialog"
+      class="batch-delete-dialog"
+      title="Hint"
+      v-if="dialogVisible"
+      :visible.sync="dialogVisible"
+      @close='handleClose'
+      width="460px"
+      :modal-append-to-body="true"
+      :append-to-body="true"
+    >
+      <!--  -->
+      <div class="dialog-header" style="vertical-align:top;"  v-if="prepare">
+        <i class="nz-icon nz-icon-jinggao" style="color:#ff0000;"></i>
+        <span>Are you sure to delete these {{ this.deleteObjs.length }} Pleaces data?</span>
+      </div>
+      <!--  -->
+      <div class="dialog-header" style="vertical-align:top;" v-if="process">
+        <i class="nz-icon nz-icon-import-failed1" style="color:#ff000078;"></i>
+        <span>These Assets cannot be deleted.If you want to continue to delete,please check the "Force delete" action.</span>
+      </div>
+      <!--  -->
+      <div class="dialog-header" style="vertical-align:top;" v-if="finish">
+        <i class="nz-icon nz-icon-import-success1"></i>
+        <span>These Assets delete complete.</span>
+      </div>
+      <div class="batch-delete-tree">
+        <div class="tree-header tree-body-item">
+          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange" v-if="!finish"></el-checkbox>
+          <div class="batch-delete-item-id" v-if="idShow">Id</div>
+          <div class="batch-delete-item-name">{{$t('overall.name')}}</div>
+        </div>
+        <el-checkbox-group v-model="idStr" @change="checkedChange">
+          <div class="tree-body">
+            <div v-for="(item,index) in deleteData" :key = 'index' class="tree-body-item">
+              <el-checkbox :key="item.id" :label="item.id"  v-if="!finish"></el-checkbox>
+              <div class="batch-delete-item-id" v-if="idShow">{{item.id}}</div>
+              <div class="batch-delete-item-name" @click="showChild(item)">
+                <i class="nz-icon nz-icon-caret-right" :class="item.showChildren ? 'rotate90': '' " v-if="item.relates" />
+                <i :class="selectIcon(item.type)"/>
+                <span class="text-ellipsis batch-delete-item-text" :title="item.name">{{item.name}}</span>
+                <el-collapse-transition>
+                  <div v-show="item.showChildren">
+                    <div v-for="(relate,i) in item.relates" :key = 'i' class="tree-body-item tree-body-children" @click="showChild(relate)">
+                      <i class="nz-icon nz-icon-caret-right" :class="relate.showChildren ? 'rotate90': '' " v-if="relate.relates" />
+                      <i :class="selectIcon(relate.type)"/>
+                      <span class="text-ellipsis batch-delete-item-text" :title="relate.name">{{relate.name}}</span>
+                      <div v-for="(cildren,j) in relate.relates" :key = 'j' class="tree-body-item tree-body-children" v-if="relate.showChildren">
+                        <i :class="selectIcon(cildren.type)"/>
+                        <span class="text-ellipsis batch-delete-item-text" :title="cildren.name">{{cildren.name}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </el-collapse-transition>
+              </div>
+            </div>
+          </div>
+        </el-checkbox-group>
+      </div>
+      <!-- 底部按钮 -->
+      <span slot="footer" class="dialog-footer right-box__footer batch-delete-footer" v-if="!finish">
+        <div v-if="forceDeleteShow">
+          <el-checkbox v-model="forceDelete" text-color="black" name="type" :true-label="1" :false-label="0"></el-checkbox>
+          <span class="checkTitle">Force delete</span>
+        </div>
+        <div>
+          <button id="batch-delete-cancel" class="footer__btn footer__btn--light" style="margin-top: 8px;"  type="button" @click="dialogVisible = false">{{$t('tip.no')}}</button>
+          <button id="batch-delete-next" class="footer__btn"  type="button" @click="batchDeleteYes">{{$t('tip.yes')}}</button>
+        </div>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -13,10 +85,30 @@
 import bus from '@/libs/bus'
 export default {
   name: 'deleteButton',
+  data () {
+    return {
+      prepare: true,
+      process: false,
+      finish: false,
+      dialogVisible: false,
+      idShow: true,
+      idStr: [],
+      deleteData: [],
+      forceDelete: 0,
+      batchDeleteObjs: [],
+      checkAll: false,
+      isIndeterminate: false
+    }
+  },
   props: {
+    forceDeleteShow: {
+      type: Boolean,
+      default: false
+    },
     filterFunction: Function,
     deleteObjs: Array,
     api: String,
+    from: String,
     clickFunction: Function,
     id: String,
     type: {
@@ -29,36 +121,102 @@ export default {
   },
   methods: {
     batchDelete: function () {
+      this.$emit('before')
       if (this.deleteObjs.length < 1) return
       if (this.clickFunction) {
         this.clickFunction()
         return
       }
-      this.$confirm(this.$t('tip.confirmBatchDelete', [this.deleteObjs.length]), {
-        confirmButtonText: this.$t('tip.yes'),
-        cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$emit('before')
-        const params = this.filterParam()
-        this.$delete(this.api + params).then(response => {
-          if (response.code === 200) {
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            this.$emit('after')
-            bus.$emit('delTableRow', this.deleteObjs.map(item => item.id))
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
+      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')
+      }
+    },
+    batchDeleteYes () {
+      if (!this.forceDeleteShow) {
+        this.forceDelete = 1
+      }
+      this.$delete(this.api + `?ids=${this.idStr.join(',')}&force=${this.forceDelete}`).then(res => {
+        this.idShow = false
+        this.prepare = false
+        this.process = true
+        this.finish = false
+        if (res.data && res.data.list && res.code !== 200) {
+          this.deleteData = res.data.list.map(item => {
+            item.showChildren = true
+            item.relates && item.relates.forEach(relate => {
+              relate.showChildren = true
+            })
+            return item
+          })
+        } else if (res.code === 200) {
+          this.idShow = false
+          this.prepare = false
+          this.process = false
+          this.finish = true
+          this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+          // this.$emit('after')
+        } else {
+          this.$message.error(res.msg)
+        }
       })
     },
-    filterParam: function () {
-      let filterFunction = this.filterFunction
-      if (!filterFunction) {
-        filterFunction = (arr) => { return '?ids=' + arr.map(t => t.id).join(',') }
+    showProcess (arr) {
+      this.idShow = false
+      this.prepare = false
+      this.process = true
+      this.finish = false
+      this.deleteData = arr.map(item => {
+        item.showChildren = true
+        item.relates && item.relates.forEach(relate => {
+          relate.showChildren = true
+        })
+        return item
+      })
+      this.idStr = this.deleteData.map(item => item.id)
+      this.checkAll = true
+      this.dialogVisible = true
+    },
+    checkAllChange (value) {
+      const allId = this.deleteData.map(item => {
+        return item.id
+      })
+      this.idStr = value ? allId : []
+      this.isIndeterminate = false
+    },
+    checkedChange (value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount > 0
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.deleteData.length
+    },
+    showChild (item, e) {
+      e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true
+      item.showChildren = !item.showChildren
+    },
+    selectIcon (type) {
+      switch (type) {
+        case 'asset' : return 'nz-icon monitorColor nz-icon-overview-project'
+        case 'datacenter' : return 'nz-icon monitorColor nz-icon-Datacenter2'
+        case 'project' : return 'nz-icon monitorColor nz-icon-project'
+        case 'module' : return 'nz-icon monitorColor nz-icon-overview-module'
+        case 'endpoint' : return 'nz-icon monitorColor nz-icon-overview-endpoint'
+        case 'alertrule' : return 'nz-icon monitorColor nz-icon-Alertrule'
       }
-
-      return filterFunction(this.deleteObjs)
+      return 'nz-icon monitorColor nz-icon-module5'
     }
   }
 }

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

@@ -14,14 +14,6 @@ export default {
   },
   data () {
     return {
-      dialogFooterShow: true,
-      idShow: true,
-      showOne: true,
-      showTwo: false,
-      showThree: false,
-      isDisabled: true,
-      ForceDeleteShow: false,
-      dialogVisible: false,
       fromRoute: fromRoute,
       // 侧滑
       rightBox: {
@@ -50,10 +42,7 @@ export default {
       delFlag: false,
       fromBottom: false,
       operationWidth: '165', // 操作列宽
-      searchCheckBox: {},
-      dialogData: [],
-      multipleSelection: [],
-      idStr: []
+      searchCheckBox: {}
     }
   },
   methods: {
@@ -83,30 +72,8 @@ export default {
     isBuildIn (row) {
       return (row.buildIn && row.buildIn == 1) || (row.builtIn && row.builtIn == 1)
     },
-    batchDeleteselectionChange (obj) {
-      this.batchDeleteObjs = obj
-      const ids = []
-      this.batchDeleteObjs.forEach(function (value, index, obj) {
-        ids.push(obj[index].id)
-      })
-      this.idStr = ids.toString()
-      console.log(this.idStr, 1)
-    },
     selectionChange (objs) {
       this.batchDeleteObjs = objs
-      if (this.batchDeleteObjs.length > 0) {
-        this.isDisabled = false
-        console.log('批量删除按钮可用')
-      } else {
-        this.isDisabled = true
-        console.log('批量删除按钮不可用')
-      }
-      // const ids = []
-      // this.batchDeleteObjs.forEach(function (value, index, obj) {
-      //   ids.push(obj[index].id)
-      // })
-      // this.idStr = ids.toString()
-      // console.log(this.idStr, 1)
     },
     getTableData (params) {
       if (params && Object.keys(params).length > 0) {
@@ -182,94 +149,34 @@ export default {
         }
       })
     },
-    // 批量删除
-    BatchDelete () {
-      this.dialogVisible = true
-      this.$nextTick(() => {
-        // console.log(this.$refs.batchDeleteData, 2)
-        console.log(this.batchDeleteObjs, 3)
-        this.batchDeleteObjs.forEach((row) => {
-          this.$refs.batchDeleteData.toggleRowSelection(row, true)
-        })
-      })
-    },
-    // 批量删除-确定按钮
-    BatchDeleteYes (obj) {
-      if (this.ForceDeleteShow) {
-        this.showThree = true
-        this.showOne = false
-        this.showTwo = false
-        this.dialogFooterShow = false
-        // this.$delete(this.url + '?ids=' + this.idStr).then(response => {
-        //   if (response.code === 200) {
-        //     this.showThree = true
-        //     this.showOne = false
-        //     this.showTwo = false
-        //     this.dialogFooterShow = false
-        //     this.batchDeleteObjs = []
-        //     this.idStr = []
-        //     this.getTableData()
-        //   } else {
-        //     this.$message.error(response.msg)
-        //   }
-        // })
-      } else {
-        this.showThree = false
-        this.showOne = false
-        this.showTwo = true
-        this.dialogFooterShow = true
-      }
-    },
-    BatchDeleteToggleSelection (val) {
-      this.multipleSelection = val
-    },
-    // 强制删除按钮
-    ForceDeleteFun () {
-      this.ForceDeleteShow = true
-    },
-    // Dialog 关闭的回调
-    handleClose (row) {
-      // this.dialogVisible = false
-      // this.showOne = true
-      // this.showTwo = false
-      // this.showThree = false
-      // this.dialogFooterShow = true
-      // this.ForceDeleteShow = false
-      if (this.showThree) {
-        this.$delete(this.url + '?ids=' + this.idStr).then(response => {
-          if (response.code === 200) {
-            this.showThree = false
-            this.showOne = true
-            this.showTwo = false
-            this.dialogFooterShow = true
-            this.ForceDeleteShow = false
-            this.batchDeleteObjs = []
-            this.idStr = []
-            this.getTableData()
-            bus.$emit('delTableRow', [row.id])
-          } else {
-            this.$message.error(response.msg)
-          }
-        })
-      }
-    },
     del (row) {
       const self = this
       this.$confirm(this.$t('tip.confirmDelete'), {
         confirmButtonText: this.$t('tip.yes'),
         cancelButtonText: this.$t('tip.no'),
-        type: 'warning'
-      }).then(() => {
-        this.$delete(this.url + '?ids=' + row.id).then(response => {
-          if (response.code === 200) {
-            self.delFlag = true
-            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
-            self.getTableData()
-            bus.$emit('delTableRow', [row.id])
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            this.$delete(this.url + '?ids=' + row.id).then(response => {
+              if (response.code === 200) {
+                self.delFlag = true
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+                self.getTableData()
+                bus.$emit('delTableRow', [row.id])
+              } else if (response.data && response.data.list && response.code !== 200) {
+                self.delFlag = true
+                this.$refs.deleteButton && this.$refs.deleteButton.showProcess(response.data.list)
+              } else {
+                this.$message.error(response.msg)
+              }
+              done()
+            })
           } else {
-            this.$message.error(response.msg)
+            done()
           }
-        })
+        }
+      }).then(() => {
+
       })
     },
     newObject () {
@@ -430,20 +337,6 @@ export default {
     }
   },
   watch: {
-    batchDeleteObjs: {
-      deep: true,
-      handler (n) {
-        if (n.length === 0 && this.pageObj.pageNo > 1) {
-          this.pageNo(this.pageObj.pageNo - 1)
-        }
-
-        /* if (!this.delFlag) { // 不是删除时回到顶部
-          this.$refs.dataTable.bodyWrapper.scrollTop = 0
-        } else {
-          this.delFlag = false
-        } */
-      }
-    },
     tableData: {
       deep: true,
       handler (n) {
@@ -1016,6 +909,21 @@ export default {
           },
           jsonKey: 'val'
         },
+        state: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'state',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'ipamState',
+            name: 'State',
+            readonly: true,
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
         name: {
           target: this.searchLabel,
           isSearchInput: true,
@@ -1214,13 +1122,189 @@ export default {
           jsonKey: 'val'
         }
       }
+    } else if (path === 'issue') {
+      searchKeys = {
+        // key: path 键
+        // value: vue set 参数
+        pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
+        pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
+        orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
+        ids: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'ids',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'ids',
+            name: 'ID',
+            type: 'input',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        name: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'name',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            id: 'name',
+            label: 'name',
+            name: 'Name',
+            type: 'input',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        type: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'type',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'issueType',
+            name: 'Type',
+            readonly: true,
+            type: 'issueType',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        state: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'state',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'issueState',
+            name: 'State',
+            readonly: true,
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        priority: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'priority',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'priority',
+            name: 'Priority',
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        assetsId: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'assetsId',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'assetsId',
+            name: 'Assets id',
+            type: 'input',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        assetName: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'assetName',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'assetName',
+            name: 'Assets name',
+            type: 'input',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        cid: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'cid',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'cid',
+            name: 'Create user',
+            type: 'issue',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        uid: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'uid',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'uid',
+            name: 'Update user',
+            type: 'issue',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        rid: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'rid',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'rid',
+            name: 'Reporter',
+            type: 'issue',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        aid: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'aid',
+          type: 'string',
+          defaultJson: {
+            disabled: false,
+            label: 'aid',
+            name: 'Assignee',
+            type: 'issue',
+            val: ''
+          },
+          jsonKey: 'val'
+        },
+        starrd: {
+          target: this.searchLabel,
+          isSearchInput: true,
+          propertyName: 'starrd',
+          type: 'Number',
+          defaultJson: {
+            disabled: false,
+            label: 'starrd',
+            name: 'Starrd',
+            type: 'select',
+            val: ''
+          },
+          jsonKey: 'val'
+        }
+      }
     }
-
     this.initQueryFromPath(searchKeys)
   },
   mounted () {
-    this.$nextTick((row) => {
-    })
     const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
     if (pageSize && pageSize !== 'undefined') {
       this.pageObj.pageSize = pageSize

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

@@ -36,7 +36,20 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button id="alert-msg-batch-delete" v-has="'alertMessage_expired'" :api="url" :clickFunction="batchDel" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" :title="$t('overall.batchDel')" :type="'link'"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'alertMessage'"
+                  :forceDeleteShow="false"
+                  id="alert-msg-batch-delete"
+                  v-has="'alertMessage_expired'"
+                  :api="url"
+                  :clickFunction="batchDel"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                  :title="$t('overall.batchDel')"
+                  :type="'link'"
+                ></delete-button>
               </el-dropdown-item>
               <el-dropdown-item :disabled="batchDeleteObjs.length==0">
                 <div id="alert-msg-batch-ack" v-has="'alertMessage_expired'" @click="batchAck"><i class="nz-icon nz-icon-queren"></i>{{$t('overall.batchAck')}}</div>
@@ -628,6 +641,9 @@ export default {
             this.delFlag = true
             this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
             this.getTableData()
+          } else if (response.data && response.data.list && response.code !== 200) {
+            this.delFlag = true
+            this.$refs.deleteButton && this.$refs.deleteButton.showProcess(response.data.list)
           } else {
             this.$message.error(response.msg)
           }

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

@@ -100,7 +100,19 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="alert-rule-batch-delete" v-has="'alertRule_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'alertRule'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="alert-rule-batch-delete"
+                  v-has="'alertRule_delete'"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                ></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -21,6 +21,9 @@
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
         <delete-button
+          ref="deleteButton"
+          :from="'alertSilence'"
+          :forceDeleteShow="false"
           id="role-list-batch-delete"
           v-has="'alertSilence_expire'"
           :api="url"

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

@@ -114,12 +114,19 @@
               <el-dropdown-item>
                 <div id="asset-batch-asset" v-has="'asset_edit'" @click="batchEdit"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchEdit')}}</div>
               </el-dropdown-item>
-                  <!-- 批量删除 -->
               <el-dropdown-item>
-                <div id="asset-list-batch-delete" v-has="'asset_delete'" >
-                  <el-button type="text" :disabled="isDisabled" @click="BatchDelete"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchDel')}}</el-button>
-                </div>
-                <!-- <delete-button :type="'link'" :title="$t('overall.batchDel')" id="asset-list-batch-delete" v-has="'asset_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" @click="deletesBtn"></delete-button> -->
+                <delete-button
+                  ref="deleteButton"
+                  :from="'asset'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="asset-list-batch-delete"
+                  v-has="'asset_delete'"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"></delete-button>
               </el-dropdown-item>
             </div>
           </template>
@@ -180,82 +187,6 @@
     </transition>
     <transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
     </transition>
-
-    <template>
-         <!-- 批量删除 -->
-      <el-dialog
-        ref="dialogData"
-        id="dialogID"
-        title="Hint"
-        v-if="dialogVisible"
-        :visible.sync="dialogVisible"
-        @close='handleClose'
-        width="20%"
-        :modal-append-to-body="true"
-        :append-to-body="true"
-        >
-                  <!--  -->
-                <div class="dialog-header1" style="vertical-align:top;"  v-if="showOne">
-                <i class="nz-icon nz-icon-jinggao" style="color:#ff000078;"></i>
-                <span>Are you sure to delete these {{ this.batchDeleteObjs.length }} Pleaces data?</span>
-                </div>
-                <!--  -->
-                <div class="dialog-header2" style="vertical-align:top;" v-if="showTwo">
-                <i class="nz-icon nz-icon-import-failed1" style="color:#ff000078;"></i>
-                <span>These Assets cannot be deleted.If you want to continue to delete,please check the "Force delete" action.</span>
-                </div>
-                <!--  -->
-                 <div class="dialog-header3" style="vertical-align:top;" v-if="showThree">
-                <i class="nz-icon nz-icon-import-success1" style="color:rgb(20 191 25 / 97%);"></i>
-                <span>These Assets delete complete.</span>
-                </div>
-                      <el-table
-                      class="branchTable"
-                        ref="batchDeleteData"
-                        :data="batchDeleteObjs"
-                        tooltip-effect="dark"
-                        style="width: 100%"
-                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-                        :row-key="(row) => {return row.id}"
-                        @selection-change="batchDeleteselectionChange"
-                        @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
-                        @topology="topology"
-                        @row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}"
-                        >
-                        <el-table-column
-                          :resizable="false"
-                          type="selection"
-                          :reserve-selection="true"
-                          width="55">
-                        </el-table-column>
-                        <el-table-column
-                          v-if="idShow"
-                          label="ID"
-                          width="100"
-                          >
-                          <template slot-scope="scope">{{ scope.row.id }}</template>
-                        </el-table-column>
-                        <el-table-column
-                          label="name"
-                          width="150">
-                          <template slot-scope="scope"
-                          >
-                           <i class="nz-icon nz-icon-overview-project monitorColor"></i>
-                          <!-- <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> -->
-                          {{ scope.row.name }}</template>
-                        </el-table-column>
-                      </el-table>
-                  <!-- 底部按钮 -->
-                <span slot="footer" class="dialog-footer" v-if="dialogFooterShow">
-                  <div class="footerBox1">
-                    <el-checkbox v-model="ForceDeleteShow" text-color="black" @change="this.ForceDeleteShow=!this.ForceDeleteShow" name="type"></el-checkbox>
-                  <span class="checkTitle">Force delete</span>
-                  </div>
-                  <el-button @click="dialogVisible = false">No</el-button>
-                  <el-button type="primary" @click="BatchDeleteYes">Yes</el-button>
-                </span>
-      </el-dialog>
-    </template>
   </div>
 </template>
 
@@ -1029,42 +960,4 @@ export default {
   /deep/ .nz-table-list{
     flex: 1;
   }
- /* del 样式 */
- /* .theme-light  #dialogID .el-dialog .el-dialog__title {
-    font-size: 12px;
-} */
-.el-dialog__footer {
-  position: relative;
-}
-.el-dialog__footer .dialog-footer .el-checkbox{
-  position: absolute;
-  bottom: 30px;
-  left: 20px;
-
-}
-.checkTitle{
-  position: absolute;
-  bottom: 30px;
-  left: 40px;
-  color: #878181;
-}
-.footerBox1{
-  line-height: initial;
-}
-.theme-light .el-button.is-disabled, .theme-light .el-button.is-disabled:hover, .theme-light .el-button.is-disabled:focus{
-  color: #C0C4CC !important;
-
-}
-.theme-light .el-button--text, #asset-list-batch-delete, .theme-light .el-button--text:focus, .theme-light .el-button--text:hover, .theme-light .el-cascader-node.in-active-path, .theme-light .el-cascader-node.is-active, .theme-light .el-cascader-node.is-selectable.in-checked-path, .theme-light .el-select-dropdown.is-multiple .el-select-dropdown__item.selected, .theme-light .el-select-dropdown__item.selected{
- color: #666 !important;
-}
-.theme-light .el-button--text:hover{
- color: #FA901C !important;
-}
-.theme-light .el-table{
-  width: 100% !important;
-}
-.theme-light .el-table thead .el-table__row{
-   width: 100% !important;
-}
 </style>

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

@@ -17,7 +17,17 @@
         <button id="load-agent" class="top-tool-btn margin-r-10" type="button" @click="toDownloadAgent" v-has="'agent_edit'" :title="$t('overall.download')">
           <i class="nz-icon-download nz-icon"></i>
         </button>
-        <delete-button id="promserver-list-batch-delete" v-has="'agent_delete'" :delete-objs="batchDeleteObjs" api="agent" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'agent'"
+          :forceDeleteShow="true"
+          id="promserver-list-batch-delete"
+          v-has="'agent_delete'"
+          :delete-objs="batchDeleteObjs"
+          api="agent"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <agent-table

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

@@ -34,8 +34,16 @@
                 type="button" @click="add">
           <i class="nz-icon nz-icon-create-square"></i>
         </button>
-        <delete-button :delete-objs="batchDeleteObjs" @after="getTableData"
-                       id="meta-msg-batch-delete" v-has="'asset_label_delete'" :api="url"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'assetMeta'"
+          :forceDeleteShow="false"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          id="meta-msg-batch-delete"
+          v-has="'asset_label_delete'"
+          :api="url"
+        ></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <asset-meta-table

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

@@ -15,7 +15,17 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="asset-state-list-batch-delete" v-has="'assetState_delete'" :delete-objs="batchDeleteObjs" api="/asset/stateConf" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'assetState'"
+          :forceDeleteShow="false"
+          id="asset-state-list-batch-delete"
+          v-has="'assetState_delete'"
+          :delete-objs="batchDeleteObjs"
+          api="/asset/stateConf"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <el-table

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

@@ -14,7 +14,17 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="account-list-batch-delete" v-has="'user_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'assetType'"
+          :forceDeleteShow="false"
+          id="account-list-batch-delete"
+          v-has="'user_delete'"
+          :api="url"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot="slotProps">
         <asset-type-table

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

@@ -13,7 +13,17 @@
         <button id="mib-add" v-has="'credential_add'" :title="$t('overall.createdCredentials')" class="top-tool-btn margin-r-10" type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="mib-list-batch-delete" v-has="'credential_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'credentials'"
+          :forceDeleteShow="false"
+          id="mib-list-batch-delete"
+          v-has="'credential_delete'"
+          :api="url"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <credentials-table

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

@@ -106,7 +106,19 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'dc_delete'" :delete-objs="batchDeleteObjs" api="dc" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'datacenter'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="account-list-batch-delete"
+                  v-has="'dc_delete'"
+                  :delete-objs="batchDeleteObjs"
+                  api="dc"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                ></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -32,7 +32,18 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" v-has="'ipam_delete'" id="account-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'ipam'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  v-has="'ipam_delete'"
+                  id="account-list-batch-delete"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -12,7 +12,15 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="menus-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'menus'"
+          :forceDeleteShow="false"
+          id="menus-list-batch-delete"
+          :api="url" :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot="slotProps">
         <menu-table

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

@@ -13,7 +13,17 @@
         <button id="mib-add" v-has="'snmp_mibFile_add'" :title="$t('overall.createMib')" class="top-tool-btn margin-r-10" type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="mib-list-batch-delete" v-has="'snmp_mibFile_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'mib'"
+          :forceDeleteShow="false"
+          id="mib-list-batch-delete"
+          v-has="'snmp_mibFile_delete'"
+          :api="url"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <mib-table

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

@@ -32,7 +32,19 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'model_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'model'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="account-list-batch-delete"
+                  v-has="'model_delete'"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                ></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -14,7 +14,17 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="role-list-batch-delete" v-has="'role_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'roles'"
+          :forceDeleteShow="true"
+          id="role-list-batch-delete"
+          v-has="'role_delete'"
+          :api="url"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot:default="slotProps">
         <role-table

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

@@ -36,8 +36,17 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" :delete-objs="batchDeleteObjs" @after="getTableData"
-                               id="alert-msg-batch-delete" v-has="'expressionTemplate_delete'" :api="url"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'chartTemp'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  id="alert-msg-batch-delete"
+                  v-has="'expressionTemplate_delete'"
+                  :api="url"></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -29,7 +29,18 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" :delete-objs="batchDeleteObjs" @after="getTableData" id="alert-msg-batch-delete" v-has="'expressionTemplate_delete'" :api="url"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'exprTemp'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  id="alert-msg-batch-delete"
+                  v-has="'expressionTemplate_delete'"
+                  :api="url"
+                ></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -68,7 +68,16 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="account-list-batch-delete" v-has="'user_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'user'"
+          :forceDeleteShow="false"
+          id="account-list-batch-delete"
+          v-has="'user_delete'"
+          :api="url" :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot="slotProps">
         <user-table

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

@@ -112,7 +112,19 @@
                 <div id="asset-batch-asset" v-has="'asset_edit'" @click="batchEdit"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchEdit')}}</div>
               </el-dropdown-item>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_endpoint_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'endpoint'"
+                  :forceDeleteShow="false"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="account-list-batch-delete"
+                  v-has="'monitor_endpoint_delete'"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                ></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -102,7 +102,19 @@
           <template v-slot:before>
             <div>
               <el-dropdown-item>
-                <delete-button :type="'link'" :title="$t('overall.batchDel')" id="account-list-batch-delete" v-has="'monitor_module_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+                <delete-button
+                  ref="deleteButton"
+                  :from="'module'"
+                  :forceDeleteShow="true"
+                  :type="'link'"
+                  :title="$t('overall.batchDel')"
+                  id="account-list-batch-delete"
+                  v-has="'monitor_module_delete'"
+                  :api="url"
+                  :delete-objs="batchDeleteObjs"
+                  @after="getTableData"
+                  @before="delFlag=true"
+                ></delete-button>
               </el-dropdown-item>
             </div>
           </template>

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

@@ -15,7 +15,17 @@
                 type="button" @click="add">
           <i class="nz-icon-create-square nz-icon"></i>
         </button>
-        <delete-button id="account-list-batch-delete" v-has="'project_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
+        <delete-button
+          ref="deleteButton"
+          :from="'project'"
+          :forceDeleteShow="true"
+          id="account-list-batch-delete"
+          v-has="'project_delete'"
+          :api="url"
+          :delete-objs="batchDeleteObjs"
+          @after="getTableData"
+          @before="delFlag=true"
+        ></delete-button>
       </template>
       <template v-slot="slotProps">
         <project-table