2019-07-04 21:52:39 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="table-info-vue">
|
|
|
|
|
|
<el-card style="margin: 10px;">
|
2020-05-04 12:18:57 +08:00
|
|
|
|
<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>
|
2019-09-04 22:41:44 +08:00
|
|
|
|
<el-row class="status-info-row">
|
|
|
|
|
|
<el-col :span="24"><span class="label">数据源：</span>{{vueQueryParam.host}}</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="status-info-row">
|
|
|
|
|
|
<el-col :span="6"><span class="label">数据库：</span>{{vueQueryParam.dbName}}</el-col>
|
2020-05-04 20:15:18 +08:00
|
|
|
|
<el-col :span="6"><span class="label">数据表：</span>{{tableStatusInfo.name}}</el-col>
|
2019-09-04 22:41:44 +08:00
|
|
|
|
<el-col :span="6"><span class="label">引擎：</span>{{tableStatusInfo.engine}}</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="status-info-row">
|
|
|
|
|
|
<el-col :span="6"><span class="label">行数：</span>{{tableStatusInfo.rows||0}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">自动递增：</span>{{tableStatusInfo.avgRowLength||0}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">行格式：</span>{{tableStatusInfo.rowFormat}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">排序规则：</span>{{tableStatusInfo.collation}}</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="status-info-row">
|
|
|
|
|
|
<el-col :span="6"><span class="label">索引长度：</span>{{getBytesSize(tableStatusInfo.indexLength)}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">数据长度：</span>{{getBytesSize(tableStatusInfo.dataLength)}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">最大长度：</span>{{getBytesSize(tableStatusInfo.maxDataLength)}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">可用空间：</span>{{getBytesSize(tableStatusInfo.dataFree)}}</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="status-info-row">
|
|
|
|
|
|
<el-col :span="6"><span class="label">创建时间：</span>{{tableStatusInfo.createTime}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">修改时间：</span>{{tableStatusInfo.updateTime}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">检查时间：</span>{{tableStatusInfo.checkTime}}</el-col>
|
|
|
|
|
|
<el-col :span="6"><span class="label">创建选项：</span>{{tableStatusInfo.createOptions}}</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row class="status-info-row">
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<span class="label">表注释：</span>
|
2020-05-11 22:37:30 +08:00
|
|
|
|
<span v-if="tableInfo.inEdit == 1">
|
|
|
|
|
|
<el-input v-model="tableInfo.newDesc" placeholder="输入表注释" @keyup.enter="saveTableDescription" v-on:blur="saveTableDescription" style="width: 500px;"></el-input>
|
2019-07-04 21:52:39 +08:00
|
|
|
|
</span>
|
|
|
|
|
|
<span v-else>{{tableInfo.description || '暂无注释'}} <i class="el-icon-edit edit-table-desc" v-on:click="tableInfo.inEdit = 1"></i></span>
|
2019-09-04 22:41:44 +08:00
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
2019-07-04 21:52:39 +08:00
|
|
|
|
</el-card>
|
|
|
|
|
|
<el-card style="margin: 10px;">
|
2019-09-28 15:25:52 +08:00
|
|
|
|
<div slot="header" class="clearfix">
|
|
|
|
|
|
字段信息
|
|
|
|
|
|
<el-tooltip effect="dark" content="点击注释列可编辑字段注释" placement="top">
|
|
|
|
|
|
<i class="el-icon-info" style="color: #999;"></i>
|
|
|
|
|
|
</el-tooltip>
|
2020-05-06 21:57:36 +08:00
|
|
|
|
<span style="float: right;margin-top: -5px;">
|
|
|
|
|
|
<el-button size="small" @click="showCreateTableDdl">DDL</el-button>
|
|
|
|
|
|
</span>
|
2019-09-28 15:25:52 +08:00
|
|
|
|
</div>
|
2019-07-04 21:52:39 +08:00
|
|
|
|
<div style="padding: 10px;" v-loading="columnListLoading">
|
|
|
|
|
|
<el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
|
|
|
|
|
|
<el-table-column prop="name" label="字段名" width="200"></el-table-column>
|
|
|
|
|
|
<el-table-column label="自增" width="50">
|
|
|
|
|
|
<template slot-scope="scope">{{scope.row.isidentity ? '是' : '否'}}</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column prop="type" label="类型" width="150"></el-table-column>
|
|
|
|
|
|
<el-table-column prop="length" label="长度" width="80"></el-table-column>
|
2021-01-06 23:53:14 +08:00
|
|
|
|
<el-table-column prop="nullable" label="空值" width="80"></el-table-column>
|
2019-07-04 21:52:39 +08:00
|
|
|
|
<el-table-column label="主键" width="50">
|
|
|
|
|
|
<template slot-scope="scope">{{scope.row.ispramary ? '是' : '否'}}</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column label="注释">
|
|
|
|
|
|
<template slot-scope="scope">
|
2020-05-11 22:37:30 +08:00
|
|
|
|
<div v-if="scope.row.inEdit == 1">
|
|
|
|
|
|
<el-input v-model="scope.row.newDesc" placeholder="输入字段注释" @keyup.enter="saveColumnDescription(scope.row)" v-on:blur="saveColumnDescription(scope.row)"></el-input>
|
2019-07-04 21:52:39 +08:00
|
|
|
|
</div>
|
2020-09-07 21:06:12 +08:00
|
|
|
|
<div v-else class="description" v-on:click="descBoxClick(scope.row)">{{scope.row.description}}</div>
|
2019-07-04 21:52:39 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-card>
|
2020-05-06 21:57:36 +08:00
|
|
|
|
<!--增加数据源弹窗-->
|
2021-01-06 23:53:14 +08:00
|
|
|
|
<el-dialog :visible.sync="tableDDLInfoDialogVisible" :footer="null" width="760px">
|
|
|
|
|
|
<div slot="title">
|
|
|
|
|
|
<span style="margin-right: 15px;">DDL</span>
|
|
|
|
|
|
<el-button size="small" icon="el-icon-document-copy" v-clipboard:copy="tableDDLInfo" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制</el-button>
|
|
|
|
|
|
</div>
|
2020-05-11 22:37:30 +08:00
|
|
|
|
<div v-highlight>
|
|
|
|
|
|
<pre><code v-html="tableDDLInfo"></code></pre>
|
|
|
|
|
|
</div>
|
2020-05-06 21:57:36 +08:00
|
|
|
|
</el-dialog>
|
2019-07-04 21:52:39 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2020-05-23 12:21:23 +08:00
|
|
|
|
import datasourceApi from '../../common/api/datasource'
|
2019-07-04 21:52:39 +08:00
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
columnListLoading: false,
|
|
|
|
|
|
vueQueryParam: {},
|
2019-09-04 22:41:44 +08:00
|
|
|
|
tableStatusInfo: {},
|
2019-07-04 21:52:39 +08:00
|
|
|
|
columnList: [],
|
2020-05-04 20:15:18 +08:00
|
|
|
|
tableInfo: {},
|
2020-05-06 21:57:36 +08:00
|
|
|
|
nowExecutorId: 1,
|
|
|
|
|
|
tableDDLInfo: '',
|
|
|
|
|
|
tableDDLInfoDialogVisible: false,
|
2019-07-04 21:52:39 +08:00
|
|
|
|
};
|
|
|
|
|
|
},
|
2020-05-23 12:21:23 +08:00
|
|
|
|
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);
|
|
|
|
|
|
},
|
2019-07-04 21:52:39 +08:00
|
|
|
|
methods: {
|
|
|
|
|
|
initQueryParam(to) {
|
2020-05-04 20:15:18 +08:00
|
|
|
|
if (this.columnListLoading) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
2019-07-04 21:52:39 +08:00
|
|
|
|
this.columnListLoading = true;
|
|
|
|
|
|
this.vueQueryParam = to.query;
|
2020-05-23 12:21:23 +08:00
|
|
|
|
datasourceApi.tableColumnList(this.vueQueryParam).then(json => {
|
|
|
|
|
|
let columnList = json.data.columnList || [];
|
|
|
|
|
|
for (let i = 0; i < columnList.length; i++) {
|
2019-07-04 21:52:39 +08:00
|
|
|
|
columnList[i].inEdit = 0;
|
|
|
|
|
|
columnList[i].newDesc = columnList[i].description;
|
|
|
|
|
|
}
|
2020-05-23 12:21:23 +08:00
|
|
|
|
this.columnList = columnList;
|
|
|
|
|
|
let tableInfo = json.data.tableInfo || {};
|
2019-07-04 21:52:39 +08:00
|
|
|
|
tableInfo.inEdit = 0;
|
|
|
|
|
|
tableInfo.newDesc = tableInfo.description;
|
2020-05-23 12:21:23 +08:00
|
|
|
|
this.tableInfo = tableInfo;
|
|
|
|
|
|
let newName = {key: this.$route.fullPath, val: '表-' + tableInfo.tableName};
|
|
|
|
|
|
this.$store.commit('global/addTableName', newName);
|
|
|
|
|
|
this.columnListLoading = false;
|
2019-07-04 21:52:39 +08:00
|
|
|
|
});
|
2020-05-23 12:21:23 +08:00
|
|
|
|
datasourceApi.tableStatus(this.vueQueryParam).then(json => {
|
|
|
|
|
|
this.tableStatusInfo = json.data || {};
|
2019-09-04 22:41:44 +08:00
|
|
|
|
});
|
2019-07-04 21:52:39 +08:00
|
|
|
|
},
|
2021-01-06 23:53:14 +08:00
|
|
|
|
onCopySuccess(e) {
|
|
|
|
|
|
this.$message.success("内容已复制到剪切板！");
|
|
|
|
|
|
},
|
|
|
|
|
|
onCopyError(e) {
|
|
|
|
|
|
this.$message.error("抱歉，复制失败！");
|
|
|
|
|
|
},
|
2020-05-06 21:57:36 +08:00
|
|
|
|
showCreateTableDdl() {
|
|
|
|
|
|
this.tableDDLInfo = '';
|
|
|
|
|
|
let param = {
|
|
|
|
|
|
sourceId: this.vueQueryParam.sourceId,
|
2020-05-08 22:32:54 +08:00
|
|
|
|
dbName: this.vueQueryParam.dbName,
|
|
|
|
|
|
tableName: this.vueQueryParam.tableName,
|
2020-05-06 21:57:36 +08:00
|
|
|
|
};
|
2021-01-06 23:53:14 +08:00
|
|
|
|
let loading = this.$loading({
|
|
|
|
|
|
lock: true,
|
|
|
|
|
|
text: '加载中...',
|
|
|
|
|
|
spinner: 'el-icon-loading',
|
|
|
|
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
|
|
|
|
});
|
|
|
|
|
|
this.tableDDLInfoDialogVisible = false;
|
|
|
|
|
|
datasourceApi.queryTableDdl(param).then(res => {
|
|
|
|
|
|
loading.close();
|
|
|
|
|
|
this.tableDDLInfo = res.data || '获取失败';
|
|
|
|
|
|
setTimeout(() => this.tableDDLInfoDialogVisible = true, 0);
|
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
loading.close();
|
|
|
|
|
|
});
|
2020-05-06 21:57:36 +08:00
|
|
|
|
},
|
2019-07-04 21:52:39 +08:00
|
|
|
|
descBoxClick(row) {
|
|
|
|
|
|
// row.newDesc = row.description;
|
|
|
|
|
|
row.inEdit = 1;
|
|
|
|
|
|
},
|
2020-05-04 12:18:57 +08:00
|
|
|
|
previewTableData() {
|
|
|
|
|
|
let previewParam = {
|
|
|
|
|
|
sourceId: this.vueQueryParam.sourceId,
|
|
|
|
|
|
dbName: this.vueQueryParam.dbName,
|
|
|
|
|
|
tableName: this.vueQueryParam.tableName,
|
|
|
|
|
|
host: this.vueQueryParam.host,
|
|
|
|
|
|
dbType: this.tableStatusInfo.dbType,
|
|
|
|
|
|
};
|
|
|
|
|
|
this.$router.push({path: '/data/dataPreview', query: previewParam});
|
|
|
|
|
|
},
|
2019-09-04 22:41:44 +08:00
|
|
|
|
getBytesSize(size) {
|
|
|
|
|
|
if (!size) return "0 bytes";
|
|
|
|
|
|
var num = 1024.00;
|
|
|
|
|
|
if (size < num) return size + " bytes";
|
|
|
|
|
|
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "KB";
|
|
|
|
|
|
if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + "MB";
|
|
|
|
|
|
if (size < Math.pow(num, 4)) return (size / Math.pow(num, 3)).toFixed(2) + "GB";
|
|
|
|
|
|
return (size / Math.pow(num, 4)).toFixed(2) + "TB";
|
|
|
|
|
|
},
|
2019-07-04 21:52:39 +08:00
|
|
|
|
saveColumnDescription(row) {
|
|
|
|
|
|
if (row.inEdit == 0 || row.description == row.newDesc) {
|
|
|
|
|
|
row.inEdit = 0;
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
row.inEdit = 0;
|
|
|
|
|
|
this.vueQueryParam.columnName = row.name;
|
|
|
|
|
|
this.vueQueryParam.newDesc = row.newDesc;
|
2020-05-23 12:21:23 +08:00
|
|
|
|
datasourceApi.updateTableColumnDesc(this.vueQueryParam).then(() => {
|
2019-07-04 21:52:39 +08:00
|
|
|
|
row.description = row.newDesc;
|
2020-05-23 12:21:23 +08:00
|
|
|
|
this.$message.success("修改成功");
|
2019-07-04 21:52:39 +08:00
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
saveTableDescription() {
|
|
|
|
|
|
if (this.tableInfo.inEdit == 0 || this.tableInfo.description == this.tableInfo.newDesc) {
|
|
|
|
|
|
this.tableInfo.inEdit = 0;
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
this.tableInfo.inEdit = 0;
|
|
|
|
|
|
this.vueQueryParam.newDesc = this.tableInfo.newDesc;
|
2020-05-23 12:21:23 +08:00
|
|
|
|
datasourceApi.updateTableDesc(this.vueQueryParam).then(() => {
|
|
|
|
|
|
this.tableInfo.description = this.tableInfo.newDesc;
|
|
|
|
|
|
this.$message.success("修改成功");
|
2019-07-04 21:52:39 +08:00
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
2020-05-06 21:57:36 +08:00
|
|
|
|
.table-info-vue .el-dialog__body{padding: 0 20px 10px;}
|
2019-07-04 21:52:39 +08:00
|
|
|
|
.table-info-vue .el-form-item{margin-bottom: 5px;}
|
|
|
|
|
|
.table-info-vue .edit-table-desc{cursor: pointer; color: #409EFF;}
|
2020-09-07 21:06:12 +08:00
|
|
|
|
.table-info-vue .description{cursor: pointer;min-height: 23px;}
|
2019-07-05 22:40:40 +08:00
|
|
|
|
.table-info-vue .el-table td, .table-info-vue .el-table th{padding: 5px 0;}
|
2019-09-04 22:41:44 +08:00
|
|
|
|
.table-info-vue .status-info-row{padding: 8px 0;}
|
|
|
|
|
|
.table-info-vue .status-info-row .label{width: 80px;display: inline-block;text-align: right;color: #606266;}
|
2019-07-04 21:52:39 +08:00
|
|
|
|
</style>
|
|
|
|
|
|
|
