perf：Universal Drawer assembly

2025-09-17 15:52:32 +00:00 · 2024-12-05 18:09:20 +08:00
parent 7f13ef35a7
commit d0988da277
8 changed files with 133 additions and 114 deletions
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -299,7 +299,7 @@ export default {
        columnsMeta: {
          name: {
            width: '120px',
-            formatter: function(row) {
+            formatter: (row) => {
              const to = {
                name: 'AssetAccountDetail',
                params: { id: row.id }
@@ -333,7 +333,7 @@ export default {
            }
          },
          asset: {
-            formatter: function(row) {
+            formatter: (row) => {
              const to = {
                name: 'AssetDetail',
                params: { id: row.asset.id }
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -12,14 +12,25 @@
        {{ iTitle }}
      </slot>
    </el-link>
+
+    <Drawer v-if="showTableDetailDrawer" :title="drawerTitle" @close-drawer="showTableDetailDrawer = !showTableDetailDrawer">
+      <component :is="currentTemplate" />
+    </Drawer>
  </div>
 </template>

 <script>
 import BaseFormatter from './base.vue'
+import Drawer from '@/components/Drawer/index.vue'

 export default {
  name: 'DetailFormatter',
+  components: {
+    Drawer,
+    AssetDetail: () => import('@/views/assets/Asset/AssetDetail'),
+    AssetAccountList: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
+    AccountTemplateDetail: () => import('@/views/accounts/AccountTemplate/AccountTemplateDetail/index.vue')
+  },
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
@@ -46,6 +57,9 @@ export default {
    const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    return {
      linkClicked: false,
+      showTableDetailDrawer: false,
+      drawerTitle: '',
+      currentTemplate: null,
      formatterArgs: formatterArgs
    }
  },
@@ -107,12 +121,24 @@ export default {
      const detailRoute = this.getDetailRoute()

      if (this.formatterArgs.openInNewPage) {
-        this.linkClicked = this.formatterArgs.removeColorOnClick
        const { href } = this.$router.resolve(detailRoute)
-        window.open(href, '_blank')
-      } else {
-        this.$router.push(detailRoute)
+        this.linkClicked = this.formatterArgs.removeColorOnClick
+
+        return window.open(href, '_blank')
      }
+
+      if (this.formatterArgs.isPam) {
+        this.showTableDetailDrawer = true
+
+        console.log('%c DEBUG[ detailRoute ]-20:', 'font-size:13px; background:pink; color:#2E8B57;', detailRoute)
+
+        this.currentTemplate = detailRoute.name
+        this.$route.params.id = detailRoute.params.id
+
+        return
+      }
+
+      this.$router.push(detailRoute)
    }
  }
 }
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -1,4 +1,5 @@
 <template>
+  <div>
    <el-row :gutter="20">
      <el-col :md="15" :sm="24" class="auto-detail-card">
        <AutoDetailCard :object="object" v-bind="detail" />
@@ -20,6 +21,16 @@
        />
      </el-col>
    </el-row>
+
+    <el-drawer
+      size="50%"
+      :with-header="false"
+      :append-to-body="true"
+      :visible.sync="pamDrawerShow"
+    >
+      <component :is="drawerRefName" />
+    </el-drawer>
+  </div>
 </template>

 <script>
@@ -28,12 +39,14 @@ import QuickActions from '@/components/QuickActions/index.vue'
 import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret.vue'
 import { openTaskPage } from '@/utils/jms'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
+import AssetDetail from '@/views/assets/Asset/AssetDetail'

 export default {
  name: 'Detail',
  components: {
    AutoDetailCard,
    QuickActions,
+    AssetDetail,
    AutomationParamsForm,
    ViewSecret
  },
@@ -47,6 +60,8 @@ export default {
  data() {
    const vm = this
    return {
+      pamDrawerShow: false,
+      drawerRefName: null,
      needSetAutoPushParams: false,
      autoPushVisible: false,
      secretUrl: `/api/v1/accounts/account-secrets/${this.object.id}/`,
@@ -213,6 +228,20 @@ export default {
              name: 'AssetDetail',
              params: { id: this.object.asset.id }
            }
+
+            if (this.$route.query.type === 'pam') {
+              return (
+                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
+                  this.pamDrawerShow = true
+                  this.$route.params.id = this.object.asset.id
+
+                  this.drawerRefName = 'AssetDetail'
+                }}>
+                  {value.name}
+                </span>
+              )
+            }
+
            return <router-link to={route}>{value?.name}</router-link>
          },
          su_from: (item, value) => {
--- a/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
@@ -59,7 +59,6 @@
    </div>

    <el-drawer
-      direction="btt"
      size="50%"
      :with-header="false"
      :append-to-body="true"
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -54,7 +54,9 @@ export default {
        },
        columnsMeta: {
          name: {
-            formatter: vm.$hasPerm('users.view_user') ? DetailFormatter : '',
+            formatter: (row) => {
+              return vm.$hasPerm('users.view_user') ? DetailFormatter : ''
+            },
            formatterArgs: {
              route: 'UserDetail'
            }
--- a/src/views/pam/Account/AccountList.vue
+++ b/src/views/pam/Account/AccountList.vue
@@ -1,31 +1,20 @@
 <template>
  <div>
    <AccountListTable ref="table" v-bind="tableConfig" :origin="'pam'" />
-
-    <Drawer v-if="showTableDetailDrawer" :title="drawerTitle" @close-drawer="showTableDetailDrawer = !showTableDetailDrawer">
-      <component :is="currentTemplate" />
-    </Drawer>
  </div>
 </template>

 <script>
-import Drawer from '@/components/Drawer/index.vue'
-import AssetDetail from '@/views/assets/Asset/AssetDetail'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import AccountListTable from '@/components/Apps/AccountListTable/AccountList.vue'
-import AssetAccountDetail from '@/views/accounts/Account/AccountDetail/index.vue'

 export default {
  name: 'AssetAccountList',
  components: {
-    Drawer,
-    AssetDetail,
-    AccountListTable,
-    AssetAccountDetail
+    AccountListTable
  },
  data() {
    return {
-      showTableDetailDrawer: false,
-      currentTemplate: null,
      drawerTitle: '',
      tableConfig: {
        url: '/api/v1/accounts/accounts/',
@@ -33,39 +22,26 @@ export default {
        hasImport: true,
        columnsMeta: {
          name: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-
-                  this.currentTemplate = 'AssetAccountDetail'
-                  this.showTableDetailDrawer = true
-                  this.drawerTitle = this.$t('AssetAccountDetail')
-                }}>
-                  {row.name}
-                </span>
-              )
-            }
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'AssetAccountList',
+                params: { id: row.id }
+              })
+            },
+            formatter: DetailFormatter
          },
          asset: {
-            formatter: (row) => {
-              return (
-                this.$hasPerm('assets.view_asset') ? (
-                  <span
-                    style={{ color: '#1c84c6', cursor: 'pointer' }}
-                    onClick={() => {
-                      this.$route.params.id = row.asset.id
-                      this.currentTemplate = 'AssetDetail'
-                      this.showTableDetailDrawer = true
-                      this.drawerTitle = this.$t('AssetDetail')
-                    }}
-                  >
-                    {row.name}
-                  </span>
-                ) : (
-                  <span>{row.asset ? row.asset.name : ''}</span>
-                )
-              )
+            formatter: DetailFormatter,
+            formatterArgs: {
+              isPam: true,
+              can: this.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => row.asset.name,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.asset.id }
+              })
            }
          },
          connect: {
--- a/src/views/pam/Account/AccountTemplate.vue
+++ b/src/views/pam/Account/AccountTemplate.vue
@@ -53,18 +53,13 @@ export default {
        },
        columnsMeta: {
          name: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-
-                  this.currentTemplate = 'AccountTemplateDetail'
-                  this.showTableUpdateDrawer = true
-                  this.drawerTitle = this.$t('AccountTemplate')
-                }}>
-                  {row.name}
-                </span>
-              )
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'AccountTemplateDetail',
+                params: { id: row.id }
+              })
            }
          },
          privileged: {
--- a/src/views/pam/Account/AssetList.vue
+++ b/src/views/pam/Account/AssetList.vue
@@ -13,7 +13,7 @@ import AssetDetail from '@/views/assets/Asset/AssetDetail'
 import BaseList from '@/views/assets/Asset/AssetList/components/BaseList'

 import HostUpdate from '@/views/assets/Asset/AssetCreateUpdate/HostCreateUpdate.vue'
-import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'

 export default {
  components: {
@@ -35,36 +35,28 @@ export default {
        columnsExclude: ['date_verified'],
        columnsMeta: {
          name: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-                  this.$route.query.tab = 'Basic'
-
-                  this.currentTemplate = 'AssetDetail'
-                  this.showTableUpdateDrawer = true
-                  this.drawerTitle = this.$t('AssetDetail')
-                }}>
-                  {row.name}
-                </span>
-              )
-            }
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.id }
+              })
+            },
+            formatter: DetailFormatter
          },
          accounts_amount: {
-            formatter: (row) => {
-              return (
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
-                  this.$route.params.id = row.id
-                  this.$route.query.tab = 'Account'
-
-                  this.currentTemplate = 'AssetDetail'
-                  this.showTableUpdateDrawer = true
-                  this.drawerTitle = this.$t('AssetDetail')
-                }}>
-                  {row.name}
-                </span>
-              )
-            }
+            formatterArgs: {
+              can: true,
+              isPam: true,
+              getTitle: ({ row }) => row.accounts_amount,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.id },
+                query: { tab: 'Account' }
+              })
+            },
+            formatter: DetailFormatter
          },
          actions: {
            formatter: ActionsFormatter,