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

oracle,达梦数据库表列表排序

Browse Source 
表数据页面横向拖动卡顿问题修复
一些页面调整
This commit is contained in:
diant
2023-05-26 18:26:22 +08:00
parent 00e3a4492d
commit 5093b0eea6
11 changed files with 436 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
zyplayer-doc-db/src/main/java/com/zyplayer/doc/db/framework/db/mapper/dm/DmBaseMapper.xml
View File

@@ -40,6 +40,7 @@
<where> <where>
<if test="dbName != null">t.owner = #{dbName}</if> <if test="dbName != null">t.owner = #{dbName}</if>
</where> </where>
order by t.TABLE_NAME
</select> </select>
<!-- 获取表字段集合 --> <!-- 获取表字段集合 -->

1
zyplayer-doc-db/src/main/java/com/zyplayer/doc/db/framework/db/mapper/oracle/OracleBaseMapper.xml
View File

@@ -40,6 +40,7 @@
<where> <where>
<if test="dbName != null">t.owner = #{dbName}</if> <if test="dbName != null">t.owner = #{dbName}</if>
</where> </where>
order by t.TABLE_NAME
</select> </select>
<!-- 获取表字段集合 --> <!-- 获取表字段集合 -->

1
zyplayer-doc-db/src/main/resources/dist/css/index.2ec53960.css vendored
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/css/index.d21f0fdb.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
zyplayer-doc-db/src/main/resources/dist/doc-db.html vendored
View File

@@ -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.2fa4c9b3.css" rel="preload" as="style"><link href="css/index.2ec53960.css" rel="preload" as="style"><link href="js/chunk-vendors.6270548d.js" rel="preload" as="script"><link href="js/index.8a8330c4.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.2ec53960.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.6270548d.js"></script><script src="js/index.8a8330c4.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.2fa4c9b3.css" rel="preload" as="style"><link href="css/index.d21f0fdb.css" rel="preload" as="style"><link href="js/chunk-vendors.6270548d.js" rel="preload" as="script"><link href="js/index.5feed82e.js" rel="preload" as="script"><link href="css/chunk-vendors.2fa4c9b3.css" rel="stylesheet"><link href="css/index.d21f0fdb.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.6270548d.js"></script><script src="js/index.5feed82e.js"></script></body></html>

1
zyplayer-doc-db/src/main/resources/dist/js/index.5feed82e.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
zyplayer-doc-db/src/main/resources/dist/js/index.8a8330c4.js vendored
View File

File diff suppressed because one or more lines are too long

16
zyplayer-doc-ui/db-ui/src/components/layouts/PageTableView.vue
View File

@@ -219,7 +219,6 @@ export default {
openContextMenu(e) { openContextMenu(e) {
let obj = e.srcElement ? e.srcElement : e.target; let obj = e.srcElement ? e.srcElement : e.target;
if (obj.id) { if (obj.id) {
//let currentContextTabId = obj.id.split("-")[1];
//数据源与数据库名可能携带 "-" ,只截取第一次出现之后的部分 //数据源与数据库名可能携带 "-" ,只截取第一次出现之后的部分
let currentContextTabId = obj.id.split('-').slice(1).join('-'); let currentContextTabId = obj.id.split('-').slice(1).join('-');
this.contextMenuVisible = true; this.contextMenuVisible = true;
@@ -246,9 +245,10 @@ export default {
// 关闭所有标签页 // 关闭所有标签页
closeAllTabs() { closeAllTabs() {
//删除所有tab标签 //删除所有tab标签
this.linkList.splice(0, this.linkList.length) this.linkList.splice(1, this.linkList.length)
this.pageList.splice(0, this.pageList.length) this.pageList.splice(1, this.pageList.length)
this.$router.replace({query: {}}) this.activePage = this.linkList[0];
this.$router.push(this.activePage);
this.closeContextMenu() this.closeContextMenu()
}, },
// 关闭其它标签页 // 关闭其它标签页
@@ -268,7 +268,6 @@ export default {
this.linkList.splice(0, currTabIndex); this.linkList.splice(0, currTabIndex);
this.activePage = this.linkList[0]; this.activePage = this.linkList[0];
this.$router.push(this.activePage); this.$router.push(this.activePage);
console.log(currTabIndex+'删除左侧')
break; break;
} }
case "right": { case "right": {
@@ -277,18 +276,16 @@ export default {
this.linkList.splice(currTabIndex + 1, this.linkList.length); this.linkList.splice(currTabIndex + 1, this.linkList.length);
this.activePage = this.linkList[currTabIndex]; this.activePage = this.linkList[currTabIndex];
this.$router.push(this.activePage); this.$router.push(this.activePage);
console.log(currTabIndex+'删除右侧')
break; break;
} }
case "other": { case "other": {
//删除其他所有tab标签 //删除其他所有tab标签
this.pageList.splice(0, currTabIndex); this.pageList.splice(0, currTabIndex);
this.linkList.splice(0, currTabIndex); this.linkList.splice(0, currTabIndex);
this.pageList.splice(currTabIndex + 1, this.pageList.length); this.pageList.splice(1, this.pageList.length);
this.linkList.splice(currTabIndex + 1, this.linkList.length); this.linkList.splice(1, this.linkList.length);
this.activePage = this.linkList[0]; this.activePage = this.linkList[0];
this.$router.push(this.activePage); this.$router.push(this.activePage);
console.log(currTabIndex+'删除其他')
break; break;
} }
} }
@@ -310,6 +307,7 @@ export default {
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item { /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
font-size: 12px;
} }
/deep/ .el-tabs__nav-next { /deep/ .el-tabs__nav-next {

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

@@ -68,7 +68,7 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name" <el-tab-pane :label="'结果'+resultItem.index" :name="resultItem.name"
v-for="(resultItem,index) in executeResultList" :key="index" v-for="(resultItem,index) in executeResultList" :key="index"
v-if="!!resultItem.index"> v-if="!!resultItem.index" lazy>
<div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div> <div v-if="!!resultItem.errMsg" style="color: #f00;">{{ resultItem.errMsg }}</div>
<div v-else-if="resultItem.dataList.length <= 0" <div v-else-if="resultItem.dataList.length <= 0"
style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据 style="text-align: center; color: #aaa; padding: 20px 0;">暂无数据
@@ -86,11 +86,13 @@
@cell-click="mouseOnFocus" @cell-click="mouseOnFocus"
@cell-mouse-leave="mouseLeave" @cell-mouse-leave="mouseLeave"
@sort-change="tableSortChange" @sort-change="tableSortChange"
:checkboxConfig="{checkMethod: selectable, highlight: true}"
:default-sort="tableSort"> :default-sort="tableSort">
<ux-table-column type="checkbox" width="55"></ux-table-column> <ux-table-column type="checkbox" width="50"></ux-table-column>
<ux-table-column type="index" width="50" title=" "></ux-table-column> <ux-table-column type="index" width="50" title=" "></ux-table-column>
<ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" <ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index"
:prop="item.prop" :title="item.prop" :prop="item.prop" :title="item.prop"
:resizable="true"
:width="item.width" sortable> :width="item.width" sortable>
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<el-tooltip effect="dark" :content="item.desc" placement="top"> <el-tooltip effect="dark" :content="item.desc" placement="top">
@@ -431,6 +433,7 @@ export default {
this.executeShowTable = (itemIndex === 1) ? "table0" : "table1"; this.executeShowTable = (itemIndex === 1) ? "table0" : "table1";
this.executeResultInfo = executeResultInfo; this.executeResultInfo = executeResultInfo;
this.executeResultList = executeResultList; this.executeResultList = executeResultList;
}).catch(e => { }).catch(e => {
this.sqlExecuting = false; this.sqlExecuting = false;
}); });
@@ -643,6 +646,9 @@ export default {
} }
this.$refs.showColumnTree.setCheckedKeys(choiceAll); this.$refs.showColumnTree.setCheckedKeys(choiceAll);
}, },
selectable({row}) {
return row.id !== 2
},
} }
} }
</script> </script>

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

