Layui 新增销售单 其中一种 编写逻辑和打开方式
Layui - 极简模块化前端 UI 组件库(官方文档)
图例：
代码1：list.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>销售单据</title><link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body><div class="layui-card"><div class="layui-card-header"><div class="layui-btn-group"><button class="layui-btn" id="addSale">新增销售</button></div></div><div class="layui-card-body"><!-- 搜索条件 --><form class="layui-form layui-form-pane" lay-filter="searchForm"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">销售单号</label><div class="layui-input-inline"><input type="text" name="code" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">客户名称</label><div class="layui-input-inline"><input type="text" name="customerName" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">日期范围</label><div class="layui-input-inline"><input type="text" name="dateRange" id="dateRange" placeholder="请选择" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><button class="layui-btn" lay-submit lay-filter="searchBtn">查询</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form><!-- 数据表格 --><table id="saleList" lay-filter="saleList"></table></div></div><!-- 表格工具条模板 --><script type="text/html" id="tableBar"><a class="layui-btn layui-btn-xs" lay-event="view">查看</a>{{# if(d.status === '待审核'){ }}<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="approve">审核</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>{{# } }}</script><script src="../layui/layui.js"></script><script>layui.use(['table', 'layer', 'form', 'laydate', 'jquery'], function(){var table = layui.table;var layer = layui.layer;var form = layui.form;var laydate = layui.laydate;var $ = layui.jquery;// 日期范围选择器laydate.render({elem: '#dateRange',range: true});// 渲染表格table.render({elem: '#saleList',url: '/api/sale/list',cols: [[{field: 'code', title: '销售单号', width: 160},{field: 'date', title: '销售日期', width: 120},{field: 'customerName', title: '客户名称', width: 160},{field: 'amount', title: '金额', width: 120},{field: 'status', title: '状态', width: 100},{field: 'createUser', title: '制单人', width: 100},{field: 'approveUser', title: '审核人', width: 100},{field: 'remark', title: '备注'},{fixed: 'right', title:'操作', toolbar: '#tableBar', width: 180}]],page: true});// 监听搜索form.on('submit(searchBtn)', function(data){table.reload('saleList', {where: data.field});return false;});// 监听工具条table.on('tool(saleList)', function(obj){var data = obj.data;if(obj.event === 'view'){layer.open({type: 2,title: '查看销售单',area: ['900px', '600px'],content: 'view.html?id=' + data.id,maxmin: true});} else if(obj.event === 'approve'){layer.confirm('确认审核通过该销售单吗？', function(index){$.post('/api/sale/approve', {id: data.id}, function(res){if(res.code === 0){layer.msg('审核成功');table.reload('saleList');} else {layer.msg('审核失败：' + res.msg);}});layer.close(index);});} else if(obj.event === 'del'){layer.confirm('确认删除该销售单吗？', function(index){$.post('/api/sale/delete', {id: data.id}, function(res){if(res.code === 0){obj.del();layer.msg('删除成功');} else {layer.msg('删除失败：' + res.msg);}});layer.close(index);});}});// 新增销售按钮事件$('#addSale').click(function(){layer.open({type: 2,title: '新增销售单',area: ['900px', '600px'],content: 'add.html',maxmin: true});});});</script>
</body>
</html> 代码2：add.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>新增销售单</title><link rel="stylesheet" href="../layui/css/layui.css"><style>.layui-form {padding: 20px 30px 0 0;}.layui-table-view {margin: 10px 0;}</style>
</head>
<body><form class="layui-form" lay-filter="saleForm"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">客户名称</label><div class="layui-input-inline"><input type="text" name="customerName" lay-verify="required" placeholder="请输入客户名称" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">销售日期</label><div class="layui-input-inline"><input type="text" name="date" id="date" lay-verify="required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">备注</label><div class="layui-input-inline" style="width: 500px;"><input type="text" name="remark" autocomplete="off" class="layui-input"></div></div></div><!-- 商品明细表格 --><div class="layui-form-item"><label class="layui-form-label">商品明细</label><div class="layui-input-block"><table id="detailTable" lay-filter="detailTable"></table><button type="button" class="layui-btn layui-btn-normal" id="addDetail">添加商品</button></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="saveSale">保存</button><button type="button" class="layui-btn layui-btn-primary" id="cancel">取消</button></div></div></form><!-- 明细表格操作按钮 --><script type="text/html" id="detailBar"><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script><script src="../layui/layui.js"></script><script>layui.use(['form', 'layer', 'table', 'laydate'], function(){var form = layui.form;var layer = layui.layer;var table = layui.table;var laydate = layui.laydate;var $ = layui.jquery;// 日期选择器laydate.render({elem: '#date',value: new Date()});// 明细表格table.render({elem: '#detailTable',data: [],cols: [[{field: 'productName', title: '商品名称', width: 200},{field: 'spec', title: '规格', width: 120},{field: 'unit', title: '单位', width: 80},{field: 'stock', title: '当前库存', width: 100},{field: 'quantity', title: '销售数量', width: 100, edit: 'text'},{field: 'price', title: '单价', width: 100, edit: 'text'},{field: 'amount', title: '金额', width: 120},{fixed: 'right', title:'操作', toolbar: '#detailBar', width: 80}]]});// 监听明细表格编辑table.on('edit(detailTable)', function(obj){var value = obj.value;var data = obj.data;// 验证数量不能大于库存if(obj.field === 'quantity'){if(parseFloat(value) > parseFloat(data.stock)){layer.msg('销售数量不能大于库存数量');$(this).val(data.stock);return;}}// 计算金额if(obj.field === 'quantity' || obj.field === 'price'){var quantity = parseFloat(data.quantity) || 0;var price = parseFloat(data.price) || 0;data.amount = (quantity * price).toFixed(2);obj.update(data);}});// 添加商品$('#addDetail').click(function(){layer.open({type: 2,title: '选择商品',area: ['800px', '500px'],content: '../stock/selectProduct.html',btn: ['确定', '取消'],yes: function(index, layero){var iframeWin = window[layero.find('iframe')[0]['name']];var selectedData = iframeWin.getSelectedData();if(selectedData){// 添加到明细表格var tableData = table.cache['detailTable'] || [];tableData.push({productId: selectedData.id,productName: selectedData.name,spec: selectedData.spec,unit: selectedData.unit,stock: selectedData.stock,quantity: 1,price: selectedData.price,amount: selectedData.price});table.reload('detailTable', {data: tableData});}layer.close(index);}});});// 监听提交form.on('submit(saveSale)', function(data){var tableData = table.cache['detailTable'] || [];if(tableData.length === 0){layer.msg('请添加商品明细');return false;}var postData = data.field;postData.details = tableData;$.post('/api/sale/save', postData, function(res){if(res.code === 0){layer.msg('保存成功');// 刷新父页面并关闭当��页parent.layui.table.reload('saleList');var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);} else {layer.msg('保存失败：' + res.msg);}});return false;});// 取消按钮$('#cancel').click(function(){var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);});});</script>
</body>
</html> 代码3 /stock/selectProduct.html ：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>选择商品</title><link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body><div class="layui-card"><div class="layui-card-body"><!-- 搜索条件 --><form class="layui-form layui-form-pane" lay-filter="searchForm"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">商品名称</label><div class="layui-input-inline"><input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">商品分类</label><div class="layui-input-inline"><select name="categoryId" lay-search><option value="">请选择</option></select></div></div><div class="layui-inline"><button class="layui-btn" lay-submit lay-filter="searchBtn">查询</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form><!-- 数据表格 --><table id="productList" lay-filter="productList"></table></div></div><script src="../layui/layui.js"></script><script>layui.use(['table', 'layer', 'form', 'jquery'], function(){var table = layui.table;var layer = layui.layer;var form = layui.form;var $ = layui.jquery;// 加载分类数据$.get('/api/category/list', function(res){if(res.code === 0){var options = '';res.data.forEach(function(item){options += '<option value="' + item.id + '">' + item.name + '</option>';});$('select[name="categoryId"]').append(options);form.render('select');}});// 渲染表格table.render({elem: '#productList',url: '/api/product/list',cols: [[{type: 'radio'},{field: 'code', title: '商品编码', width: 120},{field: 'name', title: '商品名称', width: 200},{field: 'categoryName', title: '分类', width: 100},{field: 'spec', title: '规格', width: 120},{field: 'unit', title: '单位', width: 80},{field: 'price', title: '单价', width: 100},{field: 'stock', title: '库存', width: 100}]],page: true,height: 'full-200'});// 监听搜索form.on('submit(searchBtn)', function(data){table.reload('productList', {where: data.field});return false;});// 选中的数据var selectedData = null;// 监听单选框选择table.on('radio(productList)', function(obj){selectedData = obj.data;});// 提供获取选中数据的方法window.getSelectedData = function(){return selectedData;};});</script>
</body>
</html>