feat: collection configuration interface

This commit is contained in:
chenos 2022-02-03 22:27:26 +08:00
parent 2924418800
commit 7ed5054c41
7 changed files with 220 additions and 95 deletions

View File

@ -25,25 +25,12 @@ const schema: ISchema = {
[uid()]: {
'x-component': 'Action.Drawer',
type: 'void',
title: 'Drawer Title',
title: '角色配置',
properties: {
hello1: {
type: 'void',
'x-component': 'RoleTable',
},
// footer1: {
// 'x-component': 'Action.Drawer.Footer',
// type: 'void',
// properties: {
// close1: {
// title: 'Close',
// 'x-component': 'Action',
// 'x-component-props': {
// useAction: '{{ useCloseAction }}',
// },
// },
// },
// },
},
},
},

View File

@ -215,7 +215,7 @@ export const ResourceActionsForm = () => {
title: '可操作的数据范围',
dataIndex: 'scope',
key: 'scope',
render: () => <ScopeRecordPicker />
render: () => <ScopeRecordPicker />,
},
]}
dataSource={[

View File

@ -4,6 +4,7 @@ import { uid } from '@formily/shared';
import React, { useState } from 'react';
import { PluginManager } from '../plugin-manager';
import { SchemaComponent, useActionVisible, VisibleContext } from '../schema-component';
import { ConfigurationTable } from './Configuration';
const useCloseAction = () => {
const { setVisible } = useActionVisible();
@ -24,24 +25,10 @@ const schema: ISchema = {
[uid()]: {
'x-component': 'Action.Drawer',
type: 'void',
title: 'Drawer Title',
title: '数据表配置',
properties: {
hello1: {
'x-content': 'Hello',
title: 'T1',
},
footer1: {
'x-component': 'Action.Drawer.Footer',
type: 'void',
properties: {
close1: {
title: 'Close',
'x-component': 'Action',
'x-component-props': {
useAction: '{{ useCloseAction }}',
},
},
},
configuration: {
'x-component': 'ConfigurationTable',
},
},
},
@ -59,7 +46,7 @@ export const CollectionManagerShortcut = () => {
setVisible(true);
}}
/>
<SchemaComponent scope={{ useCloseAction }} schema={schema} />
<SchemaComponent scope={{ useCloseAction }} schema={schema} components={{ ConfigurationTable }} />
</VisibleContext.Provider>
);
};

View File

@ -0,0 +1,146 @@
import { Button, Divider, Drawer, Space, Table, Typography } from 'antd';
import React, { useState } from 'react';
export const ConfigurationTable = () => {
return (
<div>
<Space style={{ justifyContent: 'flex-end', width: '100%', marginBottom: 16 }}>
<Button key="destroy"></Button>
<Button type={'primary'} key="create">
</Button>
</Space>
<Table
rowSelection={{
type: 'checkbox',
}}
columns={[
{
title: '数据表名称',
dataIndex: 'title',
key: 'title',
},
{
title: '数据表标识',
dataIndex: 'name',
key: 'name',
},
{
title: '操作',
dataIndex: 'actions',
key: 'actions',
render: () => (
<Space split={<Divider type="vertical" />}>
<ConfigureFields />
<Typography.Link>Edit</Typography.Link>
<Typography.Link>Delete</Typography.Link>
</Space>
),
},
]}
dataSource={[
{
name: 'users',
title: '用户',
},
]}
/>
</div>
);
};
export const ConfigureFields = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Typography.Link onClick={() => setVisible(true)}>Configure</Typography.Link>
<Drawer width={800} title={'字段配置'} visible={visible} destroyOnClose onClose={() => setVisible(false)}>
<CollectionFieldList />
</Drawer>
</>
);
};
export const CollectionFieldList = () => {
return (
<div>
<Space style={{ justifyContent: 'flex-end', width: '100%', marginBottom: 16 }}>
<Button key="destroy"></Button>
<Button type={'primary'} key="create">
</Button>
</Space>
<Table
rowSelection={{
type: 'checkbox',
}}
columns={[
{
title: '字段名称',
dataIndex: 'title',
key: 'title',
},
{
title: '字段标识',
dataIndex: 'name',
key: 'name',
},
{
title: '操作',
dataIndex: 'actions',
key: 'actions',
render: () => (
<Space split={<Divider type="vertical" />}>
<CollectionFieldEdit />
<Typography.Link>Delete</Typography.Link>
</Space>
),
},
]}
dataSource={[
{
name: 'title',
title: '标题',
},
]}
/>
</div>
);
};
export const CollectionFieldEdit = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Typography.Link onClick={() => setVisible(true)}>Edit</Typography.Link>
<Drawer
width={800}
title={'字段配置'}
visible={visible}
destroyOnClose
onClose={() => setVisible(false)}
footer={
<Space style={{ justifyContent: 'flex-end', width: '100%' }}>
<Button
onClick={() => {
setVisible(false);
}}
>
Cancel
</Button>
<Button
type={'primary'}
onClick={() => {
setVisible(false);
}}
>
Submit
</Button>
</Space>
}
>
CollectionFieldEdit
</Drawer>
</>
);
};

