diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
index 4d04ac1f7..087f01ca1 100644
--- a/src/i18n/langs/cn.js
+++ b/src/i18n/langs/cn.js
@@ -381,8 +381,8 @@ const cn = {
     'UsersAndUserGroups': '用户或用户组',
     'AssetAndNode': '资产或节点',
     'Active': '激活中',
-    'Add user to asset permission': '添加用户',
-    'Add user group to asset permission': '添加用户组',
+    'Add user to this permission': '添加用户',
+    'Add user group to this permission': '添加用户组',
     'Add asset to this permission': '添加资产',
     'Add node to this permission': '添加节点',
     'Add System User to this permission': '添加系统用户',
diff --git a/src/views/jobcenter/AdhocDetail.vue b/src/views/jobcenter/AdhocDetail.vue
index f13aabe11..e8dadcd72 100644
--- a/src/views/jobcenter/AdhocDetail.vue
+++ b/src/views/jobcenter/AdhocDetail.vue
@@ -6,26 +6,8 @@
           <DetailCard v-if="flag" :title="cardTitle" :items="detailCardItems" />
         </el-col>
         <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ LastRunSuccessHosts }}</span>
-            </div>
-            <div>
-              运行成功的主机，请求的api里没有该数据
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ LastRunFailedHosts }}</span>
-            </div>
-            <div>
-              运行失败的主机，请求的api里没有该数据
-            </div>
-          </el-card>
+          <RunInfoCard v-bind="RunSuccessConfig" />
+          <RunInfoCard v-bind="RunFailedConfig" />
         </el-col>
       </el-row>
     </div>
@@ -41,13 +23,15 @@ import DetailCard from '@/components/DetailCard/index'
 import { getAdhocDetail } from '@/api/ops'
 import AdhocExecutionHistory from './AdhocExecutionHistory'
 import { toSafeLocalDateStr } from '@/utils/common'
