cd-vue-filter

一个功能强大的 Vue 3 筛选器组件包，支持内联筛选、高级筛选、方案管理和列配置等功能。

特性

• 🎯 多种筛选模式：支持内联筛选和高级筛选对话框
• 📋 方案管理：保存、编辑、复制、删除筛选方案
• 🎨 灵活配置：可自定义筛选字段数量和显示方式
• 📊 列配置：支持列的显示/隐藏、宽度调整和排序
• 🔄 多种字段类型：文本、数字、日期、下拉选择、省市区等
• 🎭 丰富的操作符：根据字段类型自动提供相应的操作符
• 💾 方案共享：支持方案的共享设置（私有/共享）

安装

npm install cd-vue-filter
# 或
yarn add cd-vue-filter
# 或
pnpm add cd-vue-filter

依赖要求

本组件依赖以下包，请确保项目中已安装：

pnpm add tdesign-vue-next vue cd-personselector cd-usercard

或在 package.json 中添加：

{
  "dependencies": {
    "vue": "^3.0.0",
    "tdesign-vue-next": "^1.0.0",
    "cd-personselector": "^1.1.0",
    "cd-usercard": "^2.3.0",
    "cd-vue-filter": "^2.2.2"
  }
}

快速开始

全局注册

import { createApp } from 'vue'
import { install } from 'cd-vue-filter'

const app = createApp(App)
app.use(install)

按需导入

import { CdFilterBar, CdFilter, FilterComponent } from 'cd-vue-filter'

组件说明

CdFilterBar

筛选工具栏组件，是最常用的组件，集成了内联筛选、按钮操作和方案管理。

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | fieldOptions | 字段选项配置（必填） | Array | - | | filterCount | 内联筛选字段数量 | Number | 2 | | selectOptions | 下拉选择字段的选项数据 | Array | [] | | planFilterOptions | 我的方案列表 | Array | [] | | size | 组件大小 | String | 'small' | | width | 对话框宽度 | String | '1000px' | | visibleColumns | 可见列配置 | Array | [] |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | search | 内联搜索触发 | (result) | | confirm | 高级筛选或方案选择确认 | (result) | | reset | 重置筛选 | - | | save-plan | 保存方案 | (payload) | | delete-plan | 删除方案 | (plan) | | copy-plan | 复制方案 | (plan) | | set-default-plan | 设置默认方案 | (plan) | | update-plan | 更新方案 | (payload) | | column-change | 列配置变化 | (columns) |

使用示例

示例1: 默认2个筛选字段

<template>
  <cd-filter-bar
    :field-options="fieldOptions"
    :select-options="selectOptions"
    :plan-filter-options="planFilterOptions"
    @search="handleSearch"
    @confirm="handleConfirm"
    @save-plan="handleSavePlan"
    @delete-plan="handleDeletePlan"
    @update-plan="handleUpdatePlan"
  />
</template>

<script setup>
import { ref } from 'vue'
import { CdFilterBar } from 'cd-vue-filter'

const fieldOptions = ref([
  { key: '客户名称', label: '客户名称', value: 'customerName', type: 'text' },
  { key: '订单编号', label: '订单编号', value: 'orderNo', type: 'text' },
  { key: '订单金额', label: '订单金额', value: 'orderAmount', type: 'number' },
  { key: '订单日期', label: '订单日期', value: 'orderDate', type: 'date' },
  { key: '订单状态', label: '订单状态', value: 'orderStatus', type: 'select' }
])

const selectOptions = ref([
  {
    columnName: 'orderStatus',
    value: ['待审核', '已审核', '已发货', '已完成', '已取消']
  }
])

const planFilterOptions = ref([
  {
    content: '本月新订单',
    value: 'plan_1',
    sqlConnectType: 'and',
    precepts: [
      {
        id: 1,
        connector: 'and',
        conditions: [
          { field: 'orderDate', operator: 'this_month', value: '' },
          { field: 'orderStatus', operator: 'eq', value: '待审核' }
        ]
      }
    ]
  }
])

const handleSearch = (result) => {
  console.log('搜索结果:', result)
}

const handleConfirm = (result) => {
  console.log('筛选结果:', result)
}

