列表筛选器模板配置

列表筛选器用于项目列表页和看板页面的内容筛选，支持配置表单字段、项目字段以及基础组件的直接使用。配置采用 JSON 格式。

基础字段说明

is: 组件类型，指定使用哪种筛选组件
field: 字段名称，对应后端查询字段
label: 显示标签，显示在筛选框前的文字
type: 查询类型，支持 match_phrase（精确匹配）/range（范围）/raw（原始）
props: 组件属性配置，如 placeholder、style 等
subType: 子类型，如 data（数据）等
time_type: 时间类型，支持 d（天）/m（月）/y（年）/time_range（时间范围）
multiple: 是否支持多选，布尔值
console: 是否用于看板场景，布尔值
hide_type: 是否隐藏时间类型选择，布尔值
options: 下拉选项配置，用于 select 组件

注意： 原有的预置组件（CurrentStep、ProjectType、ContractDate、ProjectOwner、RangeDate、StepOwnerAll）已全部弃用，请使用基础组件进行配置。

筛选模块详细说明

1. 文本输入框（Input）

用于简单的文本搜索场景。

{
  "is": "input",
  "field": "name",
  "label": "任务名称",
  "props": {
    "placeholder": "请输入任务名称"
  },
  "type": "match_phrase"
}

参数说明：

is: 固定值 "input"
type: 通常使用 "match_phrase"
props: 支持 placeholder、clearable、style 等 el-input 的属性

2. 自动完成输入框（Autocomplete）

用于带有候选项的输入场景，支持单选和多选。

{
  "is": "autocomplete",
  "field": "customer",
  "label": "客户",
  "props": {
    "placeholder": "请输入客户名称",
    "style": "width: auto"
  },
  "type": "match_phrase",
  "multiple": false
}

参数说明：

multiple: 是否支持多选
type: 支持 "match_phrase" 和 "raw"
props: 支持 placeholder、clearable、style 等 el-autocomplete 的属性

3. 日期范围选择器（DateRange）

用于时间范围筛选场景。

{
  "is": "date-range",
  "subType": "data",
  "time_type": "d",
  "field": "startTime",
  "label": "启动时间",
  "props": {
    "placeholder": "启动时间",
    "format": "yyyy-MM-dd"
  },
  "type": "range"
}

看板场景示例：

{
  "is": "date-range",
  "hide_type": true,
  "console": true,
  "time_type": "time_range",
  "field": "date_range",
  "label": "日期范围",
  "type": "range"
}

参数说明：

subType: 通常设置为 "data"
time_type:
- "d": 按天选择
- "m": 按月选择
- "y": 按年选择
- "time_range": 时间范围（看板场景）
hide_type: 是否隐藏时间类型选择
console: 是否用于看板场景
type: 固定值 "range"

4. 下拉选择框（Select）

用于固定选项的选择场景。

{
  "is": "select",
  "field": "level",
  "console": true,
  "label": "概览层级",
  "props": {
    "placeholder": "区经",
    "style": "max-width: 120px"
  },
  "options": [
    {
      "label": "城市群",
      "value": "city"
    },
    {
      "label": "区经",
      "value": "xun_jian_ren"
    }
  ]
}

参数说明：

options: 选项配置数组，每个选项包含 label 和 value
props: 支持 placeholder、style 等 el-select 的属性
console: 是否用于看板场景

看板场景完整示例

{
  "config": [
    {
      "is": "date-range",
      "hide_type": true,
      "console": true,
      "time_type": "time_range",
      "field": "date_range",
      "label": "日期范围",
      "type": "range"
    },
    {
      "is": "select",
      "field": "level",
      "console": true,
      "label": "概览层级",
      "props": {
        "placeholder": "区经",
        "style": "max-width: 120px"
      },
      "options": [
        {
          "label": "城市群",
          "value": "city"
        },
        {
          "label": "区经",
          "value": "xun_jian_ren"
        }
      ]
    },
    {
      "is": "autocomplete",
      "field": "xun_jian_mu_ban_name",
      "console": true,
      "multiple": true,
      "label": "巡检模板",
      "props": {
        "placeholder": "巡检模板",
        "style": "width: auto"
      }
    },
    {
      "is": "autocomplete",
      "field": "city",
      "console": true,
      "label": "城市群",
      "props": {
        "placeholder": "城市群",
        "style": "max-width: 120px"
      }
    }
  ]
}

最佳实践

列表页场景
- 简单文本搜索使用 input 组件
- 需要选项提示使用 autocomplete 组件
- 多选场景使用 multiple: true 的 autocomplete 组件
- 时间范围筛选使用 date-range 组件
看板场景
- 添加 console: true 标识看板场景
- 使用 style 属性控制组件宽度
- 时间选择器使用 time_type: "time_range"
- 固定选项使用 select 组件
通用建议
- 所有输入框都配置合适的 placeholder
- 合理使用 clearable 属性支持清空
- 选择合适的查询类型（match_phrase/range/raw）
- 使用基础组件替代已弃用的预置组件
- 看板场景注意控制组件宽度和布局