1.引入 layui 分步表单组件

2.打包配置添加页面使用分步表单

web/src/main/java/cn/reghao/devops/web/mgr/builds/model/po/PackerConfig.java

@@ -41,12 +41,12 @@ public class PackerConfig extends BaseEntity {
     // 根据打包类型来确定
     @NotBlank(groups = { DockerPacker.class }, message = "可执行包的存放位置不能为空白字符串")
     private String targetPath;
-    // 构建生成的可执行文件及配置文件, 脚本文件等所在的目录名, 目录位于 appRootPath 下
-    @NotBlank(groups = { ZipPacker.class }, message = "bin 目录不能为空")
-    private String binDirname;
     @NotNull(groups = { DockerPacker.class }, message = "dockerRegistry 不能为 null")
     @OneToOne
     private DockerRegistry dockerRegistry;
+    // 构建生成的可执行文件及配置文件, 脚本文件等所在的目录名, 目录位于 appRootPath 下
+    @NotBlank(groups = { ZipPacker.class }, message = "bin 目录不能为空")
+    private String binDirname;
 
     public interface DockerPacker {
     }

web/src/main/java/cn/reghao/devops/web/mgr/builds/service/impl/PackerConfigServiceImpl.java

@@ -33,7 +33,7 @@ public class PackerConfigServiceImpl implements PackerConfigService {
         }
 
         DockerRegistry dockerRegistry = packerConfig.getDockerRegistry();
-        if (dockerRegistry == null) {
+        if (type.equals(PackType.docker.getName()) && dockerRegistry == null) {
             return Result.result(ResultStatus.FAIL, "DockerRegistry 不存在");
         }
 

web/src/main/resources/static/lib/step-lay/step.css

@@ -0,0 +1,79 @@
+.lay-step {
+    font-size: 0;
+    width: 400px;
+    margin: 0 auto;
+    max-width: 100%;
+    padding-left: 200px;
+}
+
+.step-item {
+    display: inline-block;
+    line-height: 26px;
+    position: relative;
+    font-size: 14px;
+}
+
+.step-item-tail {
+    width: 100%;
+    padding: 0 10px;
+    position: absolute;
+    left: 0;
+    top: 13px;
+}
+
+.step-item-tail i {
+    display: inline-block;
+    width: 100%;
+    height: 1px;
+    vertical-align: top;
+    background: #c2c2c2;
+    position: relative;
+}
+
+.step-item-tail .step-item-tail-done {
+    background: #009688;
+}
+
+.step-item-head {
+    position: relative;
+    display: inline-block;
+    height: 26px;
+    width: 26px;
+    text-align: center;
+    vertical-align: top;
+    color: #009688;
+    border: 1px solid #009688;
+    border-radius: 50%;
+    background: #ffffff;
+}
+
+.step-item-head.step-item-head-active {
+    background: #009688;
+    color: #ffffff;
+}
+
+.step-item-main {
+    display: block;
+    position: relative;
+    margin-left: -50%;
+    margin-right: 50%;
+    padding-left: 26px;
+    text-align: center;
+}
+
+.step-item-main-title {
+    font-weight: bolder;
+    color: #555555;
+}
+
+.step-item-main-desc {
+    color: #aaaaaa;
+}
+
+.lay-step + [carousel-item]:before {
+    display: none;
+}
+
+.lay-step + [carousel-item] > * {
+    background-color: transparent;
+}

web/src/main/resources/static/lib/step-lay/step.js

@@ -0,0 +1,99 @@
+layui.define(['layer', 'carousel'], function (exports) {
+    var $ = layui.jquery;
+    var layer = layui.layer;
+    var carousel = layui.carousel;
+
+    // 添加步骤条dom节点
+    var renderDom = function (elem, stepItems, postion) {
+        var stepDiv = '<div class="lay-step">';
+        for (var i = 0; i < stepItems.length; i++) {
+            stepDiv += '<div class="step-item">';
+            // 线
+            if (i < (stepItems.length - 1)) {
+                if (i < postion) {
+                    stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
+                } else {
+                    stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
+                }
+            }
+
+            // 数字
+            var number = stepItems[i].number;
+            if (!number) {
+                number = i + 1;
+            }
+            if (i == postion) {
+                stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
+            } else if (i < postion) {
+                stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
+            } else {
+                stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
+            }
+
+            // 标题和描述
+            var title = stepItems[i].title;
+            var desc = stepItems[i].desc;
+            if (title || desc) {
+                stepDiv += '<div class="step-item-main">';
+                if (title) {
+                    stepDiv += '<div class="step-item-main-title">' + title + '</div>';
+                }
+                if (desc) {
+                    stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
+                }
+                stepDiv += '</div>';
+            }
+            stepDiv += '</div>';
+        }
+        stepDiv += '</div>';
+
+        $(elem).prepend(stepDiv);
+
+        // 计算每一个条目的宽度
+        var bfb = 100 / stepItems.length;
+        $('.step-item').css('width', bfb + '%');
+    };
+
+    var step = {
+        // 渲染步骤条
+        render: function (param) {
+            param.indicator = 'none';  // 不显示指示器
+            param.arrow = 'always';  // 始终显示箭头
+            param.autoplay = false;  // 关闭自动播放
+            if (!param.stepWidth) {
+                param.stepWidth = '400px';
+            }
+
+            // 渲染轮播图
+            carousel.render(param);
+
+            // 渲染步骤条
+            var stepItems = param.stepItems;
+            renderDom(param.elem, stepItems, 0);
+            $('.lay-step').css('width', param.stepWidth);
+
+            //监听轮播切换事件
+            carousel.on('change(' + param.filter + ')', function (obj) {
+                $(param.elem).find('.lay-step').remove();
+                renderDom(param.elem, stepItems, obj.index);
+                $('.lay-step').css('width', param.stepWidth);
+            });
+
+            // 隐藏左右箭头按钮
+            $(param.elem).find('.layui-carousel-arrow').css('display', 'none');
+
+            // 去掉轮播图的背景颜色
+            $(param.elem).css('background-color', 'transparent');
+        },
+        // 下一步
+        next: function (elem) {
+            $(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
+        },
+        // 上一步
+        pre: function (elem) {
+            $(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
+        }
+    };
+    layui.link('/lib/step-lay/step.css');
+    exports('step', step);
+});

web/src/main/resources/templates/devops/build/packer/add.html

@@ -4,75 +4,154 @@
 <head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
 
 <body>
-<div class="layui-form timo-compile">
-    <form th:action="@{/api/build/packer}">
-        <div class="layui-form-item">
-            <label class="layui-form-label required">打包类型</label>
-            <div class="layui-input-inline">
-                <select name="type">
-                    <option th:each="item : ${packTypes}" th:value="${item.key}">[[${item.value}]]</option>
-                </select>
+<div class="layui-fluid">
+    <div class="layui-card">
+        <div class="layui-card-body" style="padding-top: 40px;">
+            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
+                <div carousel-item>
+                    <div>
+                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
+                            <div class="layui-form-item">
+                                <label class="layui-form-label">打包类型</label>
+                                <div class="layui-input-block">
+                                    <select name="type" lay-verify="required">
+                                        <option th:each="item : ${packTypes}" th:value="${item.key}">[[${item.value}]]</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="layui-form-item">
+                                <div class="layui-input-block">
+                                    <button class="layui-btn" lay-submit lay-filter="formStep">
+                                        &emsp;下一步&emsp;
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    <div>
+                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
+                            <div id="registry" class="layui-form-item">
+                                <label class="layui-form-label required">RegistryUrl</label>
+                                <div class="layui-input-inline">
+                                    <select name="dockerRegistry" lay-verify="required">
+                                        <option th:each="item : ${registryList}" th:value="${item.key}">[[${item.value}]]</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="layui-form-item">
+                                <label class="layui-form-label required">打包名字</label>
+                                <div class="layui-input-inline">
+                                    <input class="layui-input" type="text" name="name" placeholder="请输入打包名字" lay-verify="required">
+                                </div>
+                            </div>
+                            <div id="targetPath" class="layui-form-item">
+                                <label class="layui-form-label required">存放位置</label>
+                                <div class="layui-input-inline">
+                                    <input class="layui-input" type="text" name="targetPath" placeholder="存放在 docker registry 的位置" lay-verify="required">
+                                </div>
+                            </div>
+                            <div id="binDirname" class="layui-form-item">
+                                <label class="layui-form-label required">bin 目录名</label>
+                                <div class="layui-input-inline">
+                                    <input class="layui-input" type="text" name="binDirname" placeholder="编译生成文件所在目录名" lay-verify="required">
+                                </div>
+                            </div>
+                            <div class="layui-form-item">
+                                <div class="layui-input-block">
+                                    <button class="layui-btn" lay-submit lay-filter="formStep2">
+                                        &emsp;提交&emsp;
+                                    </button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    <div>
+                        <div style="text-align: center;margin-top: 90px;">
+                            <i class="layui-icon layui-circle"
+                               style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
+                            <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
+                                打包配置已添加
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-        <div class="layui-form-item">
-            <label class="layui-form-label required">RegistryUrl</label>
-            <div class="layui-input-inline">
-                <select name="dockerRegistry">
-                    <option th:each="item : ${registryList}" th:value="${item.key}">[[${item.value}]]</option>
-                </select>
-            </div>
-        </div>
-        <div class="layui-form-item">
-            <label class="layui-form-label required">打包名字</label>
-            <div class="layui-input-inline">
-                <input class="layui-input" type="text" name="name" placeholder="请输入打包名字" required>
-            </div>
-        </div>
-        <div class="layui-form-item">
-            <label class="layui-form-label">存放位置<i id="target_path_tips" class="fa fa-question-circle"></i></label>
-            <div class="layui-input-inline">
-                <input class="layui-input" type="text" name="targetPath" placeholder="docker 打包类型必须填写" required>
-            </div>
-        </div>
-        <div class="layui-form-item">
-            <label class="layui-form-label">bin 目录名<i id="bin_dirname_tips" class="fa fa-question-circle"></i></label>
-            <div class="layui-input-inline">
-                <input class="layui-input" type="text" name="binDirname" placeholder="zip 打包类型必须填写" required>
-            </div>
-        </div>
-        <div class="layui-form-item timo-finally">
-            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
-            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
-        </div>
-    </form>
+    </div>
 </div>
 
 <script th:replace="/common/template :: script"></script>
 <script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
+<script type="text/javascript" th:src="@{/lib/step-lay/step.js}"></script>
 <script type="text/javascript">
-    $(function () {
-        $("#target_path_tips").hover(function () {
-            var tips = layer.tips(
-                'docker 打包类型的存放地址是 docker 仓库地址<br/>' +
-                'zip 打包类型不需要填写<br/>', +
-                    '#target_path_tips',{
-                    tips: [1, '#555555']
-                });
-            sleep(1000);
-            layer.close(tips);
-        })
+    // 引入 step-lay 模块
+    layui.config({
+        base:'/lib/step-lay/'
+    }).use([ 'form', 'step'], function () {
+        var form = layui.form
+        var step = layui.step
+
+        step.render({
+            elem: '#stepForm',
+            filter: 'stepForm',
+            width: '100%', //设置容器宽度
+            stepWidth: '720px',
+            height: '480px',
+            stepItems: [{
+                title: '选择打包类型'
+            }, {
+                title: '填写打包配置'
+            }, {
+                title: '结果'
+            }]
+        });
+
+        var packType
+        form.on('submit(formStep)', function (data) {
+            packType = data.field.type
+            if (packType !== 'docker') {
+                document.getElementById("registry").remove()
+                document.getElementById("targetPath").remove()
+            } else {
+                document.getElementById("binDirname").remove()
+            }
+
+            step.next('#stepForm');
+            return false;
+        });
+
+        form.on('submit(formStep2)', function (data) {
+            data.field.type = packType
+            // 手动提交表单
+            $.ajax({
+                type: 'POST',
+                url: '/api/build/packer',
+                contentType: "application/x-www-form-urlencoded",
+                data: data.field,
+                success: function(jsonData) {
+                    if (jsonData.code === 0) {
+                        layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 1});
+                    } else {
+                        layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 2});
+                    }
+                },
+                error: function(xhr, status, error) {
+                    // 处理表单提交失败后的错误
+                    layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 2});
+                }
+            });
+
+            step.next('#stepForm');
+            return false;
+        });
+
+        $('.pre').click(function () {
+            step.pre('#stepForm');
+        });
 
-        $("#bin_dirname_tips").hover(function () {
-            var tips = layer.tips(
-                '构建生成的可执行文件及配置文件, 脚本文件等所在的目录名<br/>' +
-                'docker 打包类型不需要填写<br/>' +
-                'zip 打包类型必须填写<br/>',
-                '#bin_dirname_tips',{
-                    tips: [1, '#555555']
-                });
-            sleep(1000);
-            layer.close(tips);
-        })
+        $('.next').click(function () {
+            step.next('#stepForm');
+        });
     })
 </script>
 </body>

