From 1683e2a96389169d21216597d31dcd492d67c663 Mon Sep 17 00:00:00 2001
From: jym503558564 <503558564@qq.com>
Date: Thu, 14 May 2020 11:21:00 +0800
Subject: [PATCH] =?UTF-8?q?[Update]=20=E6=8E=88=E6=9D=83=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=B7=BB=E5=8A=A0=E6=88=96=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=85=B3=E7=B3=BB=E6=97=B6reload=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../formatters/DeleteActionFormatter.vue      |  2 +-
 .../AssetPermissionCreateUpdate.vue           |  8 ++-
 .../AssetPermissionAsset.vue                  | 66 +++++++++++--------
 .../AssetPermissionUser.vue                   | 55 ++++++++--------
 .../AssetRelationCard/index.vue               |  5 +-
 .../AssetPermissionDetail/index.vue           |  4 +-
 .../DatabaseAppPermissionDatabaseApp.vue      | 36 +++++++---
 .../DatabaseAppPermissionUser.vue             | 54 +++++++--------
 .../DatabaseAppPermissionDetail/index.vue     |  4 +-
 .../RemoteAppPermissionRemoteApp.vue          | 36 +++++++---
 .../RemoteAppPermissionUser.vue               | 54 +++++++--------
 .../RemoteAppPermissionDetail/index.vue       |  4 +-
 12 files changed, 195 insertions(+), 133 deletions(-)

diff --git a/src/components/ListTable/formatters/DeleteActionFormatter.vue b/src/components/ListTable/formatters/DeleteActionFormatter.vue
index cbc5c310c..40b5c28a2 100644
--- a/src/components/ListTable/formatters/DeleteActionFormatter.vue
+++ b/src/components/ListTable/formatters/DeleteActionFormatter.vue
@@ -20,7 +20,7 @@ export default {
       const url = col.deleteUrl + cellValue
       this.$axios.delete(url).then(res => {
         this.$message.success(this.$t('common.deleteSuccessMsg'))
-        reload()
+        window.location.reload()
       }).catch(error => {
         this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
       })
diff --git a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
index 00e99e1a1..2ddcb8d97 100644
--- a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
@@ -21,7 +21,7 @@ export default {
         [this.$t('perms.' + 'Basic'), ['name']],
         [this.$t('perms.' + 'User'), ['users', 'user_groups']],
         [this.$t('perms.' + 'Asset'), ['assets', 'nodes', 'system_users']],
-        [this.$t('common.table.Actions'), ['actions']],
+        [this.$t('common.action'), ['actions']],
         [this.$t('common.Other'), ['is_active', 'date_expired', 'comment']]
       ],
       url: '/api/v1/perms/asset-permissions/',
@@ -99,6 +99,12 @@ export default {
             { label: 'download_file', value: this.$t('perms.downloadFile') }
           ]
         },
+        date_expired: {
+          label: this.$t('common.dateExpired')
+        },
+        comment: {
+          label: this.$t('common.Comment')
+        },
         is_active: {
           type: 'checkbox'
         }
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
index 0308fbcdb..dc1eb6503 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <ListTable ref="listTable" v-loading="loading" :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
       <AssetRelationCard type="primary" v-bind="assetReletionConfig" />
@@ -32,7 +32,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
       tableConfig: {
         url: `/api/v1/perms/asset-permissions/${this.object.id}/assets/all/`,
         columns: [
@@ -80,14 +79,7 @@ export default {
               asset: v
             }
           })
-          this.loading = true
-          const that = this
-          const res = this.$axios.post(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.post(relationUrl, data)
         }
       },
       nodeReletionConfig: {
@@ -114,27 +106,31 @@ export default {
               node: v.value
             }
           })
-          this.loading = true
-          const that = this
-          const res = this.$axios.post(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.post(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         },
         performDelete: (item) => {
           const itemId = item.value
           const objectId = this.object.id
           const relationUrl = `/api/v1/perms/asset-permissions-nodes-relations/?assetpermission=${objectId}&node=${itemId}`
-          this.loading = true
-          const that = this
-          const res = this.$axios.delete(relationUrl)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.delete(relationUrl)
+        },
+        onDeleteSuccess: (obj, that) => {
+          // 从hasObjects中移除这个object
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          // 从disabled values中移除这个value
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          window.location.reload()
         }
       },
       systemUserReletionConfig: {
@@ -163,11 +159,29 @@ export default {
           })
           return this.$axios.post(relationUrl, data)
         },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
+        },
         performDelete: (item) => {
           const itemId = item.value
           const objectId = this.object.id
           const relationUrl = `/api/v1/perms/asset-permissions-system-users-relations/?assetpermission=${objectId}&systemuser=${itemId}`
           return this.$axios.delete(relationUrl)
+        },
+        onDeleteSuccess: (obj, that) => {
+          // 从hasObjects中移除这个object
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          // 从disabled values中移除这个value
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          window.location.reload()
         }
       }
     }
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
index dc62169f7..156e0a057 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <ListTable ref="listTable" v-loading="loading" :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
       <RelationCard type="primary" v-bind="userReletionConfig" />
