|
@@ -0,0 +1,395 @@
|
|
|
+<%@ 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="id"/>
|
|
|
+ <form:hidden path="logisticsBatchID"/>
|
|
|
+ <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} <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"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">图片:</label><font color="#a9a9a9">(若不方便上传文件,可用图片代替)</font><br>
|
|
|
+ <div class="controls upload-content" id="secondHandImage">
|
|
|
+ <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="保 存"/>
|
|
|
+ <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+" <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>
|