zhangxu
/
etl-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(资产授权前台页面)

master
zhang xu 2024-04-24 22:04:40 +08:00
parent b51ae0cbe2
commit cbf7145579
5 changed files with 161 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
src/api/kvt/jdbc.js
View File

@ -10,97 +10,109 @@ export function listJdbc(query) {
}
// 查询数据资源管理详细
export function getJdbc(id) {
return request({
url: '/kvt/jdbc/' + id,
method: 'get'
})
}
// 新增数据资源管理
export function addJdbc(data) {
return request({
url: '/kvt/jdbc',
method: 'post',
data: data
})
}
// 测试连接
export function textConn(data) {
export function listSource(query) {
return request({
url: '/kvt/jdbc/TestConn',
url: '/kvt/jdbc/list',
method: 'get',
params: query
})
}
export function dataAssetList(data) {
return request({
url: '/kvt/jdbc/DataAssetList',
method: 'post',
data
})
}
export function assetModelList(data) {
return request({
url: '/kvt/jdbc/AssetModelList',
method: 'post',
data
})
}
export function assetsList(data) {
return request({
url: '/kvt/jdbc/AssetsList',
method: 'post',
data
})
}
export function synchronousData(data) {
return request({
url: '/kvt/jdbc/SynchronousData',
method: 'post',
data
})
}
export function structureList(data) {
return request({
url: '/kvt/jdbc/StructureList',
method: 'post',
data
})
}
// 查询【请填写功能名称】详细
export function getSource(id) {
return request({
url: '/kvt/jdbc/' + id,
method: 'get'
})
}
// 新增【请填写功能名称】
export function addSource(data) {
return request({
url: '/kvt/jdbc',
method: 'post',
data: data
})
}
// 修改数据资源管理
export function updateJdbc(data) {
return request({
url: '/kvt/jdbc/'+data.id,
method: 'put',
data: data
})
}
// 删除数据资源管理
export function delJdbc(id) {
return request({
url: '/kvt/jdbc/' + id,
method: 'delete'
})
}
export function assetsList(data) {
return request({
url: '/kvt/jdbc/AssetsList',
method: 'post',
data
})
}
export function structureList(data) {
return request({
url: '/kvt/jdbc/StructureList',
method: 'post',
data
})
}
export function structure(data) {
return request({
url: '/kvt/jdbc/getDataBig',
method: 'post',
data
})
export function dataAssetList(data) {
// 测试连接
export function testConnection(data) {
return request({
url: '/kvt/jdbc/dataAsseList',
method: 'post',
data
url: '/kvt/jdbc/TestConnection',
method: 'post',
data: data
})
}
export function assetModelList(data) {
return request({
url: '/kvt/jdbc/assrtModelList',
method: 'post',
data
})
}
export function synchronousData(data) {
return request({
url: '/etl/source/SynchronousData',
method: 'post',
data
})
}
}
// 修改【请填写功能名称】
export function updateSource(data) {
return request({
url: '/kvt/jdbc/source',
method: 'put',
data: data
})
}
// 删除【请填写功能名称】
export function delSource(id) {
return request({
url: '/kvt/jdbc/source/' + id,
method: 'delete'
})
}
// 删除【请填写功能名称】
export function statistics() {
return request({
url: '/kvt/jdbc/Statistics' ,
method: 'get'
})
}

183
src/views/kvt/assets/index.vue
View File

@ -1,137 +1,8 @@
<template>
<<<<<<< HEAD
<div>
<el-container style="height: 80%; border: 1px solid #eee">
<el-aside width="300px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu :index="source.id" v-for="source in sourceList">
<template slot="title"><i class="el-icon-message"></i>{{source.dataSourceName}}</template>
<el-menu-item-group>
<template v-if="source.tableList==null" slot="title">连接失败或数据库中没有表</template>
<el-menu-item v-for="(tableName,index) in source.tableList" :index="source.id-index" @click="selectAssets(source,tableName)">{{tableName}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main>
<el-card style="height: 280px">
<div slot="header" class="clearfix">
<span>查询语句</span>
</div>
<el-input type="textarea" v-model="source.sql" style="width: 1080px;" :rows="6"></el-input>
<el-button style="float: right;margin-top: 20px" @click="sql()">查询</el-button>
</el-card>
<br>
<el-card>
<div slot="header" class="clearfix">
<span>数据资产</span>
</div>
<el-table :data="structureList">
<el-table-column v-for="(assets,index) in assetsList" :label="index+' ('+assets+')'" width="140">
<template slot-scope="scope">
{{scope.row[index].value}}
</template>
</el-table-column>
</el-table>
</el-card>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import {assetsList, listJdbc, structureList} from "@/api/kvt/jdbc";
export default {
methods: {assetsList, structureList},
//import引入的组件需要注入到对象中才能使用"
components: {},
props: {},
data() {
//这里存放数据"
return {
queryParams: {
pageNum: 1,
total: 0,
// 【请填写功能名称】表格数据
sourceList: [],
assetsList:[],
structureList:[],
source: {
sql: ''
}
},
//计算属性 类似于data概念",
watch: {},
//方法集合",
methods: {
sql(){
structureList(this.source).then(res => {
console.log(res)
this.structureList = res.data.kvtList
})
},
selectAssets(source,tableName) {
this.structureList = []
this.assetsList = []
this.source.sql=''
source.tableName = tableName
this.source = source
assetsList(source).then(res => {
console.log(res)
this.assetsList = res.data.structure
})
},
getList: function () {
this.loading = true;
listJdbc(this.queryParams).then(response => {
this.sourceList = response.data.rows;
this.total = response.data.total;
this.loading = false;
console.log(this.sourceList)
});
}
},
//生命周期 - 创建完成（可以访问当前this实例）",
created() {
this.getList()
},
//生命周期 - 挂载完成（可以访问DOM元素）",
mounted() {
},
beforeCreate() {
}, //生命周期 - 创建之前",
beforeMount() {
}, //生命周期 - 挂载之前",
beforeUpdate() {
}, //生命周期 - 更新之前",
updated() {
}, //生命周期 - 更新之后",
beforeDestroy() {
}, //生命周期 - 销毁之前",
destroyed() {
}, //生命周期 - 销毁完成",
activated() {
} //如果页面有keep-alive缓存功能，这个函数会触发",
}
=======
<div>
<el-container style="height: 80%; border: 1px solid #eee">
<el-aside width="400px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-tree :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-menu>
<el-container :style="{height: mainHeight + 'px'}">
<el-aside width="400px" style="background-color: rgb(238, 241, 246);height: 80%">
<el-tree style="background-color: white" :data="sourceList" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</el-aside>
<el-container>
@ -173,23 +44,25 @@ export default {
</el-container>
</el-container>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { dataAssetList, listSource, structureList} from "@/api/kvt/jdbc";
import OverallAssetStructure from "@/views/kvt/assets/overallAssetStructure.vue";
import OverallSpecificAssets from "@/views/kvt/assets/overallSpecificAssets.vue";
import OverallAssets from "@/views/kvt/assets/overallAssets.vue";
import {dataAssetList, listJdbc} from "@/api/kvt/jdbc";
export default {
//import引入的组件需要注入到对象中才能使用"
components: {OverallAssetStructure, OverallSpecificAssets, OverallAssets},
props: {},
data() {
return {
mainHeight: window.innerHeight - 85,
assetsCompute:{
assetsModuleSum: 0,
dataModuleSum: 0,
@ -248,7 +121,7 @@ export default {
this.showAssets = data.dataType
},
sql(){
listJdbc(this.source).then(res => {
structureList(this.source).then(res => {
this.structureList = res.data.kvtList
})
},
@ -258,12 +131,16 @@ export default {
dataModuleSum: 0,
dataSourceSum: 0
}
listJdbc(this.queryParams).then(response => {
listSource(this.queryParams).then(response => {
this.sourceList = response.data.rows;
console.log(this.sourceList)
this.sourceList.forEach(source => {
if (source.type=='PostGre'){
source.label=source.dataSourceName+'('+source.databaseName+'-'+source.modeName+'-'+source.systemName+')'
}else{
source.label=source.dataSourceName+'('+source.databaseName+'-'+source.systemName+')'
source.dataType = 'dataSource'
}
source.dataType = 'dataSource'
if (source.tableList!=null){
source.tableList.forEach(table => {
table.label = table.tableName+'-'+table.tableComment+'('+table.tableCount+'条)'
@ -281,28 +158,22 @@ export default {
},
//生命周期 - 挂载完成（可以访问DOM元素）",
mounted() {
>>>>>>> f5eb707 (feat:(初级) 同步数据结构)
}
};
</script>
<style scoped>
el-header {
<<<<<<< HEAD
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
el-aside {
color: #333;
=======
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
el-aside {
color: #333;
>>>>>>> f5eb707 (feat:(初级) 同步数据结构)
.el-aside {
margin: 0;
padding: 0;
width: 400px;
background-color: white;
}
.el-main {
background-color: #f1f1f1;
}
.custom-tree-node{
height: 30px;
}
</style>

54
src/views/kvt/jdbc/index.vue
View File

@ -86,9 +86,6 @@
type="text"
icon="el-icon-edit"
@click="testConnection(scope.row)"
<<<<<<< HEAD
>测试连接</el-button><el-button
=======
>测试连接</el-button>
<el-button
size="mini"
@ -97,7 +94,6 @@
@click="synchronousData(scope.row)"
>同步资产</el-button>
<el-button
>>>>>>> f5eb707 (feat:(初级) 同步数据结构)
size="mini"
type="text"
icon="el-icon-edit"
@ -159,7 +155,7 @@
<el-form-item label="数据接入类型" prop="type">
<el-select style="width: 100%" v-model="form.type">
<el-option label="MySql" value="MySql">MySql</el-option>
<el-option label="Oracle" value="Oracle">Oracle</el-option>
<el-option label="PostGre" value="PostGre">PostGre</el-option>
</el-select>
</el-form-item>
</el-col>
@ -169,6 +165,13 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.type == 'PostGre'">
<el-col :md="12" :sm="24">
<el-form-item label="模式名称" prop="modeName">
<el-input v-model="form.modeName" placeholder="模式名称" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :md="12" :sm="24">
<el-form-item label="连接用户名" prop="username">
@ -268,13 +271,20 @@
<script>
<<<<<<< HEAD
import {addJdbc, delJdbc, getJdbc, listJdbc, textConn} from "@/api/kvt/jdbc";
=======
import {addJdbc, delJdbc, getJdbc, listJdbc, synchronousData, textConn} from "@/api/kvt/jdbc";
>>>>>>> f5eb707 (feat:(初级) 同步数据结构)
import {addSource, delSource, getSource, listJdbc, synchronousData, testConnection, updateSource} from "@/api/kvt/jdbc";
export default {
watch:{
'form.type':{
handler(val) {
if(val != 'PostGre'){
this.form.modeName = ''
}
}
}
},
name: "Source",
data() {
return {
@ -296,6 +306,13 @@ export default {
title: "",
// 是否显示弹出层
open: false,
maxNum: null,
maxWaitTime: null,
maxWaitSize: null,
modeName: null,
createBy: null,
createTime: null,
updateBy: null,
// 查询参数
queryParams: {
pageNum: 1,
@ -339,7 +356,10 @@ export default {
],
maxWaitSize: [
{required: true, message: "最大等待次数不能为空", trigger: "blur"}
]
],
modeName: [
{required: true, message: "模式名称不能为空", trigger: "blur"}
]
},
dataSourceParamList: [
{
@ -353,8 +373,6 @@ export default {
this.getList();
},
methods: {
<<<<<<< HEAD
=======
//同步
synchronousData(data){
synchronousData(data).then(res=>{
@ -367,7 +385,7 @@ export default {
},
>>>>>>> f5eb707 (feat:(初级) 同步数据结构)
// 添加参数
addParam(){
this.dataSourceParamList.push({
@ -395,7 +413,7 @@ export default {
},
/** 测试连接 */
testConnection(row) {
textConn(row).then(res => {
testConnection(row).then(res => {
if (res.code === 200) {
this.$message({
message: "连接成功",
@ -476,7 +494,7 @@ export default {
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getJdbc(id).then(response => {
getSource(id).then(response => {
this.form = response.data;
console.log(this.form)
this.dataSourceParamList = [];
@ -502,7 +520,7 @@ export default {
this.getList();
});
} else {
addJdbc(this.form).then(response => {
addSource(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -515,7 +533,7 @@ export default {
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function() {
return delJdbc(ids);
return delSource(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");

180
src/views/kvt/overallspecificAssets/index.vue
View File

@ -1,180 +0,0 @@
<<<<<<< HEAD
=======
<template>
<div>
<el-card>
<div slot="header" class="clearfix">
<span>资产模型基本信息</span>
</div>
<el-descriptions border :column="2">
<el-descriptions-item label="表名称">{{title.tableName}}</el-descriptions-item>
<el-descriptions-item label="表备注">{{title.tableComment}}</el-descriptions-item>
<el-descriptions-item label="数据量">{{title.tableCount}}</el-descriptions-item>
<el-descriptions-item label="是否核心">
<el-tag size="small">是</el-tag>
</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card style=" margin-top: 20px;">
<div slot="header" class="clearfix">
<span>资产模型详细信息</span>
</div>
<el-table
:data="tableData"
style="width: 100%;">
<el-table-column prop="name" label="名称" />
<el-table-column prop="comment" label="注释" />
<el-table-column prop="isPrimaryKey" label="是否主键" >
<template slot-scope="scope">
<el-tag size="small" :type="scope.row.isPrimaryKey === 'Y' ? 'success' : ''">
{{scope.row.isPrimaryKey}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="type" label="类型" />
<el-table-column prop="mappingType" label="映射类型" />
<el-table-column prop="length" label="长度" />
<el-table-column prop="decimalPlaces" label="小数位" />
<el-table-column prop="isNull" label="是否为空" >
<template slot-scope="scope">
<el-tag size="small" :type="scope.row.isNull === 'Y' ? 'success' : 'danger'">
{{scope.row.isNull}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="defaultValue" label="默认值" />
<el-table-column prop="isDict" label="是否字典" >
<template slot-scope="scope">
<el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success">
{{scope.row.isDict}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="dictKey" label="映射字典" >
<template slot-scope="scope">
<el-popover
v-if="scope.row.isDict === 'Y'"
placement="left"
width="200"
trigger="hover">
<el-table :data="[
{ label: '男', value: '1' },
{ label: '女', value: '2' },
{ label: '未知', value: '0' },
]">
<el-table-column property="label" label="字典标签"/>
<el-table-column property="value" label="字典值"/>
</el-table>
<el-tag slot="reference">{{scope.row.dictKey}}</el-tag>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="id" label="操作" >
<template slot-scope="scope">
<el-button type="text">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
import {assetModelList} from "@/api/kvt/jdbc";
export default {
name: 'OverallAssetStructure',
watch:{
'title': {
handler(val) {
console.log(val)
assetModelList(val).then(res => {
this.tableData = res.data
})
},
immediate: true
}
},
props: {
title: {
}
},
data() {
return {
tableData: [
{
id: 1,
name: "id",
comment: "主键",
isPrimaryKey: "Y",
type: "bigint",
mappingType: "Long",
length: "-",
decimalPlaces: "-",
isNull: "N",
defaultValue: "-",
isDict: "N",
dictKey: "-",
}, {
id: 2,
name: "name",
comment: "姓名",
isPrimaryKey: "N",
type: "varchar",
mappingType: "String",
length: "64",
decimalPlaces: "-",
isNull: "N",
defaultValue: "-",
isDict: "N",
dictKey: "-",
}, {
id: 3,
name: "sex",
comment: "性别",
isPrimaryKey: "N",
type: "char",
mappingType: "String",
length: "1",
decimalPlaces: "-",
isNull: "N",
defaultValue: "-",
isDict: "Y",
dictKey: "system_sex",
}, {
id: 4,
name: "price",
comment: "金额",
isPrimaryKey: "N",
type: "double",
mappingType: "BigDecimal",
length: "10",
decimalPlaces: "2",
isNull: "N",
defaultValue: "0.00",
isDict: "N",
dictKey: "-",
}, {
id: 5,
name: "create_time",
comment: "创建时间",
isPrimaryKey: "N",
type: "datetime",
mappingType: "Date",
length: "-",
decimalPlaces: "-",
isNull: "Y",
defaultValue: "-",
isDict: "N",
dictKey: "-",
}, ]
}
},
}
</script>
<style scoped lang="scss">
</style>
>>>>>>> f5eb707 (feat:(初级) 同步数据结构)

3
src/views/tool/gen/importTable.vue
View File

@ -66,7 +66,8 @@ export default {
pageNum: 1,
pageSize: 10,
tableName: undefined,
tableComment: undefined
tableComment: undefined,
tableCount: undefined
}
};
},