web/src/main/resources/templates/devops/build/packer/add1.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
+
+<body>
+<div class="layui-form timo-compile">
+    <form th:action="@{/api/build/packer}">
+        <div class="layui-form-item">
+            <label class="layui-form-label required">打包类型</label>
+            <div class="layui-input-inline">
+                <select name="type">
+                    <option th:each="item : ${packTypes}" th:value="${item.key}">[[${item.value}]]</option>
+                </select>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label required">RegistryUrl</label>
+            <div class="layui-input-inline">
+                <select name="dockerRegistry">
+                    <option th:each="item : ${registryList}" th:value="${item.key}">[[${item.value}]]</option>
+                </select>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label required">打包名字</label>
+            <div class="layui-input-inline">
+                <input class="layui-input" type="text" name="name" placeholder="请输入打包名字" required>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">存放位置<i id="target_path_tips" class="fa fa-question-circle"></i></label>
+            <div class="layui-input-inline">
+                <input class="layui-input" type="text" name="targetPath" placeholder="docker 打包类型必须填写" required>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">bin 目录名<i id="bin_dirname_tips" class="fa fa-question-circle"></i></label>
+            <div class="layui-input-inline">
+                <input class="layui-input" type="text" name="binDirname" placeholder="zip 打包类型必须填写" required>
+            </div>
+        </div>
+        <div class="layui-form-item timo-finally">
+            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
+            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
+        </div>
+    </form>
+</div>
+
+<script th:replace="/common/template :: script"></script>
+<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
+<script type="text/javascript">
+    $(function () {
+        $("#target_path_tips").hover(function () {
+            var tips = layer.tips(
+                'docker 打包类型的存放地址是 docker 仓库地址<br/>' +
+                'zip 打包类型不需要填写<br/>', +
+                    '#target_path_tips',{
+                    tips: [1, '#555555']
+                });
+            sleep(1000);
+            layer.close(tips);
+        })
+
+        $("#bin_dirname_tips").hover(function () {
+            var tips = layer.tips(
+                '构建生成的可执行文件及配置文件, 脚本文件等所在的目录名<br/>' +
+                'docker 打包类型不需要填写<br/>' +
+                'zip 打包类型必须填写<br/>',
+                '#bin_dirname_tips',{
+                    tips: [1, '#555555']
+                });
+            sleep(1000);
+            layer.close(tips);
+        })
+    })
+</script>
+</body>
+</html>

web/src/main/resources/templates/devops/build/packer/index.html

@@ -13,7 +13,7 @@
             <div class="pull-right screen-btn-group">
                 <div class="btn-group-right">
                     <button class="layui-btn open-popup" data-title="添加打包配置" th:attr="data-url=@{/build/packer/add}"
-                            data-size="640,480">
+                            data-size="max">
                         <i class="fa fa-plus"></i> 添加
                     </button>
                 </div>