perf: update appliations

src/components/Table/CardTable/DataCardTable/CardPanel.vue

@@ -24,7 +24,6 @@
         </el-dropdown>
       </el-col>
     </el-row>
-    <el-divider />
     <el-row :gutter="20" class="panel-content">
       <el-col :span="6" class="panel-image">
         <el-image :src="imageUrl" fit="contain" />

src/components/Table/CardTable/DataCardTable/InfoPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="panel-item">
-    <div class="item-label">{{ title }}</div>
-    <div :title="content" class="text-info">{{ content || '' }}</div>
+    <span class="item-label">{{ title }} </span>
+    <span :title="content" class="text-info">{{ content || '' }}</span>
   </div>
 </template>
 

src/components/Table/TableFormatters/CopyableFormatter.vue

@@ -0,0 +1,56 @@
+<script>
+import BaseFormatter from './base.vue'
+import { copy } from '@/utils/common'
+export default {
+  name: 'CopyableFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          shadow: false,
+          getText: ({ cellValue }) => cellValue
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    iCellValue() {
+      if (this.formatterArgs.shadow) {
+        return '*'.repeat(6)
+      } else {
+        return this.cellValue
+      }
+    }
+  },
+  methods: {
+    async copy() {
+      const text = await this.formatterArgs.getText({ cellValue: this.cellValue, row: this.row })
+      copy(text)
+    }
+  }
+}
+</script>
+
+<template>
+  <span class="copyable">
+    {{ iCellValue }} <i class="el-icon-copy-document copy" @click="copy()" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.copy {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+</style>

src/router/pam/integrations.js

@@ -48,7 +48,7 @@ export default [
       {
         path: ':id',
         component: () => import('@/views/pam/Integration/ApplicationDetail/index.vue'),
-        name: 'ApplicationDetail',
+        name: 'IntegrationApplicationDetail',
         hidden: true,
         meta: {
           title: i18n.t('ApplicationDetail'),

src/views/pam/Integration/ApplicationList.vue

@@ -1,48 +1,67 @@
 <template>
-  <div>
-    <SmallCard ref="table" v-bind="$data" />
-  </div>
+  <ListTable ref="table" v-bind="$data" />
 </template>
 
 <script type="text/jsx">
-import SmallCard from '@/components/Table/CardTable/DataCardTable/index.vue'
-import { toSafeLocalDateStr } from '@/utils/time'
+import ListTable from '@/components/Table/ListTable/index.vue'
+import CopyableFormatter from '@/components/Table/TableFormatters/CopyableFormatter.vue'
 
 export default {
   name: 'CloudAccountList',
   components: {
-    SmallCard
+    ListTable
   },
   data() {
+    const vm = this
     return {
       tableConfig: {
         url: '/api/v1/accounts/integration-applications/',
+        columnsMeta: {
+          id: {
+            width: '300px',
+            formatter: CopyableFormatter
+          },
+          logo: {
+            width: '80px',
+            formatter: (row) => {
+              return (
+                <img src={row.logo} alt={row.name}
+                  style='width: 40px; height: 40px; border-radius: 50%;'
+                />
+              )
+            }
+          },
+          accounts: {
+            width: '100px',
+            formatter: (row) => {
+              return row.accounts_amount
+            }
+          },
+          secret: {
+            label: this.$t('Secret'),
+            formatter: CopyableFormatter,
+            formatterArgs: {
+              shadow: true,
+              getText: async function({ row }) {
+                const app = await vm.$axios.get(`/api/v1/accounts/integration-applications/${row.id}/secret/`)
+                return app.secret
+              }
+            }
+          }
+        },
+        columnsExtra: ['secret'],
+        columnsShow: {
+          default: [
+            'logo', 'id', 'secret', 'name', 'accounts', 'date_last_used', 'active'
+          ]
+        },
         permissions: { app: 'accounts', resource: 'integrationapplication' }
       },
       headerActions: {
         hasImport: false,
-        hasExport: false,
-        hasColumnSetting: false,
-        hasMoreActions: false,
         searchConfig: {
           getUrlQuery: false
         }
-      },
-      subComponentProps: {
-        getImage: (obj) => {
-          return obj.logo
-        },
-        getInfos: (obj) => {
-          return [
-            { title: `ID`, content: obj.id },
-            { title: this.$tc('DataLastUsed'), content: toSafeLocalDateStr(obj.date_last_used) },
-            { title: this.$tc('AccountAmount'), content: obj.accounts_amount },
-            { title: this.$tc('Comment'), content: obj.comment || this.$tc('Nothing') }
-          ]
-        },
-        handleUpdate: (obj) => {
-          this.$router.push({ name: 'IntegrationApplicationUpdate', params: { id: obj.id }})
-        }
       }
     }
   },