选择展示的列存储起来，下次使用上次选择的列，数据源列表展示留白
This commit is contained in:
暮光：城中城
@@ -1 +1 @@
|
|||||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-db.png><title>数据库文档管理</title><link href=css/chunk-vendors.8924efc6.css rel=preload as=style><link href=css/index.ba19e721.css rel=preload as=style><link href=js/chunk-vendors.c63802ce.js rel=preload as=script><link href=js/index.d95ad157.js rel=preload as=script><link href=css/chunk-vendors.8924efc6.css rel=stylesheet><link href=css/index.ba19e721.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.c63802ce.js></script><script src=js/index.d95ad157.js></script></body></html>
|
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon-db.png><title>数据库文档管理</title><link href=css/chunk-vendors.8924efc6.css rel=preload as=style><link href=css/index.ba19e721.css rel=preload as=style><link href=js/chunk-vendors.03a07ec5.js rel=preload as=script><link href=js/index.a287c663.js rel=preload as=script><link href=css/chunk-vendors.8924efc6.css rel=stylesheet><link href=css/index.ba19e721.css rel=stylesheet></head><body><noscript><strong>We're sorry but zyplayer-db-ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.03a07ec5.js></script><script src=js/index.a287c663.js></script></body></html>
|
||||||
File diff suppressed because one or more lines are too long
1
zyplayer-doc-db/src/main/resources/dist/js/index.a287c663.js
vendored
Normal file
1
zyplayer-doc-db/src/main/resources/dist/js/index.a287c663.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
40
zyplayer-doc-ui/db-ui/src/common/lib/zyplayer/storageUtil.js
Normal file
40
zyplayer-doc-ui/db-ui/src/common/lib/zyplayer/storageUtil.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
/**
|
||||||
|
* localStorage的操作工具类
|
||||||
|
* @author 暮光：城中城
|
||||||
|
* @since 2021年9月25日
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
// 集合的操作
|
||||||
|
set: {
|
||||||
|
// 保存
|
||||||
|
save(key, subKey, val, max = 100) {
|
||||||
|
if (!window.localStorage) {
|
||||||
|
console.log('当前浏览器不支持localStorage');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let dataList = JSON.parse(window.localStorage.getItem(key) || '[]');
|
||||||
|
// 存在则修改值，否则新增
|
||||||
|
let dataItem = dataList.find(val => val.key === subKey);
|
||||||
|
if (dataItem) {
|
||||||
|
dataItem.value = val;
|
||||||
|
dataItem.time = new Date().getTime();
|
||||||
|
} else {
|
||||||
|
dataList.push({key: subKey, value: val, time: new Date().getTime()});
|
||||||
|
}
|
||||||
|
// 删除多余的
|
||||||
|
dataList.sort((val1, val2) => val2.time - val1.time);
|
||||||
|
dataList = dataList.slice(0, max + 1);
|
||||||
|
window.localStorage.setItem(key, JSON.stringify(dataList));
|
||||||
|
},
|
||||||
|
// 获取
|
||||||
|
get(key, subKey) {
|
||||||
|
if (!window.localStorage) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
let dataList = JSON.parse(window.localStorage.getItem(key) || '[]');
|
||||||
|
let dataItem = dataList.find(val => val.key === subKey) || {};
|
||||||
|
return dataItem.value || '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
<el-button icon="el-icon-setting" size="small" style="margin-left: 10px;" @click="choiceShowColumnDrawerShow"></el-button>
|
<el-button icon="el-icon-setting" size="small" style="margin-left: 10px;" @click="choiceShowColumnDrawerShow"></el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<el-tabs v-model="executeShowTable" @tab-click="executeShowTableClick">
|
<el-tabs v-model="executeShowTable">
|
||||||
<el-tab-pane label="信息" name="table0">
|
<el-tab-pane label="信息" name="table0">
|
||||||
<pre>{{executeResultInfo}}</pre>
|
<pre>{{executeResultInfo}}</pre>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
@@ -149,6 +149,7 @@
|
|||||||
import copyFormatter from './copy/index'
|
import copyFormatter from './copy/index'
|
||||||
import sqlFormatter from "sql-formatter";
|
import sqlFormatter from "sql-formatter";
|
||||||
import aceEditor from "../../common/lib/ace-editor";
|
import aceEditor from "../../common/lib/ace-editor";
|
||||||
|
import storageUtil from "../../common/lib/zyplayer/storageUtil";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'dataPreview',
|
name: 'dataPreview',
|
||||||
@@ -206,7 +207,10 @@
|
|||||||
},
|
},
|
||||||
executorSource: {},
|
executorSource: {},
|
||||||
columnMap: {},
|
columnMap: {},
|
||||||
primaryKeyColumn: {}
|
primaryKeyColumn: {},
|
||||||
|
storageKey: {
|
||||||
|
key: 'zyplayer-doc-table-show-columns', subKey: ''
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
@@ -243,6 +247,17 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.tableDataColumns = columnList;
|
this.tableDataColumns = columnList;
|
||||||
|
// 设置选择展示的列
|
||||||
|
this.storageKey.subKey = param.sourceId + '-' + param.dbName + '-' + param.tableName;
|
||||||
|
let storageShowColumns = storageUtil.set.get(this.storageKey.key, this.storageKey.subKey);
|
||||||
|
this.choiceShowColumnLast = columnList.map(val => val.name);
|
||||||
|
if (storageShowColumns) {
|
||||||
|
let showColumns = storageShowColumns.split(',');
|
||||||
|
showColumns = showColumns.filter(item => this.choiceShowColumnLast.indexOf(item) >= 0);
|
||||||
|
if (showColumns.length > 0) {
|
||||||
|
this.choiceShowColumnLast = showColumns;
|
||||||
|
}
|
||||||
|
}
|
||||||
this.doExecutorSqlCommon();
|
this.doExecutorSqlCommon();
|
||||||
// this.vueQueryParam = to.query;
|
// this.vueQueryParam = to.query;
|
||||||
// let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
|
// let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
|
||||||
@@ -350,7 +365,6 @@
|
|||||||
this.executeShowTable = (itemIndex === 1) ? "table0" : "table1";
|
this.executeShowTable = (itemIndex === 1) ? "table0" : "table1";
|
||||||
this.executeResultInfo = executeResultInfo;
|
this.executeResultInfo = executeResultInfo;
|
||||||
this.executeResultList = executeResultList;
|
this.executeResultList = executeResultList;
|
||||||
this.executeShowTableClick();
|
|
||||||
}).catch(e => {
|
}).catch(e => {
|
||||||
this.sqlExecuting = false;
|
this.sqlExecuting = false;
|
||||||
});
|
});
|
||||||
@@ -394,12 +408,6 @@
|
|||||||
handleSelectionChange(val) {
|
handleSelectionChange(val) {
|
||||||
this.$set(this.choiceResultObj, this.executeShowTable, val);
|
this.$set(this.choiceResultObj, this.executeShowTable, val);
|
||||||
},
|
},
|
||||||
executeShowTableClick() {
|
|
||||||
let currentTable = this.executeResultList.find(item => item.name === this.executeShowTable);
|
|
||||||
if (currentTable) {
|
|
||||||
this.choiceShowColumnLast = currentTable.dataCols.map(val => val.prop);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
doCopyCheckLineUpdate() {
|
doCopyCheckLineUpdate() {
|
||||||
let choiceData = this.choiceResultObj[this.executeShowTable] || [];
|
let choiceData = this.choiceResultObj[this.executeShowTable] || [];
|
||||||
if (choiceData.length > 0) {
|
if (choiceData.length > 0) {
|
||||||
@@ -531,6 +539,7 @@
|
|||||||
if (checkedKeys.length <= 0) {
|
if (checkedKeys.length <= 0) {
|
||||||
this.$message.warning("必须选择一列展示");
|
this.$message.warning("必须选择一列展示");
|
||||||
} else {
|
} else {
|
||||||
|
storageUtil.set.save(this.storageKey.key, this.storageKey.subKey, checkedKeys.join(','), 50);
|
||||||
this.choiceShowColumnLast = checkedKeys;
|
this.choiceShowColumnLast = checkedKeys;
|
||||||
this.choiceShowColumnDrawer = false;
|
this.choiceShowColumnDrawer = false;
|
||||||
this.doExecutorClick();
|
this.doExecutorClick();
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
style="margin-top: 10px;"
|
style="margin: 10px 0 20px 0;text-align: right;"
|
||||||
@size-change="handlePageSizeChange"
|
@size-change="handlePageSizeChange"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
:current-page="currentPage"
|
:current-page="currentPage"
|
||||||
|
|||||||
76
zyplayer-doc-ui/db-ui/src/views/source/Database.vue
Normal file
76
zyplayer-doc-ui/db-ui/src/views/source/Database.vue
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
<template>
|
||||||
|
<div class="table-database-vue">
|
||||||
|
<el-tabs v-model="tabActiveName" @tab-click="tabActiveNameChange">
|
||||||
|
<el-tab-pane label="数据表" name="columns">
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="数据表" name="columns">
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import datasourceApi from '../../common/api/datasource'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columnListLoading: false,
|
||||||
|
vueQueryParam: {},
|
||||||
|
columnList: [],
|
||||||
|
tableInfo: [],
|
||||||
|
keyword: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
// 延迟设置展开的目录，edit比app先初始化
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit('initLoadDataList', {
|
||||||
|
sourceId: this.vueQueryParam.sourceId,
|
||||||
|
host: this.vueQueryParam.host,
|
||||||
|
dbName: this.vueQueryParam.dbName
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
activated: function () {
|
||||||
|
this.initQueryParam(this.$route);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initQueryParam(to) {
|
||||||
|
this.vueQueryParam = to.query;
|
||||||
|
let newName = {key: this.$route.fullPath, val: this.vueQueryParam.dbName};
|
||||||
|
this.$store.commit('global/addTableName', newName);
|
||||||
|
},
|
||||||
|
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.primaryKey == 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,
|
||||||
|
}, this.columnList);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.table-database-vue .el-table td, .table-database-vue .el-table th{padding: 5px 0;}
|
||||||
|
.table-database-vue .label{width: 140px; text-align: right;}
|
||||||
|
</style>
|
||||||
|
|
||||||
78
zyplayer-doc-ui/db-ui/src/views/source/TableColumnSearch.vue
Normal file
78
zyplayer-doc-ui/db-ui/src/views/source/TableColumnSearch.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="table-database-vue">
|
||||||
|
<el-card style="margin: 10px;" shadow="never">
|
||||||
|
<div slot="header" class="clearfix">库信息</div>
|
||||||
|
<el-row style="margin-bottom: 20px;">
|
||||||
|
<el-col :span="12"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
|
||||||
|
<el-col :span="12"><span class="label">数据库：</span>{{vueQueryParam.dbName}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<span class="label">关键字：</span>
|
||||||
|
<el-input v-model="keyword" placeholder="输入字段名或注释搜索库中相关的表或字段信息" style="width: 350px;margin-right: 10px;"></el-input>
|
||||||
|
<el-button class="search-submit" type="primary" icon="el-icon-search" @click="searchSubmit">模糊搜索</el-button>
|
||||||
|
<el-button icon="el-icon-coin" @click="funcManage">函数管理</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
<div style="padding: 10px;" v-loading="columnListLoading">
|
||||||
|
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
|
||||||
|
<el-table-column prop="tableName" label="表名" width="200"></el-table-column>
|
||||||
|
<el-table-column prop="columnName" label="字段名" width="200"></el-table-column>
|
||||||
|
<el-table-column prop="description" label="注释"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import datasourceApi from '../../common/api/datasource'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columnListLoading: false,
|
||||||
|
vueQueryParam: {},
|
||||||
|
columnList: [],
|
||||||
|
tableInfo: [],
|
||||||
|
keyword: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
// 延迟设置展开的目录，edit比app先初始化
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit('initLoadDataList', {
|
||||||
|
sourceId: this.vueQueryParam.sourceId,
|
||||||
|
host: this.vueQueryParam.host,
|
||||||
|
dbName: this.vueQueryParam.dbName
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
activated: function () {
|
||||||
|
this.initQueryParam(this.$route);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initQueryParam(to) {
|
||||||
|
this.vueQueryParam = to.query;
|
||||||
|
let newName = {key: this.$route.fullPath, val: this.vueQueryParam.dbName};
|
||||||
|
this.$store.commit('global/addTableName', newName);
|
||||||
|
},
|
||||||
|
searchSubmit() {
|
||||||
|
this.columnListLoading = true;
|
||||||
|
this.vueQueryParam.searchText = this.keyword;
|
||||||
|
datasourceApi.tableAndColumnBySearch(this.vueQueryParam).then(json => {
|
||||||
|
this.columnList = json.data || [];
|
||||||
|
this.columnListLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
funcManage() {
|
||||||
|
this.$router.push({path: '/procedure/list', query: this.vueQueryParam});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.table-database-vue .el-table td, .table-database-vue .el-table th{padding: 5px 0;}
|
||||||
|
.table-database-vue .label{width: 140px; text-align: right;}
|
||||||
|
</style>
|
||||||
|
|
||||||
78
zyplayer-doc-ui/db-ui/src/views/source/TableList.vue
Normal file
78
zyplayer-doc-ui/db-ui/src/views/source/TableList.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="table-database-vue">
|
||||||
|
<el-card style="margin: 10px;" shadow="never">
|
||||||
|
<div slot="header" class="clearfix">库信息</div>
|
||||||
|
<el-row style="margin-bottom: 20px;">
|
||||||
|
<el-col :span="12"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
|
||||||
|
<el-col :span="12"><span class="label">数据库：</span>{{vueQueryParam.dbName}}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<span class="label">关键字：</span>
|
||||||
|
<el-input v-model="keyword" placeholder="输入字段名或注释搜索库中相关的表或字段信息" style="width: 350px;margin-right: 10px;"></el-input>
|
||||||
|
<el-button class="search-submit" type="primary" icon="el-icon-search" @click="searchSubmit">模糊搜索</el-button>
|
||||||
|
<el-button icon="el-icon-coin" @click="funcManage">函数管理</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
<div style="padding: 10px;" v-loading="columnListLoading">
|
||||||
|
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
|
||||||
|
<el-table-column prop="tableName" label="表名" width="200"></el-table-column>
|
||||||
|
<el-table-column prop="columnName" label="字段名" width="200"></el-table-column>
|
||||||
|
<el-table-column prop="description" label="注释"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import datasourceApi from '../../common/api/datasource'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
columnListLoading: false,
|
||||||
|
vueQueryParam: {},
|
||||||
|
columnList: [],
|
||||||
|
tableInfo: [],
|
||||||
|
keyword: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
// 延迟设置展开的目录，edit比app先初始化
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$emit('initLoadDataList', {
|
||||||
|
sourceId: this.vueQueryParam.sourceId,
|
||||||
|
host: this.vueQueryParam.host,
|
||||||
|
dbName: this.vueQueryParam.dbName
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
activated: function () {
|
||||||
|
this.initQueryParam(this.$route);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initQueryParam(to) {
|
||||||
|
this.vueQueryParam = to.query;
|
||||||
|
let newName = {key: this.$route.fullPath, val: this.vueQueryParam.dbName};
|
||||||
|
this.$store.commit('global/addTableName', newName);
|
||||||
|
},
|
||||||
|
searchSubmit() {
|
||||||
|
this.columnListLoading = true;
|
||||||
|
this.vueQueryParam.searchText = this.keyword;
|
||||||
|
datasourceApi.tableAndColumnBySearch(this.vueQueryParam).then(json => {
|
||||||
|
this.columnList = json.data || [];
|
||||||
|
this.columnListLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
funcManage() {
|
||||||
|
this.$router.push({path: '/procedure/list', query: this.vueQueryParam});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.table-database-vue .el-table td, .table-database-vue .el-table th{padding: 5px 0;}
|
||||||
|
.table-database-vue .label{width: 140px; text-align: right;}
|
||||||
|
</style>
|
||||||
|
|
||||||
Reference in New Issue
Block a user