feat: improve code
This commit is contained in:
chenos
parent
de2b7cab75
commit
44a4893630
@ -1,11 +1,13 @@
|
|||||||
import { PlusOutlined } from '@ant-design/icons';
|
import { PlusOutlined } from '@ant-design/icons';
|
||||||
|
import { ArrayTable } from '@formily/antd';
|
||||||
import { ISchema } from '@formily/react';
|
import { ISchema } from '@formily/react';
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import { Button, Dropdown, Menu } from 'antd';
|
import { Button, Dropdown, Menu } from 'antd';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { ActionContext, SchemaComponent } from '../../schema-component';
|
import { ActionContext, SchemaComponent, useCompile } from '../../schema-component';
|
||||||
import { useCollectionManager } from '../hooks';
|
import { useCollectionManager } from '../hooks';
|
||||||
import { IField } from '../interfaces/types';
|
import { IField } from '../interfaces/types';
|
||||||
|
import { options } from './interfaces';
|
||||||
|
|
||||||
const getSchema = (schema: IField): ISchema => {
|
const getSchema = (schema: IField): ISchema => {
|
||||||
if (!schema) {
|
if (!schema) {
|
||||||
@ -74,6 +76,7 @@ export const AddFieldAction = () => {
|
|||||||
const { getInterface } = useCollectionManager();
|
const { getInterface } = useCollectionManager();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const [schema, setSchema] = useState({});
|
const [schema, setSchema] = useState({});
|
||||||
|
const compile = useCompile();
|
||||||
return (
|
return (
|
||||||
<ActionContext.Provider value={{ visible, setVisible }}>
|
<ActionContext.Provider value={{ visible, setVisible }}>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
@ -85,11 +88,16 @@ export const AddFieldAction = () => {
|
|||||||
setVisible(true);
|
setVisible(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Menu.SubMenu title={'基本类型'}>
|
{options.map((option) => {
|
||||||
<Menu.Item key={'input'}>input</Menu.Item>
|
return (
|
||||||
<Menu.Item key={'textarea'}>textarea</Menu.Item>
|
<Menu.SubMenu title={compile(option.label)}>
|
||||||
<Menu.Item key={'chinaRegion'}>China region</Menu.Item>
|
{option.children.map((child) => {
|
||||||
|
console.log(child);
|
||||||
|
return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
|
||||||
|
})}
|
||||||
</Menu.SubMenu>
|
</Menu.SubMenu>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -97,7 +105,7 @@ export const AddFieldAction = () => {
|
|||||||
添加字段
|
添加字段
|
||||||
</Button>
|
</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<SchemaComponent schema={schema} />
|
<SchemaComponent schema={schema} components={{ ArrayTable }} />
|
||||||
</ActionContext.Provider>
|
</ActionContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,45 @@
|
|||||||
|
import { ISchema } from '@formily/react';
|
||||||
|
import set from 'lodash/set';
|
||||||
|
import * as types from '../interfaces';
|
||||||
|
|
||||||
|
export const interfaces = new Map<string, ISchema>();
|
||||||
|
|
||||||
|
const fields = {};
|
||||||
|
const groupLabels = {};
|
||||||
|
|
||||||
|
export function registerField(group: string, type: string, schema) {
|
||||||
|
fields[group] = fields[group] || {};
|
||||||
|
set(fields, [group, type], schema);
|
||||||
|
interfaces.set(type, schema);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function registerGroupLabel(key: string, label: string) {
|
||||||
|
groupLabels[key] = label;
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.keys(types).forEach((type) => {
|
||||||
|
const schema = types[type];
|
||||||
|
registerField(schema.group || 'others', type, { order: 0, ...schema });
|
||||||
|
});
|
||||||
|
|
||||||
|
registerGroupLabel('basic', '{{t("Basic")}}');
|
||||||
|
registerGroupLabel('choices', '{{t("Choices")}}');
|
||||||
|
registerGroupLabel('media', '{{t("Media")}}');
|
||||||
|
registerGroupLabel('datetime', '{{t("Date & Time")}}');
|
||||||
|
registerGroupLabel('relation', '{{t("Relation")}}');
|
||||||
|
registerGroupLabel('systemInfo', '{{t("System info")}}');
|
||||||
|
registerGroupLabel('others', '{{t("Others")}}');
|
||||||
|
|
||||||
|
export const options = Object.keys(groupLabels).map((groupName) => {
|
||||||
|
return {
|
||||||
|
label: groupLabels[groupName],
|
||||||
|
children: Object.keys(fields[groupName] || {})
|
||||||
|
.map((type) => {
|
||||||
|
return {
|
||||||
|
name: type,
|
||||||
|
...fields[groupName][type],
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.sort((a, b) => a.order - b.order),
|
||||||
|
};
|
||||||
|
});
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { IField } from './types';
|
||||||
|
|
||||||
|
export const checkbox: IField = {
|
||||||
|
name: 'checkbox',
|
||||||
|
type: 'object',
|
||||||
|
group: 'choices',
|
||||||
|
order: 1,
|
||||||
|
title: '{{t("Checkbox")}}',
|
||||||
|
default: {
|
||||||
|
type: 'boolean',
|
||||||
|
// name,
|
||||||
|
uiSchema: {
|
||||||
|
type: 'boolean',
|
||||||
|
'x-component': 'Checkbox',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
properties: {},
|
||||||
|
operators: [
|
||||||
|
{ label: '{{t("Yes")}}', value: '$isTruly', selected: true, noValue: true },
|
||||||
|
{ label: '{{t("No")}}', value: '$isFalsy', noValue: true },
|
||||||
|
],
|
||||||
|
};
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { dataSource } from './properties';
|
||||||
|
import { IField } from './types';
|
||||||
|
|
||||||
|
export const checkboxGroup: IField = {
|
||||||
|
name: 'checkboxGroup',
|
||||||
|
type: 'object',
|
||||||
|
group: 'choices',
|
||||||
|
order: 5,
|
||||||
|
title: '{{t("Checkbox group")}}',
|
||||||
|
default: {
|
||||||
|
interface: 'checkboxGroup',
|
||||||
|
type: 'json',
|
||||||
|
// name,
|
||||||
|
uiSchema: {
|
||||||
|
type: 'string',
|
||||||
|
'x-component': 'Checkbox.Group',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
'uiSchema.enum': dataSource,
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { dateTimeProps } from './properties';
|
||||||
|
import { IField } from './types';
|
||||||
|
|
||||||
|
export const createdAt: IField = {
|
||||||
|
name: 'createdAt',
|
||||||
|
type: 'object',
|
||||||
|
group: 'systemInfo',
|
||||||
|
order: 1,
|
||||||
|
title: '{{t("Created at")}}',
|
||||||
|
sortable: true,
|
||||||
|
default: {
|
||||||
|
type: 'date',
|
||||||
|
field: 'created_at',
|
||||||
|
// name,
|
||||||
|
uiSchema: {
|
||||||
|
type: 'datetime',
|
||||||
|
title: '{{t("Created at")}}',
|
||||||
|
'x-component': 'DatePicker',
|
||||||
|
'x-component-props': {},
|
||||||
|
'x-read-pretty': true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
...dateTimeProps,
|
||||||
|
},
|
||||||
|
};
|
||||||
22
packages/client/src/collection-manager/interfaces/email.ts
Normal file
22
packages/client/src/collection-manager/interfaces/email.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { IField } from './types';
|
||||||
|
|
||||||
|
export const email: IField = {
|
||||||
|
name: 'email',
|
||||||
|
type: 'object',
|
||||||
|
group: 'basic',
|
||||||
|
order: 4,
|
||||||
|
title: '{{t("Email")}}',
|
||||||
|
sortable: true,
|
||||||
|
default: {
|
||||||
|
type: 'string',
|
||||||
|
// name,
|
||||||
|
uiSchema: {
|
||||||
|
type: 'string',
|
||||||
|
// title,
|
||||||
|
'x-component': 'Input',
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-validator': 'email',
|
||||||
|
'x-designable-bar': 'Input.DesignableBar',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,4 +1,8 @@
|
|||||||
|
export * from './checkbox';
|
||||||
|
export * from './checkboxGroup';
|
||||||
export * from './chinaRegion';
|
export * from './chinaRegion';
|
||||||
|
export * from './createdAt';
|
||||||
|
export * from './email';
|
||||||
export * from './input';
|
export * from './input';
|
||||||
export * from './textarea';
|
export * from './textarea';
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { IField } from './types';
|
import { IField } from './types';
|
||||||
|
|
||||||
export const input: IField = {
|
export const input: IField = {
|
||||||
name: 'string',
|
name: 'input',
|
||||||
type: 'object',
|
type: 'object',
|
||||||
group: 'basic',
|
group: 'basic',
|
||||||
order: 1,
|
order: 1,
|
||||||
|
|||||||
@ -30,87 +30,87 @@ export class UiRoutesStoragePlugin extends Plugin {
|
|||||||
sideMenuRefScopeKey: 'sideMenuRef',
|
sideMenuRefScopeKey: 'sideMenuRef',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
item3: {
|
// item3: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'SubMenu u3',
|
// title: 'SubMenu u3',
|
||||||
'x-component': 'Menu.SubMenu',
|
// 'x-component': 'Menu.SubMenu',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
properties: {
|
// properties: {
|
||||||
item6: {
|
// item6: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'SubMenu u6',
|
// title: 'SubMenu u6',
|
||||||
'x-component': 'Menu.SubMenu',
|
// 'x-component': 'Menu.SubMenu',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
properties: {
|
// properties: {
|
||||||
item7: {
|
// item7: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'Menu Item u7',
|
// title: 'Menu Item u7',
|
||||||
'x-component': 'Menu.Item',
|
// 'x-component': 'Menu.Item',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
properties: {
|
// properties: {
|
||||||
page1: {
|
// page1: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
'x-component': 'Page',
|
// 'x-component': 'Page',
|
||||||
'x-async': true,
|
// 'x-async': true,
|
||||||
properties: {
|
// properties: {
|
||||||
grid1: {
|
// grid1: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
'x-component': 'Grid',
|
// 'x-component': 'Grid',
|
||||||
'x-item-initializer': 'BlockInitializer',
|
// 'x-item-initializer': 'BlockInitializer',
|
||||||
properties: {},
|
// properties: {},
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
item8: {
|
// item8: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'Menu Item u8',
|
// title: 'Menu Item u8',
|
||||||
'x-component': 'Menu.Item',
|
// 'x-component': 'Menu.Item',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
item4: {
|
// item4: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'Menu Item u4',
|
// title: 'Menu Item u4',
|
||||||
'x-component': 'Menu.Item',
|
// 'x-component': 'Menu.Item',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
},
|
// },
|
||||||
item5: {
|
// item5: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'Menu Item u5',
|
// title: 'Menu Item u5',
|
||||||
'x-component': 'Menu.Item',
|
// 'x-component': 'Menu.Item',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
item1: {
|
// item1: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'Menu Item u1',
|
// title: 'Menu Item u1',
|
||||||
'x-component': 'Menu.Item',
|
// 'x-component': 'Menu.Item',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
},
|
// },
|
||||||
item2: {
|
// item2: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'Menu Item u2',
|
// title: 'Menu Item u2',
|
||||||
'x-component': 'Menu.Item',
|
// 'x-component': 'Menu.Item',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
},
|
// },
|
||||||
item9: {
|
// item9: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'SubMenu u9',
|
// title: 'SubMenu u9',
|
||||||
'x-component': 'Menu.SubMenu',
|
// 'x-component': 'Menu.SubMenu',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
properties: {
|
// properties: {
|
||||||
item10: {
|
// item10: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: 'Menu Item u10',
|
// title: 'Menu Item u10',
|
||||||
'x-component': 'Menu.Item',
|
// 'x-component': 'Menu.Item',
|
||||||
'x-component-props': {},
|
// 'x-component-props': {},
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
path: '/admin/:name(.+)?',
|
path: '/admin/:name(.+)?',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user