数据库问文档重构

zyplayer-doc-ui/db-ui/src/views/common/NoAuth.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>没有权限访问该模块</div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {};
+        },
+        mounted: function () {
+        },
+        methods: {}
+    }
+</script>
+<style>
+
+</style>
+

zyplayer-doc-ui/db-ui/src/views/home/Home.vue

@@ -0,0 +1,111 @@
+<template>
+    <div style="padding: 10px;">
+        <div style="max-width: 1200px;margin: 20px auto;">
+            <div style="text-align: center;">欢迎使用ヾ(๑╹◡╹)ﾉ"</div>
+            <el-card style="margin: 10px;">
+                <div slot="header" class="clearfix">
+                    <span>数据源管理</span>
+                    <el-button style="float: right;" v-on:click="addDatasource" type="primary" icon="el-icon-circle-plus-outline" size="small">新增</el-button>
+                </div>
+                <el-table :data="datasourceList" stripe border style="width: 100%; margin-bottom: 5px;">
+                    <el-table-column prop="driverClassName" label="驱动类" width="200"></el-table-column>
+                    <el-table-column prop="sourceUrl" label="数据源URL"></el-table-column>
+                    <el-table-column prop="sourceName" label="账号"></el-table-column>
+                    <el-table-column prop="sourcePassword" label="密码"></el-table-column>
+                    <el-table-column label="操作" width="150">
+                        <template slot-scope="scope">
+                            <el-button v-on:click="editDatasource(scope.row)" type="primary" size="small">修改</el-button>
+                            <el-button v-on:click="deleteDatasource(scope.row)" type="danger" size="small">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-card>
+        </div>
+        <!--增加数据源弹窗-->
+        <el-dialog :inline="true" :title="newDatasource.id>0?'编辑数据源':'新增数据源'" :visible.sync="datasourceDialogVisible" width="600px">
+            <el-form label-width="120px">
+                <el-form-item label="驱动类：">
+                    <el-select v-model="newDatasource.driverClassName" placeholder="驱动类" style="width: 100%">
+                        <el-option label="com.mysql.jdbc.Driver" value="com.mysql.jdbc.Driver"></el-option>
+                        <el-option label="net.sourceforge.jtds.jdbc.Driver" value="net.sourceforge.jtds.jdbc.Driver"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="数据源URL：">
+                    <el-input v-model="newDatasource.sourceUrl" placeholder="数据源URL"></el-input>
+                </el-form-item>
+                <el-form-item label="账号：">
+                    <el-input v-model="newDatasource.sourceName" placeholder="账号"></el-input>
+                </el-form-item>
+                <el-form-item label="密码：">
+                    <el-input v-model="newDatasource.sourcePassword" placeholder="密码"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" style="text-align: center;">
+                <el-button v-on:click="saveDatasource" type="primary">保存</el-button>
+                <el-button v-on:click="datasourceDialogVisible=false" plain>取消</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import toast from '../../common/lib/common/toast'
+    import global from '../../common/config/global'
+
+    var app;
+
+    export default {
+        data() {
+            return {
+                datasourceDialogVisible: false,
+                datasourceList: [],
+                newDatasource: {},
+            };
+        },
+        mounted: function () {
+            app = this;
+            this.getDatasourceList();
+        },
+        methods: {
+            addDatasource() {
+                this.datasourceDialogVisible = true;
+            },
+            editDatasource(row) {
+                this.newDatasource = row;
+                this.datasourceDialogVisible = true;
+            },
+            deleteDatasource(row) {
+                this.$confirm('确定要删除此数据源吗？', '提示', {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning'
+                }).then(() => {
+                    var datasourceList = [];
+                    for (var i = 0; i < this.datasourceList.length; i++) {
+                        if (this.datasourceList[i].id != row.id) {
+                            datasourceList.push(this.datasourceList[i]);
+                        }
+                    }
+                    this.datasourceList = datasourceList;
+                    this.$message.success("删除成功！");
+                }).catch(()=>{});
+            },
+            saveDatasource() {
+                this.datasourceDialogVisible = false;
+                this.common.post(this.apilist1.manageUpdateDatasource, this.newDatasource, function (json) {
+                    app.$message.success("保存成功！");
+                    app.getDatasourceList();
+                });
+            },
+            getDatasourceList() {
+                this.common.post(this.apilist1.manageDatasourceList, {}, function (json) {
+                    app.datasourceList = json.data || [];
+                });
+            },
+        }
+    }
+</script>
+<style>
+
+</style>
+

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>
+

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

