diff --git a/jero-web/src/components/exportTree/index.vue b/jero-web/src/components/exportTree/index.vue
index e69de29bb..fa269e4b0 100644
--- a/jero-web/src/components/exportTree/index.vue
+++ b/jero-web/src/components/exportTree/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange" />
+    <a-tree
+      :expanded-keys="expandedKeys"
+      :auto-expand-parent="autoExpandParent"
+      :tree-data="gData"
+      @expand="onExpand"
+    >
+      <template slot="title" slot-scope="{ title }">
+        <span v-if="title.indexOf(searchValue) > -1">
+          {{ title.substr(0, title.indexOf(searchValue)) }}
+          <span style="color: #f50">{{ searchValue }}</span>
+          {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+        </span>
+        <span v-else>{{ title }}</span>
+      </template>
+      <template>
+        <a-dropdown :trigger="['contextmenu']">
+          <span>{{ title }}</span>
+          <template #overlay>
+            <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
+              <a-menu-item key="1">1st menu item</a-menu-item>
+              <a-menu-item key="2">2nd menu item</a-menu-item>
+              <a-menu-item key="3">3rd menu item</a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script>
+const x = 3;
+const y = 2;
+const z = 1;
+const gData = [];
+
+const generateData = (_level, _preKey, _tns) => {
+  const preKey = _preKey || '0';
+  const tns = _tns || gData;
+
+  const children = [];
+  for (let i = 0; i < x; i++) {
+    const key = `${preKey}-${i}`;
+    tns.push({ title: key, key, scopedSlots: { title: 'title' } });
+    if (i < y) {
+      children.push(key);
+    }
+  }
+  if (_level < 0) {
+    return tns;
+  }
+  const level = _level - 1;
+  children.forEach((key, index) => {
+    tns[index].children = [];
+    return generateData(level, key, tns[index].children);
+  });
+};
+generateData(z);
+
+const dataList = [];
+const generateList = data => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i];
+    const key = node.key;
+    dataList.push({ key, title: key });
+    if (node.children) {
+      generateList(node.children);
+    }
+  }
+};
+generateList(gData);
+
+const getParentKey = (key, tree) => {
+  let parentKey;
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.children) {
+      if (node.children.some(item => item.key === key)) {
+        parentKey = node.key;
+      } else if (getParentKey(key, node.children)) {
+        parentKey = getParentKey(key, node.children);
+      }
+    }
+  }
+  return parentKey;
+};
+export default {
+  data() {
+    return {
+      searchValue: '',
+      autoExpandParent: true,
+      expandedKeys: ['0-0-0', '0-0-1'],
+      gData,
+    };
+  },
+  methods: {
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    onChange(e) {
+      const value = e.target.value;
+      const expandedKeys = dataList
+        .map(item => {
+          if (item.title.indexOf(value) > -1) {
+            return getParentKey(item.key, gData);
+          }
+          return null;
+        })
+        .filter((item, i, self) => item && self.indexOf(item) === i);
+      Object.assign(this, {
+        expandedKeys,
+        searchValue: value,
+        autoExpandParent: true,
+      });
+    },
+    onContextMenuClick(treeKey, menuKey) {
+      console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/jero-web/src/views/externalReports/index.vue b/jero-web/src/views/externalReports/index.vue
index 2467169d4..329442c47 100644
--- a/jero-web/src/views/externalReports/index.vue
+++ b/jero-web/src/views/externalReports/index.vue
@@ -1,8 +1,10 @@
 <template>
 <div style='display:flex'>
-<!--  <a-card>-->
-<!--    <div style='width: 400px;background-color: red'></div>-->
-<!--  </a-card>-->
+  <a-card :bordered="false">
+    <div style='width: 300px;background-color: white'>
+      <exportTree ref="exportRef" />
+    </div>
+  </a-card>
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -115,6 +117,7 @@ import addModel from './components/addModel'
 import handleModel from './components/handle'
 import { getAction, postAction, downloadFile, deleteAction } from '@/api/manage'
 import globalAdvancedQuery from '@/components/globalAdvancedQuery/index'
+import exportTree from '@/components/exportTree/index'
 import axios from 'axios'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 // import eventBUs from '../../../common/event'
@@ -126,6 +129,7 @@ export default {
   components: {
     addModel,
     handleModel,
+    exportTree,
     globalAdvancedQuery
   },
   data() {