feat: improve code
This commit is contained in:
parent
4e9baf3957
commit
d4bd033917
@ -107,6 +107,10 @@ export const AddFieldAction = () => {
|
|||||||
<Dropdown
|
<Dropdown
|
||||||
overlay={
|
overlay={
|
||||||
<Menu
|
<Menu
|
||||||
|
style={{
|
||||||
|
maxHeight: '60vh',
|
||||||
|
overflow: 'auto',
|
||||||
|
}}
|
||||||
onClick={(info) => {
|
onClick={(info) => {
|
||||||
const schema = getSchema(getInterface(info.key));
|
const schema = getSchema(getInterface(info.key));
|
||||||
setSchema(schema);
|
setSchema(schema);
|
||||||
@ -115,11 +119,13 @@ export const AddFieldAction = () => {
|
|||||||
>
|
>
|
||||||
{options.map((option) => {
|
{options.map((option) => {
|
||||||
return (
|
return (
|
||||||
<Menu.SubMenu title={compile(option.label)}>
|
option.children.length > 0 && (
|
||||||
{option.children.map((child) => {
|
<Menu.ItemGroup title={compile(option.label)}>
|
||||||
return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
|
{option.children.map((child) => {
|
||||||
})}
|
return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
|
||||||
</Menu.SubMenu>
|
})}
|
||||||
|
</Menu.ItemGroup>
|
||||||
|
)
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Menu>
|
</Menu>
|
||||||
|
@ -42,6 +42,7 @@ export const useCollectionFilterOptions = (collectionName: string) => {
|
|||||||
const option = {
|
const option = {
|
||||||
name: field.name,
|
name: field.name,
|
||||||
title: field?.uiSchema?.title || field.name,
|
title: field?.uiSchema?.title || field.name,
|
||||||
|
schema: field?.uiSchema,
|
||||||
operators: fieldInterface.operators || [],
|
operators: fieldInterface.operators || [],
|
||||||
};
|
};
|
||||||
return option;
|
return option;
|
||||||
|
@ -74,5 +74,5 @@ export const chinaRegion: IField = {
|
|||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
operators: [{ label: '{{t("is")}}', value: 'code.in' }],
|
operators: [{ label: '{{t("is")}}', value: 'code.$in' }],
|
||||||
};
|
};
|
||||||
|
@ -26,7 +26,7 @@ export const multipleSelect: IField = {
|
|||||||
...defaultProps,
|
...defaultProps,
|
||||||
'uiSchema.enum': dataSource,
|
'uiSchema.enum': dataSource,
|
||||||
},
|
},
|
||||||
operations: [
|
operators: [
|
||||||
{
|
{
|
||||||
label: '{{t("is")}}',
|
label: '{{t("is")}}',
|
||||||
value: '$match',
|
value: '$match',
|
||||||
@ -48,7 +48,7 @@ export const multipleSelect: IField = {
|
|||||||
value: '$noneOf',
|
value: '$noneOf',
|
||||||
schema: { 'x-component': 'Select' },
|
schema: { 'x-component': 'Select' },
|
||||||
},
|
},
|
||||||
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
|
{ label: '{{t("is empty")}}', value: '$empty', noValue: true },
|
||||||
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
|
{ label: '{{t("is not empty")}}', value: '$notEmpty', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -49,7 +49,7 @@ export const select: IField = {
|
|||||||
'x-component-props': { mode: 'tags' },
|
'x-component-props': { mode: 'tags' },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
|
{ label: '{{t("is empty")}}', value: '$empty', noValue: true },
|
||||||
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
|
{ label: '{{t("is not empty")}}', value: '$notEmpty', noValue: true },
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
@ -2,7 +2,7 @@ import { LoadingOutlined } from '@ant-design/icons';
|
|||||||
import { ArrayField } from '@formily/core';
|
import { ArrayField } from '@formily/core';
|
||||||
import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
|
import { connect, mapProps, mapReadPretty, useField } from '@formily/react';
|
||||||
import { toArr } from '@formily/shared';
|
import { toArr } from '@formily/shared';
|
||||||
import { Cascader as AntdCascader } from 'antd';
|
import { Cascader as AntdCascader, Space } from 'antd';
|
||||||
import { isBoolean, omit } from 'lodash';
|
import { isBoolean, omit } from 'lodash';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { useRequest } from '../../../api-client';
|
import { useRequest } from '../../../api-client';
|
||||||
@ -25,7 +25,7 @@ export const Cascader = connect(
|
|||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
labelInValue,
|
labelInValue,
|
||||||
fieldNames = defaultFieldNames,
|
// fieldNames = defaultFieldNames,
|
||||||
useDataSource = useDefDataSource,
|
useDataSource = useDefDataSource,
|
||||||
useLoadData = useDefLoadData,
|
useLoadData = useDefLoadData,
|
||||||
changeOnSelectLast,
|
changeOnSelectLast,
|
||||||
@ -33,6 +33,7 @@ export const Cascader = connect(
|
|||||||
maxLevel,
|
maxLevel,
|
||||||
...others
|
...others
|
||||||
} = props;
|
} = props;
|
||||||
|
const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
|
||||||
const loadData = useLoadData(props);
|
const loadData = useLoadData(props);
|
||||||
const { loading } = useDataSource({
|
const { loading } = useDataSource({
|
||||||
onSuccess(data) {
|
onSuccess(data) {
|
||||||
@ -49,24 +50,17 @@ export const Cascader = connect(
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
const displayRender = (labels: string[], selectedOptions: any[]) => {
|
const displayRender = (labels: string[], selectedOptions: any[]) => {
|
||||||
const values = toArr(value);
|
return (
|
||||||
if (values.length !== labels.length) {
|
<Space split={'/'}>
|
||||||
labels = toValue();
|
{labels.map((label, index) => {
|
||||||
selectedOptions = values;
|
if (selectedOptions[index]) {
|
||||||
}
|
return <span key={label}>{label}</span>;
|
||||||
if (selectedOptions.length === 0) {
|
}
|
||||||
selectedOptions = values;
|
const item = toArr(value).find((item) => item[fieldNames.value] === label);
|
||||||
}
|
return <span key={label}>{item?.[fieldNames.label] || label}</span>;
|
||||||
return labels.map((label, i) => {
|
})}
|
||||||
let option = selectedOptions[i];
|
</Space>
|
||||||
if (!option || typeof option === 'string' || typeof option === 'number') {
|
);
|
||||||
option = { [fieldNames.label]: label, [fieldNames.value]: label };
|
|
||||||
}
|
|
||||||
if (i === labels.length - 1) {
|
|
||||||
return <span key={option[fieldNames.value]}>{option[fieldNames.label]}</span>;
|
|
||||||
}
|
|
||||||
return <span key={option[fieldNames.value]}>{option[fieldNames.label]} / </span>;
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<AntdCascader
|
<AntdCascader
|
||||||
|
@ -25,9 +25,10 @@ export const DynamicComponent = (props) => {
|
|||||||
return (
|
return (
|
||||||
<SchemaComponent
|
<SchemaComponent
|
||||||
schema={{
|
schema={{
|
||||||
name: 'value',
|
|
||||||
'x-component': 'Input',
|
'x-component': 'Input',
|
||||||
...props.schema,
|
...props.schema,
|
||||||
|
name: 'value',
|
||||||
|
'x-read-pretty': false,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -17,7 +17,7 @@ const ObjectSelect = (props: Props) => {
|
|||||||
if (isEmptyObject(v)) {
|
if (isEmptyObject(v)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const values = toArr(v).map((val) => {
|
const values = toArr(v).filter(item => item).map((val) => {
|
||||||
return typeof val === 'object' ? val[fieldNames.value] : val;
|
return typeof val === 'object' ? val[fieldNames.value] : val;
|
||||||
});
|
});
|
||||||
const current = getCurrentOptions(values, options, fieldNames)?.map((val) => {
|
const current = getCurrentOptions(values, options, fieldNames)?.map((val) => {
|
||||||
@ -62,7 +62,7 @@ export const Select = connect(
|
|||||||
if (objectValue) {
|
if (objectValue) {
|
||||||
return <ObjectSelect {...others} />;
|
return <ObjectSelect {...others} />;
|
||||||
}
|
}
|
||||||
return <AntdSelect {...others} />;
|
return <AntdSelect {...others} value={others.value || undefined}/>;
|
||||||
},
|
},
|
||||||
mapProps(
|
mapProps(
|
||||||
{
|
{
|
||||||
|
@ -0,0 +1,96 @@
|
|||||||
|
import { Switch } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
import { SchemaInitializer } from '../../SchemaInitializer';
|
||||||
|
import { useCurrentSchema } from '../utils';
|
||||||
|
|
||||||
|
export const UserFieldInitializer = (props) => {
|
||||||
|
const { item, insert } = props;
|
||||||
|
const { exists, remove } = useCurrentSchema(
|
||||||
|
item.schema['x-collection-field'],
|
||||||
|
'x-collection-field',
|
||||||
|
item.find,
|
||||||
|
item.remove,
|
||||||
|
);
|
||||||
|
const targetKey = item.field.targetKey || 'id';
|
||||||
|
return (
|
||||||
|
<SchemaInitializer.Item
|
||||||
|
onClick={() => {
|
||||||
|
console.log(item, exists);
|
||||||
|
if (exists) {
|
||||||
|
return remove();
|
||||||
|
}
|
||||||
|
insert({
|
||||||
|
...item.schema,
|
||||||
|
'x-component': 'CollectionField',
|
||||||
|
'x-component-props': {
|
||||||
|
mode: 'tags',
|
||||||
|
fieldNames: {
|
||||||
|
label: targetKey,
|
||||||
|
value: targetKey,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
item: {
|
||||||
|
'x-component': 'RecordPicker.SelectedItem',
|
||||||
|
properties: {
|
||||||
|
drawer1: {
|
||||||
|
'x-component': 'Action.Drawer',
|
||||||
|
type: 'void',
|
||||||
|
title: 'Drawer Title',
|
||||||
|
properties: {
|
||||||
|
details: {
|
||||||
|
type: 'void',
|
||||||
|
'x-collection': 'collections',
|
||||||
|
'x-decorator': 'ResourceActionProvider',
|
||||||
|
'x-decorator-props': {
|
||||||
|
collection: item.field.target,
|
||||||
|
request: {
|
||||||
|
resource: item.field.target,
|
||||||
|
action: 'get',
|
||||||
|
params: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'x-designer': 'Form.Designer',
|
||||||
|
'x-component': 'CardItem',
|
||||||
|
properties: {
|
||||||
|
form: {
|
||||||
|
type: 'void',
|
||||||
|
'x-decorator': 'Form',
|
||||||
|
'x-decorator-props': {},
|
||||||
|
properties: {
|
||||||
|
actions: {
|
||||||
|
type: 'void',
|
||||||
|
'x-initializer': 'FormActionInitializers',
|
||||||
|
'x-component': 'ActionBar',
|
||||||
|
'x-component-props': {
|
||||||
|
layout: 'one-column',
|
||||||
|
style: {
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
properties: {},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Grid',
|
||||||
|
'x-initializer': 'GridFormItemInitializers',
|
||||||
|
properties: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||||
|
{item.title} <Switch style={{ marginLeft: 20 }} size={'small'} checked={exists} />
|
||||||
|
</div>
|
||||||
|
</SchemaInitializer.Item>
|
||||||
|
);
|
||||||
|
};
|
@ -9,4 +9,5 @@ export * from './LinkToCollectionFieldInitializer';
|
|||||||
export * from './MarkdownBlockInitializer';
|
export * from './MarkdownBlockInitializer';
|
||||||
export * from './SubTableFieldInitializer';
|
export * from './SubTableFieldInitializer';
|
||||||
export * from './TableBlockInitializer';
|
export * from './TableBlockInitializer';
|
||||||
|
export * from './UserFieldInitializer';
|
||||||
|
|
||||||
|
@ -61,7 +61,7 @@ export const useTableColumnInitializerFields = () => {
|
|||||||
return fields
|
return fields
|
||||||
.filter((field) => field?.interface && field?.interface !== 'subTable')
|
.filter((field) => field?.interface && field?.interface !== 'subTable')
|
||||||
.map((field) => {
|
.map((field) => {
|
||||||
if (field.interface === 'linkTo') {
|
if (field.target) {
|
||||||
return {
|
return {
|
||||||
field,
|
field,
|
||||||
type: 'item',
|
type: 'item',
|
||||||
@ -96,22 +96,6 @@ export const useFormItemInitializerFields = () => {
|
|||||||
return fields
|
return fields
|
||||||
?.filter((field) => field?.interface)
|
?.filter((field) => field?.interface)
|
||||||
?.map((field) => {
|
?.map((field) => {
|
||||||
if (field.interface === 'linkTo') {
|
|
||||||
return {
|
|
||||||
type: 'item',
|
|
||||||
title: field?.uiSchema?.title || field.name,
|
|
||||||
component: 'LinkToFieldInitializer',
|
|
||||||
remove: removeGridFormItem,
|
|
||||||
field,
|
|
||||||
schema: {
|
|
||||||
name: field.name,
|
|
||||||
'x-designer': 'FormItem.Designer',
|
|
||||||
'x-component': 'CollectionField',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-collection-field': `${name}.${field.name}`,
|
|
||||||
},
|
|
||||||
} as SchemaInitializerItemOptions;
|
|
||||||
}
|
|
||||||
if (field.interface === 'subTable') {
|
if (field.interface === 'subTable') {
|
||||||
return {
|
return {
|
||||||
type: 'item',
|
type: 'item',
|
||||||
@ -129,6 +113,22 @@ export const useFormItemInitializerFields = () => {
|
|||||||
},
|
},
|
||||||
} as SchemaInitializerItemOptions;
|
} as SchemaInitializerItemOptions;
|
||||||
}
|
}
|
||||||
|
if (field.target) {
|
||||||
|
return {
|
||||||
|
type: 'item',
|
||||||
|
title: field?.uiSchema?.title || field.name,
|
||||||
|
component: 'LinkToFieldInitializer',
|
||||||
|
remove: removeGridFormItem,
|
||||||
|
field,
|
||||||
|
schema: {
|
||||||
|
name: field.name,
|
||||||
|
'x-designer': 'FormItem.Designer',
|
||||||
|
'x-component': 'CollectionField',
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-collection-field': `${name}.${field.name}`,
|
||||||
|
},
|
||||||
|
} as SchemaInitializerItemOptions;
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
type: 'item',
|
type: 'item',
|
||||||
title: field?.uiSchema?.title || field.name,
|
title: field?.uiSchema?.title || field.name,
|
||||||
|
@ -38,6 +38,7 @@ export class ErrorHandler {
|
|||||||
}
|
}
|
||||||
|
|
||||||
self.defaultHandler(err, ctx);
|
self.defaultHandler(err, ctx);
|
||||||
|
console.error(err);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user