refactor: 重构命令记录结构 (#622)

* refactor: 重构命令记录结构

* fix: 调整tree构建字段

* fix: 修复首次打开页面报错的问题

* fix: 修复命令记录Tree刷新的问题

* fix: 添加时间戳排序

* fix: 删除多余的Consolelog

Co-authored-by: Orange <orangemtony@gmail.com>

src/components/AutoDataZTree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <DataZTree ref="dataztree" :setting="treeSetting">
+  <DataZTree ref="dataztree" :setting="treeSetting" v-on="$listeners">
     <slot slot="rMenu">
       <li id="m_create" class="rmenu" tabindex="-1" @click="createTreeNode">
         <i class="fa fa-plus-square-o" />  {{ this.$t('tree.CreateNode') }}
@@ -244,6 +244,12 @@ export default {
     },
     getSelectedNodes: function() {
       return this.zTree.getSelectedNodes()
+    },
+    getNodes: function() {
+      return this.zTree.getNodes()
+    },
+    selectNode: function(node) {
+      return this.zTree.selectNode(node)
     }
   }
 }

src/components/DataZTree/components/ZTree/index.vue

@@ -95,6 +95,8 @@ export default {
           vm.zTree.destroy()
         }
         this.zTree = $.fn.zTree.init($(`#${this.iZTreeID}`), this.treeSetting, res)
