From ef43be0cb78076cf8b4afe4ce958c177f46cb277 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Mon, 9 Dec 2024 18:45:58 +0800
Subject: [PATCH] perf: Add drawer

---
 .../Table/TableFormatters/DetailFormatter.vue |  8 +++
 .../AccountBackupDetail/index.vue             |  5 +-
 .../AccountBackup/AccountBackupList.vue       | 39 +++++++++++--
 .../accounts/AccountPush/AccountPushList.vue  | 46 +++++++++++++--
 src/views/pam/Account/AssetList.vue           |  1 -
 src/views/pam/Integration/ApplicationList.vue | 56 +++++++++++++++++--
 6 files changed, 137 insertions(+), 18 deletions(-)

diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index 4ff7208dc..b72c2149e 100644
--- 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>
diff --git a/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue b/src/views/accounts/AccountBackup/AccountBackupDetail/index.vue
index 9c83493a9..40ec6677f 100644
--- 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>
diff --git a/src/views/accounts/AccountBackup/AccountBackupList.vue b/src/views/accounts/AccountBackup/AccountBackupList.vue
index d152305a2..3fbfa395f 100644
--- 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
         }
       }
     }
diff --git a/src/views/accounts/AccountPush/AccountPushList.vue b/src/views/accounts/AccountPush/AccountPushList.vue
index 5cb449e14..f19f94ab7 100644
--- 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
+        }
       }
     }
   }
diff --git a/src/views/pam/Account/AssetList.vue b/src/views/pam/Account/AssetList.vue
index 8e36a6466..91f38232c 100644
--- a/src/views/pam/Account/AssetList.vue
+++ b/src/views/pam/Account/AssetList.vue
@@ -72,7 +72,6 @@ export default {
                 this.showTableUpdateDrawer = true
               }
             }
-
           }
         }
       }
diff --git a/src/views/pam/Integration/ApplicationList.vue b/src/views/pam/Integration/ApplicationList.vue
index aadba5cab..032c734eb 100644
--- 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>
+