caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
							<%@ taglib prefix="from" uri="/struts-tags" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>订单列表</title>
    <meta name="decorator" content="default"/>
    <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#inputForm").validate({
                submitHandler: function (form) {
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0
        }

        a {
            list-style: none;
            text-decoration: none
        }

        i {
            font-style: normal
        }

        body {
            background-color: rgb(228, 228, 228);
        }

        h3 {
            line-height: 20px;
            padding: 20px 0 20px 15px;
            border-bottom: 1px solid #CCCCCC;
            font-weight: normal
        }

        .body-margin {
            margin: 0 26px;
        }

        .left-span {
            width: 3px;
            height: 20px;
            margin-right: 10px;
            background-color: #00A6C7;
            display: inline-block;
            vertical-align: bottom
        }

        .list-div label {
            display: inline-block;
            width: 70px;
        }

        .ship-shop {
            background-color: #fff;
            margin-top: 20px;
            min-height: 500px;
        }

        .table th {
            color: #000;
            font-weight: normal
        }

        .table th, .table td {
            height: 35px;
            border: 1px solid #CCCCCC;
            text-align: center;
            padding: 5px 0;
        }

        .select-all td {
            border: 0
        }

        .select-all label {
            display: inline-block;
            padding-left: 5px;
            vertical-align: 1px;
        }

        .select-ship span {
            cursor: pointer;
            display: inline-block;
            width: 100px;
            line-height: 35px;
            text-align: center;
            border-radius: 5px;
            background-color: #00A6C7;
            color: #fff;
        }

        .select-ship span:last-child {
            margin-left: 20px;
        }

        .status-span span {
            display: inline-block;
            background-color: #00A6C7;
            padding: 7px 20px;
            color: #fff;
            cursor: pointer
        }

        .status-span span:nth-child(1) {
            margin-right: 10px;
        }

        .status-span span:nth-child(2) {
            margin-left: 10px;
        }

        .select-ship span {
            cursor: pointer;
            display: inline-block;
            width: 100px;
            line-height: 35px;
            text-align: center;
            border-radius: 5px;
            background-color: #00A6C7;
            color: #fff;
        }

        .select-ship span:last-child {
            margin-left: 20px;
        }

        .upload-content .conList ol li {
            width: 114px;
            min-height: 80px;
            text-align: center;
            background: #fff;
            position: relative;
            top: 120px;
            margin-left: 2px;
        }

        .upload-content {
            margin-top: -70px;
            display: inline-block;
        }
        .upload-content .conList .btn:nth-of-type(1) {
            width: 90px;
            height: 100px;
            border: 2px solid #eee;
            background: #fff;
            position: relative;
        }
        .upload-content .conList .btn:nth-of-type(1)>div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
        }
        .upload-content .conList .btn:nth-of-type(1) span {
            font-size: 35px;
        }
        .upload-content .conList .btn:nth-of-type(1) h5 {
            color: #666;
        }
        .cancel-upload {
            background: transparent;
            border: none;
            box-shadow: none;
            position: relative;
            top: -38px;
            left: -25px;
            cursor: pointer;
            z-index: 100;
        }
        .hide-pic {
            display: none !important;
        }
        .controls .conList{
            display: inline-block;
            margin-right: 15px;
        }
        .conList .btn:nth-of-type(1){
            margin-left: 25px;
        }
    </style>
