diff --git a/src/views/ops/TaskDetail/TaskDetail.vue b/src/views/ops/TaskDetail/TaskDetail.vue
index b39b84ce7..c60d2d8c6 100644
--- a/src/views/ops/TaskDetail/TaskDetail.vue
+++ b/src/views/ops/TaskDetail/TaskDetail.vue
@@ -46,13 +46,13 @@ export default {
   },
   computed: {
     cardTitle() {
-      return this.object.name
+      return this.object.display_name
     },
     detailCardItems() {
       return [
         {
           key: this.$t('common.Name'),
-          value: this.object.name
+          value: this.object.display_name
         },
         {
           key: this.$t('common.dateCreated'),
diff --git a/src/views/ops/TaskDetail/index.vue b/src/views/ops/TaskDetail/index.vue
index 8d80537de..54d3d1eb7 100644
--- a/src/views/ops/TaskDetail/index.vue
+++ b/src/views/ops/TaskDetail/index.vue
@@ -25,6 +25,9 @@ export default {
     return {
       TaskDetail: {},
       config: {
+        getTitle(row) {
+          return row['display_name']
+        },
         activeMenu: 'TaskDetail',
         submenu: [
           {
diff --git a/src/views/ops/TaskList.vue b/src/views/ops/TaskList.vue
index 34019782b..53fc83962 100644
--- a/src/views/ops/TaskList.vue
+++ b/src/views/ops/TaskList.vue
@@ -6,6 +6,11 @@
 import { timeOffset, toSafeLocalDateStr } from '@/utils/common'
 import { GenericListPage } from '@/layout/components'
 import { openTaskPage } from '@/utils/jms'
+const performDelete = function({ row }) {
+  const id = row.id
+  const url = `${this.url}${id}/`
+  return this.$axios.delete(url)
+}
 
 export default {
   components: {
@@ -83,6 +88,27 @@ export default {
               hasUpdate: false,
               hasClone: false,
               canDelete: this.$hasPerm('ops.delete_task'),
+              onDelete: function({ row, col, cellValue, reload }) {
+                const msg = this.$t('common.deleteWarningMsg') + ` "${row.display_name || row.name}" ` + '?'
+                const title = this.$t('common.Info')
+                this.$alert(msg, title, {
+                  type: 'warning',
+                  confirmButtonClass: 'el-button--danger',
+                  showCancelButton: true,
+                  beforeClose: async(action, instance, done) => {
+                    if (action !== 'confirm') return done()
+                    instance.confirmButtonLoading = true
+                    try {
+                      await performDelete.bind(this)({ row: row, col: col })
+                      done()
+                      reload()
+                      this.$message.success(this.$t('common.deleteSuccessMsg'))
+                    } finally {
+                      instance.confirmButtonLoading = false
+                    }
+                  }
+                })
+              },
               extraActions: [
                 {
                   name: 'run',