77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<div class="table-database-vue">
|
|||
|
|
<el-tabs v-model="tabActiveName" @tab-click="tabActiveNameChange">
|
|||
|
|
<el-tab-pane label="数据表" name="columns">
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane label="数据表" name="columns">
|
|||
|
|
</el-tab-pane>
|
|||
|
|
</el-tabs>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import datasourceApi from '../../common/api/datasource'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
columnListLoading: false,
|
|||
|
|
vueQueryParam: {},
|
|||
|
|
columnList: [],
|
|||
|
|
tableInfo: [],
|
|||
|
|
keyword: '',
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted: function () {
|
|||
|
|
// 延迟设置展开的目录，edit比app先初始化
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.$emit('initLoadDataList', {
|
|||
|
|
sourceId: this.vueQueryParam.sourceId,
|
|||
|
|
host: this.vueQueryParam.host,
|
|||
|
|
dbName: this.vueQueryParam.dbName
|
|||
|
|
});
|
|||
|
|
}, 500);
|
|||
|
|
},
|
|||
|
|
activated: function () {
|
|||
|
|
this.initQueryParam(this.$route);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initQueryParam(to) {
|
|||
|
|
this.vueQueryParam = to.query;
|
|||
|
|
let newName = {key: this.$route.fullPath, val: this.vueQueryParam.dbName};
|
|||
|
|
this.$store.commit('global/addTableName', newName);
|
|||
|
|
},
|
|||
|
|
tabActiveNameChange() {
|
|||
|
|
if (this.tabActiveName === 'relationChart') {
|
|||
|
|
this.$refs.relationChart.init({
|
|||
|
|
sourceId: this.vueQueryParam.sourceId,
|
|||
|
|
dbName: this.vueQueryParam.dbName,
|
|||
|
|
tableName: this.vueQueryParam.tableName,
|
|||
|
|
});
|
|||
|
|
} else if (this.tabActiveName === 'tableData') {
|
|||
|
|
if (!this.columnList || this.columnList.length <= 0) {
|
|||
|
|
this.$message.error("字段信息尚未加载成功，请稍候...");
|
|||
|
|
setTimeout(() => this.tabActiveName = 'columns', 0);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
let primaryColumn = this.columnList.find(item => item.primaryKey == 1) || this.columnList[0];
|
|||
|
|
this.$refs.dataPreview.init({
|
|||
|
|
sourceId: this.vueQueryParam.sourceId,
|
|||
|
|
dbName: this.vueQueryParam.dbName,
|
|||
|
|
tableName: this.vueQueryParam.tableName,
|
|||
|
|
host: this.vueQueryParam.host,
|
|||
|
|
dbType: this.tableStatusInfo.dbType,
|
|||
|
|
// 默认排序字段，先随便取一个，impala等数据库必须排序后才能分页查
|
|||
|
|
orderColumn: primaryColumn.name,
|
|||
|
|
}, this.columnList);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style>
|
|||
|
|
.table-database-vue .el-table td, .table-database-vue .el-table th{padding: 5px 0;}
|
|||
|
|
.table-database-vue .label{width: 140px; text-align: right;}
|
|||
|
|
</style>
|
|||
|
|
|