list.html 3.82 KB
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Yoho!Buy运营平台</title>
    <script src="/ufoPlatform/js/include.js?version=6.9.3"></script>
</head>
<body class="easyui-layout" fit="true">
<div region="north" style="height:230px;">
    <script>
        document.write(addHead('订单管理', '扫描快递单截屏'));
    </script>
    <div style="margin-left: 10px;margin-top: 30px">
        <div style="border:1px solid #ddd;border-radius:5px 5px 5px 5px;">
            <div style="margin-left: 10px;margin-top: 20px;margin-bottom: 20px">
            <input id="waybillCode" name="waybillCode" />
            <a id="searchBtn" class="btn-info">筛选</a>
			<a id="clearBtn" class="btn-success">清除筛选</a>
		    </div>	
        </div>
	</div>
</div>

<div id="screenshotsDiv" region="center">
	<table id="screenshotsTable">
	</table>
</div>

<div id="w" class="easyui-window" title="预览" data-options="modal:true,closed:true" style="width:500px;height:600px;padding:10px;">
	<div align="center">
	   <img id="showImg" height="500px;" width="400px;" onclick="window.open(this.src)"/>
	</div>
</div>
<script>
$(function() {
    $("#waybillCode").textbox({
        prompt: "卖家物流单号"
    });
    
    $("#searchBtn").linkbutton({
    	iconCls : "icon-search",
        onClick: function () {
            var param = {};
            param.waybillCode = $('#waybillCode').val();
            $("#screenshotsTable").myDatagrid("load", param);
        }
    });

    // 清除筛选
    $("#clearBtn").linkbutton({
    	iconCls : "icon-search",
        onClick: function () {
            $('#waybillCode').textbox('setValue', '');
        }
    });
    
    loadMainList();
    
});

function loadMainList(){
	$("#screenshotsTable").myDatagrid({
        fit: true,
        fitColumns: true,
        striped: true,
        url: contextPath + "/expressScreenshots/queryByWaybillCode",
        method: 'POST',
        loadFilter: function (data) {
        	var temp = defaultLoadFilter(data);
            temp=null==temp?[]:temp;
            temp.rows = temp.list;
            return temp;
        },
        columns: [[{
            title: "卖家物流单号",
            field: "waybillCode",
            width: 20,
            align: "center"
        },  {
            title: "截屏",
            field: "picList",
            width: 80,
            align: "center",
            formatter: function (value, rowData, rowIndex) {
            	var imageStr = "<table><tbody><tr>";
            	if(value != null){
            		for (var i = 0 ;i < value.length; i++){
                        imageStr += "<td><a href='javascript:void(0)' onclick='openModal("+"\""+value[i].url+"\""+")'><img height='200px;' width='150px;' src='"+value[i].url+"'/></a>";
                        imageStr += "<br><font color='black'>创建时间:"+value[i].createTimeStr+"<br>操作人:"+value[i].createUserName + "</font>";
                        imageStr += "</td>";
                        if((i+1) % 5 == 0 && 0 != i && i != (value.length - 1)) {
                            imageStr += "</tr><tr>";
                        }
                    }
            	}
                
                imageStr = imageStr + "</tr></tbody></table>";
                
                return imageStr;
            }
        }]],
        cache: false,
        pagination: true,
        pageSize: 10,
        idField: "id",
        singleSelect: true,
        onLoadSuccess: function (data) {
        	if (data.total == 0) {  
                 $(this).datagrid('appendRow', { waybillCode: '<div style="text-align:center;color:red">无数据!</div>' }).datagrid('mergeCells', { index: 0, field: 'waybillCode', colspan: 2 })          
            }
        }
    });
}

function openModal(imageUrl){
	$("#showImg").attr("src",imageUrl);
	$("#w").window("open");
}


</script>
</body>
</html>