perf: Add drawer

2026-01-15 14:24:39 +00:00 · 2024-12-09 18:45:58 +08:00
parent 18eda16851
commit ef43be0cb7
6 changed files with 137 additions and 18 deletions
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -29,7 +29,10 @@ export default {
    Drawer,
    AssetDetail: () => import('@/views/assets/Asset/AssetDetail'),
    AssetAccountList: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
+    AccountPushDetail: () => import('@/views/accounts/AccountPush/AccountPushDetail/index.vue'),
    AccountDiscoverTaskDetail: () => import('@/views/accounts/AccountDiscover/TaskDetail/index'),
+    AccountBackupDetail: () => import('@/views/accounts/AccountBackup/AccountBackupDetail/index.vue'),
+    IntegrationApplicationDetail: () => import('@/views/pam/Integration/ApplicationDetail/index.vue'),
    AccountTemplateDetail: () => import('@/views/accounts/AccountTemplate/AccountTemplateDetail/index.vue')
  },
  extends: BaseFormatter,
@@ -132,6 +135,7 @@ export default {
        this.showTableDetailDrawer = true

        this.currentTemplate = detailRoute.name
+        this.drawerTitle = this.$t(detailRoute.name)
        this.$route.params.id = detailRoute.params.id

        return
@@ -167,4 +171,8 @@ export default {
  width: 28px;
  height: 28px;
 }
+
+::v-deep .go-back {
+  display: none;
+}
 </style>
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
@@ -13,6 +13,7 @@ import AccountBackupExecutionList
 from '@/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue'

 export default {
+  name: 'AccountBackupDetail',
  components: {
    GenericDetailPage,
    AccountBackupInfo,
@@ -39,7 +40,3 @@ export default {
  }
 }
 </script>
-
-<style scoped>
-
-</style>
--- a/src/views/accounts/AccountBackup/AccountBackupList.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupList.vue
@@ -1,20 +1,33 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+
+    <Drawer v-if="showTableUpdateDrawer" :title="drawerTitle" @close-drawer="showTableUpdateDrawer = !showTableUpdateDrawer">
+      <component :is="currentTemplate" />
+    </Drawer>
+  </div>
 </template>

 <script>
 import { GenericListTable } from '@/layout/components'
 import { ArrayFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
+import Drawer from '@/components/Drawer/index.vue'

 export default {
  name: 'AccountBackupList',
  components: {
-    GenericListTable
+    Drawer,
+    GenericListTable,
+    AccountBackupUpdate: () => import('@/views/accounts/AccountBackup/AccountBackupCreateUpdate.vue'),
+    AccountBackupCreate: () => import('@/views/accounts/AccountBackup/AccountBackupCreateUpdate.vue')
  },
  data() {
    const vm = this
    return {
+      drawerTitle: '',
+      showTableUpdateDrawer: false,
+      currentTemplate: null,
      tableConfig: {
        url: '/api/v1/accounts/account-backup-plans/',
        permissions: {
@@ -36,7 +49,13 @@ export default {
          name: {
            formatter: DetailFormatter,
            formatterArgs: {
-              route: 'AccountBackupDetail'
+              isPam: true,
+              route: 'AccountBackupDetail',
+              getRoute: ({ row }) => ({
+                name: 'AccountBackupDetail',
+                params: { id: row.id },
+                query: { type: 'pam' }
+              })
            }
          },
          types: {
@@ -68,7 +87,14 @@ export default {
                vm.$router.push({ name: 'AccountBackupCreate', query: { clone_from: row.id }})
              },
              onUpdate: ({ row }) => {
-                vm.$router.push({ name: 'AccountBackupUpdate', params: { id: row.id }})
+                this.$route.params.id = row.id
+
+                // 解决表单详情中的跳转
+                this.$route.query.type = 'pam'
+
+                this.currentTemplate = 'AccountBackupUpdate'
+                this.drawerTitle = this.$t('AccountBackupUpdate')
+                this.showTableUpdateDrawer = true
              },
              extraActions: [
                {
@@ -101,6 +127,11 @@ export default {
          return {
            name: 'AccountBackupCreate'
          }
+        },
+        onCreate: () => {
+          this.currentTemplate = 'AccountBackupCreate'
+          this.drawerTitle = this.$t('AccountBackupCreate')
+          this.showTableUpdateDrawer = true
        }
      }
    }
--- a/src/views/accounts/AccountPush/AccountPushList.vue
+++ b/src/views/accounts/AccountPush/AccountPushList.vue
@@ -1,20 +1,33 @@
 <template>
-  <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+
+    <Drawer v-if="showTableUpdateDrawer" :title="drawerTitle" @close-drawer="showTableUpdateDrawer = !showTableUpdateDrawer">
+      <component :is="currentTemplate" />
+    </Drawer>
+  </div>
 </template>

 <script>
-import { DetailFormatter } from '@/components/Table/TableFormatters'
+import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 import { GenericListTable } from '@/layout/components'
+import Drawer from '@/components/Drawer/index.vue'

 export default {
  name: 'AccountPushList',
  components: {
-    GenericListTable
+    Drawer,
+    GenericListTable,
+    AccountPushUpdate: () => import('@/views/accounts/AccountPush/AccountPushCreateUpdate.vue'),
+    AccountPushCreate: () => import('@/views/accounts/AccountPush/AccountPushCreateUpdate.vue')
  },
  data() {
    const vm = this
    return {
+      drawerTitle: '',
+      showTableUpdateDrawer: false,
+      currentTemplate: null,
      tableConfig: {
        url: '/api/v1/accounts/push-account-automations/',
        columns: [
@@ -32,7 +45,12 @@ export default {
          name: {
            formatter: DetailFormatter,
            formatterArgs: {
-              route: 'AccountCheckDetail'
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'AccountPushDetail',
+                params: { id: row.id },
+                query: { type: 'pam' }
+              })
            }
          },
          accounts: {
@@ -81,7 +99,20 @@ export default {
            }
          },
          actions: {
+            formatter: ActionsFormatter,
            formatterArgs: {
+              isPam: true,
+              updateRoute: 'AccountPushUpdate',
+              onUpdate: ({ row }) => {
+                this.$route.params.id = row.id
+
+                // 解决表单详情中的跳转
+                this.$route.query.type = 'pam'
+
+                this.currentTemplate = 'AccountPushUpdate'
+                this.drawerTitle = this.$t('AccountPushUpdate')
+                this.showTableUpdateDrawer = true
+              },
              extraActions: [
                {
                  title: vm.$t('Execute'),
@@ -111,7 +142,12 @@ export default {
      headerActions: {
        hasRefresh: true,
        hasExport: false,
-        hasImport: false
+        hasImport: false,
+        onCreate: () => {
+          this.currentTemplate = 'AccountPushCreate'
+          this.drawerTitle = this.$t('AccountPushCreate')
+          this.showTableUpdateDrawer = true
+        }
      }
    }
  }
--- a/src/views/pam/Account/AssetList.vue
+++ b/src/views/pam/Account/AssetList.vue
@@ -72,7 +72,6 @@ export default {
                this.showTableUpdateDrawer = true
              }
            }
-
          }
        }
      }
--- a/src/views/pam/Integration/ApplicationList.vue
+++ b/src/views/pam/Integration/ApplicationList.vue
@@ -1,19 +1,34 @@
 <template>
-  <ListTable ref="table" v-bind="$data" />
+  <div>
+    <ListTable ref="table" v-bind="$data" />
+
+    <Drawer v-if="showTableUpdateDrawer" :title="drawerTitle" @close-drawer="showTableUpdateDrawer = !showTableUpdateDrawer">
+      <component :is="currentTemplate" />
+    </Drawer>
+  </div>
 </template>

 <script type="text/jsx">
+import Drawer from '@/components/Drawer/index.vue'
 import ListTable from '@/components/Table/ListTable/index.vue'
 import CopyableFormatter from '@/components/Table/TableFormatters/CopyableFormatter.vue'
+import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'

 export default {
  name: 'CloudAccountList',
  components: {
-    ListTable
+    Drawer,
+    ListTable,
+    IntegrationApplicationUpdate: () => import('@/views/pam/Integration/ApplicationCreateUpdate.vue'),
+    IntegrationApplicationCreate: () => import('@/views/pam/Integration/ApplicationCreateUpdate.vue')
+
  },
  data() {
    const vm = this
    return {
+      drawerTitle: '',
+      showTableUpdateDrawer: false,
+      currentTemplate: null,
      tableConfig: {
        url: '/api/v1/accounts/integration-applications/',
        columnsMeta: {
@@ -37,6 +52,17 @@ export default {
              return row.accounts_amount
            }
          },
+          name: {
+            formatterArgs: {
+              isPam: true,
+              getRoute: ({ row }) => ({
+                name: 'IntegrationApplicationDetail',
+                params: { id: row.id },
+                query: { type: 'pam' }
+              })
+            },
+            formatter: DetailFormatter
+          },
          secret: {
            label: this.$t('Secret'),
            formatter: CopyableFormatter,
@@ -47,6 +73,23 @@ export default {
                return app.secret
              }
            }
+          },
+          actions: {
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              isPam: true,
+              updateRoute: 'IntegrationApplicationUpdate',
+              onUpdate: ({ row }) => {
+                this.$route.params.id = row.id
+
+                // 解决表单详情中的跳转
+                this.$route.query.type = 'pam'
+
+                this.currentTemplate = 'IntegrationApplicationUpdate'
+                this.drawerTitle = this.$t('IntegrationApplicationUpdate')
+                this.showTableUpdateDrawer = true
+              }
+            }
          }
        },
        columnsExtra: ['secret'],
@@ -61,10 +104,15 @@ export default {
        hasImport: false,
        searchConfig: {
          getUrlQuery: false
+        },
+        onCreate: () => {
+          this.currentTemplate = 'IntegrationApplicationCreate'
+          this.drawerTitle = this.$t('IntegrationApplicationCreate')
+          this.showTableUpdateDrawer = true
        }
      }
    }
-  },
-  methods: {}
+  }
 }
 </script>
+