manager/zyplayer-doc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据表信息查看页面优化，合并数据查看页面

Browse Source
This commit is contained in:
暮光：城中城
2021-06-06 22:43:16 +08:00
parent b1fefdeba7
commit dcbb2b4ac8
5 changed files with 396 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
zyplayer-doc-ui/db-ui/package-lock.json generated
View File

@@ -1902,7 +1902,7 @@
},
"asn1.js": {
"version": "4.10.1",
"resolved": "https://registry.npm.taobao.org/asn1.js/download/asn1.js-4.10.1.tgz",
"resolved": "http://registry.npm.taobao.org/asn1.js/download/asn1.js-4.10.1.tgz",
"integrity": "sha1-ucK/WAXx5kqt7tbfOiv6+1pz9aA=",
"dev": true,
"requires": {
@@ -1923,7 +1923,7 @@
"dependencies": {
"inherits": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/inherits/download/inherits-2.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finherits%2Fdownload%2Finherits-2.0.1.tgz",
"resolved": "http://registry.npm.taobao.org/inherits/download/inherits-2.0.1.tgz",
"integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=",
"dev": true
},
@@ -2065,7 +2065,7 @@
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"resolved": "http://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
},
"babel-loader": {
@@ -2104,7 +2104,7 @@
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
"resolved": "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"requires": {
"core-js": "^2.4.0",
@@ -2237,7 +2237,7 @@
},
"bn.js": {
"version": "4.11.8",
"resolved": "https://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz",
"resolved": "http://registry.npm.taobao.org/bn.js/download/bn.js-4.11.8.tgz",
"integrity": "sha1-LN4J617jQfSEdGuwMJsyU7GxRC8=",
"dev": true
},
@@ -3010,7 +3010,7 @@
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolor-convert%2Fdownload%2Fcolor-convert-1.9.3.tgz",
"resolved": "http://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
"integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
"dev": true,
"requires": {
@@ -3662,7 +3662,7 @@
},
"deepmerge": {
"version": "1.5.2",
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&sync_timestamp=1572279812893&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz",
"resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
"integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
},
"default-gateway": {
@@ -4017,19 +4017,19 @@
},
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1574051269386&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
"resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
"integrity": "sha1-PTH1AZGmdJ3RN1p/Ui6CPULlTto=",
"dev": true
},
"domelementtype": {
"version": "1.3.1",
"resolved": "https://registry.npm.taobao.org/domelementtype/download/domelementtype-1.3.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomelementtype%2Fdownload%2Fdomelementtype-1.3.1.tgz",
"resolved": "http://registry.npm.taobao.org/domelementtype/download/domelementtype-1.3.1.tgz",
"integrity": "sha1-0EjESzew0Qp/Kj1f7j9DM9eQSB8=",
"dev": true
},
"domhandler": {
"version": "2.4.2",
"resolved": "https://registry.npm.taobao.org/domhandler/download/domhandler-2.4.2.tgz",
"resolved": "http://registry.npm.taobao.org/domhandler/download/domhandler-2.4.2.tgz",
"integrity": "sha1-iAUJfpM9ZehVRvcm1g9euItE+AM=",
"dev": true,
"requires": {
@@ -4107,11 +4107,11 @@
}
},
"echarts": {
"version": "4.5.0",
"resolved": "https://registry.npm.taobao.org/echarts/download/echarts-4.5.0.tgz",
"integrity": "sha1-IRGWBkWjReuBndrEeSosBlvf8WI=",
"version": "4.9.0",
"resolved": "https://registry.nlark.com/echarts/download/echarts-4.9.0.tgz",
"integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
"requires": {
"zrender": "4.1.2"
"zrender": "4.3.2"
}
},
"ee-first": {
@@ -4168,7 +4168,7 @@
},
"emojis-list": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
"resolved": "http://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
"dev": true
},
@@ -4656,7 +4656,7 @@
},
"faye-websocket": {
"version": "0.10.0",
"resolved": "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",
"resolved": "http://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz",
"integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
"dev": true,
"requires": {
@@ -5521,7 +5521,7 @@
},
"glob-parent": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/glob-parent/download/glob-parent-3.1.0.tgz?cache=0&sync_timestamp=1569136652060&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglob-parent%2Fdownload%2Fglob-parent-3.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/glob-parent/download/glob-parent-3.1.0.tgz",
"integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
"dev": true,
"requires": {
@@ -5625,7 +5625,7 @@
},
"has-ansi": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz",
"resolved": "http://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz",
"integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
"dev": true,
"requires": {
@@ -5696,7 +5696,7 @@
},
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
"resolved": "http://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
"dev": true
},
@@ -5858,7 +5858,7 @@
},
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz",
"resolved": "http://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz",
"integrity": "sha1-vWedw/WYl7ajS7EHSchVu1OpOS8=",
"dev": true,
"requires": {
@@ -5935,7 +5935,7 @@
},
"http-proxy-middleware": {
"version": "0.19.1",
"resolved": "https://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-0.19.1.tgz",
"resolved": "http://registry.npm.taobao.org/http-proxy-middleware/download/http-proxy-middleware-0.19.1.tgz",
"integrity": "sha1-GDx9xKoUeRUDBkmMIQza+WCApDo=",
"dev": true,
"requires": {
@@ -6144,13 +6144,13 @@
},
"ipaddr.js": {
"version": "1.9.0",
"resolved": "https://registry.npm.taobao.org/ipaddr.js/download/ipaddr.js-1.9.0.tgz",
"resolved": "http://registry.npm.taobao.org/ipaddr.js/download/ipaddr.js-1.9.0.tgz",
"integrity": "sha1-N9905DCg5HVQ/lSi3v4w2KzZX2U=",
"dev": true
},
"is-absolute-url": {
"version": "2.1.0",
"resolved": "https://registry.npm.taobao.org/is-absolute-url/download/is-absolute-url-2.1.0.tgz?cache=0&sync_timestamp=1569736493122&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-absolute-url%2Fdownload%2Fis-absolute-url-2.1.0.tgz",
"resolved": "https://registry.npm.taobao.org/is-absolute-url/download/is-absolute-url-2.1.0.tgz",
"integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
"dev": true
},
@@ -6197,7 +6197,7 @@
},
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz?cache=0&sync_timestamp=1569905495687&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-buffer%2Fdownload%2Fis-buffer-1.1.6.tgz",
"resolved": "http://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz",
"integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=",
"dev": true
},
@@ -6422,7 +6422,7 @@
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz?cache=0&sync_timestamp=1562592096220&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fisarray%2Fdownload%2Fisarray-1.0.0.tgz",
"resolved": "http://registry.npm.taobao.org/isarray/download/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
@@ -7038,7 +7038,7 @@
},
"memory-fs": {
"version": "0.4.1",
"resolved": "https://registry.npm.taobao.org/memory-fs/download/memory-fs-0.4.1.tgz?cache=0&sync_timestamp=1570537491040&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmemory-fs%2Fdownload%2Fmemory-fs-0.4.1.tgz",
"resolved": "http://registry.npm.taobao.org/memory-fs/download/memory-fs-0.4.1.tgz",
"integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
"dev": true,
"requires": {
@@ -7518,7 +7518,7 @@
},
"normalize-wheel": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
"resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnormalize-wheel%2Fdownload%2Fnormalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
},
"npm-run-path": {
@@ -7792,7 +7792,7 @@
},
"p-limit": {
"version": "1.3.0",
"resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-1.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-1.3.0.tgz",
"resolved": "http://registry.npm.taobao.org/p-limit/download/p-limit-1.3.0.tgz",
"integrity": "sha1-uGvV8MJWkJEcdZD8v8IBDVSzzLg=",
"dev": true,
"requires": {
@@ -7905,7 +7905,7 @@
},
"pascalcase": {
"version": "0.1.1",
"resolved": "https://registry.npm.taobao.org/pascalcase/download/pascalcase-0.1.1.tgz",
"resolved": "http://registry.npm.taobao.org/pascalcase/download/pascalcase-0.1.1.tgz",
"integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
"dev": true
},
@@ -7953,7 +7953,7 @@
},
"path-to-regexp": {
"version": "0.1.7",
"resolved": "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz?cache=0&sync_timestamp=1574278262588&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-0.1.7.tgz",
"resolved": "http://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-0.1.7.tgz",
"integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
"dev": true
},
@@ -8581,7 +8581,7 @@
},
"postcss-value-parser": {
"version": "3.3.1",
"resolved": "https://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-3.3.1.tgz",
"resolved": "http://registry.npm.taobao.org/postcss-value-parser/download/postcss-value-parser-3.3.1.tgz",
"integrity": "sha1-n/giVH4okyE88cMO+lGsX9G6goE=",
"dev": true
},
@@ -8825,13 +8825,13 @@
},
"qs": {
"version": "6.5.2",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
"resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fqs%2Fdownload%2Fqs-6.5.2.tgz",
"integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
"dev": true
},
"query-string": {
"version": "4.3.4",
"resolved": "https://registry.npm.taobao.org/query-string/download/query-string-4.3.4.tgz?cache=0&sync_timestamp=1573620418700&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fquery-string%2Fdownload%2Fquery-string-4.3.4.tgz",
"resolved": "https://registry.npm.taobao.org/query-string/download/query-string-4.3.4.tgz",
"integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
"dev": true,
"requires": {
@@ -8937,7 +8937,7 @@
},
"readdirp": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-2.2.1.tgz?cache=0&sync_timestamp=1571011714883&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freaddirp%2Fdownload%2Freaddirp-2.2.1.tgz",
"resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-2.2.1.tgz",
"integrity": "sha1-DodiKjMlqjPokihcr4tOhGUppSU=",
"dev": true,
"requires": {
@@ -9285,12 +9285,12 @@
},
"safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1562377642757&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz",
"resolved": "http://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz",
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0="
},
"safe-regex": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz?cache=0&sync_timestamp=1571687334026&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsafe-regex%2Fdownload%2Fsafe-regex-1.1.0.tgz",
"resolved": "http://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz",
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
"dev": true,
"requires": {
@@ -9990,7 +9990,7 @@
},
"stream-http": {
"version": "2.8.3",
"resolved": "https://registry.npm.taobao.org/stream-http/download/stream-http-2.8.3.tgz",
"resolved": "http://registry.npm.taobao.org/stream-http/download/stream-http-2.8.3.tgz",
"integrity": "sha1-stJCRpKIpaJ+xP6JM6z2I95lFPw=",
"dev": true,
"requires": {
@@ -10448,7 +10448,7 @@
"dependencies": {
"commander": {
"version": "2.19.0",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.19.0.tgz?cache=0&sync_timestamp=1573464045808&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.19.0.tgz",
"resolved": "https://registry.npm.taobao.org/commander/download/commander-2.19.0.tgz",
"integrity": "sha1-9hmKqE5bg8RgVLlN3tv+1e6f8So=",
"dev": true
},
@@ -10849,7 +10849,7 @@
},
"wangeditor": {
"version": "3.1.1",
"resolved": "http://registry.npm.taobao.org/wangeditor/download/wangeditor-3.1.1.tgz",
"resolved": "https://registry.npm.taobao.org/wangeditor/download/wangeditor-3.1.1.tgz",
"integrity": "sha1-+9PB1JdpI8nt67hbKdMLNVEq0Dk="
},
"watchpack": {
@@ -11499,9 +11499,9 @@
}
},
"zrender": {
"version": "4.1.2",
"resolved": "https://registry.npm.taobao.org/zrender/download/zrender-4.1.2.tgz",
"integrity": "sha1-g2je/yTH4jfLy9Oi/5MBeQWuQ/c="
"version": "4.3.2",
"resolved": "https://registry.nlark.com/zrender/download/zrender-4.3.2.tgz",
"integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
}
}
}

