perf：Universal Drawer assembly

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 }

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')
+        this.linkClicked = this.formatterArgs.removeColorOnClick
-      } else {
+
-        this.$router.push(detailRoute)
+        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)
     }
   }
 }

src/views/accounts/Account/AccountDetail/Detail.vue

@@ -1,25 +1,36 @@
 <template>
-  <el-row :gutter="20">
+  <div>
-    <el-col :md="15" :sm="24" class="auto-detail-card">
+    <el-row :gutter="20">
-      <AutoDetailCard :object="object" v-bind="detail" />
+      <el-col :md="15" :sm="24" class="auto-detail-card">
-    </el-col>
+        <AutoDetailCard :object="object" v-bind="detail" />
-    <el-col :md="9" :sm="24" class="quick-actions">
+      </el-col>
-      <QuickActions :actions="quickActions" type="primary" />
+      <el-col :md="9" :sm="24" class="quick-actions">
-      <ViewSecret
+        <QuickActions :actions="quickActions" type="primary" />
-        v-if="showViewSecretDialog"
+        <ViewSecret
-        :account="object"
+          v-if="showViewSecretDialog"
-        :url="secretUrl"
+          :account="object"
-        :visible.sync="showViewSecretDialog"
+          :url="secretUrl"
-      />
+          :visible.sync="showViewSecretDialog"
-      <AutomationParamsForm
+        />
-        :has-button="false"
+        <AutomationParamsForm
-        :method="pushAccountMethod"
+          :has-button="false"
-        :visible.sync="autoPushVisible"
+          :method="pushAccountMethod"
-        @canSetting="onCanSetting"
+          :visible.sync="autoPushVisible"
-        @submit="onSubmit"
+          @canSetting="onCanSetting"
-      />
+          @submit="onSubmit"
-    </el-col>
+        />
-  </el-row>
+      </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) => {

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"

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'
             }

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 { DetailFormatter } from '@/components/Table/TableFormatters'
-import AssetDetail from '@/views/assets/Asset/AssetDetail'
 import AccountListTable from '@/components/Apps/AccountListTable/AccountList.vue'
-import AssetAccountDetail from '@/views/accounts/Account/AccountDetail/index.vue'
 
 export default {
   name: 'AssetAccountList',
   components: {
-    Drawer,
+    AccountListTable
-    AssetDetail,
-    AccountListTable,
-    AssetAccountDetail
   },
   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) => {
+            formatterArgs: {
-              return (
+              can: true,
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
+              isPam: true,
-                  this.$route.params.id = row.id
+              getRoute: ({ row }) => ({
-
+                name: 'AssetAccountList',
-                  this.currentTemplate = 'AssetAccountDetail'
+                params: { id: row.id }
-                  this.showTableDetailDrawer = true
+              })
-                  this.drawerTitle = this.$t('AssetAccountDetail')
+            },
-                }}>
+            formatter: DetailFormatter
-                  {row.name}
-                </span>
-              )
-            }
           },
           asset: {
-            formatter: (row) => {
+            formatter: DetailFormatter,
-              return (
+            formatterArgs: {
-                this.$hasPerm('assets.view_asset') ? (
+              isPam: true,
-                  <span
+              can: this.$hasPerm('assets.view_asset'),
-                    style={{ color: '#1c84c6', cursor: 'pointer' }}
+              getTitle: ({ row }) => row.asset.name,
-                    onClick={() => {
+              getRoute: ({ row }) => ({
-                      this.$route.params.id = row.asset.id
+                name: 'AssetDetail',
-                      this.currentTemplate = 'AssetDetail'
+                params: { id: row.asset.id }
-                      this.showTableDetailDrawer = true
+              })
-                      this.drawerTitle = this.$t('AssetDetail')
-                    }}
-                  >
-                    {row.name}
-                  </span>
-                ) : (
-                  <span>{row.asset ? row.asset.name : ''}</span>
-                )
-              )
             }
           },
           connect: {

src/views/pam/Account/AccountTemplate.vue

@@ -53,18 +53,13 @@ export default {
         },
         columnsMeta: {
           name: {
-            formatter: (row) => {
+            formatterArgs: {
-              return (
+              can: true,
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
+              isPam: true,
-                  this.$route.params.id = row.id
+              getRoute: ({ row }) => ({
-
+                name: 'AccountTemplateDetail',
-                  this.currentTemplate = 'AccountTemplateDetail'
+                params: { id: row.id }
-                  this.showTableUpdateDrawer = true
+              })
-                  this.drawerTitle = this.$t('AccountTemplate')
-                }}>
-                  {row.name}
-                </span>
-              )
             }
           },
           privileged: {

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) => {
+            formatterArgs: {
-              return (
+              can: true,
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
+              isPam: true,
-                  this.$route.params.id = row.id
+              getRoute: ({ row }) => ({
-                  this.$route.query.tab = 'Basic'
+                name: 'AssetDetail',
-
+                params: { id: row.id }
-                  this.currentTemplate = 'AssetDetail'
+              })
-                  this.showTableUpdateDrawer = true
+            },
-                  this.drawerTitle = this.$t('AssetDetail')
+            formatter: DetailFormatter
-                }}>
-                  {row.name}
-                </span>
-              )
-            }
           },
           accounts_amount: {
-            formatter: (row) => {
+            formatterArgs: {
-              return (
+              can: true,
-                <span style={{ color: '#1c84c6', cursor: 'pointer' }} onClick={() => {
+              isPam: true,
-                  this.$route.params.id = row.id
+              getTitle: ({ row }) => row.accounts_amount,
-                  this.$route.query.tab = 'Account'
+              getRoute: ({ row }) => ({
-
+                name: 'AssetDetail',
-                  this.currentTemplate = 'AssetDetail'
+                params: { id: row.id },
-                  this.showTableUpdateDrawer = true
+                query: { tab: 'Account' }
-                  this.drawerTitle = this.$t('AssetDetail')
+              })
-                }}>
+            },
-                  {row.name}
+            formatter: DetailFormatter
-                </span>
-              )
-            }
           },
           actions: {
             formatter: ActionsFormatter,