feat: improve code
This commit is contained in:
parent
4e9baf3957
commit
d4bd033917
@ -107,6 +107,10 @@ export const AddFieldAction = () => {
|
||||
<Dropdown
|
||||
overlay={
|
||||
<Menu
|
||||
style={{
|
||||
maxHeight: '60vh',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
onClick={(info) => {
|
||||
const schema = getSchema(getInterface(info.key));
|
||||
setSchema(schema);
|
||||
@ -115,11 +119,13 @@ export const AddFieldAction = () => {
|
||||
>
|
||||
{options.map((option) => {
|
||||
return (
|
||||
<Menu.SubMenu title={compile(option.label)}>
|
||||
{option.children.map((child) => {
|
||||
return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
|
||||
})}
|
||||
</Menu.SubMenu>
|
||||
option.children.length > 0 && (
|
||||
<Menu.ItemGroup title={compile(option.label)}>
|
||||
{option.children.map((child) => {
|
||||
return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
|
||||
})}
|
||||
</Menu.ItemGroup>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
|
@ -42,6 +42,7 @@ export const useCollectionFilterOptions = (collectionName: string) => {
|
||||
const option = {
|
||||
name: field.name,
|
||||
title: field?.uiSchema?.title || field.name,
|
||||
schema: field?.uiSchema,
|
||||
operators: fieldInterface.operators || [],
|
||||
};
|
||||
return option;
|
||||
|
@ -74,5 +74,5 @@ export const chinaRegion: IField = {
|
||||
'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,
|
||||
'uiSchema.enum': dataSource,
|
||||
},
|
||||
operations: [
|
||||
operators: [
|
||||
{
|
||||
label: '{{t("is")}}',
|
||||
value: '$match',
|
||||
@ -48,7 +48,7 @@ export const multipleSelect: IField = {
|
||||
value: '$noneOf',
|
||||
schema: { 'x-component': 'Select' },
|
||||
},
|
||||
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
|
||||
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
|
||||
{ label: '{{t("is empty")}}', value: '$empty', noValue: true },
|
||||
{ label: '{{t("is not empty")}}', value: '$notEmpty', noValue: true },
|
||||
],
|
||||
};
|
||||
|
@ -49,7 +49,7 @@ export const select: IField = {
|
||||
'x-component-props': { mode: 'tags' },
|
||||
},
|
||||
},
|
||||
{ label: '{{t("is empty")}}', value: '$null', noValue: true },
|
||||
{ label: '{{t("is not empty")}}', value: '$notNull', noValue: true },
|
||||
{ label: '{{t("is empty")}}', value: '$empty', 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 { connect, mapProps, mapReadPretty, useField } from '@formily/react';
|
||||
import { toArr } from '@formily/shared';
|
||||
import { Cascader as AntdCascader } from 'antd';
|
||||
import { Cascader as AntdCascader, Space } from 'antd';
|
||||
import { isBoolean, omit } from 'lodash';
|
||||
import React from 'react';
|
||||
import { useRequest } from '../../../api-client';
|
||||
@ -25,7 +25,7 @@ export const Cascader = connect(
|
||||
value,
|
||||
onChange,
|
||||
labelInValue,
|
||||
fieldNames = defaultFieldNames,
|
||||
// fieldNames = defaultFieldNames,
|
||||
useDataSource = useDefDataSource,
|
||||
useLoadData = useDefLoadData,
|
||||
changeOnSelectLast,
|
||||
@ -33,6 +33,7 @@ export const Cascader = connect(
|
||||
maxLevel,
|
||||
...others
|
||||
} = props;
|
||||
const fieldNames = { ...defaultFieldNames, ...props.fieldNames };
|
||||
const loadData = useLoadData(props);
|
||||
const { loading } = useDataSource({
|
||||
onSuccess(data) {
|
||||
@ -49,24 +50,17 @@ export const Cascader = connect(
|
||||
});
|
||||
};
|
||||
const displayRender = (labels: string[], selectedOptions: any[]) => {
|
||||
const values = toArr(value);
|
||||
if (values.length !== labels.length) {
|
||||
labels = toValue();
|
||||
selectedOptions = values;
|
||||
}
|
||||
if (selectedOptions.length === 0) {
|
||||
selectedOptions = values;
|
||||
}
|
||||
return labels.map((label, i) => {
|
||||
let option = selectedOptions[i];
|
||||
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 (
|
||||
<Space split={'/'}>
|
||||
{labels.map((label, index) => {
|
||||
if (selectedOptions[index]) {
|
||||
return <span key={label}>{label}</span>;
|
||||
}
|
||||
const item = toArr(value).find((item) => item[fieldNames.value] === label);
|
||||
return <span key={label}>{item?.[fieldNames.label] || label}</span>;
|
||||
})}
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<AntdCascader
|
||||
|
@ -25,9 +25,10 @@ export const DynamicComponent = (props) => {
|
||||
return (
|
||||
<SchemaComponent
|
||||
schema={{
|
||||
name: 'value',
|
||||
'x-component': 'Input',
|
||||
...props.schema,
|
||||
name: 'value',
|
||||
'x-read-pretty': false,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
@ -17,7 +17,7 @@ const ObjectSelect = (props: Props) => {
|
||||
if (isEmptyObject(v)) {
|
||||
return;
|
||||
}
|
||||
const values = toArr(v).map((val) => {
|
||||
const values = toArr(v).filter(item => item).map((val) => {
|
||||
return typeof val === 'object' ? val[fieldNames.value] : val;
|
||||
});
|
||||
const current = getCurrentOptions(values, options, fieldNames)?.map((val) => {
|
||||
@ -62,7 +62,7 @@ export const Select = connect(
|
||||
if (objectValue) {
|
||||
return <ObjectSelect {...others} />;
|
||||
}
|
||||
return <AntdSelect {...others} />;
|
||||
return <AntdSelect {...others} value={others.value || undefined}/>;
|
||||
},
|
||||
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 './SubTableFieldInitializer';
|
||||
export * from './TableBlockInitializer';
|
||||
export * from './UserFieldInitializer';
|
||||
|
||||
|
@ -61,7 +61,7 @@ export const useTableColumnInitializerFields = () => {
|
||||
return fields
|
||||
.filter((field) => field?.interface && field?.interface !== 'subTable')
|
||||
.map((field) => {
|
||||
if (field.interface === 'linkTo') {
|
||||
if (field.target) {
|
||||
return {
|
||||
field,
|
||||
type: 'item',
|
||||
@ -96,22 +96,6 @@ export const useFormItemInitializerFields = () => {
|
||||
return fields
|
||||
?.filter((field) => field?.interface)
|
||||
?.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') {
|
||||
return {
|
||||
type: 'item',
|
||||
@ -129,6 +113,22 @@ export const useFormItemInitializerFields = () => {
|
||||
},
|
||||
} 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 {
|
||||
type: 'item',
|
||||
title: field?.uiSchema?.title || field.name,
|
||||
|
@ -38,6 +38,7 @@ export class ErrorHandler {
|
||||
}
|
||||
|
||||
self.defaultHandler(err, ctx);
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user