参数筛选功能（时间段、店铺、员工编号）的完整实现方案，基于 ThinkPHP8 和 LayUI2.11：
1. 后端实现（ThinkPHP8）
控制器代码
php
namespace app\controller;
use think\facade\Db;
use think\facade\View;
class StoreSales
{
public function index()
{
// 获取筛选参数
$startDate = $this->request->get('start_date');
$endDate = $this->request->get('end_date');
$storeId = $this->request->get('store_id');
$employeeId = $this->request->get('employee_id');
// 构建查询条件
$query = Db::name('store_sales')
->field('date, store_id, store_name, employee_id, amount');
if ($startDate && $endDate) {
$query->whereBetween('date', [$startDate, $endDate]);
}
if ($storeId) {
$query->where('store_id', $storeId);
}
if ($employeeId) {
$query->where('employee_id', $employeeId);
}
// 查询数据
$salesData = $query->select()->toArray();
// 按日期和店铺分组数据
$groupedData = [];
$storeList = [];
foreach ($salesData as $item) {
$date = $item['date'];
$storeName = $item['store_name'];
$storeId = $item['store_id'];
if (!isset($groupedData[$date])) {
$groupedData[$date] = ['date' => $date];
}
$groupedData[$date][$storeId] = [
'name' => $storeName,
'amount' => $item['amount'],
'employee_id' => $item['employee_id']
];
// 收集所有有数据的店铺
if (!isset($storeList[$storeId])) {
$storeList[$storeId] = $storeName;
}
}
// 获取可选的店铺列表（用于下拉筛选）
$allStores = Db::name('stores')->column('store_name', 'id');
// 传递数据到视图
View::assign([
'groupedData' => $groupedData,
'storeList' => $storeList,
'allStores' => $allStores,
'startDate' => $startDate,
'endDate' => $endDate,
'selectedStoreId' => $storeId,
'employeeId' => $employeeId
]);
return View::fetch();
}
}
2. 前端实现（LayUI2.11）
HTML 模板（视图文件）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>门店销售数据查询</title>
<link rel="stylesheet" href="/path/to/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<form class="layui-form" id="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="start_date" id="startDate"
value="{$startDate|default=''}"
placeholder="请选择开始日期" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束日期</label>
<div class="layui-input-inline">
<input type="text" name="end_date" id="endDate"
value="{$endDate|default=''}"
placeholder="请选择结束日期" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">店铺</label>
<div class="layui-input-inline">
<select name="store_id">
<option value="">全部店铺</option>
{foreach $allStores as $id => $name}
<option value="{$id}" {if $selectedStoreId eq $id}selected{/if}>{$name}</option>
{/foreach}
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">员工编号</label>
<div class="layui-input-inline">
<input type="text" name="employee_id"
value="{$employeeId|default=''}"
placeholder="请输入员工编号" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn" lay-submit lay-filter="search">
<i class="layui-icon layui-icon-search"></i>查询
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md12">
<table class="layui-hide" id="storeSalesTable" lay-filter="storeSalesFilter"></table>
</div>
</div>
</div>
<script src="/path/to/layui/layui.js"></script>
<script>
layui.use(['table', 'form', 'laydate'], function () {
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
// 初始化日期选择器
laydate.render({
elem: '#startDate'
});
laydate.render({
elem: '#endDate'
});
// 渲染表格
var tableIns = table.render({
elem: '#storeSalesTable',
cols: getTableColumns(),
data: <?php echo json_encode(array_values($groupedData)); ?>,
page: false
});
// 动态生成表格列
function getTableColumns() {
var columns = [
{field: 'date', title: '日期', width: 120}
];
// 添加店铺列（动态生成）
<?php foreach ($storeList as $id => $name): ?>
columns.push({
field: '<?php echo $id; ?>',
title: '<?php echo $name; ?>',
width: 150,
templet: function(d) {
var storeData = d['<?php echo $id; ?>'];
if (!storeData) return '-';
return '<div>金额: ' + storeData.amount +
'<br>员工: ' + storeData.employee_id + '</div>';
}
});
<?php endforeach; ?>
return [columns];
}
// 搜索表单提交
form.on('submit(search)', function(data) {
var params = data.field;
var url = '/store_sales?' + $.param(params);
window.location.href = url;
return false;
});
});
</script>
</body>
</html>
3. 功能说明
参数筛选
时间段：通过
start_date和end_date参数筛选指定日期范围的数据店铺：通过
store_id参数筛选特定店铺的数据员工编号：通过
employee_id参数筛选特定员工的数据
数据处理
后端：
根据筛选条件查询数据库
按日期和店铺分组数据
动态生成有数据的店铺列表
将筛选条件和数据传递到前端
前端：
使用 LayUI 表单组件实现筛选条件输入
动态生成表格列，每列对应一个有数据的店铺
提交表单时带上筛选参数，刷新页面获取新数据
4. 注意事项
数据库表结构：
需要
store_sales表存储销售数据需要
stores表存储店铺信息
路由配置：
在
route.php中确保路由正确配置：php
Route::get('store_sales', 'app\controller\StoreSales@index');
LayUI 依赖：
确保 LayUI 资源路径正确
需要引入
table、form、laydate模块
根据实际业务需求，你可能需要调整查询逻辑、表格渲染方式或数据展示格式。
评论区