@@ -29,7 +29,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
       tableConfig: {
         url: `/api/v1/perms/asset-permissions/${this.object.id}/users/all/`,
         columns: [
@@ -90,14 +89,13 @@ export default {
               assetpermission: objectId
             }
           })
-          this.loading = true
-          const that = this
-          const res = this.$axios.post(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.post(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         }
       },
       groupReletionConfig: {
@@ -116,27 +114,30 @@ export default {
               usergroup: v.value
             }
           })
-          this.loading = true
-          const that = this
-          const res = this.$axios.post(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.post(relationUrl, data)
         },
         performDelete: (item) => {
-          // const itemId = item.value
           const objectId = this.object.id
           const relationUrl = `/api/v1/perms/asset-permissions-user-groups-relations/?assetpermission=${objectId}`
-          this.loading = true
-          const that = this
-          const res = this.$axios.delete(relationUrl)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.delete(relationUrl)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
+        },
+        onDeleteSuccess: (obj, that) => {
+          // 从hasObjects中移除这个object
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          // 从disabled values中移除这个value
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          window.location.reload()
         }
       }
     }
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetRelationCard/index.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetRelationCard/index.vue
index d90d45b8b..ec2da61e6 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetRelationCard/index.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetRelationCard/index.vue
@@ -8,7 +8,7 @@
       </tr>
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" @click="addObjects">{{ $tc('Add') }}</el-button>
+          <el-button :type="type" size="small" @click="addObjects">{{ $t('common.Add') }}</el-button>
         </td>
       </tr>
     </table>
@@ -49,8 +49,7 @@ export default {
       type: Function,
       default(that) {
         this.$log.debug('AssetSelect value', that.assets)
-        // 清空资产选项
-        // that.$refs.assetSelect.$refs.select.clearSelected()
+        window.location.reload()
       }
     }
   },
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue
index 01626a6bb..2d5123d9d 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/index.vue
@@ -1,6 +1,8 @@
 <template>
   <GenericDetailPage :object.sync="AssetPermission" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners" @tab-click="TabClick">
-    <component :is="config.activeMenu" :object="AssetPermission" />
+    <keep-alive>
+      <component :is="config.activeMenu" :object="AssetPermission" />
+    </keep-alive>
   </GenericDetailPage>
 </template>
 
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDatabaseApp.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDatabaseApp.vue
index 2f4770925..5e094230f 100644
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDatabaseApp.vue
+++ b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDatabaseApp.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <ListTable ref="listTable" v-loading="loading" :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
       <RelationCard type="primary" v-bind="databaseAppReletionConfig" />
@@ -29,7 +29,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
       tableConfig: {
         url: `/api/v1/perms/database-app-permissions/${this.object.id}/database-apps/all/`,
         columns: [
@@ -82,14 +81,13 @@ export default {
               databaseapp: v.value
             }
           })
-          this.loading = true
-          const that = this
-          const res = this.$axios.post(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.post(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         }
       },
       systemUserReletionConfig: {
@@ -118,11 +116,29 @@ export default {
           })
           return this.$axios.post(relationUrl, data)
         },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
+        },
         performDelete: (item) => {
           const itemId = item.value
           const objectId = this.object.id
           const relationUrl = `/api/v1/perms/database-app-permissions-system-users-relations/?databaseapppermission=${objectId}&systemuser=${itemId}`
           return this.$axios.delete(relationUrl)
+        },
+        onDeleteSuccess: (obj, that) => {
+          // 从hasObjects中移除这个object
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          // 从disabled values中移除这个value
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          window.location.reload()
         }
       }
     }
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionUser.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionUser.vue
index 4f6d30604..cb414e797 100644
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionUser.vue
+++ b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionUser.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <ListTable ref="listTable" v-loading="loading" :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
       <RelationCard type="primary" v-bind="userReletionConfig" />
@@ -30,7 +30,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
       tableConfig: {
         url: `/api/v1/perms/database-app-permissions/${this.object.id}/users/all/`,
         columns: [
@@ -91,14 +90,13 @@ export default {
               user: v.value
             }
           })
-          this.loading = true
-          const that = this
-          const res = this.$axios.post(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.post(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         }
       },
       groupReletionConfig: {
@@ -117,26 +115,30 @@ export default {
               usergroup: v.value
             }
           })
-          this.loading = true
-          const that = this
-          const res = this.$axios.post(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.post(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         },
         performDelete: (item) => {
           const objectId = this.object.id
           const relationUrl = `/api/v1/perms/database-app-permissions-user-groups-relations/?databaseapppermission=${objectId}`
-          this.loading = true
-          const that = this
-          const res = this.$axios.delete(relationUrl)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.delete(relationUrl)
+        },
+        onDeleteSuccess: (obj, that) => {
+          // 从hasObjects中移除这个object
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          // 从disabled values中移除这个value
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          window.location.reload()
         }
       }
     }
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index.vue
index 24a25ac60..916aea0e8 100644
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index.vue
+++ b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index.vue
@@ -1,6 +1,8 @@
 <template>
   <GenericDetailPage :object.sync="DatabaseAppPermission" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners" @tab-click="TabClick">
