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>