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

feat: 新增了字典表的新增,删除,和字典表数据的新增,修改

master
yaoxin 2024-04-24 21:58:26 +08:00
parent 40069c97b8
commit 723edee74f
8 changed files with 402 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/api/etl/data.js 100644
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询【请填写功能名称】列表
export function listData(query) {
return request({
url: '/etl/data/list',
method: 'get',
params: query
})
}
// 查询【请填写功能名称】详细
export function getData(id) {
return request({
url: '/etl/data/' + id,
method: 'get'
})
}
// 新增【请填写功能名称】
export function addData(data) {
return request({
url: '/etl/data',
method: 'post',
data: data
})
}
// 修改【请填写功能名称】
export function updateData(data) {
return request({
url: '/etl/data',
method: 'put',
data: data
})
}
// 删除【请填写功能名称】
export function delData(id) {
return request({
url: '/etl/data/' + id,
method: 'delete'
})
}

59
src/api/etl/dictionary.js 100644
View File

@ -0,0 +1,59 @@
import request from '@/utils/request'
// 查询【请填写功能名称】列表
export function listDictionary(query) {
return request({
url: '/etl/dictionary/list',
method: 'get',
params: query
})
}
// 查询【请填写功能名称】详细
export function getDictionary(id) {
return request({
url: '/etl/dictionary/' + id,
method: 'get'
})
}
// 根据key删除字典详细
export function deleteDictionary(id) {
return request({
url: '/etl/dictionary/DeleteDictionary?id=' + id,
method: 'get'
})
}
// 新增【请填写功能名称】
export function addDictionary(data) {
return request({
url: '/etl/dictionary',
method: 'post',
data: data
})
}
// 修改【请填写功能名称】
export function updateDictionary(data) {
return request({
url: '/etl/dictionary',
method: 'put',
data: data
})
}
// 删除【请填写功能名称】
export function delDictionary(id) {
return request({
url: '/etl/dictionary/' + id,
method: 'delete'
})
}
export function getDictionaryList(id) {
return request({
url: '/etl/dictionary/GetDictionaryList?dataSourceId=' + id,
method: 'get'
})
}

7
src/api/etl/source.js
View File

@ -9,6 +9,13 @@ export function listSource(query) {
})
}
export function statisticsInfo(){
return request({
url: '/etl/source/Statistics',
method: 'get'
})
}
export function dataAssetList(data) {
return request({
url: '/etl/source/DataAssetList',

192
src/views/etl/assets/dashboard/OverallAssetStructure.vue
View File

@ -69,27 +69,132 @@
</el-table-column>
<el-table-column prop="id" label="操作" >
<template slot-scope="scope">
<el-button type="text">编辑</el-button>
<el-button type="text" @click="update(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
<el-form :model="form" label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="名称">
<el-input v-model="form.name" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注释">
<el-input v-model="form.comment" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否主键">
<el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
{{form.isPrimaryKey}}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="数据类型">
<el-input v-model="form.type" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="数据长度">
<el-input v-model="form.length" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="小数位">
<el-input v-model="form.decimalPlaces" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否为空">
<el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
{{form.isNull}}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="默认值">
<el-input v-model="form.defaultValue" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="映射字段">
<el-input v-model="form.mappingType" readonly autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否字典">
<el-switch
v-model="form.isDict"
active-value="Y"
inactive-value="N"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.isDict === 'Y'">
<el-col :span="24">
<el-form-item label="字典">
<el-select v-model="form.dictKey">
<el-option v-for="dict in dictMap" :key="dict.id" :label="dict.dictionaryName+'('+dict.dictionaryKey+')'" :value="dict.dictionaryKey"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item>
<el-table :data="dictionaryDataList" striped border>
<el-table-column property="label" label="字典标签"/>
<el-table-column property="val" label="字典值"/>
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="formStatus = false">取 消</el-button>
<el-button type="primary" @click="formStatus = false">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {assetModelList} from "@/api/etl/source";
import {getDictionaryList} from "@/api/etl/dictionary";
export default {
name: 'OverallAssetStructure',
watch:{
'title': {
handler(val) {
console.log(val)
this.getDictionaryList()
assetModelList(val).then(res => {
this.tableData = res.data
})
},
immediate: true
},
'form.dictKey':{
handler(val) {
this.dictMap.forEach(dict => {
if (dict.dictionaryKey === val){
this.dictionaryDataList = dict.dictionaryDataList
}
})
}
}
},
props: {
@ -98,75 +203,24 @@ export default {
},
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: "-",
}, ]
dictionaryDataList:[],
form:{},
formStatus: false,
tableData: [],
dictMap: {}
}
},
methods: {
getDictionaryList() {
getDictionaryList(this.title.dataSourceId).then(res => {
this.dictMap = res.data
})
},
update(row) {
this.form = row;
this.formStatus = true;
}
}
}
</script>
<style scoped lang="scss">

