shouhuobang
/
adm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
							<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>订单管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body class="content">
<div class="order-body">
	<div class="order-tiaojian back-gray">
		<div class="tiaojian-part1" id = "conditions">
			<div class="fl f12-gray4-op">所选条件：</div>
		</div>
		<div class="tiaojian-part2 fr demoTable">
			<button class="layui-btn order-bnt1"  data-type="reload" >搜索</button>
			<button class="layui-btn  order-bnt2" data-type="reset">重置</button>
			<a href="#" id="toggle" class="top">收起</a>
		</div>
	</div>
	<form class="layui-form"  action="javascript:void(0)"  id = "orderForm">
		<div class="order-select back-border" id="content">

			<div class="layui-inline">
				<label class="f12-gray4">订单编号：</label>
				<input onchange = "changeSelectCon(0,this,'inp')" class="search-select" type="tel" name="orderNo"  id ="orderNo" lay-verify="orderNo"  autocomplete="off" placeholder="请输入订单编号" class="y-left-input">
			</div>
			<div class="layui-inline">
				<label class="f12-gray4">创建时间：</label>
				<input  class="search-select" type="text"  id="dates" placeholder="日期（区间）"   readonly />
			</div>
			<div class="layui-inline">
				<label class="f12-gray4">状态：</label>
				<div  class=""  style="display:inline-block" id = 'state'></div>
			</div>

			<div class="layui-inline">
				<label class="f12-gray4">机台号：</label>
				<input onchange = "changeSelectCon(3,this,'inp')"   class="search-select" type="tel" name="equipmentId"  id ="equipmentId" lay-verify="equipmentId"  autocomplete="off" placeholder="请输入机器号" class="layui-input">
			</div>
			<div class="d-dashed" style="margin: 10px 0;"></div>
			<div class="layui-inline">
				<label class="f12-gray4">机器名称：</label>
				<input onchange = "changeSelectCon(4,this,'inp')"   class="search-select" type="tel" name="equipmentName"  id ="equipmentName" lay-verify="equipmentName"  autocomplete="off" placeholder="请输入机器名称" class="layui-input">
			</div>
			<!--<div class="layui-inline">
				<label class="f12-gray4">货道号：</label>
				<input onchange = "changeSelectCon(5,this,'inp')"   class="search-select" type="tel" name="freightwayId"  id ="freightwayId" lay-verify="freightwayId"  autocomplete="off" placeholder="请输入货道号" class="layui-input">
			</div>-->
			<div class="layui-inline">
				<label class="f12-gray4">支付方式：</label>
				<div  class=""  style="display:inline-block" id = 'payMode'></div>
			</div>
			<div class="layui-inline">
				<label class="f12-gray4">玩家ID：</label>
				<input onchange = "changeSelectCon(7,this,'inp')"   class="search-select" type="tel" name="personId"  id ="personId" lay-verify="personId"  autocomplete="off" placeholder="请输入玩家ID" class="layui-input">
			</div>
			<div class="d-dashed" style="margin: 10px 0;"></div>
			<div class="layui-inline">
				<label class="f12-gray4">总销售金额:</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="sumAmt" name="sumAmt" style="border:none;color: red" disabled="disabled" class="search-select">
				</div>
			</div>
			<div class="layui-inline">
				<label class="f12-gray4">总订单笔数:</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" id="number" name="number" style="border:none;color: red" disabled="disabled" class="search-select">
				</div>
			</div>


		</div>
	</form>

</div>

<div class="shadow-content" style="margin:1.5rem;">
	<table id="orderManage" lay-filter="tableFilter"></table>
