- {{ statistics?.elapsed }} sec
+ Executed: {{ formatTimestamp(statistics?.timestamp) }}
+
diff --git a/src/components/sql/Filter.vue b/src/components/sql/Filter.vue
index 72bb3895..6ec91507 100644
--- a/src/components/sql/Filter.vue
+++ b/src/components/sql/Filter.vue
@@ -6,68 +6,69 @@ import { ScrollbarInstance } from 'element-plus'
import { queryAllDatabases, queryAllColumns, queryAllTables } from './query'
import { createTree } from './utils'
import { ColumnCommand } from './types'
-// import { useLoginStore } from '@/store'
import tableImg from '@/assets/images/sql/table.svg'
import databaseImg from '@/assets/images/sql/database.svg'
+import openInNewImg from '@/assets/icons/svg/open_in_new.svg'
import SvgIcon from '../SvgIcon/index.vue'
+import { ElTreeV2 } from 'element-plus'
+import { ColumnItem, DatabaseItem, TableItem } from './types'
const emit = defineEmits(['tableCommand'])
// const loginStore = useLoginStore()
const treeLoading = ref(false)
-const columns = ref([])
-const selectV2Columns = ref([])
const tree = ref([])
const defaultExpandKeys = ref([])
-const seletedColumn = ref()
-const selectedColumnObj = ref()
-const treeInstance = ref()
+const treeInstance = ref>()
const dataloading = ref(false)
const dragEle = ref()
const treeContainerHeight = ref()
const br = '\n'
const scrollBar = ref()
+const query = ref()
+const hideEmptyTables = ref()
+
+const filterTreeNodes = (query: string, node: any) => {
+ let show = true
+ if (query != '') {
+ const label = node.name
+ show = show && label.includes(query)
+ }
+ if (hideEmptyTables.value && node.total_rows>=0) {
+ const total_rows = node.total_rows
+ show = show && (total_rows > 0)
+ }
+ return show
+}
+
+const onHideEmptyChanged = () => {
+ const filter: string = query?.value !== undefined ? query?.value : ''
+ onFilterChanged(filter)
+}
+
+const onFilterChanged = (query: string) => {
+ // TODO: fix typing when refactor tree-v2
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
+ treeInstance.value?.filter(query)
+}
onBeforeMount(() => {
- // dataloading.value = true
- // var worker = new Worker('worker.js');
- // worker.onmessage = (e) => {
- // const realData = JSON.parse(e.data)
- // columns.value = realData.columns
- // tree.value = realData.tree
- // defaultExpandKeys.value = [tree.value[0].name]
- // dataloading.value = false
- // }
- // worker.postMessage(JSON.stringify(loginStore.connection))
-
getTreeData()
})
onMounted(() => {
- treeContainerHeight.value = document.querySelector('.tree-content')?.getBoundingClientRect().height
+ const height = Number(document.querySelector('.tree-content')?.getBoundingClientRect().height)
+ treeContainerHeight.value = height - 0
// closeTooltip()
})
-// const closeTooltip = () => {
-// // 此处事件源可以替换，按需切换即可
-// (scrollBar.value?.wrap$ as HTMLElement).onscroll = () => {
-// console.log('111111111')
-// let list = document.querySelectorAll('.el-popper.is-dark.click-cat-dark')
-// if (list.length > 0) {
-// (list[list.length - 1] as HTMLElement).style.display = 'none'
-// }
-// }
-// }
-
const getTreeData = () => {
- //dataloading.value = true
treeLoading.value = true
Promise.all([queryAllColumns(), queryAllTables(), queryAllDatabases()])
.then(res => {
const dataArr = res.map(item => item.data)
- columns.value = dataArr[0]
- selectV2Columns.value = dataArr[0].map((item: any) => ({ label: item.name, value: `${item.database}.${item.table}.${item.name}`}))
tree.value = createTree(
dataArr[0],
dataArr[1],
@@ -87,24 +88,6 @@ const clickCommand = (node: any, command: string) => {
})
}
-const changeSelected = (val: string) => {
- if (selectedColumnObj.value) {
- selectedColumnObj.value.selected = false
- }
- const [database, table, currentCol] = val.split('.')
- const selectedColumn = columns.value.find((item: any) => item.name === currentCol)
- selectedColumnObj.value = selectedColumn
- selectedColumn.selected = true
- treeInstance.value.store.nodesMap[database].expanded = true
- treeInstance.value.store.nodesMap[table].expanded = true
-
- // setTimeout(() => {
- // console.log(`#${database}-${table}-${currentCol}`)
- // const nodeEle = document.querySelector(`#${database}-${table}-${currentCol}`)
- // console.log(nodeEle, 'nodeEle')
- // nodeEle?.scrollIntoView()
- // }, 100)
-}
const getDragEle = () => {
return dragEle.value
@@ -115,11 +98,9 @@ const refreshTree = () => {
}
const shrinkAll = () => {
- Object.keys(treeInstance.value.store.nodesMap).forEach(key => {
- if (treeInstance.value.store.nodesMap[key].expanded) {
- treeInstance.value.store.nodesMap[key].expanded = false
- }
- })
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-expect-error
+ treeInstance.value?.setExpandedKeys([])
}
defineExpose({
@@ -142,108 +123,67 @@ defineExpose({
class="loading"
>
-
+
+
-
-
-
-
-
+
-
-
-
-
- ![]()
- {{ node.label }}
-
-
-
-
- Open table
-
-
- Make SELECT
-
-
- Make SQL Describe
-
-
-
-
-
+ {{ node.label }}
+ ![]()
+
-
-
-
- {{ node.label }}
-
-
+ {{ node.label }}
+
{{ node.data.type }}
@@ -277,8 +217,7 @@ defineExpose({
-
-
+