@@ -0,0 +1,127 @@
+<template>
+    <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="表注释：">
+                    <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-card>
+        <el-card style="margin: 10px;">
+            <div slot="header" class="clearfix">字段信息</div>
+            <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>
+                    <el-table-column label="NULL" width="60">
+                        <template slot-scope="scope">{{scope.row.nullable ? '允许' : '不允许'}}</template>
+                    </el-table-column>
+                    <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">
+                            <div v-if="scope.row.inEdit == 1" @keyup.enter="saveColumnDescription(scope.row)">
+                                <el-input v-model="scope.row.newDesc" placeholder="输入字段注释" v-on:blur="saveColumnDescription(scope.row)"></el-input>
+                            </div>
+                            <div v-else class="description" v-on:click="descBoxClick(scope.row)">{{scope.row.description}}</div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+    import global from '../../common/config/global'
+    var app;
+
+    export default {
+        data() {
+            return {
+                columnListLoading: false,
+                vueQueryParam: {},
+                columnList: [],
+                tableInfo: [],
+            };
+        },
+        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.columnListLoading = true;
+                this.vueQueryParam = to.query;
+                this.common.post(this.apilist1.tableColumnList, this.vueQueryParam, function (json) {
+                    var columnList = json.data.columnList || [];
+                    for (var i = 0; i < columnList.length; i++) {
+                        columnList[i].inEdit = 0;
+                        columnList[i].newDesc = columnList[i].description;
+                    }
+                    app.columnList = columnList;
+                    var tableInfo = json.data.tableInfo || {};
+                    tableInfo.inEdit = 0;
+                    tableInfo.newDesc = tableInfo.description;
+                    app.tableInfo = tableInfo;
+                    app.columnListLoading = false;
+                });
+            },
+            descBoxClick(row) {
+                // row.newDesc = row.description;
+                row.inEdit = 1;
+            },
+            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;
+                this.common.post(this.apilist1.updateTableColumnDesc, this.vueQueryParam, function (json) {
+                    row.description = row.newDesc;
+                    app.$message.success("修改成功");
+                });
+            },
+            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;
+                this.common.post(this.apilist1.updateTableDesc, this.vueQueryParam, function (json) {
+                    app.tableInfo.description = app.tableInfo.newDesc;
+                    app.$message.success("修改成功");
+                });
+            },
+        }
+    }
+</script>
+<style>
+    .table-info-vue .el-form-item{margin-bottom: 5px;}
+    .table-info-vue .edit-table-desc{cursor: pointer; color: #409EFF;}
+    .table-info-vue .description{cursor: pointer;}
+</style>
+

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

@@ -0,0 +1,4 @@
+<template>
+    <router-view></router-view>
+</template>
+

zyplayer-doc-ui/db-ui/src/views/user/Login.vue

@@ -0,0 +1,88 @@
+<template>
+    <div style="padding-top: 50px;" @keyup.enter="loginSubmit">
+        <el-form :model="loginParam" :rules="loginRules" ref="loginParam" label-position="left" label-width="0px"
+                 class="demo-ruleForm login-container">
+            <h3 class="title">系统登录</h3>
+            <el-form-item prop="username">
+                <el-input type="text" v-model="loginParam.username" auto-complete="off" placeholder="账号"></el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+                <el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码"></el-input>
+            </el-form-item>
+            <el-form-item style="width:100%;">
+                <el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录
+                </el-button>
+                <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                logining: false,
+                redirect: '',
+                loginParam: {
+                    username: '',
+                    password: ''
+                },
+                loginRules: {
+                    username: [
+                        {required: true, message: '请输入账号', trigger: 'blur'},
+                    ],
+                    password: [
+                        {required: true, message: '请输入密码', trigger: 'blur'},
+                    ]
+                },
+                checked: true
+            };
+        },
+        mounted: function () {
+            this.redirect = this.$route.query.redirect;
+        },
+        methods: {
+            loginSubmit() {
+                var that = this;
+                this.$refs.loginParam.validate((valid) => {
+                    if (!valid) return;
+                    that.common.post(that.apilist1.userLogin, that.loginParam, function (json) {
+                        if(!!that.redirect) {
+                            location.href = decodeURIComponent(that.redirect);
+                        } else {
+                            that.$router.back();
+                        }
+                    });
+                });
+            }
+        }
+    }
+
+</script>
+<style>
+    .login-container {
+        -webkit-border-radius: 5px;
+        border-radius: 5px;
+        -moz-border-radius: 5px;
+        background-clip: padding-box;
+        margin: 0 auto;
+        width: 350px;
+        padding: 35px 35px 15px 35px;
+        background: #fff;
+        border: 1px solid #eaeaea;
+        box-shadow: 0 0 25px #cac6c6;
+    }
+
+    .title {
+        margin: 0px auto 40px auto;
+        text-align: center;
+        color: #505458;
+    }
+
+    .remember {
+        margin: 0px 0px 35px 0px;
+    }
+
+</style>
+

zyplayer-doc-ui/db-ui/src/views/user/MyInfo.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="my-info-vue">
+        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 20px 10px;">
+            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+            <el-breadcrumb-item>我的信息</el-breadcrumb-item>
+        </el-breadcrumb>
+        <div style="margin: 0 auto;max-width: 1000px;">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix">我的信息</div>
+                <el-form class="search-form-box" label-width="100px">
+                    <el-form-item label="账号：">{{userInfo.userNo}}</el-form-item>
+                    <el-form-item label="用户名：">{{userInfo.userName}}</el-form-item>
+                    <el-form-item label="手机号：">{{userInfo.phone}}</el-form-item>
+                    <el-form-item label="邮箱：">{{userInfo.email}}</el-form-item>
+                    <el-form-item label="状态：">{{userInfo.delFlag==0?'正常':'停用'}}</el-form-item>
+                    <el-form-item label="性别：">{{userInfo.sex==0?'女':'男'}}</el-form-item>
+                </el-form>
+            </el-card>
+        </div>
+    </div>
+</template>
+
+<script>
+    var app;
+    export default {
+        data() {
+            return {
+                userInfo: {}
+            };
+        },
+        mounted: function () {
+            app = this;
+            this.getUserInfo();
+        },
+        methods: {
+            getUserInfo() {
+                this.common.post(this.apilist1.getSelfUserInfo, this.searchParam, function (json) {
+                    app.userInfo = json.data;
+                });
+            },
+        }
+    }
+
+</script>
+<style>
+    .my-info-vue{}
+    .my-info-vue .box-card{margin: 10px;}
+</style>
+

zyplayer-doc-ui/db-ui/src/views/user/RouterView.vue

@@ -0,0 +1,4 @@
+<template>
+    <router-view></router-view>
+</template>
+