给表单增加刷选功能的通用实践

“门店补货单列表”页面重新添加筛选功能。最佳实践如下：

---

1. 前端（模板）筛选功能

• 在 store/templates/store/store_replenishment_list.html，表格上方添加筛选表单（如补货单号、门店、日期、状态、创建人等）。
• 筛选表单的每个字段都对应后端API的查询参数。
• 提交筛选时，刷新 DataTables 并带上筛选参数。

---

2. DataTables 配置

• 在 DataTables 初始化时，配置 ajax.data，将筛选表单的值传递给后端API。
• 监听筛选表单的 change 或 submit 事件，调用 table.ajax.reload()。

---

3. 后端API

• 在 StoreReplenishmentOrderListApiView（或相关API）中，读取这些参数并据此过滤 queryset。

---

示例实现

1. 模板表单（store_replenishment_list.html）

在表格上方添加：

<form id="filter-form" class="row g-2 mb-2">
  <div class="col-auto">
    <input type="text" class="form-control" name="order_number" placeholder="补货单号">
  </div>
  <div class="col-auto">
    <input type="text" class="form-control" name="store_name" placeholder="门店">
  </div>
  <div class="col-auto">
    <input type="date" class="form-control" name="order_date" placeholder="补货日期">
  </div>
  <div class="col-auto">
    <select class="form-select" name="status">
      <option value="">全部状态</option>
      <option value="pending_review">待初审</option>
      <option value="review_approved">初审通过</option>
      <option value="review_rejected">初审不通过</option>
      <option value="processing">处理中</option>
      <option value="completed">已完成</option>
      <option value="cancelled">已取消</option>
      <option value="rejected">已退回</option>
      <option value="draft">草稿</option>
    </select>
  </div>
  <div class="col-auto">
    <input type="text" class="form-control" name="created_by" placeholder="创建人">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">筛选</button>
    <button type="button" class="btn btn-secondary" id="reset-filters">重置</button>
  </div>
</form>

2. DataTables JS

$(document).ready(function() {
    var table = $('#dataTable').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
            url: "{% url 'store:store_replenishment_list_api' %}",
            type: 'POST',
            data: function(d) {
                d.csrfmiddlewaretoken = '{{ csrf_token }}';
                // 追加筛选参数
                d.order_number = $('input[name="order_number"]').val();
                d.store_name = $('input[name="store_name"]').val();
                d.order_date = $('input[name="order_date"]').val();
                d.status = $('select[name="status"]').val();
                d.created_by = $('input[name="created_by"]').val();
            }
        },
        // ... 其它配置 ...
    });

    // 表单筛选
    $('#filter-form').on('submit', function(e) {
        e.preventDefault();
        table.ajax.reload();
    });
    $('#reset-filters').on('click', function() {
        $('#filter-form')[0].reset();
        table.ajax.reload();
    });
});

3. 后端API（store/views/api.py）

在 StoreReplenishmentOrderListApiView 的 post 方法中，增加筛选逻辑：

order_number = request.POST.get('order_number')
if order_number:
    queryset = queryset.filter(order_number__icontains=order_number)
store_name = request.POST.get('store_name')
if store_name:
    queryset = queryset.filter(store__name__icontains=store_name)
order_date = request.POST.get('order_date')
if order_date:
    queryset = queryset.filter(order_date=order_date)
status = request.POST.get('status')
if status:
    queryset = queryset.filter(status=status)
created_by = request.POST.get('created_by')
if created_by:
    queryset = queryset.filter(created_by__username__icontains=created_by)

---