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

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

View File

@@ -1,28 +1,26 @@
<template>
<div style="padding: 10px;">
<div style="max-width: 1200px;margin: 20px auto;">
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">
<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;" v-on:click="addDatasource" type="primary" icon="el-icon-circle-plus-outline" size="small">新增</el-button>
</div>
<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="driverClassName" label="驱动类" width="200"></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="sourcePassword" label="密码"></el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<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="deleteDatasource(scope.row)" type="danger" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
<div style="padding: 0 10px;">
<el-card>
<div slot="header" class="clearfix">
<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;" v-on:click="addDatasource" type="primary" icon="el-icon-circle-plus-outline" size="small"></el-button>
</div>
<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="driverClassName" label="驱动类" width="200"></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="sourcePassword" label="密码"></el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<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="deleteDatasource(scope.row)" type="danger" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!--增加数据源弹窗-->
<el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="760px">
<!-- <el-alert-->

View File

@@ -1,31 +1,29 @@
<template>
<div id="app">
<div style="padding: 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">
<span>数据库表导出</span>
</div>
<div style="margin-bottom: 10px;">
<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-select>
<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-select>
<el-radio-group v-model="exportType">
<el-radio :label="1">HTML格式</el-radio>
<el-radio :label="2">Excel格式</el-radio>
</el-radio-group>
<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>
</div>
<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 prop="tableName" label="表"></el-table-column>
<el-table-column prop="tableComment" label="表注释"></el-table-column>
</el-table>
</el-card>
</div>
<div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
<el-card>
<div slot="header" class="clearfix">
<span>数据库表导出</span>
</div>
<div style="margin-bottom: 10px;">
<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-select>
<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-select>
<el-radio-group v-model="exportType">
<el-radio :label="1">HTML格式</el-radio>
<el-radio :label="2">Excel格式</el-radio>
</el-radio-group>
<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>
</div>
<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 prop="tableName" label="表名"></el-table-column>
<el-table-column prop="tableComment" label="表注释"></el-table-column>
</el-table>
</el-card>
</div>
</template>

View File

@@ -1,7 +1,7 @@
<template>
<div class="data-transfer-vue">
<div style="padding: 0 10px;height: 100%;box-sizing: border-box;">
<el-card style="margin: 10px;">
<el-card>
<div slot="header" class="clearfix">
<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>