Skip to content

Commit 2eaba01

Browse files
committed
feat: chnage width
1 parent fe2167b commit 2eaba01

File tree

5 files changed

+241
-4
lines changed

5 files changed

+241
-4
lines changed

public/DIN-BOLD 2.OTF

-28 KB
Binary file not shown.

public/worker.js

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
function getRequestUrl(connection, settings) {
2+
if (!connection) {
3+
throw new Error('No Connection')
4+
}
5+
const httpProto = connection.connectionUrl.indexOf('//') === -1 ? 'http://' : ''
6+
7+
let url = `${httpProto}${connection.connectionUrl}`
8+
// add /?
9+
url = `${url}/?output_format_json_quote_denormals=1&output_format_json_quote_64bit_integers=1&log_queries=1&enable_http_compression=1&add_http_cors_header=1&result_overflow_mode=throw&timeout_overflow_mode=throw&max_execution_time=10&max_result_rows=90000&max_result_bytes=10000000`
10+
if (connection.password) {
11+
url += `&user=${encodeURIComponent(connection.username)}&password=${encodeURIComponent(
12+
connection.password
13+
)}`
14+
} else {
15+
url += `&user=${encodeURIComponent(connection.username)}`
16+
}
17+
18+
if (settings) {
19+
url += settings
20+
}
21+
22+
return url
23+
}
24+
25+
function request(request, init) {
26+
return fetch(request, init)
27+
.then((response) => {
28+
const contentType = response.headers.get('content-type')
29+
if (
30+
contentType &&
31+
response.status === 200 &&
32+
response.statusText.toLowerCase() === 'ok' &&
33+
(contentType.includes('text/plain') ||
34+
contentType.includes('application/xml') ||
35+
contentType.includes('text/csv') ||
36+
contentType.includes('text/tab-separated-values'))
37+
) {
38+
// if create table && drop table
39+
return Promise.resolve(response.text())
40+
}
41+
if (
42+
contentType &&
43+
contentType.includes('application/json') &&
44+
response.status >= 200 &&
45+
response.status < 300
46+
) {
47+
return response.json()
48+
}
49+
return response.text().then(Promise.reject.bind(Promise)) // refactor ???
50+
})
51+
.then(
52+
(response) => {
53+
if (response === 'OK' || !response) {
54+
return 'OK'
55+
}
56+
return response
57+
},
58+
// refactor: use catch
59+
(responseBody) => Promise.reject(responseBody)
60+
)
61+
}
62+
63+
function getRequestInit(query) {
64+
const init = {
65+
mode: 'cors',
66+
method: 'post',
67+
headers: {
68+
'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
69+
'Accept-Encoding': 'gzip',
70+
},
71+
body: query,
72+
// credentials: 'include', // Error : The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
73+
}
74+
return init
75+
}
76+
77+
// const url = getRequestUrl(connectionData, settings)
78+
79+
const queryAllColumns = (connection) => {
80+
const sql = `SELECT * FROM system.columns
81+
82+
LIMIT 50000
83+
84+
FORMAT JSON`
85+
const init = getRequestInit(sql)
86+
const url = getRequestUrl(connection, connection.params)
87+
88+
return request(url, init).then(res => {
89+
return res
90+
})
91+
}
92+
93+
const queryAllDatabases = (connection) => {
94+
const sql = `SELECT name FROM system.databases LIMIT 10000
95+
FORMAT JSON`
96+
97+
const init = getRequestInit(sql)
98+
const url = getRequestUrl(connection, connection.params)
99+
100+
return request(url, init).then(res => {
101+
return res
102+
})
103+
}
104+
105+
const queryAllTables = (connection) => {
106+
const sql = `SELECT t.database,
107+
t.name,
108+
t.engine,
109+
-- t.*,
110+
pa.size
111+
FROM system.tables as t ANY LEFT JOIN ( SELECT database,table as name,formatReadableSize(sum(bytes)) as size FROM system.parts GROUP BY database,name ) as pa USING (database,name)
112+
LIMIT 10000
113+
114+
FORMAT JSON`
115+
116+
const init = getRequestInit(sql)
117+
const url = getRequestUrl(connection, connection.params)
118+
119+
return request(url, init).then(res => {
120+
return res
121+
})
122+
}
123+
124+
const createTree = (columns, tables, database, connection) => {
125+
const tablesTree = tables.map((item) => {
126+
const children = columns.filter((col) => col.table === item.name)
127+
return {
128+
...item,
129+
children
130+
}
131+
})
132+
133+
const databaseTree = database.map(item => {
134+
const children = tablesTree.filter((table) => table.database === item.name)
135+
return {
136+
...item,
137+
children
138+
}
139+
})
140+
141+
const finalTree = {
142+
name: connection.connectionName,
143+
children: databaseTree
144+
}
145+
return [finalTree]
146+
}
147+
148+
self.addEventListener('message', function (e) {
149+
// self.postMessage(e.data)
150+
const connection = JSON.parse(e.data)
151+
Promise.all([queryAllColumns(connection), queryAllTables(connection), queryAllDatabases(connection)])
152+
.then(res => {
153+
const dataArr = res.map(item => item.data)
154+
const treeData = createTree(
155+
dataArr[0],
156+
dataArr[1],
157+
dataArr[2],
158+
connection
159+
)
160+
self.postMessage(JSON.stringify({
161+
tree: treeData,
162+
columns: dataArr[0]
163+
}))
164+
})
165+
}, false);

src/components/sql/EditorTabPaneTable.vue

