dever-product
/
churen


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<meta name="author" content="siweiyong 2602812659@qq.com"/>
<title>订货下单</title>
<link rel="stylesheet" href="../script/lib/miniui/themes/default/miniui.css">
<link rel="stylesheet" href="../script/lib/layui/css/layui.css" />
<link rel="stylesheet" href="../script/lib/cashier/common.css">
<link rel="stylesheet" href="../script/lib/layui/admin/modules/plugin/formselects/formselects.css" media="all" />
<script src="../script/lib/jquery/jquery.min.js"></script>
<script src="../script/lib/miniui/miniui.js"></script>
<script src="../script/lib/layui/layui.js"></script>
<script><{Dever::script()}></script>
<script src="../script/dever/core.js"></script>
</head>
<body style="background: #F6F7F9;">
<div class="main">
<form class="layui-form" lay-filter="form">
	<div class="layui-row">
		<div class="main_left layui-col-xs12 layui-col-md3">
			<div class="layui-row">
				<div class="top">
					<i class="layui-icon layui-icon-app"></i>商品列表
				</div>
				<div class="left_main">
					<input id="key" class="mini-textbox" placeholder="请输入商品名称" onenter="onKeyEnter"/>
    				<a class="mini-button" onclick="search()">查询</a> 
    				<ul id="tree1" class="mini-tree" url="<{$url}>" showTreeIcon="true" textField="name" idField="id" expandOnLoad="true" onNodeClick="onNodeClick">
					</ul>
				</div>
			</div>
		</div>
		<div class="main_right layui-col-xs12 layui-col-md9">
			<div class="layui-row">
				<div class="top">
					<label>选择工厂：</label>
					<div class="layui-input-inline">

						<div><select xm-select="factory_id" xm-select-skin="normal" xm-select-search="<{$search}>" xm-select-search-type="dl" xm-select-radio="" class="update_value form-control layui-input layui-select" name="factory_id" id="factory_id"  ></select></div>

					</div>
					<div class="layui-input-inline">
						<button class="layui-btn layui-btn-button" type="button" style="vertical-align: middle;margin-bottom: 2px;" onclick="setFactory()">确认选择</button>
					</div>
				</div>
				<div class="goods_list">
					<table class="layui-table">
						<thead>
							<tr>
								<th lay-data="{field:'id'}">商品编码</th>
								<th lay-data="{field:'name'}">商品名称</th>
								<th lay-data="{field:'price', edit: 'text'}">售价（元）</th>
								<th lay-data="{field:'number', edit: 'text'}">数量</th>
								<th lay-data="{field:'operation'}">操作</th>
							</tr>
						</thead>
						<tbody id="goods">
							
						</tbody>
					</table>
				</div>
				<div class="total ft16">
					合计：【<span> 总金额：<i class="totalMoney">0.00</i> </span>】【<span> 总数量：<i class="totalQuantity">0</i> </span>】
				</div>
				<table class="reading layui-table" lay-even="">
					<tbody>
						<tr>
							<td>选择仓库</td>
							<td colspan="3">
								<div class="layui-input-inline">
									<select xm-select="store_id" xm-select-skin="normal" xm-select-search="<{$search_store}>" xm-select-search-type="dl" xm-select-radio="" class="update_value form-control layui-input layui-select" name="store_id" id="store_id"  ></select>
								</div>
								<!--
								<button class="card_reading layui-btn">读卡</button>
								<a href="#" class="registration layui-btn layui-btn-primary">会员登记</a>
								-->
							</td>
						</tr>
						<tr>
							<td>订单备注：</td>
							<td><textarea class="layui-textarea" name="info" id="info" rows="" cols="" maxlength="200" placeholder="请输入订单备注"></textarea></td>
						</tr>
						<!--
						<tr>
							<td>会员卡号：</td>
							<td></td>
							<td>会员姓名：</td>
							<td></td>
						</tr>
						<tr>
							<td>会员级别：</td>
							<td></td>
							<td>有效期：</td>
							<td></td>
						</tr>
						<tr>
							<td>可用积分：</td>
							<td></td>
							<td>可用储值：</td>
							<td></td>
						</tr>
						-->
					</tbody>
				</table>
				<div class="towbtn">
					<input type="button" id="settlement" value="订货下单">
				</div>
			</div>
		</div>
	</div>
</div>
<div class="mask_box">
	<div class="mask"></div>
	<div class="box">
		<div class="box_top">结算</div>
		<div class="box_block box_block1">
			<div class="block_left"><label for="">应付金额：</label></div>
			<div class="block_right"><input type="text" class="layui-input" value="23131" readonly style="border: none;" /></div>
		</div>
		<div class="box_block box_block2">
			<div class="block_left"><input type="checkbox" name="" />优惠券：</div>
			<div class="block_right">
				<select class="layui-select" name="" id="">
					<option value="0">请选择</option>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
				</select>
			</div>
			<div class="block_left">还需支付：</div>
			<div class="block_right"><input type="text" class="layui-input" value="32432" readonly style="border: none;" /></div>
		</div>
		<div class="box_block box_block3">
			<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">现金支付：</label></div>
			<div class="block_right">
				<input type="text" class="layui-input" />
			</div>
			<br style="clear: both;">
			<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">移动支付：</label></div>
			<div class="block_right">
				<input type="text" class="layui-input" />
			</div>
			<br style="clear: both;">
			<div class="block_left"><input type="radio" name="payment" /><label for="use_coupon">其他支付：</label></div>
			<div class="block_right">
				<input type="text" class="layui-input" />
			</div>
		</div>
		<div class="remark_mess">
			<div class="block_left">
				备注：
			</div>
			<div class="block_right">
				<textarea class="layui-textarea" name="" rows="" cols="" maxlength="200" placeholder="最多输入200字符"></textarea>
			</div>
			<br style="clear: both;">
			<div class="block_left">
				交易时间：
			</div>
			<div class="block_right">
				<input type="text" value="2018-11-23 08:23:43" class="layui-input" readonly style="border: none;" />
			</div>
		</div>
		<div class="bot">
			<input type="button" value="提交">
			<input type="text" value="取消">
		</div>
	</div>
