Skip to content

Commit

Permalink
Merge pull request #11221 from 2betop/chore-frontend-fitlter
Browse files Browse the repository at this point in the history 
fix: 修复前端一次性加载前端过滤必须配置 matchFunc 的问题
  • Loading branch information
@hsm-lv
hsm-lv authored Nov 22, 2024
2 parents b65ee7d + 2a9b788 commit 5abaddf
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 102 deletions.
130 changes: 31 additions & 99 deletions packages/amis-core/src/store/crud.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,8 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
loadDataMode?: boolean;
syncResponse2Query?: boolean;
columns?: Array<any>;
matchFunc?: MatchFunc;
filterOnAllColumns?: boolean; // 前端是否让所有字段参与过滤
isTable2?: Boolean; // 是否是 CRUD2
}
) => Promise<any> = flow(function* getInitData(
Expand All @@ -222,26 +224,30 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
syncResponse2Query?: boolean;
columns?: Array<any>;
matchFunc?: MatchFunc;
filterOnAllColumns?: boolean; // 前端是否让所有字段参与过滤
} = {}
) {
try {
if (!options.forceReload && options.loadDataOnce && self.total) {
let rawItems = options.source
? resolveVariableAndFilter(
options.source,
createObject(self.mergedData, {
items: self.data.itemsRaw,
rows: self.data.itemsRaw
}),
'| raw'
)
: self.items.concat();

if (!options.forceReload && options.loadDataOnce && rawItems?.length) {
const matchFunc = options.matchFunc;
let items = options.source
? resolveVariableAndFilter(
options.source,
createObject(self.mergedData, {
items: self.data.itemsRaw,
rows: self.data.itemsRaw
}),
'| raw'
)
: self.items.concat();
let items = rawItems;

items = applyFilters(items, {
query: self.query,
columns: options.columns,
matchFunc: matchFunc
matchFunc: matchFunc,
filterOnAllColumns: options.filterOnAllColumns
});

if (self.query.orderBy) {
Expand Down Expand Up @@ -380,43 +386,12 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
* 2. 接口返回中没有 items 和 rows 字段，则直接用查到的数据。
*/
data.itemsRaw = oItems || oRows || rowsData.concat();
let filteredItems = rowsData.concat();

if (Array.isArray(options.columns)) {
options.columns.forEach((column: any) => {
let value: any;
const key = column.name;
if (
column.searchable &&
key &&
(value = getVariable(self.query, key))
) {
if (Array.isArray(value)) {
if (value.length > 0) {
const arr = [...filteredItems];
let arrItems: Array<any> = [];
value.forEach(item => {
arrItems = [
...arrItems,
...matchSorter(arr, item, {
keys: [key],
threshold: matchSorter.rankings.CONTAINS
})
];
});
filteredItems = filteredItems.filter(item =>
arrItems.find(a => a === item)
);
}
} else {
filteredItems = matchSorter(filteredItems, value, {
keys: [key],
threshold: matchSorter.rankings.CONTAINS
});
}
}
});
}
let filteredItems = applyFilters(rowsData, {
query: self.query,
columns: options.columns,
filterOnAllColumns: false,
matchFunc: options.matchFunc
});

if (self.query.orderBy) {
const dir = /desc/i.test(self.query.orderDir) ? -1 : 1;
Expand Down Expand Up @@ -642,65 +617,22 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
matchFunc?: MatchFunc | null;
}
) {
const matchFunc = options.matchFunc;
let items: Array<any> = resolveVariableAndFilter(source, scope, '| raw');

if (!Array.isArray(items) && !self.items.length) {
return;
}

items = Array.isArray(items) ? items : [];

/** 字段的格式类型无法穷举，所以支持使用函数过滤 */
if (matchFunc && typeof matchFunc === 'function') {
items = matchFunc(items, items.concat(), {
query: self.query,
columns: options.columns,
matchSorter: matchSorter
});
} else {
if (Array.isArray(options.columns)) {
options.columns.forEach((column: any) => {
let value: any =
typeof column.name === 'string'
? getVariable(self.query, column.name)
: undefined;
const key = column.name;

if (value != null && key) {
// value可能为null、undefined、''、0
if (Array.isArray(value)) {
if (value.length > 0) {
const arr = [...items];
let arrItems: Array<any> = [];
/** 搜索 query 值为数组的情况 */
value.forEach(item => {
arrItems = [
...arrItems,
...matchSorter(arr, item, {
keys: [key],
threshold: matchSorter.rankings.CONTAINS
})
];
});
items = items.filter((item: any) =>
arrItems.find(a => a === item)
);
}
} else {
items = matchSorter(items, value, {
keys: [key],
threshold: matchSorter.rankings.CONTAINS
});
}
}
});
}
}
items = applyFilters(Array.isArray(items) ? items : [], {
query: self.query,
columns: options.columns,
matchFunc: options.matchFunc,
filterOnAllColumns: true
});

if (self.query.orderBy) {
const dir = /desc/i.test(self.query.orderDir) ? -1 : 1;
items = sortArray(items, self.query.orderBy, dir);
items = sortArray(items.concat(), self.query.orderBy, dir);
}

const data = {
Expand Down
11 changes: 9 additions & 2 deletions packages/amis-core/src/utils/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1503,7 +1503,8 @@ export function applyFilters<T extends any>(
options: {
query: any;
columns?: Array<any>;
matchFunc?: Function;
matchFunc?: Function | null;
filterOnAllColumns?: boolean;
}
) {
if (options.matchFunc && typeof options.matchFunc === 'function') {
Expand All @@ -1517,7 +1518,13 @@ export function applyFilters<T extends any>(
: undefined;
const key = column.name;

if (value != null && key) {
if (
(options.filterOnAllColumns ||
column.searchable ||
column.filterable) &&
key &&
value != null
) {
// value可能为null、undefined、''、0
if (Array.isArray(value)) {
if (value.length > 0) {
Expand Down
5 changes: 4 additions & 1 deletion packages/amis/src/renderers/CRUD.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1284,6 +1284,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
pickerMode,
env,
loadDataOnce,
loadDataOnceFetchOnFilter,
source,
columns,
dispatchEvent
Expand Down Expand Up @@ -1335,7 +1336,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
loadDataMode,
syncResponse2Query,
columns: store.columns ?? columns,
matchFunc
matchFunc,
filterOnAllColumns: loadDataOnceFetchOnFilter === false
});
if (!isAlive(store)) {
return value;
Expand All @@ -1362,6 +1364,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {

// 空列表 且 页数已经非法超出，则跳转到最后的合法页数
if (
!loadDataOnce &&
!store.data.items.length &&
!interval &&
page > 1 &&
Expand Down

0 comments on commit 5abaddf

Please sign in to comment.