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

SQL编辑器自动提示库、表、列逻辑优化，更加好用

Browse Source
This commit is contained in:
暮光：城中城
2021-06-20 17:47:46 +08:00
parent a30d9318da
commit 5abe56caad
14 changed files with 209 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
zyplayer-doc-ui/db-ui/src/common/api/datasource.js
View File

@@ -8,8 +8,8 @@ export default {
queryTableDdl: data => {
return request({url: '/zyplayer-doc-db/doc-db/getTableDdl', method: 'post', data: Qs.stringify(data)});
},
getEditorData: data => {
return request({url: '/zyplayer-doc-db/doc-db/getEditorData', method: 'post', data: Qs.stringify(data)});
getSourceBaseInfo: data => {
return request({url: '/zyplayer-doc-db/doc-db/getSourceBaseInfo', method: 'post', data: Qs.stringify(data)});
},
datasourceList: data => {
return request({url: '/zyplayer-doc-db/doc-db/getDataSourceList', method: 'post', data: Qs.stringify(data)});

141
zyplayer-doc-ui/db-ui/src/common/lib/ace-editor/DatabaseCompleter.js
View File

@@ -8,6 +8,7 @@ export default {
source: {},
databaseInfo: {},
tableInfo: {},
columnInfo: {},
lastCallbackArr: [],
change(source) {
this.source = source;
@@ -19,6 +20,7 @@ export default {
let languageTools = ace.acequire("ace/ext/language_tools");
languageTools.addCompleter(this);
}
// 初始加载
if (!!this.source.sourceId) {
// 加载所有库
let databaseList = this.databaseInfo[this.source.sourceId] || [];
@@ -29,36 +31,52 @@ export default {
}
// 加载库下所有表
if (!!this.source.dbName) {
let tableList = this.tableInfo[this.source.sourceId + '_' + this.source.dbName] || [];
let tableKey = this.source.sourceId + '_' + this.source.dbName;
let tableList = this.tableInfo[tableKey] || [];
if (tableList.length <= 0) {
datasourceApi.tableList({sourceId: this.source.sourceId, dbName: this.source.dbName}).then(json => {
this.tableInfo[this.source.sourceId + '_' + this.source.dbName] = json.data || [];
this.tableInfo[tableKey] = json.data || [];
});
}
}
// 加载表下所有字段
if (!!this.source.tableName) {
let columnKey = this.source.sourceId + '_' + this.source.dbName + '_' + this.source.tableName;
let columnList = this.columnInfo[columnKey] || [];
if (columnList.length <= 0) {
datasourceApi.tableColumnList({sourceId: this.source.sourceId, dbName: this.source.dbName, tableName: this.source.tableName}).then(json => {
this.columnInfo[columnKey] = json.data.columnList || [];
});
}
}
}
},
getCompletions(editor, session, pos, prefix, callback) {
async getCompletions(editor, session, pos, prefix, callback) {
let callbackArr = [];
let lineStr = session.getLine(pos.row).substring(0, pos.column - 1);
// console.log("Executor.vue getCompletions，sourceId：" + JSON.stringify(this.source) + '， lineStr：'+ lineStr, pos);
if (lineStr.endsWith("from ") || lineStr.endsWith("join ")) {
this.getDatabasesAndTables(callbackArr);
console.log("Executor.vue getCompletions，sourceId：" + JSON.stringify(this.source) + '， lineStr：' + lineStr, pos);
if (!!this.source.tableName) {
// 如果指定了表名，则只提示字段，其他都不用管，用在表数据查看页面
callbackArr = await this.getAssignTableColumns(this.source.dbName, this.source.tableName);
callback(null, callbackArr);
} else if (lineStr.endsWith("from ") || lineStr.endsWith("join ")) {
callbackArr = this.getDatabasesAndTables();
this.lastCallbackArr = callbackArr;
callback(null, callbackArr);
} else if (lineStr.endsWith(".")) {
this.getTablesAndColumns(callbackArr, lineStr);
callbackArr = await this.getTablesAndColumns(lineStr);
this.lastCallbackArr = callbackArr;
callback(null, callbackArr);
} else if (lineStr.endsWith("select ") || lineStr.endsWith("where ") || lineStr.endsWith("and ")) {
this.getTableColumns(callbackArr, session, pos);
} else if (lineStr.endsWith("select ") || lineStr.endsWith("where ") || lineStr.endsWith("and ") || lineStr.endsWith("or ")) {
callbackArr = await this.getTableColumns(session, pos);
this.lastCallbackArr = callbackArr;
callback(null, callbackArr);
} else {
callback(null, this.lastCallbackArr);
}
},
getDatabasesAndTables(callbackArr) {
getDatabasesAndTables() {
let callbackArr = [];
// 所有表
let tableList = this.tableInfo[this.source.sourceId + '_' + this.source.dbName] || [];
tableList.forEach(item => callbackArr.push({
@@ -77,12 +95,15 @@ export default {
type: "snippet",
score: 1000
}));
return callbackArr;
},
getTablesAndColumns(callbackArr, lineStr) {
async getTablesAndColumns(lineStr) {
let isFound = false;
let callbackArr = [];
// 匹配 库名. 搜索表名
let databaseList = this.databaseInfo[this.source.sourceId] || [];
databaseList.forEach(async item => {
for (let i = 0; i < databaseList.length; i++) {
let item = databaseList[i];
if (lineStr.endsWith(item.dbName + ".")) {
let tableList = this.tableInfo[this.source.sourceId + '_' + item.dbName] || [];
if (tableList.length <= 0) {
@@ -99,33 +120,20 @@ export default {
}));
isFound = true;
}
});
}
// 未找到，匹配 表名. 搜索字段名
// if (!isFound) {
// for (let key in this.editorColumnInfo) {
// if (!lineStr.endsWith(key + ".")) {
// continue;
// }
// let columnInfo = this.editorColumnInfo[key];
// if (!!columnInfo) {
// for (let i = 0; i < columnInfo.length; i++) {
// let caption = (!!columnInfo[i].description) ? columnInfo[i].name + "-" + columnInfo[i].description : columnInfo[i].name;
// callbackArr.push({
// caption: caption,
// snippet: columnInfo[i].name,
// meta: "column",
// type: "snippet",
// score: 1000
// });
// }
// isFound = true;
// }
// }
// }
if (!isFound) {
let tableList = this.tableInfo[this.source.sourceId + '_' + this.source.dbName] || [];
for (let i = 0; i < tableList.length; i++) {
let tableName = tableList[i].tableName;
if (lineStr.endsWith(tableName + ".")) {
callbackArr = await this.getAssignTableColumns(this.source.dbName, tableName);
}
}
}
return callbackArr;
},
getTableColumns(callbackArr, session, pos) {
return;
let isFound = false;
async getTableColumns(session, pos) {
let queryText = "";
// 往前加
for (let i = pos.row; i >= 0; i--) {
@@ -144,27 +152,46 @@ export default {
}
}
// 所有表，找下面的字段列表
for (let key in this.editorDbTableInfo) {
let tableInfo = this.editorDbTableInfo[key];
for (let i = 0; i < tableInfo.length; i++) {
if (queryText.indexOf(tableInfo[i].tableName) < 0) {
continue;
}
let columnInfo = this.editorColumnInfo[tableInfo[i].tableName];
if (!!columnInfo) {
for (let j = 0; j < columnInfo.length; j++) {
let caption = (!!columnInfo[j].description) ? columnInfo[j].name + "-" + columnInfo[j].description : columnInfo[j].name;
callbackArr.push({
caption: caption,
snippet: columnInfo[j].name,
meta: "column",
type: "snippet",
score: 1000
});
}
isFound = true;
}
let callbackArr = [];
let tableList = this.tableInfo[this.source.sourceId + '_' + this.source.dbName] || [];
for (let i = 0; i < tableList.length; i++) {
let tableName = tableList[i].tableName;
if (queryText.indexOf(tableName) >= 0) {
let tempArr = await this.getAssignTableColumns(this.source.dbName, tableName);
callbackArr = callbackArr.concat(tempArr);
}
}
return callbackArr;
},
/**
* 获取指定数据表的字段
* @param dbName
* @param tableName
*/
async getAssignTableColumns(dbName, tableName) {
let columnKey = this.source.sourceId + '_' + dbName + '_' + tableName;
let columnList = this.columnInfo[columnKey] || [];
if (columnList.length <= 0) {
let res = await datasourceApi.tableColumnList({
sourceId: this.source.sourceId,
dbName: dbName,
tableName: tableName
});
columnList = res.data.columnList || [];
this.columnInfo[columnKey] = columnList;
}
let callbackArr = [];
columnList.forEach(item => {
let caption = (!!item.description) ? item.name + "-" + item.description : item.name;
callbackArr.push({
caption: caption,
snippet: item.name,
meta: "字段",
type: "snippet",
score: 1000
});
});
return callbackArr;
}
}

10
zyplayer-doc-ui/db-ui/src/common/lib/ace-editor/index.js
View File

@@ -5,7 +5,7 @@ import 'brace/snippets/sql';
import 'brace/mode/json';
import 'brace/snippets/json';
import 'brace/theme/monokai';
import complater from './DatabaseCompleter'
import completer from './DatabaseCompleter'
export default {
render: function (h) {
@@ -59,7 +59,7 @@ export default {
})
},
source: function (source) {
complater.change(source);
completer.change(source);
},
},
beforeDestroy: function () {
@@ -67,7 +67,7 @@ export default {
this.editor.container.remove();
},
activated: function () {
complater.change(this.source);
completer.change(this.source);
},
mounted: function () {
let vm = this;
@@ -88,14 +88,14 @@ export default {
let content = editor.getValue();
vm.$emit('input', content);
vm.contentBackup = content;
// 内容改变就执行输入提示功能，todo 某些情况下应当不提示
// 内容改变就执行输入提示功能，和自动的冲突了，感觉自动的就符合了，但是按空格他不出现提示框
// console.log('change content：' + content);
// editor.execCommand("startAutocomplete");
});
if (vm.options) {
editor.setOptions(vm.options);
}
complater.change(this.source);
completer.change(this.source);
},
methods: {
px: function (n) {

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

@@ -346,8 +346,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.pageParam.dbName + '`.`' + this.pageParam.tableName + '`';
let copyData = copyFormatter.format('update', this.editorDbProduct, dataCols, choiceData, this.conditionDataColsChoice, tableName);
let copyData = copyFormatter.format('update', this.pageParam.dbType, dataCols, choiceData, this.conditionDataColsChoice, this.pageParam.dbName, this.pageParam.tableName);
this.conditionDataColsChoice = [];
this.exportConditionVisible = false;
this.$copyText(copyData).then(
@@ -366,8 +365,7 @@
this.exportConditionVisible = true;
return;
}
let tableName = '`' + this.pageParam.dbName + '`.`' + this.pageParam.tableName + '`';
let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, '', tableName);
let copyData = copyFormatter.format(type, this.pageParam.dbType, dataCols, choiceData, '', this.pageParam.dbName, this.pageParam.tableName);
this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"),
err => this.$message.error("抱歉，复制失败！")

14
zyplayer-doc-ui/db-ui/src/views/data/Executor.vue
View File

@@ -304,6 +304,7 @@
this.choiceDatasourceId = this.datasourceList[0].id;
this.executorSource = {sourceId: this.choiceDatasourceId};
this.loadDatabaseList();
this.loadSourceBaseInfo();
}
});
},
@@ -319,13 +320,10 @@
}
});
},
loadEditorData() {
datasourceApi.getEditorData({sourceId: this.choiceDatasourceId}).then(json => {
loadSourceBaseInfo() {
datasourceApi.getSourceBaseInfo({sourceId: this.choiceDatasourceId}).then(json => {
let data = json.data || {};
this.editorDbInfo = data.db || [];
this.editorDbProduct = data.product || '';
this.editorDbTableInfo = data.table || {};
this.editorColumnInfo = data.column || {};
});
},
sourceGroupChangeEvents() {
@@ -341,11 +339,13 @@
this.choiceDatasourceId = datasourceOptions[0].id;
this.executorSource = {sourceId: this.choiceDatasourceId};
this.loadDatabaseList();
this.loadSourceBaseInfo();
}
},
datasourceChangeEvents() {
this.executorSource = {sourceId: this.choiceDatasourceId};
this.loadDatabaseList();
this.loadSourceBaseInfo();
},
databaseChangeEvents() {
this.executorSource = {sourceId: this.choiceDatasourceId, dbName: this.choiceDatabase};
@@ -392,7 +392,7 @@
let choiceData = this.choiceResultObj[this.executeShowTable] || [];
if (choiceData.length > 0) {
let dataCols = this.executeResultList.find(item => item.name === this.executeShowTable).dataCols;
let copyData = copyFormatter.format('update', this.editorDbProduct, dataCols, choiceData, this.conditionDataColsChoice, '`table`');
let copyData = copyFormatter.format('update', this.editorDbProduct, dataCols, choiceData, this.conditionDataColsChoice);
this.conditionDataColsChoice = [];
this.exportConditionVisible = false;
this.$copyText(copyData).then(
@@ -411,7 +411,7 @@
this.exportConditionVisible = true;
return;
}
let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, '', '`table`');
let copyData = copyFormatter.format(type, this.editorDbProduct, dataCols, choiceData, '');
this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"),
err => this.$message.error("抱歉，复制失败！")

38
zyplayer-doc-ui/db-ui/src/views/data/copy/base.js
View File

@@ -4,12 +4,14 @@
* @since 2021年5月23日
*/
export default {
insert(dataCols, choiceData, tableName = '`table`') {
insert(dataCols, choiceData, dbName, tableName) {
let tableNameRes = (!!dbName) ? '`' + dbName + '`.`' : '';
tableNameRes += (!!tableName) ? tableName : '`table`';
// 复制为insert语句
let copyData = '';
let names = '';
dataCols.forEach(col => {
if (names.length > 0) names += ', '
if (names.length > 0) names += ', ';
names += col.prop;
});
choiceData.forEach(item => {
@@ -24,40 +26,44 @@ export default {
values += "'" + val + "'";
}
});
copyData += 'insert into ' + tableName + ' (' + names + ') values (' + values + ');\n';
copyData += 'insert into ' + tableNameRes + ' (' + names + ') values (' + values + ');\n';
});
return copyData;
},
update(dataCols, choiceData, condition=[], tableName = '`table`') {
update(dataCols, choiceData, condition=[], dbName, tableName) {
let tableNameRes = (!!dbName) ? '`' + dbName + '`.`' : '';
tableNameRes += (!!tableName) ? tableName : '`table`';
// 复制为update语句
let copyData = '';
choiceData.forEach(item => {
let values = '', where = '';
dataCols.forEach(col => {
if (values.length > 0) values += ', ';
values += col.prop + '=';
let val = item[col.prop] || '';
if (typeof val === 'number' && !isNaN(val)) {
values += val;
if (condition.indexOf(col.prop) >= 0) {
if (condition.indexOf(col.prop) >= 0) {
if (typeof val === 'number' && !isNaN(val)) {
if (where.length > 0) where += ' and ';
where += col.prop + ' = ' + val;
}
} else {
val = String(val).replaceAll('\'', '\'\'');
values += "'" + val + "'";
if (condition.indexOf(col.prop) >= 0) {
} else {
if (where.length > 0) where += ' and ';
where += col.prop + ' = ' + "'" + val + "'";
}
} else {
if (values.length > 0) values += ', ';
values += col.prop + '=';
if (typeof val === 'number' && !isNaN(val)) {
values += val;
} else {
val = String(val).replaceAll('\'', '\'\'');
values += "'" + val + "'";
}
}
});
if (where.length > 0) where = ' where ' + where;
copyData += 'update ' + tableName + ' set ' + values + where + ';\n';
copyData += 'update ' + tableNameRes + ' set ' + values + where + ';\n';
});
return copyData;
},
json(dataCols, choiceData, tableName) {
json(dataCols, choiceData, dbName, tableName) {
// 复制为json
return JSON.stringify(choiceData);
},

14
zyplayer-doc-ui/db-ui/src/views/data/copy/index.js
View File

@@ -1,22 +1,24 @@
import base from './base'
import sqlserver from './sqlserver'
export default {
format(type, product, dataCols, choiceData, condition, tableName) {
format(type, product, dataCols, choiceData, condition, dbName, tableName) {
let formatter = this.getProduct(product);
if (type === 'insert') {
// 复制为insert语句
return formatter.insert(dataCols, choiceData, tableName);
return formatter.insert(dataCols, choiceData, dbName, tableName);
} else if (type === 'update') {
// 复制为update语句
return formatter.update(dataCols, choiceData, condition, tableName);
return formatter.update(dataCols, choiceData, condition, dbName, tableName);
} else if (type === 'json') {
// 复制为json
return formatter.json(dataCols, choiceData, tableName);
return formatter.json(dataCols, choiceData, dbName, tableName);
}
},
getProduct(product) {
if (product === 'mysql') {
// 不同数据源类型可以用不用的处理器类型，暂时只实现了一套基础的
// 不同数据源类型可以用不用的处理器类型
if (product === 'sqlserver') {
return sqlserver;
}
return base;
},

70
zyplayer-doc-ui/db-ui/src/views/data/copy/sqlserver.js Normal file
View File

@@ -0,0 +1,70 @@
/**
* 通用的转换器，如果通用的不能满足需要添加转换器实现转换
* @author 暮光：城中城
* @since 2021年5月23日
*/
export default {
insert(dataCols, choiceData, dbName, tableName) {
let tableNameRes = (!!dbName) ? dbName + '..' : '';
tableNameRes += (!!tableName) ? tableName : 'table';
// 复制为insert语句
let copyData = '';
let names = '';
dataCols.forEach(col => {
if (names.length > 0) names += ', ';
names += col.prop;
});
choiceData.forEach(item => {
let values = '';
dataCols.forEach(col => {
if (values.length > 0) values += ', ';
let val = item[col.prop] || '';
if (typeof val === 'number' && !isNaN(val)) {
values += val;
} else {
val = String(val).replaceAll('\'', '\'\'');
values += "'" + val + "'";
}
});
copyData += 'insert into ' + tableNameRes + ' (' + names + ') values (' + values + ');\n';
});
return copyData;
},
update(dataCols, choiceData, condition=[], dbName, tableName) {
let tableNameRes = (!!dbName) ? dbName + '..' : '';
tableNameRes += (!!tableName) ? tableName : 'table';
// 复制为update语句
let copyData = '';
choiceData.forEach(item => {
let values = '', where = '';
dataCols.forEach(col => {
let val = item[col.prop] || '';
if (condition.indexOf(col.prop) >= 0) {
if (typeof val === 'number' && !isNaN(val)) {
if (where.length > 0) where += ' and ';
where += col.prop + ' = ' + val;
} else {
if (where.length > 0) where += ' and ';
where += col.prop + ' = ' + "'" + val + "'";
}
} else {
if (values.length > 0) values += ', ';
values += col.prop + '=';
if (typeof val === 'number' && !isNaN(val)) {
values += val;
} else {
val = String(val).replaceAll('\'', '\'\'');
values += "'" + val + "'";
}
}
});
if (where.length > 0) where = ' where ' + where;
copyData += 'update ' + tableNameRes + ' set ' + values + where + ';\n';
});
return copyData;
},
json(dataCols, choiceData, dbName, tableName) {
// 复制为json
return JSON.stringify(choiceData);
},
}