cd-vue-filter 2.2.0 → 2.2.1

package/README.md

@@ -1,6 +1,16 @@
-# Vue Filter Component Package
+# cd-vue-filter
 
-一个功能强大的 Vue 3 过滤器组件包，包含 FilterComponent 和 FilterDialog 两个组件，支持多种字段类型和操作符。
+一个功能强大的 Vue 3 筛选器组件包，支持内联筛选、高级筛选、方案管理和列配置等功能。
+
+## 特性
+
+- 🎯 **多种筛选模式**：支持内联筛选和高级筛选对话框
+- 📋 **方案管理**：保存、编辑、复制、删除筛选方案
+- 🎨 **灵活配置**：可自定义筛选字段数量和显示方式
+- 📊 **列配置**：支持列的显示/隐藏、宽度调整和排序
+- 🔄 **多种字段类型**：文本、数字、日期、下拉选择、省市区等
+- 🎭 **丰富的操作符**：根据字段类型自动提供相应的操作符
+- 💾 **方案共享**：支持方案的共享设置（私有/共享）
 
 ## 安装
 
@@ -12,14 +22,13 @@ yarn add cd-vue-filter
 pnpm add cd-vue-filter
 ```
 
-## 使用方法
+## 快速开始
 
 ### 全局注册
 
 ```javascript
 import { createApp } from 'vue'
-import FilterComponents, { install } from 'cd-vue-filter'
-import 'cd-vue-filter/dist/style.css'
+import { install } from 'cd-vue-filter'
 
 const app = createApp(App)
 app.use(install)
@@ -28,123 +37,278 @@ app.use(install)
 ### 按需导入
 
 ```javascript
-import { FilterDialog, FilterComponent } from 'cd-vue-filter'
-import 'cd-vue-filter/dist/style.css'
-
-export default {
-  components: {
-    FilterDialog,
-    FilterComponent
-  }
-}
+import { CdFilterBar, CdFilter, FilterComponent } from 'cd-vue-filter'
 ```
 
 ## 组件说明
 
-### FilterDialog
+### CdFilterBar
 
-弹窗式过滤器组件，支持复杂的多条件筛选。
+筛选工具栏组件，是最常用的组件，集成了内联筛选、按钮操作和方案管理。
 
 #### Props
 
-- `visible` (Boolean): 控制弹窗显示/隐藏
-- `fieldOptions` (Array): 字段选项配置
-- `initialFilterCards` (Array, 可选): 初始筛选卡片
-- `initialType1` (String, 可选): 初始类型
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| fieldOptions | 字段选项配置（必填） | Array | - |
+| filterCount | 内联筛选字段数量 | Number | 2 |
+| selectOptions | 下拉选择字段的选项数据 | Array | [] |
+| planFilterOptions | 我的方案列表 | Array | [] |
+| size | 组件大小 | String | 'small' |
+| width | 对话框宽度 | String | '1000px' |
+| visibleColumns | 可见列配置 | Array | [] |
 
 #### Events
 
-- `update:visible`: 更新弹窗显示状态
-- `confirm`: 确认筛选条件
-- `cancel`: 取消筛选
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| 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个筛选字段
 
 ```vue
 <template>
-  <div>
-    <t-button @click="showDialog = true">打开筛选</t-button>
-    <FilterDialog
-      v-model:visible="showDialog"
-      :field-options="fieldOptions"
-      @confirm="handleConfirm"
-      @cancel="handleCancel"
-    />
-  </div>
+  <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 { FilterDialog } from 'cd-vue-filter'
+import { CdFilterBar } from 'cd-vue-filter'
 
-const showDialog = ref(false)
+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 fieldOptions = [
+const selectOptions = ref([
   {
-    label: '姓名',
-    value: 'name',
-    type: 'text'
-  },
-  {
-    label: '年龄',
-    value: 'age',
-    type: 'number'
-  },
+    columnName: 'orderStatus',
+    value: ['待审核', '已审核', '已发货', '已完成', '已取消']
+  }
+])
+
+const planFilterOptions = ref([
   {
-    label: '创建时间',
-    value: 'createTime',
-    type: 'date'
+    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 handleConfirm = (filterData) => {
-  console.log('筛选条件:', filterData)
-  showDialog.value = false
+const handleDeletePlan = (plan) => {
+  const index = planFilterOptions.value.findIndex(p => p.value === plan.value)
+  if (index !== -1) {
+    planFilterOptions.value.splice(index, 1)
+  }
 }
 
-const handleCancel = () => {
-  showDialog.value = false
+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>
 ```
 
-### FilterComponent
+### 示例2: 自定义3个筛选字段
 
-内联式过滤器组件，适用于简单的单条件筛选。
+```vue
+<cd-filter-bar
+  :field-options="fieldOptions"
+  :select-options="selectOptions"
+  :plan-filter-options="planFilterOptions"
+  :filter-count="3"
+  @search="handleSearch"
+  @confirm="handleConfirm"
+/>
+```
 
-#### Props
+### 示例3: 只有按钮没有内联筛选
 
-- `fieldOptions` (Array): 字段选项配置
-- `filterCondition` (Object): 筛选条件
-- `selectOptions` (Object, 可选): 下拉选项数据
+当设置 `filter-count="0"` 时，不显示内联筛选字段，只显示方案选择和操作按钮：
 
-#### Events
+```vue
+<cd-filter-bar
+  :field-options="fieldOptions"
+  :select-options="selectOptions"
+  :plan-filter-options="planFilterOptions"
+  :filter-count="0"
+  @search="handleSearch"
+  @confirm="handleConfirm"
+/>
+```
+
+### 示例4: 自定义对话框宽度
 
-- `update:filterCondition`: 更新筛选条件
+```vue
+<cd-filter-bar
+  :field-options="fieldOptions"
+  :select-options="selectOptions"
+  :plan-filter-options="planFilterOptions"
+  width="400px"
+  @search="handleSearch"
+  @confirm="handleConfirm"
+/>
+```
 
 ## 字段类型支持
 
-- `text`: 文本类型
-- `number`: 数字类型
-- `money`: 金额类型
-- `date`: 日期类型
-- `datetime`: 日期时间类型
-- `select`: 下拉选择
-- `province`: 省市区级联选择
+| 类型 | 说明 | 示例 |
+|------|------|------|
+| 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`: 等于其中之一
+
+## 方案数据结构
 
-- 文本类型: 等于、不等于、包含、不包含、为空、不为空
-- 数字类型: 等于、不等于、大于、小于、大于等于、小于等于、为空、不为空
-- 日期类型: 等于、不等于、大于、小于、大于等于、小于等于、为空、不为空
-- 选择类型: 等于、不等于、包含、不包含、为空、不为空
+```javascript
+{
+  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'
+    }
+  ]
+}
+```
 
 ## 版本历史
 
-- 1.1.0: 添加 FilterDialog 组件支持，同时保持 FilterComponent 兼容性
-- 1.0.x: 初始版本，包含 FilterComponent 组件
+- **2.2.0**: 修复 filterCount prop 问题，优化 filter-count=0 模式，添加筛选图标按钮
+- **2.1.0**: 添加列配置功能，支持列的显示/隐藏、宽度调整和排序
+- **2.0.0**: 重构组件架构，添加 CdFilterBar 组件
+- **1.1.0**: 添加 FilterDialog 组件支持
+- **1.0.x**: 初始版本，包含 FilterComponent 组件
 
 ## 许可证
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cd-vue-filter",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "type": "module",
   "description": "一个功能强大的 Vue 3 过滤器组件，支持多种字段类型和操作符",
   "main": "src/index.ts",