From 91cbe97a5b684f67eb1f8a9805296129d368c639 Mon Sep 17 00:00:00 2001
From: Bai <bugatti_it@163.com>
Date: Fri, 28 May 2021 11:23:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=EF=BC=88=E5=BA=94=E7=94=A8=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E8=A1=8C=E3=80=81=E5=BA=94=E7=94=A8=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=88=97=E8=A1=A8=E8=83=8C=E6=99=AF=E8=89=B2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ApplicationAccountList.vue                | 41 ++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue b/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
index 8a820523a..04c2b4e16 100644
--- a/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
+++ b/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
@@ -4,6 +4,7 @@
       <el-col :span="14">
         <GenericListTable
           ref="LeftTable"
+          class="application-table"
           :header-actions="leftTable.headerActions"
           :table-config="leftTable.tableConfig"
           @row-click="leftTable.tableConfig.rowClick"
@@ -12,6 +13,7 @@
       <el-col :span="10">
         <GenericListTable
           ref="RightTable"
+          class="application-user-table"
           :header-actions="rightTable.headerActions"
           :table-config="rightTable.tableConfig"
         />
@@ -23,6 +25,7 @@
 <script>
 import Page from '@/layout/components/Page'
 import GenericListTable from '@/layout/components/GenericListTable'
+import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
   name: 'AssetAccountList',
@@ -32,6 +35,7 @@ export default {
   data() {
     const vm = this
     return {
+      clickedRow: {},
       leftTable: {
         tableConfig: {
           url: '/api/v1/applications/applications/',
@@ -44,9 +48,33 @@ export default {
             default: ['name', 'category_display', 'type_display']
           },
           columnsMeta: {
+            name: {
+              formatter: DetailFormatter,
+              formatterArgs: {
+                getRoute({ row, col, cellValue }) {
+                  return {
+                    'db': 'DatabaseAppDetail', 'remote_app': 'RemoteAppDetail', 'cloud': 'KubernetesAppDetail'
+                  }[row.category]
+                }
+              },
+              showOverflowTooltip: true
+            }
+          },
+          tableAttrs: {
+            stripe: false, // 斑马纹表格
+            border: true, // 表格边框
+            fit: true, // 宽度自适应,
+            tooltipEffect: 'dark',
+            rowClassName({ row, rowIndex }) {
+              if (row === vm.clickedRow) {
+                return 'row-clicked'
+              }
+              return ''
+            }
           },
           rowClick: function(row, column, event) {
             vm.rightTable.tableConfig.url = `/api/v1/applications/application-users/?application_id=${row.id}`
+            vm.clickedRow = row
           }
         },
         headerActions: {
@@ -69,6 +97,15 @@ export default {
           columnsShow: {
             min: ['name', 'username', 'actions'],
             default: ['name', 'username', 'date_created', 'actions']
+          },
+          tableAttrs: {
+            stripe: false, // 斑马纹表格
+            border: false, // 表格边框
+            fit: true, // 宽度自适应,
+            tooltipEffect: 'dark',
+            rowClassName({ row, rowIndex }) {
+              return 'row-background-color'
+            }
           }
         },
         headerActions: {
@@ -82,5 +119,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+  .application-table ::v-deep .row-clicked, .application-user-table ::v-deep .row-background-color {
+    background-color: #f5f7fa;
+  }
 </style>