feat: improve code

This commit is contained in:
chenos 2022-03-03 12:15:17 +08:00
parent 4e9baf3957
commit d4bd033917
12 changed files with 151 additions and 51 deletions

View File

@ -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.length > 0 && (
<Menu.ItemGroup title={compile(option.label)}>
{option.children.map((child) => {
return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
})}
</Menu.SubMenu>
</Menu.ItemGroup>
)
);
})}
</Menu>

View File

@ -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;

View File

@ -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' }],
};

View File

@ -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 },
],
};

View File

@ -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 },
],
};

View File

@ -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;
return (
<Space split={'/'}>
{labels.map((label, index) => {
if (selectedOptions[index]) {
return <span key={label}>{label}</span>;
}
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>;
});
const item = toArr(value).find((item) => item[fieldNames.value] === label);
return <span key={label}>{item?.[fieldNames.label] || label}</span>;
})}
</Space>
);
};
return (
<AntdCascader

View File

@ -25,9 +25,10 @@ export const DynamicComponent = (props) => {
return (
<SchemaComponent
schema={{
name: 'value',
'x-component': 'Input',
...props.schema,
name: 'value',
'x-read-pretty': false,
}}
/>
);

View File

@ -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(
{

View File

@ -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>
);
};

View File

@ -9,4 +9,5 @@ export * from './LinkToCollectionFieldInitializer';
export * from './MarkdownBlockInitializer';
export * from './SubTableFieldInitializer';
export * from './TableBlockInitializer';
export * from './UserFieldInitializer';

View File

@ -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,

View File

@ -38,6 +38,7 @@ export class ErrorHandler {
}
self.defaultHandler(err, ctx);
console.error(err);
}
};
}