+import RunInfoCard from './runinfocard/RunInfoCard'
 
 export default {
   name: 'AdhocDetail',
   components: {
     GenericDetailPage,
     DetailCard,
-    AdhocExecutionHistory
+    AdhocExecutionHistory,
+    RunInfoCard
   },
   data() {
     return {
@@ -68,6 +52,27 @@ export default {
         ],
         hasRightSide: false
       },
+      RunSuccessConfig: {
+        icon: 'fa-info',
+        title: this.$t('jobcenter.Last run success hosts'),
+        content: [
+          {
+            hostname: 'linux',
+            result: 'api没有该数据，api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
+          }
+        ]
+      },
+      RunFailedConfig: {
+        icon: 'fa-info',
+        title: this.$t('jobcenter.Last run failed hosts'),
+        headerColor: 'danger',
+        content: [
+          {
+            hostname: 'window',
+            result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
+          }
+        ]
+      },
       adhocData: '',
       versionDetailData: {}
     }
@@ -76,12 +81,6 @@ export default {
     cardTitle() {
       return 'api 没有该数据'
     },
-    LastRunSuccessHosts() {
-      return this.$t('jobcenter.Last run success hosts')
-    },
-    LastRunFailedHosts() {
-      return this.$t('jobcenter.Last run failed hosts')
-    },
     detailCardItems() {
       return [
         {
@@ -166,22 +165,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .el-table /deep/ .el-table__row > td {
-    line-height: 1.5;
-    padding: 8px 0;
-  }
-  .el-table /deep/ .el-table__row > td> div > span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .el-table /deep/ .el-table__header > thead > tr >th {
-    padding: 8px 0;
-    background-color: #F5F5F6;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-  .table{
-    margin-top: 15px;
-  }
+
 </style>
diff --git a/src/views/jobcenter/HistoryExecutionDetail.vue b/src/views/jobcenter/HistoryExecutionDetail.vue
index cca8ddd8f..e0c98960c 100644
--- a/src/views/jobcenter/HistoryExecutionDetail.vue
+++ b/src/views/jobcenter/HistoryExecutionDetail.vue
@@ -6,24 +6,8 @@
           <DetailCard v-if="flag" :title="cardTitle" :items="detailCardItems" />
         </el-col>
         <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ SuccessHosts }}</span>
-            </div>
-            <div>
-              运行成功的主机，请求的api里没有该数据
-            </div>
-          </el-card>
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ FailedHosts }}</span>
-            </div>
-            <div>
-              运行失败的主机，请求的api里没有该数据
-            </div>
-          </el-card>
+          <RunInfoCard v-bind="RunSuccessConfig" />
+          <RunInfoCard v-bind="RunFailedConfig" />
         </el-col>
       </el-row>
     </div>
@@ -38,12 +22,14 @@ import { GenericDetailPage } from '@/layout/components'
 import DetailCard from '@/components/DetailCard/index'
 import { getHistoryExecutionDetail } from '@/api/ops'
 import { toSafeLocalDateStr } from '@/utils/common'
+import RunInfoCard from './runinfocard/RunInfoCard'
 
 export default {
   name: 'HistoryExecutionDetail',
   components: {
     GenericDetailPage,
-    DetailCard
+    DetailCard,
+    RunInfoCard
   },
   data() {
     return {
@@ -67,6 +53,27 @@ export default {
           detailApiUrl: `/api/v1/ops/adhoc-executions/${this.$route.params.id}/`
         }
       },
+      RunSuccessConfig: {
+        icon: 'fa-info',
+        title: this.$t('jobcenter.Last run success hosts'),
+        content: [
+          {
+            hostname: 'linux',
+            result: 'api没有该数据==api没有该数据api没有该数据api没有该数据api没有该数据'
+          }
+        ]
+      },
+      RunFailedConfig: {
+        icon: 'fa-info',
+        title: this.$t('jobcenter.Last run failed hosts'),
+        headerColor: 'danger',
+        content: [
+          {
+            hostname: 'window',
+            result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
+          }
+        ]
+      },
       defaultValue: '',
       historyExecutionDetailData: {}
     }
@@ -75,12 +82,6 @@ export default {
     cardTitle() {
       return `${this.historyExecutionDetailData.task_display}:${this.historyExecutionDetailData.adhoc_short_id}`
     },
-    SuccessHosts() {
-      return this.$t('jobcenter.SuccessHosts')
-    },
-    FailedHosts() {
-      return this.$t('jobcenter.FailedHosts')
-    },
     detailCardItems() {
       return [
         {
@@ -135,22 +136,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .el-table /deep/ .el-table__row > td {
-    line-height: 1.5;
-    padding: 8px 0;
-  }
-  .el-table /deep/ .el-table__row > td> div > span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .el-table /deep/ .el-table__header > thead > tr >th {
-    padding: 8px 0;
-    background-color: #F5F5F6;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-  .table{
-    margin-top: 15px;
-  }
+
 </style>
diff --git a/src/views/jobcenter/TaskDetail.vue b/src/views/jobcenter/TaskDetail.vue
index cc192199c..533f5c625 100644
--- a/src/views/jobcenter/TaskDetail.vue
+++ b/src/views/jobcenter/TaskDetail.vue
@@ -6,24 +6,8 @@
           <DetailCard v-if="flag" :title="cardTitle" :items="detailCardItems" />
         </el-col>
         <el-col :span="10">
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ LastRunSuccessHosts }}</span>
-            </div>
-            <div>
-              运行成功的主机，请求的api里没有该数据
-            </div>
-          </el-card>
-          <el-card class="box-card primary">
-            <div slot="header" class="clearfix">
-              <i class="fa fa-info" />
-              <span>{{ LastRunFailedHosts }}</span>
-            </div>
-            <div>
-              运行失败的主机，请求的api里没有该数据
-            </div>
-          </el-card>
+          <RunInfoCard v-bind="RunSuccessConfig" />
+          <RunInfoCard v-bind="RunFailedConfig" />
         </el-col>
       </el-row>
     </div>
@@ -46,6 +30,7 @@ import { toSafeLocalDateStr } from '@/utils/common'
 import { getTaskDetail } from '@/api/ops'
 import TaskHistory from './TaskHistory'
 import TaskAdhoc from './TaskAdhoc'
+import RunInfoCard from './runinfocard/RunInfoCard'
 
 export default {
   name: 'TaskDetail',
@@ -53,7 +38,8 @@ export default {
     GenericDetailPage,
     DetailCard,
     TaskAdhoc,
-    TaskHistory
+    TaskHistory,
+    RunInfoCard
   },
   data() {
     return {
@@ -81,6 +67,27 @@ export default {
         ],
         hasRightSide: false
       },
+      RunSuccessConfig: {
+        icon: 'fa-info',
+        title: this.$t('jobcenter.Last run success hosts'),
+        content: [
+          {
+            hostname: 'linux',
+            result: 'api没有该数据==api没有该数据api没有该数据api没有该数据api没有该数据'
+          }
+        ]
+      },
+      RunFailedConfig: {
+        icon: 'fa-info',
+        title: this.$t('jobcenter.Last run failed hosts'),
+        headerColor: 'danger',
+        content: [
+          {
+            hostname: 'window',
+            result: 'api没有该数据api没有该数据api没有该数据api没有该数据api没有该数据'
+          }
+        ]
+      },
       taskData: {}
     }
   },
@@ -88,12 +95,6 @@ export default {
     cardTitle() {
       return this.taskData.name
     },
-    LastRunSuccessHosts() {
-      return this.$t('jobcenter.Last run success hosts')
-    },
-    LastRunFailedHosts() {
-      return this.$t('jobcenter.Last run failed hosts')
-    },
     detailCardItems() {
       return [
         {
@@ -160,22 +161,5 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .el-table /deep/ .el-table__row > td {
-    line-height: 1.5;
-    padding: 8px 0;
-  }
-  .el-table /deep/ .el-table__row > td> div > span {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  .el-table /deep/ .el-table__header > thead > tr >th {
-    padding: 8px 0;
-    background-color: #F5F5F6;
-    font-size: 13px;
-    line-height: 1.5;
-  }
-  .table{
-    margin-top: 15px;
-  }
+
 </style>
diff --git a/src/views/jobcenter/runinfocard/RunInfoCard.vue b/src/views/jobcenter/runinfocard/RunInfoCard.vue
new file mode 100644
index 000000000..f14e1d6f5
--- /dev/null
+++ b/src/views/jobcenter/runinfocard/RunInfoCard.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-card class="box-card primary box-margin">
+    <div slot="header" class="clearfix">
+      <i v-if="icon" :class="'fa ' + icon" />
+      <span>{{ title }}</span>
+    </div>
+    <div>
+      <el-table class="el-table" style="width: 100%" :data="content" :show-header="false">
+        <el-table-column width="150px" prop="hostname" />
+        <el-table-column prop="result">
+          <template slot-scope="scope">
+            <span>{{ scope.row.result }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'RunInfoCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: Array,
+      default: () => []
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .box-margin {
+    margin-bottom: 20px;
+  }
+</style>
diff --git a/src/views/perms/AssetPermissionAsset.vue b/src/views/perms/AssetPermissionAsset.vue
index 3e760df7a..ef945d130 100644
--- a/src/views/perms/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermissionAsset.vue
@@ -4,9 +4,9 @@
       <ListTable :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <RelationCard v-if="!assetReletionConfig.loading" v-bind="assetReletionConfig" />
-      <RelationCard v-if="!nodeReletionConfig.loading" v-bind="nodeReletionConfig" />
-      <RelationCard v-if="!systemUserReletionConfig.loading" v-bind="systemUserReletionConfig" />
+      <RelationCard v-bind="assetReletionConfig" />
+      <RelationCard v-bind="nodeReletionConfig" />
+      <RelationCard v-bind="systemUserReletionConfig" />
     </el-col>
   </el-row>
 </template>
@@ -64,23 +64,39 @@ export default {
       assetReletionConfig: {
         icon: 'fa-info',
         title: this.$t('perms.Add asset to this permission'),
-        url: '/api/v1/assets/assets/',
-        value: [],
-        loading: false
+        objectsAjax: {
+          url: '/api/v1/assets/assets/'
+        }
       },
       nodeReletionConfig: {
         icon: 'fa-info',
         title: this.$t('perms.Add node to this permission'),
-        url: '/api/v1/assets/nodes/',
-        value: [],
-        loading: false
+        objectsAjax: {
+          url: '/api/v1/assets/nodes/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.full_value, value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        }
       },
       systemUserReletionConfig: {
         icon: 'fa-info',
         title: this.$t('perms.Add System User to this permission'),
-        url: '/api/v1/assets/system-users/',
-        value: [],
-        loading: false
+        objectsAjax: {
+          url: '/api/v1/assets/system-users/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        }
       }
     }
   }
diff --git a/src/views/perms/AssetPermissionList.vue b/src/views/perms/AssetPermissionList.vue
index ca1e397a2..760339d6c 100644
--- a/src/views/perms/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermissionList.vue
@@ -16,6 +16,14 @@ export default {
         url: '/api/v1/perms/asset-permissions/',
         hasSelection: false,
         hasTree: true,
+        treeSetting: {
+          showMenu: false,
+          showRefresh: true,
+          showAssets: true,
+          url: '/api/v1/perms/asset-permissions/',
+          nodeUrl: '/api/v1/perms/asset-permissions/',
+          treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
+        },
         tagSearch: [
           { label: this.$tc('Name'), key: 'name' },
           { label: this.$t('perms.IsValid'), key: 'is_valid' },
@@ -27,14 +35,6 @@ export default {
           { label: this.$t('perms.SystemUser'), key: 'system_user' },
           { label: '继承(先占位)', key: 'all=0' }
         ],
-        treeSetting: {
-          showMenu: false,
-          showRefresh: true,
-          showAssets: true,
-          url: '/api/v1/perms/asset-permissions/',
-          nodeUrl: '/api/v1/perms/asset-permissions/',
-          treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
-        },
         columns: ['expand', 'name', 'users', 'user_groups', 'assets', 'nodes', 'system_users', 'is_active', 'actions'],
         columnsMeta: {
           expand: {
diff --git a/src/views/perms/AssetPermissionUser.vue b/src/views/perms/AssetPermissionUser.vue
index a80dcbbf5..f3df9b18b 100644
--- a/src/views/perms/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermissionUser.vue
@@ -4,8 +4,8 @@
       <ListTable :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <RelationCard v-if="!userReletionConfig.loading" v-bind="userReletionConfig" />
-      <RelationCard v-if="!groupReletionConfig.loading" v-bind="groupReletionConfig" />
+      <RelationCard v-bind="userReletionConfig" />
+      <RelationCard v-bind="groupReletionConfig" />
     </el-col>
   </el-row>
 </template>
@@ -61,17 +61,38 @@ export default {
       assetPermissionUserGroup: [],
       userReletionConfig: {
         icon: 'fa-user',
-        title: this.$t('perms.Add user to asset permission'),
-        url: '/api/v1/users/users/',
-        value: [],
-        loading: false
+        title: this.$t('perms.Add user to this permission'),
+        objectsAjax: {
+          url: '/api/v1/users/users/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        },
+        performAdd: (items) => {
+          console.log('item=====', items)
+          const relationUrl = `/api/v1/perms/asset-permissions-users-relations/`
+          const objectId = this.$route.params.id
+          console.log('objectId====', objectId)
+          const data = items.map(v => {
+            return {
+              user: v.value,
+              assetpermission: objectId
+            }
+          })
+          return this.$axios.post(relationUrl, data)
+        }
       },
       groupReletionConfig: {
         icon: 'fa-group',
-        title: this.$t('perms.Add user group to asset permission'),
-        url: '/api/v1/users/groups/',
-        value: [],
-        loading: false
+        title: this.$t('perms.Add user group to this permission'),
+        objectsAjax: {
+          url: '/api/v1/users/groups/'
+        }
       }
     }
   }
diff --git a/src/views/perms/DatabaseAppPermissionDatabaseApp.vue b/src/views/perms/DatabaseAppPermissionDatabaseApp.vue
index adbe31580..d3f1bbf7d 100644
--- a/src/views/perms/DatabaseAppPermissionDatabaseApp.vue
+++ b/src/views/perms/DatabaseAppPermissionDatabaseApp.vue
@@ -4,8 +4,8 @@
       <ListTable :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <RelationCard v-if="!databaseAppReletionConfig.loading" v-bind="databaseAppReletionConfig" />
-      <RelationCard v-if="!systemUserReletionConfig.loading" v-bind="systemUserReletionConfig" />
+      <RelationCard v-bind="databaseAppReletionConfig" />
+      <RelationCard v-bind="systemUserReletionConfig" />
     </el-col>
   </el-row>
 </template>
@@ -41,6 +41,9 @@ export default {
             formatter: DeleteActionFormatter,
             deleteUrl: `/api/v1/perms/database-app-permissions-database-apps-relations/?databaseapppermission=${this.$route.params.id}&databaseapp=`
           }
+        },
+        tableAttrs: {
+          border: false
         }
       },
       headerActions: {
@@ -59,16 +62,24 @@ export default {
       databaseAppReletionConfig: {
         icon: 'fa-info',
         title: this.$t('perms.Add DatabaseApp to this permission'),
-        url: '/api/v1/applications/database-apps/',
-        value: [],
-        loading: false
+        objectsAjax: {
+          url: '/api/v1/applications/database-apps/'
+        }
       },
       systemUserReletionConfig: {
         icon: 'fa-info',
         title: this.$t('perms.Add System User to this permission'),
-        url: '/api/v1/assets/system-users/',
-        value: [],
-        loading: false
+        objectsAjax: {
+          url: '/api/v1/assets/system-users/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        }
       }
     }
   }
diff --git a/src/views/perms/DatabaseAppPermissionList.vue b/src/views/perms/DatabaseAppPermissionList.vue
index 5a820e9ab..0dc13d363 100644
--- a/src/views/perms/DatabaseAppPermissionList.vue
+++ b/src/views/perms/DatabaseAppPermissionList.vue
@@ -34,6 +34,9 @@ export default {
         }
       },
       headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
         hasBulkDelete: false
       }
     }
diff --git a/src/views/perms/DatabaseAppPermissionUser.vue b/src/views/perms/DatabaseAppPermissionUser.vue
index 772411662..9759b6380 100644
--- a/src/views/perms/DatabaseAppPermissionUser.vue
+++ b/src/views/perms/DatabaseAppPermissionUser.vue
@@ -4,8 +4,8 @@
       <ListTable :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <RelationCard v-if="!userReletionConfig.loading" v-bind="userReletionConfig" />
-      <RelationCard v-if="!groupReletionConfig.loading" v-bind="groupReletionConfig" />
+      <RelationCard v-bind="userReletionConfig" />
+      <RelationCard v-bind="groupReletionConfig" />
     </el-col>
   </el-row>
 
@@ -42,6 +42,9 @@ export default {
             formatter: DeleteActionFormatter,
             deleteUrl: `/api/v1/perms/database-app-permissions-users-relations/?databaseapppermission=${this.$route.params.id}&user=`
           }
+        },
+        tableAttrs: {
+          border: false
         }
       },
       headerActions: {
@@ -59,17 +62,25 @@ export default {
       databaseAppPermissionUserGroup: [],
       userReletionConfig: {
         icon: 'fa-user',
-        title: this.$t('perms.Add user to asset permission'),
-        url: '/api/v1/users/users/',
-        value: [],
-        loading: false
+        title: this.$t('perms.Add user to this permission'),
+        objectsAjax: {
+          url: '/api/v1/users/users/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        }
       },
       groupReletionConfig: {
         icon: 'fa-group',
-        title: this.$t('perms.Add user group to asset permission'),
-        url: '/api/v1/users/groups/',
-        value: [],
-        loading: false
+        title: this.$t('perms.Add user group to this permission'),
+        objectsAjax: {
+          url: '/api/v1/users/groups/'
+        }
       }
     }
   }
diff --git a/src/views/perms/RemoteAppPermissionList.vue b/src/views/perms/RemoteAppPermissionList.vue
index 2f90af01f..8eaae5583 100644
--- a/src/views/perms/RemoteAppPermissionList.vue
+++ b/src/views/perms/RemoteAppPermissionList.vue
@@ -35,6 +35,9 @@ export default {
         }
       },
       headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
         hasBulkDelete: false
       }
     }
diff --git a/src/views/perms/RemoteAppPermissionRemoteApp.vue b/src/views/perms/RemoteAppPermissionRemoteApp.vue
index e332932bf..98ec6275b 100644
--- a/src/views/perms/RemoteAppPermissionRemoteApp.vue
+++ b/src/views/perms/RemoteAppPermissionRemoteApp.vue
@@ -4,8 +4,8 @@
       <ListTable :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <RelationCard v-if="!remoteAppReletionConfig.loading" v-bind="remoteAppReletionConfig" />
-      <RelationCard v-if="!systemUserReletionConfig.loading" v-bind="systemUserReletionConfig" />
+      <RelationCard v-bind="remoteAppReletionConfig" />
+      <RelationCard v-bind="systemUserReletionConfig" />
     </el-col>
   </el-row>
 </template>
@@ -31,6 +31,9 @@ export default {
           // asset_display: {
           //   label: this.$t('perms.RemoteApp')
           // }
+        },
+        tableAttrs: {
+          border: false
         }
       },
       headerActions: {
@@ -49,16 +52,24 @@ export default {
       remoteAppReletionConfig: {
         icon: 'fa-info',
         title: this.$t('perms.Add RemoteApp to this permission'),
-        url: '/api/v1/applications/remote-apps/',
-        value: [],
-        loading: false
+        objectsAjax: {
+          url: '/api/v1/applications/remote-apps/'
+        }
       },
       systemUserReletionConfig: {
         icon: 'fa-info',
         title: this.$t('perms.Add System User to this permission'),
-        url: '/api/v1/assets/system-users/',
-        value: [],
-        loading: false
+        objectsAjax: {
+          url: '/api/v1/assets/system-users/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        }
       }
     }
   }
diff --git a/src/views/perms/RemoteAppPermissionUser.vue b/src/views/perms/RemoteAppPermissionUser.vue
index 752a4f03e..5c1789f22 100644
--- a/src/views/perms/RemoteAppPermissionUser.vue
+++ b/src/views/perms/RemoteAppPermissionUser.vue
@@ -4,8 +4,8 @@
       <ListTable :table-config="tableConfig" :header-actions="headerActions" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <RelationCard v-if="!userReletionConfig.loading" v-bind="userReletionConfig" />
-      <RelationCard v-if="!groupReletionConfig.loading" v-bind="groupReletionConfig" />
+      <RelationCard v-bind="userReletionConfig" />
+      <RelationCard v-bind="groupReletionConfig" />
     </el-col>
   </el-row>
 </template>
@@ -31,6 +31,9 @@ export default {
           // user_display: {
           //   label: this.$t('perms.User')
           // }
+        },
+        tableAttrs: {
+          border: false
         }
       },
       headerActions: {
@@ -48,17 +51,25 @@ export default {
       remoteAppPermissionUserGroup: [],
       userReletionConfig: {
         icon: 'fa-user',
-        title: this.$t('perms.Add user to asset permission'),
-        url: '/api/v1/users/users/',
-        value: [],
-        loading: false
+        title: this.$t('perms.Add user to this permission'),
+        objectsAjax: {
+          url: '/api/v1/users/users/',
+          processResults(data) {
+            let results = data.results
+            results = results.map((item) => {
+              return { label: item.name + '(' + item.username + ')', value: item.id }
+            })
+            const more = !!data.next
+            return { results: results, pagination: more, total: data.count }
+          }
+        }
       },
       groupReletionConfig: {
         icon: 'fa-group',
-        title: this.$t('perms.Add user group to asset permission'),
-        url: '/api/v1/users/groups/',
-        value: [],
-        loading: false
+        title: this.$t('perms.Add user group to this permission'),
+        objectsAjax: {
+          url: '/api/v1/users/groups/'
+        }
       }
     }
   }