feat: improve code

This commit is contained in:
chenos 2021-08-25 17:07:23 +08:00
parent 4860cb019f
commit a48f2a5159
18 changed files with 207 additions and 226 deletions

View File

@ -52,6 +52,9 @@ const schema: ISchema = {
type: 'void',
title: `系统配置`,
'x-component': 'Menu.Action',
"x-component-props": {
icon: 'SettingOutlined',
},
properties: {
drawer1: {
type: 'void',

View File

@ -289,12 +289,16 @@ const schema: ISchema = {
},
'x-component': 'Action',
'x-component-props': {
icon: 'DeleteOutlined',
confirm: {
title: '删除数据',
content: '删除后无法恢复,确定要删除吗?'
},
useAction: '{{ Table.useTableDestroyAction }}',
},
},
[uid()]: {
type: 'void',
name: 'action1',
title: '创建',
'x-align': 'right',
'x-decorator': 'AddNew.Displayed',
@ -304,6 +308,7 @@ const schema: ISchema = {
'x-component': 'Action',
'x-component-props': {
type: 'primary',
icon: 'PlusOutlined',
},
properties: {
modal: {
@ -460,6 +465,10 @@ const schema: ISchema = {
'x-action-type': 'destroy',
'x-component-props': {
type: 'link',
confirm: {
title: '删除数据',
content: '删除后无法恢复,确定要删除吗?'
},
useAction: '{{ Table.useTableDestroyAction }}',
},
},

View File

@ -158,6 +158,10 @@ function generateActionSchema(type) {
'x-component': 'Action',
'x-designable-bar': 'Action.DesignableBar',
'x-component-props': {
confirm: {
title: '删除数据',
content: '删除后无法恢复,确定要删除吗?'
},
useAction: '{{ Table.useTableDestroyAction }}',
},
},

View File

@ -175,6 +175,7 @@ function generateCardItemSchema(component) {
'x-component': 'Action',
'x-designable-bar': 'Table.Action.DesignableBar',
'x-component-props': {
icon: 'DeleteOutlined',
confirm: {
title: '删除数据',
content: '删除后无法恢复,确定要删除吗?'
@ -193,6 +194,7 @@ function generateCardItemSchema(component) {
},
'x-component': 'Action',
'x-component-props': {
icon: 'PlusOutlined',
type: 'primary',
},
'x-designable-bar': 'Table.Action.DesignableBar',
@ -491,7 +493,7 @@ function generateCardItemSchema(component) {
},
filter: {
type: 'void',
title: '过滤',
title: '筛选',
'x-align': 'right',
'x-designable-bar': 'Calendar.Filter.DesignableBar',
'x-component': 'Calendar.Filter',
@ -502,7 +504,7 @@ function generateCardItemSchema(component) {
},
create: {
type: 'void',
title: '新增',
title: '创建',
'x-align': 'right',
'x-designable-bar': 'Calendar.ActionDesignableBar',
'x-component': 'Action',
@ -512,6 +514,7 @@ function generateCardItemSchema(component) {
},
'x-component-props': {
type: 'primary',
icon: 'PlusOutlined',
},
properties: {
modal: {

View File

@ -174,6 +174,7 @@ function generateActionSchema(type) {
},
'x-component-props': {
type: 'primary',
icon: 'PlusOutlined',
},
properties: {
modal: {

View File

@ -20,8 +20,13 @@ import {
updateSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Select, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import { Modal, Dropdown, Menu, Select, Space } from 'antd';
import {
MenuOutlined,
DragOutlined,
CalendarOutlined,
FontSizeOutlined,
} from '@ant-design/icons';
import cls from 'classnames';
import { FormDialog, FormLayout } from '@formily/antd';
// import './style.less';
@ -37,6 +42,7 @@ import { useTable } from '../table';
import { fieldsToFilterColumns } from './';
import { set } from 'lodash';
import { DragHandle } from '../../components/Sortable';
import { DeleteOutlined, FilterOutlined } from '@ant-design/icons';
export const DesignableBar = observer((props) => {
const field = useField();
@ -70,7 +76,7 @@ export const DesignableBar = observer((props) => {
}}
overlay={
<Menu>
<Menu.Item>
<Menu.Item icon={<FontSizeOutlined />}>
<div
style={{ display: 'flex', justifyContent: 'space-between' }}
>
@ -102,7 +108,7 @@ export const DesignableBar = observer((props) => {
/>
</div>
</Menu.Item>
<Menu.Item>
<Menu.Item icon={<CalendarOutlined />}>
<div
style={{ display: 'flex', justifyContent: 'space-between' }}
>
@ -136,7 +142,7 @@ export const DesignableBar = observer((props) => {
/>
</div>
</Menu.Item>
<Menu.Item>
<Menu.Item icon={<CalendarOutlined />}>
<div
style={{ display: 'flex', justifyContent: 'space-between' }}
>
@ -171,6 +177,7 @@ export const DesignableBar = observer((props) => {
</Menu.Item>
<Menu.Item
key={'defaultFilter'}
icon={<FilterOutlined />}
onClick={async () => {
const { defaultFilter } = await FormDialog(
'设置数据范围',
@ -209,16 +216,22 @@ export const DesignableBar = observer((props) => {
<Menu.Divider />
<Menu.Item
key={'delete'}
icon={<DeleteOutlined />}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
setVisible(false);
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}

View File

@ -209,7 +209,7 @@ export const Calendar: any = observer((props: any) => {
popup
selectable
events={Array.isArray(field.value.slice()) ? field.value.slice() : []}
views={allViews}
views={['month', 'week', 'day']}
step={60}
showMultiDayTimes
messages={messages}

View File

@ -14,7 +14,7 @@ import {
} from '@formily/react';
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd';
import { Modal, Dropdown, Menu, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormLayout } from '@formily/antd';
@ -58,10 +58,10 @@ export const DesignableBar = observer((props) => {
<DragHandle />
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
{/* <Menu.Item
@ -76,15 +76,19 @@ export const DesignableBar = observer((props) => {
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}

View File

@ -20,7 +20,7 @@ import {
updateSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space, Switch } from 'antd';
import { Button, Dropdown, Menu, Modal, Space, Switch } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormDialog, FormLayout } from '@formily/antd';
@ -186,7 +186,7 @@ export const FieldDesignableBar = observer((props) => {
await removeSchema(last);
}}
>
</Menu.Item>
</Menu>
}

View File

@ -14,7 +14,7 @@ import {
} from '@formily/react';
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd';
import { Button, Dropdown, Menu, Modal, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormLayout } from '@formily/antd';
@ -36,11 +36,14 @@ export const DesignableBar = observer((props) => {
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
const { props: tableProps } = useTable();
const collectionName = field.componentProps?.collectionName || tableProps?.collectionName;
const collectionName =
field.componentProps?.collectionName || tableProps?.collectionName;
const { collection } = useCollection({ collectionName });
return (
<div className={cls('designable-bar', { active: visible })}>
<div className={'designable-info'}>{collection?.title || collection?.name}</div>
<div className={'designable-info'}>
{collection?.title || collection?.name}
</div>
<span
onClick={(e) => {
e.stopPropagation();
@ -52,22 +55,28 @@ export const DesignableBar = observer((props) => {
{/* <DragHandle /> */}
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}

View File

@ -44,67 +44,4 @@ export const Input: ComposedInput = connect(
Input.TextArea = connect(AntdInput.TextArea, mapReadPretty(Display.TextArea))
Input.URL = connect(AntdInput, mapReadPretty(Display.URL))
Input.DesignableBar = observer((props) => {
const field = useField();
const fieldSchema = useFieldSchema();
const { root, currentSchema, schema, refresh, deepRemove, remove } = useDesignable();
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
return (
<div className={cls('designable-bar', { active: visible })}>
<span
onClick={(e) => {
e.stopPropagation();
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space size={'small'}>
<AddNew.CardItem defaultAction={'insertAfter'} ghost />
<DragHandle />
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.Item
key={'update'}
onClick={() => {
const title = uid();
schema['title'] = title;
field.title = title;
refresh();
console.log({ root, currentSchema, schema, fieldSchema }, getSchemaPath(fieldSchema));
}}
>
Input
</Menu.Item>
<Menu.Divider />
<Menu.Item
key={'delete'}
onClick={async () => {
remove();
// const removed = deepRemove();
// // console.log({ removed })
// const last = removed.pop();
// if (isGridRowOrCol(last)) {
// await removeSchema(last);
// }
}}
>
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
});
export default Input

View File

@ -12,9 +12,15 @@ import {
useForm,
RecursionField,
} from '@formily/react';
import { useSchemaPath, SchemaField, useDesignable, removeSchema, updateSchema } from '../';
import {
useSchemaPath,
SchemaField,
useDesignable,
removeSchema,
updateSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd';
import { Button, Dropdown, Menu, Modal, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormDialog, FormLayout } from '@formily/antd';
@ -37,11 +43,14 @@ export const DesignableBar = observer((props) => {
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
const { props: tableProps } = useTable();
const collectionName = field.componentProps?.collectionName || tableProps?.collectionName;
const collectionName =
field.componentProps?.collectionName || tableProps?.collectionName;
const { collection, fields } = useCollection({ collectionName });
return (
<div className={cls('designable-bar', { active: visible })}>
<div className={'designable-info'}>{collection?.title || collection?.name}</div>
<div className={'designable-info'}>
{collection?.title || collection?.name}
</div>
<span
onClick={(e) => {
e.stopPropagation();
@ -53,10 +62,10 @@ export const DesignableBar = observer((props) => {
<DragHandle />
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
{/* <Menu.Item
@ -108,13 +117,19 @@ export const DesignableBar = observer((props) => {
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}

View File

@ -20,7 +20,7 @@ import {
updateSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Space, Switch } from 'antd';
import { Button, Dropdown, Menu, Modal, Space, Switch } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormDialog, FormLayout } from '@formily/antd';
@ -69,10 +69,10 @@ export const FieldDesignableBar = observer((props) => {
<Dropdown
placement={'bottomRight'}
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
<Menu.Item
@ -128,16 +128,21 @@ export const FieldDesignableBar = observer((props) => {
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
const fieldName =
schema['x-component-props']?.['fieldName'];
console.log({ schema, removed, fieldName });
const last = removed.pop();
displayed.remove(fieldName);
await removeSchema(last);
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
const fieldName =
schema['x-component-props']?.['fieldName'];
const last = removed.pop();
displayed.remove(fieldName);
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}

View File

@ -7,7 +7,7 @@ import {
useFieldSchema,
mapReadPretty,
} from '@formily/react';
import { Button, Dropdown, Input as AntdInput, Menu, Space } from 'antd';
import { Button, Dropdown, Input as AntdInput, Menu, Modal, Space } from 'antd';
import { InputProps, TextAreaProps } from 'antd/lib/input';
import { Display } from '../display';
import { LoadingOutlined, MenuOutlined, DragOutlined } from '@ant-design/icons';
@ -125,10 +125,10 @@ Markdown.Void.DesignableBar = observer((props) => {
<DragHandle />
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
<Menu.Item
@ -144,68 +144,19 @@ Markdown.Void.DesignableBar = observer((props) => {
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
const last = removed.pop();
console.log({ last })
await removeSchema(last);
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
const last = removed.pop();
console.log({ last });
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}
>
<MenuOutlined />
</Dropdown>
</Space>
</span>
</div>
);
});
Markdown.DesignableBar = observer((props) => {
const field = useField();
const { designable, schema, refresh, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext);
if (!designable) {
return null;
}
return (
<div className={cls('designable-bar', { active: visible })}>
<span
onClick={(e) => {
e.stopPropagation();
}}
className={cls('designable-bar-actions', { active: visible })}
>
<Space size={'small'}>
<AddNew.FormItem defaultAction={'insertAfter'} ghost />
<DragHandle />
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
overlay={
<Menu>
<Menu.Item key={'update'} onClick={() => {}}>
</Menu.Item>
<Menu.Divider />
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
}}
>
</Menu.Item>
</Menu>
}

View File

@ -20,7 +20,7 @@ import {
updateSchema,
} from '../';
import get from 'lodash/get';
import { Button, Dropdown, Menu, Select, Space } from 'antd';
import { Button, Dropdown, Menu, Modal, Select, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { FormDialog, FormLayout } from '@formily/antd';
@ -58,10 +58,10 @@ export const SimpleDesignableBar = observer((props) => {
<DragHandle />
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
<Menu.Item
@ -204,15 +204,19 @@ export const SimpleDesignableBar = observer((props) => {
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}

View File

@ -53,7 +53,7 @@ const schema: ISchema = {
[uid()]: {
type: 'void',
name: 'action1',
title: '新增',
title: '创建',
'x-component': 'Action',
'x-designable-bar': 'Table.Action.DesignableBar',
properties: {

View File

@ -6,7 +6,7 @@ import {
useField,
useForm,
} from '@formily/react';
import { Pagination, Popover, Table as AntdTable } from 'antd';
import { Modal, Pagination, Popover, Table as AntdTable } from 'antd';
import { cloneDeep, findIndex, forIn, range, set } from 'lodash';
import React, { Fragment, useEffect, useState } from 'react';
import { useContext } from 'react';
@ -905,6 +905,7 @@ function generateActionSchema(type) {
'x-component': 'Action',
'x-component-props': {
type: 'primary',
icon: 'PlusOutlined',
},
'x-designable-bar': 'Table.Action.DesignableBar',
properties: {
@ -944,7 +945,7 @@ function generateActionSchema(type) {
'x-component-props': {
confirm: {
title: '删除数据',
content: '删除后无法恢复,确定要删除吗?'
content: '删除后无法恢复,确定要删除吗?',
},
useAction: '{{ Table.useTableDestroyAction }}',
},
@ -1054,6 +1055,10 @@ function generateMenuActionSchema(type) {
'x-component-props': {
useAction: '{{ Table.useTableDestroyAction }}',
type: 'link',
confirm: {
title: '删除数据',
content: '删除后无法恢复,确定要删除吗?',
},
},
},
};
@ -2024,10 +2029,10 @@ Table.DesignableBar = observer((props) => {
<DragHandle />
<Dropdown
trigger={['hover']}
visible={visible}
onVisibleChange={(visible) => {
setVisible(visible);
}}
// visible={visible}
// onVisibleChange={(visible) => {
// setVisible(visible);
// }}
overlay={
<Menu>
<Menu.Item
@ -2241,15 +2246,19 @@ Table.DesignableBar = observer((props) => {
<Menu.Item
key={'delete'}
onClick={async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
if (isGridRowOrCol(last)) {
await removeSchema(last);
}
Modal.confirm({
title: '删除区块',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const removed = deepRemove();
// console.log({ removed })
const last = removed.pop();
await removeSchema(last);
},
});
}}
>
</Menu.Item>
</Menu>
}

View File

@ -1,6 +1,14 @@
import { observer, connect, useField, RecursionField } from '@formily/react';
import React from 'react';
import { Button, Tabs as AntdTabs, Dropdown, Menu, Switch, Space } from 'antd';
import {
Button,
Tabs as AntdTabs,
Dropdown,
Menu,
Switch,
Space,
Modal,
} from 'antd';
import {
findPropertyByPath,
getSchemaPath,
@ -327,12 +335,18 @@ Tabs.TabPane.DesignableBar = () => {
<Menu.Divider />
<Menu.Item
onClick={async () => {
const data = remove();
await removeSchema(data);
setVisible(false);
Modal.confirm({
title: '删除标签页',
content: '删除后无法恢复,确定要删除吗?',
onOk: async () => {
const data = remove();
await removeSchema(data);
},
});
}}
>
</Menu.Item>
</Menu>
}