feat: improve code
This commit is contained in:
parent
4860cb019f
commit
a48f2a5159
@ -52,6 +52,9 @@ const schema: ISchema = {
|
|||||||
type: 'void',
|
type: 'void',
|
||||||
title: `系统配置`,
|
title: `系统配置`,
|
||||||
'x-component': 'Menu.Action',
|
'x-component': 'Menu.Action',
|
||||||
|
"x-component-props": {
|
||||||
|
icon: 'SettingOutlined',
|
||||||
|
},
|
||||||
properties: {
|
properties: {
|
||||||
drawer1: {
|
drawer1: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
|
@ -289,12 +289,16 @@ const schema: ISchema = {
|
|||||||
},
|
},
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
|
icon: 'DeleteOutlined',
|
||||||
|
confirm: {
|
||||||
|
title: '删除数据',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?'
|
||||||
|
},
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
name: 'action1',
|
|
||||||
title: '创建',
|
title: '创建',
|
||||||
'x-align': 'right',
|
'x-align': 'right',
|
||||||
'x-decorator': 'AddNew.Displayed',
|
'x-decorator': 'AddNew.Displayed',
|
||||||
@ -304,6 +308,7 @@ const schema: ISchema = {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
|
icon: 'PlusOutlined',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
modal: {
|
modal: {
|
||||||
@ -460,6 +465,10 @@ const schema: ISchema = {
|
|||||||
'x-action-type': 'destroy',
|
'x-action-type': 'destroy',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'link',
|
type: 'link',
|
||||||
|
confirm: {
|
||||||
|
title: '删除数据',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?'
|
||||||
|
},
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -158,6 +158,10 @@ function generateActionSchema(type) {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-designable-bar': 'Action.DesignableBar',
|
'x-designable-bar': 'Action.DesignableBar',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
|
confirm: {
|
||||||
|
title: '删除数据',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?'
|
||||||
|
},
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -175,6 +175,7 @@ function generateCardItemSchema(component) {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
|
icon: 'DeleteOutlined',
|
||||||
confirm: {
|
confirm: {
|
||||||
title: '删除数据',
|
title: '删除数据',
|
||||||
content: '删除后无法恢复,确定要删除吗?'
|
content: '删除后无法恢复,确定要删除吗?'
|
||||||
@ -193,6 +194,7 @@ function generateCardItemSchema(component) {
|
|||||||
},
|
},
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
|
icon: 'PlusOutlined',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
},
|
},
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
@ -491,7 +493,7 @@ function generateCardItemSchema(component) {
|
|||||||
},
|
},
|
||||||
filter: {
|
filter: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '过滤',
|
title: '筛选',
|
||||||
'x-align': 'right',
|
'x-align': 'right',
|
||||||
'x-designable-bar': 'Calendar.Filter.DesignableBar',
|
'x-designable-bar': 'Calendar.Filter.DesignableBar',
|
||||||
'x-component': 'Calendar.Filter',
|
'x-component': 'Calendar.Filter',
|
||||||
@ -502,7 +504,7 @@ function generateCardItemSchema(component) {
|
|||||||
},
|
},
|
||||||
create: {
|
create: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '新增',
|
title: '创建',
|
||||||
'x-align': 'right',
|
'x-align': 'right',
|
||||||
'x-designable-bar': 'Calendar.ActionDesignableBar',
|
'x-designable-bar': 'Calendar.ActionDesignableBar',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
@ -512,6 +514,7 @@ function generateCardItemSchema(component) {
|
|||||||
},
|
},
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
|
icon: 'PlusOutlined',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
modal: {
|
modal: {
|
||||||
|
@ -174,6 +174,7 @@ function generateActionSchema(type) {
|
|||||||
},
|
},
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
|
icon: 'PlusOutlined',
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
modal: {
|
modal: {
|
||||||
|
@ -20,8 +20,13 @@ import {
|
|||||||
updateSchema,
|
updateSchema,
|
||||||
} from '../';
|
} from '../';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import { Button, Dropdown, Menu, Select, Space } from 'antd';
|
import { Modal, Dropdown, Menu, Select, Space } from 'antd';
|
||||||
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
import {
|
||||||
|
MenuOutlined,
|
||||||
|
DragOutlined,
|
||||||
|
CalendarOutlined,
|
||||||
|
FontSizeOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { FormDialog, FormLayout } from '@formily/antd';
|
import { FormDialog, FormLayout } from '@formily/antd';
|
||||||
// import './style.less';
|
// import './style.less';
|
||||||
@ -37,6 +42,7 @@ import { useTable } from '../table';
|
|||||||
import { fieldsToFilterColumns } from './';
|
import { fieldsToFilterColumns } from './';
|
||||||
import { set } from 'lodash';
|
import { set } from 'lodash';
|
||||||
import { DragHandle } from '../../components/Sortable';
|
import { DragHandle } from '../../components/Sortable';
|
||||||
|
import { DeleteOutlined, FilterOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
export const DesignableBar = observer((props) => {
|
export const DesignableBar = observer((props) => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
@ -70,7 +76,7 @@ export const DesignableBar = observer((props) => {
|
|||||||
}}
|
}}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item>
|
<Menu.Item icon={<FontSizeOutlined />}>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{ display: 'flex', justifyContent: 'space-between' }}
|
||||||
>
|
>
|
||||||
@ -102,7 +108,7 @@ export const DesignableBar = observer((props) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item>
|
<Menu.Item icon={<CalendarOutlined />}>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{ display: 'flex', justifyContent: 'space-between' }}
|
||||||
>
|
>
|
||||||
@ -136,7 +142,7 @@ export const DesignableBar = observer((props) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item>
|
<Menu.Item icon={<CalendarOutlined />}>
|
||||||
<div
|
<div
|
||||||
style={{ display: 'flex', justifyContent: 'space-between' }}
|
style={{ display: 'flex', justifyContent: 'space-between' }}
|
||||||
>
|
>
|
||||||
@ -171,6 +177,7 @@ export const DesignableBar = observer((props) => {
|
|||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'defaultFilter'}
|
key={'defaultFilter'}
|
||||||
|
icon={<FilterOutlined />}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
const { defaultFilter } = await FormDialog(
|
const { defaultFilter } = await FormDialog(
|
||||||
'设置数据范围',
|
'设置数据范围',
|
||||||
@ -209,16 +216,22 @@ export const DesignableBar = observer((props) => {
|
|||||||
<Menu.Divider />
|
<Menu.Divider />
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
setVisible(false);
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
// console.log({ removed })
|
// console.log({ removed })
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
if (isGridRowOrCol(last)) {
|
|
||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
}
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -209,7 +209,7 @@ export const Calendar: any = observer((props: any) => {
|
|||||||
popup
|
popup
|
||||||
selectable
|
selectable
|
||||||
events={Array.isArray(field.value.slice()) ? field.value.slice() : []}
|
events={Array.isArray(field.value.slice()) ? field.value.slice() : []}
|
||||||
views={allViews}
|
views={['month', 'week', 'day']}
|
||||||
step={60}
|
step={60}
|
||||||
showMultiDayTimes
|
showMultiDayTimes
|
||||||
messages={messages}
|
messages={messages}
|
||||||
|
@ -14,7 +14,7 @@ import {
|
|||||||
} from '@formily/react';
|
} from '@formily/react';
|
||||||
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
|
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
|
||||||
import get from 'lodash/get';
|
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 { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { FormLayout } from '@formily/antd';
|
import { FormLayout } from '@formily/antd';
|
||||||
@ -58,10 +58,10 @@ export const DesignableBar = observer((props) => {
|
|||||||
<DragHandle />
|
<DragHandle />
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['hover']}
|
trigger={['hover']}
|
||||||
visible={visible}
|
// visible={visible}
|
||||||
onVisibleChange={(visible) => {
|
// onVisibleChange={(visible) => {
|
||||||
setVisible(visible);
|
// setVisible(visible);
|
||||||
}}
|
// }}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
{/* <Menu.Item
|
{/* <Menu.Item
|
||||||
@ -76,15 +76,19 @@ export const DesignableBar = observer((props) => {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
// console.log({ removed })
|
// console.log({ removed })
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
if (isGridRowOrCol(last)) {
|
|
||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
}
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ import {
|
|||||||
updateSchema,
|
updateSchema,
|
||||||
} from '../';
|
} from '../';
|
||||||
import get from 'lodash/get';
|
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 { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { FormDialog, FormLayout } from '@formily/antd';
|
import { FormDialog, FormLayout } from '@formily/antd';
|
||||||
@ -186,7 +186,7 @@ export const FieldDesignableBar = observer((props) => {
|
|||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
隐藏
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,7 @@ import {
|
|||||||
} from '@formily/react';
|
} from '@formily/react';
|
||||||
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
|
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
|
||||||
import get from 'lodash/get';
|
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 { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { FormLayout } from '@formily/antd';
|
import { FormLayout } from '@formily/antd';
|
||||||
@ -36,11 +36,14 @@ export const DesignableBar = observer((props) => {
|
|||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const { dragRef } = useContext(DraggableBlockContext);
|
const { dragRef } = useContext(DraggableBlockContext);
|
||||||
const { props: tableProps } = useTable();
|
const { props: tableProps } = useTable();
|
||||||
const collectionName = field.componentProps?.collectionName || tableProps?.collectionName;
|
const collectionName =
|
||||||
|
field.componentProps?.collectionName || tableProps?.collectionName;
|
||||||
const { collection } = useCollection({ collectionName });
|
const { collection } = useCollection({ collectionName });
|
||||||
return (
|
return (
|
||||||
<div className={cls('designable-bar', { active: visible })}>
|
<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
|
<span
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -52,22 +55,28 @@ export const DesignableBar = observer((props) => {
|
|||||||
{/* <DragHandle /> */}
|
{/* <DragHandle /> */}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['hover']}
|
trigger={['hover']}
|
||||||
visible={visible}
|
// visible={visible}
|
||||||
onVisibleChange={(visible) => {
|
// onVisibleChange={(visible) => {
|
||||||
setVisible(visible);
|
// setVisible(visible);
|
||||||
}}
|
// }}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
// console.log({ removed })
|
// console.log({ removed })
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -44,67 +44,4 @@ export const Input: ComposedInput = connect(
|
|||||||
Input.TextArea = connect(AntdInput.TextArea, mapReadPretty(Display.TextArea))
|
Input.TextArea = connect(AntdInput.TextArea, mapReadPretty(Display.TextArea))
|
||||||
Input.URL = connect(AntdInput, mapReadPretty(Display.URL))
|
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
|
export default Input
|
||||||
|
@ -12,9 +12,15 @@ import {
|
|||||||
useForm,
|
useForm,
|
||||||
RecursionField,
|
RecursionField,
|
||||||
} from '@formily/react';
|
} from '@formily/react';
|
||||||
import { useSchemaPath, SchemaField, useDesignable, removeSchema, updateSchema } from '../';
|
import {
|
||||||
|
useSchemaPath,
|
||||||
|
SchemaField,
|
||||||
|
useDesignable,
|
||||||
|
removeSchema,
|
||||||
|
updateSchema,
|
||||||
|
} from '../';
|
||||||
import get from 'lodash/get';
|
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 { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { FormDialog, FormLayout } from '@formily/antd';
|
import { FormDialog, FormLayout } from '@formily/antd';
|
||||||
@ -37,11 +43,14 @@ export const DesignableBar = observer((props) => {
|
|||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const { dragRef } = useContext(DraggableBlockContext);
|
const { dragRef } = useContext(DraggableBlockContext);
|
||||||
const { props: tableProps } = useTable();
|
const { props: tableProps } = useTable();
|
||||||
const collectionName = field.componentProps?.collectionName || tableProps?.collectionName;
|
const collectionName =
|
||||||
|
field.componentProps?.collectionName || tableProps?.collectionName;
|
||||||
const { collection, fields } = useCollection({ collectionName });
|
const { collection, fields } = useCollection({ collectionName });
|
||||||
return (
|
return (
|
||||||
<div className={cls('designable-bar', { active: visible })}>
|
<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
|
<span
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -53,10 +62,10 @@ export const DesignableBar = observer((props) => {
|
|||||||
<DragHandle />
|
<DragHandle />
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['hover']}
|
trigger={['hover']}
|
||||||
visible={visible}
|
// visible={visible}
|
||||||
onVisibleChange={(visible) => {
|
// onVisibleChange={(visible) => {
|
||||||
setVisible(visible);
|
// setVisible(visible);
|
||||||
}}
|
// }}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
{/* <Menu.Item
|
{/* <Menu.Item
|
||||||
@ -108,13 +117,19 @@ export const DesignableBar = observer((props) => {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
// console.log({ removed })
|
// console.log({ removed })
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ import {
|
|||||||
updateSchema,
|
updateSchema,
|
||||||
} from '../';
|
} from '../';
|
||||||
import get from 'lodash/get';
|
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 { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { FormDialog, FormLayout } from '@formily/antd';
|
import { FormDialog, FormLayout } from '@formily/antd';
|
||||||
@ -69,10 +69,10 @@ export const FieldDesignableBar = observer((props) => {
|
|||||||
<Dropdown
|
<Dropdown
|
||||||
placement={'bottomRight'}
|
placement={'bottomRight'}
|
||||||
trigger={['hover']}
|
trigger={['hover']}
|
||||||
visible={visible}
|
// visible={visible}
|
||||||
onVisibleChange={(visible) => {
|
// onVisibleChange={(visible) => {
|
||||||
setVisible(visible);
|
// setVisible(visible);
|
||||||
}}
|
// }}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
@ -128,16 +128,21 @@ export const FieldDesignableBar = observer((props) => {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
const fieldName =
|
const fieldName =
|
||||||
schema['x-component-props']?.['fieldName'];
|
schema['x-component-props']?.['fieldName'];
|
||||||
console.log({ schema, removed, fieldName });
|
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
displayed.remove(fieldName);
|
displayed.remove(fieldName);
|
||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
useFieldSchema,
|
useFieldSchema,
|
||||||
mapReadPretty,
|
mapReadPretty,
|
||||||
} from '@formily/react';
|
} 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 { InputProps, TextAreaProps } from 'antd/lib/input';
|
||||||
import { Display } from '../display';
|
import { Display } from '../display';
|
||||||
import { LoadingOutlined, MenuOutlined, DragOutlined } from '@ant-design/icons';
|
import { LoadingOutlined, MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
@ -125,10 +125,10 @@ Markdown.Void.DesignableBar = observer((props) => {
|
|||||||
<DragHandle />
|
<DragHandle />
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['hover']}
|
trigger={['hover']}
|
||||||
visible={visible}
|
// visible={visible}
|
||||||
onVisibleChange={(visible) => {
|
// onVisibleChange={(visible) => {
|
||||||
setVisible(visible);
|
// setVisible(visible);
|
||||||
}}
|
// }}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
@ -144,68 +144,19 @@ Markdown.Void.DesignableBar = observer((props) => {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
console.log({ last })
|
console.log({ last });
|
||||||
await removeSchema(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.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ import {
|
|||||||
updateSchema,
|
updateSchema,
|
||||||
} from '../';
|
} from '../';
|
||||||
import get from 'lodash/get';
|
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 { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { FormDialog, FormLayout } from '@formily/antd';
|
import { FormDialog, FormLayout } from '@formily/antd';
|
||||||
@ -58,10 +58,10 @@ export const SimpleDesignableBar = observer((props) => {
|
|||||||
<DragHandle />
|
<DragHandle />
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['hover']}
|
trigger={['hover']}
|
||||||
visible={visible}
|
// visible={visible}
|
||||||
onVisibleChange={(visible) => {
|
// onVisibleChange={(visible) => {
|
||||||
setVisible(visible);
|
// setVisible(visible);
|
||||||
}}
|
// }}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
@ -204,15 +204,19 @@ export const SimpleDesignableBar = observer((props) => {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
// console.log({ removed })
|
// console.log({ removed })
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
if (isGridRowOrCol(last)) {
|
|
||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
}
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -53,7 +53,7 @@ const schema: ISchema = {
|
|||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
name: 'action1',
|
name: 'action1',
|
||||||
title: '新增',
|
title: '创建',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
|
@ -6,7 +6,7 @@ import {
|
|||||||
useField,
|
useField,
|
||||||
useForm,
|
useForm,
|
||||||
} from '@formily/react';
|
} 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 { cloneDeep, findIndex, forIn, range, set } from 'lodash';
|
||||||
import React, { Fragment, useEffect, useState } from 'react';
|
import React, { Fragment, useEffect, useState } from 'react';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
@ -905,6 +905,7 @@ function generateActionSchema(type) {
|
|||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
|
icon: 'PlusOutlined',
|
||||||
},
|
},
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
@ -944,7 +945,7 @@ function generateActionSchema(type) {
|
|||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
confirm: {
|
confirm: {
|
||||||
title: '删除数据',
|
title: '删除数据',
|
||||||
content: '删除后无法恢复,确定要删除吗?'
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
},
|
},
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
},
|
},
|
||||||
@ -1054,6 +1055,10 @@ function generateMenuActionSchema(type) {
|
|||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
type: 'link',
|
type: 'link',
|
||||||
|
confirm: {
|
||||||
|
title: '删除数据',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -2024,10 +2029,10 @@ Table.DesignableBar = observer((props) => {
|
|||||||
<DragHandle />
|
<DragHandle />
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['hover']}
|
trigger={['hover']}
|
||||||
visible={visible}
|
// visible={visible}
|
||||||
onVisibleChange={(visible) => {
|
// onVisibleChange={(visible) => {
|
||||||
setVisible(visible);
|
// setVisible(visible);
|
||||||
}}
|
// }}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
@ -2241,15 +2246,19 @@ Table.DesignableBar = observer((props) => {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'delete'}
|
key={'delete'}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除区块',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const removed = deepRemove();
|
const removed = deepRemove();
|
||||||
// console.log({ removed })
|
// console.log({ removed })
|
||||||
const last = removed.pop();
|
const last = removed.pop();
|
||||||
if (isGridRowOrCol(last)) {
|
|
||||||
await removeSchema(last);
|
await removeSchema(last);
|
||||||
}
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,14 @@
|
|||||||
import { observer, connect, useField, RecursionField } from '@formily/react';
|
import { observer, connect, useField, RecursionField } from '@formily/react';
|
||||||
import React from '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 {
|
import {
|
||||||
findPropertyByPath,
|
findPropertyByPath,
|
||||||
getSchemaPath,
|
getSchemaPath,
|
||||||
@ -327,12 +335,18 @@ Tabs.TabPane.DesignableBar = () => {
|
|||||||
<Menu.Divider />
|
<Menu.Divider />
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
setVisible(false);
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除标签页',
|
||||||
|
content: '删除后无法恢复,确定要删除吗?',
|
||||||
|
onOk: async () => {
|
||||||
const data = remove();
|
const data = remove();
|
||||||
await removeSchema(data);
|
await removeSchema(data);
|
||||||
setVisible(false);
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
移除
|
删除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user