28
src/views/etl/assets/dashboard/OverallAssets.vue
View File

@ -12,7 +12,7 @@
<div class="card-panel-text">
数据接入
</div>
<count-to :duration="2600" :end-val="assetsCompute.dataSourceSum" :start-val="0" class="card-panel-num"/>
<count-to :duration="2600" :end-val="statisticsInfo.dataAsset" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -25,7 +25,7 @@
<div class="card-panel-text">
资产模型
</div>
<count-to :duration="3000" :end-val="assetsCompute.assetsModuleSum" :start-val="0" class="card-panel-num"/>
<count-to :duration="3000" :end-val="statisticsInfo.assetModel" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -38,7 +38,7 @@
<div class="card-panel-text">
数据模型
</div>
<count-to :duration="3200" :end-val="assetsCompute.dataModuleSum" :start-val="0" class="card-panel-num"/>
<count-to :duration="3200" :end-val="statisticsInfo.dataModel" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -47,22 +47,30 @@
<script>
import CountTo from 'vue-count-to'
import {statisticsInfo} from "@/api/etl/source";
export default {
props: {
assetsCompute: {
assetsModuleSum: 0,
dataModuleSum: 0,
dataSourceSum: 0
}
},
components: {
CountTo
},
data() {
return {
statisticsInfo: {}
}
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
},
statistics(){
statisticsInfo().then(res => {
this.statisticsInfo = res.data
})
}
},
created() {
this.statistics()
}
}
</script>

140
src/views/etl/assets/dashboard/OverallSpecificAssets.vue
View File

