weapp-filteroptions 筛选条件组件

底部弹出的筛选面板，支持多种表单项类型：文本输入、下拉多选（接口/本地）、单选、多选、日期范围。选中值会同步回 screenList[].value，确定时通过事件抛出最终结果。

安装

npm i weapp-filteroptions

目赤支持的数据结构类型

const rawData = success ? (Array.isArray(res?.data?.records) ? res.data.records : Array.isArray(res?.data.list) ? res.data.list : Array.isArray(res?.data) ?  res.data : []) : []

基本用法

<template>
  <view>
    <view @click="openFilter">打开筛选</view>
	<weapp-filteroptions ref="filterRef" :screenList="screenList" @screenHandler="onScreenHandler" />
  </view>
</template>

<script>
// npm 安装：npm i weapp-filteroptions
import weappFilteroptions from 'weapp-filteroptions'

export default {
  components: { 
    weappFilteroptions
   },
  data() {
    return {
      screenList: [
        {
          label: '排期编码',
          key: 'liveScheduleCode',
          type: 'Input',
          value: '',
          scan:true,
					multiple:true
        },
        {
          label: '品牌',
          type: 'search',
          key: 'brandDisplayName',
          value: [],
          selectItems: [],
          apiName: 'brandQuery',
          apiSearchKey: 'brandDisplayName',
          page: true,
          pageSize: 10,
          showNameKey: 'brandDisplayName'
        },
        {
          label: '类目',
          type: 'search',
          key: 'categoryName',
          value: [],
          selectItems: [],
          apiName: 'getCategory',
          apiSearchKey: 'categoryName',
          page: true,
          showNameKey: 'categoryName'
        }
      ]
    }
  },
  methods: {
    openFilter() {
      this.$refs.filterRef.opens()
    },
    onScreenConfirm(screenValue) {
      // screenValue 为 { key: value }，search 类型的 value 为 id 数组   如果没有id 则返回 showNameKey绑定的值，都没有的情况下返回数据索引
      console.log('筛选结果', screenValue)
    }
  }
}
</script>

Props

| 属性 | 类型 | 必填 | 说明 | |-------------|-------|------|------| | screenList | Array | 是 | 筛选项配置列表，每项见下方「筛选项配置」 |

事件

| 事件名 | 参数 | 说明 | |---------------|------|------| | screenHandler | (screenValue) | 点击「确定」时触发，参数为当前所有筛选项的 key-value 集合。type: 'search' 的项在确定时会被转为 id 数组。 |

筛选项配置（screenList 单项）

每项必填：label、key、type、value。其余字段按 type 使用。

通用字段

| 字段 | 类型 | 说明 | |--------|--------|------| | label | String | 展示的标题文案 | | key | String | 字段名，与接口/表单对齐，同一列表内唯一 | | type | String | 见下表 | | value | Any | 当前值。Input/Select 为字符串；Select 多选、search 为数组；Date 由组件内部用 startCreatedTime / endCreatedTime |

type 取值与对应配置

| type | 说明 | 额外配置 | |----------|----------------|----------| | Input | 单行文本输入 | 无 | | search | 接口拉选项 + 多选，带「更多」弹窗搜索 | 见「type: search」 | | Select | 单选，本地选项 | selectItems: [{ label, value }] | | checkbox | 多选，本地选项 | selectItems: [{ label, value }]，value: [] | | Date | 开始/结束时间 | 无；组件内部使用 screenValue.startCreatedTime / endCreatedTime |

type: Input

{
  label: '奢当家商品编码',
  key: 'liveScheduleCode',
  type: 'Input',
  value: ''
}

Input 额外配置：

| 字段 | 类型 | 说明 | |----------|---------|------| | scan | Boolean | 是否开启扫码输入。为 true 时，组件会在该输入项右侧展示扫码入口，调用 uni.scanCode 扫描条码/二维码，并自动把结果填入当前项的 value / screenValue[key]。| | multiple | Boolean | 是否支持多值输入。为 true 时，用户可以在同一输入框中录入多个值，使用空格或分号分隔，例如：C1 C2 C3 或 C1;C2;C3，组件内部会拆分为数组并在回调/请求参数中以列表形式返回。|

type: search

接口来自 @/request/index.js 下的方法（如 brandQuery、getCategory）。首屏会请求一次默认列表，点击「更多」在 drawer 内搜索、分页并多选，选中结果写回该项的 value。

