From cc4b5183ea93fb93044b10e2f6264ec34eadcae5 Mon Sep 17 00:00:00 2001
From: feng <1304903146@qq.com>
Date: Tue, 25 Feb 2025 19:11:15 +0800
Subject: [PATCH] perf: report to iframe

---
 src/components/Dialog/ReportDialog.vue        | 75 +++++++++++++++++++
 src/router/pam/automations.js                 |  4 +-
 .../AccountBackupExecutionList.vue            | 15 +++-
 .../AccountChangeSecretExecutionList.vue      | 19 +++--
 .../AccountDiscover/TaskCreateUpdate.vue      |  4 +-
 .../AccountDiscover/TaskExecutionList.vue     | 16 ++--
 src/views/accounts/AccountDiscover/index.vue  |  2 +-
 .../AccountPush/AccountPushExecutionList.vue  | 31 ++++----
 .../components/AccountDiscoverDialog.vue      | 11 +--
 .../Asset/AssetList/components/const.js       |  2 +-
 src/views/pam/Account/AssetList.vue           | 13 +++-
 .../RiskDetect/AccountCheckExecutionList.vue  | 13 +++-
 12 files changed, 153 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Dialog/ReportDialog.vue

diff --git a/src/components/Dialog/ReportDialog.vue b/src/components/Dialog/ReportDialog.vue
new file mode 100644
index 000000000..2952f08cc
--- /dev/null
+++ b/src/components/Dialog/ReportDialog.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Dialog
+      v-if="iVisible"
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :show-confirm="false"
+      :title="$tc('Report')"
+      :visible.sync="iVisible"
+      top="35vh"
+      width="80%"
+      @close="loading=true"
+    >
+      <span v-if="loading" v-loading="loading" class="loading" />
+      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+
+export default {
+  name: 'ReportDialog',
+  components: {
+    Dialog
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: true
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  mounted() {
+  },
+  beforeMount() {
+  },
+  methods: {
+    onIframeLoad() {
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+iframe {
+  width: 100%;
+  height: 500px;
+}
+
+.loading {
+  margin-top: 20px;
+  display: block;
+}
+</style>
diff --git a/src/router/pam/automations.js b/src/router/pam/automations.js
index 4a76bb629..1238e8329 100644
--- a/src/router/pam/automations.js
+++ b/src/router/pam/automations.js
@@ -10,7 +10,7 @@ export default [
     },
     name: 'AccountDiscover',
     meta: {
-      title: i18n.t('AccountDiscoverList'),
+      title: i18n.t('AccountDiscover'),
       app: 'accounts',
       icon: 'discovery'
       // activeMenu: '/console/accounts/automations',
@@ -43,7 +43,7 @@ export default [
         name: 'AccountDiscoverTaskDetail',
         hidden: true,
         meta: {
-          title: i18n.t('AccountDiscoverTask'),
+          title: i18n.t('AccountDiscover'),
           // activeMenu: '/console/accounts/automations',
           permissions: ['accounts.view_gatheraccountsautomation']
         }
diff --git a/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue b/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue
index f7e6ebe94..188fd6c18 100644
--- a/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupExecution/AccountBackupExecutionList.vue
@@ -1,16 +1,21 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index.vue'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'
 
 export default {
   name: 'AccountBackupExecutionList',
   components: {
-    GenericListTable
+    GenericListTable,
+    ReportDialog
   },
   props: {
     object: {
@@ -20,7 +25,10 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
+      visible: false,
+      reportUrl: '',
       tableConfig: {
         url: '/api/v1/accounts/account-backup-plan-executions/',
         columns: [
@@ -87,7 +95,8 @@ export default {
                   type: 'success',
                   can: this.$hasPerm('accounts.view_backupaccountexecution'),
                   callback: function({ row }) {
-                    window.open(`/api/v1/accounts/account-backup-plan-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/account-backup-plan-executions/${row.id}/report/`
                   }
                 }
               ]
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue
index 740a06a3e..e95cf7405 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretExecution/AccountChangeSecretExecutionList.vue
@@ -1,19 +1,27 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index.vue'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'
 
 export default {
   name: 'AccountChangeSecretExecutionList',
   components: {
+    ReportDialog,
     GenericListTable
   },
   data() {
+    const vm = this
     return {
+      visible: false,
+      reportUrl: '',
       tableConfig: {
         url: '/api/v1/accounts/change-secret-executions',
         columns: [
@@ -72,12 +80,6 @@ export default {
           status: {
             label: this.$t('Result')
           },
-          timedelta: {
-            label: this.$t('TimeDelta'),
-            formatter: function(row) {
-              return row.timedelta.toFixed(2) + 's'
-            }
-          },
           actions: {
             formatterArgs: {
               hasDelete: false,
@@ -99,7 +101,8 @@ export default {
                   type: 'success',
                   can: this.$hasPerm('accounts.view_changesecretexecution'),
                   callback: function({ row }) {
-                    window.open(`/api/v1/accounts/change-secret-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/change-secret-executions/${row.id}/report/`
                   }
                 },
                 {
diff --git a/src/views/accounts/AccountDiscover/TaskCreateUpdate.vue b/src/views/accounts/AccountDiscover/TaskCreateUpdate.vue
index 0706a4578..d5fcaa246 100644
--- a/src/views/accounts/AccountDiscover/TaskCreateUpdate.vue
+++ b/src/views/accounts/AccountDiscover/TaskCreateUpdate.vue
@@ -67,8 +67,8 @@ export default {
           }
         }
       },
-      createSuccessNextRoute: { name: 'AccountDiscoverList' },
-      updateSuccessNextRoute: { name: 'AccountDiscoverList' },
+      createSuccessNextRoute: { name: 'AccountDiscover' },
+      updateSuccessNextRoute: { name: 'AccountDiscover' },
       cleanFormValue(values) {
         values.interval = values.interval || null
         return values
diff --git a/src/views/accounts/AccountDiscover/TaskExecutionList.vue b/src/views/accounts/AccountDiscover/TaskExecutionList.vue
index 79cb77e03..09c483874 100644
--- a/src/views/accounts/AccountDiscover/TaskExecutionList.vue
+++ b/src/views/accounts/AccountDiscover/TaskExecutionList.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
   </div>
 </template>
 
@@ -11,10 +12,12 @@ import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import { taskStatusFormatterMeta } from '@/components/const'
 import TaskStatusChoicesFormatter from '@/components/Table/TableFormatters/TaskStatusFormatter.vue'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'
 
 export default {
   name: 'AccountDiscoverTaskExecutionList',
   components: {
+    ReportDialog,
     GenericListTable
   },
   props: {
@@ -25,7 +28,10 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
+      visible: false,
+      reportUrl: '',
       showTableUpdateDrawer: false,
       currentTemplate: null,
       drawerTitle: '',
@@ -72,13 +78,6 @@ export default {
             id: ({ row }) => row.automation,
             can: this.$hasPerm('accounts.view_gatheraccountsexecution')
           },
-          timedelta: {
-            label: this.$t('TimeDelta'),
-            formatter: function(row) {
-              return row.timedelta.toFixed(2) + 's'
-            },
-            width: null
-          },
           date_start: {
             width: null
           },
@@ -102,7 +101,8 @@ export default {
                   type: 'success',
                   can: this.$hasPerm('accounts.view_gatheraccountsexecution'),
                   callback: function({ row }) {
-                    window.open(`/api/v1/accounts/gather-account-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/gather-account-executions/${row.id}/report/`
                   }
                 }
               ]
diff --git a/src/views/accounts/AccountDiscover/index.vue b/src/views/accounts/AccountDiscover/index.vue
index c2c129861..a32caf39c 100644
--- a/src/views/accounts/AccountDiscover/index.vue
+++ b/src/views/accounts/AccountDiscover/index.vue
@@ -27,7 +27,7 @@ export default {
             component: () => import('@/views/accounts/AccountDiscover/AccountDiscoverList.vue')
           },
           {
-            title: this.$t('AccountDiscoverTask'),
+            title: this.$t('AccountDiscover'),
             name: 'AccountDiscoverTaskList',
             hidden: !this.$hasPerm('accounts.view_gatheraccountsautomation'),
             component: () => import('@/views/accounts/AccountDiscover/AccountDiscoverTaskList.vue')
diff --git a/src/views/accounts/AccountPush/AccountPushExecutionList.vue b/src/views/accounts/AccountPush/AccountPushExecutionList.vue
index 25d5360dc..698b58da8 100644
--- a/src/views/accounts/AccountPush/AccountPushExecutionList.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionList.vue
@@ -1,24 +1,32 @@
 <template>
-  <GenericListTable
-    ref="listTable"
-    :detail-drawer="detailDrawer"
-    :header-actions="headerActions"
-    :table-config="tableConfig"
-  />
+  <div>
+    <GenericListTable
+      ref="listTable"
+      :detail-drawer="detailDrawer"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+    />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index.vue'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog'
 
 export default {
   name: 'AccountPushExecutionList',
   components: {
-    GenericListTable
+    GenericListTable,
+    ReportDialog
   },
   data() {
+    const vm = this
     return {
+      visible: false,
+      reportUrl: '',
       detailDrawer: () => import('@/views/accounts/AccountPush/AccountPushExecutionDetail/index.vue'),
       tableConfig: {
         url: '/api/v1/accounts/push-account-executions',
@@ -78,12 +86,6 @@ export default {
           status: {
             label: this.$t('Result')
           },
-          timedelta: {
-            label: this.$t('TimeDelta'),
-            formatter: function(row) {
-              return row.timedelta.toFixed(2) + 's'
-            }
-          },
           actions: {
             formatterArgs: {
               hasDelete: false,
@@ -104,7 +106,8 @@ export default {
                   title: this.$t('Report'),
                   can: this.$hasPerm('accounts.view_pushaccountexecution'),
                   callback: function({ row }) {
-                    window.open(`/api/v1/accounts/push-account-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/push-account-executions/${row.id}/report/`
                   }
                 },
                 {
diff --git a/src/views/assets/Asset/AssetList/components/AccountDiscoverDialog.vue b/src/views/assets/Asset/AssetList/components/AccountDiscoverDialog.vue
index 5f3c61c30..cdc37af7b 100644
--- a/src/views/assets/Asset/AssetList/components/AccountDiscoverDialog.vue
+++ b/src/views/assets/Asset/AssetList/components/AccountDiscoverDialog.vue
@@ -11,17 +11,10 @@
       width="80%"
       @close="loading=true"
     >
-      <!--      <ListTable v-bind="config" />-->
       <span v-if="loading" v-loading="loading" class="loading" />
-      <iframe :src="url" frameborder="0" @load="onIframeLoad" />
+      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
     </Dialog>
-    <!--    <RemoveAccount-->
-    <!--      v-if="showDeleteAccountDialog"-->
-    <!--      :accounts="gatherAccounts"-->
-    <!--      :visible.sync="showDeleteAccountDialog"-->
-    <!--    />-->
   </div>
-
 </template>
 
 <script>
@@ -83,8 +76,6 @@ export default {
   beforeMount() {
   },
   methods: {
-    onVisibleChange() {
-    },
     onIframeLoad() {
       this.loading = false
     }
diff --git a/src/views/assets/Asset/AssetList/components/const.js b/src/views/assets/Asset/AssetList/components/const.js
index ca38e5e03..e9101e77e 100644
--- a/src/views/assets/Asset/AssetList/components/const.js
+++ b/src/views/assets/Asset/AssetList/components/const.js
@@ -239,7 +239,7 @@ export function getDefaultConfig(vm) {
             },
             {
               name: 'DiscoverAccounts',
-              title: 'Discover accounts',
+              title: vm.$t('AccountDiscover'),
               callback: ({ row }) => {
                 vm.discoveryDialog.asset = row.id
                 setTimeout(() => {
diff --git a/src/views/pam/Account/AssetList.vue b/src/views/pam/Account/AssetList.vue
index 92063b0b1..7570270ea 100644
--- a/src/views/pam/Account/AssetList.vue
+++ b/src/views/pam/Account/AssetList.vue
@@ -1,5 +1,9 @@
 <template>
-  <BaseList :table-config="tableConfig" v-bind="config" />
+  <BaseList
+    :table-config="tableConfig"
+    :header-actions="headerActions"
+    v-bind="config"
+  />
 </template>
 
 <script>
@@ -17,6 +21,13 @@ export default {
       },
       tableConfig: {
         columnsExclude: ['date_verified']
+      },
+      headerActions: {
+        handleImportClick: ({ selectedRows }) => {
+          this.$message.warning({
+            message: this.$t('ImportMessage')
+          })
+        }
       }
     }
   }
diff --git a/src/views/pam/RiskDetect/AccountCheckExecutionList.vue b/src/views/pam/RiskDetect/AccountCheckExecutionList.vue
index e67d018b1..e6bc86b70 100644
--- a/src/views/pam/RiskDetect/AccountCheckExecutionList.vue
+++ b/src/views/pam/RiskDetect/AccountCheckExecutionList.vue
@@ -1,15 +1,20 @@
 <template>
-  <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+  <div>
+    <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+    <ReportDialog :visible.sync="visible" :url="reportUrl" />
+  </div>
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import ReportDialog from '@/components/Dialog/ReportDialog.vue'
 
 export default {
   name: 'CheckAccountExecutionList',
   components: {
+    ReportDialog,
     GenericListTable
   },
   props: {
@@ -20,7 +25,10 @@ export default {
     }
   },
   data() {
+    const vm = this
     return {
+      visible: false,
+      reportUrl: '',
       tableConfig: {
         url: '/api/v1/accounts/check-account-executions/',
         columns: [
@@ -97,7 +105,8 @@ export default {
                   type: 'success',
                   can: this.$hasPerm('accounts.view_checkaccountexecution'),
                   callback: function({ row }) {
-                    window.open(`/api/v1/accounts/check-account-executions/${row.id}/report/`)
+                    vm.visible = true
+                    vm.reportUrl = `/api/v1/accounts/check-account-executions/${row.id}/report/`
                   }
                 }
               ]