刚好做过类似的工作流筛选功能，给你整理一个落地性强的方案，既符合你想用单选按钮的偏好，也能覆盖所有业务规则：

先把需求拆解清楚，避免后续走偏：

• 基础工作流日期是线性递进的：Open Date → Approval Date → Action Date → Close Date
• Cancel Date是特殊项：可在Open之后、Close之前任意时间出现，一旦存在就是工作流的最终状态
• 筛选规则：
  • 默认范围：From=Open Date，To=Close Date
  • 允许用户切换From/To的日期项，但To项绝对不能早于From项
  • 支持单独筛选「未取消」的记录（排除有Cancel Date的条目）

这个方案直观，用户能快速看到所有可选的日期节点：

界面布局 #

• 分两个单选按钮组：
  1. 起始日期（From）：包含「Open Date（默认选中）」、「Approval Date」、「Action Date」、「Close Date」四个选项
  2. 结束日期（To）：包含「Open Date」、「Approval Date」、「Action Date」、「Close Date（默认选中）」四个选项
• 新增一个独立复选框：☐ 仅显示未取消的记录（默认不勾选，即包含已取消条目）

交互&逻辑校验 #

• 实时联动禁用无效选项：这是关键，从界面层面避免用户选到非法组合。比如：
  • 如果用户把From改成「Approval Date」，To组里的「Open Date」就自动灰掉，无法选择
  • 如果用户后续把From改回「Open Date」，To组的所有选项又恢复可用
• 默认值初始化：页面加载时自动选中From的「Open Date」和To的「Close Date」，同时触发一次联动逻辑，确保初始状态下To的无效选项（这里没有，因为Open是最早的）被禁用
• Cancel Date筛选逻辑：
  • 勾选复选框时，筛选条件追加Cancel Date IS NULL
  • 未勾选时，保留所有记录（无论是否有Cancel Date）

前端逻辑伪代码示例 #

// 给每个日期项定义权重，用来判断先后顺序
const datePriority = {
  'Open Date': 1,
  'Approval Date': 2,
  'Action Date': 3,
  'Close Date': 4
};

// 监听From单选框的变化
document.querySelectorAll('input[name="from-date"]').forEach(radio => {
  radio.addEventListener('change', () => {
    const selectedFromWeight = datePriority[radio.value];
    // 更新To组的可选状态
    document.querySelectorAll('input[name="to-date"]').forEach(toRadio => {
      const toWeight = datePriority[toRadio.value];
      toRadio.disabled = toWeight < selectedFromWeight;
      // 如果当前选中的To项被禁用，自动切换到第一个可用的选项
      if (toRadio.checked && toRadio.disabled) {
        document.querySelector('input[name="to-date"]:not(:disabled)').checked = true;
      }
    });
  });
});

// 页面初始化时触发一次From的选中事件，设置初始禁用状态
document.querySelector('input[name="from-date"][value="Open Date"]').dispatchEvent(new Event('change'));

如果觉得单选按钮组太占界面空间，用下拉选择框是更紧凑的替代方案：

• 两个下拉框：「起始日期」和「结束日期」，选项和单选组一致，默认值也相同
• 同样保留「仅显示未取消的记录」复选框
• 交互逻辑和单选方案一致：选择From后，To下拉框自动移除/灰掉早于From的选项

• 后端兜底校验：前端的禁用只是交互优化，一定要在后端再加一层校验，防止非法请求绕过前端逻辑。比如SQL层面可以加：

  SELECT * FROM workflow
  WHERE 
    -- 确保日期范围合法
    [selected_from_date_column] <= [selected_to_date_column]
    -- 处理取消状态筛选
    AND (NOT :only_uncanceled_flag OR cancel_date IS NULL)
  

• 用户体验提示：筛选后可以显示「共X条记录，其中Y条已取消」的文字提示，帮助用户快速理解结果
• Tooltip辅助说明：给每个日期项加hover提示，比如「Open Date：工作流启动的初始日期」，降低用户理解成本

内容的提问来源于stack exchange，提问作者Wised Kanrat