foggy-data-viewer 1.0.1-beta.44 → 1.0.1-beta.46
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 +220 -199
- package/dist/components/DataTable.vue.d.ts +4 -2
- package/dist/components/QueryPanel.vue.d.ts +4 -2
- package/dist/components/SearchToolbar.vue.d.ts +2 -1
- package/dist/components/composables/useTableSummary.d.ts +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2891 -2733
- package/dist/index.umd +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +20 -0
- package/dist/utils/viewer.d.ts +13 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
- 📊 **动态列配置** - 基于 QM Schema + TableConfig 的灵活列配置
|
|
9
9
|
- 🔍 **高级筛选** - 支持多种数据类型的筛选器(表头过滤 + 独立搜索工具栏)
|
|
10
10
|
- 📈 **汇总行** - 自动计算选中行和全量汇总
|
|
11
|
-
- 🎨 **自定义渲染** - 支持 `column-*` 插槽、自定义格式化和渲染函数
|
|
11
|
+
- 🎨 **自定义渲染** - 支持 `column-*` 插槽、自定义格式化和渲染函数
|
|
12
12
|
- 🔧 **组合组件** - 提供 SearchToolbar + DataTable 的组合组件
|
|
13
13
|
- ✅ **高测试覆盖** - 核心组件覆盖率 90%+
|
|
14
14
|
- 📦 **按需引入** - ES Module 支持
|
|
@@ -99,10 +99,31 @@ function handlePageChange(page: number, pageSize: number) {
|
|
|
99
99
|
:loading="false"
|
|
100
100
|
@page-change="handlePageChange"
|
|
101
101
|
/>
|
|
102
|
-
</template>
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
|
|
102
|
+
</template>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### 3. 展示“分”为“元”的金额字段
|
|
106
|
+
|
|
107
|
+
金额单位必须由字段元数据显式声明;组件不会根据字段名、`MONEY` 类型或
|
|
108
|
+
`semanticScaleFactor` 推断。模型定义可直接复用公共导出:
|
|
109
|
+
|
|
110
|
+
```typescript
|
|
111
|
+
import { MONEY_VIEWER } from 'foggy-data-viewer'
|
|
112
|
+
|
|
113
|
+
const amountField = {
|
|
114
|
+
name: 'amount',
|
|
115
|
+
type: 'MONEY',
|
|
116
|
+
extData: {
|
|
117
|
+
viewer: MONEY_VIEWER
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
此配置会把原始值 `3400` 展示为 `34.00`,并把筛选输入的 `34` 精确换算为
|
|
123
|
+
提交给查询端的 `3400`。行数据、服务端汇总数据和排序值始终保持原始“分”值;
|
|
124
|
+
已经返回“元”的字段不要配置 `MONEY_VIEWER`。
|
|
125
|
+
|
|
126
|
+
## 组件列表
|
|
106
127
|
|
|
107
128
|
### 核心组件
|
|
108
129
|
|
|
@@ -139,33 +160,33 @@ function handlePageChange(page: number, pageSize: number) {
|
|
|
139
160
|
| columns | `EnhancedColumnSchema[]` | - | 列配置(必填) |
|
|
140
161
|
| data | `any[]` | - | 表格数据(必填) |
|
|
141
162
|
| total | `number` | - | 总数据量(必填) |
|
|
142
|
-
| loading | `boolean` | `false` | 加载状态 |
|
|
143
|
-
| pageSize | `number` | `50` | 每页显示数量 |
|
|
144
|
-
| showFilters | `boolean` | `true` | 是否显示筛选器 |
|
|
145
|
-
| localFilter | `boolean` | `true` | 是否把列头筛选条件应用到当前 `data` |
|
|
146
|
-
| serverSummary | `object \| null` | `null` | 服务端汇总数据 |
|
|
147
|
-
| initialSlice | `SliceCondition[]` | - | 初始筛选条件 |
|
|
148
|
-
| filterOptionsLoader | `Function` | - | 筛选选项加载器 |
|
|
149
|
-
|
|
150
|
-
`DataTableWithSearch` 在 `schema + fetchData` 服务端查询模式下默认 `localFilter=false`:列头筛选仍会提交给 `fetchData`,但返回数据不会再被前端二次过滤,避免聚合字段、派生字段、字典展示字段被简单本地比较误删。需要纯前端过滤时,可显式设置 `localFilter=true` 或 `schema.localFilter=true`。
|
|
151
|
-
|
|
152
|
-
### DataTableWithSearch tableInstanceId 默认查询配置
|
|
153
|
-
|
|
154
|
-
`schema + fetchData` 模式支持按 `tableInstanceId` 加载默认查询配置。默认查询配置只负责默认展示列、排序、分页和筛选;`requiredRuntimeColumns`、`lockedColumns` 由 TM/QM 产出的 `TableSchema` 提供。
|
|
155
|
-
|
|
156
|
-
```vue
|
|
157
|
-
<DataTableWithSearch
|
|
158
|
-
:schema="{ ...tableSchema, qmModel: 'TicketQueryModel', tableInstanceId: 'ticket-list' }"
|
|
159
|
-
:fetch-data="fetchTickets"
|
|
160
|
-
:default-query-config-scope="{ userId: currentUser.id, tenantId: currentTenant.id, roleIds: currentRoleIds }"
|
|
161
|
-
/>
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
后端可通过 `foggy.data-viewer.table-defaults.system/tenants/roles` 配置 fallback;用户默认配置仍可通过 `listPreset` 覆盖。`requiredRuntimeColumns` 只会追加到 `fetchData(params).columns`,不会显示为普通列。
|
|
165
|
-
|
|
166
|
-
### DataTable Events
|
|
167
|
-
|
|
168
|
-
| 事件名 | 参数 | 说明 |
|
|
163
|
+
| loading | `boolean` | `false` | 加载状态 |
|
|
164
|
+
| pageSize | `number` | `50` | 每页显示数量 |
|
|
165
|
+
| showFilters | `boolean` | `true` | 是否显示筛选器 |
|
|
166
|
+
| localFilter | `boolean` | `true` | 是否把列头筛选条件应用到当前 `data` |
|
|
167
|
+
| serverSummary | `object \| null` | `null` | 服务端汇总数据 |
|
|
168
|
+
| initialSlice | `SliceCondition[]` | - | 初始筛选条件 |
|
|
169
|
+
| filterOptionsLoader | `Function` | - | 筛选选项加载器 |
|
|
170
|
+
|
|
171
|
+
`DataTableWithSearch` 在 `schema + fetchData` 服务端查询模式下默认 `localFilter=false`:列头筛选仍会提交给 `fetchData`,但返回数据不会再被前端二次过滤,避免聚合字段、派生字段、字典展示字段被简单本地比较误删。需要纯前端过滤时,可显式设置 `localFilter=true` 或 `schema.localFilter=true`。
|
|
172
|
+
|
|
173
|
+
### DataTableWithSearch tableInstanceId 默认查询配置
|
|
174
|
+
|
|
175
|
+
`schema + fetchData` 模式支持按 `tableInstanceId` 加载默认查询配置。默认查询配置只负责默认展示列、排序、分页和筛选;`requiredRuntimeColumns`、`lockedColumns` 由 TM/QM 产出的 `TableSchema` 提供。
|
|
176
|
+
|
|
177
|
+
```vue
|
|
178
|
+
<DataTableWithSearch
|
|
179
|
+
:schema="{ ...tableSchema, qmModel: 'TicketQueryModel', tableInstanceId: 'ticket-list' }"
|
|
180
|
+
:fetch-data="fetchTickets"
|
|
181
|
+
:default-query-config-scope="{ userId: currentUser.id, tenantId: currentTenant.id, roleIds: currentRoleIds }"
|
|
182
|
+
/>
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
后端可通过 `foggy.data-viewer.table-defaults.system/tenants/roles` 配置 fallback;用户默认配置仍可通过 `listPreset` 覆盖。`requiredRuntimeColumns` 只会追加到 `fetchData(params).columns`,不会显示为普通列。
|
|
186
|
+
|
|
187
|
+
### DataTable Events
|
|
188
|
+
|
|
189
|
+
| 事件名 | 参数 | 说明 |
|
|
169
190
|
|--------|------|------|
|
|
170
191
|
| page-change | `(page, pageSize)` | 分页变化 |
|
|
171
192
|
| sort-change | `(field, order)` | 排序变化 |
|
|
@@ -201,179 +222,179 @@ function buildTableColumns(
|
|
|
201
222
|
- `showAll?: boolean` - 是否显示所有列
|
|
202
223
|
- `customizations?: ColumnCustomization[]` - 列自定义配置
|
|
203
224
|
|
|
204
|
-
**返回:**
|
|
205
|
-
- `EnhancedColumnSchema[]` - 增强的列配置数组
|
|
206
|
-
|
|
207
|
-
## 列内容自定义
|
|
208
|
-
|
|
209
|
-
### `column-*` 插槽(推荐用于交互)
|
|
210
|
-
|
|
211
|
-
当业务列需要渲染成链接、按钮,或点击后交给上游页面打开详情、编辑弹窗时,推荐使用 `#column-{field}` 插槽。插槽参数为 `{ row, value, column }`。
|
|
212
|
-
|
|
213
|
-
```vue
|
|
214
|
-
<script setup lang="ts">
|
|
215
|
-
function openDetail(row: Record<string, unknown>) {
|
|
216
|
-
// 由业务系统决定跳转、弹窗或其他处理方式
|
|
217
|
-
}
|
|
218
|
-
</script>
|
|
219
|
-
|
|
220
|
-
<template>
|
|
221
|
-
<DataTableWithSearch
|
|
222
|
-
:columns="columns"
|
|
223
|
-
:data="data"
|
|
224
|
-
:total="total"
|
|
225
|
-
:loading="loading"
|
|
226
|
-
>
|
|
227
|
-
<template #column-name="{ row, value }">
|
|
228
|
-
<button type="button" class="link-cell" @click.stop="openDetail(row)">
|
|
229
|
-
{{ value || '-' }}
|
|
230
|
-
</button>
|
|
231
|
-
</template>
|
|
232
|
-
</DataTableWithSearch>
|
|
233
|
-
</template>
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
`foggy-gen` 生成的 QueryTable wrapper 也会透传 `column-*` / `filter-*` 动态插槽,因此业务页可以直接在生成组件上写同样的插槽:
|
|
237
|
-
|
|
238
|
-
```vue
|
|
239
|
-
<VehicleCapacityProfileManagementQueryTable>
|
|
240
|
-
<template #column-profileName="{ row, value }">
|
|
241
|
-
<button type="button" class="link-cell" @click.stop="openProfile(row)">
|
|
242
|
-
{{ value || '-' }}
|
|
243
|
-
</button>
|
|
244
|
-
</template>
|
|
245
|
-
</VehicleCapacityProfileManagementQueryTable>
|
|
246
|
-
```
|
|
247
|
-
|
|
248
|
-
### `render` 函数(适合纯展示)
|
|
249
|
-
|
|
250
|
-
如果只是添加颜色、图标、标签等展示效果,也可以通过 `ColumnCustomization.render` 或生成组件的 `columnOverrides[field].render` 配置渲染函数:
|
|
251
|
-
|
|
252
|
-
```typescript
|
|
253
|
-
import { h } from 'vue'
|
|
254
|
-
import { buildTableColumns } from 'foggy-data-viewer'
|
|
255
|
-
|
|
256
|
-
const columns = buildTableColumns(qmSchema, {
|
|
257
|
-
visibleColumns: ['name', 'status'],
|
|
258
|
-
customizations: [
|
|
259
|
-
{
|
|
260
|
-
name: 'status',
|
|
261
|
-
render: ({ value, column }) => h(
|
|
262
|
-
'span',
|
|
263
|
-
{ class: value === 'active' ? 'status-ok' : 'status-muted' },
|
|
264
|
-
`${column.title}: ${String(value ?? '-')}`
|
|
265
|
-
)
|
|
266
|
-
}
|
|
267
|
-
]
|
|
268
|
-
})
|
|
269
|
-
```
|
|
270
|
-
|
|
271
|
-
选择原则:需要绑定业务事件时优先用 `column-*` 插槽;只改显示内容时使用 `render` 更轻。
|
|
272
|
-
|
|
273
|
-
### 全局列渲染器(应用级统一增强)
|
|
274
|
-
|
|
275
|
-
业务系统可以在应用启动时注册 `globalColumnRenderers`,按列元数据统一增强单元格展示。生成的 QueryTable wrapper 不需要批量修改。
|
|
276
|
-
|
|
277
|
-
```typescript
|
|
278
|
-
import { h } from 'vue'
|
|
279
|
-
import { globalColumnRenderers } from 'foggy-data-viewer'
|
|
280
|
-
|
|
281
|
-
const dispose = globalColumnRenderers.add({
|
|
282
|
-
id: 'app.orderNoLink',
|
|
283
|
-
priority: 100,
|
|
284
|
-
match: ({ column }) => column.name === 'orderNo' && /运单号/.test(column.title ?? ''),
|
|
285
|
-
render: ({ value }) => {
|
|
286
|
-
const text = String(value ?? '').trim()
|
|
287
|
-
if (!text) return '-'
|
|
288
|
-
return h('button', {
|
|
289
|
-
type: 'button',
|
|
290
|
-
class: 'data-viewer-link-cell',
|
|
291
|
-
onClick: (event: MouseEvent) => {
|
|
292
|
-
event.stopPropagation()
|
|
293
|
-
// 在业务应用闭包里调用 router.push(...)
|
|
294
|
-
}
|
|
295
|
-
}, text)
|
|
296
|
-
}
|
|
297
|
-
})
|
|
298
|
-
|
|
299
|
-
// 应用卸载或测试清理
|
|
300
|
-
dispose()
|
|
301
|
-
```
|
|
302
|
-
|
|
303
|
-
渲染优先级固定为:`column-*` 插槽 > `column.customRender` > `globalColumnRenderers` > 默认渲染/字典/formatter。列级退出可设置 `column.uiConfig.disableGlobalRender = true`。
|
|
304
|
-
|
|
305
|
-
### 全局搜索生命周期 Hook
|
|
306
|
-
|
|
307
|
-
`globalSearchHooks` 作用于搜索动作层,早于最终 `fetchData` 和 `globalQueryHooks.onBeforeQuery`。它可以区分搜索来源和触发原因,适合埋点、默认条件补充和无效查询拦截。
|
|
308
|
-
|
|
309
|
-
```typescript
|
|
310
|
-
import { globalSearchHooks } from 'foggy-data-viewer'
|
|
311
|
-
|
|
312
|
-
globalSearchHooks.register({
|
|
313
|
-
beforeSearch: (ctx) => {
|
|
314
|
-
if (ctx.trigger === 'search' && ctx.slice.length === 0) return false
|
|
315
|
-
return {
|
|
316
|
-
slice: [
|
|
317
|
-
...ctx.slice,
|
|
318
|
-
{ field: 'tenantId', op: '=', value: currentTenantId }
|
|
319
|
-
]
|
|
320
|
-
}
|
|
321
|
-
},
|
|
322
|
-
afterSearch: (ctx, result) => {
|
|
323
|
-
console.log(ctx.source, ctx.trigger, result.total)
|
|
324
|
-
},
|
|
325
|
-
searchError: (ctx, error) => {
|
|
326
|
-
console.warn(ctx.source, ctx.trigger, error)
|
|
327
|
-
}
|
|
328
|
-
})
|
|
329
|
-
```
|
|
330
|
-
|
|
331
|
-
`ctx.source` 为 `search-toolbar | query-panel | column-filter | external | api`,`ctx.trigger` 为 `search | reset | filter | sort | page | refresh | reload | mount`。
|
|
332
|
-
|
|
333
|
-
## 类型定义
|
|
334
|
-
|
|
335
|
-
```typescript
|
|
336
|
-
import type { Component } from 'vue'
|
|
337
|
-
|
|
338
|
-
interface ColumnSchema {
|
|
339
|
-
name: string
|
|
340
|
-
type: string
|
|
341
|
-
title: string
|
|
342
|
-
}
|
|
343
|
-
|
|
344
|
-
interface CellRenderContext {
|
|
345
|
-
row: Record<string, unknown>
|
|
346
|
-
value: unknown
|
|
347
|
-
column: EnhancedColumnSchema
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
type CellRenderFn = (params: CellRenderContext) => unknown
|
|
351
|
-
|
|
352
|
-
interface ColumnCustomization {
|
|
353
|
-
name: string
|
|
354
|
-
width?: number
|
|
355
|
-
minWidth?: number
|
|
356
|
-
fixed?: 'left' | 'right'
|
|
357
|
-
formatter?: (value: unknown) => string
|
|
358
|
-
render?: CellRenderFn
|
|
359
|
-
filterComponent?: Component | unknown
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
interface TableConfig {
|
|
225
|
+
**返回:**
|
|
226
|
+
- `EnhancedColumnSchema[]` - 增强的列配置数组
|
|
227
|
+
|
|
228
|
+
## 列内容自定义
|
|
229
|
+
|
|
230
|
+
### `column-*` 插槽(推荐用于交互)
|
|
231
|
+
|
|
232
|
+
当业务列需要渲染成链接、按钮,或点击后交给上游页面打开详情、编辑弹窗时,推荐使用 `#column-{field}` 插槽。插槽参数为 `{ row, value, column }`。
|
|
233
|
+
|
|
234
|
+
```vue
|
|
235
|
+
<script setup lang="ts">
|
|
236
|
+
function openDetail(row: Record<string, unknown>) {
|
|
237
|
+
// 由业务系统决定跳转、弹窗或其他处理方式
|
|
238
|
+
}
|
|
239
|
+
</script>
|
|
240
|
+
|
|
241
|
+
<template>
|
|
242
|
+
<DataTableWithSearch
|
|
243
|
+
:columns="columns"
|
|
244
|
+
:data="data"
|
|
245
|
+
:total="total"
|
|
246
|
+
:loading="loading"
|
|
247
|
+
>
|
|
248
|
+
<template #column-name="{ row, value }">
|
|
249
|
+
<button type="button" class="link-cell" @click.stop="openDetail(row)">
|
|
250
|
+
{{ value || '-' }}
|
|
251
|
+
</button>
|
|
252
|
+
</template>
|
|
253
|
+
</DataTableWithSearch>
|
|
254
|
+
</template>
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
`foggy-gen` 生成的 QueryTable wrapper 也会透传 `column-*` / `filter-*` 动态插槽,因此业务页可以直接在生成组件上写同样的插槽:
|
|
258
|
+
|
|
259
|
+
```vue
|
|
260
|
+
<VehicleCapacityProfileManagementQueryTable>
|
|
261
|
+
<template #column-profileName="{ row, value }">
|
|
262
|
+
<button type="button" class="link-cell" @click.stop="openProfile(row)">
|
|
263
|
+
{{ value || '-' }}
|
|
264
|
+
</button>
|
|
265
|
+
</template>
|
|
266
|
+
</VehicleCapacityProfileManagementQueryTable>
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### `render` 函数(适合纯展示)
|
|
270
|
+
|
|
271
|
+
如果只是添加颜色、图标、标签等展示效果,也可以通过 `ColumnCustomization.render` 或生成组件的 `columnOverrides[field].render` 配置渲染函数:
|
|
272
|
+
|
|
273
|
+
```typescript
|
|
274
|
+
import { h } from 'vue'
|
|
275
|
+
import { buildTableColumns } from 'foggy-data-viewer'
|
|
276
|
+
|
|
277
|
+
const columns = buildTableColumns(qmSchema, {
|
|
278
|
+
visibleColumns: ['name', 'status'],
|
|
279
|
+
customizations: [
|
|
280
|
+
{
|
|
281
|
+
name: 'status',
|
|
282
|
+
render: ({ value, column }) => h(
|
|
283
|
+
'span',
|
|
284
|
+
{ class: value === 'active' ? 'status-ok' : 'status-muted' },
|
|
285
|
+
`${column.title}: ${String(value ?? '-')}`
|
|
286
|
+
)
|
|
287
|
+
}
|
|
288
|
+
]
|
|
289
|
+
})
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
选择原则:需要绑定业务事件时优先用 `column-*` 插槽;只改显示内容时使用 `render` 更轻。
|
|
293
|
+
|
|
294
|
+
### 全局列渲染器(应用级统一增强)
|
|
295
|
+
|
|
296
|
+
业务系统可以在应用启动时注册 `globalColumnRenderers`,按列元数据统一增强单元格展示。生成的 QueryTable wrapper 不需要批量修改。
|
|
297
|
+
|
|
298
|
+
```typescript
|
|
299
|
+
import { h } from 'vue'
|
|
300
|
+
import { globalColumnRenderers } from 'foggy-data-viewer'
|
|
301
|
+
|
|
302
|
+
const dispose = globalColumnRenderers.add({
|
|
303
|
+
id: 'app.orderNoLink',
|
|
304
|
+
priority: 100,
|
|
305
|
+
match: ({ column }) => column.name === 'orderNo' && /运单号/.test(column.title ?? ''),
|
|
306
|
+
render: ({ value }) => {
|
|
307
|
+
const text = String(value ?? '').trim()
|
|
308
|
+
if (!text) return '-'
|
|
309
|
+
return h('button', {
|
|
310
|
+
type: 'button',
|
|
311
|
+
class: 'data-viewer-link-cell',
|
|
312
|
+
onClick: (event: MouseEvent) => {
|
|
313
|
+
event.stopPropagation()
|
|
314
|
+
// 在业务应用闭包里调用 router.push(...)
|
|
315
|
+
}
|
|
316
|
+
}, text)
|
|
317
|
+
}
|
|
318
|
+
})
|
|
319
|
+
|
|
320
|
+
// 应用卸载或测试清理
|
|
321
|
+
dispose()
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
渲染优先级固定为:`column-*` 插槽 > `column.customRender` > `globalColumnRenderers` > 默认渲染/字典/formatter。列级退出可设置 `column.uiConfig.disableGlobalRender = true`。
|
|
325
|
+
|
|
326
|
+
### 全局搜索生命周期 Hook
|
|
327
|
+
|
|
328
|
+
`globalSearchHooks` 作用于搜索动作层,早于最终 `fetchData` 和 `globalQueryHooks.onBeforeQuery`。它可以区分搜索来源和触发原因,适合埋点、默认条件补充和无效查询拦截。
|
|
329
|
+
|
|
330
|
+
```typescript
|
|
331
|
+
import { globalSearchHooks } from 'foggy-data-viewer'
|
|
332
|
+
|
|
333
|
+
globalSearchHooks.register({
|
|
334
|
+
beforeSearch: (ctx) => {
|
|
335
|
+
if (ctx.trigger === 'search' && ctx.slice.length === 0) return false
|
|
336
|
+
return {
|
|
337
|
+
slice: [
|
|
338
|
+
...ctx.slice,
|
|
339
|
+
{ field: 'tenantId', op: '=', value: currentTenantId }
|
|
340
|
+
]
|
|
341
|
+
}
|
|
342
|
+
},
|
|
343
|
+
afterSearch: (ctx, result) => {
|
|
344
|
+
console.log(ctx.source, ctx.trigger, result.total)
|
|
345
|
+
},
|
|
346
|
+
searchError: (ctx, error) => {
|
|
347
|
+
console.warn(ctx.source, ctx.trigger, error)
|
|
348
|
+
}
|
|
349
|
+
})
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
`ctx.source` 为 `search-toolbar | query-panel | column-filter | external | api`,`ctx.trigger` 为 `search | reset | filter | sort | page | refresh | reload | mount`。
|
|
353
|
+
|
|
354
|
+
## 类型定义
|
|
355
|
+
|
|
356
|
+
```typescript
|
|
357
|
+
import type { Component } from 'vue'
|
|
358
|
+
|
|
359
|
+
interface ColumnSchema {
|
|
360
|
+
name: string
|
|
361
|
+
type: string
|
|
362
|
+
title: string
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
interface CellRenderContext {
|
|
366
|
+
row: Record<string, unknown>
|
|
367
|
+
value: unknown
|
|
368
|
+
column: EnhancedColumnSchema
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
type CellRenderFn = (params: CellRenderContext) => unknown
|
|
372
|
+
|
|
373
|
+
interface ColumnCustomization {
|
|
374
|
+
name: string
|
|
375
|
+
width?: number
|
|
376
|
+
minWidth?: number
|
|
377
|
+
fixed?: 'left' | 'right'
|
|
378
|
+
formatter?: (value: unknown) => string
|
|
379
|
+
render?: CellRenderFn
|
|
380
|
+
filterComponent?: Component | unknown
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
interface TableConfig {
|
|
363
384
|
visibleColumns?: string[]
|
|
364
385
|
showAll?: boolean
|
|
365
386
|
customizations?: ColumnCustomization[]
|
|
366
387
|
}
|
|
367
388
|
|
|
368
389
|
interface EnhancedColumnSchema extends ColumnSchema {
|
|
369
|
-
width?: number
|
|
370
|
-
minWidth?: number
|
|
371
|
-
fixed?: 'left' | 'right'
|
|
372
|
-
customFormatter?: (value: unknown) => string
|
|
373
|
-
customRender?: CellRenderFn
|
|
374
|
-
customFilterComponent?: Component | unknown
|
|
375
|
-
}
|
|
376
|
-
```
|
|
390
|
+
width?: number
|
|
391
|
+
minWidth?: number
|
|
392
|
+
fixed?: 'left' | 'right'
|
|
393
|
+
customFormatter?: (value: unknown) => string
|
|
394
|
+
customRender?: CellRenderFn
|
|
395
|
+
customFilterComponent?: Component | unknown
|
|
396
|
+
}
|
|
397
|
+
```
|
|
377
398
|
|
|
378
399
|
## 开发
|
|
379
400
|
|
|
@@ -67,6 +67,8 @@ type __VLS_Slots = {
|
|
|
67
67
|
row: Record<string, unknown>;
|
|
68
68
|
column: EnhancedColumnSchema;
|
|
69
69
|
value: unknown;
|
|
70
|
+
rawValue: unknown;
|
|
71
|
+
displayValue: string;
|
|
70
72
|
}) => unknown;
|
|
71
73
|
/** 自定义过滤器 */
|
|
72
74
|
[key: `filter-${string}`]: (props: {
|
|
@@ -82,7 +84,7 @@ interface ClearSelectionOptions {
|
|
|
82
84
|
}
|
|
83
85
|
declare function clearTableSelection(options?: ClearSelectionOptions): void;
|
|
84
86
|
declare function getAllFilterSlices(): SliceRequestDef[];
|
|
85
|
-
declare function
|
|
87
|
+
declare function setRawFilter(columnName: string, value: SliceRequestDef[] | null): void;
|
|
86
88
|
declare function resetPagination(): void;
|
|
87
89
|
declare function clearFilters(): void;
|
|
88
90
|
declare const __VLS_component: import("vue").DefineComponent<Props, {
|
|
@@ -91,7 +93,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
|
|
|
91
93
|
/** 获取当前过滤状态 (DSL slices) */
|
|
92
94
|
getFilters: typeof getAllFilterSlices;
|
|
93
95
|
/** 设置过滤值 */
|
|
94
|
-
setFilter: typeof
|
|
96
|
+
setFilter: typeof setRawFilter;
|
|
95
97
|
/** 获取 vxe-grid 实例 */
|
|
96
98
|
getGridInstance: () => VxeGridInstance;
|
|
97
99
|
/** 获取当前选中行数组 */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { SliceRequestDef, MemberQueryRequest, MemberQueryResponse } from '@/types';
|
|
1
|
+
import type { FieldExtData, SliceRequestDef, MemberQueryRequest, MemberQueryResponse } from '@/types';
|
|
2
2
|
/**
|
|
3
3
|
* QueryPanel - 传统查询区组件
|
|
4
4
|
*
|
|
@@ -21,6 +21,7 @@ export interface QueryFieldSchema {
|
|
|
21
21
|
order?: number;
|
|
22
22
|
span?: number;
|
|
23
23
|
visible?: boolean;
|
|
24
|
+
extData?: FieldExtData;
|
|
24
25
|
}
|
|
25
26
|
export interface QueryPanelLayoutSchema {
|
|
26
27
|
mode?: 'grid';
|
|
@@ -59,11 +60,12 @@ interface Props {
|
|
|
59
60
|
qmModel?: string;
|
|
60
61
|
}
|
|
61
62
|
declare function handleSearch(): void;
|
|
63
|
+
declare function getRawSlices(): SliceRequestDef[];
|
|
62
64
|
declare function handleReset(): void;
|
|
63
65
|
declare const _default: import("vue").DefineComponent<Props, {
|
|
64
66
|
search: typeof handleSearch;
|
|
65
67
|
reset: typeof handleReset;
|
|
66
|
-
getSlices:
|
|
68
|
+
getSlices: typeof getRawSlices;
|
|
67
69
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
68
70
|
search: () => any;
|
|
69
71
|
reset: () => any;
|
|
@@ -26,12 +26,13 @@ interface Props {
|
|
|
26
26
|
/** QM 模型名称(远程成员加载所需) */
|
|
27
27
|
qmModel?: string;
|
|
28
28
|
}
|
|
29
|
+
declare function getRawFilterSlices(): SliceRequestDef[];
|
|
29
30
|
declare function handleReset(): void;
|
|
30
31
|
declare const _default: import("vue").DefineComponent<Props, {
|
|
31
32
|
/** 清空所有筛选 */
|
|
32
33
|
clearFilters: typeof handleReset;
|
|
33
34
|
/** 获取当前筛选条件 */
|
|
34
|
-
getFilters:
|
|
35
|
+
getFilters: typeof getRawFilterSlices;
|
|
35
36
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
36
37
|
search: () => any;
|
|
37
38
|
reset: () => any;
|
|
@@ -12,5 +12,5 @@ export declare function useTableSummary(columns: Ref<ColumnSchema[]>): {
|
|
|
12
12
|
type?: string;
|
|
13
13
|
}[], selectedSummary: Record<string, unknown>, fallbackTotal?: number) => (string | number | null)[][];
|
|
14
14
|
setServerSummary: (data: Record<string, unknown> | null) => void;
|
|
15
|
-
formatValue: (value: unknown,
|
|
15
|
+
formatValue: (value: unknown, typeOrColumn?: string | ColumnSchema) => string;
|
|
16
16
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export type { QueryFieldSchema, QueryPanelLayoutSchema, QueryPanelExpose, QueryS
|
|
|
16
16
|
export * from './components/filters';
|
|
17
17
|
export * from './components/composables';
|
|
18
18
|
export { buildTableColumns, calculateColumnWidth } from './utils/schemaHelper';
|
|
19
|
+
export { MONEY_VIEWER, formatViewerValue, getColumnMoneyViewer, resolveMoneyViewer, viewerSlicesToDisplay, viewerSlicesToRaw } from './utils/viewer';
|
|
19
20
|
export { buildPivotGridColumns, flattenPivotLeafNodes, validatePivotHeaderTree } from './utils/pivotHeaderTree';
|
|
20
21
|
export { buildPivotCellField, toPivotViewModel } from './utils/pivotViewModelAdapter';
|
|
21
22
|
export type { BuildPivotGridColumnsOptions, PivotGridColumn, PivotHeaderValidationResult } from './utils/pivotHeaderTree';
|
|
@@ -24,4 +25,4 @@ export type { QueryPayload, CreateQueryRequest, CreateQueryResponse } from './ap
|
|
|
24
25
|
export { listPresets, getDefaultListPreset, createListPreset, getListPreset, updateListPreset, deleteListPreset, setDefaultListPreset, clearDefaultListPreset } from './api/listPreset';
|
|
25
26
|
export type { ListPresetScope, SaveListPresetRequest, UpdateListPresetRequest } from './api/listPreset';
|
|
26
27
|
export { getTableDefaultQueryConfig } from './api/tableDefaultQueryConfig';
|
|
27
|
-
export type { ColumnSchema, EnhancedColumnSchema, TableConfig, TableSchema, CellRenderContext, CellRenderFn, GlobalColumnRenderContext, GlobalColumnMatchFn, GlobalColumnRenderFn, GlobalColumnRenderer, GlobalColumnRenderResolution, CellCopyConfig, QueryMode, ColumnCustomization, QueryMetaResponse, ViewerQueryRequest, ViewerDataResponse, SliceRequestDef, OrderRequestDef, FilterOption, FetchDataParams, FetchDataResult, FetchDataFn, DictItem, PaginationState, SortState, QueryHooks, QueryHookContext, QueryTrigger, QueryHookName, BeforeQueryHookFn, AfterQueryHookFn, ErrorQueryHookFn, SearchSource, SearchTrigger, SearchHookContext, SearchHookUpdate, SearchHookName, BeforeSearchHookFn, AfterSearchHookFn, ErrorSearchHookFn, SearchHooks, MaybePromise, PivotAxisField, PivotAxisPage, PivotAxisPageScope, PivotAxisRole, PivotHeaderNode, PivotHeaderRole, PivotMetric, PivotRawAxisMember, PivotRawCell, PivotRawPayload, PivotShape, PivotViewMode, PivotViewModel, ListPresetVisibility, ListPresetPlacement, ListPresetConfig, TableDefaultQueryConfig, TableDefaultQueryConfigScope, TableDefaultQueryConfigLoadOptions, TableDefaultQueryConfigSource, ColumnViewSetting, QueryConditionPreset, ListViewState, ListPresetDef, FrontendMeta, FieldMeta, FieldCategory, MemberLookupMeta, UiHintsMeta, DefaultsMeta, CapabilitiesMeta, ParamsMeta, MemberQueryRequest, MemberOption, MemberQueryResponse } from './types';
|
|
28
|
+
export type { ColumnSchema, MoneyViewerConfig, ViewerConfig, FieldExtData, EnhancedColumnSchema, TableConfig, TableSchema, CellRenderContext, CellRenderFn, GlobalColumnRenderContext, GlobalColumnMatchFn, GlobalColumnRenderFn, GlobalColumnRenderer, GlobalColumnRenderResolution, CellCopyConfig, QueryMode, ColumnCustomization, QueryMetaResponse, ViewerQueryRequest, ViewerDataResponse, SliceRequestDef, OrderRequestDef, FilterOption, FetchDataParams, FetchDataResult, FetchDataFn, DictItem, PaginationState, SortState, QueryHooks, QueryHookContext, QueryTrigger, QueryHookName, BeforeQueryHookFn, AfterQueryHookFn, ErrorQueryHookFn, SearchSource, SearchTrigger, SearchHookContext, SearchHookUpdate, SearchHookName, BeforeSearchHookFn, AfterSearchHookFn, ErrorSearchHookFn, SearchHooks, MaybePromise, PivotAxisField, PivotAxisPage, PivotAxisPageScope, PivotAxisRole, PivotHeaderNode, PivotHeaderRole, PivotMetric, PivotRawAxisMember, PivotRawCell, PivotRawPayload, PivotShape, PivotViewMode, PivotViewModel, ListPresetVisibility, ListPresetPlacement, ListPresetConfig, TableDefaultQueryConfig, TableDefaultQueryConfigScope, TableDefaultQueryConfigLoadOptions, TableDefaultQueryConfigSource, ColumnViewSetting, QueryConditionPreset, ListViewState, ListPresetDef, FrontendMeta, FieldMeta, FieldCategory, MemberLookupMeta, UiHintsMeta, DefaultsMeta, CapabilitiesMeta, ParamsMeta, MemberQueryRequest, MemberOption, MemberQueryResponse } from './types';
|