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

数据库表信息状态展示

Browse Source
This commit is contained in:
暮光：城中城
2019-09-04 22:41:44 +08:00
parent abc24b424f
commit c4ccaa20ca
11 changed files with 374 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
zyplayer-doc-ui/db-ui/src/common/config/apilist.js
View File

@@ -9,6 +9,7 @@ var URL = {
databaseList: '/zyplayer-doc-db/doc-db/getDatabaseList',
tableList: '/zyplayer-doc-db/doc-db/getTableList',
tableColumnList: '/zyplayer-doc-db/doc-db/getTableColumnList',
tableStatus: '/zyplayer-doc-db/doc-db/getTableStatus',
tableAndColumnBySearch: '/zyplayer-doc-db/doc-db/getTableAndColumnBySearch',
updateTableDesc: '/zyplayer-doc-db/doc-db/updateTableDesc',
updateTableColumnDesc: '/zyplayer-doc-db/doc-db/updateTableColumnDesc',

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

@@ -2,17 +2,41 @@
<div class="table-info-vue">
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">表信息</div>
<el-form label-width="100px">
<el-form-item label="数据源：">{{vueQueryParam.host}}</el-form-item>
<el-form-item label="数据库：">{{vueQueryParam.dbName}}</el-form-item>
<el-form-item label="数据表：">{{vueQueryParam.tableName}}</el-form-item>
<el-form-item label="表注释：">
<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>
<el-col :span="6"><span class="label">数据表：</span>{{vueQueryParam.tableName}}</el-col>
<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>
<span v-if="tableInfo.inEdit == 1" @keyup.enter="saveTableDescription">
<el-input v-model="tableInfo.newDesc" placeholder="输入表注释" v-on:blur="saveTableDescription" style="width: 500px;"></el-input>
</span>
<span v-else>{{tableInfo.description || '暂无注释'}} <i class="el-icon-edit edit-table-desc" v-on:click="tableInfo.inEdit = 1"></i></span>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
<el-card style="margin: 10px;">
<div slot="header" class="clearfix">字段信息</div>
@@ -53,6 +77,7 @@
return {
columnListLoading: false,
vueQueryParam: {},
tableStatusInfo: {},
columnList: [],
tableInfo: [],
};
@@ -86,11 +111,23 @@
app.tableInfo = tableInfo;
app.columnListLoading = false;
});
this.common.post(this.apilist1.tableStatus, this.vueQueryParam, function (json) {
app.tableStatusInfo = json.data || {};
});
},
descBoxClick(row) {
// row.newDesc = row.description;
row.inEdit = 1;
},
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";
},
saveColumnDescription(row) {
if (row.inEdit == 0 || row.description == row.newDesc) {
row.inEdit = 0;
@@ -124,5 +161,7 @@
.table-info-vue .edit-table-desc{cursor: pointer; color: #409EFF;}
.table-info-vue .description{cursor: pointer;}
.table-info-vue .el-table td, .table-info-vue .el-table th{padding: 5px 0;}
.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;}
</style>