数据库问文档重构

zyplayer-doc-ui/db-ui/src/views/table/Database.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <el-card style="margin: 10px;" shadow="never">
+            <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>
+            <el-form :inline="true" label-width="100px">
+                <el-form-item label="关键字：">
+                    <el-input v-model="keyword" placeholder="输入字段名或注释搜索相关的表或字段信息" style="width: 500px;"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button class="search-submit" type="primary" icon="el-icon-search" @click="searchSubmit">模糊搜索</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <div style="padding: 10px;" v-loading="columnListLoading">
+            <el-table :data="columnList" stripe border style="width: 100%; margin-bottom: 5px;">
+                <el-table-column prop="tableName" label="表名" width="200"></el-table-column>
+                <el-table-column prop="columnName" label="字段名" width="200"></el-table-column>
+                <el-table-column prop="description" label="注释"></el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+    import global from '../../common/config/global'
+    var app;
+
+    export default {
+        data() {
+            return {
+                columnListLoading: false,
+                vueQueryParam: {},
+                columnList: [],
+                tableInfo: [],
+                keyword: '',
+            };
+        },
+        beforeRouteUpdate(to, from, next) {
+            this.initQueryParam(to);
+            next();
+        },
+        mounted: function () {
+            app = this;
+            this.initQueryParam(this.$route);
+            // 延迟设置展开的目录，edit比app先初始化
+            setTimeout(function () {
+                global.vue.$app.initLoadDataList(app.vueQueryParam.host, app.vueQueryParam.dbName);
+            }, 500);
+        },
+        methods: {
+            initQueryParam(to) {
+                this.vueQueryParam = to.query;
+            },
+            searchSubmit() {
+                this.columnListLoading = true;
+                this.vueQueryParam.searchText = this.keyword;
+                this.common.post(this.apilist1.tableAndColumnBySearch, this.vueQueryParam, function (json) {
+                    app.columnList = json.data || [];
+                    app.columnListLoading = false;
+                });
+            },
+        }
+    }
+
+</script>
+<style>
+    .search-form-box{padding: 10px;}
+    .page-info-box{text-align: right;margin: 20px 0 50px 0;}
+</style>
+