</div>
</body>
<script src="../../js/min-loader-next.js"></script>
<script type="text/html" id="barDemo">
	<!--<a class="layui-btn layui-btn-xs" lay-event="look">订单详情</a>-->
	{{#  if(d.state == '00' && d.isUsed == '01' && d.pickupStt == '00' ){ }}
	<a class="layui-btn layui-btn-xs" lay-event="cancel">订单作废</a>
	{{#  } }}
</script>
<script>
	$("#toggle").click(function() {
		$(this).html($("#content").is(":hidden") ? "收起" + "<i class='iconfont up iconSelect_drop-down'/></i>" : "展开" +
				"<i class='iconfont up iconSelect_drop-down'/></i>");
		$("#content").slideToggle();
	});
	layui.use(['table','laydate','form'], function(){
		var laydate = layui.laydate;
		//日期范围
		laydate.render({
			elem: '#dates'
			,range: true
			,format:'yyyyMMdd'
			,done: function(value, date, endDate){
				changeSelectCon(1,"dates",'date',value)
			}
		});
		form = layui.form;
		initSelect('state', "IS_DRAW", "state", '', true);
		initSelect('payMode', "PAY_TYPE", "payMode", '', true);
		form.on('select(state)', function(data){
			changeSelectCon(2, data.elem, "sel","state");
		});
		form.on('select(payMode)', function(data){
			changeSelectCon(6, data.elem, "sel","payMode");
		});
		form.render();
	});
	var table;
	layui.use('table', function(){
		table = layui.table;
		// 加载数据
		table.render({
			id: 'orderManage'
			,elem: '#orderManage'
			,limit:10
			// ,height: 315
			,url: 'ShOrderManageAction/queryOrder' //数据接口
			,method: 'post'
			,where:{MINView:"JSON"}
			,page: true //开启分页
			,cols: [[ //表头
				{field:'num', title: '序号',width:'5%', type:'numbers', fixed: true, align: 'center'}
				,{field: 'id', title: '编号', width:'10%', sort: true, fixed: 'left'}
				,{field: 'productName', title: '产品信息', width:'12%'}
				,{field: 'equipmentId', title: '机器编号', width:'8%'}
				,{field: 'equipmentName', title: '机器名称', width:'8%'}
				//,{field: 'equrelId', title: '货道编号', width:'8%'}
				,{field: 'personId', title: '玩家ID', width:'8%'}
				,{field: 'personName', title: '消费者信息', width:'8%'}
				,{field: 'isDrawdesc', title: '状态', width:'8%'}
				,{field: 'pickupSttdesc', title: '取货状态', width:'8%'}
				,{field: 'payModedesc', title: '支付类型', width:'8%'}
				,{field: 'orderAmt', title: '订单价格', width:'8%'}
				,{field: 'createTime', title: '创建时间', width: '14%'}
				,{field: 'operate', title: '操作', width: '8%', toolbar: '#barDemo',fixed: 'right'}
			]]
			,done: function(res, curr, count){
				//如果是异步请求数据方式，res即为你接口返回的信息。
				//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
				console.log(res);
				//得到当前页码
				console.log(curr);
				$('#number').val(res.statistics.number);
				$('#sumAmt').val(res.statistics.sumAmt);
				//得到数据总量
				console.log(count);
			}
			,even: true //开启隔行背景

		});

		// 监听工具条（操作）
		table.on('tool(tableFilter)', function(obj){ //注：tool是工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			if(layEvent === 'look'){ //详情
				lookDetail(data);
			}else if (layEvent ==='cancel'){
				layer.confirm('真的要作废订单吗', function(index){
					$.request({
						action : '../../ShOrderManageAction/orderCancel',
						data : {
							id : id ,//订单id
						},
						success : function(data) {
							//成功后刷新
							var btn=$(".layui-laypage-btn")[0];
							btn.click();
							layer.alert('操作成功!', {
								icon: 6,
								title: "提示"
							});
						},
						error : function(data) {
							layer.alert('操作失败!', {
								icon: 5,
								title: "提示"
							});
						}
					});
				});
			}
		});

		var $ = layui.$, active = {
			getCheckData: function(){ //获取选中数据

				var checkStatus = table.checkStatus('orderManage')
						,data = checkStatus.data;
				layer.alert(JSON.stringify(data));
			}
			,getCheckLength: function(){ //获取选中数目
				var checkStatus = table.checkStatus('orderManage')
						,data = checkStatus.data;
				layer.msg('选中了：'+ data.length + ' 个');
			}
			,isAll: function(){ //验证是否全选
				var checkStatus = table.checkStatus('orderManage');
				layer.msg(checkStatus.isAll ? '全选': '未全选')
			}
			//搜索
			,reload: function(){
				loadAA();
			}
			//重置
			,reset : function(){
				$('#orderForm')[0].reset();
				$("#conditions").html('<div class="fl f12-gray4-op mt4">所选条件：</div>');
			}
		};
		$('.layui-btn').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});

	});
	function lookDetail(data) {
		// 寄存当前数据
		layui.sessionData("ROW_DATA", {key:"NOW_ROW", value : data});
		openMainTabPage('101006-01', '订单详情', 'orderManage/details.html', '', '101006', loadAA);
	}


	function loadAA() {
		//状态
		var state = $("#state").find("option:selected").val();
		//时间
		var dates = $("#dates").val();
		//订单号
		var orderNo = $("#orderNo").val();

		var equipmentId = $("#equipmentId").val();
		var equipmentName = $("#equipmentName").val();
		var freightwayId = $("#freightwayId").val();
		var payMode = $("#payMode").find("option:selected").val();
		var playerId = $("#personId").val();
		//执行重载
		table.reload('orderManage', {
			page: {
				curr: 1 //重新从第 1 页开始
			}
			,where: {
				orderNo : orderNo,
				state : state,
				dates : dates,
				equipmentId : equipmentId,
				equipmentName : equipmentName,
				freightwayId : freightwayId,
				payMode : payMode,
				playerId : playerId
			}
		});
	}
	function changeSelectCon(index, t, type, dateValue){
		debugger;
		if (type == "date") {
			if (isEmpty(dateValue)) {
				$("#search" + index).remove();
			} else {
				$("#search" + index).remove();
				if (isEmpty($("#search" + index).attr("name"))) {
					$("#conditions").append(getSelectConHtml(index, t, type,dateValue));
				}
			}
		} else if (type == 'inp') {
			if (isEmpty($(t).val())) {
				$("#search" + index).remove();
			} else {
				$("#search" + index).remove();
				if (isEmpty($("#search" + index).attr("name"))) {
					$("#conditions").append(getSelectConHtml(index, t, type));
				}
			}
		} else {
			if (isEmpty($(t).val())) {
				$("#search" + index).remove();
			} else {
				$("#search" + index).remove();
				if (isEmpty($("#search" + index).attr("name"))) {
					$(t).attr("id","subjects");
					$("#conditions").append(getSelectConHtml(index, t, type));
				}
			}
		}
	}
	var array = new Array('订单编号','创建时间','状态','机台号','机器名称','货道号','支付方式','玩家ID');
	function getSelectConHtml(index, t, type,dateValue){
		var name;
		var value;
		if(type == "inp"){
			value = t.value.substr(0,5)+"..";
		}
		if (type == "date") {
			value = dateValue;
		}
		if(type == "sel"){
			if(index == '2'){
				value = $("#state").find("option:selected").text();
			}
			if(index == '6'){
				value = $("#payMode").find("option:selected").text();
			}

		}
		if (type == "date") {
			name = $("#"+t).attr("id");
		} else {
			name = $(t).attr("id");
		}
		var html = '<div class="fl xuanzhong-active" id = "search' + index + '" name = "' + name + '" onclick = "removeSearch(this)">' +
				'<div class="fl">' + array[index] + '</div>' +
				':<i>'+value+'</i>' +
				'<svg class="icon" aria-hidden="true">' +
				'<use xlink:href="#iconicon_close1"></use>' +
				'</svg>' +
				'</div>';
		return html;
	}
	function removeSearch(t) {
		if ($(t).attr("name") == 'subjects') {
			initSelect('state', "IS_DRAW", "state", ' ', true);
			initSelect('payMode', "PAY_TYPE", "payMode", ' ', true);
			form.render();
			$(t).remove();
		} else {
			$("#"+$(t).attr("name")).val('');
			$(t).remove();
		}
	}
</script>

</html>