From 5fef1930294d31b1a5f136f21f860db02a03edec Mon Sep 17 00:00:00 2001
From: Bai <baijiangjie@gmail.com>
Date: Mon, 30 Jan 2023 18:50:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E6=8E=88=E6=9D=83=E8=AF=A6=E6=83=85=E6=8E=88=E6=9D=83=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E6=9B=B4=E6=96=B0=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AssetPermissionCreateUpdate.vue           |  1 +
 .../AssetPermissionAccount.vue                | 54 +++----------------
 .../components/AccountFormatter.vue           |  2 +-
 3 files changed, 9 insertions(+), 48 deletions(-)

diff --git a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
index 0aa0b2af0..0e0f99dcf 100644
--- a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
@@ -15,6 +15,7 @@ import { getDayFuture } from '@/utils/common'
 import AccountFormatter from './components/AccountFormatter'
 
 export default {
+  name: 'AccountFormatter',
   components: {
     GenericCreateUpdatePage
   },
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
index b1eaaa44d..44ffe9331 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAccount.vue
@@ -14,39 +14,10 @@
     </el-col>
     <el-col :md="9" :sm="24">
       <IBox :title="$tc('assets.Account')" type="primary">
-        <table style="width: 100%">
-          <tr>
-            <td colspan="2">
-              <el-input
-                v-model="relation.username"
-                :placeholder="this.$tc('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, i) of object['accounts']" :key="i" class="item">
-          <td class="item-name" style="">
-            <b>{{ username }}</b>
-          </td>
-          <td class="item-btn">
-            <el-button
-              :disabled="relation.disabled"
-              size="mini"
-              style="float: right"
-              type="danger"
-              @click="removeAccount(username)"
-            >
-              <i class="fa fa-minus" />
-            </el-button>
-          </td>
-        </tr>
+        <AccountFormatter
+          :value="object['accounts']"
+          @change="updateAccount"
+        />
       </IBox>
     </el-col>
   </el-row>
@@ -55,11 +26,13 @@
 <script>
 import { AccountListTable } from '@/components'
 import { IBox } from '@/components'
+import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter.vue'
 
 export default {
   name: 'AssetPermissionAccount',
   components: {
     IBox,
+    AccountFormatter,
     AccountListTable
   },
   props: {
@@ -78,25 +51,12 @@ export default {
     }
   },
   methods: {
-    async removeAccount(username) {
+    async updateAccount(accounts) {
       const url = `/api/v1/perms/asset-permissions/${this.object.id}/`
-      const accounts = (this.object['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}/`
-      if (!this.relation.username) {
-        return
-      }
-      const accounts = this.object['accounts'].concat([this.relation.username])
-      console.log('Accounts: ', accounts)
-      this.$axios.patch(url, { accounts: accounts }).then(() => {
-        this.object.accounts.push(this.relation.username)
-        this.$refs.ListTable.refresh()
-      })
     }
   }
 }
diff --git a/src/views/perms/AssetPermission/components/AccountFormatter.vue b/src/views/perms/AssetPermission/components/AccountFormatter.vue
index d3ea48577..e227436f6 100644
--- a/src/views/perms/AssetPermission/components/AccountFormatter.vue
+++ b/src/views/perms/AssetPermission/components/AccountFormatter.vue
@@ -89,7 +89,7 @@ export default {
       if (val && event.target.defaultValue === '@ALL') {
         this.select = Array.from(new Set([...this.select, ...this.defaultOptions]))
       }
-      this.showInput = this.select.includes('INPUT')
+      this.showInput = !this.select.includes('@ALL') && this.select.includes('INPUT')
       this.setValue()
     },
     handleTagChange(val) {