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

数据查看优化，执行器支持复制为insert、update、json格式

Browse Source
This commit is contained in:
暮光：城中城
2021-05-24 22:42:01 +08:00
parent 9992ca9183
commit 206f410573
18 changed files with 214 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
zyplayer-doc-ui/db-ui/src/common/api/request.js
View File

@@ -3,7 +3,7 @@ import vue from '../../main'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url process.env.APP_BASE_API
timeout: 10000,
timeout: 60000,
headers: {'Content-type': 'application/x-www-form-urlencoded'},
withCredentials: true
});

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

@@ -95,7 +95,7 @@
});
// 延迟设置展开的目录，edit比app先初始化
setTimeout(() => {
this.doExecutorSql();
this.doExecutorSqlCommon();
this.$emit('initLoadDataList', {
sourceId: this.vueQueryParam.sourceId,
host: this.vueQueryParam.host,
@@ -114,21 +114,22 @@
},
handleCurrentChange(to) {
this.currentPage = to;
this.doExecutorSql();
this.doExecutorSqlCommon();
},
handlePageSizeChange(to) {
this.pageSize = to;
this.doExecutorSql();
this.doExecutorSqlCommon();
},
tableSortChange(sort) {
if (this.tableSort.prop === sort.prop && this.tableSort.order === sort.order) return;
this.tableSort = {prop: sort.prop, order: sort.order};
this.doExecutorSql();
this.tableSort = {orderColumn: sort.prop, orderType: (sort.order === 'ascending' ? 'asc' : 'desc')};
this.doExecutorSqlCommon();
},
refreshData() {
this.tableSort = {};
this.currentPage = 1;
this.doExecutorSql();
this.sqlExecutorEditor.setValue('', 1);
this.doExecutorSqlCommon();
},
cancelExecutorSql() {
datasourceApi.executeSqlCancel({executeId: this.nowExecutorId}).then(() => {
@@ -136,19 +137,21 @@
});
},
doExecutorClick() {
let conditionSql = this.sqlExecutorEditor.getSelectedText();
conditionSql = conditionSql || this.sqlExecutorEditor.getValue();
conditionSql = conditionSql || "";
this.doExecutorSqlCommon(conditionSql);
},
doExecutorSql() {
this.tableSort = {};
this.currentPage = 1;
this.doExecutorSqlCommon();
},
doExecutorSqlCommon(conditionSql) {
doExecutorSqlCommon() {
if (!this.vueQueryParam.sourceId) {
this.$message.error("请先选择数据源");
return;
}
if (!this.tableSort.orderColumn) {
this.tableSort = {orderColumn: this.vueQueryParam.orderColumn, orderType: 'asc'};
}
let conditionSql = this.sqlExecutorEditor.getSelectedText();
conditionSql = conditionSql || this.sqlExecutorEditor.getValue();
conditionSql = conditionSql || "";
this.executeError = "";
this.executeUseTime = "";
this.executeResultList = [];
@@ -163,8 +166,8 @@
condition: conditionSql,
pageNum: this.currentPage,
pageSize: this.pageSize,
orderColumn: this.tableSort.prop,
orderType: (this.tableSort.order === 'ascending' ? 'asc' : 'desc'),
orderColumn: this.tableSort.orderColumn,
orderType: this.tableSort.orderType,
params: '',
};
datasourceApi.dataViewQuery(param).then(json => {

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

@@ -25,17 +25,30 @@
<el-card>
<div v-if="!!executeError" style="color: #f00;">{{executeError}}</div>
<div v-else-if="executeResultList.length <= 0" v-loading="sqlExecuting">暂无数据</div>
<div v-else>
<el-tabs :value="executeShowTable">
<div v-else style="position: relative;">
<div style="position: absolute;right: 0;z-index: 1;">
<!-- 复制选中行 -->
<el-dropdown @command="handleCopyCheckLineCommand" v-show="this.choiceResultObj[this.executeShowTable] && this.choiceResultObj[this.executeShowTable].length > 0">
<el-button type="primary" size="small">
复制选中行<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="insert">SQL Inserts</el-dropdown-item>
<el-dropdown-item command="update">SQL Updates</el-dropdown-item>
<el-dropdown-item command="json">JSON</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<el-tabs v-model="executeShowTable">
<el-tab-pane label="信息" name="table0">
<pre>{{executeResultInfo}}</pre>
</el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="'table'+resultItem.index" v-for="resultItem in executeResultList" v-if="!!resultItem.index">
<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-column width="60px" v-if="resultItem.dataCols.length > 0">
<template slot-scope="scope">{{scope.row._index}}</template>
</el-table-column>
<el-table v-else :data="resultItem.dataList" stripe border style="width: 100%; margin-bottom: 5px;" class="execute-result-table" max-height="600"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column v-for="item in resultItem.dataCols" :prop="item.prop" :label="item.prop" :width="item.width">
<template slot-scope="scope">
<textarea readonly :value="scope.row[item.prop]" class="el-textarea__inner" rows="1"></textarea>
@@ -93,6 +106,7 @@
import '../../common/lib/ace/mode-sql'
import '../../common/lib/ace/ext-language_tools'
import '../../common/lib/ace/snippets/sql'
import copyFormatter from './copy/index'
import sqlFormatter from "sql-formatter"
import datasourceApi from '../../common/api/datasource'
@@ -107,6 +121,7 @@
databaseList: [],
choiceDatabase: "",
editorDbProduct: "",
editorDbInfo: [],
editorDbTableInfo: {},
editorColumnInfo: {},
@@ -122,6 +137,8 @@
historyDrawerVisible: false,
myFavoriteList: [],
myHistoryListList: [],
// 选择复制
choiceResultObj: {},
}
},
mounted: function () {
@@ -245,6 +262,7 @@
var resultItem = this.dealExecuteResult(objItem);
if (resultItem.updateCount < 0) {
resultItem.index = itemIndex;
resultItem.name = 'table' + itemIndex;
itemIndex++;
}
executeResultList.push(resultItem);
@@ -271,6 +289,7 @@
datasourceApi.getEditorData({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 || {};
});
@@ -317,9 +336,6 @@
width = (width > 200) ? 200 : width;
executeResultCols.push({prop: key, width: width + 25});
}
for (var i = 0; i < dataList.length; i++) {
dataList[i]._index = i + 1;
}
}
var resultObj = {};
resultObj.dataList = dataList;
@@ -422,9 +438,23 @@
}
}
});
},
}
}
},
handleSelectionChange(val) {
this.$set(this.choiceResultObj, this.executeShowTable, val);
},
handleCopyCheckLineCommand(type) {
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(type, this.editorDbProduct, dataCols, choiceData);
this.$copyText(copyData).then(
res => this.$message.success("内容已复制到剪切板！"),
err => this.$message.error("抱歉，复制失败！")
);
}
}
}
}
</script>
<style>

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

@@ -0,0 +1,56 @@
/**
* 通用的转换器，如果通用的不能满足需要添加转换器实现转换
* @author 暮光：城中城
* @since 2021年5月23日
*/
export default {
insert(dataCols, choiceData) {
// 复制为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 = val.replaceAll('\'', '\'\'');
values += "'" + val + "'";
}
});
copyData += 'insert into `table` (' + names + ') values (' + values + ');\n';
});
return copyData;
},
update(dataCols, choiceData) {
// 复制为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 (col.prop === 'id') where = ' where id = ' + val;
} else {
val = val.replaceAll('\'', '\'\'');
values += "'" + val + "'";
}
});
copyData += 'update `table` set ' + values + where + ';\n';
});
return copyData;
},
json(dataCols, choiceData) {
// 复制为json
return JSON.stringify(choiceData);
},
}

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

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

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

@@ -103,6 +103,11 @@
<pre><code v-html="tableDDLInfo.postgresql"></code></pre>
</div>
</el-tab-pane>
<el-tab-pane label="hive" name="hive" v-if="!!tableDDLInfo.hive">
<div v-highlight>
<pre><code v-html="tableDDLInfo.hive"></code></pre>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
@@ -199,12 +204,18 @@
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});
},