diff --git a/src/api/common.js b/src/api/common.js
index 8cff6cc3c..d700fbe23 100644
--- a/src/api/common.js
+++ b/src/api/common.js
@@ -1,6 +1,13 @@
 import request from '@/utils/request'
 
 export function createSourceIdCache(ids) {
+  ids = ids.map(item => {
+    if (typeof item === 'object' && item.id) {
+      return item.id
+    } else {
+      return item
+    }
+  })
   return request({
     url: '/api/v1/common/resources/cache/',
     method: 'post',
diff --git a/src/components/AccountListTable/index.vue b/src/components/AccountListTable/index.vue
index 0a70ffcd1..f330bb6b7 100644
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -66,6 +66,14 @@ export default {
     columns: {
       type: Array,
       default: () => []
+    },
+    hasExport: {
+      type: Boolean,
+      default: true
+    },
+    hasImport: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -117,16 +125,10 @@ export default {
           },
           privileged: {
             label: this.$t('assets.Privileged'),
+            width: '120px',
             formatterArgs: {
-              getText: ({ row }) => {
-                return row.privileged ? ' ' : '-'
-              },
-              getIcon: ({ row }) => {
-                return row.privileged ? 'fa-check-circle text-primary' : ''
-              },
-              classChoices: {
-                false: ''
-              }
+              showText: false,
+              showFalse: false
             }
           },
           connectivity: connectivityMeta,
@@ -199,7 +201,7 @@ export default {
         hasMoreActions: true,
         hasCreate: false,
         hasImport: true,
-        hasExport: this.$hasPerm('assets.view_account'),
+        hasExport: this.hasExport && this.$hasPerm('assets.view_accountsecret'),
         exportOptions: {
           url: this.exportUrl,
           mfaVerifyRequired: true
@@ -217,7 +219,7 @@ export default {
           }
         ],
         searchConfig: {
-          exclude: ['systemuser', 'asset']
+          exclude: ['asset']
         },
         hasSearch: true
       }
diff --git a/src/components/RelationCard/index.vue b/src/components/RelationCard/index.vue
index a461d1143..121163166 100644
--- a/src/components/RelationCard/index.vue
+++ b/src/components/RelationCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
+  <IBox :type="type" :title="title" v-bind="$attrs">
     <table style="width: 100%;table-layout:fixed;" class="CardTable">
       <tr>
         <td colspan="2">
diff --git a/src/components/TableFormatters/ChoicesFormatter.vue b/src/components/TableFormatters/ChoicesFormatter.vue
index b4e0b8f58..1a19927fd 100644
--- a/src/components/TableFormatters/ChoicesFormatter.vue
+++ b/src/components/TableFormatters/ChoicesFormatter.vue
@@ -1,11 +1,14 @@
 <template>
-  <el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" placement="bottom" effect="dark">
-    <div slot="content" v-html="tips" />
-    <span :class="classes">
-      <i v-if="formatterArgs.showIcon && icon" :class="'fa ' + icon" />
-      <span v-if="formatterArgs.showText">{{ text }}</span>
-    </span>
-  </el-tooltip>
+  <span>
+    <el-tooltip v-if="shown" :disabled="!formatterArgs.hasTips" placement="bottom" effect="dark">
+      <div slot="content" v-html="tips" />
+      <span :class="classes">
+        <i v-if="formatterArgs.showIcon && icon" :class="'fa ' + icon" />
+        <span v-if="formatterArgs.showText">{{ text }}</span>
+      </span>
+    </el-tooltip>
+    <span v-else>-</span>
+  </span>
 </template>
 
 <script>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
index b3a21f5a2..0f508cb15 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
@@ -1,14 +1,64 @@
 <template>
-  <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" class- />
+  <el-row :gutter="20">
+    <el-col :md="15" :sm="24">
+      <AccountListTable
+        ref="ListTable"
+        :asset="object"
+        :url="url"
+        :columns="columns"
+        :has-clone="false"
+        :has-left-actions="false"
+        :has-import="false"
+        :has-export="false"
+      />
+    </el-col>
+    <el-col :md="9" :sm="24">
+      <IBox type="primary" :title="this.$tc('assets.Account')">
+        <table style="width: 100%">
+          <tr>
+            <td colspan="2">
+              <el-input
+                v-model="relation.username"
+                :placeholder="this.$t('perms.AddAccountToPerm')"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2">
+              <el-button size="small" type="primary" @click="addAccount">{{ $t('common.Add') }}</el-button>
+            </td>
+          </tr>
+        </table>
+        <tr v-for="username of object['accounts']" :key="username" class="item">
+          <td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+            <b>{{ username }}</b>
+          </td>
+          <td>
+            <el-button
+              size="mini"
+              type="danger"
+              style="float: right"
+              :disabled="relation.disabled"
+              @click="removeAccount(username)"
+            >
+              <i class="fa fa-minus" />
+            </el-button>
+          </td>
+        </tr>
+      </IBox>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import { AccountListTable } from '@/components'
+import { IBox } from '@/components'
 
 export default {
   name: 'AssetPermissionAccount',
   components: {
-    ListTable
+    IBox,
+    AccountListTable
   },
   props: {
     object: {
@@ -17,61 +67,40 @@ export default {
     }
   },
   data() {
-    const vm = this
     return {
-      tableConfig: {
-        url: `/api/v1/perms/asset-permissions/${this.object.id}/accounts/`,
-        columns: [
-          'asset', 'name', 'username', 'privileged', 'version', 'comment'
-        ],
-        columnsShow: {
-          default: [
-            'asset', 'name', 'username', 'privileged', 'version'
-          ],
-          min: ['asset_name', 'name']
-        },
-        columnsMeta: {
-          asset: {
-            label: this.$t('assets.Asset'),
-            showOverflowTooltip: true,
-            formatter: function(row) {
-              const to = {
-                name: 'AssetDetail',
-                params: { id: row.asset.id }
-              }
-              if (vm.$hasPerm('assets.view_asset')) {
-                return <router-link to={ to } >{ row.asset.name }</router-link>
-              } else {
-                return <span>{ row.asset.name }</span>
-              }
-            }
-          },
-          name: {
-            formatter: null
-          },
-          privileged: {
-            width: '120px',
-            label: this.$t('assets.Privileged'),
-            formatterArgs: {
-              showFalse: false
-            }
-          }
-        },
-        tableAttrs: {
-          border: false
-        }
-      },
-      headerActions: {
-        hasSearch: true,
-        hasRefresh: true,
-        hasLeftActions: true,
-        hasRightActions: true,
-        hasExport: false,
-        hasImport: false,
-        hasCreate: false,
-        hasMoreActions: false
+      url: `/api/v1/perms/asset-permissions/${this.object.id}/accounts/`,
+      columns: [
+        'name', 'asset', 'username', 'version', 'privileged',
+        'secret_type', 'date_created', 'date_updated', 'actions'
+      ],
+      relation: {
+        disabled: false,
+        username: ''
       }
     }
+  },
+  methods: {
+    async removeAccount(username) {
+      const url = `/api/v1/perms/asset-permissions/${this.object.id}/`
+      const assetPermission = await this.$axios.get(url)
+      const accounts = assetPermission['accounts'].filter(item => item !== username)
+      this.$axios.patch(url, { accounts: accounts }).then(() => {
+        this.object.accounts = accounts
+        this.$refs.ListTable.refresh()
+      })
+    },
+    async addAccount() {
+      const url = `/api/v1/perms/asset-permissions/${this.object.id}/`
+      const assetPermission = await this.$axios.get(url)
+      if (!this.relation.username) {
+        return
+      }
+      const accounts = assetPermission['accounts'] + [this.relation.username]
+      this.$axios.patch(url, { accounts: accounts }).then(() => {
+        this.object.accounts.push(this.relation.username)
+        this.$refs.ListTable.refresh()
+      })
+    }
   }
 }
 </script>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
index 2e4fa30e8..819ab6090 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
@@ -6,7 +6,6 @@
     <el-col :md="10" :sm="24">
       <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
       <RelationCard type="info" style="margin-top: 15px" v-bind="nodeRelationConfig" />
-      <RelationCard type="warning" style="margin-top: 15px" v-bind="systemUserRelationConfig" />
     </el-col>
   </el-row>
 </template>
@@ -141,53 +140,6 @@ export default {
           this.$message.success(this.$t('common.deleteSuccessMsg'))
           this.$refs.ListTable.reloadTable()
         }
-      },
-      systemUserRelationConfig: {
-        icon: 'fa-edit',
-        title: this.$t('perms.addSystemUserToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/assets/system-users/?protocol__in=rdp,ssh,vnc,telnet',
-          transformOption: (item) => {
-            const username = item.username || '*'
-            return { label: item.name + '(' + username + ')', value: item.id }
-          }
-        },
-        hasObjectsId: this.object.system_users,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/asset-permissions-system-users-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              assetpermission: objectId,
-              systemuser: v.value
-            }
-          })
-          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()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-        },
-        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)
-          }
-          this.$message.success(this.$t('common.deleteSuccessMsg'))
-        }
       }
     }
   }
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
index f7c38eca1..f72d07b86 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
@@ -79,8 +79,14 @@ export default {
           key: this.$t('perms.Actions'),
           value: this.object.actions,
           formatter(row, value) {
-            const actionMap = value.map(item => ACTIONS_FIELDS_MAP[item].action).join(',')
-            return <span>{actionMap}</span>
+            const actionMap = value.map(item => ACTIONS_FIELDS_MAP[item].action)
+            return (
+              <div>
+                {actionMap.map(item => (
+                  <el-tag size='mini' style={{ marginRight: '3px' }} key={item}>{item}</el-tag>
+                )) }
+              </div>
+            )
           }
         },
         {
@@ -109,6 +115,5 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-
+<style lang="scss" scoped>
 </style>
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
index bb4723825..d550bdb5a 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
@@ -120,7 +120,7 @@ export default {
           this.$log.debug('Select value', that.select2.value)
           that.iHasObjects = [...that.iHasObjects, ...objects]
           that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
+          this.$message.success(this.$tc('common.updateSuccessMsg'))
           this.$refs.ListTable.reloadTable()
         },
         onDeleteSuccess: (obj, that) => {
diff --git a/src/views/perms/AssetPermission/AssetPermissionList.vue b/src/views/perms/AssetPermission/AssetPermissionList.vue
index cd5d5541b..5ccb9116a 100644
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -53,7 +53,6 @@ export default {
           name: {
             formatterArgs: {
               routeQuery: {
-                name: 'AssetPermissionDetail',
                 activeTab: 'AssetPermissionDetail'
               }
             },