2
zyplayer-doc-ui/db-ui/package.json
View File

@@ -9,7 +9,7 @@
"dependencies": {
"axios": "^0.19.0",
"core-js": "^3.3.2",
"echarts": "^4.5.0",
"echarts": "^4.9.0",
"element-ui": "^2.15.0",
"js-cookie": "^2.2.1",
"pouchdb": "^7.1.1",

77
zyplayer-doc-ui/db-ui/src/views/data/DataPreview.vue
View File

@@ -36,7 +36,7 @@
</el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{resultItem.errMsg}}</div>
<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" max-height="600"
<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" :max-height="tableMaxHeight"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="50"></el-table-column>
@@ -85,8 +85,8 @@
</el-select>
</el-form-item>
<el-form-item label="数据表：" v-if="downloadDataParam.downloadType === 'insert'">
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag" @change="dropTableFlagChange">删除表</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag">创建表</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.dropTableFlag" @change="dropTableFlagChange">删除表{{downloadDataParam.dropTableFlag==1?'!!':''}}</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="downloadDataParam.createTableFlag" @change="createTableFlagChange">创建表</el-checkbox>
</el-form-item>
<el-form-item label="保留的列：">
<el-select v-model="downloadDataParam.retainColumnArr" multiple placeholder="不选则保留全部列" style="width: 370px;">
@@ -122,6 +122,7 @@
import sqlFormatter from "sql-formatter";
export default {
name: 'dataPreview',
data() {
return {
sqlExecuting: false,
@@ -131,6 +132,7 @@
sqlExecutorEditor: {},
nowExecutorId: 1,
executeError: "",
pageParam: {},
vueQueryParam: {},
pageSize: 50,
currentPage: 1,
@@ -160,7 +162,7 @@
},
mounted: function () {
let that = this;
this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 5);
this.sqlExecutorEditor = this.initAceEditor("sqlExecutorEditor", 3);
this.sqlExecutorEditor.setFontSize(16);
this.sqlExecutorEditor.commands.addCommand({
name: "execute-sql",
@@ -170,26 +172,28 @@
}
});
// 延迟设置展开的目录，edit比app先初始化
setTimeout(() => {
this.doExecutorSqlCommon();
this.$emit('initLoadDataList', {
sourceId: this.vueQueryParam.sourceId,
host: this.vueQueryParam.host,
dbName: this.vueQueryParam.dbName
});
}, 500);
},
activated: function () {
this.initQueryParam(this.$route);
// setTimeout(() => {
// this.doExecutorSqlCommon();
// this.$emit('initLoadDataList', {
// sourceId: this.vueQueryParam.sourceId,
// host: this.vueQueryParam.host,
// dbName: this.vueQueryParam.dbName
// });
// }, 500);
},
methods: {
initQueryParam(to) {
this.vueQueryParam = to.query;
let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
this.$store.commit('global/addTableName', newName);
datasourceApi.tableStatus(this.vueQueryParam).then(json => {
this.tableStatusInfo = json.data || {};
});
init(param) {
if (this.pageParam.sourceId == param.sourceId) {
return;
}
this.pageParam = param;
this.doExecutorSqlCommon();
// this.vueQueryParam = to.query;
// let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
// this.$store.commit('global/addTableName', newName);
// datasourceApi.tableStatus(this.pageParam).then(json => {
// this.tableStatusInfo = json.data || {};
// });
},
handleCurrentChange(to) {
this.currentPage = to;
@@ -222,12 +226,12 @@
this.doExecutorSqlCommon();
},
doExecutorSqlCommon() {
if (!this.vueQueryParam.sourceId) {
if (!this.pageParam.sourceId) {
this.$message.error("请先选择数据源");
return;
}
if (!this.tableSort.prop) {
this.tableSort = {prop: this.vueQueryParam.orderColumn, order: 'ascending'};
this.tableSort = {prop: this.pageParam.orderColumn, order: 'ascending'};
}
let conditionSql = this.sqlExecutorEditor.getSelectedText();
conditionSql = conditionSql || this.sqlExecutorEditor.getValue();
@@ -235,13 +239,13 @@
this.executeError = "";
this.executeUseTime = "";
this.executeResultList = [];
this.tableMaxHeight = document.body.clientHeight - 400;
this.tableMaxHeight = document.body.clientHeight - 420;
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
this.sqlExecuting = true;
let param = {
sourceId: this.vueQueryParam.sourceId,
dbName: this.vueQueryParam.dbName,
tableName: this.vueQueryParam.tableName,
sourceId: this.pageParam.sourceId,
dbName: this.pageParam.dbName,
tableName: this.pageParam.tableName,
executeId: this.nowExecutorId,
condition: conditionSql,
pageNum: this.currentPage,
@@ -321,7 +325,7 @@
let choiceData = this.choiceResultObj[this.executeShowTable] || [];
if (choiceData.length > 0) {
let dataCols = this.executeResultList.find(item => item.name === this.executeShowTable).dataCols;
let tableName = '`' + this.vueQueryParam.dbName + '`.`' + this.vueQueryParam.tableName + '`';
let tableName = '`' + this.pageParam.dbName + '`.`' + this.pageParam.tableName + '`';
let copyData = copyFormatter.format('update', this.editorDbProduct, dataCols, choiceData, this.conditionDataColsChoice, tableName);
this.conditionDataColsChoice = [];
this.exportConditionVisible = false;
@@ -341,7 +345,7 @@
this.exportConditionVisible = true;
return;
}
let tableName = '`' + this.vueQueryParam.dbName + '`.`' + this.vueQueryParam.tableName + '`';
let tableName = '`' + this.pageParam.dbName + '`.`' + this.pageParam.tableName + '`';
let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, '', tableName);
this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"),
@@ -355,9 +359,9 @@
conditionSql = conditionSql || "";
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
this.downloadFormParam.param = {
sourceId: this.vueQueryParam.sourceId,
dbName: this.vueQueryParam.dbName,
tableName: this.vueQueryParam.tableName,
sourceId: this.pageParam.sourceId,
dbName: this.pageParam.dbName,
tableName: this.pageParam.tableName,
downloadType: this.downloadDataParam.downloadType,
conditionColumn: this.downloadDataParam.conditionArr.join(","),
retainColumn: this.downloadDataParam.retainColumnArr.join(","),
@@ -379,6 +383,11 @@
this.downloadDataParam.createTableFlag = 1;
}
},
createTableFlagChange() {
if (this.downloadDataParam.createTableFlag == 0) {
this.downloadDataParam.dropTableFlag = 0;
}
},
initAceEditor(editor, minLines) {
return ace.edit(editor, {
theme: "ace/theme/monokai",
@@ -389,7 +398,7 @@
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: minLines,
maxLines: 5
maxLines: minLines
});
},
}

230
zyplayer-doc-ui/db-ui/src/views/table/Info.vue
View File

@@ -1,86 +1,107 @@
<template>
<div class="table-info-vue">
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">
表信息
<span style="float: right;margin-top: -5px;">
<el-button class="search-submit" size="small" type="primary" icon="el-icon-search" @click="previewTableData">查看表数据</el-button>
</span>
</div>
<el-row class="status-info-row">
<el-col :span="24"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">数据库：</span>{{vueQueryParam.dbName}}</el-col>
<el-col :span="6"><span class="label">数据表：</span>{{tableStatusInfo.name}}</el-col>
<el-col :span="6"><span class="label">引擎：</span>{{tableStatusInfo.engine}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">行数：</span>{{tableStatusInfo.rows||0}}</el-col>
<el-col :span="6"><span class="label">自动递增：</span>{{tableStatusInfo.avgRowLength||0}}</el-col>
<el-col :span="6"><span class="label">行格式：</span>{{tableStatusInfo.rowFormat}}</el-col>
<el-col :span="6"><span class="label">排序规则：</span>{{tableStatusInfo.collation}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">索引长度：</span>{{getBytesSize(tableStatusInfo.indexLength)}}</el-col>
<el-col :span="6"><span class="label">数据长度：</span>{{getBytesSize(tableStatusInfo.dataLength)}}</el-col>
<el-col :span="6"><span class="label">最大长度：</span>{{getBytesSize(tableStatusInfo.maxDataLength)}}</el-col>
<el-col :span="6"><span class="label">可用空间：</span>{{getBytesSize(tableStatusInfo.dataFree)}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">创建时间：</span>{{tableStatusInfo.createTime}}</el-col>
<el-col :span="6"><span class="label">修改时间：</span>{{tableStatusInfo.updateTime}}</el-col>
<el-col :span="6"><span class="label">检查时间：</span>{{tableStatusInfo.checkTime}}</el-col>
<el-col :span="6"><span class="label">创建选项：</span>{{tableStatusInfo.createOptions}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="24">
<span class="label">表注释：</span>
<span v-if="tableInfo.inEdit == 1">
<el-tabs v-model="tabActiveName" @tab-click="tabActiveNameChange">
<el-tab-pane label="表字段" name="columns">
<div v-loading="columnListLoading">
<div style="text-align: right; margin-bottom: 10px;">
<el-button size="small" @click="showCreateTableDdl" style="margin-left: 10px;" icon="el-icon-magic-stick">DDL</el-button>
</div>
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
<el-table-column prop="name" label="字段名" width="220"></el-table-column>
<el-table-column label="自增" width="50">
<template slot-scope="scope">{{scope.row.isidentity ? '是' : '否'}}</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="110"></el-table-column>
<el-table-column prop="length" label="长度" width="110"></el-table-column>
<el-table-column prop="numericScale" label="小数点" width="80">
<template slot-scope="scope">{{scope.row.numericScale==0 ? '' : scope.row.numericScale}}</template>
</el-table-column>
<el-table-column prop="nullable" label="空值" width="80">
<template slot-scope="scope">{{scope.row.nullable==1 ? '允许' : '不允许'}}</template>
</el-table-column>
<el-table-column label="主键" width="50">
<template slot-scope="scope">{{scope.row.ispramary==1 ? '是' : '否'}}</template>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
注释
<el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">
<i class="el-icon-info" style="color: #999;"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
<div v-if="scope.row.inEdit == 1">
<el-input v-model="scope.row.newDesc" placeholder="输入字段注释" @keyup.enter.native="saveColumnDescription(scope.row)" v-on:blur="saveColumnDescription(scope.row)"></el-input>
</div>
<div v-else class="description" v-on:click="descBoxClick(scope.row)">{{scope.row.description}}</div>
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="表信息" name="tableInfo">
<el-row class="status-info-row">
<el-col :span="24"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">数据库：</span>{{vueQueryParam.dbName}}</el-col>
<el-col :span="6"><span class="label">数据表：</span>{{tableStatusInfo.name}}</el-col>
<el-col :span="6"><span class="label">引擎：</span>{{tableStatusInfo.engine}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">行数：</span>{{tableStatusInfo.rows||0}}</el-col>
<el-col :span="6"><span class="label">自动递增：</span>{{tableStatusInfo.avgRowLength||0}}</el-col>
<el-col :span="6"><span class="label">行格式：</span>{{tableStatusInfo.rowFormat}}</el-col>
<el-col :span="6"><span class="label">排序规则：</span>{{tableStatusInfo.collation}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">索引长度：</span>{{getBytesSize(tableStatusInfo.indexLength)}}</el-col>
<el-col :span="6"><span class="label">数据长度：</span>{{getBytesSize(tableStatusInfo.dataLength)}}</el-col>
<el-col :span="6"><span class="label">最大长度：</span>{{getBytesSize(tableStatusInfo.maxDataLength)}}</el-col>
<el-col :span="6"><span class="label">可用空间：</span>{{getBytesSize(tableStatusInfo.dataFree)}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="6"><span class="label">创建时间：</span>{{tableStatusInfo.createTime}}</el-col>
<el-col :span="6"><span class="label">修改时间：</span>{{tableStatusInfo.updateTime}}</el-col>
<el-col :span="6"><span class="label">检查时间：</span>{{tableStatusInfo.checkTime}}</el-col>
<el-col :span="6"><span class="label">创建选项：</span>{{tableStatusInfo.createOptions}}</el-col>
</el-row>
<el-row class="status-info-row">
<el-col :span="24">
<span class="label">表注释：</span>
<span v-if="tableInfo.inEdit == 1">
<el-input v-model="tableInfo.newDesc" placeholder="输入表注释" @keyup.enter.native="saveTableDescription" v-on:blur="saveTableDescription" style="width: 500px;"></el-input>
</span>
<span v-else>{{tableInfo.description || '暂无注释'}} <i class="el-icon-edit edit-table-desc" v-on:click="tableInfo.inEdit = 1"></i></span>
</el-col>
</el-row>
</el-card>
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">
字段信息
<el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">
<i class="el-icon-info" style="color: #999;"></i>
</el-tooltip>
<span style="float: right;margin-top: -5px;">
<el-button size="small" @click="showCreateTableDdl">DDL</el-button>
</span>
</div>
<div style="padding: 10px;" v-loading="columnListLoading">
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
<el-table-column prop="name" label="字段名" width="220"></el-table-column>
<el-table-column label="自增" width="50">
<template slot-scope="scope">{{scope.row.isidentity ? '是' : '否'}}</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="110"></el-table-column>
<el-table-column prop="length" label="长度" width="110"></el-table-column>
<el-table-column prop="numericScale" label="小数点" width="80">
<template slot-scope="scope">{{scope.row.numericScale==0 ? '' : scope.row.numericScale}}</template>
</el-table-column>
<el-table-column prop="nullable" label="空值" width="80">
<template slot-scope="scope">{{scope.row.nullable==1 ? '允许' : '不允许'}}</template>
</el-table-column>
<el-table-column label="主键" width="50">
<template slot-scope="scope">{{scope.row.ispramary==1 ? '是' : '否'}}</template>
</el-table-column>
<el-table-column label="注释">
<template slot-scope="scope">
<div v-if="scope.row.inEdit == 1">
<el-input v-model="scope.row.newDesc" placeholder="输入字段注释" @keyup.enter.native="saveColumnDescription(scope.row)" v-on:blur="saveColumnDescription(scope.row)"></el-input>
</div>
<div v-else class="description" v-on:click="descBoxClick(scope.row)">{{scope.row.description}}</div>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<span v-else>{{tableInfo.description || '暂无注释'}} <i class="el-icon-edit edit-table-desc" v-on:click="tableInfo.inEdit = 1"></i></span>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="关系图" name="relationChart">
<table-relation-charts ref="relationChart"></table-relation-charts>
</el-tab-pane>
<el-tab-pane label="表数据" name="tableData">
<data-preview ref="dataPreview"></data-preview>
</el-tab-pane>
</el-tabs>
<!-- <el-card style="margin: 10px;">-->
<!-- <div slot="header" class="clearfix">-->
<!-- 表信息-->
<!-- <span style="float: right;margin-top: -5px;">-->
<!-- <el-button class="search-submit" size="small" type="primary" icon="el-icon-search" @click="previewTableData">查看表数据</el-button>-->
<!-- </span>-->
<!-- </div>-->
<!-- </el-card>-->
<!-- <el-card style="margin: 10px;">-->
<!-- <div slot="header" class="clearfix">-->
<!-- 字段信息-->
<!-- <el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">-->
<!-- <i class="el-icon-info" style="color: #999;"></i>-->
<!-- </el-tooltip>-->
<!-- <span style="float: right;margin-top: -5px;">-->
<!-- <el-button size="small" @click="showCreateTableDdl">DDL</el-button>-->
<!-- </span>-->
<!-- </div>-->
<!-- </el-card>-->
<!--增加数据源弹窗-->
<el-dialog :visible.sync="tableDDLInfoDialogVisible" :footer="null" width="760px">
<div slot="title">
@@ -120,6 +141,8 @@
<script>
import datasourceApi from '../../common/api/datasource'
import dataPreview from '../data/DataPreview'
import tableRelation from './TableRelation'
export default {
data() {
@@ -133,6 +156,8 @@
tableDDLInfoTab: '',
tableDDLInfo: '',
tableDDLInfoDialogVisible: false,
// 标签
tabActiveName: 'columns',
};
},
mounted: function () {
@@ -148,6 +173,10 @@
activated: function () {
this.initQueryParam(this.$route);
},
components: {
'data-preview': dataPreview,
'table-relation-charts': tableRelation,
},
methods: {
initQueryParam(to) {
if (this.columnListLoading) {
@@ -173,6 +202,31 @@
datasourceApi.tableStatus(this.vueQueryParam).then(json => {
this.tableStatusInfo = json.data || {};
});
},
tabActiveNameChange() {
if (this.tabActiveName == 'relationChart') {
this.$refs.relationChart.init({
sourceId: this.vueQueryParam.sourceId,
dbName: this.vueQueryParam.dbName,
tableName: this.vueQueryParam.tableName,
});
} else if (this.tabActiveName == 'tableData') {
if (!this.columnList || this.columnList.length <= 0) {
this.$message.error("字段信息尚未加载成功，请稍候...");
setTimeout(() => this.tabActiveName = 'columns', 0);
return;
}
let primaryColumn = this.columnList.find(item => item.ispramary == 1) || this.columnList[0];
this.$refs.dataPreview.init({
sourceId: this.vueQueryParam.sourceId,
dbName: this.vueQueryParam.dbName,
tableName: this.vueQueryParam.tableName,
host: this.vueQueryParam.host,
dbType: this.tableStatusInfo.dbType,
// 默认排序字段，先随便取一个，impala等数据库必须排序后才能分页查
orderColumn: primaryColumn.name,
});
}
},
onCopySuccess(e) {
this.$message.success("内容已复制到剪切板！");
@@ -208,22 +262,6 @@
// row.newDesc = row.description;
row.inEdit = 1;
},
previewTableData() {
if (!this.columnList || this.columnList.length <= 0) {
this.$message.error("字段信息尚未加载成功，请稍候...");
return;
}
let previewParam = {
sourceId: this.vueQueryParam.sourceId,
dbName: this.vueQueryParam.dbName,
tableName: this.vueQueryParam.tableName,
host: this.vueQueryParam.host,
dbType: this.tableStatusInfo.dbType,
// 默认排序字段，先随便取一个，impala等数据库必须排序后才能分页查
orderColumn: this.columnList[0].name,
};
this.$router.push({path: '/data/dataPreview', query: previewParam});
},
getBytesSize(size) {
if (!size) return "0 bytes";
var num = 1024.00;
@@ -261,7 +299,9 @@
}
}
</script>
<style>
.table-info-vue{padding: 0 20px;}
.table-info-vue .el-dialog__body{padding: 0 20px 10px;}
.table-info-vue .el-form-item{margin-bottom: 5px;}
.table-info-vue .edit-table-desc{cursor: pointer; color: #409EFF;}

175
zyplayer-doc-ui/db-ui/src/views/table/TableRelation.vue Normal file
View File

@@ -0,0 +1,175 @@
<template>
<div class="data-executor-vue">
<div id="relationChart" style="width: 100%; height: max(calc(100vh - 160px), 600px);"></div>
<!--选择导出为update的条件列弹窗-->
<el-dialog :visible.sync="choiceRelationColumnVisible" width="500px" title="选择关联的表字段">
<div>
更新条件列：
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="choiceRelationColumnVisible = false">取 消</el-button>
<el-button type="primary" @click="">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import * as echarts from 'echarts';
import datasourceApi from '../../common/api/datasource'
export default {
name: 'tableRelation',
data() {
return {
pageParam: {},
relationChart: {},
relationChartData: {},
relationChartOption: {},
// 选择复制
choiceRelationColumnVisible: false,
columnListLoading: false,
}
},
mounted () {
},
methods: {
init(param) {
if (this.pageParam.sourceId == param.sourceId) {
return;
}
this.pageParam = param;
this.relationChartData.name = param.tableName;
// 基于准备好的dom，初始化echarts实例
this.relationChart = echarts.init(document.getElementById('relationChart'));
this.relationChartOption = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
id: 0,
name: 'tree1',
data: [this.relationChartData],
top: '10%',
left: '8%',
bottom: '22%',
right: '20%',
symbolSize: 7,
edgeShape: 'polyline',
edgeForkPosition: '63%',
initialTreeDepth: 3,
lineStyle: {
width: 2
},
label: {
backgroundColor: '#fff',
position: 'left',
verticalAlign: 'middle',
align: 'right'
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
emphasis: {
focus: 'descendant'
},
expandAndCollapse: false,
animationDuration: 550,
animationDurationUpdate: 750
}
]
};
// 使用刚指定的配置项和数据显示图表。
this.relationChart.setOption(this.relationChartOption);
this.relationChart.on('click', (params) => {
console.log(params);
var dataIndex = params.data.index;
var description = params.data.description;
if (!!params.data.columnName) {
this.choiceRelationColumnVisible = true;
} else {
params.data.collapsed = true;
}
});
this.relationChart.on('contextmenu', function (params) {
console.log(params);
});
datasourceApi.tableColumnList(this.pageParam).then(json => {
this.columnList = json.data.columnList || [];
this.tableInfo = json.data.tableInfo || {};
this.columnListLoading = false;
this.changeTableRelationOption(this.relationChartData, this.columnList);
this.relationChart.setOption(this.relationChartOption);
setTimeout(() => this.relationChart.resize(), 0);
});
},
changeTableRelationOption(data, columnList) {
let childrenArr = [];
for (let i = 0; i < columnList.length; i++) {
let item = columnList[i];
childrenArr.push({
name: item.name,
tableName: item.tableName,
columnName: item.name,
children: [],
collapsed: false,
});
}
data.children = childrenArr;
}
}
}
</script>
<style>
.data-executor-vue .ace-monokai .ace_print-margin {
display: none;
}
.data-executor-vue .el-card__body {
padding: 10px;
}
.data-executor-vue .el-table td, .el-table th {
padding: 6px 0;
}
.data-executor-vue .execute-result-table .el-input__inner {
height: 25px;
line-height: 25px;
padding: 0 5px;
}
.data-executor-vue .execute-result-table .el-textarea__inner {
height: 27px;
min-height: 27px;
line-height: 25px;
padding: 0 5px;
resize: none;
}
.data-executor-vue .execute-use-time {
font-size: 12px;
margin-right: 10px;
}
.data-executor-vue-out .el-tabs__nav-scroll {
padding-left: 20px;
}
.data-executor-vue-out .el-button + .el-button {
margin-left: 0px;
}
.data-executor-vue-out .el-table__body-wrapper {
height: calc(100vh - 180px);
overflow-y: auto;
}
</style>