</head>
<body>
<div class="body-margin">
    <h3><span class="left-span"></span>订单列表--上传资质</h3>
    <div class="ship-shop">
        <br><br>
        <form:form id="inputForm" modelAttribute="logisticsRecord" action="${ctx}/order/saveQualification" method="post" class="form-horizontal">
            <sys:message content="${message}"/>
            <form:hidden path="logisticsBatchID"/>
            <input type="hidden" name="recordId" value="${recordId}">
            <div class="control-group">
                <label class="control-label">SN码：</label>
                <div class="controls">
                    <form:textarea path="sn" style="width: 350px;height: 90px;" placeholder="若有多个，可用逗号隔开" htmlEscape="false" maxlength="250" class="input-xlarge "/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">资质文件：</label>
                <div class="controls">
                    <div id='file-list-display'>
                        <c:if test="${not empty logisticsRecord.fileList}">
                            <c:forEach items="${logisticsRecord.fileList}" var="file" varStatus="statusIndex">
                                <p>
                                        ${file.fileName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" class="delBtn" data-id="${file.ossName}">删除</a>
                                            <input type="hidden" name="files" value="${file.fileName}---${file.ossName}"/>
                                </p>

                            </c:forEach>
                        </c:if>
                    </div>
                    <div class="upload" style="box-sizing: border-box;padding-left: 120px;" >
                        <input type="file" id="controlsFiles" style="position: relative;padding-left: 0;"/>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">图片：</label><font color="#a9a9a9">（若不方便上传文件，可用图片代替）</font><br>
                <div class="controls upload-content" id="secondHandImage" style="margin-left: 0;">
                    <div class="conList">
                        <form:hidden value="${logisticsRecord.imageList.size()>0?logisticsRecord.imageList.get(0):''}" id="image1" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image1" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>1?logisticsRecord.imageList.get(1):''}" id="image2" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image2" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>2?logisticsRecord.imageList.get(2):''}" id="image3" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image3" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>3?logisticsRecord.imageList.get(3):''}" id="image4" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image4" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>4?logisticsRecord.imageList.get(4):''}" id="image5" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image5" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>5?logisticsRecord.imageList.get(5):''}" id="image6" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image6" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>6?logisticsRecord.imageList.get(6):''}" id="image7" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image7" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>7?logisticsRecord.imageList.get(7):''}" id="image8" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image8" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>8?logisticsRecord.imageList.get(8):''}" id="image9" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image9" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                    <div class="conList hide-pic">
                        <form:hidden value="${logisticsRecord.imageList.size()>9?logisticsRecord.imageList.get(9):''}" id="image10" path="images" htmlEscape="false" maxlength="255" class="input-xlarge"/>
                        <sys:ckfinder input="image10" type="images" uploadPath="/photo" selectMultiple="false" maxWidth="100" maxHeight="100"/>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;
                <input id="btnCancel" class="btn" type="button" value="取 消" onclick="history.go(-1)"/>
            </div>
        </form:form>
    </div>
</div>
        <script>
            //图片初始化
            $(function () {
                $('.upload-content .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
                $('.upload-content .conList .btn:nth-of-type(2)').after('<img class="cancel-upload" src="/static/images/close-btn1.png">').remove();
                $('.upload-content .conList').find('.cancel-upload').hide();
                var observeEle = document.getElementsByClassName('upload-content')[0];
                var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
                var MutationObserverConfig={
                    childList: true,
                    subtree: true,
                    characterData: true
                };
                var observer = new MutationObserver(function(mutations){
                    $.each(mutations, function(index,item) {
                        if (item.type === 'childList') {
                            // 在创建新的 element 时调用
                            var target = $(item.target),
                                thisWrapper = target.closest('.conList'),
                                nextEle = thisWrapper.next();
                            thisWrapper.find('li').css('z-index',99);
                            thisWrapper.find('.cancel-upload').show();
                            if(nextEle.hasClass('hide-pic')) {
                                nextEle.removeClass('hide-pic');
                            }
                        }
                    })
                });
                observer.observe(observeEle,MutationObserverConfig);

                $('body').on('click','.upload-content li',function() {
                    var index = $(this).closest('.conList').index() + 1,
                        str = 'image'+index+'FinderOpen';
                    eval(str+'()');
                });
                $('body').on('click', '.cancel-upload',function() {
                    var wrapper = $(this).closest('.conList');
                    wrapper.find('li').css('z-index','-1');
                    wrapper.find('input').val('');
                    $(this).hide();
                    if ($('.cancel-upload:visible').length < 9) {
                        wrapper.addClass("hide-pic");
                    }else{
                        wrapper.removeClass("hide-pic");
                    }
                    wrapper.parent().append(wrapper.clone());
                    wrapper.remove();
                    $(".conList").each(function(i,ele){
                        if($(ele).find("input.input-xlarge").val()){
                            $(ele).next().removeClass("hide-pic")
                        }
                    })
                });
                $(window).on("load", function(){
                    setTimeout(function(){
                        $("#secondHandImage").find("input.input-xlarge").each(function(i,ele){
                            if($(ele).val()){
                                $(ele).next().find("li").css("z-index","99");
                                $(ele).parents(".conList").find(".cancel-upload").show();
                                $(ele).parents(".conList").next().removeClass("hide-pic")
                            }
                        })
                    },500);
                });

                var controlsFiles = document.getElementById("controlsFiles");
                controlsFiles.addEventListener("change", function () {
                    $('#uploadFileName').val(name.substring(0, name.indexOf('.')));
                    var files = $('#controlsFiles').prop('files');
                    var data = new FormData();
                    var url = "${ctx}/oss/cmOssArchive/fileUpload";
                    data.append('file', files[0]);
                    $.ajax({
                        url: url,
                        data: data,
                        type: "POST",
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function (res) {
                            var html="<p>"+res.fileName+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class='delBtn' href='javascript:void(0);' data-id='"+res.ossName+"'>删除</a>" +
                                "<input type='hidden' name='files' value='"+res.fileName+"---"+res.ossName+"'/></p>";
                            $("#file-list-display").append(html);
                            $("#controlsFiles").val("");
                        },
                        error: function (error) {
                            alertx(error);
                        }
                    });
                });

                //删除文件
                $("body").on("click", ".delBtn", function(){
                    var ossName = $(this).attr("data-id");
                    console.log(ossName);
                    $(this).parent().remove();
                    $.ajax({
                        url: "${ctx}/oss/cmOssArchive/deleteOssFile",
                        data: {"ossName": ossName},
                        async: false,
                        type: "POST"
                    });

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