Главная Обзор Помощь
Вход
reghao
/
devops
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

1.编译器配置添加页面使用分步表单
2.CompilerConfig 中添加一个 compilerImage 字段, 指定 docker 使用的编译镜像

reghao 1 год назад
Родитель
e927ab5a03
Сommit
2e0a50bca3
3 измененных файлов с 146 добавлено и 59 удалено
Единый вид Показать статистику Diff
  1. 5 0
      web/src/main/java/cn/reghao/devops/web/mgr/builds/model/po/CompilerConfig.java
  2. 140 58
      web/src/main/resources/templates/devops/build/compiler/add.html
  3. 1 1
      web/src/main/resources/templates/devops/build/compiler/index.html

+ 5 - 0
web/src/main/java/cn/reghao/devops/web/mgr/builds/model/po/CompilerConfig.java
Просмотреть файл 

@@ -41,6 +41,8 @@ public class CompilerConfig extends BaseEntity {
 
     @NotBlank(groups = { ShellCompiler.class}, message = "编译器版本命令不能为空")
 
     @NotBlank(groups = { ShellCompiler.class}, message = "编译器版本命令不能为空")
 
     @Length(max = 1000, message = "编译器版本命令长度不能超过 1000 个字符")
 
     @Length(max = 1000, message = "编译器版本命令长度不能超过 1000 个字符")
 
     private String versionCmd;
 
     private String versionCmd;
 
+    @NotBlank(groups = { DockerCompiler.class}, message = "编译器版本命令不能为空")
 
+    private String compilerImage;
 
 
 
     public interface NoneCompiler {
 
     public interface NoneCompiler {
 
     }
 
     }
 
@@ -51,6 +53,9 @@ public class CompilerConfig extends BaseEntity {
 
     public interface MavenCompiler {
 
     public interface MavenCompiler {
 
     }
 
     }
 
 
 
+    public interface DockerCompiler {
 
+    }
 
+
 
     public CompilerDto getCompilerDto() {
 
     public CompilerDto getCompilerDto() {
 
         return new CompilerDto(this.type, this.name, this.homePath, this.compileCmd);
 
         return new CompilerDto(this.type, this.name, this.homePath, this.compileCmd);
 
     }
 
     }

+ 140 - 58
web/src/main/resources/templates/devops/build/compiler/add.html
Просмотреть файл 

@@ -4,74 +4,156 @@
 
 <head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
 
 <head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
 
 
 
 <body>
 
 <body>
 
-<div class="layui-form timo-compile">
 
-    <form th:action="@{/api/build/compiler}">
 
-        <div class="layui-form-item">
 
-            <label class="layui-form-label required">编译类型<i id="compile_type_tips" class="fa fa-question-circle"></i></label>
 
-            <div class="layui-input-inline">
 
-                <select name="type">
 
-                    <option th:each="item : ${compileTypes}" 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 : ${compileTypes}" 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 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="compileCmd" class="layui-form-item">
 
+                                <label class="layui-form-label required">编译命令</label>
 
+                                <div class="layui-input-inline">
 
+                                    <textarea class="layui-textarea" name="compileCmd" placeholder="请输入编译命令" lay-verify="required"></textarea>
 
+                                </div>
 
+                            </div>
 
+                            <div id="versionCmd" class="layui-form-item">
 
+                                <label class="layui-form-label required">编译器版本命令</label>
 
+                                <div class="layui-input-inline">
 
+                                    <textarea class="layui-textarea" name="versionCmd" placeholder="请输入编译器版本命令" lay-verify="required"></textarea>
 
+                                </div>
 
+                            </div>
 
+                            <div id="compilerImage" class="layui-form-item">
 
+                                <label class="layui-form-label required">编译器镜像</label>
 
+                                <div class="layui-input-inline">
 
+                                    <input class="layui-input" type="text" name="compilerImage" placeholder="请输入 Docker 编译使用的镜像" 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>
 
         </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="compile_script_tips" class="fa fa-question-circle"></i></label>
 
-            <div class="layui-input-inline">
 
-                <textarea class="layui-textarea" name="compileCmd" placeholder="请输入编译命令"></textarea>
 
-            </div>
 
-        </div>
 
-        <div class="layui-form-item">
 
-            <label class="layui-form-label">编译器版本命令</label>
 
-            <div class="layui-input-inline">
 
-                <textarea class="layui-textarea" name="versionCmd" placeholder="请输入编译器版本命令"></textarea>
 
-            </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>
 
 </div>
 
 
 
 <script th:replace="/common/template :: script"></script>
 
 <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="@{/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">
 
 <script type="text/javascript">
 
-    $(function () {
 
-        $("#compile_type_tips").hover(function () {
 
-            var tips = layer.tips('不需要编译器指定 none 类型<br />',
 
-                '#compile_type_tips',{
 
-                tips: [1, '#555555']
 
+    // 引入 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 compilerType
 
+        form.on('submit(formStep)', function (data) {
 
+            compilerType = data.field.type
 
+            if (compilerType === 'shell') {
 
+                document.getElementById("compilerImage").remove()
 
+            } else if (compilerType === 'docker') {
 
+                document.getElementById("compileCmd").remove()
 
+                document.getElementById("versionCmd").remove()
 
+            } else {
 
+                document.getElementById("compilerImage").remove()
 
+                document.getElementById("compileCmd").remove()
 
+                document.getElementById("versionCmd").remove()
 
+            }
 
+
 
+            step.next('#stepForm');
 
+            return false;
 
+        });
 
+
 
+        form.on('submit(formStep2)', function (data) {
 
+            data.field.type = compilerType
 
+            // 手动提交表单
 
+            $.ajax({
 
+                type: 'POST',
 
+                url: '/api/build/compiler',
 
+                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});
 
+                }
 
             });
 
             });
 
-            sleep(1000);
 
-            layer.close(tips);
 
-        })
 
 
 
-        $("#home_path_tips").hover(function () {
 
-            var tips = layer.tips(
 
-                '采用 maven 编译必须指定 maven 的主目录<br/>' +
 
-                '其他编译类型不需要指定编译器的主目录<br/>', +
 
-                '#home_path_tips',{
 
-                    tips: [1, '#555555']
 
-                });
 
-            sleep(1000);
 
-            layer.close(tips);
 
-        })
 
+            step.next('#stepForm');
 
+            return false;
 
+        });
 
+
 
+        $('.pre').click(function () {
 
+            step.pre('#stepForm');
 
+        });
 
 
 
-        $("#compile_script_tips").hover(function () {
 
-            var tips = layer.tips(
 
-                '编译脚本中的编译器必须指定绝对路径(absolute path)<br/>',
 
-                '#compile_script_tips',{
 
-                    tips: [1, '#555555']
 
-                });
 
-            sleep(1000);
 
-            layer.close(tips);
 
-        })
 
+        $('.next').click(function () {
 
+            step.next('#stepForm');
 
+        });
 
     })
 
     })
 
 </script>
 
 </script>
 
 </body>
 
 </body>

+ 1 - 1
web/src/main/resources/templates/devops/build/compiler/index.html
Просмотреть файл 

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