| 字段 | 类型 | 必填 | 说明 | |---------------|--------|------|------| | value | Array | 是 | 选中项，元素为 { label, value } 或 确定后转为 id | | selectItems | Array | 否 | 可预留，组件会按接口结果填充 | | apiName | String | 是 | 请求方法名，如 'brandQuery'、'getCategory' | | apiSearchKey | String | 否 | 搜索关键字请求参数字段名，如 'brandDisplayName' | | showNameKey | String | 否 | 选项展示文案的字段，默认 'name'，如 'brandDisplayName'、'categoryName' | | page | Boolean| 否 | 是否分页，默认 true 时传 pageNum、pageSize | | pageSize | Number | 否 | 每页条数，默认 10 | | defaultParams | Object | 否 | 请求时额外参数，如 { categoryLevel: '一级类目' } |

示例：

{
  label: '品牌',
  type: 'search',
  key: 'brandDisplayName',
  value: [],
  selectItems: [],
  apiName: 'brandQuery',
  apiSearchKey: 'brandDisplayName',
  page: true,
  pageSize: 10,
  showNameKey: 'brandDisplayName'
},
{
  label: '类目',
  type: 'search',
  key: 'categoryName',
  value: [],
  selectItems: [],
  apiName: 'getCategory',
  apiSearchKey: 'categoryName',
  page: true,
  showNameKey: 'categoryName',
  defaultParams: { categoryLevel: '一级类目' }
}

type: Select（单选）

{
  label: '状态',
  key: 'status',
  type: 'Select',
  value: '',
  selectItems: [
    { label: '全部', value: '' },
    { label: '已上架', value: '1' },
    { label: '已下架', value: '0' }
  ]
}

type: checkbox（多选）

{
  label: '标签',
  key: 'tags',
  type: 'checkbox',
  value: [],
  selectItems: [
    { label: '新品', value: 'new' },
    { label: '热卖', value: 'hot' }
  ]
}

type: Date（日期范围）

固定使用内部 key：startCreatedTime、endCreatedTime，无需在 screenList 里再配 key/value，组件内会写入 screenValue。

{
  label: '创建时间',
  key: 'createdTime',
  type: 'Date'
  // value 由组件内部用 startCreatedTime / endCreatedTime 管理
}

确定时 screenHandler 收到的对象中会包含 startCreatedTime、endCreatedTime 字符串。

方法（ref 调用）

| 方法 | 说明 | |--------|------| | opens() | 打开筛选面板（根据当前 screenList 的 value 初始化内部状态） |

完整示例（含各 type）

import xdFilterOption from '@/components/weapp-filterOptions-pages/xd-filterOption.vue'

export default {
  components: { xdFilterOption },
  data() {
    return {
      screenList: [
        {
          label: '奢当家商品编码',
          key: 'liveScheduleCode',
          type: 'Input',
          value: ''
        },
        {
          label: 'JT码',
          key: 'jtCode',
          type: 'Input',
          value: ''
        },
        {
          label: '品牌',
          type: 'search',
          key: 'brandDisplayName',
          value: [],
          selectItems: [],
          apiName: 'brandQuery',
          apiSearchKey: 'brandDisplayName',
          page: true,
          showNameKey: 'brandDisplayName'
        },
        {
          label: '类目',
          type: 'search',
          key: 'categoryName',
          value: [],
          selectItems: [],
          apiName: 'getCategory',
          apiSearchKey: 'categoryName',
          page: true,
          showNameKey: 'categoryName'
        },
        {
          label: '状态',
          key: 'status',
          type: 'Select',
          value: '',
          selectItems: [
            { label: '全部', value: '' },
            { label: '已上架', value: '1' },
            { label: '已下架', value: '0' }
          ]
        },
        {
          label: '创建时间',
          key: 'createdTime',
          type: 'Date'
        }
      ]
    }
  },
  methods: {
    openFilter() {
      this.$refs.filterRef.opens()
    },
    onScreenConfirm(screenValue) {
      // screenValue 示例: { liveScheduleCode: '', jtCode: '', brandDisplayName: [id1, id2], categoryName: [], status: '1', startCreatedTime: '...', endCreatedTime: '...' }
      this.queryList(screenValue)
    }
  }
}

注意事项

1. 数据源：type: 'search' 的接口来自 @/request/index.js，需保证 apiName 在该文件中存在且返回结构为 { data: { list } } 或 { data: { records } }。
2. 双向同步：组件内部会修改 screenList[].value，若父组件用同一份 screenList 请求列表，筛选条件会随「确定」前的选择变化；确定后以 screenHandler 参数为准。
3. Date：仅支持「开始时间 + 结束时间」一对，key 固定为 startCreatedTime、endCreatedTime。