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

增加DDL展示，页面展示优化

Browse Source
This commit is contained in:
暮光：城中城
2020-05-06 21:57:36 +08:00
parent e923156735
commit 0cf04e8466
7 changed files with 101 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
zyplayer-doc-db/src/main/java/com/zyplayer/doc/db/controller/DbSqlExecutorController.java
View File

@@ -22,13 +22,18 @@ import com.zyplayer.doc.db.framework.db.mapper.base.ExecuteType;
import com.zyplayer.doc.db.framework.db.mapper.base.SqlExecutor; import com.zyplayer.doc.db.framework.db.mapper.base.SqlExecutor;
import com.zyplayer.doc.db.framework.json.DocDbResponseJson; import com.zyplayer.doc.db.framework.json.DocDbResponseJson;
import org.apache.commons.lang.StringUtils; import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController; import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource; import javax.annotation.Resource;
import java.sql.Timestamp; import java.sql.Timestamp;
import java.util.*; import java.util.Date;
import java.util.LinkedList;
import java.util.List;
import java.util.Optional;
/** /**
* sql执行器 * sql执行器
@@ -40,6 +45,7 @@ import java.util.*;
@RestController @RestController
@RequestMapping("/zyplayer-doc-db/executor") @RequestMapping("/zyplayer-doc-db/executor")
public class DbSqlExecutorController { public class DbSqlExecutorController {
private static Logger logger = LoggerFactory.getLogger(DbSqlExecutorController.class);
@Resource @Resource
SqlExecutor sqlExecutor; SqlExecutor sqlExecutor;
@@ -84,6 +90,7 @@ public class DbSqlExecutorController {
String resultJsonStr = JSON.toJSONString(executeResult, mapping, SerializerFeature.WriteMapNullValue); String resultJsonStr = JSON.toJSONString(executeResult, mapping, SerializerFeature.WriteMapNullValue);
resultList.add(resultJsonStr); resultList.add(resultJsonStr);
} catch (Exception e) { } catch (Exception e) {
logger.error("执行出错", e);
ExecuteResult executeResult = ExecuteResult.error(StringUtil.getException(e), sqlItem); ExecuteResult executeResult = ExecuteResult.error(StringUtil.getException(e), sqlItem);
resultList.add(JSON.toJSONString(executeResult)); resultList.add(JSON.toJSONString(executeResult));
} }

1
zyplayer-doc-db/src/main/java/com/zyplayer/doc/db/framework/db/mapper/base/SqlExecutor.java
View File

@@ -134,6 +134,7 @@ public class SqlExecutor {
long useTime = System.currentTimeMillis() - startTime; long useTime = System.currentTimeMillis() - startTime;
return new ExecuteResult(updateCount, resultList, useTime, executeParam.getSql()); return new ExecuteResult(updateCount, resultList, useTime, executeParam.getSql());
} catch (Exception e) { } catch (Exception e) {
logger.error("执行出错", e);
throw new RuntimeException(e); throw new RuntimeException(e);
} finally { } finally {
statementMap.remove(executeParam.getExecuteId()); statementMap.remove(executeParam.getExecuteId());

8
zyplayer-doc-ui/db-ui/src/common/config/apimix.js
View File

@@ -5,14 +5,14 @@ var href = window.location.href;
var _fn = { var _fn = {
href: href, href: href,
// 本地启动时使用本地接口调试 // 本地启动时使用本地接口调试
// HOST: 'http://local.zyplayer.com:8083/zyplayer-doc-manage', HOST: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
// HOST1: 'http://local.zyplayer.com:8083/zyplayer-doc-manage', HOST1: 'http://local.zyplayer.com:8083/zyplayer-doc-manage',
// 也可以直接使用线上的服务调试 // 也可以直接使用线上的服务调试
// HOST: 'http://doc.zyplayer.com/zyplayer-doc-manage', // HOST: 'http://doc.zyplayer.com/zyplayer-doc-manage',
// HOST1: 'http://doc.zyplayer.com/zyplayer-doc-manage', // HOST1: 'http://doc.zyplayer.com/zyplayer-doc-manage',
// 打包时使用下面这两行，文件就放在根目录下，所以当前路劲就好 // 打包时使用下面这两行，文件就放在根目录下，所以当前路劲就好
HOST: './', // HOST: './',
HOST1: './', // HOST1: './',
mixUrl: function (host, url) { mixUrl: function (host, url) {
var p; var p;

46
zyplayer-doc-ui/db-ui/src/views/data/DatasourceManage.vue
View File

@@ -1,28 +1,26 @@
<template> <template>
<div style="padding: 10px;"> <div style="padding: 0 10px;">
<div style="max-width: 1200px;margin: 20px auto;"> <el-card>
<el-card style="margin: 10px;"> <div slot="header" class="clearfix">
<div slot="header" class="clearfix"> <span>数据源管理</span>
<span>数据源管理</span> <el-button style="float: right;margin-left: 5px;" :loading="loadDataListLoading" v-on:click="getDatasourceList" plain icon="el-icon-refresh" size="small">刷新</el-button>
<el-button style="float: right;margin-left: 5px;" :loading="loadDataListLoading" v-on:click="getDatasourceList" plain icon="el-icon-refresh" size="small">刷新</el-button> <el-button style="float: right;" v-on:click="addDatasource" type="primary" icon="el-icon-circle-plus-outline" size="small">新增</el-button>
<el-button style="float: right;" v-on:click="addDatasource" type="primary" icon="el-icon-circle-plus-outline" size="small">新增</el-button> </div>
</div> <el-table :data="datasourceList" stripe border style="width: 100%; margin-bottom: 5px;">
<el-table :data="datasourceList" stripe border style="width: 100%; margin-bottom: 5px;"> <el-table-column prop="name" label="名字" width="100"></el-table-column>
<el-table-column prop="name" label="名字" width="100"></el-table-column> <el-table-column prop="driverClassName" label="驱动类" width="200"></el-table-column>
<el-table-column prop="driverClassName" label="驱动类" width="200"></el-table-column> <el-table-column prop="sourceUrl" label="数据源URL"></el-table-column>
<el-table-column prop="sourceUrl" label="数据源URL"></el-table-column> <el-table-column prop="sourceName" label="账号"></el-table-column>
<el-table-column prop="sourceName" label="账号"></el-table-column> <el-table-column prop="sourcePassword" label="密码"></el-table-column>
<el-table-column prop="sourcePassword" label="密码"></el-table-column> <el-table-column label="操作" width="220">
<el-table-column label="操作" width="220"> <template slot-scope="scope">
<template slot-scope="scope"> <el-button v-on:click="editDatasource(scope.row)" type="primary" size="mini">修改</el-button>
<el-button v-on:click="editDatasource(scope.row)" type="primary" size="mini">修改</el-button> <el-button v-on:click="editDbAuth(scope.row)" type="success" size="mini">权限</el-button>
<el-button v-on:click="editDbAuth(scope.row)" type="success" size="mini">权限</el-button> <el-button v-on:click="deleteDatasource(scope.row)" type="danger" size="mini">删除</el-button>
<el-button v-on:click="deleteDatasource(scope.row)" type="danger" size="mini">删除</el-button> </template>
</template> </el-table-column>
</el-table-column> </el-table>
</el-table> </el-card>
</el-card>
</div>
<!--增加数据源弹窗--> <!--增加数据源弹窗-->
<el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="760px"> <el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="760px">
<!-- <el-alert--> <!-- <el-alert-->

52
zyplayer-doc-ui/db-ui/src/views/data/Export.vue
View File

@@ -1,31 +1,29 @@
<template> <template>
<div id="app"> <div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
<div style="padding: 10px;height: 100%;box-sizing: border-box;"> <el-card>
<el-card style="margin: 10px;"> <div slot="header" class="clearfix">
<div slot="header" class="clearfix"> <span>数据库表导出</span>
<span>数据库表导出</span> </div>
</div> <div style="margin-bottom: 10px;">
<div style="margin-bottom: 10px;"> <el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" filterable placeholder="请选择数据源">
<el-select v-model="choiceDatasourceId" @change="datasourceChangeEvents" filterable placeholder="请选择数据源"> <el-option v-for="item in datasourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in datasourceOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select>
</el-select> <el-select v-model="choiceDatabase" @change="databaseChangeEvents" filterable placeholder="请选择数据库">
<el-select v-model="choiceDatabase" @change="databaseChangeEvents" filterable placeholder="请选择数据库"> <el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName" :value="item.dbName"></el-option>
<el-option v-for="item in databaseList" :key="item.dbName" :label="item.dbName" :value="item.dbName"></el-option> </el-select>
</el-select> <el-radio-group v-model="exportType">
<el-radio-group v-model="exportType"> <el-radio :label="1">HTML格式</el-radio>
<el-radio :label="1">HTML格式</el-radio> <el-radio :label="2">Excel格式</el-radio>
<el-radio :label="2">Excel格式</el-radio> </el-radio-group>
</el-radio-group> <el-button v-on:click="exportChoiceTable" type="primary" style="margin-left: 20px;">导出选中的表</el-button>
<el-button v-on:click="exportChoiceTable" type="primary" style="margin-left: 20px;">导出选中的表</el-button> <a target="_blank" title="点击查看如何使用" href="http://doc.zyplayer.com/zyplayer-doc-manage/open-wiki.html?pageId=117&space=23f3f59a60824d21af9f7c3bbc9bc3cb"><i class="el-icon-info" style="color: #999;"></i></a>
<a target="_blank" title="点击查看如何使用" href="http://doc.zyplayer.com/zyplayer-doc-manage/open-wiki.html?pageId=117&space=23f3f59a60824d21af9f7c3bbc9bc3cb"><i class="el-icon-info" style="color: #999;"></i></a> </div>
</div> <el-table :data="tableList" stripe border @selection-change="handleSelectionChange" style="width: 100%; margin-bottom: 5px;">
<el-table :data="tableList" stripe border @selection-change="handleSelectionChange" style="width: 100%; margin-bottom: 5px;"> <el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="tableName" label="表名"></el-table-column>
<el-table-column prop="tableName" label="表名"></el-table-column> <el-table-column prop="tableComment" label="表注释"></el-table-column>
<el-table-column prop="tableComment" label="表注释"></el-table-column> </el-table>
</el-table> </el-card>
</el-card>
</div>
</div> </div>
</template> </template>

2
zyplayer-doc-ui/db-ui/src/views/data/TransferData.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="data-transfer-vue"> <div class="data-transfer-vue">
<div style="padding: 0 10px;height: 100%;box-sizing: border-box;"> <div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin: 10px;"> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>数据互导工具</span> <span>数据互导工具</span>
<a target="_blank" title="点击查看如何使用" href="http://doc.zyplayer.com/zyplayer-doc-manage/open-wiki.html?pageId=128&space=23f3f59a60824d21af9f7c3bbc9bc3cb"><i class="el-icon-info" style="color: #999;"></i></a> <a target="_blank" title="点击查看如何使用" href="http://doc.zyplayer.com/zyplayer-doc-manage/open-wiki.html?pageId=128&space=23f3f59a60824d21af9f7c3bbc9bc3cb"><i class="el-icon-info" style="color: #999;"></i></a>

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

@@ -49,6 +49,9 @@
<el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top"> <el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">
<i class="el-icon-info" style="color: #999;"></i> <i class="el-icon-info" style="color: #999;"></i>
</el-tooltip> </el-tooltip>
<span style="float: right;margin-top: -5px;">
<el-button size="small" @click="showCreateTableDdl">DDL</el-button>
</span>
</div> </div>
<div style="padding: 10px;" v-loading="columnListLoading"> <div style="padding: 10px;" v-loading="columnListLoading">
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;"> <el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
@@ -75,11 +78,16 @@
</el-table> </el-table>
</div> </div>
</el-card> </el-card>
<!--增加数据源弹窗-->
<el-dialog title="DDL" :visible.sync="tableDDLInfoDialogVisible" :footer="null" width="760px">
<pre>{{tableDDLInfo}}</pre>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import global from '../../common/config/global' import global from '../../common/config/global'
import {queryExecuteSql} from '../../common/api/datasource'
export default { export default {
data() { data() {
@@ -89,6 +97,9 @@
tableStatusInfo: {}, tableStatusInfo: {},
columnList: [], columnList: [],
tableInfo: {}, tableInfo: {},
nowExecutorId: 1,
tableDDLInfo: '',
tableDDLInfoDialogVisible: false,
}; };
}, },
activated: function () { activated: function () {
@@ -125,6 +136,34 @@
that.tableStatusInfo = json.data || {}; that.tableStatusInfo = json.data || {};
}); });
}, },
showCreateTableDdl() {
this.tableDDLInfo = '';
this.tableDDLInfoDialogVisible = true;
this.nowExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000);
let param = {
sourceId: this.vueQueryParam.sourceId,
executeId: this.nowExecutorId,
sql: this.getSelectTableInfoSql(),
params: '',
};
queryExecuteSql(param).then(res => {
if (res.errCode != 200 || !res.data || res.data.length <= 0) return;
let objItem = JSON.parse(res.data[0]);
if(!objItem.result || objItem.result.length <= 0) return;
let firstItem = objItem.result[0] || {};
this.tableDDLInfo = this.getSelectTableDDLInfo(firstItem);
});
},
getSelectTableInfoSql() {
if (this.tableStatusInfo.dbType === 'mysql') {
return 'show create table ' + this.vueQueryParam.dbName + '.' + this.vueQueryParam.tableName;
}
},
getSelectTableDDLInfo(dataItem) {
if (this.tableStatusInfo.dbType === 'mysql') {
return dataItem['Create Table'] || '';
}
},
descBoxClick(row) { descBoxClick(row) {
// row.newDesc = row.description; // row.newDesc = row.description;
row.inEdit = 1; row.inEdit = 1;
@@ -179,6 +218,7 @@
} }
</script> </script>
<style> <style>
.table-info-vue .el-dialog__body{padding: 0 20px 10px;}
.table-info-vue .el-form-item{margin-bottom: 5px;} .table-info-vue .el-form-item{margin-bottom: 5px;}
.table-info-vue .edit-table-desc{cursor: pointer; color: #409EFF;} .table-info-vue .edit-table-desc{cursor: pointer; color: #409EFF;}
.table-info-vue .description{cursor: pointer;} .table-info-vue .description{cursor: pointer;}