diff --git a/src/views/ops/Job/JobDetail/JobDetail.vue b/src/views/ops/Job/JobDetail/JobDetail.vue
index dd15003b2..391139338 100644
--- a/src/views/ops/Job/JobDetail/JobDetail.vue
+++ b/src/views/ops/Job/JobDetail/JobDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <TwoCol>
     <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
-    <template #right>
+    <template>
       <IBox :title="$tc('Variable')">
         <Variable
           :value.sync="object.variable"
diff --git a/src/views/ops/Job/JobUpdateCreate.vue b/src/views/ops/Job/JobUpdateCreate.vue
index 969eef2a7..9c31258ae 100644
--- a/src/views/ops/Job/JobUpdateCreate.vue
+++ b/src/views/ops/Job/JobUpdateCreate.vue
@@ -233,37 +233,33 @@ export default {
     }
   },
   mounted() {
-    if (this.$route.query && this.$route.query.type) {
-      this.initial.type = 'adhoc'
-      switch (this.$route.query.type) {
-        case 'adhoc':
-          this.initial.type = 'adhoc'
-          if (this.$route.query.id) {
-            this.$axios.get(`/api/v1/ops/adhocs/${this.$route.query.id}`).then((data) => {
-              this.initial.module = data.module
-              this.initial.args = data.args
-              this.initial.instant = true
-              this.initial.runAfterSave = true
-              this.instantTask = true
-              this.createSuccessNextRoute = { name: 'Adhoc' }
-              this.ready = true
-            })
-          } else {
+    const type = this.$route.query['_type']
+    switch (type) {
+      case 'adhoc':
+        this.initial.type = 'adhoc'
+        if (this.$route.query.id) {
+          this.$axios.get(`/api/v1/ops/adhocs/${this.$route.query.id}`).then((data) => {
+            this.initial.module = data.module
+            this.initial.args = data.args
+            this.initial.instant = true
+            this.initial.runAfterSave = true
+            this.instantTask = true
+            this.createSuccessNextRoute = { name: 'Adhoc' }
             this.ready = true
-          }
-          break
-        case 'playbook':
-          this.initial.type = 'playbook'
-          if (this.$route.query.id) {
-            this.initial.playbook = this.$route.query.id
-            this.ready = true
-          } else {
-            this.ready = true
-          }
-          break
-      }
-    } else {
-      this.ready = true
+          })
+        } else {
+          this.ready = true
+        }
+        break
+      case 'playbook':
+        this.initial.type = 'playbook'
+        if (this.$route.query.id) {
+          this.initial.playbook = this.$route.query.id
+          this.ready = true
+        } else {
+          this.ready = true
+        }
+        break
     }
   },
   methods: {
diff --git a/src/views/ops/Job/components/BaseJob.vue b/src/views/ops/Job/components/BaseJob.vue
index ab6504e4d..092efd7f4 100644
--- a/src/views/ops/Job/components/BaseJob.vue
+++ b/src/views/ops/Job/components/BaseJob.vue
@@ -1,6 +1,12 @@
 <template>
   <div>
-    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <GenericListTable
+      ref="ListTable"
+      :header-actions="headerActions"
+      :create-drawer="createDrawer"
+      :detail-drawer="detailDrawer"
+      :table-config="tableConfig"
+    />
     <JobRunDialog v-if="showJobRunDialog" :item="item" :visible.sync="showJobRunDialog" @submit="runJob" />
     <SetVariableDialog
       v-if="showVariableDialog"
@@ -14,7 +20,7 @@
 
 <script>
 import JobRunDialog from '@/views/ops/Job/JobRunDialog'
-import GenericListTable from '@/layout/components/GenericListTable'
+import GenericListTable from '@/components/Table/DrawerListTable'
 import SetVariableDialog from '@/views/ops/Template/components/SetVariableDialog.vue'
 import { openTaskPage } from '@/utils/jms'
 import { ActionsFormatter, DateFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
@@ -32,7 +38,10 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
+      createDrawer: () => import('@/views/ops/Job/JobUpdateCreate.vue'),
+      detailDrawer: () => import('@/views/ops/Job/JobDetail/index.vue'),
       item: {},
       tableConfig: {
         url: `/api/v1/ops/jobs/?type=${this.type}`,
@@ -95,6 +104,12 @@ export default {
               hasUpdate: true,
               canUpdate: this.$hasPerm('ops.change_job') && !this.$store.getters.currentOrgIsRoot,
               updateRoute: 'JobUpdate',
+              onUpdate: ({ row, col }) => {
+                vm.$router.push({
+                  query: { _type: this.type }
+                })
+                vm.$refs.ListTable.onUpdate({ row, col })
+              },
               hasDelete: true,
               canDelete: this.$hasPerm('ops.delete_job'),
               hasClone: false,
@@ -125,13 +140,11 @@ export default {
         }
       },
       headerActions: {
-        createRoute: () => {
-          return {
-            name: 'JobCreate',
-            query: {
-              type: this.type
-            }
-          }
+        onCreate: () => {
+          vm.$router.push({
+            query: { _type: this.type }
+          })
+          vm.$refs.ListTable.onCreate()
         },
         hasRefresh: true,
         hasExport: false,