@ -29,6 +29,90 @@
</div>
</div>
</el-col>
<el-col :span="24">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>基础字典</span>
<el-popover
placement="top-start"
title="基础字典"
width="200"
trigger="hover"
content="这个字典是数据资产项目当中的字典内容，而不是本项目当中的字典内容。主要作用为数据清洗过程中数据字典映射作用">
<i class="el-icon-question" slot="reference"></i>
</el-popover>
<el-popover
placement="right"
width="200px"
trigger="click">
<el-form :inline="true" :model="dictInfo" class="demo-form-inline">
<el-form-item label="字典名称:">
<el-input v-model="dictInfo.dictionaryName" style="width: 150px"></el-input>
</el-form-item>
<el-form-item label="字典Key:">
<el-input v-model="dictInfo.dictionaryKey" style="width: 150px"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="addDict">确定</el-button>
</el-form-item>
</el-form>
<el-button style="float: right; padding: 3px 0" type="text" slot="reference">新增字典</el-button>
</el-popover>
</div>
<el-row :gutter="20">
<el-col v-for="dict in dictMap" :md="8" :sm="24" :xs="12">
<el-card class="box-card" style="height: 300px">
<div slot="header" class="clearfix">
<span>{{dict.dictionaryName+'('+dict.dictionaryKey+')'}}</span>
<el-button style="float: right; padding: 3px 0"
type="text"
@click="deleteDictionary(dict.id)"
>删除</el-button>
<el-button style="float: right; padding: 3px 0;margin-right: 8px"
type="text"
@click="dict.dictionaryDataList.push({ label: null, val: null, edit: true })"
>新增</el-button>
</div>
<el-table :data="dict.dictionaryDataList" style="width: 100%" height="280px">
<el-table-column prop="label" label="标签">
<template slot-scope="scope">
<span v-if="!scope.row.edit">{{scope.row.label}}</span>
<el-input v-if="scope.row.edit" v-model="scope.row.label" size="mini"></el-input>
</template>
</el-table-column>
<el-table-column prop="val" label="值">
<template slot-scope="scope">
<span v-if="!scope.row.edit">{{scope.row.val}}</span>
<el-input v-if="scope.row.edit" v-model="scope.row.val" size="mini"></el-input>
</template>
</el-table-column>
<el-table-column prop="val" label="操作">
<template slot-scope="scope">
<el-button
v-if="!scope.row.edit"
size="mini"
type="text"
icon="el-icon-edit"
@click="scope.row.edit = true"
>修改</el-button>
<el-button
v-if="scope.row.edit"
@click="editConfirm(dict,scope.row)"
size="mini"
type="text"
icon="el-icon-finished"
>确定</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="24">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane v-for="tableAsset in title.tableList" :label="tableAsset.tableName+'('+tableAsset.tableComment+')'" :name="tableAsset.tableName">
@ -43,12 +127,14 @@
<script>
import CountTo from 'vue-count-to'
import OverallAssetStructure from './OverallAssetStructure.vue'
import {addDictionary, deleteDictionary, getDictionaryList} from "@/api/etl/dictionary";
import {addData, updateData} from "@/api/etl/data";
export default {
watch:{
'title':{
handler(val){
console.log(val)
this.getDictionaryList()
this.activeName = val.tableList[0].tableName
this.assetModel = 0
this.dataModel = 0
@ -60,6 +146,7 @@ export default {
this.assetModel = parseInt(this.assetModel) + parseInt(table.fields);
}
})
}
}
},
@ -68,6 +155,12 @@ export default {
},
data() {
return {
dictInfo: {
dictionaryName: null,
dictionaryKey: null,
dataSourceId: null
},
dictMap: {},
activeName: '',
assetModel: 0,
dataModel: 0
@ -78,6 +171,51 @@ export default {
CountTo
},
methods: {
deleteDictionary(id) {
deleteDictionary(id);
this.getDictionaryList()
},
getDictionaryList() {
getDictionaryList(this.title.id).then(res => {
this.dictMap = res.data
console.log(this.dictMap)
})
},
editConfirm(dict,row){
if (!row.label || !row.val) {
this.$message.error('字典标签或字典值，不可为空');
return;
}
console.log(row)
if (row.id) {
console.log('修改')
updateData(row)
}else{
console.log('添加')
row.dictionaryId=dict.id
addData(row)
}
row.edit = false;
this.getDictionaryList()
},
addDict(){
if (!this.dictInfo.dictionaryName){
this.$message.error('字典名称，不可为空');
return;
}
if (!this.dictInfo.dictionaryKey){
this.$message.error('字典Key，不可为空');
return;
}
this.dictInfo.dataSourceId = this.title.id
addDictionary(this.dictInfo)
this.dictInfo = {
dictionaryName: null,
dictionaryKey: null,
dataSourceId: null
}
this.getDictionaryList()
},
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}

8
src/views/etl/assets/index.vue
View File

@ -10,7 +10,7 @@
<el-main>
<el-tabs v-model="activeName">
<el-tab-pane label="资产结构" name="structure">
<OverallAssets v-if="showAssets == null" :assets-compute="assetsCompute"/>
<OverallAssets v-if="showAssets == null"/>
<overall-specific-assets v-if="showAssets === 'dataSource'" :title="title"/>
<overall-asset-structure v-if="showAssets === 'dataTable'" :title="title"/>
</el-tab-pane>
@ -63,7 +63,7 @@
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {assetModelList, assetsList, dataAssetList, listSource, structureList} from "@/api/etl/source";
import {assetModelList, assetsList, dataAssetList, listSource, statisticsInfo, structureList} from "@/api/etl/source";
import OverallAssets from "@/views/etl/assets/dashboard/OverallAssets.vue";
import OverallSpecificAssets from "@/views/etl/assets/dashboard/OverallSpecificAssets.vue";
import OverallAssetStructure from "@/views/etl/assets/dashboard/OverallAssetStructure.vue";
@ -103,7 +103,8 @@ export default {
sourceData:{},
source: {
sql: ''
}
},
statisticsInfo:{}
};
},
//计算属性 类似于data概念",
@ -140,7 +141,6 @@ export default {
getList() {
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+')'

26
src/views/etl/source/index.vue
View File

@ -34,17 +34,6 @@
v-hasPermi="['system:source:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:source:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
@ -79,6 +68,7 @@
<el-table-column label="连接用户名" align="center" prop="username" />
<el-table-column label="连接密码" align="center" prop="password" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="模式名称" align="center" prop="modeName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -155,7 +145,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="PostGre" value="PostGre">PostGre</el-option>
<el-option label="PostGreSql" value="PostGreSql">PostGreSql</el-option>
</el-select>
</el-form-item>
</el-col>
@ -165,7 +155,7 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="form.type == 'PostGre'">
<el-row v-show="form.type === 'PostGreSql'">
<el-col :md="12" :sm="24">
<el-form-item label="模式名称" prop="modeName">
<el-input v-model="form.modeName" placeholder="模式名称" />
@ -493,10 +483,9 @@ export default {
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getSource(id).then(response => {
this.form = response.data;
getSource(row.id).then(res => {
console.log(res)
this.form = res.data;
console.log(this.form)
this.dataSourceParamList = [];
this.form.connectionParam.split("&").forEach(param => {
@ -508,7 +497,8 @@ export default {
})
this.open = true;
this.title = "修改数据接入";
});
})
},
/** 提交按钮 */
submitForm() {