perf: 还原收集用户

src/views/accounts/GatheredUser/GatheredUserList.vue

@@ -1,158 +1,37 @@
 <template>
-  <div>
+  <TreeTable :table-config="tableConfig" :tree-setting="treeSetting" :header-actions="headerActions" />
-    <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>
 </template>
 
 <script>
-import GenericListTable from '@/layout/components/GenericListTable'
+import TreeTable from '@/components/TreeTable'
-import AutoDataZTree from '@/components/AutoDataZTree/index'
-import { ChoicesFormatter, DetailFormatter } from '@/components/TableFormatters'
-
 export default {
-  name: 'AssetAccountList',
   components: {
-    AutoDataZTree, GenericListTable
+    TreeTable
   },
   data() {
-    const vm = this
     return {
-      isInit: true,
-      clickedRow: {},
-      iShowTree: true,
       treeSetting: {
         showMenu: false,
-        showRefresh: false,
+        showRefresh: true,
-        showAssets: false,
+        showAssets: true,
-        url: '',
+        url: '/api/v1/assets/gathered-users/',
-        treeUrl: '/api/v1/assets/nodes/children/tree/',
+        nodeUrl: '/api/v1/assets/nodes/',
-        callback: {
+        // ?assets=0不显示资产. =1显示资产
-          onSelected: function(event, treeNode) {
+        treeUrl: '/api/v1/assets/nodes/children/tree/?assets=1'
-            vm.leftTable.tableConfig.url = `/api/v1/assets/assets/?node_id=${treeNode.meta.node.id}`
-            vm.isInit = true
-          }
-        }
       },
-      leftTable: {
       tableConfig: {
-          url: '/api/v1/assets/assets/',
+        url: '/api/v1/assets/gathered-users/',
+        hasTree: true,
         columns: [
-            'hostname', 'ip', 'public_ip', 'admin_user_display',
+          'hostname', 'ip', 'username', 'date_last_login', 'present', 'ip_last_login', 'date_updated'
-            '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
           },
-            connectivity: {
+          ip: {
-              label: this.$t('assets.Reachable'),
+            width: 120
-              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'
-            }
-          },
-          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
           },
@@ -162,88 +41,35 @@ export default {
           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,
+        hasLeftActions: false,
         hasImport: false,
-          hasBulkDelete: false,
-          hasBulkUpdate: false,
         searchConfig: {
-            exclude: ['asset']
+          exclude: ['asset'],
+          options: [
+            {
+              label: this.$t('assets.Hostname'),
+              value: 'asset__hostname'
+            },
+            {
+              label: 'IP',
+              value: 'asset__ip'
+            }
+          ]
         }
       }
     }
+  },
+  methods: {
+    onGatherUserTasks() {
+      this.$router.push({ name: 'GatherUserTaskList' })
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style>
-  .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>