cd-vue-filter 2.1.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +240 -76
- package/package.json +56 -59
- package/src/components/FilterComponent.vue +357 -0
- package/src/components/SavePlanDialog.vue +239 -0
- package/src/components/cd-filter-bar.vue +412 -0
- package/src/components/cd-filter.vue +1103 -0
- package/src/components/filterDialog.vue +345 -0
- package/src/index.ts +41 -0
- package/src/types/index.ts +65 -0
- package/src/utils/province.ts +5502 -0
- package/src/vue-shim.d.ts +5 -0
- package/CHANGELOG.md +0 -29
- package/lib/index.cjs.js +0 -1
- package/lib/index.esm.js +0 -6083
- package/lib/style.css +0 -1
- package/types/index.d.ts +0 -7
- package/types/index.d.ts.map +0 -1
- package/types/types/index.d.ts +0 -51
- package/types/types/index.d.ts.map +0 -1
- package/types/utils/province.d.ts +0 -2
- package/types/utils/province.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
-
#
|
|
1
|
+
# cd-vue-filter
|
|
2
2
|
|
|
3
|
-
一个功能强大的 Vue 3
|
|
3
|
+
一个功能强大的 Vue 3 筛选器组件包，支持内联筛选、高级筛选、方案管理和列配置等功能。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 🎯 **多种筛选模式**：支持内联筛选和高级筛选对话框
|
|
8
|
+
- 📋 **方案管理**：保存、编辑、复制、删除筛选方案
|
|
9
|
+
- 🎨 **灵活配置**：可自定义筛选字段数量和显示方式
|
|
10
|
+
- 📊 **列配置**：支持列的显示/隐藏、宽度调整和排序
|
|
11
|
+
- 🔄 **多种字段类型**：文本、数字、日期、下拉选择、省市区等
|
|
12
|
+
- 🎭 **丰富的操作符**：根据字段类型自动提供相应的操作符
|
|
13
|
+
- 💾 **方案共享**：支持方案的共享设置（私有/共享）
|
|
4
14
|
|
|
5
15
|
## 安装
|
|
6
16
|
|
|
@@ -12,14 +22,13 @@ yarn add cd-vue-filter
|
|
|
12
22
|
pnpm add cd-vue-filter
|
|
13
23
|
```
|
|
14
24
|
|
|
15
|
-
##
|
|
25
|
+
## 快速开始
|
|
16
26
|
|
|
17
27
|
### 全局注册
|
|
18
28
|
|
|
19
29
|
```javascript
|
|
20
30
|
import { createApp } from 'vue'
|
|
21
|
-
import
|
|
22
|
-
import 'cd-vue-filter/dist/style.css'
|
|
31
|
+
import { install } from 'cd-vue-filter'
|
|
23
32
|
|
|
24
33
|
const app = createApp(App)
|
|
25
34
|
app.use(install)
|
|
@@ -28,123 +37,278 @@ app.use(install)
|
|
|
28
37
|
### 按需导入
|
|
29
38
|
|
|
30
39
|
```javascript
|
|
31
|
-
import {
|
|
32
|
-
import 'cd-vue-filter/dist/style.css'
|
|
33
|
-
|
|
34
|
-
export default {
|
|
35
|
-
components: {
|
|
36
|
-
FilterDialog,
|
|
37
|
-
FilterComponent
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
+
import { CdFilterBar, CdFilter, FilterComponent } from 'cd-vue-filter'
|
|
40
41
|
```
|
|
41
42
|
|
|
42
43
|
## 组件说明
|
|
43
44
|
|
|
44
|
-
###
|
|
45
|
+
### CdFilterBar
|
|
45
46
|
|
|
46
|
-
|
|
47
|
+
筛选工具栏组件，是最常用的组件，集成了内联筛选、按钮操作和方案管理。
|
|
47
48
|
|
|
48
49
|
#### Props
|
|
49
50
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
52
|
+
|------|------|------|--------|
|
|
53
|
+
| fieldOptions | 字段选项配置（必填） | Array | - |
|
|
54
|
+
| filterCount | 内联筛选字段数量 | Number | 2 |
|
|
55
|
+
| selectOptions | 下拉选择字段的选项数据 | Array | [] |
|
|
56
|
+
| planFilterOptions | 我的方案列表 | Array | [] |
|
|
57
|
+
| size | 组件大小 | String | 'small' |
|
|
58
|
+
| width | 对话框宽度 | String | '1000px' |
|
|
59
|
+
| visibleColumns | 可见列配置 | Array | [] |
|
|
54
60
|
|
|
55
61
|
#### Events
|
|
56
62
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
| 事件名 | 说明 | 回调参数 |
|
|
64
|
+
|--------|------|----------|
|
|
65
|
+
| search | 内联搜索触发 | (result) |
|
|
66
|
+
| confirm | 高级筛选或方案选择确认 | (result) |
|
|
67
|
+
| reset | 重置筛选 | - |
|
|
68
|
+
| save-plan | 保存方案 | (payload) |
|
|
69
|
+
| delete-plan | 删除方案 | (plan) |
|
|
70
|
+
| copy-plan | 复制方案 | (plan) |
|
|
71
|
+
| set-default-plan | 设置默认方案 | (plan) |
|
|
72
|
+
| update-plan | 更新方案 | (payload) |
|
|
73
|
+
| column-change | 列配置变化 | (columns) |
|
|
74
|
+
|
|
75
|
+
## 使用示例
|
|
60
76
|
|
|
61
|
-
|
|
77
|
+
### 示例1: 默认2个筛选字段
|
|
62
78
|
|
|
63
79
|
```vue
|
|
64
80
|
<template>
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
81
|
+
<cd-filter-bar
|
|
82
|
+
:field-options="fieldOptions"
|
|
83
|
+
:select-options="selectOptions"
|
|
84
|
+
:plan-filter-options="planFilterOptions"
|
|
85
|
+
@search="handleSearch"
|
|
86
|
+
@confirm="handleConfirm"
|
|
87
|
+
@save-plan="handleSavePlan"
|
|
88
|
+
@delete-plan="handleDeletePlan"
|
|
89
|
+
@update-plan="handleUpdatePlan"
|
|
90
|
+
/>
|
|
74
91
|
</template>
|
|
75
92
|
|
|
76
93
|
<script setup>
|
|
77
94
|
import { ref } from 'vue'
|
|
78
|
-
import {
|
|
95
|
+
import { CdFilterBar } from 'cd-vue-filter'
|
|
79
96
|
|
|
80
|
-
const
|
|
97
|
+
const fieldOptions = ref([
|
|
98
|
+
{ key: '客户名称', label: '客户名称', value: 'customerName', type: 'text' },
|
|
99
|
+
{ key: '订单编号', label: '订单编号', value: 'orderNo', type: 'text' },
|
|
100
|
+
{ key: '订单金额', label: '订单金额', value: 'orderAmount', type: 'number' },
|
|
101
|
+
{ key: '订单日期', label: '订单日期', value: 'orderDate', type: 'date' },
|
|
102
|
+
{ key: '订单状态', label: '订单状态', value: 'orderStatus', type: 'select' }
|
|
103
|
+
])
|
|
81
104
|
|
|
82
|
-
const
|
|
105
|
+
const selectOptions = ref([
|
|
83
106
|
{
|
|
84
|
-
|
|
85
|
-
value: '
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
value: 'age',
|
|
91
|
-
type: 'number'
|
|
92
|
-
},
|
|
107
|
+
columnName: 'orderStatus',
|
|
108
|
+
value: ['待审核', '已审核', '已发货', '已完成', '已取消']
|
|
109
|
+
}
|
|
110
|
+
])
|
|
111
|
+
|
|
112
|
+
const planFilterOptions = ref([
|
|
93
113
|
{
|
|
94
|
-
|
|
95
|
-
value: '
|
|
96
|
-
|
|
114
|
+
content: '本月新订单',
|
|
115
|
+
value: 'plan_1',
|
|
116
|
+
sqlConnectType: 'and',
|
|
117
|
+
precepts: [
|
|
118
|
+
{
|
|
119
|
+
id: 1,
|
|
120
|
+
connector: 'and',
|
|
121
|
+
conditions: [
|
|
122
|
+
{ field: 'orderDate', operator: 'this_month', value: '' },
|
|
123
|
+
{ field: 'orderStatus', operator: 'eq', value: '待审核' }
|
|
124
|
+
]
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
])
|
|
129
|
+
|
|
130
|
+
const handleSearch = (result) => {
|
|
131
|
+
console.log('搜索结果:', result)
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
const handleConfirm = (result) => {
|
|
135
|
+
console.log('筛选结果:', result)
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
const handleSavePlan = (payload) => {
|
|
139
|
+
const newPlan = {
|
|
140
|
+
content: payload.name,
|
|
141
|
+
value: `plan_${Date.now()}`,
|
|
142
|
+
sqlConnectType: payload.topOp,
|
|
143
|
+
precepts: payload.precepts
|
|
97
144
|
}
|
|
98
|
-
|
|
145
|
+
planFilterOptions.value.push(newPlan)
|
|
146
|
+
}
|
|
99
147
|
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
|
|
148
|
+
const handleDeletePlan = (plan) => {
|
|
149
|
+
const index = planFilterOptions.value.findIndex(p => p.value === plan.value)
|
|
150
|
+
if (index !== -1) {
|
|
151
|
+
planFilterOptions.value.splice(index, 1)
|
|
152
|
+
}
|
|
103
153
|
}
|
|
104
154
|
|
|
105
|
-
const
|
|
106
|
-
|
|
155
|
+
const handleUpdatePlan = (payload) => {
|
|
156
|
+
const { name, precepts, topOp, plan } = payload
|
|
157
|
+
const index = planFilterOptions.value.findIndex(p => p.value === plan.value)
|
|
158
|
+
if (index !== -1) {
|
|
159
|
+
planFilterOptions.value[index] = {
|
|
160
|
+
...planFilterOptions.value[index],
|
|
161
|
+
content: name,
|
|
162
|
+
precepts: precepts,
|
|
163
|
+
sqlConnectType: topOp
|
|
164
|
+
}
|
|
165
|
+
}
|
|
107
166
|
}
|
|
108
167
|
</script>
|
|
109
168
|
```
|
|
110
169
|
|
|
111
|
-
###
|
|
170
|
+
### 示例2: 自定义3个筛选字段
|
|
112
171
|
|
|
113
|
-
|
|
172
|
+
```vue
|
|
173
|
+
<cd-filter-bar
|
|
174
|
+
:field-options="fieldOptions"
|
|
175
|
+
:select-options="selectOptions"
|
|
176
|
+
:plan-filter-options="planFilterOptions"
|
|
177
|
+
:filter-count="3"
|
|
178
|
+
@search="handleSearch"
|
|
179
|
+
@confirm="handleConfirm"
|
|
180
|
+
/>
|
|
181
|
+
```
|
|
114
182
|
|
|
115
|
-
|
|
183
|
+
### 示例3: 只有按钮没有内联筛选
|
|
116
184
|
|
|
117
|
-
|
|
118
|
-
- `filterCondition` (Object): 筛选条件
|
|
119
|
-
- `selectOptions` (Object, 可选): 下拉选项数据
|
|
185
|
+
当设置 `filter-count="0"` 时，不显示内联筛选字段，只显示方案选择和操作按钮：
|
|
120
186
|
|
|
121
|
-
|
|
187
|
+
```vue
|
|
188
|
+
<cd-filter-bar
|
|
189
|
+
:field-options="fieldOptions"
|
|
190
|
+
:select-options="selectOptions"
|
|
191
|
+
:plan-filter-options="planFilterOptions"
|
|
192
|
+
:filter-count="0"
|
|
193
|
+
@search="handleSearch"
|
|
194
|
+
@confirm="handleConfirm"
|
|
195
|
+
/>
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
### 示例4: 自定义对话框宽度
|
|
122
199
|
|
|
123
|
-
|
|
200
|
+
```vue
|
|
201
|
+
<cd-filter-bar
|
|
202
|
+
:field-options="fieldOptions"
|
|
203
|
+
:select-options="selectOptions"
|
|
204
|
+
:plan-filter-options="planFilterOptions"
|
|
205
|
+
width="400px"
|
|
206
|
+
@search="handleSearch"
|
|
207
|
+
@confirm="handleConfirm"
|
|
208
|
+
/>
|
|
209
|
+
```
|
|
124
210
|
|
|
125
211
|
## 字段类型支持
|
|
126
212
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
213
|
+
| 类型 | 说明 | 示例 |
|
|
214
|
+
|------|------|------|
|
|
215
|
+
| text | 文本类型 | 客户名称、订单编号 |
|
|
216
|
+
| number | 数字类型 | 数量、金额 |
|
|
217
|
+
| date | 日期类型 | 订单日期 |
|
|
218
|
+
| time | 日期时间类型 | 创建时间 |
|
|
219
|
+
| select | 下拉选择 | 订单状态、客户等级 |
|
|
220
|
+
| selectProvince | 省市区选择 | 所在地区 |
|
|
134
221
|
|
|
135
222
|
## 操作符支持
|
|
136
223
|
|
|
137
|
-
|
|
224
|
+
### 文本类型
|
|
225
|
+
- `eq`: 等于
|
|
226
|
+
- `ne`: 不等于
|
|
227
|
+
- `contains`: 包含
|
|
228
|
+
- `starts_with`: 开头是
|
|
229
|
+
- `ends_with`: 结尾是
|
|
230
|
+
|
|
231
|
+
### 数字类型
|
|
232
|
+
- `eq`: 等于
|
|
233
|
+
- `ne`: 不等于
|
|
234
|
+
- `gt`: 大于
|
|
235
|
+
- `gte`: 大于等于
|
|
236
|
+
- `lt`: 小于
|
|
237
|
+
- `lte`: 小于等于
|
|
238
|
+
|
|
239
|
+
### 日期类型
|
|
240
|
+
- `eq`: 等于
|
|
241
|
+
- `ne`: 不等于
|
|
242
|
+
- `gt`: 在此之后
|
|
243
|
+
- `gte`: 在此之后（含）
|
|
244
|
+
- `lt`: 在此之前
|
|
245
|
+
- `lte`: 在此之前（含）
|
|
246
|
+
- `today`: 今天
|
|
247
|
+
- `yesterday`: 昨天
|
|
248
|
+
- `tomorrow`: 明天
|
|
249
|
+
- `this_week`: 本周
|
|
250
|
+
- `last_week`: 上周
|
|
251
|
+
- `next_week`: 下周
|
|
252
|
+
- `this_month`: 本月
|
|
253
|
+
- `last_month`: 上月
|
|
254
|
+
- `next_month`: 下月
|
|
255
|
+
- `this_year`: 今年
|
|
256
|
+
- `last_year`: 去年
|
|
257
|
+
- `next_year`: 明年
|
|
258
|
+
|
|
259
|
+
### 下拉选择类型
|
|
260
|
+
- `eq`: 等于
|
|
261
|
+
- `ne`: 不等于
|
|
262
|
+
|
|
263
|
+
### 省市区类型
|
|
264
|
+
- `eq`: 等于
|
|
265
|
+
- `ne`: 不等于
|
|
266
|
+
- `contains`: 包含
|
|
267
|
+
- `not_contains`: 不包含
|
|
268
|
+
- `one_of`: 等于其中之一
|
|
269
|
+
|
|
270
|
+
## 方案数据结构
|
|
138
271
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
272
|
+
```javascript
|
|
273
|
+
{
|
|
274
|
+
content: '方案名称',
|
|
275
|
+
value: 'plan_1',
|
|
276
|
+
sqlConnectType: 'and', // 顶层连接符：'and' 或 'or'
|
|
277
|
+
precepts: [
|
|
278
|
+
{
|
|
279
|
+
id: 1,
|
|
280
|
+
connector: 'and', // 卡片内连接符：'and' 或 'or'
|
|
281
|
+
conditions: [
|
|
282
|
+
{
|
|
283
|
+
field: 'orderDate',
|
|
284
|
+
operator: 'this_month',
|
|
285
|
+
value: ''
|
|
286
|
+
},
|
|
287
|
+
{
|
|
288
|
+
field: 'orderStatus',
|
|
289
|
+
operator: 'eq',
|
|
290
|
+
value: '待审核'
|
|
291
|
+
}
|
|
292
|
+
]
|
|
293
|
+
}
|
|
294
|
+
],
|
|
295
|
+
columns: [ // 可选：列配置
|
|
296
|
+
{
|
|
297
|
+
value: 'customerName',
|
|
298
|
+
show: true,
|
|
299
|
+
width: '150px'
|
|
300
|
+
}
|
|
301
|
+
]
|
|
302
|
+
}
|
|
303
|
+
```
|
|
143
304
|
|
|
144
305
|
## 版本历史
|
|
145
306
|
|
|
146
|
-
-
|
|
147
|
-
- 1.0
|
|
307
|
+
- **2.2.0**: 修复 filterCount prop 问题，优化 filter-count=0 模式，添加筛选图标按钮
|
|
308
|
+
- **2.1.0**: 添加列配置功能，支持列的显示/隐藏、宽度调整和排序
|
|
309
|
+
- **2.0.0**: 重构组件架构，添加 CdFilterBar 组件
|
|
310
|
+
- **1.1.0**: 添加 FilterDialog 组件支持
|
|
311
|
+
- **1.0.x**: 初始版本，包含 FilterComponent 组件
|
|
148
312
|
|
|
149
313
|
## 许可证
|
|
150
314
|
|
package/package.json
CHANGED
|
@@ -1,60 +1,57 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "cd-vue-filter",
|
|
3
|
-
"version": "2.1
|
|
4
|
-
"type": "module",
|
|
5
|
-
"description": "一个功能强大的 Vue 3 过滤器组件，支持多种字段类型和操作符",
|
|
6
|
-
"main": "
|
|
7
|
-
"module": "
|
|
8
|
-
"types": "
|
|
9
|
-
"files": [
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"vue"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
"
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
"publishConfig": {
|
|
58
|
-
"access": "public"
|
|
59
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "cd-vue-filter",
|
|
3
|
+
"version": "2.2.1",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "一个功能强大的 Vue 3 过滤器组件，支持多种字段类型和操作符",
|
|
6
|
+
"main": "src/index.ts",
|
|
7
|
+
"module": "src/index.ts",
|
|
8
|
+
"types": "src/index.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"src"
|
|
11
|
+
],
|
|
12
|
+
"keywords": [
|
|
13
|
+
"vue",
|
|
14
|
+
"vue3",
|
|
15
|
+
"filter",
|
|
16
|
+
"component",
|
|
17
|
+
"tdesign",
|
|
18
|
+
"typescript"
|
|
19
|
+
],
|
|
20
|
+
"author": "CD",
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"peerDependencies": {
|
|
23
|
+
"tdesign-vue-next": "^1.0.0",
|
|
24
|
+
"vue": "^3.0.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@vitejs/plugin-vue": "^5.2.4",
|
|
28
|
+
"sass-embedded": "^1.97.1",
|
|
29
|
+
"tslib": "^2.6.0",
|
|
30
|
+
"typescript": "^5.0.0",
|
|
31
|
+
"vite": "^5.4.21",
|
|
32
|
+
"vue": "^3.3.0",
|
|
33
|
+
"vue-tsc": "^2.2.12"
|
|
34
|
+
},
|
|
35
|
+
"repository": {
|
|
36
|
+
"type": "git",
|
|
37
|
+
"url": "https://github.com/your-username/vue-filter-component.git"
|
|
38
|
+
},
|
|
39
|
+
"bugs": {
|
|
40
|
+
"url": "https://github.com/your-username/vue-filter-component/issues"
|
|
41
|
+
},
|
|
42
|
+
"homepage": "https://github.com/your-username/vue-filter-component#readme",
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"cd-personselector": "1.1.0",
|
|
48
|
+
"cd-usercard": "^2.3.0",
|
|
49
|
+
"install": "^0.13.0",
|
|
50
|
+
"pnpm": "^10.26.2"
|
|
51
|
+
},
|
|
52
|
+
"scripts": {
|
|
53
|
+
"dev": "vite",
|
|
54
|
+
"build": "vue-tsc --noEmit && vite build",
|
|
55
|
+
"preview": "vite preview"
|
|
56
|
+
}
|
|
60
57
|
}
|