uploadReport.html 11.9 KB
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('双公示上报')"/>
    <th:block th:include="include :: jquery-smartwizard-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 100%;">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        数据上报
                    </h5>
                </div>
                <div class="ibox-content">
                    <div id="smartwizard">
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#step-1"> 数据上传 </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-2"> 数据校验对比 </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#step-3"> 上报成功 </a>
                            </li>
                        </ul>
                        <div class="tab-content" style="min-height: 300px;">
                            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
                                <div>
                                    <form class="form form-horizontal m-t" id="uploadForm">
                                        <input name="catalogId" th:value="${catalogId}" type="hidden">
                                        <input name="pubType" th:value="${pubType}" type="hidden">
                                        <input name="catalogCounterpartType" th:value="${catalogCounterpartType}" type="hidden">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label is-required">事项名称:</label>
                                            <div class="col-sm-3">
                                                <input id="catalogName" name="catalogName" class="form-control"
                                                       type="text" th:value="${catalogName}" disabled="disabled">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label is-required">公示类型:</label>
                                            <div class="col-sm-3">
                                                <input id="pubTypeDes" name="pubTypeDes" class="form-control"
                                                       type="text" th:value="${pubTypeDes}" disabled="disabled">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label is-required">文件:</label>
                                            <div class="col-sm-7">
                                                <input id="singleFile" name="file" type="file"/>
                                            </div>
                                        </div>
                                        <div style="position: absolute;bottom: 10px;left: 40%;">
                                            <button type="button" class="btn btn-w-m btn-primary"
                                                    onclick="uploadReport()">执行上报
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
                                <div>
                                    <div class="m-t-md">
                                        <h4 id="check_prompt_msg">执行数据校验对比</h4>
                                        <h4 id="check_msg" style="color: cadetblue;adding-left: 30px; margin-left: 20px;"></h4>
                                        <h4 id="check_exp_msg" style="color: red;adding-left: 30px; margin-left: 20px;"></h4>
                                        <h4 id="check_limit_msg" style="color: red;adding-left: 30px; margin-left: 20px;"></h4>
                                    </div>
                                </div>
                                <div style="position: absolute;bottom: 10px;left: 40%;">
                                    <button type="button" class="btn btn-w-m btn-default" onclick="backStep()">
                                        上一步查看
                                    </button>
                                    <button type="button" class="btn btn-w-m btn-primary" onclick="checkCompare()">
                                        下一步
                                    </button>
                                </div>
                            </div>

                            <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
                                <div class="m-t-md">
                                    <h4>上报校验对比结果:</h4>
                                    <h4 id="check_content" style="color: cadetblue;adding-left: 30px;margin-left: 20px;"></h4>
                                    <h4 id="check_exp_content" style="color: red;adding-left: 30px; margin-left: 20px;"></h4>
                                    <h4>上报执行确认结果:</h4>
                                    <h4 id="report_total_content" style="color: green;adding-left: 30px;margin-left: 20px;" ></h4>
                                    <a onclick="openReportError()"><h4 id="report_normal_content" style="color: blue;adding-left: 30px;margin-left: 20px;" ></h4></a>
                                    <a onclick="openReportError()"><h4 id="report_error_content" style="color: blue;adding-left: 30px;margin-left: 20px;" ></h4></a>
                                </div>
                                <div style="position: absolute;bottom: 10px;left: 40%;">
                                    <button type="button" class="btn btn-w-m btn-default" onclick="backStep()">上一步</button>
                                    <button type="button" id="submitBtn" class="btn btn-w-m btn-primary" onclick="submit()">上报确认</button>
                                    <button type="button"  class="btn btn-w-m btn-danger" onclick="closeItem()">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: jquery-smartwizard-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script>

    var prefix = ctx + "business/publicity";

    $(document).ready(function () {
        // 初始化表单向导组件
        $('#smartwizard').smartWizard({
            theme: 'arrows', // default, arrows, dots, progress
            autoAdjustHeight: true, // 自动调整高度, 默认true
            enableURLhash: false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
            transition: {
                animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
            },
            toolbarSettings: {
                showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
                //toolbarExtraButtons: [btnPrev,btnNext,btnFinish],// 扩展的按钮集合 btnCancel
                toolbarButtonPosition: "none"
            }
        });
    });

    function uploadReport() {
        //清空异常数据显示
        $("#check_msg").html("");
        $("#check_content").html("");

        $("#check_exp_msg").html("");
        $("#check_exp_content").html("");
        $("#check_limit_msg").html("");

        $('#smartwizard').smartWizard("next");
    }

    function backStep() {
        $('#smartwizard').smartWizard("prev");
    }

    function openReportError() {
        var pubType = $("input[name='pubType']").val();
        if (pubType) {
            $.modal.openTab("异常数据查询", prefix + "/input/list/error/" + pubType);
        }
    }

    function checkCompare() {
        $.modal.loading("数据处理中");
        var form = new FormData(document.getElementById("uploadForm"));
        $.ajax({
            url: prefix + "/uploadCheck",
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function (result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    if (result.data) {
                        $("#check_msg").html(result.data.checkMsg);
                        $("#check_content").html(result.data.checkMsg);
                        $("#check_limit_msg").html(result.data.limitError);

                        $("#check_exp_msg").html(result.data.expContent);
                        $("#check_exp_content").html(result.data.expContent);

                        if (result.data.showNext) {
                            $('#smartwizard').smartWizard("next");
                            var submitBtn = document.getElementById("submitBtn");
                            submitBtn.disabled = false;
                        } else {
                            //上报完成禁用按钮
                            var submitBtn = document.getElementById("submitBtn");
                            submitBtn.disabled = true;
                        }
                    }
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function (e) {
                $.modal.closeLoading();
                $("#check_msg").html("文件类型与使用模板不正确");
                $("#check_content").html("文件类型与使用模板不正确");
            }
        });
    }

    function submit() {
        $.modal.loading("数据上报确认处理中");
        var form = new FormData(document.getElementById("uploadForm"));
        $.ajax({
            url: prefix + "/uploadConfirm",
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function (result) {
                $.modal.closeLoading();
                if (result.code == web_status.SUCCESS) {
                    $.operate.successCallback(result);
                    if (result.data) {
                        $("#report_total_content").html(result.data.totalMsg)
                        $("#report_normal_content").html(result.data.normalMsg)
                        $("#report_error_content").html(result.data.errorMsg)
                    }
                } else {
                    $.modal.alertError(result.msg);
                }
                //上报完成禁用按钮
                var submitBtn = document.getElementById("submitBtn");
                submitBtn.disabled = true;
            },
            error: function (e) {
                $.modal.closeLoading();
                $.modal.alertError("文件类型与使用模板不正确!");
            }
        });
    }
</script>
</body>
</html>