hanjian/micro-ui
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jane
2023-12-25 20:31:52 +08:00
parent 5a2f1cf69d
commit 83b0d6b92b
51 changed files with 3526 additions and 1477 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/views/metadata/datablood/index.vue
View File

@@ -1,66 +1,101 @@
<template>
<div class="app-container">
<el-card class="box-card" shadow="always">
<el-row>
<el-col :span="24">
<el-form ref="queryForm" :model="queryParams" :inline="true" class="demo-form-inline">
<el-form-item label="数据表名">
<el-input
v-model="queryParams.tableName"
placeholder="请输入数据表名"
clearable
size="small"
<div class="body-wrapper">
<el-form :inline="true" :model="searchForm">
<el-form-item label="数据库">
<el-select v-model="searchForm.sourceId" placeholder="数据库">
<el-option
v-for="item in sourceOptions"
:key="item.id"
:label="item.sourceName"
:value="item.id"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">查询</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-table
:data="tableDataList"
stripe
border
:max-height="200"
style="width: 100%; margin: 15px 0;"
>
<el-table-column prop="subjectArea" label="数据主题域" align="center" show-overflow-tooltip />
<el-table-column prop="mappingName" label="映射名称" align="center" show-overflow-tooltip />
<el-table-column prop="sourceTable" label="源表" align="center" show-overflow-tooltip />
<el-table-column prop="targetTable" label="目标表" align="center" show-overflow-tooltip />
</el-table>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div id="chart" style="width: 100%; height: 300px;" />
</el-col>
</el-row>
</el-select>
</el-form-item>
<el-form-item label="数据表">
<el-select v-model="searchForm.tableId" clearable placeholder="数据表">
<el-option
v-for="item in tableOptions"
:key="item.id"
:label="item.tableComment ? item.tableComment : item.tableName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">查询</el-button>
</el-form-item>
</el-form>
<el-divider />
<el-row>
<el-col :span="24">
<el-table
:data="tableDataList"
stripe
border
:max-height="200"
style="width: 100%; margin: 15px 0;"
>
<el-table-column prop="CONSTRAINT_NAME" label="映射名称" align="center" show-overflow-tooltip />
<el-table-column prop="TABLE_NAME" label="源表" align="center" show-overflow-tooltip />
<el-table-column prop="REFERENCED_TABLE_NAME" label="目标表" align="center" show-overflow-tooltip />
<el-table-column prop="COLUMN_NAME" label="映射字段" align="center" show-overflow-tooltip />
</el-table>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div id="chart" style="width: 100%; height: 500px;" />
</el-col>
</el-row>
</div>
</el-card>
</div>
</template>
<script>
import echarts from 'echarts'
import { listDataSource } from '@/api/metadata/datasource'
import { listDataTable } from '@/api/metadata/datatable'
import { getMetadatablood } from '@/api/metadata/datasource'
export default {
name: 'DataBlood',
data: function() {
return {
searchForm: {
sourceId: '',
tableId: ''
},
queryParams: {
tableName: ''
},
sourceOptions: [],
tableOptions: [],
chart: null,
tableDataList: []
}
},
watch: {
'searchForm.sourceId': {
immediate: true,
// handler:是一个回调函数，即监听到变化应该执行的函数
handler(value) {
if (value) {
// 清空数据
this.searchForm.tableId = ''
this.getDataTableList(value)
}
}
}
},
created() {
this.getDataSourceList()
},
mounted() {
this.chart = echarts.init(document.getElementById('chart'))
this.handleQuery()
},
beforeDestroy() {
if (!this.chart) {
@@ -70,20 +105,43 @@ export default {
this.chart = null
},
methods: {
getDataSourceList() {
listDataSource().then(response => {
if (response.success) {
this.sourceOptions = response.data
this.searchForm.sourceId = this.sourceOptions[0].id
this.getDataTableList(this.sourceOptions[0].id)
}
})
},
getDataTableList(sourceId) {
const data = {}
data.sourceId = sourceId
listDataTable(data).then(response => {
if (response.success) {
console.log('ddddddd', response)
this.tableOptions = response.data
}
})
},
handleQuery() {
this.tableDataList = [
{ subjectArea: 'DataCenter', mappingName: 'm_ts_test_table_inc', sourceTable: 'src_test_table', targetTable: 'ts_test_table' },
{ subjectArea: 'DataCenter', mappingName: 'm_ts_test_table_inc', sourceTable: 'ts_test_table', targetTable: 'th_test_table' },
{ subjectArea: 'DataCenter', mappingName: 'm_ts_test_table_inc', sourceTable: 'ts_test_table', targetTable: 'ti_test_table' },
{ subjectArea: 'DataCenter', mappingName: 'm_ods_test_table_inc', sourceTable: 'ti_test_table', targetTable: 't_test_table' }
]
getMetadatablood({ sourceId: this.searchForm.sourceId, tableId: this.searchForm.tableId }).then(response => {
if (response.success) {
const { data } = response
this.tableDataList = data
console.log('datadata', data)
this.reloadData()
}
})
},
reloadData() {
let data = { nodes: [], links: [] }
const nodes = []
const links = []
const colors = ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4']
this.tableDataList.forEach(item => {
nodes.push({
name: item.sourceTable,
name: item.TABLE_NAME,
itemStyle: {
normal: {
color: colors[Math.floor(Math.random() * colors.length)]
@@ -91,7 +149,7 @@ export default {
}
})
nodes.push({
name: item.targetTable,
name: item.REFERENCED_TABLE_NAME,
itemStyle: {
normal: {
color: colors[Math.floor(Math.random() * colors.length)]
@@ -99,10 +157,10 @@ export default {
}
})
links.push({
source: item.sourceTable,
target: item.targetTable,
value: item.mappingName.length,
mapping: item.mappingName
source: item.TABLE_NAME,
target: item.REFERENCED_TABLE_NAME,
value: item.CONSTRAINT_NAME.length,
mapping: item.CONSTRAINT_NAME
})
})
// nodes数组去重

3
src/views/metadata/datamap/index.vue
View File

@@ -131,6 +131,8 @@ export default {
listDataSource().then(response => {
if (response.success) {
this.sourceOptions = response.data
this.searchForm.sourceId = this.sourceOptions[0].id
this.getDataTableList(this.sourceOptions[0].id)
}
})
},
@@ -140,6 +142,7 @@ export default {
listDataTable(data).then(response => {
if (response.success) {
this.tableOptions = response.data
this.searchForm.tableId = this.tableOptions.id
}
})
},

49
src/views/metadata/datasearch/index.vue
View File

@@ -2,66 +2,19 @@
<div class="app-container">
<el-card class="box-card" shadow="always">
<div class="body-wrapper">
<div v-if="searchExecuting">
<el-row>
<el-col :span="12" :offset="6">
<el-input v-model="keyword" placeholder="请输入内容">
<el-select slot="prepend" v-model="type" placeholder="请选择" style="width: 100px;" @change="typeSelectChanged">
<el-option label="数据库" value="1" />
<el-option label="数据表" value="2" />
<el-option label="数据元" value="3" />
</el-select>
<el-button slot="append" :disabled="btnEnable" icon="el-icon-search" @click="search" />
</el-input>
</el-col>
</el-row>
<el-divider />
<el-row>
<el-col :span="24">
<source-pane v-if="type === '1'" :data="dataList" />
<table-pane v-if="type === '2'" :data="dataList" />
<column-pane v-if="type === '3'" :data="dataList" />
<el-pagination
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-col>
</el-row>
</div>
<div v-else>
<div class="search-container">
<el-input v-model="keyword" placeholder="请输入内容">
<el-select slot="prepend" v-model="type" placeholder="请选择" style="width: 100px;">
<el-option label="数据库" value="1" />
<el-option label="数据表" value="2" />
<el-option label="数据元" value="3" />
</el-select>
<el-button slot="append" icon="el-icon-search" :disabled="btnEnable" @click="search" />
</el-input>
</div>
</div>
待开发~~~
</div>
</el-card>
</div>
</template>
<script>
import SourcePane from './SourcePane'
import TablePane from './TablePane'
import ColumnPane from './ColumnPane'
import { pageDataSource } from '@/api/metadata/datasource'
import { pageDataTable } from '@/api/metadata/datatable'
import { pageDataColumn } from '@/api/metadata/datacolumn'
export default {
name: 'DataSearch',
components: { SourcePane, TablePane, ColumnPane },
data() {
return {
searchExecuting: false,

10
src/views/metadata/datasource/DataSourceAdd.vue
View File

@@ -3,8 +3,10 @@
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button v-if="active == 2" v-hasPerm="['metadata:datasource:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
<el-button v-if="active == 2" v-hasPerm="['metadata:datasource:add']" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
<el-button v-if="active == 1" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
<el-button v-if="active == 2" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
<el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
</el-button-group>
</div>
<div class="body-wrapper">
@@ -12,7 +14,7 @@
<el-step title="数据源信息" />
<el-step title="连接信息" />
</el-steps>
<el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="80px">
<el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType">
<el-option
@@ -62,8 +64,6 @@
<el-button v-hasPerm="['metadata:datasource:connect']" size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
</el-form-item>
</el-form>
<el-button v-if="active == 1" style="margin-top: 12px;" @click="handleNextStep">下一步</el-button>
<el-button v-if="active == 2" style="margin-top: 12px;" @click="handleLastStep">上一步</el-button>
</div>
</el-card>
</template>

4
src/views/metadata/datasource/DataSourceEdit.vue
View File

@@ -4,7 +4,7 @@
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button v-if="active == 2" v-hasPerm="['metadata:datasource:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
<el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
</el-button-group>
</div>
<div class="body-wrapper">
@@ -12,7 +12,7 @@
<el-step title="数据源信息" />
<el-step title="连接信息" />
</el-steps>
<el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="80px">
<el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType">
<el-option

48
src/views/metadata/datasource/DataSourceList.vue
View File

@@ -102,33 +102,27 @@
</template>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-popover
placement="left"
trigger="click"
>
<el-button
v-hasPerm="['metadata:datasource:edit']"
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
>修改</el-button>
<el-button
v-hasPerm="['metadata:datasource:detail']"
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情</el-button>
<el-button
v-hasPerm="['metadata:datasource:remove']"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button slot="reference">操作</el-button>
</el-popover>
<el-button
v-hasPerm="['metadata:datasource:edit']"
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
>修改</el-button>
<el-button
v-hasPerm="['metadata:datasource:detail']"
size="mini"
type="text"
icon="el-icon-view"
@click="handleDetail(scope.row)"
>详情</el-button>
<el-button
v-hasPerm="['metadata:datasource:remove']"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>