+1
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ defineExpose({
174174
.drag-box {
175175
height: 36px;
176176
background-color: #F0F0F0;
177+
cursor: ns-resize;
177178
}
178179
179180
.table-title {

src/components/sql/Filter.vue

+39-1
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import { Search } from '@element-plus/icons-vue'
55
import { queryAllDatabases, queryAllColumns, queryAllTables } from './query'
66
import { createTree } from './utils'
77
import { ColumnCommand } from './types'
8+
// import { useLoginStore } from '@/store'
89
9-
// const sqlStore = useSqlStore()
1010
const emit = defineEmits(['tableCommand'])
11+
// const loginStore = useLoginStore()
1112
1213
const columns = ref<any[]>([])
1314
const tree = ref<any[]>([])
@@ -16,10 +17,23 @@ const seletedColumn = ref<string>()
1617
const selectedColumnObj = ref<any>()
1718
const treeInstance = ref<any>()
1819
const dataloading = ref<boolean>(false)
20+
const dragEle = ref<HTMLElement>()
1921
const br = '\n'
2022
2123
onBeforeMount(() => {
24+
// dataloading.value = true
25+
// var worker = new Worker('worker.js');
26+
// worker.onmessage = (e) => {
27+
// const realData = JSON.parse(e.data)
28+
// columns.value = realData.columns
29+
// tree.value = realData.tree
30+
// defaultExpandKeys.value = [tree.value[0].name]
31+
// dataloading.value = false
32+
// }
33+
// worker.postMessage(JSON.stringify(loginStore.connection))
34+
2235
dataloading.value = true
36+
2337
Promise.all([queryAllColumns(), queryAllTables(), queryAllDatabases()])
2438
.then(res => {
2539
const dataArr = res.map(item => item.data)
@@ -63,10 +77,22 @@ const changeSelected = (val: string) => {
6377
treeInstance.value.store.nodesMap[selectedColumn.table].expanded = true
6478
// console.log(treeInstance.value.store.nodesMap, 'treeInstance.value.store.nodesMap')
6579
}
80+
81+
const getDragEle = () => {
82+
return dragEle.value
83+
}
84+
85+
defineExpose({
86+
getDragEle
87+
})
6688
</script>
6789

6890
<template>
6991
<section class="siderbar-content">
92+
<div
93+
ref="dragEle"
94+
class="drag-box"
95+
></div>
7096
<div
7197
v-if="dataloading"
7298
v-loading="true"
@@ -169,9 +195,21 @@ const changeSelected = (val: string) => {
169195

170196
<style lang="scss" scoped>
171197
.siderbar-content {
198+
position: relative;
172199
height: 100%;
173200
padding: 30px 10px;
174201
box-sizing: border-box;
202+
.drag-box {
203+
position: absolute;
204+
right: 4px;
205+
top: calc(50% - 15px);
206+
width: 8px;
207+
height: 30px;
208+
border-left: 3px solid rgba(255, 255, 255, 0.2);
209+
border-right: 3px solid rgba(255, 255, 255, 0.2);
210+
box-sizing: border-box;
211+
cursor: ew-resize;
212+
}
175213
.loading {
176214
position: fixed;
177215
top: 0;

src/views/sql/index.vue

+36-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
}
66
</route>
77
<script lang='ts' setup>
8+
import { onMounted, ref } from 'vue'
9+
810
import FilterVue from '@/components/sql/Filter.vue'
911
// import SimpleEditorVue from '@/components/sql/SimpleEditor.vue'
1012
import EditorTabsVue from '@/components/sql/EditorTabs.vue'
@@ -14,6 +16,28 @@ import { getSqlDescribe, getMakeSelectSql } from '@/components/sql/utils'
1416
1517
const sqlStore = useSqlStore()
1618
19+
const filterInstance = ref<any>()
20+
const filterContainer = ref<HTMLElement>()
21+
const sqlContainer = ref<HTMLElement>()
22+
23+
onMounted(() => {
24+
const dragElement = filterInstance.value.getDragEle() as HTMLElement
25+
const editorContainer = filterContainer.value as HTMLElement
26+
const container = sqlContainer.value as HTMLElement
27+
dragElement.onmousedown = (e) => {
28+
const oldX = e.clientX
29+
const editorWidth = editorContainer.getBoundingClientRect().width
30+
document.onmousemove = (e) => {
31+
const currentX = e.clientX
32+
const result = currentX - oldX
33+
container.style.cssText = `grid-template-columns: ${editorWidth + result}px 1fr;`
34+
}
35+
document.onmouseup = () => {
36+
document.onmousemove = null
37+
}
38+
}
39+
})
40+
1741
const tableCommand = ({node, command}: any) => {
1842
const current = sqlStore.tabs.find(tab => tab.name === sqlStore.activeTabs)
1943
sqlStore.toggleAddSqlIsCommand()
@@ -41,9 +65,18 @@ const tableCommand = ({node, command}: any) => {
4165
}
4266
</script>
4367
<template>
44-
<section class="SQL-container">
45-
<aside class="sidebar">
46-
<FilterVue @tableCommand="tableCommand" />
68+
<section
69+
ref="sqlContainer"
70+
class="SQL-container"
71+
>
72+
<aside
73+
ref="filterContainer"
74+
class="sidebar"
75+
>
76+
<FilterVue
77+
ref="filterInstance"
78+
@tableCommand="tableCommand"
79+
/>
4780
</aside>
4881
<section class="content">
4982
<EditorTabsVue />

0 commit comments

Comments
 (0)