From 1c6da1530124177b7d89ecc33878ffb5feaec9c9 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 22 Jul 2021 18:56:04 +0800
Subject: [PATCH 1/4] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AccountListTable/index.vue     |   3 +
 src/components/AutoDataZTree/index.vue        |   2 +-
 .../AssetAccount/AssetAccountList.vue         | 132 ++++--------------
 src/views/xpack/Vault/VaultList.vue           |  20 ---
 4 files changed, 30 insertions(+), 127 deletions(-)

diff --git a/src/components/AccountListTable/index.vue b/src/components/AccountListTable/index.vue
index ac4a028ee..70e9ac3c3 100644
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -151,6 +151,9 @@ export default {
           url: this.exportUrl,
           mfaVerifyRequired: true
         },
+        searchConfig: {
+          exclude: ['systemuser', 'asset']
+        },
         hasSearch: true
       }
     }
diff --git a/src/components/AutoDataZTree/index.vue b/src/components/AutoDataZTree/index.vue
index 567c52753..1c8dd9815 100644
--- a/src/components/AutoDataZTree/index.vue
+++ b/src/components/AutoDataZTree/index.vue
@@ -40,7 +40,7 @@ export default {
           autoParam: ['id=key', 'name=n', 'level=lv'],
           type: 'get',
           headers: {
-            'X-JMS-ORG': JSON.parse(this.$cookie.get('jms_current_org')) ? JSON.parse(this.$cookie.get('jms_current_org')).id : ''
+            'X-JMS-ORG': this.$store.getters.currentOrg.id
           }
         },
         callback: {
diff --git a/src/views/accounts/AssetAccount/AssetAccountList.vue b/src/views/accounts/AssetAccount/AssetAccountList.vue
index 7485ef532..6d8d14d48 100644
--- a/src/views/accounts/AssetAccount/AssetAccountList.vue
+++ b/src/views/accounts/AssetAccount/AssetAccountList.vue
@@ -1,48 +1,20 @@
 <template>
-  <Page>
-    <el-row>
-      <el-col v-show="iShowTree" :span="iShowTree?4:0">
-        <AutoDataZTree
-          ref="AUtoDataZTree"
-          :setting="treeSetting"
-        />
-      </el-col>
-      <el-col :span="iShowTree?9:11">
-        <div class="mini">
-          <div style="display:block" class="mini-button" @click="iShowTree=!iShowTree">
-            <i v-show="iShowTree" class="fa fa-angle-left fa-x" />
-            <i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
-          </div>
-        </div>
-        <GenericListTable
-          ref="LeftTable"
-          class="asset-table"
-          v-bind="leftTable"
-          @row-click="leftTable.tableConfig.rowClick"
-        />
-      </el-col>
-      <el-col :span="iShowTree?11:13">
-        <AccountListTable
-          ref="RightTable"
-          class="asset-user-table"
-          v-bind="rightTable"
-        />
-      </el-col>
-    </el-row>
-  </Page>
+  <GenericTreeListPage ref="TreeTablePage" :tree-setting="treeSetting">
+    <template #table>
+      <AccountListTable ref="table" :url="accountsUrl" />
+    </template>
+  </GenericTreeListPage>
 </template>
 
 <script>
-import Page from '@/layout/components/Page'
-import GenericListTable from '@/layout/components/GenericListTable'
-import AutoDataZTree from '@/components/AutoDataZTree/index'
-import { AccountListTable } from '@/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
+import AccountListTable from '@/components/AccountListTable'
+import { setUrlParam } from '@/utils/common'
 
 export default {
   name: 'AssetAccountList',
   components: {
-    AutoDataZTree, GenericListTable, Page, AccountListTable
+    GenericTreeListPage, AccountListTable
   },
   data() {
     const vm = this
@@ -50,82 +22,30 @@ export default {
       isInit: true,
       clickedRow: null,
       iShowTree: true,
+      accountsUrl: '/api/v1/assets/accounts/',
       treeSetting: {
         showMenu: false,
-        showRefresh: false,
+        showRefresh: true,
         showAssets: false,
-        url: '',
-        treeUrl: '/api/v1/assets/nodes/children/tree/',
+        url: '/api/v1/assets/accounts/',
+        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1',
         callback: {
           onSelected: function(event, treeNode) {
-            vm.leftTable.tableConfig.url = `/api/v1/assets/assets/?node_id=${treeNode.meta.node.id}`
-            vm.isInit = true
+            let url = '/api/v1/assets/accounts/'
+            if (treeNode.meta.type === 'node') {
+              const nodeId = treeNode.meta.node.id
+              url = setUrlParam(url, 'asset', '')
+              url = setUrlParam(url, 'node', nodeId)
+            } else if (treeNode.meta.type === 'asset') {
+              const assetId = treeNode.meta.asset.id
+              url = setUrlParam(url, 'node', '')
+              url = setUrlParam(url, 'asset', assetId)
+            }
+            setTimeout(() => {
+              vm.accountsUrl = url
+            }, 100)
           }
         }
-      },
-      leftTable: {
-        tableConfig: {
-          url: '/api/v1/assets/assets/',
-          columns: [
-            'hostname', 'ip', 'protocols', 'platform', 'comment', 'org_name'
-          ],
-          columnsShow: {
-            min: ['hostname', 'ip'],
-            default: ['hostname', 'ip', 'platform']
-          },
-          columnsMeta: {
-            hostname: {
-              formatter: DetailFormatter,
-              formatterArgs: {
-                route: 'AssetDetail',
-                routeQuery: {
-                  activeTab: 'Detail'
-                }
-              },
-              showOverflowTooltip: true
-            },
-            ip: {
-              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.url = `/api/v1/assets/accounts/?asset=${row.id}`
-            vm.rightTable.extraQuery.asset = row.id
-            vm.clickedRow = row
-            vm.isInit = false
-          }
-        },
-        headerActions: {
-          hasLeftActions: false,
-          hasCreate: false,
-          hasExport: false,
-          hasImport: false,
-          hasBulkDelete: false,
-          hasColumnSetting: true,
-          hasRefresh: true,
-          hasBulkUpdate: false
-        }
-      },
-      rightTable: {
-        url: `/api/v1/assets/accounts/`,
-        name: 'AssetAccountListTable',
-        extraQuery: {
-          latest: 1
-        },
-        hasLeftActions: false,
-        searchExclude: ['hostname', 'id', 'ip']
       }
     }
   }
diff --git a/src/views/xpack/Vault/VaultList.vue b/src/views/xpack/Vault/VaultList.vue
index 37b1bfbaa..71dbb73d0 100644
--- a/src/views/xpack/Vault/VaultList.vue
+++ b/src/views/xpack/Vault/VaultList.vue
@@ -51,26 +51,6 @@ export default {
         hasCreate: true,
         hasClone: false,
         url: '/api/v1/assets/accounts/'
-        // handleImport: function({ selectedRows }) {
-        //   this.selectedRows = selectedRows
-        //   this.dialogStatus = 'import'
-        //   if (!this.needMFAVerify) {
-        //     this.showMFADialog = false
-        //     this.showImportDialog = true
-        //   } else {
-        //     this.showMFADialog = true
-        //   }
-        // }.bind(this),
-        // handleExport: function({ selectedRows }) {
-        //   this.selectedRows = selectedRows
-        //   this.dialogStatus = 'export'
-        //   if (!this.needMFAVerify) {
-        //     this.showMFADialog = false
-        //     this.showExportDialog = true
-        //   } else {
-        //     this.showMFADialog = true
-        //   }
-        // }.bind(this)
       },
       treeSetting: {
         showMenu: false,

From de4af0785876ad60e4e3094efd3ea0f74c2fda4d Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Mon, 26 Jul 2021 11:09:06 +0800
Subject: [PATCH 2/4] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/ztree.css                          |  25 +
 .../ApplicationAccountList.vue                | 445 +++---------------
 2 files changed, 100 insertions(+), 370 deletions(-)

diff --git a/src/styles/ztree.css b/src/styles/ztree.css
index 7c432bbfd..50bb26aad 100644
--- a/src/styles/ztree.css
+++ b/src/styles/ztree.css
@@ -323,6 +323,31 @@ website:    http://code.google.com/p/jquerytree/
   display: inline-block;
   color: #676a6c;
 }
+.ztree li span.button.chrome_ico_docu::before {
+  content: "\f268";
+  font-family: FontAwesome;
+  padding-top: 10px;
+  padding-left: 2px;
+  display: inline-block;
+  color: #676a6c;
+}
+.ztree li span.button.database_ico_docu::before {
+  content: "\f1c0";
+  font-family: FontAwesome;
+  padding-top: 10px;
+  padding-left: 2px;
+  display: inline-block;
+  color: #676a6c;
+}
+.ztree li span.button.cloud_ico_docu::before {
+  content: "\f0c2";
+  font-family: FontAwesome;
+  padding-top: 10px;
+  padding-left: 2px;
+  display: inline-block;
+  color: #676a6c;
+}
+
 .ztree li span.button.windows_ico_docu::before {
   content: "\f17a";
   font-family: FontAwesome;
diff --git a/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue b/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
index d7668f557..b3ba722a9 100644
--- a/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
+++ b/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
@@ -1,401 +1,106 @@
 <template>
-  <Page>
-    <el-row>
-      <el-col :span="11">
-        <GenericListTable ref="LeftTable" class="application-table" :header-actions="leftTable.headerActions" :table-config="leftTable.tableConfig" @row-click="leftTable.tableConfig.rowClick" />
-      </el-col>
-      <el-col :span="13">
-        <GenericListTable v-if="!isInit" ref="RightTable" class="application-user-table" :header-actions="rightTable.headerActions" :table-config="rightTable.tableConfig" />
-        <div v-else class="noDataR">
-          <div class="hintWrap">
-            <div>{{ $t('accounts.PleaseClickLeftApplicationToViewApplicationAccount') }}</div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-    <Dialog v-if="showMFADialog" width="50" :title="this.$t('common.MFAConfirm')" :visible.sync="showMFADialog" :show-confirm="false" :show-cancel="false" :destroy-on-close="true">
-      <div v-if="MFAConfirmed">
-        <el-form label-position="right" label-width="80px" :model="MFAInfo">
-          <el-form-item :label="this.$t('assets.Applications')">
-            <el-input v-model="MFAInfo.application" disabled />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.Username')">
-            <el-input v-model="MFAInfo.username" disabled />
-          </el-form-item>
-          <el-form-item :label="this.$t('assets.PasswordOrToken')">
-            <el-input v-model="MFAInfo.password" type="password" show-password />
-          </el-form-item>
-        </el-form>
-      </div>
-      <el-row v-else :gutter="20">
-        <el-col :span="4">
-          <div style="line-height: 34px;text-align: center">MFA</div>
-        </el-col>
-        <el-col :span="14">
-          <el-input v-model="MFAInput" />
-          <span class="help-tips help-block">{{ $t('common.MFARequireForSecurity') }}</span>
-        </el-col>
-        <el-col :span="4">
-          <el-button size="mini" type="primary" style="line-height:20px " @click="MFAConfirm">{{ this.$t('common.Confirm') }}</el-button>
-        </el-col>
-      </el-row>
-    </Dialog>
-    <Dialog :title="$t('common.Export')" :visible.sync="showExportDialog" :destroy-on-close="true" @confirm="handleExportConfirm()" @cancel="handleExportCancel()">
-      <el-form label-position="left" style="padding-left: 50px">
-        <el-form-item :label="$t('common.fileType' )" :label-width="'100px'">
-          <el-radio-group v-model="exportTypeOption">
-            <el-radio v-for="option of exportTypeOptions" :key="option.value" style="padding: 10px 20px;" :label="option.value" :disabled="!option.can">{{ option.label }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="this.$t('common.imExport.ExportRange')" :label-width="'100px'">
-          <el-radio-group v-model="exportOption">
-            <el-radio v-for="option of exportOptions" :key="option.value" class="export-item" :label="option.value" :disabled="!option.can">{{ option.label }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-      </el-form>
-    </Dialog>
-  </Page>
+  <GenericTreeListPage ref="TreeTablePage" :tree-setting="treeSetting">
+    <template #table>
+      <AccountListTable ref="table" :url="accountsUrl" />
+    </template>
+  </GenericTreeListPage>
 </template>
 
 <script>
-import Page from '@/layout/components/Page'
-import GenericListTable from '@/layout/components/GenericListTable'
-import { ActionsFormatter, DetailFormatter } from '@/components/TableFormatters'
-import Dialog from '@/components/Dialog'
-import { mapGetters } from 'vuex'
-import { createSourceIdCache } from '@/api/common'
-import * as queryUtil from '@/components/DataTable/compenents/el-data-table/utils/query'
+import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
+import AccountListTable from '@/components/AccountListTable'
+import { setUrlParam } from '@/utils/common'
 
 export default {
   name: 'AssetAccountList',
   components: {
-    GenericListTable, Page, Dialog
+    GenericTreeListPage, AccountListTable
   },
   data() {
     const vm = this
     return {
       isInit: true,
-      showMFADialog: false,
-      MFAConfirmed: false,
-      MFAInput: '',
-      MFAInfo: {
-        systemUser: '',
-        application: '',
-        username: '',
-        password: ''
-      },
-      selectedRows: '',
-      showExportDialog: false,
-      dialogStatus: '',
-      exportOption: 'all',
-      exportTypeOption: 'csv',
-      clickedRow: {},
-      leftTable: {
-        tableConfig: {
-          url: '/api/v1/applications/applications/',
-          columns: [
-            'name', 'category_display', 'type_display', 'comment', 'org_name'
-          ],
-          columnsShow: {
-            min: ['name'],
-            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,
-              sortable: false
-            }
-          },
-          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.rightTable.tableConfig.extraQuery.application_id = row.id
-            vm.clickedRow = row
-            vm.MFAInfo.application = row.name
-            vm.isInit = false
-          }
-        },
-        headerActions: {
-          hasLeftActions: false,
-          hasCreate: false,
-          hasExport: false,
-          hasImport: false,
-          hasBulkDelete: false,
-          hasBulkUpdate: false
-        }
-      },
-      rightTable: {
-        tableConfig: {
-          url: `/api/v1/applications/application-users/?application_id=`,
-          extraQuery: {
-            application_id: ''
-          },
-          columns: [
-            'name', 'username', 'username_same_with_user', 'protocol', 'login_mode', 'priority', 'comment', 'org_name', 'actions'
-          ],
-          columnsShow: {
-            min: ['name', 'username', 'actions'],
-            default: ['name', 'username', 'date_created', 'actions']
-          },
-          columnsMeta: {
-            name: {
-              formatter: DetailFormatter,
-              formatterArgs: {
-                route: 'SystemUserDetail'
-              },
-              showOverflowTooltip: true,
-              sortable: false
-            },
-            protocol: {
-              sortable: false
-            },
-            login_mode: {
-              sortable: false
-            },
-            actions: {
-              label: this.$t('common.Action'),
-              align: 'center',
-              width: 150,
-              formatter: ActionsFormatter,
-              formatterArgs: {
-                hasUpdate: false, // can set function(row, value)
-                hasDelete: false, // can set function(row, value)
-                hasClone: false,
-                moreActionsTitle: this.$t('common.More'),
-                extraActions: [
-                  {
-                    name: 'View',
-                    title: this.$t('common.View'),
-                    type: 'primary',
-                    callback: function(val) {
-                      this.dialogStatus = 'viewAuthInfo'
-                      this.MFAInfo.systemUser = val.row
-                      if (!this.needMFAVerify) {
-                        this.showMFADialog = true
-                        this.MFAConfirmed = true
-                        this.$axios.get(`/api/v1/assets/system-users/${this.MFAInfo.systemUser.id}/auth-info/`).then(res => {
-                          this.MFAConfirmed = true
-                          this.MFAInfo.username = res.username
-                          if (res.protocol === 'k8s') {
-                            this.MFAInfo.password = res.token
-                          } else {
-                            this.MFAInfo.password = res.password
-                          }
-                        })
-                      } else {
-                        this.showMFADialog = true
-                      }
-                    }.bind(this)
-                  }
-                ]
-              }
-            },
-            tableAttrs: {
-              stripe: false, // 斑马纹表格
-              border: true, // 表格边框
-              fit: true, // 宽度自适应,
-              tooltipEffect: 'dark',
-              rowClassName({ row, rowIndex }) {
-                return 'row-background-color'
-              }
-            }
-          }
-        },
-        headerActions: {
-          hasLeftActions: false,
-          hasImport: false,
-          handleExport({ selectedRows }) {
-            vm.selectedRows = selectedRows
-            vm.dialogStatus = 'export'
-            if (!vm.needMFAVerify) {
-              vm.showMFADialog = false
-              vm.showExportDialog = true
-            } else {
-              vm.showMFADialog = true
+      clickedRow: null,
+      iShowTree: true,
+      accountsUrl: '/api/v1/assets/accounts/',
+      treeSetting: {
+        async: false,
+        showMenu: false,
+        showRefresh: true,
+        showAssets: false,
+        url: '/api/v1/assets/accounts/',
+        treeUrl: '/api/v1/applications/applications/tree/',
+        callback: {
+          onSelected: function(event, treeNode) {
+            let url = '/api/v1/assets/accounts/'
+            if (treeNode.meta.type === 'node') {
+              const nodeId = treeNode.meta.node.id
+              url = setUrlParam(url, 'asset', '')
+              url = setUrlParam(url, 'node', nodeId)
+            } else if (treeNode.meta.type === 'asset') {
+              const assetId = treeNode.meta.asset.id
+              url = setUrlParam(url, 'node', '')
+              url = setUrlParam(url, 'asset', assetId)
             }
+            setTimeout(() => {
+              vm.accountsUrl = url
+            }, 100)
           }
         }
       }
     }
-  },
-  computed: {
-    ...mapGetters([
-      'MFA_TTl',
-      'MFAVerifyAt',
-      'publicSettings'
-    ]),
-    needMFAVerify() {
-      if (!this.publicSettings.SECURITY_VIEW_AUTH_NEED_MFA) {
-        return false
-      }
-      const ttl = this.publicSettings.SECURITY_MFA_VERIFY_TTL
-      const now = new Date()
-      return !(this.MFAVerifyAt && (now - this.MFAVerifyAt) < ttl * 1000)
-    },
-    exportOptions() {
-      return [
-        {
-          label: this.$t('common.imExport.ExportAll'),
-          value: 'all',
-          can: true
-        },
-        {
-          label: this.$t('common.imExport.ExportOnlySelectedItems'),
-          value: 'selected',
-          can: this.selectedRows.length > 0
-        }
-      ]
-    },
-    exportTypeOptions() {
-      return [
-        {
-          label: 'CSV',
-          value: 'csv',
-          can: true
-        },
-        {
-          label: 'Excel',
-          value: 'xlsx',
-          can: true
-        }
-      ]
-    }
-  },
-  methods: {
-    MFAConfirm() {
-      if (this.MFAInput.length !== 6) {
-        return this.$message.error(this.$t('common.MFAErrorMsg'))
-      }
-      this.$axios.post(
-        `/api/v1/authentication/otp/verify/`, {
-          code: this.MFAInput
-        }
-      ).then(
-        res => {
-          this.$store.dispatch('users/setMFAVerify')
-          if (this.dialogStatus === 'export') {
-            this.showMFADialog = false
-            this.showExportDialog = true
-          } else {
-            this.$axios.get(`/api/v1/assets/system-users/${this.MFAInfo.systemUser.id}/auth-info/`).then(res => {
-              this.MFAConfirmed = true
-              this.MFAInfo.username = res.username
-              this.MFAInfo.password = res.password
-            })
-          }
-        }
-      )
-    },
-    downloadCsv(url) {
-      const a = document.createElement('a')
-      a.href = url
-      a.click()
-      window.URL.revokeObjectURL(url)
-    },
-    async performExport(selectRows, exportOption, q) {
-      const url = `/api/v1/applications/application-user-auth-infos/`
-      const query = Object.assign({}, q)
-      if (exportOption === 'selected') {
-        const resources = []
-        const data = selectRows
-        for (let index = 0; index < data.length; index++) {
-          resources.push(data[index].id)
-        }
-        const spm = await createSourceIdCache(resources)
-        query['spm'] = spm.spm
-      } else if (exportOption === 'filtered') {
-        // console.log(listTableRef)
-        // console.log(listTableRef.dataTable)
-        // delete query['limit']
-        // delete query['offset']
-      }
-      query['format'] = this.exportTypeOption
-      const queryStr =
-          (url.indexOf('?') > -1 ? '&' : '?') +
-          queryUtil.stringify(query, '=', '&')
-      return this.downloadCsv(url + queryStr)
-    },
-    async performExportConfirm() {
-      const listTableRef = this.$refs.RightTable.$refs.ListTable
-      const query = listTableRef.dataTable.getQuery()
-      delete query['limit']
-      delete query['offset']
-      return this.performExport(this.selectedRows, this.exportOption, query)
-    },
-    async handleExportConfirm() {
-      await this.performExportConfirm()
-      this.showExportDialog = false
-    },
-    handleExportCancel() {
-      this.showExportDialog = false
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .application-table ::v-deep .row-clicked, .application-user-table ::v-deep .row-background-color {
-    background-color: #f5f7fa;
+.asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
+  background-color: #f5f7fa;
+}
+.asset-table {
+  &:hover {
+    cursor: pointer;
   }
-
-  .application-table {
-    &:hover {
-      cursor: pointer;
-    }
-    & ::v-deep .el-table__row{
-      height: 40px;
-      & > td{
-        padding: 0;
-      }
+  & >>> .table-content {
+    margin-left: 21px;
+  }
+  & ::v-deep .el-table__row{
+    height: 40px;
+    & > td{
+      padding: 0;
     }
   }
-
-  .export-item {
-    width: 100%;
-    display: block;
-    padding: 10px 20px;
-  }
-
-  .export-form >>> .el-form-item__label {
-    line-height: 2
-  }
-  .application-user-table{
-    padding-left:20px ;
-  }
-  .noDataR {
-    width: 100%;
-    height: 40vh;
+}
+.mini-button{
+  width: 12px;
+  float: left;
+  margin-right: 10px;
+  text-align: center;
+  padding: 9px 0;
+  background-color: #1ab394;
+  border-color: #1ab394;
+  color: #FFFFFF;
+  border-radius: 5px;
+  line-height: 1.428;
+  cursor:pointer;
+}
+.noDataR{
+  width: 100%;
+  height: 40vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-direction: column;
+  .hintWrap{
+    color: #D4D6E6;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    font-size: 18px;
     flex-direction: column;
-    .hintWrap {
-      color: #D4D6E6;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      flex-direction: column;
-    }
   }
-
+}
+.asset-user-table{
+  padding-left: 20px;
+}
 </style>

From 0f76f6ad965ce4ee4805e93fe86f418ef24a8ab6 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 27 Jul 2021 14:18:37 +0800
Subject: [PATCH 3/4] =?UTF-8?q?perf:=20=E5=9F=BA=E6=9C=AC=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E5=BA=94=E7=94=A8=E6=AD=A3=E5=A5=BD=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AccountListTable/index.vue     |   2 +-
 .../AppAccountListTable/ShowSecretInfo.vue    |  81 +++++++++
 src/components/AppAccountListTable/const.js   |  31 ++++
 src/components/AppAccountListTable/index.vue  | 167 ++++++++++++++++++
 src/i18n/langs/cn.json                        |   1 +
 src/i18n/langs/en.json                        |   1 +
 src/router/applications.js                    | 112 +++++++-----
 .../ApplicationAccountList.vue                |  32 ++--
 8 files changed, 363 insertions(+), 64 deletions(-)
 create mode 100644 src/components/AppAccountListTable/ShowSecretInfo.vue
 create mode 100644 src/components/AppAccountListTable/const.js
 create mode 100644 src/components/AppAccountListTable/index.vue

diff --git a/src/components/AccountListTable/index.vue b/src/components/AccountListTable/index.vue
index 70e9ac3c3..c26fd62bc 100644
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -15,7 +15,7 @@ import { connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
-  name: 'Detail',
+  name: 'AccountListTable',
   components: {
     ListTable,
     UpdateSecretInfo,
diff --git a/src/components/AppAccountListTable/ShowSecretInfo.vue b/src/components/AppAccountListTable/ShowSecretInfo.vue
new file mode 100644
index 000000000..a5a631bb3
--- /dev/null
+++ b/src/components/AppAccountListTable/ShowSecretInfo.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <MFAVerifyDialog
+      @MFAVerifyDone="getAuthInfo"
+      @MFAVerifyCancel="exit"
+    />
+    <Dialog
+      :title="dialogTitle"
+      :show-confirm="false"
+      :show-cancel="false"
+      :destroy-on-close="true"
+      :width="'50'"
+      :visible.sync="showAuthInfo"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <div>
+        <el-form label-position="right" label-width="80px" :model="authInfo">
+          <el-form-item :label="this.$t('applications.appName')">
+            <el-input v-model="account['app_name']" readonly />
+          </el-form-item>
+          <el-form-item :label="this.$t('assets.Username')">
+            <el-input v-model="account['username']" readonly />
+          </el-form-item>
+          <el-form-item :label="this.$t('assets.Password')">
+            <el-input v-model="authInfo.password" type="password" show-password />
+          </el-form-item>
+        </el-form>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import MFAVerifyDialog from '@/components/MFAVerifyDialog'
+export default {
+  name: 'ShowSecretInfo',
+  components: {
+    Dialog,
+    MFAVerifyDialog
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogTitle: this.$t('common.ViewSecret'),
+      authInfo: {},
+      showAuthInfo: false
+    }
+  },
+  mounted() {
+    this.getAuthInfo()
+  },
+  methods: {
+    getAuthInfo() {
+      console.log(this.account)
+      const url = `/api/v1/applications/account-secrets/${this.account.uid}/`
+      this.$axios.get(url, { disableFlashErrorMsg: true }).then(resp => {
+        this.authInfo = resp
+        this.showAuthInfo = true
+      })
+    },
+    exit() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/AppAccountListTable/const.js b/src/components/AppAccountListTable/const.js
new file mode 100644
index 000000000..710f81441
--- /dev/null
+++ b/src/components/AppAccountListTable/const.js
@@ -0,0 +1,31 @@
+import { ChoicesFormatter } from '@/components/TableFormatters'
+import { toSafeLocalDateStr } from '@/utils/common'
+import i18n from '@/i18n/i18n'
+
+export const connectivityMeta = {
+  label: i18n.t('assets.Reachable'),
+  formatter: ChoicesFormatter,
+  formatterArgs: {
+    iconChoices: {
+      ok: 'fa-check text-primary',
+      failed: 'fa-times text-danger',
+      unknown: 'fa-circle text-warning'
+    },
+    hasTips: true,
+    getTips: ({ row, cellValue }) => {
+      const mapper = {
+        'ok': i18n.tc('assets.Reachable'),
+        'failed': i18n.tc('assets.Unreachable'),
+        'unknown': i18n.tc('assets.Unknown')
+      }
+      let tips = mapper[cellValue]
+      if (row['date_verified']) {
+        const datetime = toSafeLocalDateStr(row['date_verified'])
+        tips += '<br> ' + datetime
+      }
+      return tips
+    }
+  },
+  width: '90px',
+  align: 'center'
+}
diff --git a/src/components/AppAccountListTable/index.vue b/src/components/AppAccountListTable/index.vue
new file mode 100644
index 000000000..2aae78a94
--- /dev/null
+++ b/src/components/AppAccountListTable/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+    <ShowSecretInfo v-if="showViewSecretDialog" :visible.sync="showViewSecretDialog" :account="account" />
+  </div>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable/index'
+import { ActionsFormatter, DetailFormatter } from '@/components/TableFormatters'
+import ShowSecretInfo from './ShowSecretInfo'
+
+export default {
+  name: 'Detail',
+  components: {
+    ListTable,
+    ShowSecretInfo
+  },
+  props: {
+    url: {
+      type: String,
+      required: true
+    },
+    exportUrl: {
+      type: String,
+      default() {
+        return this.url.replace('/applications/accounts/', '/applications/account-secrets/')
+      }
+    },
+    hasLeftActions: {
+      type: Boolean,
+      default: false
+    },
+    otherActions: {
+      type: Array,
+      default: null
+    },
+    hasClone: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showViewSecretDialog: false,
+      showUpdateSecretDialog: false,
+      account: {},
+      tableConfig: {
+        url: this.url,
+        columns: [
+          'app_name', 'username', 'app_category_display',
+          'app_type_display', 'systemuser', 'actions'
+        ],
+        columnsMeta: {
+          app_name: {
+            showOverflowTooltip: true,
+            formatter: DetailFormatter,
+            formatterArgs: {
+              getRoute({ row }) {
+                switch (row['app_category']) {
+                  case 'remote_app':
+                    return {
+                      name: 'RemoteAppDetail',
+                      params: { id: row.app }
+                    }
+                  case 'db':
+                    return {
+                      name: 'DatabaseAppDetail',
+                      params: { id: row.app }
+                    }
+                  default:
+                    return {
+                      name: 'KubernetesAppDetail',
+                      params: { id: row.app }
+                    }
+                }
+              }
+            }
+          },
+          username: {
+            showOverflowTooltip: true
+          },
+          systemuser: {
+            showOverflowTooltip: true,
+            formatter: DetailFormatter,
+            formatterArgs: {
+              getTitle({ row }) {
+                return row.systemuser_display
+              },
+              getRoute({ row }) {
+                return {
+                  name: 'SystemUserDetail',
+                  params: { id: row.systemuser }
+                }
+              }
+            }
+          },
+          actions: {
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              hasUpdate: false, // can set function(row, value)
+              hasDelete: false, // can set function(row, value)
+              hasClone: this.hasClone,
+              moreActionsTitle: this.$t('common.More'),
+              extraActions: [
+                {
+                  name: 'View',
+                  title: this.$t('common.View'),
+                  type: 'primary',
+                  callback: function({ row }) {
+                    this.account = row
+                    this.showViewSecretDialog = true
+                  }.bind(this)
+                },
+                {
+                  name: 'Update',
+                  title: this.$t('common.Update'),
+                  can: !this.$store.getters.currentOrgIsRoot,
+                  callback: function({ row }) {
+                    this.$message.success(this.$tc('applications.updateAccountMsg'))
+                  }.bind(this)
+                }
+              ]
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasLeftActions: this.hasLeftActions,
+        hasMoreActions: false,
+        hasImport: this.hasImport,
+        hasExport: this.hasExport,
+        exportOptions: {
+          url: this.exportUrl,
+          mfaVerifyRequired: true
+        },
+        searchConfig: {
+          exclude: ['systemuser', 'asset']
+        },
+        hasSearch: true
+      }
+    }
+  },
+  watch: {
+    url(iNew) {
+      this.$set(this.tableConfig, 'url', iNew)
+    }
+  },
+  mounted() {
+    if (this.otherActions) {
+      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
+      for (const item of this.otherActions) {
+        actionColumn.formatterArgs.extraActions.push(item)
+      }
+    }
+  },
+  methods: {
+    onUpdateAuthDone(account) {
+      Object.assign(this.account, account)
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 65fb1065e..7a1fd23c4 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -29,6 +29,7 @@
   },
   "applications": {
     "": "",
+    "updateAccountMsg": "请更新系统用户的账号信息",
     "RemoteApp": "远程应用",
     "Database": "数据库",
     "Cloud": "云",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index fa1060caa..d2492ae3f 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -28,6 +28,7 @@
   },
   "applications": {
     "": "",
+    "updateAccountMsg": "Please update system user account info",
     "RemoteApp": "Remote app",
     "Database": "Database",
     "Cloud": "Cloud",
diff --git a/src/router/applications.js b/src/router/applications.js
index d5e88139a..45ea58d36 100644
--- a/src/router/applications.js
+++ b/src/router/applications.js
@@ -38,57 +38,73 @@ export default [
     ]
   },
   {
-    path: 'database-apps',
+    path: 'databases',
     name: 'DatabaseAppList',
-    component: () => import('@/views/applications/DatabaseApp/DatabaseAppList'),
-    meta: { title: i18n.t('route.DatabaseApp') }
+    component: empty,
+    meta: { title: i18n.t('route.DatabaseApp') },
+    children: [
+      {
+        path: '',
+        name: 'DatabaseAppList',
+        component: () => import('@/views/applications/DatabaseApp/DatabaseAppList'),
+        meta: { title: i18n.t('route.DatabaseApp') }
+      },
+      {
+        path: 'create',
+        name: 'DatabaseAppCreate',
+        component: () => import('@/views/applications/DatabaseApp/DatabaseAppCreateUpdate'),
+        meta: { title: i18n.t('route.DatabaseAppCreate'), activeMenu: '/applications/databases', action: 'create' },
+        hidden: true
+      },
+      {
+        path: ':id/update',
+        name: 'DatabaseAppUpdate',
+        component: () => import('@/views/applications/DatabaseApp/DatabaseAppCreateUpdate'),
+        meta: { title: i18n.t('route.DatabaseAppUpdate'), activeMenu: '/applications/databases', action: 'update' },
+        hidden: true
+      },
+      {
+        path: ':id',
+        name: 'DatabaseAppDetail',
+        component: () => import('@/views/applications/DatabaseApp/DatabaseAppDetail/index'),
+        meta: { title: i18n.t('route.DatabaseAppDetail'), activeMenu: '/applications/databases' },
+        hidden: true
+      }
+    ]
   },
   {
-    path: 'database-apps/create',
-    name: 'DatabaseAppCreate',
-    component: () => import('@/views/applications/DatabaseApp/DatabaseAppCreateUpdate'),
-    meta: { title: i18n.t('route.DatabaseAppCreate'), activeMenu: '/applications/database-apps', action: 'create' },
-    hidden: true
-  },
-  {
-    path: 'database-apps/:id/update',
-    name: 'DatabaseAppUpdate',
-    component: () => import('@/views/applications/DatabaseApp/DatabaseAppCreateUpdate'),
-    meta: { title: i18n.t('route.DatabaseAppUpdate'), activeMenu: '/applications/database-apps', action: 'update' },
-    hidden: true
-  },
-  {
-    path: 'database-apps/:id',
-    name: 'DatabaseAppDetail',
-    component: () => import('@/views/applications/DatabaseApp/DatabaseAppDetail/index'),
-    meta: { title: i18n.t('route.DatabaseAppDetail'), activeMenu: '/applications/database-apps' },
-    hidden: true
-  },
-  {
-    path: 'kubernetes-apps',
+    path: 'kubernetes',
     name: 'KubernetesAppList',
-    component: () => import('@/views/applications/KubernetesApp/KubernetesAppList'),
-    meta: { title: i18n.t('route.KubernetesApp') }
-  },
-  {
-    path: 'kubernetes-apps/create',
-    name: 'KubernetesAppCreate',
-    component: () => import('@/views/applications/KubernetesApp/KubernetesAppCreateUpdate'),
-    meta: { title: i18n.t('route.KubernetesAppCreate'), activeMenu: '/applications/kubernetes-apps', action: 'create' },
-    hidden: true
-  },
-  {
-    path: 'kubernetes-apps/:id/update',
-    name: 'KubernetesAppUpdate',
-    component: () => import('@/views/applications/KubernetesApp/KubernetesAppCreateUpdate'),
-    meta: { title: i18n.t('route.KubernetesAppUpdate'), activeMenu: '/applications/kubernetes-apps', action: 'update' },
-    hidden: true
-  },
-  {
-    path: 'kubernetes-apps/:id',
-    name: 'KubernetesAppDetail',
-    component: () => import('@/views/applications/KubernetesApp/KubernetesAppDetail/index'),
-    meta: { title: i18n.t('route.KubernetesAppDetail'), activeMenu: '/applications/kubernetes-apps' },
-    hidden: true
+    component: empty,
+    meta: { title: i18n.t('route.KubernetesApp') },
+    children: [
+      {
+        path: '',
+        name: 'KubernetesAppList',
+        component: () => import('@/views/applications/KubernetesApp/KubernetesAppList'),
+        meta: { title: i18n.t('route.KubernetesApp') }
+      },
+      {
+        path: 'create',
+        name: 'KubernetesAppCreate',
+        component: () => import('@/views/applications/KubernetesApp/KubernetesAppCreateUpdate'),
+        meta: { title: i18n.t('route.KubernetesAppCreate'), activeMenu: '/applications/kubernetes', action: 'create' },
+        hidden: true
+      },
+      {
+        path: ':id/update',
+        name: 'KubernetesAppUpdate',
+        component: () => import('@/views/applications/KubernetesApp/KubernetesAppCreateUpdate'),
+        meta: { title: i18n.t('route.KubernetesAppUpdate'), activeMenu: '/applications/kubernetes', action: 'update' },
+        hidden: true
+      },
+      {
+        path: ':id',
+        name: 'KubernetesAppDetail',
+        component: () => import('@/views/applications/KubernetesApp/KubernetesAppDetail/index'),
+        meta: { title: i18n.t('route.KubernetesAppDetail'), activeMenu: '/applications/kubernetes' },
+        hidden: true
+      }
+    ]
   }
 ]
diff --git a/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue b/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
index b3ba722a9..ca2340f1a 100644
--- a/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
+++ b/src/views/accounts/ApplicationAccount/ApplicationAccountList.vue
@@ -1,20 +1,20 @@
 <template>
   <GenericTreeListPage ref="TreeTablePage" :tree-setting="treeSetting">
     <template #table>
-      <AccountListTable ref="table" :url="accountsUrl" />
+      <AppAccountListTable ref="table" :url="accountsUrl" />
     </template>
   </GenericTreeListPage>
 </template>
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
-import AccountListTable from '@/components/AccountListTable'
+import AppAccountListTable from '@/components/AppAccountListTable'
 import { setUrlParam } from '@/utils/common'
 
 export default {
   name: 'AssetAccountList',
   components: {
-    GenericTreeListPage, AccountListTable
+    GenericTreeListPage, AppAccountListTable
   },
   data() {
     const vm = this
@@ -22,25 +22,27 @@ export default {
       isInit: true,
       clickedRow: null,
       iShowTree: true,
-      accountsUrl: '/api/v1/assets/accounts/',
+      accountsUrl: '/api/v1/applications/accounts/',
       treeSetting: {
         async: false,
         showMenu: false,
         showRefresh: true,
         showAssets: false,
-        url: '/api/v1/assets/accounts/',
-        treeUrl: '/api/v1/applications/applications/tree/',
+        treeUrl: '/api/v1/applications/applications/tree/?show_count=0',
         callback: {
           onSelected: function(event, treeNode) {
-            let url = '/api/v1/assets/accounts/'
-            if (treeNode.meta.type === 'node') {
-              const nodeId = treeNode.meta.node.id
-              url = setUrlParam(url, 'asset', '')
-              url = setUrlParam(url, 'node', nodeId)
-            } else if (treeNode.meta.type === 'asset') {
-              const assetId = treeNode.meta.asset.id
-              url = setUrlParam(url, 'node', '')
-              url = setUrlParam(url, 'asset', assetId)
+            let url = '/api/v1/applications/accounts/'
+            const nodeId = treeNode.id
+            if (treeNode.meta.type === 'category') {
+              url = setUrlParam(url, 'app_category', nodeId)
+              url = setUrlParam(url, 'app_type', '')
+            } else if (treeNode.meta.type === 'type') {
+              url = setUrlParam(url, 'app_category', '')
+              url = setUrlParam(url, 'app_type', nodeId)
+            } else if (treeNode.meta.type === 'application') {
+              url = setUrlParam(url, 'app_category', '')
+              url = setUrlParam(url, 'app_type', '')
+              url = setUrlParam(url, 'app', nodeId)
             }
             setTimeout(() => {
               vm.accountsUrl = url

From ba78bdeed70dbf86203721a320ab42401a83c9a9 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 27 Jul 2021 14:37:00 +0800
Subject: [PATCH 4/4] =?UTF-8?q?perf:=20=E8=BF=98=E5=8E=9F=E6=94=B6?=
 =?UTF-8?q?=E9=9B=86=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GatheredUser/GatheredUserList.vue         | 276 ++++--------------
 1 file changed, 51 insertions(+), 225 deletions(-)

diff --git a/src/views/accounts/GatheredUser/GatheredUserList.vue b/src/views/accounts/GatheredUser/GatheredUserList.vue
index eedce7d5b..4fe1b1375 100644
--- a/src/views/accounts/GatheredUser/GatheredUserList.vue
+++ b/src/views/accounts/GatheredUser/GatheredUserList.vue
@@ -1,249 +1,75 @@
 <template>
-  <div>
-    <el-row>
-      <el-col v-show="iShowTree" :span="iShowTree?4:0">
-        <AutoDataZTree
-          ref="AUtoDataZTree"
-          :setting="treeSetting"
-        />
-      </el-col>
-      <el-col :span="iShowTree?9:11">
-        <div class="mini">
-          <div style="display:block" class="mini-button" @click="iShowTree=!iShowTree">
-            <i v-show="iShowTree" class="fa fa-angle-left fa-x" />
-            <i v-show="!iShowTree" class="fa fa-angle-right fa-x" />
-          </div>
-        </div>
-        <GenericListTable
-          ref="LeftTable"
-          class="asset-table"
-          :header-actions="leftTable.headerActions"
-          :table-config="leftTable.tableConfig"
-          @row-click="leftTable.tableConfig.rowClick"
-        />
-      </el-col>
-      <el-col :span="iShowTree?11:13">
-        <GenericListTable
-          v-if="!isInit"
-          ref="RightTable"
-          class="asset-user-table"
-          :header-actions="rightTable.headerActions"
-          :table-config="rightTable.tableConfig"
-        />
-        <div v-else class="noDataR">
-          <div class="hintWrap">
-            <div>{{ $t('accounts.PleaseClickLeftAssetToViewGatheredUser') }}</div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-  </div>
+  <TreeTable :table-config="tableConfig" :tree-setting="treeSetting" :header-actions="headerActions" />
 </template>
 
 <script>
-import GenericListTable from '@/layout/components/GenericListTable'
-import AutoDataZTree from '@/components/AutoDataZTree/index'
-import { ChoicesFormatter, DetailFormatter } from '@/components/TableFormatters'
-
+import TreeTable from '@/components/TreeTable'
 export default {
-  name: 'AssetAccountList',
   components: {
-    AutoDataZTree, GenericListTable
+    TreeTable
   },
   data() {
-    const vm = this
     return {
-      isInit: true,
-      clickedRow: {},
-      iShowTree: true,
       treeSetting: {
         showMenu: false,
-        showRefresh: false,
-        showAssets: false,
-        url: '',
-        treeUrl: '/api/v1/assets/nodes/children/tree/',
-        callback: {
-          onSelected: function(event, treeNode) {
-            vm.leftTable.tableConfig.url = `/api/v1/assets/assets/?node_id=${treeNode.meta.node.id}`
-            vm.isInit = true
+        showRefresh: true,
+        showAssets: true,
+        url: '/api/v1/assets/gathered-users/',
+        nodeUrl: '/api/v1/assets/nodes/',
+        // ?assets=0不显示资产. =1显示资产
+        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
+      },
+      tableConfig: {
+        url: '/api/v1/assets/gathered-users/',
+        hasTree: true,
+        columns: [
+          'hostname', 'ip', 'username', 'date_last_login', 'present', 'ip_last_login', 'date_updated'
+        ],
+        columnsMeta: {
+          hostname: {
+            showOverflowTooltip: true
+          },
+          ip: {
+            width: 120
+          },
+          username: {
+            showOverflowTooltip: true
+          },
+          present: {
+            width: 80
+          },
+          ip_last_login: {
+            width: 120
           }
         }
       },
-      leftTable: {
-        tableConfig: {
-          url: '/api/v1/assets/assets/',
-          columns: [
-            'hostname', 'ip', 'public_ip', 'admin_user_display',
-            'protocols', 'platform', 'connectivity',
-            'created_by', 'date_created', 'comment', 'org_name'
-          ],
-          columnsShow: {
-            min: ['hostname', 'ip', 'platform'],
-            default: ['hostname', 'ip', 'connectivity', 'platform']
-          },
-          columnsMeta: {
-            hostname: {
-              formatter: DetailFormatter,
-              formatterArgs: {
-                route: 'AssetDetail',
-                routeQuery: {
-                  activeTab: 'Detail'
-                }
-              },
-              showOverflowTooltip: true
+      headerActions: {
+        hasCreate: false,
+        hasLeftActions: false,
+        hasImport: false,
+        searchConfig: {
+          exclude: ['asset'],
+          options: [
+            {
+              label: this.$t('assets.Hostname'),
+              value: 'asset__hostname'
             },
-            connectivity: {
-              label: this.$t('assets.Reachable'),
-              formatter: ChoicesFormatter,
-              formatterArgs: {
-                iconChoices: {
-                  0: 'fa-times text-danger',
-                  1: 'fa-check text-primary',
-                  2: 'fa-circle text-warning'
-                },
-                typeChange: function(val) {
-                  if (!val) {
-                    return 2
-                  }
-                  return val.status
-                },
-                hasTips: true
-              },
-              width: '90px',
-              align: 'center'
+            {
+              label: 'IP',
+              value: 'asset__ip'
             }
-          },
-          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/assets/gathered-users/?asset_id=${row.id}`
-            vm.clickedRow = row
-            vm.isInit = false
-          }
-        },
-        headerActions: {
-          hasLeftActions: false,
-          hasCreate: false,
-          hasExport: false,
-          hasImport: false,
-          hasBulkDelete: false,
-          hasBulkUpdate: false
-        }
-      },
-      rightTable: {
-        tableConfig: {
-          url: `/api/v1/assets/gathered-users/?asset__hostname=ShowFirstAssetRelated`,
-          columns: [
-            'username', 'date_last_login', 'present', 'ip_last_login', 'date_updated', 'org_name'
-          ],
-          columnsShow: {
-            min: ['username'],
-            default: [
-              'username', 'date_last_login', 'present', 'ip_last_login', 'date_updated'
-            ]
-          },
-          columnsMeta: {
-            username: {
-              showOverflowTooltip: true
-            },
-            present: {
-              width: 80
-            },
-            ip_last_login: {
-              width: 120
-            }
-          },
-          tableAttrs: {
-            stripe: true, // 斑马纹表格
-            border: true, // 表格边框
-            fit: true, // 宽度自适应,
-            tooltipEffect: 'dark',
-            rowClassName({ row, rowIndex }) {
-              return 'row-background-color'
-            }
-          }
-        },
-        headerActions: {
-          hasLeftActions: false,
-          hasCreate: false,
-          hasExport: true,
-          hasImport: false,
-          hasBulkDelete: false,
-          hasBulkUpdate: false,
-          searchConfig: {
-            exclude: ['asset']
-          }
+          ]
         }
       }
     }
+  },
+  methods: {
+    onGatherUserTasks() {
+      this.$router.push({ name: 'GatherUserTaskList' })
+    }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-  .asset-table ::v-deep .row-clicked, .asset-user-table ::v-deep .row-background-color {
-    background-color: #f5f7fa;
-  }
-  .asset-table {
-    &:hover {
-      cursor: pointer;
-    }
-    & >>> .table-content {
-      margin-left: 21px;
-    }
-    & ::v-deep .el-table__row{
-      height: 40px;
-      & > td{
-        padding: 0;
-      }
-    }
-  }
-  .mini-button{
-    width: 12px;
-    float: left;
-    margin-right: 10px;
-    text-align: center;
-    padding: 9px 0;
-    background-color: #1ab394;
-    border-color: #1ab394;
-    color: #FFFFFF;
-    border-radius: 5px;
-    line-height: 1.428;
-    cursor:pointer;
-  }
-  .noDataR{
-    width: 100%;
-    height: 40vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    flex-direction: column;
-    .hintWrap{
-      color: #D4D6E6;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      flex-direction: column;
-    }
-  }
-  .asset-user-table{
-    padding-left: 20px;
-    & ::v-deep .el-table__header-wrapper thead tr{
-      height: 40px;
-      & > th{
-        padding: 0;
-      }
-    }
-  }
+<style>
 </style>