NN2022081301/public/agent/pages/system/database.html

<style type="text/css">
    .xm-label-block {
        background-color: #287bd2
    }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief">
                <table id="dataTable" lay-filter="dataTable"></table>
            </div>
        </div>
    </div>
</div>

<!--表格工具栏-->
<script type="text/html" id="toolBarTpl">
    <div class="layui-btn-group fl">
        <a table-data="{'url':'/system/database/optimize','action':'post'}"  class="layui-btn layui-btn-sm layui-icon layui-icon-play table-toolbar-btn">&nbsp;优化</a>
        <a table-data="{'url':'/system/database/backup','action':'post'}"  class="layui-btn layui-btn-sm layui-icon layui-icon-pause table-toolbar-btn">&nbsp;备份</a>
    </div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
</script>

<!--查看表详情-->
<script type="text/html" id="viewModel">
    <table id="viewTable" lay-filter="viewTable" class="layui-hide"></table>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'notice', 'admin', 'setter'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var setter = layui.setter;

        form.render('select');

        // 渲染表格
        var insTb = table.render({
            elem: '#dataTable',
            url: setter.baseServer + 'system/database',
            page: false,
            toolbar: '#toolBarTpl',
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {field: 'name', title: '表名', width: 200},
                {field: 'engine', title: '引擎'},
                {field: 'collation', title: '字符集'},
                {field: 'data_length', sort: true, title: '数据'},
                {field: 'comment', title: '注释'},
                {field: 'create_time', sort: true, title: '创建时间', width: 200},
                {fixed: 'right',align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 120}
            ]]
        });

        // 工具条点击事件
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent == 'view'){
                admin.open({
                    type: 1,
                    area: '745px', //宽高
                    title: '查看表格详情',
                    content: $('#viewModel').html(),
                    success: function (layero, dIndex) {
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        // 渲染表格
                        table.render({
                            elem: '#viewTable',
                            url: setter.baseServer + 'system/database/' + data.name,
                            page: false,
                            cellMinWidth: 100,
                            cols: [[
                                {type: 'numbers'},
                                {field: 'field', title: '字段名称', width: 150},
                                {field: 'type', title: '类型'},
                                {field: 'collation', title: '字符集'},
                                {field: 'null', title: 'Null'},
                                {field: 'key', title: '索引'},
                                {field: 'default', title: '默认值'},
                                {field: 'privileges', title: '权限'},
                                {field: 'comment', title: '注释'},
                            ]]
                        });
                    }
                })
            }
        });
    });
</script>