<!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" onenter="onKeyEnter" value="请输入商品名称" onclick="setVal('key')"/> <a class="mini-button" onclick="search()">查询</a> <button class="layui-btn layui-btn-button" type="button" style="vertical-align: middle;margin-bottom: 2px;" onclick="addGoods()">一键添加</button> <button class="layui-btn layui-btn-button" type="button" style="vertical-align: middle;margin-bottom: 2px;" onclick="delGoods()">一键删除</button> <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 class="layui-input-inline" style="margin-left:20px"> <input id="search_key" class="mini-textbox" value="请输入商品名称" onclick="setVal('search_key')"/> <a class="mini-button" onclick="searchGoods()">搜索</a> </div> </div> <div class="goods_list" style="height:645px;"> <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:'p_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> <div class="towbtn"> <input type="button" id="settlement" value="确认设置"> </div> </div> </div> </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}>'; layui.layer.confirm('确定进行此项设置吗?', function() { var goods_string = JSON.stringify(goods); var data = {}; data = {factory_id:factory_id, goods:goods_string}; $.post(url, data, function(t) { t = JSON.parse(t); if (t.status == 1) { layui.layer.alert('商品设置成功', function(index){ location.href = t.data; layer.close(index); }); } else { layui.layer.alert(t.msg); } }); }); }) /* $("#goods").on("keyup", ".goods_num", function() { var num = parseInt($(this).val()); if (num < 0) { num = 1; $(this).val(1); } var id = $(this).parent().attr('value'); goods[id].num = num; setTotal(); }); */ $("#goods").on("keyup", ".goods_set_price", function() { var num = parseFloat($(this).val()); var id = $(this).parent().attr('value'); goods[id].p_price = num; setTotal(); }) }) var goods = {}; mini.parse(); var tree = mini.get("tree1"); for (var i in tree.data) { if (typeof(tree.data[i].children) == 'object') { if (tree.data[i].children.length > 0) { for (var j in tree.data[i].children) { if(tree.data[i].children[j].select == 1) { setGoods(tree.data[i].children[j]); } } } else if(tree.data[i].select == 1) { setGoods(tree.data[i]); } } } 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(); } function onNodeClick() { var tree=mini.get("tree1"); node=tree.getSelectedNode(); if(node.end) { setGoods(node); } } function setVal(e) { mini.get(e).setValue(''); } function searchGoods() { var key = mini.get("search_key").getValue(); if (key == "") { $(".mytr").show(); } else { key = key.toLowerCase(); $(".mytr").show(); $(".goods_name").each(function(t) { var name = $(this).html(); name = name.toLowerCase(); if (name.indexOf(key) == -1) { $(this).parent().hide(); } }); } } // 一键添加 function addGoods() { var key = mini.get("key").getValue(); if (key == '请输入商品名称') { key = ''; } if (key) { key = key.toLowerCase(); } for (var i in tree.data) { if (typeof(tree.data[i].children) == 'object') { if (tree.data[i].children.length > 0) { for (var j in tree.data[i].children) { if (key) { var name = tree.data[i].children[j].name; if (name.indexOf(key) != -1) { setGoods(tree.data[i].children[j]); } } else { setGoods(tree.data[i].children[j]); } } } else { if (key) { var name = tree.data[i].name; if (name.indexOf(key) != -1) { setGoods(tree.data[i]); } } else { setGoods(tree.data[i]); } } } } } // 一键删除 function delGoods() { if (confirm('确定删除吗?')) { var key = mini.get("key").getValue(); if (key == '请输入商品名称') { key = ''; } if (key) { key = key.toLowerCase(); } for (var i in tree.data) { if (typeof(tree.data[i].children) == 'object') { if (tree.data[i].children.length > 0) { for (var j in tree.data[i].children) { if (key) { var name = tree.data[i].children[j].name; if (name.indexOf(key) != -1) { unsetGoods(tree.data[i].children[j]); } } else { unsetGoods(tree.data[i].children[j]); } } } else { if (key) { var name = tree.data[i].name; if (name.indexOf(key) != -1) { unsetGoods(tree.data[i]); } } else { unsetGoods(tree.data[i]); } } } } setTotal(); } } function unsetGoods(node) { if (node.id) { if (goods[node.id]) { delete goods[node.id]; get(node.id).remove(); } } } function setGoods(node) { if (node.id) { var key = node.id; if (!goods[key]) { goods[key] = node; goods[key].price = parseFloat(goods[key].price); goods[key].p_price = parseFloat(goods[key].p_price); goods[key].num = 1; create(node); setTotal(); } else { //add(key); } } } function get(key) { return $('#goods_' + key); } function create(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 class="goods_p_price" value='+node.id+'><input type="tel" class="layui-input goods_set_price" value="'+node.p_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 < 1) { goods[id].num = 1; } 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].p_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}>&id=' + factory_id; }); } </script> </body> </html>