const handleSavePlan = (payload) => {
  const newPlan = {
    content: payload.name,
    value: `plan_${Date.now()}`,
    sqlConnectType: payload.topOp,
    precepts: payload.precepts
  }
  planFilterOptions.value.push(newPlan)
}

const handleDeletePlan = (plan) => {
  const index = planFilterOptions.value.findIndex(p => p.value === plan.value)
  if (index !== -1) {
    planFilterOptions.value.splice(index, 1)
  }
}

const handleUpdatePlan = (payload) => {
  const { name, precepts, topOp, plan } = payload
  const index = planFilterOptions.value.findIndex(p => p.value === plan.value)
  if (index !== -1) {
    planFilterOptions.value[index] = {
      ...planFilterOptions.value[index],
      content: name,
      precepts: precepts,
      sqlConnectType: topOp
    }
  }
}
</script>

示例2: 自定义3个筛选字段

<cd-filter-bar
  :field-options="fieldOptions"
  :select-options="selectOptions"
  :plan-filter-options="planFilterOptions"
  :filter-count="3"
  @search="handleSearch"
  @confirm="handleConfirm"
/>

示例3: 只有按钮没有内联筛选

当设置 filter-count="0" 时，不显示内联筛选字段，只显示方案选择和操作按钮：

<cd-filter-bar
  :field-options="fieldOptions"
  :select-options="selectOptions"
  :plan-filter-options="planFilterOptions"
  :filter-count="0"
  @search="handleSearch"
  @confirm="handleConfirm"
/>

示例4: 自定义对话框宽度

<cd-filter-bar
  :field-options="fieldOptions"
  :select-options="selectOptions"
  :plan-filter-options="planFilterOptions"
  width="400px"
  @search="handleSearch"
  @confirm="handleConfirm"
/>

字段类型支持

| 类型 | 说明 | 示例 | |------|------|------| | text | 文本类型 | 客户名称、订单编号 | | number | 数字类型 | 数量、金额 | | date | 日期类型 | 订单日期 | | time | 日期时间类型 | 创建时间 | | select | 下拉选择 | 订单状态、客户等级 | | selectProvince | 省市区选择 | 所在地区 |

操作符支持

文本类型

• eq: 等于
• ne: 不等于
• contains: 包含
• starts_with: 开头是
• ends_with: 结尾是

数字类型

• eq: 等于
• ne: 不等于
• gt: 大于
• gte: 大于等于
• lt: 小于
• lte: 小于等于

日期类型

• eq: 等于
• ne: 不等于
• gt: 在此之后
• gte: 在此之后（含）
• lt: 在此之前
• lte: 在此之前（含）
• today: 今天
• yesterday: 昨天
• tomorrow: 明天
• this_week: 本周
• last_week: 上周
• next_week: 下周
• this_month: 本月
• last_month: 上月
• next_month: 下月
• this_year: 今年
• last_year: 去年
• next_year: 明年

下拉选择类型

• eq: 等于
• ne: 不等于

省市区类型

• eq: 等于
• ne: 不等于
• contains: 包含
• not_contains: 不包含
• one_of: 等于其中之一

方案数据结构

{
  content: '方案名称',
  value: 'plan_1',
  sqlConnectType: 'and', // 顶层连接符：'and' 或 'or'
  precepts: [
    {
      id: 1,
      connector: 'and', // 卡片内连接符：'and' 或 'or'
      conditions: [
        {
          field: 'orderDate',
          operator: 'this_month',
          value: ''
        },
        {
          field: 'orderStatus',
          operator: 'eq',
          value: '待审核'
        }
      ]
    }
  ],
  columns: [ // 可选：列配置
    {
      value: 'customerName',
      show: true,
      width: '150px'
    }
  ]
}

版本历史

• 2.2.0: 修复 filterCount prop 问题，优化 filter-count=0 模式，添加筛选图标按钮
• 2.1.0: 添加列配置功能，支持列的显示/隐藏、宽度调整和排序
• 2.0.0: 重构组件架构，添加 CdFilterBar 组件
• 1.1.0: 添加 FilterDialog 组件支持
• 1.0.x: 初始版本，包含 FilterComponent 组件

许可证

MIT