+        // 手动上报事件, Tree加载完成
+        this.$emit('TreeInitFinish', this.zTree)
         if (this.treeSetting.showRefresh) {
           this.rootNodeAddDom(
             this.zTree,

src/components/DataZTree/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ZTree ref="ztree" :setting="treeSetting">
+  <ZTree ref="ztree" :setting="treeSetting" v-on="$listeners">
     <!--Slot透传-->
     <div slot="rMenu" slot-scope="{data}">
       <slot name="rMenu" :data="data" />

src/components/ListTable/index.vue

@@ -85,9 +85,11 @@ export default {
       this.dataTable.getList()
     },
     search(attrs) {
+      this.$emit('TagSearch', attrs)
       return this.dataTable.search(attrs, true)
     },
     filter(attrs) {
+      this.$emit('TagFilter', attrs)
       this.$refs.dataTable.$refs.dataTable.search(attrs, true)
     },
     handleDateChange(attrs) {
@@ -101,6 +103,7 @@ export default {
         date_from: attrs[0].toISOString(),
         date_to: attrs[1].toISOString()
       }
+      this.$emit('TagDateChange', attrs)
       return this.dataTable.searchDate(query)
     },
     toggleRowSelection(row, isSelected) {

src/components/TreeTable/index.vue

@@ -5,8 +5,10 @@
         <component
           :is="component"
           ref="AutoDataZTree"
+          :key="componentTreeKey"
           :setting="treeSetting"
           class="auto-data-ztree"
+          v-on="$listeners"
           @urlChange="handleUrlChange"
         >
           <div slot="rMenu" slot-scope="{data}">
@@ -22,7 +24,7 @@
         </div>
         <div class="transition-box" style="width: calc(100% - 17px);">
           <slot name="table">
-            <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" />
+            <ListTable ref="ListTable" :key="componentKey" :table-config="iTableConfig" :header-actions="headerActions" v-on="$listeners" />
           </slot>
         </div>
       </div>
@@ -63,10 +65,17 @@ export default {
     return {
       iTableConfig: this.tableConfig,
       iShowTree: this.showTree,
-      componentKey: 0
+      componentKey: 0,
+      componentTreeKey: 0
     }
   },
   watch: {
+    treeConfig: {
+      handler(val) {
+
+      },
+      deep: true
+    }
   },
   methods: {
     handleUrlChange(_url) {
@@ -77,11 +86,20 @@ export default {
     forceRerender() {
       this.componentKey += 1
     },
+    forceRerenderTree() {
+      this.componentTreeKey += 1
+    },
     hideRMenu() {
       this.$refs.AutoDataZTree.hideRMenu()
     },
     getSelectedNodes: function() {
       return this.$refs.AutoDataZTree.getSelectedNodes()
+    },
+    getNodes: function() {
+      return this.$refs.AutoDataZTree.getNodes()
+    },
+    selectNode: function(node) {
+      return this.$refs.AutoDataZTree.selectNode(node)
     }
   }
 }

src/layout/components/GenericTreeListPage/index.vue

@@ -1,7 +1,13 @@
 <template>
   <Page>
     <el-alert v-if="helpMessage" type="success"> {{ helpMessage }} </el-alert>
-    <TreeTable ref="TreeTable" :table-config="tableConfig" :header-actions="iHeaderActions" :tree-setting="treeSetting">
+    <TreeTable
+      ref="TreeTable"
+      :table-config="tableConfig"
+      :header-actions="headerActions"
+      :tree-setting="treeSetting"
+      v-on="$listeners"
+    >
       <template #table>
         <slot name="table" />
       </template>
@@ -45,6 +51,12 @@ export default {
     },
     getSelectedNodes: function() {
       return this.$refs.TreeTable.getSelectedNodes()
+    },
+    getNodes: function() {
+      return this.$refs.TreeTable.getNodes()
+    },
+    selectNode: function(node) {
+      return this.$refs.TreeTable.selectNode(node)
     }
   }
 }

src/views/sessions/CommandList.vue

@@ -1,16 +1,30 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <div v-loading="loading">
+    <GenericTreeListPage
+      ref="GenericTreeListPage"
+      :table-config="tableConfig"
+      :header-actions="headerActions"
+      :tree-setting="treeSetting"
+      @TreeInitFinish="checkFirstNode"
+      @TagSearch="handleTagChange"
+      @TagFilter="handleFilterChange"
+      @TagDateChange="handleDateChange"
+    />
+  </div>
 </template>
 
 <script>
-import { GenericListPage } from '@/layout/components'
+import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
 import { getDayEnd, getDaysAgo, toSafeLocalDateStr } from '@/utils/common'
 import { OutputExpandFormatter } from './formatters'
 import { DetailFormatter } from '@/components/ListTable/formatters'
+import isFalsey from '@/components/DataTable/compenents/el-data-table/utils/is-falsey'
+import deepmerge from 'deepmerge'
+import * as queryUtil from '@/components/DataTable/compenents/el-data-table/utils/query'
 
 export default {
   components: {
-    GenericListPage
+    GenericTreeListPage
   },
   data() {
     const vm = this
@@ -18,8 +32,13 @@ export default {
     const dateFrom = getDaysAgo(2, now).toISOString()
     const dateTo = getDayEnd(now).toISOString()
     return {
+      query: {
+        date_from: getDaysAgo(2, now).toISOString(),
+        date_to: getDayEnd(now).toISOString()
+      },
+      loading: true,
       tableConfig: {
-        url: '/api/v1/terminal/commands/',
+        url: '',
         columns: [
           'expandCol', 'input', 'risk_level', 'user',
           'asset', 'system_user', 'session', 'timestamp'
@@ -77,6 +96,7 @@ export default {
           timestamp: {
             label: this.$t('sessions.date'),
             width: '150px',
+            sortable: 'custom',
             formatter: function(row) {
               return toSafeLocalDateStr(row.timestamp * 1000)
             }
@@ -92,8 +112,79 @@ export default {
           dateStart: dateFrom,
           dateEnd: dateTo
         }
+      },
+      treeSetting: {
+        showMenu: false,
+        showRefresh: true,
+        showAssets: false,
+        // ?assets=0不显示资产. =1显示资产
+        treeUrl: `/api/v1/terminal/command-storages/tree/?real=1&date_from=${dateFrom}&date_to=${dateTo}`,
+        callback: {
+          onSelected: function(event, treeNode) {
+            // 禁止点击根节点
+            if (treeNode.id === 'root') {
+              return
+            }
+            this.tableConfig.url = `/api/v1/terminal/commands/?command_storage_id=${treeNode.id}`
+          }.bind(this)
+        }
       }
     }
+  },
+  computed: {
+    treeTable() {
+      return this.$refs.GenericTreeListPage.$refs.TreeTable
+    }
+  },
+  watch: {
+
+  },
+  methods: {
+    checkFirstNode(obj) {
+      const ztree = obj
+      const nodes = ztree.getNodes()
+      if (nodes[0].children.length > 0) {
+        ztree.selectNode(nodes[0].children[0])
+      }
+      this.loading = false
+    },
+    handleTagChange(query) {
+      const _query = this.cleanUrl(query)
+      const url = `/api/v1/terminal/command-storages/tree/?real=1`
+      const queryStr = (url.indexOf('?') > -1 ? '&' : '?') + queryUtil.stringify(_query, '=', '&')
+      const treeUrl = url + queryStr
+      this.$set(this.treeSetting, 'treeUrl', treeUrl)
+      this.treeTable.forceRerenderTree()
+    },
+    handleFilterChange(query) {
+      const _query = this.cleanUrl(query)
+      const url = `/api/v1/terminal/command-storages/tree/?real=1`
+      const queryStr = (url.indexOf('?') > -1 ? '&' : '?') + queryUtil.stringify(_query, '=', '&')
+      const treeUrl = url + queryStr
+      this.$set(this.treeSetting, 'treeUrl', treeUrl)
+      this.treeTable.forceRerenderTree()
+    },
+    handleDateChange(object) {
+      this.query = {
+        date_from: object[0].toISOString(),
+        date_to: object[1].toISOString()
+      }
+      const url = `/api/v1/terminal/command-storages/tree/?real=1`
+      const queryStr = (url.indexOf('?') > -1 ? '&' : '?') + queryUtil.stringify(this.query, '=', '&')
+      const treeUrl = url + queryStr
+      this.$set(this.treeSetting, 'treeUrl', treeUrl)
+      this.treeTable.forceRerenderTree()
+    },
+    cleanUrl(query) {
+      query = Object.keys(query)
+        .filter(k => !isFalsey(query[k]))
+        .reduce((obj, k) => {
+          obj[k] = query[k].toString().trim()
+          return obj
+        }, {})
+      query = deepmerge(this.query, query)
+      return query
+    }
   }
 }
 </script>