<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>代码生成</title>
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <!-- 表格 -->
        <table class="layui-hide" id="table-generator-table" lay-filter="table-generator-table"></table>
    </div>
</div>
<!--表格头部工具类（左上）-->
<script type="text/html" id="toolbar-table-table">
    <div class="layui-btn-container">
        <!-- 【刷新】-->
        <button class="layui-btn layui-btn-sm layuimini-btn-primary" lay-event="btn-requestLog-refresh"><i class="fa fa-refresh"></i></button>
    </div>

</script>
<!--表格每行末尾的操作按钮-->
<script type="text/html" id="tool-table-table">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="table-details"><i class="fa fa-eye"></i> 详情</a>
    <a class="layui-btn layui-btn-xs layuimini-btn-primary" lay-event="table-generator"><i class="fa fa-plane"></i> 生成代码</a>
</script>
<!-- 点击行末【生成代码】后的弹窗内容 -->
<div id="dom_generator" style="display: none;">
    <form class="layui-form layui-form-pane" action="">
        <!-- 【项目包路径】 -->
        <div class="layui-form-item">
            <label class="layui-form-label">项目路径<span style="color:red"> *</span></label>
            <div class="layui-input-inline" style="width: 275px">
                <input type="text" value="/src/main/java/com/zxdmy/excite/" name="projectPack" lay-verify="projectPack" placeholder="请输入项目路径" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">相对路径，从/src开始</div>
        </div>
        <!-- 【模块名称】 -->
        <div class="layui-form-item">
            <label class="layui-form-label">模块名称<span style="color:red"> *</span></label>
            <div class="layui-input-inline" style="width: 275px">
                <input type="text" value="system" name="moduleName" lay-verify="moduleName" placeholder="请输入模块名称" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">多模块开发中的模块名称</div>
        </div>
        <!-- 父包名 -->
        <div class="layui-form-item">
            <label class="layui-form-label">父包名<span style="color:red"> *</span></label>
            <div class="layui-input-inline" style="width: 275px">
                <input type="text" value="com.zxdmy.excite" name="parentPack" lay-verify="parentPack" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">父模块的包名</div>
        </div>
        <!-- 作者 -->
        <div class="layui-form-item">
            <label class="layui-form-label">项目作者<span style="color:red"> *</span></label>
            <div class="layui-input-inline" style="width: 275px">
                <input type="text" value="沈松" name="author" lay-verify="author" placeholder="请输入项目作者" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">项目开发者</div>
        </div>
        <!-- 提交按钮 -->
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="#" lay-filter="form-table-generator">生成代码</button>
        </div>
    </form>
</div>
<!--引入JS文件-->
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table'], function () {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        // 表格
        let table_table = table.render({
            elem: '#table-generator-table',
            url: '/system/develop/generator/list',
            response: {
                statusCode: 200
            },
            height: 'full-55', //高度最大化减去差值
            toolbar: '#toolbar-table-table', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter'],
            title: '数据库Table列表',
            cols: [
                [
                    {type: 'numbers'},
                    // {type: "checkbox", width: 50},
                    {field: 'name', title: '表名称', width: 150, align: '', sort: true},
                    {field: 'comment', title: '表描述', width: 150, align: ''},
                    {field: 'entityName', title: '实体', width: 150, align: ''},
                    {field: 'fieldNames', title: '字段列表', align: ''},
                    {fixed: 'right', title: '操作', align: 'center', toolbar: '#tool-table-table', width: 200}
                ]
            ],
        });

        // 【行末操作】监听表格行末按钮
        table.on('tool(table-generator-table)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            switch (layEvent) {
                // 【表详情】按钮
                case "table-details":
                    layer.open({
                        type: 1,
                        shade: 0.2,
                        title: '数据库表【' + data.name + '】(' + data.comment + ')字段详情',
                        skin: 'layui-layer-prompt',
                        shadeClose: true,
                        area: ['800px', '500px'],
                        content: "<table class='layui-hide' id='table-generator-details' lay-filter='table-generator-details'></table>",
                        success: function (layero, index) {
                            // 数据库表详情
                            table.render({
                                elem: '#table-generator-details',
                                data: data.fields,
                                title: '数据库Table列表',
                                limit: 1000,
                                cols: [
                                    [
                                        {
                                            field: 'name', title: '字段名', align: 'center', sort: true, templet: function (d) {
                                                let result = d.name;
                                                // 主键符号
                                                if (d.keyFlag === true) {
                                                    result += " <a style='color:blue;'><i class='fa fa-key'></i></a>"
                                                }
                                                // 自增符号
                                                if (d.keyIdentityFlag === true) {
                                                    result += " <a style='color:blue;'><i class='fa fa-chevron-circle-up'></i></a>"
                                                }
                                                return result;
                                            }
                                        },
                                        {field: 'comment', title: '字段描述', align: 'center'},
                                        {field: 'type', title: '字段类型', align: 'center'},
                                        {field: 'propertyName', title: '属性名', align: 'center'},
                                        {field: 'propertyType', title: '属性类型', align: 'center'},
                                    ]
                                ],
                            });
                        }
                    });

                    break;
                // 【生成代码】按钮
                case "table-generator":
                    layer.open({
                        type: 1,
                        shade: 0.2,
                        title: '逆向工程：生成表【' + data.name + '】(' + data.comment + ')的代码',
                        skin: 'layui-layer-prompt',
                        shadeClose: true,
                        area: ['600px', '400px'],
                        content: $("#dom_generator"),
                        success: function (layero, index) {
                            // 监听提交
                            form.on('submit(form-table-generator)', function (d) {
                                d.field.tableName = data.name
                                console.log(d.field)
                                // 弹窗确认
                                layer.confirm("<a style='color: red'>确定要生成表 " + data.name + " 的代码吗？</a>", {
                                    icon: 3,
                                    title: '生成代码确认'
                                }, function (index2) {
                                    // 执行请求
                                    $.post("/system/develop/generator/create", d.field, function (data) {
                                        if (data.code === 200) {
                                            layer.msg('代码生成成功！', {
                                                icon: 1, time: 2000
                                            });
                                        } else {
                                            layer.msg(data.msg, {
                                                icon: 2, time: 3000
                                            });
                                        }
                                        layer.close(index2);
                                    });
                                });
                                // layer.close(index);
                                return false;
                            });
                        }
                    });

                    break;
            }
        });

    });
</script>
</body>
</html>
