选择展示的列存储起来，下次使用上次选择的列，数据源列表展示留白
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-tooltip>
|
||||
</div>
|
||||
<el-tabs v-model="executeShowTable" @tab-click="executeShowTableClick">
|
||||
<el-tabs v-model="executeShowTable">
|
||||
<el-tab-pane label="信息" name="table0">
|
||||
<pre>{{executeResultInfo}}</pre>
|
||||
</el-tab-pane>
|
||||
@@ -149,6 +149,7 @@
|
||||
import copyFormatter from './copy/index'
|
||||
import sqlFormatter from "sql-formatter";
|
||||
import aceEditor from "../../common/lib/ace-editor";
|
||||
import storageUtil from "../../common/lib/zyplayer/storageUtil";
|
||||
|
||||
export default {
|
||||
name: 'dataPreview',
|
||||
@@ -206,7 +207,10 @@
|
||||
},
|
||||
executorSource: {},
|
||||
columnMap: {},
|
||||
primaryKeyColumn: {}
|
||||
primaryKeyColumn: {},
|
||||
storageKey: {
|
||||
key: 'zyplayer-doc-table-show-columns', subKey: ''
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -243,6 +247,17 @@
|
||||
}
|
||||
});
|
||||
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.vueQueryParam = to.query;
|
||||
// let newName = {key: this.$route.fullPath, val: '数据-'+this.vueQueryParam.tableName};
|
||||
@@ -350,7 +365,6 @@
|
||||
this.executeShowTable = (itemIndex === 1) ? "table0" : "table1";
|
||||
this.executeResultInfo = executeResultInfo;
|
||||
this.executeResultList = executeResultList;
|
||||
this.executeShowTableClick();
|
||||
}).catch(e => {
|
||||
this.sqlExecuting = false;
|
||||
});
|
||||
@@ -394,12 +408,6 @@
|
||||
handleSelectionChange(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() {
|
||||
let choiceData = this.choiceResultObj[this.executeShowTable] || [];
|
||||
if (choiceData.length > 0) {
|
||||
@@ -531,6 +539,7 @@
|
||||
if (checkedKeys.length <= 0) {
|
||||
this.$message.warning("必须选择一列展示");
|
||||
} else {
|
||||
storageUtil.set.save(this.storageKey.key, this.storageKey.subKey, checkedKeys.join(','), 50);
|
||||
this.choiceShowColumnLast = checkedKeys;
|
||||
this.choiceShowColumnDrawer = false;
|
||||
this.doExecutorClick();
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
style="margin-top: 10px;"
|
||||
style="margin: 10px 0 20px 0;text-align: right;"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
: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