View File

@ -0,0 +1,50 @@
import i18next from 'i18next';
import moment from 'moment';
import { initReactI18next } from 'react-i18next';
const zhCN = require('../locale/zh_CN');
const enUS = require('../locale/en_US');
const log = require('debug')('i18next');
export const i18n = i18next.createInstance();
i18n.use(initReactI18next).init({
lng: localStorage.getItem('locale') || 'en-US',
debug: false,
defaultNS: 'client',
// parseMissingKeyHandler: (key) => {
// console.log('parseMissingKeyHandler', `'${key}': '${key}',`);
// return key;
// },
// ns: ['client'],
resources: {
'en-US': {
client: {
...enUS,
},
},
'zh-CN': {
client: {
...zhCN,
},
},
},
});
const momentLngs = {
'en-US': 'en',
'zh-CN': 'zh-cn',
};
function setMomentLng(language) {
const lng = momentLngs[language || 'en-US'] || 'en';
log(lng);
moment.locale(lng);
}
setMomentLng(localStorage.getItem('locale'));
i18n.on('languageChanged', (lng) => {
localStorage.setItem('locale', lng);
setMomentLng(lng);
});

View File

@ -1,54 +1 @@
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import moment from 'moment';
const zhCN = require('../locale/zh_CN');
const enUS = require('../locale/en_US');
const log = require('debug')('i18next');
export const i18n = i18next.createInstance();
i18n.use(initReactI18next).init({
lng: localStorage.getItem('locale') || 'en-US',
debug: false,
defaultNS: 'client',
// parseMissingKeyHandler: (key) => {
// console.log('parseMissingKeyHandler', `'${key}': '${key}',`);
// return key;
// },
// ns: ['client'],
resources: {
'en-US': {
client: {
...enUS,
},
},
'zh-CN': {
client: {
...zhCN,
},
},
},
});
const momentLngs = {
'en-US': 'en',
'zh-CN': 'zh-cn',
};
function setMomentLng(language) {
const lng = momentLngs[language || 'en-US'] || 'en';
log(lng);
moment.locale(lng);
}
setMomentLng(localStorage.getItem('locale'));
i18n.on('languageChanged', (lng) => {
localStorage.setItem('locale', lng);
setMomentLng(lng);
});
// export const t = i18n.t;
export default i18n;
export * from './i18n';

View File

@ -9,6 +9,12 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
const [visible, setVisible] = useContext(VisibleContext);
const schema = useFieldSchema();
const field = useField();
const footerSchema = schema.reduceProperties((buf, s) => {
if (s['x-component'] === 'Action.Drawer.Footer') {
return s;
}
return buf;
});
return (
<>
{createPortal(
@ -20,14 +26,16 @@ export const ActionDrawer: ComposedActionDrawer = observer((props) => {
visible={visible}
onClose={() => setVisible(false)}
footer={
<RecursionField
basePath={field.address}
schema={schema}
onlyRenderProperties
filterProperties={(s) => {
return s['x-component'] === 'Action.Drawer.Footer';
}}
/>
footerSchema && (
<RecursionField
basePath={field.address}
schema={schema}
onlyRenderProperties
filterProperties={(s) => {
return s['x-component'] === 'Action.Drawer.Footer';
}}
/>
)
}
>
<RecursionField