From 5645d253e5da84eac6c59243067bde1c1786fc3f Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 23 Jan 2025 14:01:54 +0800
Subject: [PATCH] perf: update pam account

---
 .../AccountListTable/AccountCreateUpdate.vue  |  1 -
 .../Apps/AccountListTable/AccountList.vue     | 51 +++++++------
 src/components/Drawer/index.vue               |  4 ++
 .../Table/DrawerListTable/index.vue           | 57 ++++++++-------
 .../Table/TableFormatters/DetailFormatter.vue | 14 ++--
 src/layout/components/TabPage/index.vue       |  1 -
 .../accounts/Account/AccountDetail/index.vue  |  3 +
 src/views/accounts/Account/AccountList.vue    | 72 +++++++++----------
 src/views/users/User/UserDetail/index.vue     |  7 +-
 9 files changed, 116 insertions(+), 94 deletions(-)

diff --git a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
index fc18c03f1..54a70c724 100644
--- a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
+++ b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
@@ -1,6 +1,5 @@
 <template v-if="iVisible">
   <Drawer
-    :has-footer="true"
     :title="title"
     :visible="iVisible"
     class="drawer"
diff --git a/src/components/Apps/AccountListTable/AccountList.vue b/src/components/Apps/AccountListTable/AccountList.vue
index 006695854..63e94de78 100644
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ListTable
+    <DrawerListTable
       ref="ListTable"
       :detail-drawer="detailDrawer"
       :header-actions="headerActions"
@@ -22,22 +22,13 @@
     <AccountCreateUpdate
       v-if="showAddDialog"
       :account="account"
+      :add-template="addTemplate"
       :asset="iAsset"
       :title="accountCreateUpdateTitle"
       :visible.sync="showAddDialog"
       @add="addAccountSuccess"
       @bulk-create-done="showBulkCreateResult($event)"
     />
-    <AccountCreateUpdate
-      v-if="showAddTemplateDialog"
-      :account="account"
-      :add-template="true"
-      :asset="iAsset"
-      :title="accountCreateByTemplateTitle"
-      :visible.sync="showAddTemplateDialog"
-      @add="addAccountSuccess"
-      @bulk-create-done="showBulkCreateResult($event)"
-    />
     <ResultDialog
       v-if="showResultDialog"
       :result="createAccountResults"
@@ -67,19 +58,19 @@ import UpdateSecretInfo from './UpdateSecretInfo.vue'
 import ResultDialog from './BulkCreateResultDialog.vue'
 import AccountCreateUpdate from './AccountCreateUpdate.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import ListTable from '@/components/Table/DrawerListTable/index.vue'
