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

表数据导出优化，增加表关系图功能

Browse Source
This commit is contained in:
暮光：城中城
2021-06-08 23:04:15 +08:00
parent dcbb2b4ac8
commit 1d5e0e2bf1
42 changed files with 977 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
zyplayer-doc-ui/db-ui/src/views/data/Export.vue
View File

@@ -28,11 +28,11 @@
<span slot="title">库表导出选项</span>
<el-form label-width="100px">
<el-form-item label="导出类型：">
<el-select v-model="exportType" @change="exportTypeChange" filterable placeholder="请选择导出类型" style="width: 430px;">
<el-option label="表结构文档" :value="1"></el-option>
<el-option label="建表语句SQL" :value="2"></el-option>
<el-option label="表数据" :value="3"></el-option>
</el-select>
<el-radio-group v-model="exportType" @change="exportTypeChange">
<el-radio :label="3">表数据</el-radio>
<el-radio :label="1">表结构文档</el-radio>
<el-radio :label="2">建表语句SQL</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="导出格式：" v-if="exportType == 1">
<el-select v-model="exportFormat" filterable placeholder="请选择导出格式" style="width: 430px;">
@@ -41,22 +41,25 @@
<el-option label="Word格式" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="导出格式：" v-else-if="exportType == 2">
<el-select v-model="exportFormat" filterable placeholder="请选择导出格式" style="width: 430px;">
<el-option label="SQL格式" :value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item label="导出格式：" v-else-if="exportType == 3">
<el-select v-model="downloadType" filterable placeholder="请选择导出类型" style="width: 430px;">
<el-option label="SQL Inserts" value="insert"></el-option>
<el-option label="SQL Updates" value="update"></el-option>
<el-option label="JSON" value="json"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据表：" v-if="exportType == 3 && downloadType === 'insert'">
<el-checkbox :true-label="1" :false-label="0" v-model="dropTableFlag" @change="dropTableFlagChange">删除表{{dropTableFlag==1?'!!':''}}</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="createTableFlag" @change="createTableFlagChange">创建表</el-checkbox>
</el-form-item>
<template v-else-if="exportType == 3">
<el-form-item label="导出格式：">
<el-select v-model="downloadType" filterable placeholder="请选择导出类型" style="width: 430px;">
<el-option label="SQL Inserts" value="insert"></el-option>
<el-option label="SQL Updates" value="update"></el-option>
<el-option label="JSON" value="json"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据表：" v-if="downloadType === 'insert'">
<el-checkbox :true-label="1" :false-label="0" v-model="dropTableFlag" @change="dropTableFlagChange">删除表{{dropTableFlag==1?'!!':''}}</el-checkbox>
<el-checkbox :true-label="1" :false-label="0" v-model="createTableFlag" @change="createTableFlagChange">创建表</el-checkbox>
</el-form-item>
<el-form-item label="导出方式：">
<el-radio-group v-model="downloadFileType">
<el-radio :label="1">单个文件</el-radio>
<el-radio :label="2">zip压缩文件</el-radio>
</el-radio-group>
</el-form-item>
</template>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="exportTypeChoiceVisible = false">取 消</el-button>
@@ -78,8 +81,9 @@
choiceDatasourceId: "",
choiceDatabase: "",
choiceTable: "",
exportType: 1,
exportType: 3,
exportFormat: 1,
downloadFileType: 1,
exportTypeChoiceVisible: false,
// 页面展示相关
nowDatasourceShow: {},
@@ -136,6 +140,7 @@
downloadType: this.downloadType,
dropTableFlag: this.dropTableFlag,
createTableFlag: this.createTableFlag,
downloadFileType: this.downloadFileType,
tableNames: tableNames,
};
if (this.exportType == 3) {

27
zyplayer-doc-ui/db-ui/src/views/table/Info.vue
View File

@@ -4,12 +4,12 @@
<el-tab-pane label="表字段" name="columns">
<div v-loading="columnListLoading">
<div style="text-align: right; margin-bottom: 10px;">
<el-button size="small" @click="showCreateTableDdl" style="margin-left: 10px;" icon="el-icon-magic-stick">DDL</el-button>
<el-button size="small" plain type="primary" @click="showCreateTableDdl" style="margin-left: 10px;" icon="el-icon-magic-stick">DDL</el-button>
</div>
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
<el-table-column prop="name" label="字段名" width="220"></el-table-column>
<el-table-column label="自增" width="50">
<template slot-scope="scope">{{scope.row.isidentity ? '是' : '否'}}</template>
<template slot-scope="scope">{{scope.row.selfIncrement ? '是' : '否'}}</template>
</el-table-column>
<el-table-column prop="type" label="类型" width="110"></el-table-column>
<el-table-column prop="length" label="长度" width="110"></el-table-column>
@@ -20,7 +20,7 @@
<template slot-scope="scope">{{scope.row.nullable==1 ? '允许' : '不允许'}}</template>
</el-table-column>
<el-table-column label="主键" width="50">
<template slot-scope="scope">{{scope.row.ispramary==1 ? '是' : '否'}}</template>
<template slot-scope="scope">{{scope.row.primaryKey==1 ? '是' : '否'}}</template>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
@@ -83,25 +83,6 @@
<data-preview ref="dataPreview"></data-preview>
</el-tab-pane>
</el-tabs>
<!-- <el-card style="margin: 10px;">-->
<!-- <div slot="header" class="clearfix">-->
<!-- 表信息-->
<!-- <span style="float: right;margin-top: -5px;">-->
<!-- <el-button class="search-submit" size="small" type="primary" icon="el-icon-search" @click="previewTableData">查看表数据</el-button>-->
<!-- </span>-->
<!-- </div>-->
<!-- </el-card>-->
<!-- <el-card style="margin: 10px;">-->
<!-- <div slot="header" class="clearfix">-->
<!-- 字段信息-->
<!-- <el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">-->
<!-- <i class="el-icon-info" style="color: #999;"></i>-->
<!-- </el-tooltip>-->
<!-- <span style="float: right;margin-top: -5px;">-->
<!-- <el-button size="small" @click="showCreateTableDdl">DDL</el-button>-->
<!-- </span>-->
<!-- </div>-->
<!-- </el-card>-->
<!--增加数据源弹窗-->
<el-dialog :visible.sync="tableDDLInfoDialogVisible" :footer="null" width="760px">
<div slot="title">
@@ -216,7 +197,7 @@
setTimeout(() => this.tabActiveName = 'columns', 0);
return;
}
let primaryColumn = this.columnList.find(item => item.ispramary == 1) || this.columnList[0];
let primaryColumn = this.columnList.find(item => item.primaryKey == 1) || this.columnList[0];
this.$refs.dataPreview.init({
sourceId: this.vueQueryParam.sourceId,
dbName: this.vueQueryParam.dbName,

120
zyplayer-doc-ui/db-ui/src/views/table/TableRelation.vue
View File

@@ -1,14 +1,25 @@
<template>
<div class="data-executor-vue">
<div id="relationChart" style="width: 100%; height: max(calc(100vh - 160px), 600px);"></div>
<div style="width: max(100%, 1000px); height: calc(100vh - 160px);overflow: auto;">
<div id="relationChart" style="width: 1500px; height: 1000px;"></div>
</div>
<!--选择导出为update的条件列弹窗-->
<el-dialog :visible.sync="choiceRelationColumnVisible" width="500px" title="选择关联的表字段">
<div>
更新条件列：
<el-dialog :visible.sync="choiceRelationColumnVisible" width="750px" :title="'选择关联的表字段 '+editNodeInfo.tableName+'.'+editNodeInfo.columnName">
<div v-for="item in editRelationArr" style="margin-top: 10px;">
<el-select v-model="item.dbName" @change="dbNameChangeEvents(item)" filterable placeholder="请选择数据库" style="margin-right: 10px;width: 200px;">
<el-option v-for="db in databaseList" :key="db.dbName" :label="db.dbName" :value="db.dbName"></el-option>
</el-select>
<el-select v-model="item.tableName" @change="tableNameChangeEvents(item)" filterable placeholder="请选择数据表" style="margin-right: 10px;width: 200px;">
<el-option v-for="table in dbTableList[item.dbName]" :key="table.tableName" :label="table.tableName" :value="table.tableName"></el-option>
</el-select>
<el-select v-model="item.columnName" filterable placeholder="请选择表字段" style="margin-right: 10px;width: 200px;">
<el-option v-for="columns in dbTableColumnList[item.dbName+'.'+item.tableName]" :key="columns.name" :label="columns.name" :value="columns.name"></el-option>
</el-select>
<el-button icon="el-icon-delete" circle @click="delTableColumnRelation(item)"></el-button>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="choiceRelationColumnVisible = false">取 消</el-button>
<el-button type="primary" @click="">确 定</el-button>
<el-button @click="addTableColumnRelation">添加关联</el-button>
<el-button type="primary" @click="doUpdateTableColumnRelation">确 定</el-button>
</span>
</el-dialog>
</div>
@@ -26,6 +37,11 @@
relationChart: {},
relationChartData: {},
relationChartOption: {},
editNodeInfo: {},
editRelationArr: [],
databaseList: [],
dbTableList: {},
dbTableColumnList: {},
// 选择复制
choiceRelationColumnVisible: false,
columnListLoading: false,
@@ -66,9 +82,9 @@
},
label: {
backgroundColor: '#fff',
position: 'left',
position: 'right',
verticalAlign: 'middle',
align: 'right'
align: 'left'
},
leaves: {
label: {
@@ -89,41 +105,83 @@
// 使用刚指定的配置项和数据显示图表。
this.relationChart.setOption(this.relationChartOption);
this.relationChart.on('click', (params) => {
console.log(params);
var dataIndex = params.data.index;
var description = params.data.description;
if (!!params.data.columnName) {
if (params.data.nodeType == 1) {
this.editNodeInfo = params.data;
let children = this.editNodeInfo.children || [];
this.editRelationArr = [];
if (children.length <= 0) {
this.editRelationArr.push({dbName: this.pageParam.dbName, tableName: '', columnName: ''});
} else {
children.forEach(item => {
this.editRelationArr.push({dbName: item.dbName, tableName: item.tableName, columnName: item.columnName});
});
}
let dbNameArr = [], tableNameArr = [];
this.editRelationArr.forEach(item => {
if (dbNameArr.indexOf(item.dbName) < 0) {
dbNameArr.push(item.dbName);
this.dbNameChangeEvents(item);
}
if (tableNameArr.indexOf(item.dbName + '.' + item.tableName) < 0) {
tableNameArr.push(item.dbName + '.' + item.tableName);
this.tableNameChangeEvents(item);
}
});
this.choiceRelationColumnVisible = true;
} else {
params.data.collapsed = true;
}
});
this.relationChart.on('contextmenu', function (params) {
console.log(params);
});
datasourceApi.tableColumnList(this.pageParam).then(json => {
this.columnList = json.data.columnList || [];
this.tableInfo = json.data.tableInfo || {};
this.doGetTableColumnRelation();
datasourceApi.databaseList({sourceId: this.pageParam.sourceId}).then(json => {
this.databaseList = json.data || [];
});
},
doGetTableColumnRelation() {
// 先清空，不然直接重新渲染会有连接线清除不掉
this.relationChart.clear();
datasourceApi.getTableColumnRelation(this.pageParam).then(json => {
this.relationChartData = json.data || {};
this.relationChartOption.series[0].data = [json.data || {}];
this.columnListLoading = false;
this.changeTableRelationOption(this.relationChartData, this.columnList);
this.relationChart.setOption(this.relationChartOption);
setTimeout(() => this.relationChart.resize(), 0);
});
},
changeTableRelationOption(data, columnList) {
let childrenArr = [];
for (let i = 0; i < columnList.length; i++) {
let item = columnList[i];
childrenArr.push({
name: item.name,
tableName: item.tableName,
columnName: item.name,
children: [],
collapsed: false,
});
delTableColumnRelation(item) {
this.editRelationArr = this.editRelationArr.filter(re => re !== item);
},
addTableColumnRelation() {
this.editRelationArr.push({dbName: this.pageParam.dbName, tableName: '', columnName: ''});
},
doUpdateTableColumnRelation() {
let param = {
dbName: this.editNodeInfo.dbName,
tableName: this.editNodeInfo.tableName,
columnName: this.editNodeInfo.columnName,
sourceId: this.pageParam.sourceId,
relation: JSON.stringify(this.editRelationArr)
}
data.children = childrenArr;
}
datasourceApi.updateTableColumnRelation(param).then(json => {
this.choiceRelationColumnVisible = false;
this.doGetTableColumnRelation();
});
},
dbNameChangeEvents(item) {
datasourceApi.tableList({sourceId: this.pageParam.sourceId, dbName: item.dbName}).then(json => {
this.$set(this.dbTableList, item.dbName, json.data || []);
});
},
tableNameChangeEvents(item) {
datasourceApi.tableColumnList({
sourceId: this.pageParam.sourceId,
dbName: item.dbName,
tableName: item.tableName
}).then(json => {
this.$set(this.dbTableColumnList, item.dbName + '.' + item.tableName, json.data.columnList || []);
});
},
}
}
</script>