@@ -1,5 +1,5 @@
<template> <template>
<div style="padding: 0 10px;"> <div style="padding: 0 10px;">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item label="名字"> <el-form-item label="名字">
<el-input v-model="searchParam.name" placeholder="名字"></el-input> <el-input v-model="searchParam.name" placeholder="名字"></el-input>
@@ -11,7 +11,9 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" :loading="loadDataListLoading" @click="getDatasourceList" icon="el-icon-search">查询</el-button> <el-button type="primary" :loading="loadDataListLoading" @click="getDatasourceList"
icon="el-icon-search">查询
</el-button>
<el-button @click="addDatasource" icon="el-icon-circle-plus-outline">新增</el-button> <el-button @click="addDatasource" icon="el-icon-circle-plus-outline">新增</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -29,118 +31,137 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination <el-pagination
style="margin: 10px 0 20px 0;text-align: right;" 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"
:page-sizes="[10, 30, 50]" :page-sizes="[10, 30, 50]"
:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="tableTotalCount"> :total="tableTotalCount">
</el-pagination> </el-pagination>
<!--增加数据源弹窗--> <!--增加数据源弹窗-->
<el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="760px" :close-on-click-modal="false"> <el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'"
<el-form label-width="120px"> :visible.sync="datasourceDialogVisible" width="760px" :close-on-click-modal="false">
<el-form-item label="分组："> <el-form label-width="120px">
<el-select v-model="newDatasource.groupName" placeholder="请选择或输入新的分组名字" style="width: 100%" filterable allow-create> <el-form-item label="分组：">
<el-select v-model="newDatasource.groupName" placeholder="请选择或输入新的分组名字"
style="width: 100%" filterable allow-create>
<el-option value="">未分组</el-option> <el-option value="">未分组</el-option>
<el-option :value="item" v-for="item in datasourceGroupList"></el-option> <el-option :value="item" v-for="item in datasourceGroupList"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="数据源名称："> <el-form-item label="数据源名称：">
<el-input v-model="newDatasource.name" placeholder="给数据源起个中文名称"></el-input> <el-input v-model="newDatasource.name" placeholder="给数据源起个中文名称"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="驱动类："> <el-form-item label="驱动类：">
<el-select v-model="newDatasource.driverClassName" @change="driverClassNameChange" placeholder="驱动类" style="width: 100%"> <el-select v-model="newDatasource.driverClassName" @change="driverClassNameChange"
<el-option label="com.mysql.jdbc.Driver" value="com.mysql.jdbc.Driver"></el-option> placeholder="驱动类" style="width: 100%">
<el-option label="net.sourceforge.jtds.jdbc.Driver" value="net.sourceforge.jtds.jdbc.Driver"></el-option> <el-option label="MYSQL: com.mysql.jdbc.Driver" value="com.mysql.jdbc.Driver"></el-option>
<el-option label="oracle.jdbc.driver.OracleDriver" value="oracle.jdbc.driver.OracleDriver"></el-option> <el-option label="SQLSERVER: net.sourceforge.jtds.jdbc.Driver"
<el-option label="org.postgresql.Driver" value="org.postgresql.Driver"></el-option> value="net.sourceforge.jtds.jdbc.Driver"></el-option>
<el-option label="org.apache.hive.jdbc.HiveDriver" value="org.apache.hive.jdbc.HiveDriver"></el-option> <el-option label="ORACLE: oracle.jdbc.driver.OracleDriver"
<el-option label="dm.jdbc.driver.DmDriver" value="dm.jdbc.driver.DmDriver"></el-option> value="oracle.jdbc.driver.OracleDriver"></el-option>
</el-select> <el-option label="POSTGRESQL: org.postgresql.Driver" value="org.postgresql.Driver"></el-option>
</el-form-item> <el-option label="HIVE: org.apache.hive.jdbc.HiveDriver"
<el-form-item label="数据源URL："> value="org.apache.hive.jdbc.HiveDriver"></el-option>
<el-input v-model="newDatasource.sourceUrl" :placeholder="urlPlaceholder" :disabled="sourceUrlDisabled&&!newDatasource.id>0"> <el-option label="达梦: dm.jdbc.driver.DmDriver" value="dm.jdbc.driver.DmDriver"></el-option>
<el-button slot="append" @click="autoFillDialog" :disabled="sourceUrlDisabled&&!newDatasource.id>0">智能填入</el-button> </el-select>
</el-input> </el-form-item>
</el-form-item> <el-form-item label="数据源URL：">
<el-form-item label="账号："> <el-input v-model="newDatasource.sourceUrl" :placeholder="urlPlaceholder"
<el-input v-model="newDatasource.sourceName" placeholder="账号"></el-input> :disabled="sourceUrlDisabled&&!newDatasource.id>0">
</el-form-item> <el-button slot="append" @click="autoFillDialog"
<el-form-item label="密码："> :disabled="sourceUrlDisabled&&!newDatasource.id>0">智能填入
<el-input v-model="newDatasource.sourcePassword" placeholder="密码"></el-input> </el-button>
</el-form-item> </el-input>
<el-form-item label="测试连接："> </el-form-item>
<el-button v-on:click="testDatasource" type="primary" v-loading="testDatasourceErrLoading">测试数据源</el-button> <el-form-item label="账号：">
</el-form-item> <el-input v-model="newDatasource.sourceName" placeholder="账号"></el-input>
</el-form> </el-form-item>
<div slot="footer" style="text-align: center;"> <el-form-item label="密码：">
<el-button v-on:click="saveDatasource" type="primary">保存</el-button> <el-input v-model="newDatasource.sourcePassword" placeholder="密码"></el-input>
<el-button v-on:click="datasourceDialogVisible=false" plain>取消</el-button> </el-form-item>
</div> <el-form-item label="测试连接：">
</el-dialog> <el-button v-on:click="testDatasource" type="primary" v-loading="testDatasourceErrLoading">
<!--人员权限弹窗--> 测试数据源
<el-dialog :visible.sync="dbSourceAuthDialogVisible" width="900px" :close-on-click-modal="false"> </el-button>
</el-form-item>
</el-form>
<div slot="footer" style="text-align: center;">
<el-button v-on:click="saveDatasource" type="primary">保存</el-button>
<el-button v-on:click="datasourceDialogVisible=false" plain>取消</el-button>
</div>
</el-dialog>
<!--人员权限弹窗-->
<el-dialog :visible.sync="dbSourceAuthDialogVisible" width="900px" :close-on-click-modal="false">
<span slot="title"> <span slot="title">
<span>权限编辑</span> <span>权限编辑</span>
<span style="margin-left: 10px;color: #999;font-size: 12px;"><i class="el-icon-info"></i> 添加、删除或编辑之后记得点击保存哦~</span> <span style="margin-left: 10px;color: #999;font-size: 12px;"><i class="el-icon-info"></i> 添加、删除或编辑之后记得点击保存哦~</span>
</span> </span>
<el-row> <el-row>
<el-select v-model="dbSourceAuthNewUser" filterable remote reserve-keyword autoComplete="new-password" <el-select v-model="dbSourceAuthNewUser" filterable remote reserve-keyword autoComplete="new-password"
placeholder="请输入名字、邮箱、账号搜索用户" :remote-method="getSearchUserList" placeholder="请输入名字、邮箱、账号搜索用户" :remote-method="getSearchUserList"
:loading="dbSourceAuthUserLoading" style="width: 750px;margin-right: 10px;"> :loading="dbSourceAuthUserLoading" style="width: 750px;margin-right: 10px;">
<el-option v-for="item in searchUserList" :key="item.id" :label="item.userName" :value="item.id"></el-option> <el-option v-for="item in searchUserList" :key="item.id" :label="item.userName"
</el-select> :value="item.id"></el-option>
<el-button v-on:click="addDbSourceAuthUser">添加</el-button> </el-select>
</el-row> <el-button v-on:click="addDbSourceAuthUser">添加</el-button>
<el-table :data="dbSourceAuthUserList" border style="width: 100%; margin: 10px 0;" size="mini"> </el-row>
<el-table-column prop="userName" label="用户" width="150"></el-table-column> <el-table :data="dbSourceAuthUserList" border style="width: 100%; margin: 10px 0;" size="mini">
<el-table-column label="权限"> <el-table-column prop="userName" label="用户" width="150"></el-table-column>
<template slot-scope="scope"> <el-table-column label="权限">
<el-select v-model="scope.row.executeAuth" placeholder="选择权限" style="width: 150px;margin-right: 10px;"> <template slot-scope="scope">
<el-option value="">无权限</el-option> <el-select v-model="scope.row.executeAuth" placeholder="选择权限"
<el-option :value="1" label="库表查看权"></el-option> style="width: 150px;margin-right: 10px;">
<el-option :value="2" label="数据查询权"></el-option> <el-option value="">无权限</el-option>
<el-option :value="3" label="所有权限"></el-option> <el-option :value="1" label="库表查看权"></el-option>
</el-select> <el-option :value="2" label="数据查询权"></el-option>
<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.descEditAuth">表字段注释修改权</el-checkbox> <el-option :value="3" label="所有权限"></el-option>
<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.procEditAuth">函数修改权</el-checkbox> </el-select>
</template> <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.descEditAuth">
</el-table-column> 表字段注释修改权
<el-table-column label="操作" width="80"> </el-checkbox>
<template slot-scope="scope"> <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.procEditAuth">函数修改权
<el-button size="small" type="danger" plain v-on:click="deleteUserDbSourceAuth(scope.row)">删除</el-button> </el-checkbox>
</template> </template>
</el-table-column> </el-table-column>
</el-table> <el-table-column label="操作" width="80">
<div> <template slot-scope="scope">
<el-button type="primary" v-on:click="saveUserDbSourceAuth">保存配置</el-button> <el-button size="small" type="danger" plain v-on:click="deleteUserDbSourceAuth(scope.row)">
</div> 删除
</el-dialog> </el-button>
<!--错误信息弹窗--> </template>
<el-dialog title="测试数据源失败" :visible.sync="testDatasourceErrVisible" :footer="null" width="760px"> </el-table-column>
<div v-highlight> </el-table>
<pre><code v-html="testDatasourceErrInfo"></code></pre> <div>
</div> <el-button type="primary" v-on:click="saveUserDbSourceAuth">保存配置</el-button>
</el-dialog> </div>
<!--数据源url地址自动输入弹窗--> </el-dialog>
<el-dialog <!--错误信息弹窗-->
title="智能填入" <el-dialog title="测试数据源失败" :visible.sync="testDatasourceErrVisible" :footer="null" width="760px">
:visible.sync="autoFillDialogVisible" <div v-highlight>
width="30%" :close-on-click-modal="false"> <pre><code v-html="testDatasourceErrInfo"></code></pre>
<el-form :model="autoFillForm" :rules="rules" label-width="90px" ref="autoFillForm"> </div>
<el-form-item label="主机地址" prop="hostIp"> </el-dialog>
<el-input v-model="autoFillForm.hostIp" placeholder="请输入主机地址" ></el-input> <!--数据源url地址自动输入弹窗-->
</el-form-item> <el-dialog
<el-form-item label="端口号" prop="port"> title="智能填入"
<el-input v-model="autoFillForm.port" placeholder="请输入数据库端口号" ></el-input> :visible.sync="autoFillDialogVisible"
</el-form-item> width="30%" :close-on-click-modal="false">
<el-form-item label="服务名" prop="serverName" v-if="oracleServerNameShow" > <el-form :model="autoFillForm" :rules="rules" label-width="90px" ref="autoFillForm">
<template slot="label"> <el-form-item label="主机地址" prop="hostIp">
<el-input v-model="autoFillForm.hostIp" placeholder="请输入主机地址"></el-input>
</el-form-item>
<el-form-item label="端口号" prop="port">
<el-input v-model="autoFillForm.port" placeholder="请输入数据库端口号"></el-input>
</el-form-item>
<el-form-item label="服务名" prop="serverName" v-if="oracleServerNameShow">
<template slot="label">
<span>服务名 <span>服务名
<el-tooltip class="item" effect="dark" placement="right"> <el-tooltip class="item" effect="dark" placement="right">
<i class="el-icon-question" style="font-size: 16px; vertical-align: middle;"></i> <i class="el-icon-question"
style="font-size: 16px; vertical-align: middle;"></i>
<div slot="content"> <div slot="content">
<p>oracle数据库服务名默认为ORCL</p> <p>oracle数据库服务名默认为ORCL</p>
<p>可使用下面的命令来查看服务名</p> <p>可使用下面的命令来查看服务名</p>
@@ -148,305 +169,315 @@
</div> </div>
</el-tooltip> </el-tooltip>
</span> </span>
</template> </template>
<el-input v-model="autoFillForm.serverName" placeholder="请输入服务名" ></el-input> <el-input v-model="autoFillForm.serverName" placeholder="请输入服务名"></el-input>
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<i class="el-icon-question-solid" /> <i class="el-icon-question-solid"/>
</el-tooltip> </el-tooltip>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="autoFillDialogVisible = false">取 消</el-button> <el-button @click="autoFillDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="autoFill('autoFillForm')">确 定</el-button> <el-button type="primary" @click="autoFill('autoFillForm')">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import datasourceApi from '../../common/api/datasource' import datasourceApi from '../../common/api/datasource'
import userApi from '../../common/api/user' import userApi from '../../common/api/user'
export default {
data() {
return {
loadDataListLoading: false,
datasourceDialogVisible: false,
autoFillDialogVisible: false,
datasourceList: [],
searchParam: {
name: '',
groupName: ''
},
pageSize: 30,
currentPage: 1,
tableTotalCount: 0,
newDatasource: {},
urlPlaceholder: "数据源URL",
dbSourceAuthDialogVisible: false, export default {
dbSourceAuthUserList: [], data() {
dbSourceAuthUserLoading: false, return {
searchUserList: [], loadDataListLoading: false,
dbSourceAuthNewUser: "", datasourceDialogVisible: false,
// 测试数据源 autoFillDialogVisible: false,
testDatasourceErrInfo: "", datasourceList: [],
testDatasourceErrVisible: false, searchParam: {
testDatasourceErrLoading: false, name: '',
// 数据源分组 groupName: ''
datasourceGroupList: [], },
pageSize: 30,
currentPage: 1,
tableTotalCount: 0,
newDatasource: {},
urlPlaceholder: "数据源URL",
sourceUrlDisabled: true, dbSourceAuthDialogVisible: false,
dbSourceAuthUserList: [],
dbSourceAuthUserLoading: false,
searchUserList: [],
dbSourceAuthNewUser: "",
// 测试数据源
testDatasourceErrInfo: "",
testDatasourceErrVisible: false,
testDatasourceErrLoading: false,
// 数据源分组
datasourceGroupList: [],
//自动填入参数 sourceUrlDisabled: true,
autoFillForm: {
hostIp: null,
port: null,
serverName: null,
},
//oracle数据库服务名是否显示
oracleServerNameShow: false,
rules: { //自动填入参数
hostIp: [ autoFillForm: {
{ required: true, message: '请输入主机地址', trigger: 'blur' } hostIp: null,
], port: null,
port: [ serverName: null,
{ required: true, message: '请输入数据库端口号', trigger: 'blur' } },
], //oracle数据库服务名是否显示
serverName: [ oracleServerNameShow: false,
{ required: true, message: '请输入数据库服务名', trigger: 'blur' }
],
}
}; rules: {
}, hostIp: [
mounted: function () { {required: true, message: '请输入主机地址', trigger: 'blur'}
this.getDatasourceList(); ],
this.getDatasourceGroupList(); port: [
}, {required: true, message: '请输入数据库端口号', trigger: 'blur'}
methods: { ],
editDbAuth(row) { serverName: [
this.newDatasource = JSON.parse(JSON.stringify(row)); {required: true, message: '请输入数据库服务名', trigger: 'blur'}
this.dbSourceAuthDialogVisible = true; ],
this.loadDbAuthUserList(); }
},
loadDbAuthUserList() {
this.dbSourceAuthNewUser = [];
this.dbSourceAuthUserList = [];
let param = {sourceId: this.newDatasource.id};
datasourceApi.dbUserAuthList(param).then(json => {
this.dbSourceAuthUserList = json.data || [];
});
},
saveUserDbSourceAuth() {
let param = {sourceId: this.newDatasource.id, authList: JSON.stringify(this.dbSourceAuthUserList)};
datasourceApi.assignDbUserAuth(param).then(() => {
this.$message.success("保存成功");
});
},
autoFillDialog(){ };
this.autoFillDialogVisible = true; },
let thatClassName = this.newDatasource.driverClassName; mounted: function () {
if (thatClassName === 'com.mysql.jdbc.Driver') { this.getDatasourceList();
//this.urlPlaceholder = "例：jdbc:mysql://127.0.0.1:3306/user_info?useUnicode=true&characterEncoding=utf8"; this.getDatasourceGroupList();
this.autoFillForm.port = "3306"; },
} else if (thatClassName === 'net.sourceforge.jtds.jdbc.Driver') { methods: {
//this.urlPlaceholder = "例：jdbc:jtds:sqlserver://127.0.0.1:33434;DatabaseName=user_info;socketTimeout=60;"; editDbAuth(row) {
this.autoFillForm.port = "33434"; this.newDatasource = JSON.parse(JSON.stringify(row));
} else if (thatClassName === 'oracle.jdbc.driver.OracleDriver') { this.dbSourceAuthDialogVisible = true;
//this.urlPlaceholder = "例：jdbc:oracle:thin:@127.0.0.1:1521/user_info"; this.loadDbAuthUserList();
this.autoFillForm.port = "1521"; },
this.oracleServerNameShow = true; loadDbAuthUserList() {
} else if (thatClassName === 'org.postgresql.Driver') { this.dbSourceAuthNewUser = [];
//this.urlPlaceholder = "例：jdbc:postgresql://127.0.0.1:5432/user_info"; this.dbSourceAuthUserList = [];
this.autoFillForm.port = "5432"; let param = {sourceId: this.newDatasource.id};
} else if (thatClassName === 'org.apache.hive.jdbc.HiveDriver') { datasourceApi.dbUserAuthList(param).then(json => {
//this.urlPlaceholder = "例：jdbc:hive2://127.0.0.1:21050/user_info;auth=noSasl"; this.dbSourceAuthUserList = json.data || [];
this.autoFillForm.port = "21050"; });
} else if (thatClassName === 'dm.jdbc.driver.DmDriver'){ },
//this.urlPlaceholder = "例：jdbc:dm://127.0.0.1:5236?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf-8"; saveUserDbSourceAuth() {
this.autoFillForm.port = "5236"; let param = {sourceId: this.newDatasource.id, authList: JSON.stringify(this.dbSourceAuthUserList)};
} datasourceApi.assignDbUserAuth(param).then(() => {
}, this.$message.success("保存成功");
autoFill(formName){ });
this.$refs[formName].validate((valid) => { },
if (valid) {
this.autoFillDialogVisible = false;
//拼接地址
let thatClassName = this.newDatasource.driverClassName;
let hostIp = this.autoFillForm.hostIp;
let port = this.autoFillForm.port;
let serverName = this.autoFillForm.serverName;
if (thatClassName === 'com.mysql.jdbc.Driver') {
//this.urlPlaceholder = "例：jdbc:mysql://127.0.0.1:3306/user_info?useUnicode=true&characterEncoding=utf8";
this.newDatasource.sourceUrl = "jdbc:mysql://"+hostIp+":"+port;
} else if (thatClassName === 'net.sourceforge.jtds.jdbc.Driver') {
//this.urlPlaceholder = "例：jdbc:jtds:sqlserver://127.0.0.1:33434;DatabaseName=user_info;socketTimeout=60;";
this.newDatasource.sourceUrl = "jdbc:jtds:sqlserver://"+hostIp+":"+port;
} else if (thatClassName === 'oracle.jdbc.driver.OracleDriver') {
//this.urlPlaceholder = "例：jdbc:oracle:thin:@127.0.0.1:1521/user_info";
this.newDatasource.sourceUrl = "jdbc:oracle:thin:@"+hostIp+":"+port+"/"+serverName;
} else if (thatClassName === 'org.postgresql.Driver') {
//this.urlPlaceholder = "例：jdbc:postgresql://127.0.0.1:5432/user_info";
this.newDatasource.sourceUrl = "jdbc:postgresql://"+hostIp+":"+port;
} else if (thatClassName === 'org.apache.hive.jdbc.HiveDriver') {
//this.urlPlaceholder = "例：jdbc:hive2://127.0.0.1:21050/user_info;auth=noSasl";
this.newDatasource.sourceUrl = "jdbc:hive2://"+hostIp+":"+port;
} else if (thatClassName === 'dm.jdbc.driver.DmDriver'){
//this.urlPlaceholder = "例：jdbc:dm://127.0.0.1:5236?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf-8";
this.newDatasource.sourceUrl = "jdbc:dm://"+hostIp+":"+port;
}
} else {
return false;
}
});
}, autoFillDialog() {
deleteUserDbSourceAuth(row) { this.autoFillDialogVisible = true;
var dbSourceAuthUserList = []; let thatClassName = this.newDatasource.driverClassName;
for (var i = 0; i < this.dbSourceAuthUserList.length; i++) { if (thatClassName === 'com.mysql.jdbc.Driver') {
var item = this.dbSourceAuthUserList[i]; //this.urlPlaceholder = "例：jdbc:mysql://127.0.0.1:3306/user_info?useUnicode=true&characterEncoding=utf8";
if (item.userId != row.userId) { this.autoFillForm.port = "3306";
dbSourceAuthUserList.push(this.dbSourceAuthUserList[i]); } else if (thatClassName === 'net.sourceforge.jtds.jdbc.Driver') {
} //this.urlPlaceholder = "例：jdbc:jtds:sqlserver://127.0.0.1:1433;DatabaseName=user_info;socketTimeout=60;";
} this.autoFillForm.port = "1433";
this.dbSourceAuthUserList = dbSourceAuthUserList; } else if (thatClassName === 'oracle.jdbc.driver.OracleDriver') {
}, //this.urlPlaceholder = "例：jdbc:oracle:thin:@127.0.0.1:1521/user_info";
addDbSourceAuthUser() { this.autoFillForm.port = "1521";
if (this.dbSourceAuthNewUser.length <= 0) { this.oracleServerNameShow = true;
this.$message.warning("请先选择用户"); } else if (thatClassName === 'org.postgresql.Driver') {
return; //this.urlPlaceholder = "例：jdbc:postgresql://127.0.0.1:5432/user_info";
} this.autoFillForm.port = "5432";
var userName = ""; } else if (thatClassName === 'org.apache.hive.jdbc.HiveDriver') {
for (var i = 0; i < this.searchUserList.length; i++) { //this.urlPlaceholder = "例：jdbc:hive2://127.0.0.1:21050/user_info;auth=noSasl";
if (this.dbSourceAuthNewUser == this.searchUserList[i].id) { this.autoFillForm.port = "21050";
userName = this.searchUserList[i].userName; } else if (thatClassName === 'dm.jdbc.driver.DmDriver') {
break; //this.urlPlaceholder = "例：jdbc:dm://127.0.0.1:5236?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf-8";
} this.autoFillForm.port = "5236";
} }
this.dbSourceAuthUserList.push({ },
userName: userName, autoFill(formName) {
userId: this.dbSourceAuthNewUser, this.$refs[formName].validate((valid) => {
executeAuth: '', if (valid) {
descEditAuth: 0, this.autoFillDialogVisible = false;
procEditAuth: 0, //拼接地址
}); let thatClassName = this.newDatasource.driverClassName;
this.dbSourceAuthNewUser = ""; let hostIp = this.autoFillForm.hostIp;
}, let port = this.autoFillForm.port;
getSearchUserList(query) { let serverName = this.autoFillForm.serverName;
if (!query) return; if (thatClassName === 'com.mysql.jdbc.Driver') {
this.dbSourceAuthUserLoading = true; //this.urlPlaceholder = "例：jdbc:mysql://127.0.0.1:3306/user_info?useUnicode=true&characterEncoding=utf8";
userApi.getUserBaseInfo({search: query}).then(json => { this.newDatasource.sourceUrl = "jdbc:mysql://" + hostIp + ":" + port;
this.searchUserList = json.data || []; } else if (thatClassName === 'net.sourceforge.jtds.jdbc.Driver') {
this.dbSourceAuthUserLoading = false; //this.urlPlaceholder = "例：jdbc:jtds:sqlserver://127.0.0.1:1433;DatabaseName=user_info;socketTimeout=60;";
}); this.newDatasource.sourceUrl = "jdbc:jtds:sqlserver://" + hostIp + ":" + port;
}, } else if (thatClassName === 'oracle.jdbc.driver.OracleDriver') {
addDatasource() { //this.urlPlaceholder = "例：jdbc:oracle:thin:@127.0.0.1:1521/user_info";
this.datasourceDialogVisible = true; this.newDatasource.sourceUrl = "jdbc:oracle:thin:@" + hostIp + ":" + port + "/" + serverName;
this.testDatasourceErrLoading = false; } else if (thatClassName === 'org.postgresql.Driver') {
this.newDatasource = {name: "", driverClassName: "", sourceUrl: "", sourceName: "", sourcePassword: "", groupName: ""}; //this.urlPlaceholder = "例：jdbc:postgresql://127.0.0.1:5432/user_info";
this.sourceUrlDisabled = true; this.newDatasource.sourceUrl = "jdbc:postgresql://" + hostIp + ":" + port;
}, } else if (thatClassName === 'org.apache.hive.jdbc.HiveDriver') {
editDatasource(row) { //this.urlPlaceholder = "例：jdbc:hive2://127.0.0.1:21050/user_info;auth=noSasl";
this.newDatasource = JSON.parse(JSON.stringify(row)); this.newDatasource.sourceUrl = "jdbc:hive2://" + hostIp + ":" + port;
this.datasourceDialogVisible = true; } else if (thatClassName === 'dm.jdbc.driver.DmDriver') {
this.testDatasourceErrLoading = false; //this.urlPlaceholder = "例：jdbc:dm://127.0.0.1:5236?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf-8";
}, this.newDatasource.sourceUrl = "jdbc:dm://" + hostIp + ":" + port;
deleteDatasource(row) {
this.$confirm('确定要删除此数据源吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.yn = 0;
datasourceApi.manageUpdateDatasource(row).then(() => {
this.$message.success("删除成功！");
this.$emit('loadDatasourceList');
this.getDatasourceList();
});
}).catch(()=>{});
},
saveDatasource() {
datasourceApi.manageUpdateDatasource(this.newDatasource).then(() => {
this.datasourceDialogVisible = false;
this.$message.success("保存成功！");
this.$emit('loadDatasourceList');
this.getDatasourceList();
});
},
testDatasource() {
this.testDatasourceErrLoading = true;
datasourceApi.queryTestDatasource(this.newDatasource).then(res => {
this.testDatasourceErrLoading = false;
if (res.errCode == 200) {
this.$message.success("连接成功！");
} else {
this.testDatasourceErrVisible = true;
this.testDatasourceErrInfo = res.errMsg || '';
} }
}).catch(err => { } else {
this.testDatasourceErrLoading = false; return false;
}
});
},
deleteUserDbSourceAuth(row) {
var dbSourceAuthUserList = [];
for (var i = 0; i < this.dbSourceAuthUserList.length; i++) {
var item = this.dbSourceAuthUserList[i];
if (item.userId != row.userId) {
dbSourceAuthUserList.push(this.dbSourceAuthUserList[i]);
}
}
this.dbSourceAuthUserList = dbSourceAuthUserList;
},
addDbSourceAuthUser() {
if (this.dbSourceAuthNewUser.length <= 0) {
this.$message.warning("请先选择用户");
return;
}
var userName = "";
for (var i = 0; i < this.searchUserList.length; i++) {
if (this.dbSourceAuthNewUser == this.searchUserList[i].id) {
userName = this.searchUserList[i].userName;
break;
}
}
this.dbSourceAuthUserList.push({
userName: userName,
userId: this.dbSourceAuthNewUser,
executeAuth: '',
descEditAuth: 0,
procEditAuth: 0,
});
this.dbSourceAuthNewUser = "";
},
getSearchUserList(query) {
if (!query) return;
this.dbSourceAuthUserLoading = true;
userApi.getUserBaseInfo({search: query}).then(json => {
this.searchUserList = json.data || [];
this.dbSourceAuthUserLoading = false;
});
},
addDatasource() {
this.datasourceDialogVisible = true;
this.testDatasourceErrLoading = false;
this.newDatasource = {
name: "",
driverClassName: "",
sourceUrl: "",
sourceName: "",
sourcePassword: "",
groupName: ""
};
this.sourceUrlDisabled = true;
},
editDatasource(row) {
this.newDatasource = JSON.parse(JSON.stringify(row));
this.datasourceDialogVisible = true;
this.testDatasourceErrLoading = false;
},
deleteDatasource(row) {
this.$confirm('确定要删除此数据源吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.yn = 0;
datasourceApi.manageUpdateDatasource(row).then(() => {
this.$message.success("删除成功！");
this.$emit('loadDatasourceList');
this.getDatasourceList();
});
}).catch(() => {
});
},
saveDatasource() {
datasourceApi.manageUpdateDatasource(this.newDatasource).then(() => {
this.datasourceDialogVisible = false;
this.$message.success("保存成功！");
this.$emit('loadDatasourceList');
this.getDatasourceList();
});
},
testDatasource() {
this.testDatasourceErrLoading = true;
datasourceApi.queryTestDatasource(this.newDatasource).then(res => {
this.testDatasourceErrLoading = false;
if (res.errCode == 200) {
this.$message.success("连接成功！");
} else {
this.testDatasourceErrVisible = true; this.testDatasourceErrVisible = true;
this.testDatasourceErrInfo = err.message || '请求出错'; this.testDatasourceErrInfo = res.errMsg || '';
}); }
}, }).catch(err => {
driverClassNameChange() { this.testDatasourceErrLoading = false;
if (this.newDatasource.driverClassName == 'com.mysql.jdbc.Driver') { this.testDatasourceErrVisible = true;
this.urlPlaceholder = "例：jdbc:mysql://127.0.0.1:3306/user_info?useUnicode=true&characterEncoding=utf8"; this.testDatasourceErrInfo = err.message || '请求出错';
} else if (this.newDatasource.driverClassName == 'net.sourceforge.jtds.jdbc.Driver') { });
this.urlPlaceholder = "例：jdbc:jtds:sqlserver://127.0.0.1:33434;DatabaseName=user_info;socketTimeout=60;"; },
} else if (this.newDatasource.driverClassName == 'oracle.jdbc.driver.OracleDriver') { driverClassNameChange() {
this.urlPlaceholder = "例：jdbc:oracle:thin:@127.0.0.1:1521/user_info"; if (this.newDatasource.driverClassName == 'com.mysql.jdbc.Driver') {
} else if (this.newDatasource.driverClassName == 'org.postgresql.Driver') { this.urlPlaceholder = "例：jdbc:mysql://127.0.0.1:3306/user_info?useUnicode=true&characterEncoding=utf8";
this.urlPlaceholder = "例：jdbc:postgresql://127.0.0.1:5432/user_info"; } else if (this.newDatasource.driverClassName == 'net.sourceforge.jtds.jdbc.Driver') {
} else if (this.newDatasource.driverClassName == 'org.apache.hive.jdbc.HiveDriver') { this.urlPlaceholder = "例：jdbc:jtds:sqlserver://127.0.0.1:1433;DatabaseName=user_info;socketTimeout=60;";
this.urlPlaceholder = "例：jdbc:hive2://127.0.0.1:21050/user_info;auth=noSasl"; } else if (this.newDatasource.driverClassName == 'oracle.jdbc.driver.OracleDriver') {
} else if (this.newDatasource.driverClassName == 'dm.jdbc.driver.DmDriver'){ this.urlPlaceholder = "例：jdbc:oracle:thin:@127.0.0.1:1521/user_info";
this.urlPlaceholder = "例：jdbc:dm://127.0.0.1:5236?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf-8"; } else if (this.newDatasource.driverClassName == 'org.postgresql.Driver') {
} this.urlPlaceholder = "例：jdbc:postgresql://127.0.0.1:5432/user_info";
this.sourceUrlDisabled = false; } else if (this.newDatasource.driverClassName == 'org.apache.hive.jdbc.HiveDriver') {
this.oracleServerNameShow = false; this.urlPlaceholder = "例：jdbc:hive2://127.0.0.1:21050/user_info;auth=noSasl";
}, } else if (this.newDatasource.driverClassName == 'dm.jdbc.driver.DmDriver') {
handleCurrentChange(to) { this.urlPlaceholder = "例：jdbc:dm://127.0.0.1:5236?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf-8";
this.currentPage = to; }
this.getDatasourceList(); this.sourceUrlDisabled = false;
}, this.oracleServerNameShow = false;
handlePageSizeChange(to) { },
this.pageSize = to; handleCurrentChange(to) {
this.getDatasourceList(); this.currentPage = to;
}, this.getDatasourceList();
getDatasourceList() { },
this.loadDataListLoading = true; handlePageSizeChange(to) {
let param = {...this.searchParam, pageNum: this.currentPage, pageSize: this.pageSize}; this.pageSize = to;
datasourceApi.manageDatasourceList(param).then(json => { this.getDatasourceList();
if (this.currentPage == 1) { },
this.tableTotalCount = json.total || 0; getDatasourceList() {
} this.loadDataListLoading = true;
this.datasourceList = json.data || []; let param = {...this.searchParam, pageNum: this.currentPage, pageSize: this.pageSize};
setTimeout(() => { datasourceApi.manageDatasourceList(param).then(json => {
this.loadDataListLoading = false; if (this.currentPage == 1) {
}, 800); this.tableTotalCount = json.total || 0;
}).catch(() => { }
this.datasourceList = json.data || [];
setTimeout(() => {
this.loadDataListLoading = false; this.loadDataListLoading = false;
}); }, 800);
}, }).catch(() => {
getDatasourceGroupList() { this.loadDataListLoading = false;
datasourceApi.manageDatasourceGroupList({}).then(json => { });
this.datasourceGroupList = json.data || []; },
}); getDatasourceGroupList() {
}, datasourceApi.manageDatasourceGroupList({}).then(json => {
} this.datasourceGroupList = json.data || [];
} });
},
}
}
</script> </script>
<style scoped> <style scoped>
.demo-input-suffix{ .demo-input-suffix {
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
} }
.demo-input-suffix>span{
width: 90px; .demo-input-suffix > span {
width: 90px;
} }
</style> </style>

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

@@ -123,6 +123,7 @@
<ux-table-column type="index" width="55" title=" "></ux-table-column> <ux-table-column type="index" width="55" title=" "></ux-table-column>
<ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index" <ux-table-column v-for="(item,index) in resultItem.dataCols" :key="index"
:prop="item.prop" :title="item.label" :prop="item.prop" :title="item.label"
:resizable="true"
:width="item.width"> :width="item.width">
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<el-tooltip effect="dark" :content="item.desc" placement="top"> <el-tooltip effect="dark" :content="item.desc" placement="top">
@@ -543,7 +544,7 @@ export default {
headerList.forEach(item => { headerList.forEach(item => {
let key = 'value_' + (headerIndex++); let key = 'value_' + (headerIndex++);
columnSet[key] = item; columnSet[key] = item;
previewColumns.push({prop: key, label: item}); previewColumns.push({prop: key, label: item, desc: item});
}); });
dataListTemp.forEach(item => { dataListTemp.forEach(item => {
let dataItem = {}, dataIndex = 0; let dataItem = {}, dataIndex = 0;