+import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
 import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
 
 export default {
   name: 'AccountListTable',
   components: {
-    AccountBulkUpdateDialog,
-    ResultDialog,
-    ListTable,
-    UpdateSecretInfo,
     ViewSecret,
+    ResultDialog,
+    DrawerListTable,
+    UpdateSecretInfo,
     AccountCreateUpdate,
-    PasswordHistoryDialog
+    PasswordHistoryDialog,
+    AccountBulkUpdateDialog
   },
   props: {
     url: {
@@ -147,6 +138,7 @@ export default {
   data() {
     const vm = this
     return {
+      addTemplate: false,
       currentAccountColumn: {},
       showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
@@ -156,8 +148,6 @@ export default {
       showAddTemplateDialog: false,
       detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
       createAccountResults: [],
-      accountCreateUpdateTitle: this.$t('AddAccount'),
-      accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
       iAsset: this.asset,
       account: {},
       secretUrl: '',
@@ -179,7 +169,10 @@ export default {
           name: {
             width: '120px',
             formatterArgs: {
-              can: () => vm.$hasPerm('accounts.view_account')
+              can: () => vm.$hasPerm('accounts.view_account'),
+              getDrawerTitle({ row }) {
+                return `${row.username}@${row.asset.name}`
+              }
             }
           },
           secret: {
@@ -204,11 +197,6 @@ export default {
               )
             }
           },
-          asset: {
-            formatter: row => {
-              return <span>{row.asset.name}</span>
-            }
-          },
           platform: {
             label: this.$t('Platform'),
             width: '120px',
@@ -288,6 +276,7 @@ export default {
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
+                vm.addTemplate = false
                 vm.showAddDialog = true
               })
             }
@@ -304,7 +293,8 @@ export default {
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                vm.showAddTemplateDialog = true
+                vm.showAddDialog = true
+                vm.addTemplate = true
               })
             }
           },
@@ -384,6 +374,15 @@ export default {
       }
     }
   },
+  computed: {
+    accountCreateUpdateTitle() {
+      if (this.addTemplate) {
+        return this.$t('AddAccountByTemplate')
+      } else {
+        return this.$t('AddAccount')
+      }
+    }
+  },
   watch: {
     url(iNew) {
       this.$set(this.tableConfig, 'url', iNew)
diff --git a/src/components/Drawer/index.vue b/src/components/Drawer/index.vue
index 7e36f40a3..40df3363f 100644
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -115,6 +115,10 @@ export default {
     }
 
     .page-submenu {
+      .el-tabs__header {
+        padding: 0 15px;
+      }
+
       .el-tabs__item.is-top {
         padding: 0 10px;
       }
diff --git a/src/components/Table/DrawerListTable/index.vue b/src/components/Table/DrawerListTable/index.vue
index 30e3f7622..eb14eb61c 100644
--- a/src/components/Table/DrawerListTable/index.vue
+++ b/src/components/Table/DrawerListTable/index.vue
@@ -63,37 +63,25 @@ export default {
     resource: {
       type: String,
       default: ''
+    },
+    getDrawerTitle: {
+      type: Function,
+      default: null
     }
   },
   data() {
     return {
+      title: '',
+      action: '',
       visible: false,
       drawerVisible: false,
-      drawerComponent: '',
-      action: ''
+      drawerComponent: ''
     }
   },
   computed: {
     ...mapGetters(['inDrawer']),
     drawerTitle() {
-      let title = this.title
-      if (!title && this.resource) {
-        title = this.resource
-      }
-      if (!title) {
-        title = this.$route.meta?.title
-        title = title.replace('List', '').replace('列表', '')
-        title = _.trimEnd(title, 's')
-      }
-      if (!title) {
-        title = this.$t('NoTitle')
-      }
-      let action = this.action
-      if (action === 'clone') {
-        action = 'create'
-      }
-      title = toSentenceCase(action) + this.$t('WordSep') + title.toLowerCase()
-      return title
+      return this.getDefaultTitle()
     },
     iHeaderActions() {
       const actions = this.headerActions
@@ -137,12 +125,31 @@ export default {
       }
       if (!val) {
         this.drawerVisible = false
-        console.log('Start reload table')
         this.reloadTable()
       }
     }
   },
   methods: {
+    getDefaultTitle() {
+      let title = this.title
+      if (!title && this.resource) {
+        title = this.resource
+      }
+      if (!title) {
+        title = this.$route.meta?.title
+        title = title.replace('List', '').replace('列表', '')
+        title = _.trimEnd(title, 's')
+      }
+      if (!title) {
+        title = this.$t('NoTitle')
+      }
+      let action = this.action
+      if (action === 'clone') {
+        action = 'create'
+      }
+      title = toSentenceCase(action) + this.$t('WordSep') + title.toLowerCase()
+      return title
+    },
     getDefaultDrawer(action) {
       const route = this.$route.name
       const actionRouteName = route.replace('List', toSentenceCase(action))
@@ -167,7 +174,7 @@ export default {
         return component
       }
     },
-    showDrawer(action) {
+    async showDrawer(action) {
       this.action = action
       if (action === 'create') {
         this.drawerComponent = this.createDrawer
@@ -183,7 +190,10 @@ export default {
       if (!this.drawerComponent) {
         this.drawerComponent = this.getDefaultDrawer(action)
       }
-      console.log('Show drawer', this.drawerComponent)
+      if (this.getDrawerTitle) {
+        const actionMeta = await this.$store.getters['common/drawerActionMeta']
+        this.title = this.getDrawerTitle({ action, ...actionMeta })
+      }
       this.drawerVisible = true
     },
     onCreate(meta) {
@@ -197,7 +207,6 @@ export default {
       })
     },
     reloadTable() {
-      console.log('Reload table ....')
       if (this.reloadOrderQuery) {
         this.iTableConfig.url = setUrlParam(this.iTableConfig.url, 'order', this.reloadOrderQuery)
       }
diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index 0ce3e0de2..876b66bfd 100644
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -46,7 +46,10 @@ export default {
           removeColorOnClick: false,
           beforeClick: () => {
           },
-          getTitle({ col, row, cellValue }) {
+          getTitle({ row, cellValue }) {
+            return cellValue || row.name
+          },
+          getDrawerTitle({ row, cellValue }) {
             return cellValue || row.name
           },
           getIcon({ col, row, cellValue }) {
@@ -124,13 +127,14 @@ export default {
         this.$cookie.set(route.name, route.query.tab, 1)
         this.$route.query.tab = route.query.tab
       }
-      this.$store.dispatch('common/setDrawerActionMeta', {
+      const payload = {
         action: 'detail',
         row: this.row,
         col: this.col,
-        id: route.params.id
-      }).then(() => {
-        this.drawerTitle = this.iTitle
+        id: route.params.id || this.row.id
+      }
+      this.$store.dispatch('common/setDrawerActionMeta', payload).then(() => {
+        this.drawerTitle = this.formatterArgs.getDrawerTitle(payload)
         this.drawerVisible = true
       })
     },
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index 70e3e22f6..bd3c377d0 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -99,7 +99,6 @@ export default {
         return this.activeTab
       },
       set(item) {
-        console.log('SEt active tab', item)
         this.activeTab = item
         this.$emit('update:activeMenu', item)
       }
diff --git a/src/views/accounts/Account/AccountDetail/index.vue b/src/views/accounts/Account/AccountDetail/index.vue
index 8ccbba07d..b2fa978aa 100644
--- a/src/views/accounts/Account/AccountDetail/index.vue
+++ b/src/views/accounts/Account/AccountDetail/index.vue
@@ -62,6 +62,9 @@ export default {
   methods: {
     addAccountSuccess() {
       this.$store.commit('common/reload')
+    },
+    getPageTitle({ row }) {
+      return `${row.username}@${row.asset.name}`
     }
   }
 }
diff --git a/src/views/accounts/Account/AccountList.vue b/src/views/accounts/Account/AccountList.vue
index d93237d78..ee729c3e9 100644
--- a/src/views/accounts/Account/AccountList.vue
+++ b/src/views/accounts/Account/AccountList.vue
@@ -9,7 +9,7 @@
 <script>
 import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
 import AccountListTable from '@/components/Apps/AccountListTable/AccountList.vue'
-import { DetailFormatter, AccountConnectFormatter } from '@/components/Table/TableFormatters'
+import { AccountConnectFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AssetAccountList',
@@ -32,7 +32,7 @@ export default {
             formatterArgs: {
               drawer: true,
               can: this.$hasPerm('assets.view_asset'),
-              getTitle: ({ row }) => row.asset.name,
+              getTitle: ({ row }) => row.asset.name + row.asset.id,
               getRoute: ({ row }) => ({
                 name: 'AssetDetail',
                 params: { id: row.asset.id },
@@ -65,47 +65,47 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
-    background-color: #f5f7fa;
+.asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
+  background-color: #f5f7fa;
+}
+
+.asset-table {
+  &:hover {
+    cursor: pointer;
   }
 
-  .asset-table {
-    &:hover {
-      cursor: pointer;
-    }
-
-    & ::v-deep .table-content {
-      margin-left: 21px;
-    }
-
-    & ::v-deep .el-table__row {
-      height: 40px;
-
-      & > td {
-        padding: 0;
-      }
-    }
+  & ::v-deep .table-content {
+    margin-left: 21px;
   }
 
-  .noDataR {
-    width: 100%;
-    height: 40vh;
+  & ::v-deep .el-table__row {
+    height: 40px;
+
+    & > td {
+      padding: 0;
+    }
+  }
+}
+
+.noDataR {
+  width: 100%;
+  height: 40vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-direction: column;
+
+  .hintWrap {
+    color: #D4D6E6;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    font-size: 18px;
     flex-direction: column;
-
-    .hintWrap {
-      color: #D4D6E6;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      flex-direction: column;
-    }
   }
+}
 
-  .asset-user-table {
-    padding-left: 20px;
-  }
+.asset-user-table {
+  padding-left: 20px;
+}
 </style>
diff --git a/src/views/users/User/UserDetail/index.vue b/src/views/users/User/UserDetail/index.vue
index 9a27da422..d67e9f838 100644
--- a/src/views/users/User/UserDetail/index.vue
+++ b/src/views/users/User/UserDetail/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="user" v-bind="config" v-on="$listeners">
+  <GenericDetailPage
+    :active-menu.sync="config.activeMenu"
+    :object.sync="user"
+    v-bind="config"
+    v-on="$listeners"
+  >
     <keep-alive>
       <component :is="config.activeMenu" :object="user" />
     </keep-alive>