</form>
</div>
<script>
	var form;
	layui.config(
	{
		base: '../script/lib/layui/admin/' //静态资源所在路径
		,version: true
	}).extend(
	{
		index: 'lib/index', //主入口模块
		formSelects: 'plugin/formselects/formselects'
	}).use(['index', 'contlist', 'table', 'form', 'formSelects','layer'], function()
	{
		var table = layui.table;
		form = layui.form; 
		var formSelects = layui.formSelects;
	});

	$(function()
	{
		$("#settlement").click(function(){
			var url = '<{$submit}>';
			var factory_id = '<{$factory_id}>';
			var store_id = $('.xm-select-parent[fs_id="store_id"] span[fsw="xm-select"]').attr('value');
			console.info(store_id);
			if (!store_id) {
				layui.layer.alert('请先选择仓库');
				return;
			}

			layui.layer.confirm('确定订货下单吗？', function() {
				var info = $('#info').val();
				var goods_string = JSON.stringify(goods);

				var data = {};
				data = {store_id:store_id, factory_id:factory_id, goods:goods_string, info:info};
				$.getJSON(url, data, function(t) {
					if (t.status == 1) {
						layui.layer.alert('订货下单成功', function(index){
						  location.href = t.data;
						  layer.close(index);
						});
					} else {
						layui.layer.alert(t.msg);
					}
				});
			});

			//$(".mask_box").show();
		})
		$(".bot input:nth-child(2)").click(function(){
			$(".mask_box").hide();
		})

		$("#goods").on("keyup", ".goods_num", function() {
			var num = parseInt($(this).val());
			if (!num || num <= 0) {
				num = 1;
				$(this).val(1);
			}
	        var id = $(this).parent().attr('value');
	        goods[id].num = num;
			setTotal();
		})
	})

	mini.parse();
    var tree = mini.get("tree1");
    function search() 
    {
        var key = mini.get("key").getValue();
        if (key == "") {
            tree.clearFilter();
        } else {
            key = key.toLowerCase();                
            tree.filter(function (node) {
                var name = node.name ? node.name.toLowerCase() : "";
                if (name.indexOf(key) != -1) {
                    return true;
                }
            });
        }
    }
    function onKeyEnter(e)
    {
        search();
    }

    var goods = {};
	function onNodeClick()
	{
       	var tree=mini.get("tree1");
        node=tree.getSelectedNode();
  		if(node.end) {
  			var key = node.id;
  			if (!goods[key]) {
  				goods[key] = node;
  				goods[key].price = parseFloat(goods[key].price);
  				goods[key].min = parseFloat(goods[key].min);
  				if (goods[key].min) {
  					goods[key].num = goods[key].min;
  				} else {
  					goods[key].min = 1;
  					goods[key].num = 1;
  				}
  				
  				create(node);
  				setTotal();
  			} else {
  				add(key);
  			}
  		}
	}

	function get(key)
	{
		return $('#goods_' + key);
	}

	function create(node)
	{
		console.info(node);
		if (!get(node.id).length) {
			var addtr = '<tr class="mytr" id="goods_'+node.id+'">';
			addtr += '<td class="goods_id">'+node.id+'</td>';
			addtr += '<td class="goods_name">'+node.name+'</td>'	;					
			addtr += '<td class="goods_price">'+node.price+'</td>';
			addtr += '<td><div class="jiajian" value='+node.id+'><span class="jian" onclick="dec(\''+node.id+'\')">-</span><input type="text" value="'+node.num+'" class="goods_num"><span class="jia" onclick="add(\''+node.id+'\')">+</span></div></td>';					
			addtr += '<td><button class="delete_btn" onclick="del(\''+node.id+'\')">删除</button></td>';						
			addtr += '</tr>';
			$("#goods").append(addtr);
		}
	}

	function add(id)
	{
		goods[id].num += 1;
		get(id).find('.goods_num').val(goods[id].num);
		setTotal();
    }
	
	function dec(id)
	{
        goods[id].num -= 1;
        if (goods[id].num < goods[id].min) {
        	goods[id].num = goods[id].min;
        }

		get(id).find('.goods_num').val(goods[id].num);
		setTotal();
    }

    function del(id)
	{
        delete goods[id];
		get(id).remove();
		setTotal();
    }


	/*
	//点击 - 单价 - 可编辑
	$("#goods").on("click","td.danjia",function(){
		if(!$(this).is('.bj')){   
			var currentPrice = $(this).html();
			$(this).focus();
			$(this).addClass('bj').html('<input type="tel" class="layui-input" value="'+$(this).text()+'" />').find('input').focus().blur();    
		} 
	})
	*/
	
	function setTotal()
	{
		var cash = 0;
		var num = 0;
		for (var i in goods) {
			num += goods[i].num;
			cash += goods[i].price * goods[i].num;
		}
		$(".totalQuantity").html(num);
		$(".totalMoney").html(cash.toFixed(2)); 
	}

	function setFactory()
	{
		var factory_id = $('.xm-select-parent[fs_id="factory_id"] span[fsw="xm-select"]').attr('value');
		if (!factory_id) {
			layui.layer.alert('请选择工厂');
			return;
		}
		layui.layer.confirm('确定切换工厂吗？切换后现在选择的商品都将清空', function() {
			location.href = '<{$host}>&factory_id=' + factory_id;
		});
	}
</script>
</body>
</html>