-    <component :is="config.activeMenu" :object="DatabaseAppPermission" />
+    <keep-alive>
+      <component :is="config.activeMenu" :object="DatabaseAppPermission" />
+    </keep-alive>
   </GenericDetailPage>
 </template>
 
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionRemoteApp.vue b/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionRemoteApp.vue
index daf1b62ac..3a9687112 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionRemoteApp.vue
+++ b/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionRemoteApp.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <ListTable ref="listTable" v-loading="loading" :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
       <RelationCard type="primary" v-bind="remoteAppReletionConfig" />
@@ -28,7 +28,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
       tableConfig: {
         url: `/api/v1/perms/remote-app-permissions/${this.object.id}/remote-apps/all/`,
         columns: [
@@ -68,14 +67,13 @@ export default {
           const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/remote-apps/add/`
           const remoteAppId = items.map(v => v.value)
           const data = { remote_apps: remoteAppId }
-          this.loading = true
-          const that = this
-          const res = this.$axios.patch(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.patch(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         }
       },
       systemUserReletionConfig: {
@@ -101,6 +99,12 @@ export default {
           const data = { system_users: objectRelationSystemUsers }
           return this.$axios.patch(relationUrl, data)
         },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
+        },
         performDelete: (item) => {
           const objectId = this.object.id
           const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/`
@@ -108,6 +112,18 @@ export default {
           const objectNewRelationSystemUsers = objectOldRelationSystemUsers.filter(v => v !== item.value)
           const data = { system_users: objectNewRelationSystemUsers }
           return this.$axios.patch(relationUrl, data)
+        },
+        onDeleteSuccess: (obj, that) => {
+          // 从hasObjects中移除这个object
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          // 从disabled values中移除这个value
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          window.location.reload()
         }
       }
     }
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionUser.vue b/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionUser.vue
index cea064ad1..05e10bc00 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionUser.vue
+++ b/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionUser.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <ListTable ref="listTable" v-loading="loading" :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
       <RelationCard type="primary" v-bind="userReletionConfig" />
@@ -28,7 +28,6 @@ export default {
   },
   data() {
     return {
-      loading: false,
       tableConfig: {
         url: `/api/v1/perms/remote-app-permissions/${this.object.id}/users/all/`,
         columns: [
@@ -75,14 +74,13 @@ export default {
           const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/users/add/`
           const usersId = items.map(v => v.value)
           const data = { users: usersId }
-          this.loading = true
-          const that = this
-          const res = this.$axios.patch(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.patch(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         }
       },
       groupReletionConfig: {
@@ -98,14 +96,13 @@ export default {
           const objectRelationUserGroups = this.object.user_groups
           items.map(v => objectRelationUserGroups.push(v.value))
           const data = { user_groups: objectRelationUserGroups }
-          this.loading = true
-          const that = this
-          const res = this.$axios.patch(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.patch(relationUrl, data)
+        },
+        onAddSuccess: (objects, that) => {
+          this.$log.debug('Select value', that.select2.value)
+          that.iHasObjects = [...that.iHasObjects, ...objects]
+          that.$refs.select2.clearSelected()
+          window.location.reload()
         },
         performDelete: (item) => {
           const objectId = this.object.id
@@ -113,14 +110,19 @@ export default {
           const objectOldRelationUserGroups = this.object.user_groups
           const objectNewRelationUserGroups = objectOldRelationUserGroups.filter(v => v !== item.value)
           const data = { user_groups: objectNewRelationUserGroups }
-          this.loading = true
-          const that = this
-          const res = this.$axios.patch(relationUrl, data)
-          setTimeout(function() {
-            that.$refs.listTable.$refs.dataTable.$refs.dataTable.$refs.table.getList()
-            that.loading = false
-          }, 500)
-          return res
+          return this.$axios.patch(relationUrl, data)
+        },
+        onDeleteSuccess: (obj, that) => {
+          // 从hasObjects中移除这个object
+          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+          that.iHasObjects.splice(theRemoveIndex, 1)
+          // 从disabled values中移除这个value
+          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
+            const i = that.select2.disabledValues.indexOf(obj.value)
+            this.$log.debug('disabled values remove index: ', i)
+            that.select2.disabledValues.splice(i, 1)
+          }
+          window.location.reload()
         }
       }
     }
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index.vue b/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index.vue
index e6a132e07..c2c74d7ad 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index.vue
+++ b/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index.vue
@@ -1,6 +1,8 @@
 <template>
   <GenericDetailPage :object.sync="RemoteAppPermission" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners" @tab-click="TabClick">
-    <component :is="config.activeMenu" :object="RemoteAppPermission" />
+    <keep-alive>
+      <component :is="config.activeMenu" :object="RemoteAppPermission" />
+    </keep-alive>
   </GenericDetailPage>
 </template>