双重预防项目-国泰新华二开定制版
heheng
2025-06-24 e98eeaaa5766511fdb8e6d5e412eb1c59d1f07ce
src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/addDangerReportWholeProcess.html
@@ -25,13 +25,57 @@
            position: absolute !important;
            color: #ef392b !important;
        }
        #preFileList{
            display: flex;
            align-items: flex-start;
            margin-top: 10px;
        }
        #postFileList{
            display: flex;
            align-items: flex-start;
            margin-top: 10px;
        }
        .file-list-item1,.file-temp1,.file-list-item2,.file-temp2{
            width: 100px;
            margin-right: 10px;
        }
        [class^="file-list-item"] div:nth-child(1){
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        [class^="file-list-item"] div:nth-child(1) img{
            width: 100px;
            height: 100px;
        }
        [class^="file-list-item"] div:nth-child(1) .layui-badge1,.layui-badge2{
            position: absolute;
            left: 2px;
            top: 2px;
        }
        [class^="file-list-item"] div:nth-child(2){
            width: 100%;
            height: 36px;
            text-align: center;
            line-height: 36px;
            margin-top: 4px;
        }
        [class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]{
            width: 100%;
            height: 36px;
        }
        [class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]:hover{
            background: #ED5565;
            color: #fff;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form id="form" class="form-horizontal  wizard-big">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" style="height: 100%">
    <form id="form" class="form-horizontal  wizard-big" style="height: 100%">
        <h1>隐患上报</h1>
        <fieldset>
            <h4 class="form-header h4">登记隐患信息</h4>
@@ -53,7 +97,15 @@
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">隐患来源:</label>
                <div class="col-sm-8">
                    <select name="dangerSrc" class="form-control m-b" th:with="type=${@dict.getType('danger_source')}" required>
                        <option value="">--请选择隐患来源--</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">隐患名称:</label>
@@ -96,20 +148,49 @@
                <label class="col-sm-3 control-label">隐患整改前照片:</label>
                <div class="col-sm-8">
                    <input name="preRectifyPhoto" id="preRectifyPhoto" type="hidden">
                    <button type="button" class="layui-btn" id="preRectifyPhotoUpload">上传</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPreRectifyPhoto">
                        <p id="msgTextPreRectifyPhoto"></p>
                    </div>
<!--                    <button type="button" class="layui-btn" id="preRectifyPhotoUpload">上传</button>-->
<!--                    <div class="layui-upload-list">-->
<!--                        <img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPreRectifyPhoto">-->
<!--                        <p id="msgTextPreRectifyPhoto"></p>-->
<!--                    </div>-->
                        <button type="button" class="layui-btn layui-btn-normal" id="preChooseList">选择文件(不超过3张)</button>
                        <button type="button" class="layui-btn" id="preUpAction">确认上传(上传后不可修改)</button>
<!--                        <div class="layui-upload-list">-->
<!--                            <table class="layui-table">-->
<!--                                <thead>-->
<!--                                <tr><th>文件名</th>-->
<!--                                    <th>状态</th>-->
<!--                                    <th>操作</th>-->
<!--                                </tr></thead>-->
<!--                                <tbody id="preFileList"></tbody>-->
<!--                            </table>-->
<!--                        </div>-->
                        <div id="preFileList"></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">判定人:</label>
                <label class="col-sm-3 control-label is-required">隐患责任人(判定人):</label>
                <div class="col-sm-8">
                    <input id="judgeUserName"  name="judgeUserName" placeholder="选择判定人" class="form-control" type="text"  onclick="selectJudgeUser()" maxlength="30" readonly="true" required>
                    <input id="judgeUserName"  name="judgeUserName" placeholder="选择隐患责任人(判定人)" class="form-control" type="text"  onclick="selectJudgeUser()" maxlength="30" readonly="true" required>
                    <input id="judgeUserId" name="judgeUserId" type="hidden">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label  is-required">隐患发现时间:</label>
                <div class="col-sm-8">
                    <input name="findTime" placeholder="请选择隐患发现时间" class="form-control" type="text"
                           readonly="readonly" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">检查人:</label>
                <div class="col-sm-8">
                    <input id="checkPerson"  name="checkPerson" placeholder="选择检查人" class="form-control" type="text"  onclick="selectCheckPerson()" maxlength="30" readonly="true" required>
                    <!--                <input id="checkPersonId" name="checkPersonId" type="hidden">-->
                </div>
            </div>
@@ -240,22 +321,22 @@
<!--                </div>-->
<!--            </div>-->
            <div class="form-group showByDangerLevelChange">
                <label class="col-sm-3 control-label is-required">风险单元:</label>
                <label class="col-sm-3 control-label">风险单元:</label>
                <div class="col-sm-8">
                    <input id="checkPointName"  placeholder="选择风险单元" class="form-control" type="text"  onclick="selectRiskPoint()" maxlength="30" readonly="true" required>
                    <input id="checkPointName"  placeholder="选择风险单元" class="form-control" type="text"  onclick="selectRiskPoint()" maxlength="30" readonly="true">
                    <input id="checkPointNum" name="hazardCode" type="hidden">
                </div>
            </div>
            <div class="form-group showByDangerLevelChange">
                <label class="col-sm-3 control-label is-required">隐患来源:</label>
                <div class="col-sm-8">
                    <select name="dangerSrc" class="form-control m-b" th:with="type=${@dict.getType('danger_source')}" required>
                        <option value="">--请选择隐患来源--</option>
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
<!--            <div class="form-group showByDangerLevelChange">-->
<!--                <label class="col-sm-3 control-label is-required">隐患来源:</label>-->
<!--                <div class="col-sm-8">-->
<!--                    <select name="dangerSrc" class="form-control m-b" th:with="type=${@dict.getType('danger_source')}" required>-->
<!--                        <option value="">&#45;&#45;请选择隐患来源&#45;&#45;</option>-->
<!--                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
<!--                    </select>-->
<!--                </div>-->
<!--            </div>-->
            <div class="form-group showByDangerLevelChange">
                <label class="col-sm-3 control-label is-required">隐患类型:</label>
@@ -312,8 +393,9 @@
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">隐患整改资金:</label>
                <div class="col-sm-8">
                    <input name="rectifyFund" class="form-control" type="text" required>
                <div class="col-sm-8" style="display: flex;align-items: center">
                    <input name="rectifyFund" class="form-control" type="number" placeholder="请输入数字(单位:万)" required>
                    <span style="width: 50px;background: #ccc;height:34px;text-align: center;line-height: 34px">万</span>
                </div>
            </div>
            <div class="form-group">
@@ -339,11 +421,14 @@
                <label class="col-sm-3 control-label">隐患整改后照片:</label>
                <div class="col-sm-8">
                    <input name="postRectifyPhoto" id="postRectifyPhoto" type="hidden">
                    <button type="button" class="layui-btn" id="postRectifyPhotoUpload">上传</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPostRectifyPhoto">
                        <p id="msgTextPostRectifyPhoto"></p>
                    </div>
<!--                    <button type="button" class="layui-btn" id="postRectifyPhotoUpload">上传</button>-->
<!--                    <div class="layui-upload-list">-->
<!--                        <img class="layui-upload-img" style="width: 92px; height: 92px;" id="thumbImgPostRectifyPhoto">-->
<!--                        <p id="msgTextPostRectifyPhoto"></p>-->
<!--                    </div>-->
                    <button type="button" class="layui-btn layui-btn-normal" id="postChooseList">选择文件(不超过3张)</button>
                    <button type="button" class="layui-btn" id="postUpAction">确认上传(上传后不可修改)</button>
                    <div id="postFileList"></div>
                </div>
            </div>
        </fieldset>
@@ -424,7 +509,7 @@
    /*登记人  选择 end*/
    /*判定人  选择 start*/
    /*隐患责任人  选择 start*/
    function selectJudgeUser() {
        var url = ctx + "system/user/selectUserListByParentSonCompany";
        var options = {
@@ -443,9 +528,26 @@
            });
        });
    }
    /*判定人  选择 end*/
    /*隐患责任人  选择 end*/
    function selectCheckPerson() {
        var url = ctx + "system/user/selectUserListByParentSonCompany";
        var options = {
            title: '用户选择',
            width: "800",
            url: url,
        };
        $.modal.openOptionsByCallback(options, function (layero, index) {
            var body = layer.getChildFrame('body', index);
            body.on("click", ".selectUser", function () {
                var userId = $(this).data("userid");
                var userName = $(this).data("username");
                // $("#checkPersonId").val(userId);
                $("#checkPerson").val(userName);
                layer.close(index);
            });
        });
    }
    /*核查人  选择 start*/
    function selectExamineUser() {
@@ -545,7 +647,7 @@
                // form.submit();
                var data = $('#form').serializeArray();
                // var judgeUserName = $("select[name='judgeUserId']").find("option:selected").text();//判定人名称
                // var judgeUserName = $("select[name='judgeUserId']").find("option:selected").text();//隐患责任人名称
                // data.push({"name": "judgeUserName", "value": judgeUserName});
                //
                // var examineUserName = $("select[name='examineUserId']").find("option:selected").text();//核查人名称
@@ -606,6 +708,11 @@
            format: "yyyy-mm-dd hh:ii",
            autoclose: true
        });
        $("input[name='findTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    });
@@ -664,38 +771,158 @@
    /*区域/位置  选择 end*/
    <!--layui图片文件上传-->
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
    // layui.use('upload', function () {
    //     var $ = layui.jquery
    //         , upload = layui.upload;
    //
    //     //普通图片上传
    //     var uploadInst = upload.render({
    //         elem: '#preRectifyPhotoUpload'
    //         , url: ctx + 'tr/upload'
    //         , before: function (obj) {
    //             //预读本地文件示例,不支持ie8
    //             obj.preview(function (index, file, result) {
    //                 $('#thumbImgPreRectifyPhoto').attr('src', result); //图片链接(base64)
    //             });
    //         }
    //         , done: function (res) {
    //             //如果上传失败
    //             if (res.code > 0) {
    //                 return layer.msg('上传失败');
    //             }
    //             //上传成功
    //             $('#preRectifyPhoto').val(res.imageUrl);
    //         }
    //         , error: function () {
    //             //演示失败状态,并实现重传
    //             var msgText = $('#msgTextPreRectifyPhoto');
    //             msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
    //             msgText.find('.demo-reload').on('click', function () {
    //                 uploadInst.upload();
    //             });
    //         }
    //     });
    // });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#preRectifyPhotoUpload'
            , url: ctx + 'tr/upload'
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $('#thumbImgPreRectifyPhoto').attr('src', result); //图片链接(base64)
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#preRectifyPhoto').val(res.imageUrl);
            }
            , error: function () {
                //演示失败状态,并实现重传
                var msgText = $('#msgTextPreRectifyPhoto');
                msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                msgText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
    layui.use('upload', function() {
        var $ = layui.jquery;
        upload = layui.upload;
        var uploadList = {};
        var urls = []
        //多文件列表示例
        var preFileListDom = $('#preFileList')
        var uploadListIns = upload.render({
            elem: '#preChooseList',
            url: ctx + 'tr/upload' ,
            accept: 'file',
            multiple: true,
            number: 3,
            auto: false,
            bindAction: '#preUpAction',
            choose: function(obj) {
                // 展示上传按钮
                $('#preUpAction').show();
                // 将每次选择的文件追加到文件队列
                uploadList = obj.pushFile();
                const len = preFileListDom.find('.file-list-item1').length;
                // 还可以上传的文件数量
                const limit = 3 - len;
                var number = 0;
                // 预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result){
                    if (number < limit){
                        number++;
                        appendFile(index, file.name, result);
                    }else{
                        deleteTempFile(index)
                    }
                })
            },
            // before: function(obj){
            //     layer.load(1);
            // },
            //上传完毕回调
            //当文件全部被提交后,才触发
            allDone: function (obj) {
                layer.msg("已上传 "+obj.successful+" 个文件");
                layer.closeAll('loading');
                deleteTempFile(0)
            },
            done: function(res, index, upload){
                preFileListDom.find('.file-temp1').each(function () {
                    if (!res || res.code > 0){
                        // 若上传失败,则直接移除
                        return layer.msg('上传失败');
                        $(this).remove();
                    }else{
                        //上传成功
                        // 添加上传返回的数据到对应的文件中
                        // var hidden = '<input type="hidden" name="path[]" value="'+res.imageUrl+'"/>';
                        // $(this).append(hidden);
                        // 修改预览文件样式
                        $(this).removeClass('file-temp1');
                        // $(this).find('.file-cancel').removeClass('layui-btn-primary');
                        // $(this).find('.file-cancel').addClass('layui-btn-danger');
                        // $(this).find('.file-cancel').val('删除');
                        $(this).find('.file-cancel1').remove();
                        $(this).find('.layui-badge1').remove();
                        urls.push(res.imageUrl)
                    }
                    $('#preRectifyPhoto').val(urls.join(','));
                })
            },
            error: function(index, upload) {
                var tr = preFileListDom.find('tr#upload-' + index),
                    tds = tr.children();
                tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
        // 预览选择的文件
        function appendFile(index, name, result) {
            const dom = '<div class="file-list-item1 file-temp1" data-index="'+index+'"><div><img src="'+result+'" alt="'+name+'"><span class="layui-badge1 layui-bg-blue">待上传</span></div>' +
                '<div><input type="button" class="file-cancel1" value="删除"></div></div>';
            preFileListDom.append(dom);
            fileCancelEvent();
        }
        // 为待上传文件【取消】按钮添加点击事件
        function fileCancelEvent() {
            preFileListDom.find('.file-cancel1').each(function () {
                const event = $._data($(this)[0],"events");
                // 仅对未绑定事件的按钮进行绑定
                if (!event || !event["click"]){
                    $(this).click(function () {
                        var fileDom = $(this).parent().parent();
                        var index = fileDom.data('index');
                        if (index){
                            deleteTempFile(index);
                        }
                        fileDom.remove();
                    })
                }
            })
        }
        // 删除待上传的文件(从文件队列中删除文件)
        function deleteTempFile(index){
            if (index === 0){
                // 清空文件队列中所有数据
                for (const key in uploadList) {
                    delete uploadList[key];
                }
                // 隐藏上传按钮
                $('#preUpAction').hide();
            }else{
                delete uploadList[index];
                var number = Object.keys(uploadList).length;
                // 若上传文件队列中无数据则隐藏上传按钮
                if (number <= 0){
                    $('#preUpAction').hide();
                }
            }
        }
    });
    //隐患上报全流程 。(隐患上报部分) end
@@ -755,38 +982,150 @@
    /*隐患整改责任部门  选择 end*/
    <!--layui图片文件上传-->
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
    // layui.use('upload', function () {
    //     var $ = layui.jquery
    //         , upload = layui.upload;
    //
    //     //普通图片上传
    //     var uploadInst = upload.render({
    //         elem: '#postRectifyPhotoUpload'
    //         , url: ctx + 'tr/upload'
    //         , before: function (obj) {
    //             //预读本地文件示例,不支持ie8
    //             obj.preview(function (index, file, result) {
    //                 $('#thumbImgPostRectifyPhoto').attr('src', result); //图片链接(base64)
    //             });
    //         }
    //         , done: function (res) {
    //             //如果上传失败
    //             if (res.code > 0) {
    //                 return layer.msg('上传失败');
    //             }
    //             //上传成功
    //             $('#postRectifyPhoto').val(res.imageUrl);
    //         }
    //         , error: function () {
    //             //演示失败状态,并实现重传
    //             var msgText = $('#msgTextPostRectifyPhoto');
    //             msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
    //             msgText.find('.demo-reload').on('click', function () {
    //                 uploadInst.upload();
    //             });
    //         }
    //     });
    // });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#postRectifyPhotoUpload'
            , url: ctx + 'tr/upload'
            , before: function (obj) {
                //预读本地文件示例,不支持ie8
                obj.preview(function (index, file, result) {
                    $('#thumbImgPostRectifyPhoto').attr('src', result); //图片链接(base64)
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#postRectifyPhoto').val(res.imageUrl);
            }
            , error: function () {
                //演示失败状态,并实现重传
                var msgText = $('#msgTextPostRectifyPhoto');
                msgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                msgText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
    layui.use('upload', function() {
        var $ = layui.jquery;
        upload = layui.upload;
        var uploadList = {};
        var urls = []
        //多文件列表示例
        var postFileListDom = $('#postFileList')
        var uploadListIns = upload.render({
            elem: '#postChooseList',
            url: ctx + 'tr/upload' ,
            accept: 'file',
            multiple: true,
            number: 3,
            auto: false,
            bindAction: '#postUpAction',
            choose: function(obj) {
                // 展示上传按钮
                $('#postUpAction').show();
                // 将每次选择的文件追加到文件队列
                uploadList = obj.pushFile();
                const len = postFileListDom.find('.file-list-item2').length;
                // 还可以上传的文件数量
                const limit = 3 - len;
                var number = 0;
                // 预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
                obj.preview(function(index, file, result){
                    if (number < limit){
                        number++;
                        appendFile(index, file.name, result);
                    }else{
                        deleteTempFile(index)
                    }
                })
            },
            // before: function(obj){
            //     layer.load(1);
            // },
            //上传完毕回调
            //当文件全部被提交后,才触发
            allDone: function (obj) {
                layer.msg("已上传 "+obj.successful+" 个文件");
                layer.closeAll('loading');
                deleteTempFile(0)
            },
            done: function(res, index, upload){
                postFileListDom.find('.file-temp2').each(function () {
                    if (!res || res.code > 0){
                        // 若上传失败,则直接移除
                        return layer.msg('上传失败');
                        $(this).remove();
                    }else{
                        $(this).removeClass('file-temp2');
                        $(this).find('.file-cancel2').remove();
                        $(this).find('.layui-badge2').remove();
                        urls.push(res.imageUrl)
                    }
                    $('#postRectifyPhoto').val(urls.join(','));
                })
            },
            error: function(index, upload) {
                var tr = postFileListDom.find('tr#upload-' + index),
                    tds = tr.children();
                tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
        // 预览选择的文件
        function appendFile(index, name, result) {
            const dom = '<div class="file-list-item2 file-temp2" data-index="'+index+'"><div><img src="'+result+'" alt="'+name+'"><span class="layui-badge2 layui-bg-blue">待上传</span></div>' +
                '<div><input type="button" class="file-cancel2" value="删除"></div></div>';
            postFileListDom.append(dom);
            fileCancelEvent();
        }
        // 为待上传文件【取消】按钮添加点击事件
        function fileCancelEvent() {
            postFileListDom.find('.file-cancel2').each(function () {
                const event = $._data($(this)[0],"events");
                // 仅对未绑定事件的按钮进行绑定
                if (!event || !event["click"]){
                    $(this).click(function () {
                        var fileDom = $(this).parent().parent();
                        var index = fileDom.data('index');
                        if (index){
                            deleteTempFile(index);
                        }
                        fileDom.remove();
                    })
                }
            })
        }
        // 删除待上传的文件(从文件队列中删除文件)
        function deleteTempFile(index){
            if (index === 0){
                // 清空文件队列中所有数据
                for (const key in uploadList) {
                    delete uploadList[key];
                }
                // 隐藏上传按钮
                $('#postUpAction').hide();
            }else{
                delete uploadList[index];
                var number = Object.keys(uploadList).length;
                // 若上传文件队列中无数据则隐藏上传按钮
                if (number <= 0){
                    $('#postUpAction').hide();
                }
            }
        }
    });
    //隐患上报全流程 。(隐患整改部分) end
@@ -816,3 +1155,48 @@
</script>
</body>
</html>
<style>
    #preFileList{
        display: flex;
        align-items: flex-start;
        margin-top: 10px;
    }
    #postFileList{
        display: flex;
        align-items: flex-start;
        margin-top: 10px;
    }
    .file-list-item1,.file-temp1,.file-list-item2,.file-temp2{
        width: 100px;
        margin-right: 10px;
    }
    [class^="file-list-item"] div:nth-child(1){
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    [class^="file-list-item"] div:nth-child(1) img{
        width: 100px;
        height: 100px;
    }
    [class^="file-list-item"] div:nth-child(1) .layui-badge1,.layui-badge2{
        position: absolute;
        left: 2px;
        top: 2px;
    }
    [class^="file-list-item"] div:nth-child(2){
        width: 100%;
        height: 36px;
        text-align: center;
        line-height: 36px;
        margin-top: 4px;
    }
    [class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]{
        width: 100%;
        height: 36px;
    }
    [class^="file-list-item"] div:nth-child(2) [class^="file-cancel"]:hover{
        background: #ED5565;
        color: #fff;
    }
</style>