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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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 './MarkdownBlockInitializer';
export * from './SubTableFieldInitializer'; export * from './SubTableFieldInitializer';
export * from './TableBlockInitializer'; export * from './TableBlockInitializer';
export * from './UserFieldInitializer';

View File

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

View File

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