feat: improve the operators of all fields
This commit is contained in:
parent
b9b41139c9
commit
2f880c6cd0
@ -21,8 +21,4 @@ export const attachment: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -23,7 +23,7 @@ export const checkbox: ISchema = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
{ label: '等于', value: 'eq' },
|
{ label: '是', value: '$isTruly', selected: true, noValue: true },
|
||||||
{ label: '不等于', value: 'ne' },
|
{ label: '否', value: '$isFalsy', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
|
import { multipleSelect } from './multipleSelect';
|
||||||
import { defaultProps, dataSource } from './properties';
|
import { defaultProps, dataSource } from './properties';
|
||||||
|
|
||||||
export const checkboxGroup: ISchema = {
|
export const checkboxGroup: ISchema = {
|
||||||
@ -23,8 +24,5 @@ export const checkboxGroup: ISchema = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
'uiSchema.enum': dataSource,
|
'uiSchema.enum': dataSource,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: multipleSelect.operations,
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -25,7 +25,6 @@ export const chinaRegion: ISchema = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
{ label: '等于', value: 'eq' },
|
{ label: '等于', value: 'code.in' },
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
|
import { datetime } from './datetime';
|
||||||
import { dateTimeProps, defaultProps } from './properties';
|
import { dateTimeProps, defaultProps } from './properties';
|
||||||
|
|
||||||
export const createdAt: ISchema = {
|
export const createdAt: ISchema = {
|
||||||
@ -26,8 +27,5 @@ export const createdAt: ISchema = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
...dateTimeProps,
|
...dateTimeProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: datetime.operations,
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -25,8 +25,4 @@ export const createdBy: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -27,7 +27,13 @@ export const datetime: ISchema = {
|
|||||||
...dateTimeProps,
|
...dateTimeProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
{ label: '等于', value: 'eq' },
|
{ label: '等于', value: '$dateOn', selected: true },
|
||||||
{ label: '不等于', value: 'ne' },
|
{ label: '不等于', value: '$dateNotOn' },
|
||||||
|
{ label: '早于', value: '$dateBefore' },
|
||||||
|
{ label: '晚于', value: '$dateAfter' },
|
||||||
|
{ label: '不早于', value: '$dateNotBefore' },
|
||||||
|
{ label: '不晚于', value: '$dateNotAfter' },
|
||||||
|
{ label: '非空', value: '$notNull', noValue: true },
|
||||||
|
{ label: '为空', value: '$null', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
import { defaultProps } from './properties';
|
import { defaultProps } from './properties';
|
||||||
|
import { string } from './string';
|
||||||
|
|
||||||
export const email: ISchema = {
|
export const email: ISchema = {
|
||||||
name: 'email',
|
name: 'email',
|
||||||
@ -23,8 +24,5 @@ export const email: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: string.operations,
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -20,8 +20,4 @@ export const markdown: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -27,7 +27,20 @@ export const multipleSelect: ISchema = {
|
|||||||
'uiSchema.enum': dataSource,
|
'uiSchema.enum': dataSource,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
{ label: '等于', value: 'eq' },
|
{
|
||||||
{ label: '不等于', value: 'ne' },
|
label: '等于',
|
||||||
|
value: '$match',
|
||||||
|
selected: true,
|
||||||
|
schema: { 'x-component': 'Select' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '不等于',
|
||||||
|
value: '$notMatch',
|
||||||
|
schema: { 'x-component': 'Select' },
|
||||||
|
},
|
||||||
|
{ label: '包含', value: '$anyOf', schema: { 'x-component': 'Select' } },
|
||||||
|
{ label: '不包含', value: '$noneOf', schema: { 'x-component': 'Select' } },
|
||||||
|
{ label: '非空', value: '$notNull', noValue: true },
|
||||||
|
{ label: '为空', value: '$null', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -42,7 +42,14 @@ export const number: ISchema = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
{ label: '等于', value: 'eq' },
|
{ label: '等于', value: 'eq', selected: true },
|
||||||
{ label: '不等于', value: 'ne' },
|
{ label: '不等于', value: 'ne' },
|
||||||
|
{ label: '大于', value: 'gt' },
|
||||||
|
{ label: '大于等于', value: 'gte' },
|
||||||
|
{ label: '小于', value: 'lt' },
|
||||||
|
{ label: '小于等于', value: 'lte' },
|
||||||
|
// {label: '介于', value: 'between'},
|
||||||
|
{ label: '非空', value: '$notNull', noValue: true },
|
||||||
|
{ label: '为空', value: '$null', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -21,8 +21,4 @@ export const password: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
|
import { number } from './number';
|
||||||
import { defaultProps } from './properties';
|
import { defaultProps } from './properties';
|
||||||
|
|
||||||
export const percent: ISchema = {
|
export const percent: ISchema = {
|
||||||
@ -42,8 +43,5 @@ export const percent: ISchema = {
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
operations: [
|
operations: number.operations,
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
import { defaultProps } from './properties';
|
import { defaultProps } from './properties';
|
||||||
|
import { string } from './string';
|
||||||
|
|
||||||
export const phone: ISchema = {
|
export const phone: ISchema = {
|
||||||
name: 'phone',
|
name: 'phone',
|
||||||
@ -23,8 +24,5 @@ export const phone: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: string.operations,
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
import { defaultProps, dataSource } from './properties';
|
import { defaultProps, dataSource } from './properties';
|
||||||
|
import { select } from './select';
|
||||||
|
|
||||||
export const radioGroup: ISchema = {
|
export const radioGroup: ISchema = {
|
||||||
name: 'radioGroup',
|
name: 'radioGroup',
|
||||||
@ -22,8 +23,5 @@ export const radioGroup: ISchema = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
'uiSchema.enum': dataSource,
|
'uiSchema.enum': dataSource,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: select.operations,
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -24,7 +24,26 @@ export const select: ISchema = {
|
|||||||
'uiSchema.enum': dataSource,
|
'uiSchema.enum': dataSource,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
{ label: '等于', value: 'eq' },
|
{
|
||||||
{ label: '不等于', value: 'ne' },
|
label: '等于',
|
||||||
|
value: 'eq',
|
||||||
|
selected: true,
|
||||||
|
schema: { 'x-component': 'Select' },
|
||||||
|
},
|
||||||
|
{ label: '不等于', value: 'ne', schema: { 'x-component': 'Select' } },
|
||||||
|
{
|
||||||
|
label: '包含',
|
||||||
|
value: 'in',
|
||||||
|
schema: { 'x-component': 'Select', 'x-component-props': { mode: 'tags' } },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '不包含',
|
||||||
|
value: 'notIn',
|
||||||
|
schema: {
|
||||||
|
'x-component': 'Select', 'x-component-props': { mode: 'tags' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ label: '非空', value: '$notNull', noValue: true },
|
||||||
|
{ label: '为空', value: '$null', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -24,7 +24,11 @@ export const string: ISchema = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
|
{ label: '包含', value: '$includes', selected: true },
|
||||||
|
{ label: '不包含', value: '$notIncludes' },
|
||||||
{ label: '等于', value: 'eq' },
|
{ label: '等于', value: 'eq' },
|
||||||
{ label: '不等于', value: 'ne' },
|
{ label: '不等于', value: 'ne' },
|
||||||
|
{ label: '非空', value: '$notNull', noValue: true },
|
||||||
|
{ label: '为空', value: '$null', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -21,8 +21,4 @@ export const textarea: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -40,7 +40,13 @@ export const time: ISchema = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
operations: [
|
operations: [
|
||||||
{ label: '等于', value: 'eq' },
|
{ label: '等于', value: 'eq', selected: true },
|
||||||
{ label: '不等于', value: 'ne' },
|
{ label: '不等于', value: 'neq' },
|
||||||
|
{ label: '大于', value: 'gt' },
|
||||||
|
{ label: '大于等于', value: 'gte' },
|
||||||
|
{ label: '小于', value: 'lt' },
|
||||||
|
{ label: '小于等于', value: 'lte' },
|
||||||
|
{ label: '非空', value: '$notNull', noValue: true },
|
||||||
|
{ label: '为空', value: '$null', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
|
import { datetime } from './datetime';
|
||||||
import { dateTimeProps, defaultProps } from './properties';
|
import { dateTimeProps, defaultProps } from './properties';
|
||||||
|
|
||||||
export const updatedAt: ISchema = {
|
export const updatedAt: ISchema = {
|
||||||
@ -26,8 +27,5 @@ export const updatedAt: ISchema = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
...dateTimeProps,
|
...dateTimeProps,
|
||||||
},
|
},
|
||||||
operations: [
|
operations: datetime.operations,
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -25,8 +25,4 @@ export const updatedBy: ISchema = {
|
|||||||
properties: {
|
properties: {
|
||||||
...defaultProps,
|
...defaultProps,
|
||||||
},
|
},
|
||||||
operations: [
|
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
@ -1,7 +1,21 @@
|
|||||||
import React, { useContext, useMemo, useState } from 'react';
|
import React, { useContext, useMemo, useState } from 'react';
|
||||||
import { SchemaField } from '..';
|
import { SchemaField } from '..';
|
||||||
import { createForm, onFieldChange, onFieldReact, onFormValuesChange } from '@formily/core';
|
import {
|
||||||
import { FormProvider, FormConsumer, useFieldSchema, Schema, SchemaOptionsContext, ISchema, SchemaKey } from '@formily/react';
|
createForm,
|
||||||
|
onFieldChange,
|
||||||
|
onFieldReact,
|
||||||
|
onFormValuesChange,
|
||||||
|
} from '@formily/core';
|
||||||
|
import {
|
||||||
|
FormProvider,
|
||||||
|
FormConsumer,
|
||||||
|
useFieldSchema,
|
||||||
|
Schema,
|
||||||
|
SchemaOptionsContext,
|
||||||
|
ISchema,
|
||||||
|
SchemaKey,
|
||||||
|
RecursionField,
|
||||||
|
} from '@formily/react';
|
||||||
import { Field } from '@formily/core/esm/models/Field';
|
import { Field } from '@formily/core/esm/models/Field';
|
||||||
import { Form } from '@formily/core/esm/models/Form';
|
import { Form } from '@formily/core/esm/models/Form';
|
||||||
import {
|
import {
|
||||||
@ -15,6 +29,7 @@ import {
|
|||||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
import { isValid } from '@formily/shared';
|
import { isValid } from '@formily/shared';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
function useFilterColumns(): Map<SchemaKey, Schema> {
|
function useFilterColumns(): Map<SchemaKey, Schema> {
|
||||||
const schema = useFieldSchema();
|
const schema = useFieldSchema();
|
||||||
@ -33,7 +48,6 @@ export const FilterItem = (props) => {
|
|||||||
const { value, initialValues = {}, onRemove, onChange } = props;
|
const { value, initialValues = {}, onRemove, onChange } = props;
|
||||||
const options = useContext(SchemaOptionsContext);
|
const options = useContext(SchemaOptionsContext);
|
||||||
const columns = useFilterColumns();
|
const columns = useFilterColumns();
|
||||||
console.log('FilterItem', value)
|
|
||||||
|
|
||||||
const toValues = (value) => {
|
const toValues = (value) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
@ -45,42 +59,49 @@ export const FilterItem = (props) => {
|
|||||||
const fieldName = Object.keys(value).shift();
|
const fieldName = Object.keys(value).shift();
|
||||||
const nested = value[fieldName];
|
const nested = value[fieldName];
|
||||||
const column = columns.get(fieldName).toJSON();
|
const column = columns.get(fieldName).toJSON();
|
||||||
|
const operations = column?.['x-component-props']?.['operations'] || [];
|
||||||
if (!nested) {
|
if (!nested) {
|
||||||
return {
|
return {
|
||||||
column,
|
column,
|
||||||
}
|
operations,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
if (Object.keys(nested).length === 0) {
|
if (Object.keys(nested).length === 0) {
|
||||||
return {
|
return {
|
||||||
column,
|
column,
|
||||||
}
|
operations,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
const operationValue = Object.keys(nested).shift();
|
const operationValue = Object.keys(nested).shift();
|
||||||
console.log('toValues', {operationValue});
|
console.log('toValues', { operationValue });
|
||||||
const operations = column?.['x-component-props']?.['operations']||[];
|
const operation = operations.find(
|
||||||
const operation = operations.find(operation => operation.value === operationValue);
|
(operation) => operation.value === operationValue,
|
||||||
console.log('toValues', {operation});
|
);
|
||||||
|
console.log('toValues', { operation });
|
||||||
if (!operation) {
|
if (!operation) {
|
||||||
return {
|
return {
|
||||||
|
operations,
|
||||||
column,
|
column,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
if (operation.noValue) {
|
if (operation.noValue) {
|
||||||
return {
|
return {
|
||||||
column,
|
column,
|
||||||
|
operations,
|
||||||
operation,
|
operation,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
column,
|
column,
|
||||||
operation,
|
operation,
|
||||||
|
operations,
|
||||||
value: nested[operationValue],
|
value: nested[operationValue],
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
|
|
||||||
const values = toValues(value);
|
const values = toValues(value);
|
||||||
|
|
||||||
// console.log('toValues', values, value);
|
console.log('toValues', values, value);
|
||||||
|
|
||||||
const Remove = (props) => {
|
const Remove = (props) => {
|
||||||
return (
|
return (
|
||||||
@ -92,11 +113,6 @@ export const FilterItem = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getComponent = (column: ISchema) => {
|
|
||||||
const field = Object.values(column.properties).shift();
|
|
||||||
return field ? get(options.components, field['x-component']) : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const form = useMemo(
|
const form = useMemo(
|
||||||
() =>
|
() =>
|
||||||
createForm({
|
createForm({
|
||||||
@ -104,16 +120,15 @@ export const FilterItem = (props) => {
|
|||||||
effects: (form) => {
|
effects: (form) => {
|
||||||
onFieldChange('column', (field: Field, form: Form) => {
|
onFieldChange('column', (field: Field, form: Form) => {
|
||||||
const column = (field.value || {}) as ISchema;
|
const column = (field.value || {}) as ISchema;
|
||||||
const operations = column?.['x-component-props']?.['operations']||[];
|
const operations =
|
||||||
|
column?.['x-component-props']?.['operations'] || [];
|
||||||
field.query('operation').take((f: Field) => {
|
field.query('operation').take((f: Field) => {
|
||||||
f.setDataSource(operations);
|
f.setDataSource(operations);
|
||||||
f.initialValue = get(operations, [0]);
|
f.value = get(operations, [0]);
|
||||||
});
|
});
|
||||||
field.query('value').take((f: Field) => {
|
field.query('value').take((f: Field) => {
|
||||||
f.value = null;
|
f.value = undefined;
|
||||||
const component = getComponent(column);
|
f.componentProps.schema = column;
|
||||||
console.log({ component });
|
|
||||||
f.setComponent(component, {});
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
onFieldReact('operation', (field: Field) => {
|
onFieldReact('operation', (field: Field) => {
|
||||||
@ -121,6 +136,10 @@ export const FilterItem = (props) => {
|
|||||||
const operation = field.value || {};
|
const operation = field.value || {};
|
||||||
field.query('value').take((f: Field) => {
|
field.query('value').take((f: Field) => {
|
||||||
f.visible = !operation.noValue;
|
f.visible = !operation.noValue;
|
||||||
|
if (operation.noValue) {
|
||||||
|
f.value = undefined;
|
||||||
|
}
|
||||||
|
f.componentProps.operation = operation;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
onFormValuesChange((form) => {
|
onFormValuesChange((form) => {
|
||||||
@ -130,16 +149,24 @@ export const FilterItem = (props) => {
|
|||||||
}
|
}
|
||||||
const fieldName = Object.keys(column.properties).shift();
|
const fieldName = Object.keys(column.properties).shift();
|
||||||
if (operation?.noValue) {
|
if (operation?.noValue) {
|
||||||
onChange({[fieldName]: {
|
onChange({
|
||||||
[operation.value]: true,
|
[fieldName]: {
|
||||||
}});
|
[operation.value]: true,
|
||||||
} else if (isValid(value)) {
|
},
|
||||||
onChange({[fieldName]: {
|
});
|
||||||
[operation.value]: value,
|
} else {
|
||||||
}});
|
onChange(
|
||||||
|
isValid(value)
|
||||||
|
? {
|
||||||
|
[fieldName]: {
|
||||||
|
[operation.value]: value,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: {},
|
||||||
|
);
|
||||||
}
|
}
|
||||||
console.log('form.values', form.values);
|
console.log('form.values', form.values);
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
[],
|
[],
|
||||||
@ -166,7 +193,7 @@ export const FilterItem = (props) => {
|
|||||||
fieldNames: {
|
fieldNames: {
|
||||||
label: 'title',
|
label: 'title',
|
||||||
value: 'name',
|
value: 'name',
|
||||||
}
|
},
|
||||||
}}
|
}}
|
||||||
enum={[...columns.values()].map((column) => column.toJSON())}
|
enum={[...columns.values()].map((column) => column.toJSON())}
|
||||||
/>
|
/>
|
||||||
@ -183,16 +210,20 @@ export const FilterItem = (props) => {
|
|||||||
width: 100,
|
width: 100,
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
enum={[]}
|
enum={values.operations}
|
||||||
/>
|
/>
|
||||||
<SchemaField.String
|
<SchemaField.Object
|
||||||
name="value"
|
name="value"
|
||||||
x-decorator="FormilyFormItem"
|
x-decorator="FormilyFormItem"
|
||||||
x-decorator-props={{
|
x-decorator-props={{
|
||||||
asterisk: true,
|
asterisk: true,
|
||||||
feedbackLayout: 'none',
|
feedbackLayout: 'none',
|
||||||
}}
|
}}
|
||||||
x-component="Input"
|
x-component="Filter.DynamicValue"
|
||||||
|
x-component-props={{
|
||||||
|
schema: values.column,
|
||||||
|
operation: values.operation,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<SchemaField.Void x-component="Remove" />
|
<SchemaField.Void x-component="Remove" />
|
||||||
</SchemaField.Void>
|
</SchemaField.Void>
|
||||||
|
@ -1,12 +1,29 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { connect, mapProps, mapReadPretty } from '@formily/react';
|
import {
|
||||||
|
connect,
|
||||||
|
mapProps,
|
||||||
|
mapReadPretty,
|
||||||
|
observer,
|
||||||
|
RecursionField,
|
||||||
|
ISchema,
|
||||||
|
Schema,
|
||||||
|
ArrayField,
|
||||||
|
useField,
|
||||||
|
FormProvider,
|
||||||
|
} from '@formily/react';
|
||||||
import { LoadingOutlined } from '@ant-design/icons';
|
import { LoadingOutlined } from '@ant-design/icons';
|
||||||
import { useDynamicList } from 'ahooks';
|
import { useDynamicList, useMap } from 'ahooks';
|
||||||
import { Select } from 'antd';
|
import { Select } from 'antd';
|
||||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||||
import { FilterItem } from './FilterItem';
|
import { FilterItem } from './FilterItem';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
|
import { cloneDeep } from 'lodash';
|
||||||
|
import { uid, isValid } from '@formily/shared';
|
||||||
|
import { SchemaField, SchemaRenderer } from '../../components/schema-renderer';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
import { createForm, onFormValuesChange } from '@formily/core';
|
||||||
|
import deepmerge from 'deepmerge';
|
||||||
|
|
||||||
const toValue = (value) => {
|
const toValue = (value) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
@ -36,6 +53,7 @@ const toValue = (value) => {
|
|||||||
export function FilterGroup(props) {
|
export function FilterGroup(props) {
|
||||||
const { bordered = true, onRemove, onChange } = props;
|
const { bordered = true, onRemove, onChange } = props;
|
||||||
const value = toValue(props.value);
|
const value = toValue(props.value);
|
||||||
|
console.log('list', value);
|
||||||
return (
|
return (
|
||||||
<div className={cls('nb-filter-group', { bordered })}>
|
<div className={cls('nb-filter-group', { bordered })}>
|
||||||
{onRemove && (
|
{onRemove && (
|
||||||
@ -63,9 +81,12 @@ export function FilterGroup(props) {
|
|||||||
<FilterList
|
<FilterList
|
||||||
initialValue={value.list}
|
initialValue={value.list}
|
||||||
onChange={(list: any[]) => {
|
onChange={(list: any[]) => {
|
||||||
|
console.log('list9999', list);
|
||||||
onChange &&
|
onChange &&
|
||||||
onChange({
|
onChange({
|
||||||
[value.logical]: list.filter((item) => Object.keys(item).length),
|
[value.logical]: list.filter(
|
||||||
|
(item) => isValid(item) && Object.keys(item).length,
|
||||||
|
),
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@ -74,23 +95,28 @@ export function FilterGroup(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function FilterList(props) {
|
export function FilterList(props) {
|
||||||
const { initialValue } = props;
|
const { initialValue = [] } = props;
|
||||||
const { list, push, remove, replace } = useDynamicList<any>(
|
|
||||||
initialValue || [],
|
const [map, { set, setAll, remove, reset, get }] = useMap<string, any>(
|
||||||
|
initialValue.map((item, index) => {
|
||||||
|
return [`index-${index}`, item];
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
props.onChange && props.onChange(list);
|
props.onChange && props.onChange([...map.values()]);
|
||||||
}, [list]);
|
}, [map]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'nb-filter-list'}>
|
<div className={'nb-filter-list'}>
|
||||||
<div>
|
<div>
|
||||||
{list.map((item, index) => {
|
{[...map.entries()].map(([index, item]) => {
|
||||||
if (item.and || item.or) {
|
if (item.and || item.or) {
|
||||||
return (
|
return (
|
||||||
<FilterGroup
|
<FilterGroup
|
||||||
key={index}
|
key={index}
|
||||||
value={item}
|
value={item}
|
||||||
onChange={(value: any) => replace(index, value)}
|
onChange={(value: any) => set(index, value)}
|
||||||
onRemove={() => remove(index)}
|
onRemove={() => remove(index)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -99,7 +125,7 @@ export function FilterList(props) {
|
|||||||
<FilterItem
|
<FilterItem
|
||||||
key={index}
|
key={index}
|
||||||
value={item}
|
value={item}
|
||||||
onChange={(value: any) => replace(index, value)}
|
onChange={(value: any) => set(index, value)}
|
||||||
onRemove={() => remove(index)}
|
onRemove={() => remove(index)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -107,14 +133,14 @@ export function FilterList(props) {
|
|||||||
</div>
|
</div>
|
||||||
<a
|
<a
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
push({});
|
set(uid(), {});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
添加条件
|
添加条件
|
||||||
</a>{' '}
|
</a>{' '}
|
||||||
<a
|
<a
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
push({
|
set(uid(), {
|
||||||
and: [{}],
|
and: [{}],
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
@ -125,7 +151,7 @@ export function FilterList(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Filter = connect(
|
export const Filter: any = connect(
|
||||||
(props) => {
|
(props) => {
|
||||||
// console.log('Filter.props', { props });
|
// console.log('Filter.props', { props });
|
||||||
return (
|
return (
|
||||||
@ -153,4 +179,64 @@ export const Filter = connect(
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
interface DynamicValuePorps {
|
||||||
|
value?: any;
|
||||||
|
onChange?: any;
|
||||||
|
schema?: Schema;
|
||||||
|
operation?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
Filter.DynamicValue = connect((props: DynamicValuePorps) => {
|
||||||
|
const { onChange, value, operation } = props;
|
||||||
|
const fieldName = Object.keys(props?.schema?.properties || {}).shift();
|
||||||
|
const fieldSchema = Object.values(props?.schema?.properties || {}).shift();
|
||||||
|
console.log('Filter.DynamicValue', fieldSchema, { operation });
|
||||||
|
const form = useMemo(
|
||||||
|
() =>
|
||||||
|
createForm({
|
||||||
|
initialValues: {
|
||||||
|
[fieldName || 'value']: value,
|
||||||
|
},
|
||||||
|
// effects() {
|
||||||
|
// onFormValuesChange((form) => {
|
||||||
|
// onChange(form.values[fieldName]);
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
}),
|
||||||
|
[value],
|
||||||
|
);
|
||||||
|
const extra: ISchema = deepmerge(
|
||||||
|
{
|
||||||
|
required: false,
|
||||||
|
'x-read-pretty': false,
|
||||||
|
'x-decorator': 'FormilyFormItem',
|
||||||
|
'x-decorator-props': {
|
||||||
|
asterisk: true,
|
||||||
|
feedbackLayout: 'none',
|
||||||
|
},
|
||||||
|
'x-component-props': {
|
||||||
|
onChange,
|
||||||
|
style: {
|
||||||
|
minWidth: '150px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
operation?.schema || {},
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<FormProvider form={form}>
|
||||||
|
<SchemaField
|
||||||
|
schema={{
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
[fieldName]: deepmerge(fieldSchema, extra, {
|
||||||
|
arrayMerge: (target, source) => source,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormProvider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
export default Filter;
|
export default Filter;
|
||||||
|
@ -40,15 +40,12 @@ import { useResource as useGeneralResource } from '../../hooks/useResource';
|
|||||||
import { Resource } from '../../resource';
|
import { Resource } from '../../resource';
|
||||||
import { BaseResult } from '@ahooksjs/use-request/lib/types';
|
import { BaseResult } from '@ahooksjs/use-request/lib/types';
|
||||||
|
|
||||||
export interface FormReadPrettyContextProps {
|
export interface DescriptionsContextProps {
|
||||||
resource?: Resource;
|
resource?: Resource;
|
||||||
service?: BaseResult<any, any>;
|
service?: BaseResult<any, any>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const FormContext = createContext<FormReadPrettyContextProps>({});
|
export const DescriptionsContext = createContext<DescriptionsContextProps>({});
|
||||||
export const FormReadPrettyContext = createContext<FormReadPrettyContextProps>(
|
|
||||||
{},
|
|
||||||
);
|
|
||||||
|
|
||||||
const FormMain = (props: any) => {
|
const FormMain = (props: any) => {
|
||||||
const {
|
const {
|
||||||
@ -135,9 +132,9 @@ const FormMain = (props: any) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return schema['x-read-pretty'] ? (
|
return schema['x-read-pretty'] ? (
|
||||||
<FormReadPrettyContext.Provider value={{ resource, service }}>
|
<DescriptionsContext.Provider value={{ resource, service }}>
|
||||||
{content}
|
{content}
|
||||||
</FormReadPrettyContext.Provider>
|
</DescriptionsContext.Provider>
|
||||||
) : (
|
) : (
|
||||||
<>{content}</>
|
<>{content}</>
|
||||||
);
|
);
|
||||||
|
@ -70,7 +70,7 @@ import { isValid } from '@formily/shared';
|
|||||||
import { FormButtonGroup, FormDialog, FormLayout, Submit } from '@formily/antd';
|
import { FormButtonGroup, FormDialog, FormLayout, Submit } from '@formily/antd';
|
||||||
import flatten from 'flat';
|
import flatten from 'flat';
|
||||||
import IconPicker from '../../components/icon-picker';
|
import IconPicker from '../../components/icon-picker';
|
||||||
import { FormReadPrettyContext } from '../form';
|
import { DescriptionsContext } from '../form';
|
||||||
import { VisibleContext } from '../../context';
|
import { VisibleContext } from '../../context';
|
||||||
|
|
||||||
export interface ITableContext {
|
export interface ITableContext {
|
||||||
@ -155,7 +155,7 @@ const useTableUpdateAction = () => {
|
|||||||
} = useTable();
|
} = useTable();
|
||||||
const ctx = useContext(TableRowContext);
|
const ctx = useContext(TableRowContext);
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
const { service: formService } = useContext(FormReadPrettyContext);
|
const { service: formService } = useContext(DescriptionsContext);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
async run() {
|
async run() {
|
||||||
|
Loading…
Reference in New Issue
Block a user