feat: 添加资产账号模块(基本完成，细节待优化)

src/components/AssetUserTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable ref="ListTable" :table-config="iTableConfig" :header-actions="headerActions" />
       <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">
@@ -93,6 +93,10 @@ export default {
     hasClone: {
       type: Boolean,
       default: true
+    },
+    tableConfig: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
@@ -114,36 +118,31 @@ export default {
         password: '',
         private_key: ''
       },
-      tableConfig: {
+      defaultTableConfig: {
         url: this.url,
-        columns: [
-          {
-            prop: 'hostname',
+        columns: ['hostname', 'ip', 'username', 'version', 'date_created', 'actions'],
+        columnsMeta: {
+          'hostname': {
             label: this.$t('assets.Hostname'),
             showOverflowTooltip: true
           },
-          {
-            prop: 'ip',
+          'ip': {
             label: this.$t('assets.ip'),
             width: '120px'
           },
-          {
-            prop: 'username',
+          'username': {
             label: this.$t('assets.Username'),
             showOverflowTooltip: true
           },
-          {
-            prop: 'version',
+          'version': {
             label: this.$t('assets.Version'),
             width: '70px'
           },
-          {
-            prop: 'date_created',
+          'date_created': {
             label: this.$t('assets.date_joined'),
             formatter: DateFormatter
           },
-          {
-            prop: 'id',
+          'actions': {
             label: this.$t('common.Action'),
             align: 'center',
             width: 150,
@@ -211,7 +210,7 @@ export default {
               ]
             }
           }
-        ],
+        },
         extraQuery: {
           latest: 1
         }
@@ -256,16 +255,19 @@ export default {
       const ttl = this.publicSettings.SECURITY_MFA_VERIFY_TTL
       const now = new Date()
       return !(this.MFAVerifyAt && (now - this.MFAVerifyAt) < ttl * 1000)
+    },
+    iTableConfig() {
+      return Object.assign(this.defaultTableConfig, this.tableConfig)
     }
   },
   watch: {
     url(iNew) {
-      this.$set(this.tableConfig, 'url', iNew)
+      this.$set(this.iTableConfig, 'url', iNew)
     }
   },
   mounted() {
     if (this.otherActions) {
-      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
+      const actionColumn = this.iTableConfig.columns[this.iTableConfig.columns.length - 1]
       for (const item of this.otherActions) {
         actionColumn.formatterArgs.extraActions.push(item)
       }

src/router/accounts.js

@@ -11,6 +11,13 @@ export default [
         name: 'AssetAccountList',
         component: () => import('@/views/accounts/AssetAccount/AssetAccountList'),
         meta: { title: i18n.t('route.AssetAccount') }
+      },
+      {
+        path: 'create',
+        component: () => import('@/views/accounts/AssetAccount/AssetAccountCreate'),
+        name: 'AssetAccountCreate',
+        meta: { title: i18n.t('accounts.Create'), activeMenu: '/accounts/asset-accounts/' },
+        hidden: true
       }
     ]
   },

src/views/accounts/AssetAccount/AssetAccountCreate.vue

@@ -0,0 +1,60 @@
+<template>
+  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
+</template>
+
+<script>
+import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+import { UploadKey, Select2 } from '@/components'
+export default {
+  name: 'VaultCreate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      url: '/api/v1/assets/asset-users/',
+      initial: {
+
+      },
+      fields: [
+        [this.$t('common.Basic'), ['asset', 'username', 'password', 'private_key', 'comment']]
+      ],
+      fieldsMeta: {
+        asset: {
+          label: this.$t('perms.Asset'),
+          component: Select2,
+          el: {
+            multiple: false,
+            ajax: {
+              url: '/api/v1/assets/assets/',
+              transformOption: (item) => {
+                return { label: `${item.hostname}(${item.ip})`, value: item.id }
+              }
+            }
+          }
+        },
+        name: {
+          el: {
+            placeholder: this.$t('common.Name')
+          }
+        },
+        username: {
+          el: {
+            placeholder: this.$t('common.Username')
+          }
+        },
+        password: {
+          helpText: this.$t('common.passwordOrPassphrase')
+        },
+        private_key: {
+          component: UploadKey
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/accounts/AssetAccount/AssetAccountList.vue

@@ -1,14 +1,99 @@
 <template>
-  <div>
-    <div>tree</div>
-    <div>asset-list</div>
-    <div>account-list</div>
-  </div>
+  <Page>
+    <el-row>
+      <el-col :span="4">
+        <AutoDataZTree
+          ref="AUtoDataZTree"
+          :setting="treeSetting"
+        />
+      </el-col>
+      <el-col :span="12">
+        <GenericListTable
+          ref="LeftTable"
+          :header-actions="leftTable.headerActions"
+          :table-config="leftTable.tableConfig"
+          @row-click="leftTable.tableConfig.rowClick"
+        />
+      </el-col>
+      <el-col :span="8">
+        <AssetUserTable
+          ref="RightTable"
+          :url="rightTable.url"
+          :has-left-actions="true"
+          :table-config="rightTable.tableConfig"
+          :has-clone="false"
+          :has-import="false"
+        />
+      </el-col>
+    </el-row>
+  </Page>
 </template>
 
 <script>
+import Page from '@/layout/components/Page'
+import GenericListTable from '@/layout/components/GenericListTable'
+import AutoDataZTree from '@/components/AutoDataZTree/index'
+import { AssetUserTable } from '@/components'
+
 export default {
-  name: 'AssetAccountList'
+  name: 'AssetAccountList',
+  components: {
+    AutoDataZTree, GenericListTable, Page, AssetUserTable
+  },
+  data() {
+    const vm = this
+    return {
+      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}`
+          }
+        }
+      },
+      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: {
+          },
+          rowClick: function(row, column, event) {
+            vm.rightTable.url = `/api/v1/assets/asset-users/?asset_id=${row.id}&latest=1`
+          }
+        },
+        headerActions: {
+          hasLeftActions: false,
+          hasCreate: false,
+          hasExport: false,
+          hasImport: false,
+          hasBulkDelete: false,
+          hasBulkUpdate: false
+        }
+      },
+      rightTable: {
+        url: `/api/v1/assets/asset-users/?asset_id=&latest=1`,
+        tableConfig: {
+          columns: ['name', 'username', 'version', 'date_created', 'actions'],
+          columnsShow: {
+            min: ['username', 'actions'],
+            default: ['username', 'version', 'date_created', 'actions']
+          }
+        }
+      }
+    }
+  }
 }
 </script>