updates
This commit is contained in:
chenos
parent
8d298de6fe
commit
07fa09e412
@ -20,6 +20,7 @@ import cls from 'classnames';
|
|||||||
import { MenuOutlined } from '@ant-design/icons';
|
import { MenuOutlined } from '@ant-design/icons';
|
||||||
import { FormLayout } from '@formily/antd';
|
import { FormLayout } from '@formily/antd';
|
||||||
import IconPicker from '../../components/icon-picker';
|
import IconPicker from '../../components/icon-picker';
|
||||||
|
import { useSchemaComponent } from '../../components/schema-renderer';
|
||||||
|
|
||||||
export const Action: any = observer((props: any) => {
|
export const Action: any = observer((props: any) => {
|
||||||
const { useAction = useDefaultAction, icon, ...others } = props;
|
const { useAction = useDefaultAction, icon, ...others } = props;
|
||||||
@ -188,6 +189,7 @@ Action.Dropdown = observer((props: any) => {
|
|||||||
const { buttonProps = {}, ...others } = props;
|
const { buttonProps = {}, ...others } = props;
|
||||||
const { schema } = useDesignable();
|
const { schema } = useDesignable();
|
||||||
const componentProps = schema.parent['x-component-props'] || {};
|
const componentProps = schema.parent['x-component-props'] || {};
|
||||||
|
const icon = buttonProps.icon || componentProps['icon'];
|
||||||
return (
|
return (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
@ -198,7 +200,13 @@ Action.Dropdown = observer((props: any) => {
|
|||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Button {...buttonProps} {...componentProps}>{schema.title || schema.parent.title}</Button>
|
<Button
|
||||||
|
{...buttonProps}
|
||||||
|
{...componentProps}
|
||||||
|
icon={<IconPicker type={icon} />}
|
||||||
|
>
|
||||||
|
{schema.title || schema.parent.title}
|
||||||
|
</Button>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@ -212,6 +220,10 @@ Action.Popover = observer((props) => {
|
|||||||
console.log('Action.Popover', schema, fieldSchema);
|
console.log('Action.Popover', schema, fieldSchema);
|
||||||
const componentProps =
|
const componentProps =
|
||||||
(schema.parent && schema.parent['x-component-props']) || {};
|
(schema.parent && schema.parent['x-component-props']) || {};
|
||||||
|
const designableBarComponent = schema.parent
|
||||||
|
? schema.parent['x-designable-bar']
|
||||||
|
: null;
|
||||||
|
const DesignableBar = useSchemaComponent(designableBarComponent);
|
||||||
return (
|
return (
|
||||||
<Popover
|
<Popover
|
||||||
visible={visible}
|
visible={visible}
|
||||||
@ -248,7 +260,10 @@ Action.Popover = observer((props) => {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Button {...componentProps}>{schema.parent.title || schema.title}</Button>
|
<Button {...componentProps}>
|
||||||
|
{schema.parent.title || schema.title}
|
||||||
|
{DesignableBar && <DesignableBar />}
|
||||||
|
</Button>
|
||||||
</Popover>
|
</Popover>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -16,6 +16,7 @@ import {
|
|||||||
RecursionField,
|
RecursionField,
|
||||||
Schema,
|
Schema,
|
||||||
ISchema,
|
ISchema,
|
||||||
|
useForm,
|
||||||
} from '@formily/react';
|
} from '@formily/react';
|
||||||
import {
|
import {
|
||||||
Menu,
|
Menu,
|
||||||
@ -58,9 +59,10 @@ import {
|
|||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import { useRequest } from 'ahooks';
|
import { useRequest } from 'ahooks';
|
||||||
import { SchemaField } from '../../components/schema-renderer';
|
import { SchemaField } from '../../components/schema-renderer';
|
||||||
import { useFormContext } from '../form';
|
import { useResourceContext } from '../';
|
||||||
import { cloneDeep } from 'lodash';
|
import { cloneDeep } from 'lodash';
|
||||||
import { options } from '../database-field/interfaces';
|
import { options } from '../database-field/interfaces';
|
||||||
|
import { useDisplayFieldsContext } from '../form';
|
||||||
|
|
||||||
const generateGridBlock = (schema: ISchema) => {
|
const generateGridBlock = (schema: ISchema) => {
|
||||||
const name = schema.name || uid();
|
const name = schema.name || uid();
|
||||||
@ -126,73 +128,154 @@ function generateCardItemSchema(component) {
|
|||||||
{ key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
{ key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
{ key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
{ key: uid(), field1: uid(), field2: uid() },
|
|
||||||
{ key: uid(), field1: uid(), field2: uid() },
|
|
||||||
{ key: uid(), field1: uid(), field2: uid() },
|
|
||||||
{ key: uid(), field1: uid(), field2: uid() },
|
|
||||||
],
|
],
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
rowKey: 'key',
|
rowKey: 'key',
|
||||||
|
dragSort: true,
|
||||||
|
showIndex: true,
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
[`action_bar_${uid()}`]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Table.ActionBar',
|
'x-component': 'Table.ActionBar',
|
||||||
|
'x-designable-bar': 'Table.ActionBar.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
action1: {
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Table.Filter',
|
||||||
|
'x-designable-bar': 'Table.Filter.DesignableBar',
|
||||||
|
'x-component-props': {
|
||||||
|
fieldNames: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
name: 'action1',
|
name: 'action1',
|
||||||
title: '筛选',
|
title: '新增',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
popover1: {
|
modal: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '弹窗标题',
|
title: '新增数据',
|
||||||
'x-decorator': 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-component': 'Action.Popover',
|
'x-component': 'Action.Modal',
|
||||||
'x-component-props': {},
|
'x-component-props': {
|
||||||
|
useOkAction: '{{ Table.useTableCreateAction }}',
|
||||||
|
},
|
||||||
properties: {
|
properties: {
|
||||||
filter: {
|
[uid()]: {
|
||||||
name: 'filter',
|
type: 'void',
|
||||||
type: 'object',
|
'x-component': 'Grid',
|
||||||
'x-component': 'Filter',
|
'x-component-props': {
|
||||||
|
addNewComponent: 'AddNew.FormItem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
name: 'action1',
|
||||||
|
title: '删除',
|
||||||
|
'x-component': 'Action',
|
||||||
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
|
'x-component-props': {
|
||||||
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Table.ActionBar',
|
||||||
|
'x-component-props': {
|
||||||
|
align: 'bottom',
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Table.Pagination',
|
||||||
|
'x-component-props': {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Table.Column',
|
||||||
|
'x-component-props': {
|
||||||
|
className: 'nb-table-operation',
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Action.Dropdown',
|
||||||
|
'x-component-props': {
|
||||||
|
buttonProps: {
|
||||||
|
icon: 'EllipsisOutlined',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
title: '操作 1',
|
||||||
|
'x-component': 'Menu.Action',
|
||||||
|
'x-component-props': {
|
||||||
|
style: {
|
||||||
|
minWidth: 150,
|
||||||
|
},
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
name: 'action1',
|
||||||
|
title: '查看',
|
||||||
|
'x-component': 'Menu.Action',
|
||||||
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
|
properties: {
|
||||||
|
drawer1: {
|
||||||
|
type: 'void',
|
||||||
|
title: '查看',
|
||||||
|
'x-component': 'Action.Modal',
|
||||||
|
'x-component-props': {},
|
||||||
properties: {
|
properties: {
|
||||||
column1: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '字段1',
|
'x-component': 'Tabs',
|
||||||
'x-component': 'Filter.Column',
|
|
||||||
'x-component-props': {
|
|
||||||
operations: [
|
|
||||||
{ label: '等于', value: 'eq' },
|
|
||||||
{ label: '不等于', value: 'ne' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
properties: {
|
properties: {
|
||||||
field1: {
|
tab1: {
|
||||||
type: 'string',
|
type: 'void',
|
||||||
'x-component': 'Input',
|
'x-component': 'Tabs.TabPane',
|
||||||
},
|
'x-component-props': {
|
||||||
},
|
tab: 'Tab1',
|
||||||
},
|
},
|
||||||
column2: {
|
properties: {
|
||||||
type: 'void',
|
aaa: {
|
||||||
title: '字段2',
|
type: 'string',
|
||||||
'x-component': 'Filter.Column',
|
title: 'AAA',
|
||||||
'x-component-props': {
|
'x-decorator': 'FormItem',
|
||||||
operations: [
|
required: true,
|
||||||
{ label: '大于', value: 'gt' },
|
'x-component': 'Input',
|
||||||
{ label: '小于', value: 'lt' },
|
},
|
||||||
{
|
},
|
||||||
label: '非空',
|
},
|
||||||
value: 'notNull',
|
tab2: {
|
||||||
noValue: true,
|
type: 'void',
|
||||||
|
'x-component': 'Tabs.TabPane',
|
||||||
|
'x-component-props': {
|
||||||
|
tab: 'Tab2',
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
bbb: {
|
||||||
|
type: 'string',
|
||||||
|
title: 'BBB',
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
required: true,
|
||||||
|
'x-component': 'Input',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
],
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
field1: {
|
|
||||||
type: 'number',
|
|
||||||
'x-component': 'InputNumber',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -200,88 +283,54 @@ function generateCardItemSchema(component) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
[uid()]: {
|
||||||
},
|
|
||||||
action2: {
|
|
||||||
type: 'void',
|
|
||||||
name: 'action1',
|
|
||||||
title: '新增',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-designable-bar': 'Action.DesignableBar',
|
|
||||||
properties: {
|
|
||||||
drawer1: {
|
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '抽屉标题',
|
name: 'action1',
|
||||||
'x-decorator': 'Form',
|
title: '修改',
|
||||||
'x-component': 'Action.Modal',
|
'x-component': 'Menu.Action',
|
||||||
'x-component-props': {
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
useOkAction: '{{ Table.useTableCreateAction }}',
|
|
||||||
},
|
|
||||||
properties: {
|
properties: {
|
||||||
field1: {
|
drawer1: {
|
||||||
type: 'string',
|
type: 'void',
|
||||||
title: '字段1',
|
title: '编辑表单',
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'Form',
|
||||||
'x-component': 'Input',
|
'x-decorator-props': {
|
||||||
},
|
useValues: '{{ Table.useTableRow }}',
|
||||||
field2: {
|
},
|
||||||
type: 'string',
|
'x-component': 'Action.Modal',
|
||||||
title: '字段2',
|
'x-component-props': {
|
||||||
'x-decorator': 'FormItem',
|
useOkAction: '{{ Table.useTableUpdateAction }}',
|
||||||
'x-component': 'Input',
|
},
|
||||||
|
properties: {
|
||||||
|
field1: {
|
||||||
|
type: 'string',
|
||||||
|
title: '字段1',
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Input',
|
||||||
|
},
|
||||||
|
field2: {
|
||||||
|
type: 'string',
|
||||||
|
title: '字段2',
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Input',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
title: '删除',
|
||||||
|
'x-component': 'Menu.Action',
|
||||||
|
'x-component-props': {
|
||||||
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
action3: {
|
|
||||||
type: 'void',
|
|
||||||
name: 'action1',
|
|
||||||
title: '删除',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-component-props': {
|
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
[`a_${uid()}`]: {
|
[uid()]: {
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Table.ActionBar',
|
|
||||||
'x-component-props': {
|
|
||||||
align: 'bottom',
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
pagination: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Table.Pagination',
|
|
||||||
'x-component-props': {},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '排序',
|
|
||||||
'x-component': 'Table.Column',
|
|
||||||
properties: {
|
|
||||||
sort: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Table.SortHandle',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '序号',
|
|
||||||
'x-component': 'Table.Column',
|
|
||||||
properties: {
|
|
||||||
index: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Table.Index',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '字段1',
|
title: '字段1',
|
||||||
'x-component': 'Table.Column',
|
'x-component': 'Table.Column',
|
||||||
@ -302,15 +351,17 @@ function generateCardItemSchema(component) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
[`column_${uid()}`]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '字段2',
|
title: '字段2',
|
||||||
'x-component': 'Table.Column',
|
'x-component': 'Table.Column',
|
||||||
|
'x-component-props': {
|
||||||
|
// title: 'z1',
|
||||||
|
},
|
||||||
'x-designable-bar': 'Table.Column.DesignableBar',
|
'x-designable-bar': 'Table.Column.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
field2: {
|
field2: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
// title: '字段2',
|
|
||||||
required: true,
|
required: true,
|
||||||
'x-read-pretty': true,
|
'x-read-pretty': true,
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
@ -321,111 +372,6 @@ function generateCardItemSchema(component) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '操作',
|
|
||||||
'x-component': 'Table.Column',
|
|
||||||
properties: {
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
name: 'action1',
|
|
||||||
title: '查看',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
|
||||||
properties: {
|
|
||||||
drawer1: {
|
|
||||||
type: 'void',
|
|
||||||
title: '查看',
|
|
||||||
'x-component': 'Action.Modal',
|
|
||||||
'x-component-props': {},
|
|
||||||
properties: {
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Tabs',
|
|
||||||
properties: {
|
|
||||||
tab1: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Tabs.TabPane',
|
|
||||||
'x-component-props': {
|
|
||||||
tab: 'Tab1',
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
aaa: {
|
|
||||||
type: 'string',
|
|
||||||
title: 'AAA',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
required: true,
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tab2: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Tabs.TabPane',
|
|
||||||
'x-component-props': {
|
|
||||||
tab: 'Tab2',
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
bbb: {
|
|
||||||
type: 'string',
|
|
||||||
title: 'BBB',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
required: true,
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
name: 'action1',
|
|
||||||
title: '修改',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
|
||||||
properties: {
|
|
||||||
drawer1: {
|
|
||||||
type: 'void',
|
|
||||||
title: '编辑表单',
|
|
||||||
'x-decorator': 'Form',
|
|
||||||
'x-decorator-props': {
|
|
||||||
useValues: '{{ Table.useTableRow }}',
|
|
||||||
},
|
|
||||||
'x-component': 'Action.Modal',
|
|
||||||
'x-component-props': {
|
|
||||||
useOkAction: '{{ Table.useTableUpdateAction }}',
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
field1: {
|
|
||||||
type: 'string',
|
|
||||||
title: '字段1',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
field2: {
|
|
||||||
type: 'string',
|
|
||||||
title: '字段2',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '删除',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-component-props': {
|
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
Form: {
|
Form: {
|
||||||
@ -509,6 +455,7 @@ AddNew.CardItem = observer((props: any) => {
|
|||||||
console.log({ collections });
|
console.log({ collections });
|
||||||
return (
|
return (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
|
trigger={['click']}
|
||||||
overlayStyle={{
|
overlayStyle={{
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
}}
|
}}
|
||||||
@ -520,7 +467,7 @@ AddNew.CardItem = observer((props: any) => {
|
|||||||
<Menu
|
<Menu
|
||||||
onClick={async (info) => {
|
onClick={async (info) => {
|
||||||
let data: ISchema;
|
let data: ISchema;
|
||||||
let collectionName = null;
|
let resourceName = null;
|
||||||
if (['addNewTable', 'addNewForm'].includes(info.key)) {
|
if (['addNewTable', 'addNewForm'].includes(info.key)) {
|
||||||
const values = await FormDialog(`新建数据表`, () => {
|
const values = await FormDialog(`新建数据表`, () => {
|
||||||
return (
|
return (
|
||||||
@ -539,12 +486,12 @@ AddNew.CardItem = observer((props: any) => {
|
|||||||
data = generateCardItemSchema(
|
data = generateCardItemSchema(
|
||||||
info.key === 'addNewTable' ? 'Table' : 'Form',
|
info.key === 'addNewTable' ? 'Table' : 'Form',
|
||||||
);
|
);
|
||||||
collectionName = values.name;
|
resourceName = values.name;
|
||||||
} else if (info.key !== 'Markdown') {
|
} else if (info.key !== 'Markdown') {
|
||||||
const keys = info.key.split('.');
|
const keys = info.key.split('.');
|
||||||
const component = keys.shift();
|
const component = keys.shift();
|
||||||
const tableName = keys.join('.');
|
const tableName = keys.join('.');
|
||||||
collectionName = tableName;
|
resourceName = tableName;
|
||||||
data = generateCardItemSchema(component);
|
data = generateCardItemSchema(component);
|
||||||
console.log('info.keyPath', component, tableName);
|
console.log('info.keyPath', component, tableName);
|
||||||
} else {
|
} else {
|
||||||
@ -553,9 +500,9 @@ AddNew.CardItem = observer((props: any) => {
|
|||||||
if (schema['key']) {
|
if (schema['key']) {
|
||||||
data['key'] = uid();
|
data['key'] = uid();
|
||||||
}
|
}
|
||||||
if (collectionName) {
|
if (resourceName) {
|
||||||
data['x-component-props'] = data['x-component-props'] || {};
|
data['x-component-props'] = data['x-component-props'] || {};
|
||||||
data['x-component-props']['collectionName'] = collectionName;
|
data['x-component-props']['resourceName'] = resourceName;
|
||||||
}
|
}
|
||||||
if (isGridBlock(schema)) {
|
if (isGridBlock(schema)) {
|
||||||
path.pop();
|
path.pop();
|
||||||
@ -595,8 +542,8 @@ AddNew.CardItem = observer((props: any) => {
|
|||||||
<Menu.Divider></Menu.Divider>
|
<Menu.Divider></Menu.Divider>
|
||||||
<Menu.Item key={'addNewForm'}>新建数据表</Menu.Item>
|
<Menu.Item key={'addNewForm'}>新建数据表</Menu.Item>
|
||||||
</Menu.SubMenu>
|
</Menu.SubMenu>
|
||||||
<Menu.Item key={'Markdown'}>新建 Markdown</Menu.Item>
|
<Menu.Item key={'Markdown'}>新建文本段</Menu.Item>
|
||||||
<Menu.SubMenu key={'Ref'} title={'引用模板'}>
|
<Menu.SubMenu disabled key={'Ref'} title={'引用模板'}>
|
||||||
<Menu.ItemGroup key={'form-select'} title={'选择模板'}>
|
<Menu.ItemGroup key={'form-select'} title={'选择模板'}>
|
||||||
<Menu.Item key={'Ref.name1'}>模板1</Menu.Item>
|
<Menu.Item key={'Ref.name1'}>模板1</Menu.Item>
|
||||||
</Menu.ItemGroup>
|
</Menu.ItemGroup>
|
||||||
@ -684,55 +631,97 @@ AddNew.BlockItem = observer((props: any) => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function FieldSwitch({ field, onChange, defaultChecked }) {
|
||||||
|
const [checked, setChecked] = useState(defaultChecked);
|
||||||
|
const form = useForm();
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}}
|
||||||
|
onClick={(e) => {
|
||||||
|
setChecked((value) => {
|
||||||
|
onChange && onChange(!value);
|
||||||
|
return !value;
|
||||||
|
});
|
||||||
|
console.log('FieldSwitch', form);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{field?.uiSchema?.title || '未命名'}</span>
|
||||||
|
<Switch
|
||||||
|
onChange={(checked, e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setChecked(checked);
|
||||||
|
onChange && onChange(checked);
|
||||||
|
}}
|
||||||
|
size={'small'}
|
||||||
|
checked={checked}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
AddNew.FormItem = observer((props: any) => {
|
AddNew.FormItem = observer((props: any) => {
|
||||||
const { ghost, defaultAction } = props;
|
const { ghost, defaultAction } = props;
|
||||||
const { schema, insertBefore, insertAfter, appendChild } = useDesignable();
|
const { schema, insertBefore, insertAfter, appendChild } = useDesignable();
|
||||||
const path = useSchemaPath();
|
const path = useSchemaPath();
|
||||||
const { collection = {}, refresh } = useFormContext();
|
const { resource = {}, refresh } = useResourceContext();
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
const { displayFields = [] } = useDisplayFieldsContext();
|
||||||
|
console.log({ displayFields });
|
||||||
return (
|
return (
|
||||||
<Dropdown
|
<Dropdown
|
||||||
|
trigger={['click']}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={setVisible}
|
||||||
overlayStyle={{
|
overlayStyle={{
|
||||||
minWidth: 200,
|
minWidth: 200,
|
||||||
}}
|
}}
|
||||||
placement={'bottomCenter'}
|
placement={'bottomCenter'}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.ItemGroup title={`选择「${collection.title}」里已有字段`}>
|
<Menu.ItemGroup title={`要展示的字段`}>
|
||||||
{collection?.fields?.map((field) => (
|
{resource?.fields?.map((field) => (
|
||||||
<Menu.Item
|
<Menu.Item key={field.key}>
|
||||||
key={field.key}
|
<FieldSwitch
|
||||||
onClick={async () => {
|
field={field}
|
||||||
let data: ISchema = {
|
defaultChecked={displayFields.includes(field.name)}
|
||||||
key: uid(),
|
onChange={async (checked) => {
|
||||||
type: 'void',
|
if (!checked) {
|
||||||
'x-decorator': 'Form.Field.Item',
|
return;
|
||||||
'x-designable-bar': 'Form.Field.DesignableBar',
|
|
||||||
'x-component': 'Form.Field',
|
|
||||||
'x-component-props': {
|
|
||||||
fieldName: field.name,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
if (isGridBlock(schema)) {
|
|
||||||
path.pop();
|
|
||||||
path.pop();
|
|
||||||
data = generateGridBlock(data);
|
|
||||||
} else if (isGrid(schema)) {
|
|
||||||
data = generateGridBlock(data);
|
|
||||||
}
|
|
||||||
if (data) {
|
|
||||||
let s;
|
|
||||||
if (isGrid(schema)) {
|
|
||||||
s = appendChild(data, [...path]);
|
|
||||||
} else if (defaultAction === 'insertAfter') {
|
|
||||||
s = insertAfter(data, [...path]);
|
|
||||||
} else {
|
|
||||||
s = insertBefore(data, [...path]);
|
|
||||||
}
|
}
|
||||||
await createSchema(s);
|
let data: ISchema = {
|
||||||
}
|
key: uid(),
|
||||||
}}
|
type: 'void',
|
||||||
>
|
'x-decorator': 'Form.Field.Item',
|
||||||
{field?.uiSchema?.title || '未命名'}
|
'x-designable-bar': 'Form.Field.DesignableBar',
|
||||||
|
'x-component': 'Form.Field',
|
||||||
|
'x-component-props': {
|
||||||
|
fieldName: field.name,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
if (isGridBlock(schema)) {
|
||||||
|
path.pop();
|
||||||
|
path.pop();
|
||||||
|
data = generateGridBlock(data);
|
||||||
|
} else if (isGrid(schema)) {
|
||||||
|
data = generateGridBlock(data);
|
||||||
|
}
|
||||||
|
if (data) {
|
||||||
|
let s;
|
||||||
|
if (isGrid(schema)) {
|
||||||
|
s = appendChild(data, [...path]);
|
||||||
|
} else if (defaultAction === 'insertAfter') {
|
||||||
|
s = insertAfter(data, [...path]);
|
||||||
|
} else {
|
||||||
|
s = insertBefore(data, [...path]);
|
||||||
|
}
|
||||||
|
await createSchema(s);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
))}
|
))}
|
||||||
</Menu.ItemGroup>
|
</Menu.ItemGroup>
|
||||||
@ -745,6 +734,7 @@ AddNew.FormItem = observer((props: any) => {
|
|||||||
style={{ minWidth: 150 }}
|
style={{ minWidth: 150 }}
|
||||||
key={item.name}
|
key={item.name}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
|
setVisible(false);
|
||||||
const values = await FormDialog(`新增字段`, () => {
|
const values = await FormDialog(`新增字段`, () => {
|
||||||
return (
|
return (
|
||||||
<FormLayout layout={'vertical'}>
|
<FormLayout layout={'vertical'}>
|
||||||
@ -758,7 +748,7 @@ AddNew.FormItem = observer((props: any) => {
|
|||||||
name: `f_${uid()}`,
|
name: `f_${uid()}`,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
await createCollectionField(collection.name, values);
|
await createCollectionField(resource.name, values);
|
||||||
await refresh();
|
await refresh();
|
||||||
let data: ISchema = cloneDeep(values.uiSchema);
|
let data: ISchema = cloneDeep(values.uiSchema);
|
||||||
data['name'] = values.name;
|
data['name'] = values.name;
|
||||||
@ -790,13 +780,13 @@ AddNew.FormItem = observer((props: any) => {
|
|||||||
</Menu.ItemGroup>
|
</Menu.ItemGroup>
|
||||||
))}
|
))}
|
||||||
</Menu.SubMenu>
|
</Menu.SubMenu>
|
||||||
<Menu.Divider />
|
{/* <Menu.Divider /> */}
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
let data: ISchema = {
|
let data: ISchema = {
|
||||||
key: uid(),
|
key: uid(),
|
||||||
type: 'string',
|
type: 'string',
|
||||||
default: '这是一段演示文字',
|
default: '这是一段演示文字，**支持使用 Markdown 语法**',
|
||||||
'x-designable-bar': 'Markdown.FormItemDesignableBar',
|
'x-designable-bar': 'Markdown.FormItemDesignableBar',
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
'x-read-pretty': true,
|
'x-read-pretty': true,
|
||||||
@ -823,6 +813,7 @@ AddNew.FormItem = observer((props: any) => {
|
|||||||
}
|
}
|
||||||
await createSchema(s);
|
await createSchema(s);
|
||||||
}
|
}
|
||||||
|
setVisible(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
添加说明文字
|
添加说明文字
|
||||||
|
|||||||
@ -142,4 +142,8 @@ export const select: ISchema = {
|
|||||||
'x-component': 'Checkbox',
|
'x-component': 'Checkbox',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
operations: [
|
||||||
|
{ label: '等于', value: 'eq' },
|
||||||
|
{ label: '不等于', value: 'ne' },
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -51,4 +51,8 @@ export const string: ISchema = {
|
|||||||
'x-component': 'Checkbox',
|
'x-component': 'Checkbox',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
operations: [
|
||||||
|
{ label: '等于', value: 'eq' },
|
||||||
|
{ label: '不等于', value: 'ne' },
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -50,4 +50,8 @@ export const textarea: ISchema = {
|
|||||||
'x-component': 'Checkbox',
|
'x-component': 'Checkbox',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
operations: [
|
||||||
|
{ label: '等于', value: 'eq' },
|
||||||
|
{ label: '不等于', value: 'ne' },
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@ -18,6 +18,8 @@ import {
|
|||||||
useDesignable,
|
useDesignable,
|
||||||
removeSchema,
|
removeSchema,
|
||||||
useCollectionContext,
|
useCollectionContext,
|
||||||
|
useResourceContext,
|
||||||
|
ResourceContextProvider,
|
||||||
} from '../';
|
} from '../';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import { Button, Dropdown, Menu, Space } from 'antd';
|
import { Button, Dropdown, Menu, Space } from 'antd';
|
||||||
@ -37,23 +39,25 @@ import { FieldDesignableBar } from './Field.DesignableBar';
|
|||||||
import { createContext } from 'react';
|
import { createContext } from 'react';
|
||||||
import { BlockItem } from '../block-item';
|
import { BlockItem } from '../block-item';
|
||||||
|
|
||||||
const [FormContextProvider, useFormContext] = constate(({ schema, form }) => {
|
const [DisplayFieldsContextProvider, useDisplayFieldsContext] = constate(() => {
|
||||||
// const schema = useFieldSchema();
|
const [displayFields, setDisplayFields] = useState([]);
|
||||||
const collectionName = schema['x-component-props']?.['collectionName'];
|
|
||||||
const { data: collections = [], loading, refresh } = useCollectionContext();
|
return {
|
||||||
const collection = collectionName
|
displayFields,
|
||||||
? collections.find((item) => item.name === collectionName)
|
setDisplayFields,
|
||||||
: {};
|
addDisplayField(fieldName) {
|
||||||
console.log({ collection });
|
setDisplayFields(fields => fields.concat(fieldName));
|
||||||
return { form, schema, collection, refresh };
|
},
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export { FormContextProvider, useFormContext };
|
export { DisplayFieldsContextProvider, useDisplayFieldsContext }
|
||||||
|
|
||||||
export const Form: any = observer((props: any) => {
|
export const Form: any = observer((props: any) => {
|
||||||
const {
|
const {
|
||||||
useValues = () => ({}),
|
useValues = () => ({}),
|
||||||
showDefaultButtons = false,
|
showDefaultButtons = false,
|
||||||
|
resourceName,
|
||||||
...others
|
...others
|
||||||
} = props;
|
} = props;
|
||||||
const initialValues = useValues();
|
const initialValues = useValues();
|
||||||
@ -64,59 +68,66 @@ export const Form: any = observer((props: any) => {
|
|||||||
const { schema } = useDesignable();
|
const { schema } = useDesignable();
|
||||||
const path = useSchemaPath();
|
const path = useSchemaPath();
|
||||||
const scope = useContext(SchemaExpressionScopeContext);
|
const scope = useContext(SchemaExpressionScopeContext);
|
||||||
return (
|
const content = (
|
||||||
<FormProvider form={form}>
|
<FormProvider form={form}>
|
||||||
{/* @ts-ignore */}
|
{schema['x-decorator'] === 'Form' ? (
|
||||||
<FormContextProvider schema={schema} form={form}>
|
<SchemaField
|
||||||
{schema['x-decorator'] === 'Form' ? (
|
scope={scope}
|
||||||
|
schema={{
|
||||||
|
type: 'object',
|
||||||
|
properties: {
|
||||||
|
[schema.name]: {
|
||||||
|
...schema.toJSON(),
|
||||||
|
'x-path': path,
|
||||||
|
// 避免死循环
|
||||||
|
'x-decorator': 'Form.__Decorator',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<FormLayout layout={'vertical'} {...others}>
|
||||||
<SchemaField
|
<SchemaField
|
||||||
scope={scope}
|
scope={scope}
|
||||||
schema={{
|
schema={{
|
||||||
type: 'object',
|
type: 'object',
|
||||||
properties: {
|
properties: schema.properties,
|
||||||
[schema.name]: {
|
|
||||||
...schema.toJSON(),
|
|
||||||
'x-path': path,
|
|
||||||
// 避免死循环
|
|
||||||
'x-decorator': 'Form.__Decorator',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
</FormLayout>
|
||||||
<FormLayout layout={'vertical'} {...others}>
|
)}
|
||||||
<SchemaField
|
{showDefaultButtons && (
|
||||||
scope={scope}
|
<Space style={{ marginTop: 24 }}>
|
||||||
schema={{
|
<Button
|
||||||
type: 'object',
|
onClick={async () => {
|
||||||
properties: schema.properties,
|
const values = await form.submit();
|
||||||
}}
|
console.log({ values });
|
||||||
/>
|
}}
|
||||||
</FormLayout>
|
type={'primary'}
|
||||||
)}
|
>
|
||||||
{showDefaultButtons && (
|
提交
|
||||||
<Space style={{ marginTop: 24 }}>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
const values = await form.submit();
|
await form.reset();
|
||||||
console.log({ values });
|
}}
|
||||||
}}
|
>
|
||||||
type={'primary'}
|
重置
|
||||||
>
|
</Button>
|
||||||
提交
|
</Space>
|
||||||
</Button>
|
)}
|
||||||
<Button
|
|
||||||
onClick={async () => {
|
|
||||||
await form.reset();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
重置
|
|
||||||
</Button>
|
|
||||||
</Space>
|
|
||||||
)}
|
|
||||||
</FormContextProvider>
|
|
||||||
</FormProvider>
|
</FormProvider>
|
||||||
);
|
);
|
||||||
|
return resourceName ? (
|
||||||
|
// @ts-ignore
|
||||||
|
<ResourceContextProvider resourceName={resourceName}>
|
||||||
|
<DisplayFieldsContextProvider>
|
||||||
|
{content}
|
||||||
|
</DisplayFieldsContextProvider>
|
||||||
|
</ResourceContextProvider>
|
||||||
|
) : (
|
||||||
|
content
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export const FormFieldUIDContext = createContext(null);
|
export const FormFieldUIDContext = createContext(null);
|
||||||
@ -126,11 +137,17 @@ Form.Field = observer((props: any) => {
|
|||||||
const { schema } = useDesignable();
|
const { schema } = useDesignable();
|
||||||
const path = getSchemaPath(schema);
|
const path = getSchemaPath(schema);
|
||||||
console.log('getSchemaPath', path);
|
console.log('getSchemaPath', path);
|
||||||
const { collection = {} } = useFormContext();
|
const { addDisplayField } = useDisplayFieldsContext();
|
||||||
|
const { resource = {} } = useResourceContext();
|
||||||
|
useEffect(() => {
|
||||||
|
if (fieldName) {
|
||||||
|
addDisplayField(fieldName);
|
||||||
|
}
|
||||||
|
}, [fieldName]);
|
||||||
if (!fieldName) {
|
if (!fieldName) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const field = collection?.fields?.find((item) => item.name === fieldName);
|
const field = resource?.fields?.find((item) => item.name === fieldName);
|
||||||
if (!field) {
|
if (!field) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -129,3 +129,15 @@ const [SwithDesignableContextProvider, useSwithDesignableContext] = constate(()
|
|||||||
});
|
});
|
||||||
|
|
||||||
export { SwithDesignableContextProvider, useSwithDesignableContext };
|
export { SwithDesignableContextProvider, useSwithDesignableContext };
|
||||||
|
|
||||||
|
const [ResourceContextProvider, useResourceContext] = constate(
|
||||||
|
({ resourceName }) => {
|
||||||
|
// const schema = useFieldSchema();
|
||||||
|
const { data: collections = [], loading, refresh } = useCollectionContext();
|
||||||
|
const resource = collections.find((item) => item.name === resourceName);
|
||||||
|
console.log({ resource });
|
||||||
|
return { resource, refresh };
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export { ResourceContextProvider, useResourceContext };
|
||||||
|
|||||||
@ -105,9 +105,10 @@ Markdown.DesignableBar = observer((props) => {
|
|||||||
key={'update'}
|
key={'update'}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
field.readPretty = false;
|
field.readPretty = false;
|
||||||
|
setVisible(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
修改 Markdown
|
修改文本段
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Divider />
|
<Menu.Divider />
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
|
|||||||
@ -360,6 +360,7 @@ Menu.AddNew = observer((props: any) => {
|
|||||||
className={'nb-menu-add-new'}
|
className={'nb-menu-add-new'}
|
||||||
title={
|
title={
|
||||||
<Dropdown
|
<Dropdown
|
||||||
|
// trigger={['click']}
|
||||||
overlay={
|
overlay={
|
||||||
<AntdMenu
|
<AntdMenu
|
||||||
onClick={async (info) => {
|
onClick={async (info) => {
|
||||||
|
|||||||
@ -17,34 +17,41 @@ const schema: ISchema = {
|
|||||||
name: `table_${uid()}`,
|
name: `table_${uid()}`,
|
||||||
type: 'array',
|
type: 'array',
|
||||||
'x-component': 'Table',
|
'x-component': 'Table',
|
||||||
// default: [
|
default: [
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// { key: uid(), field1: uid(), field2: uid() },
|
{ key: uid(), field1: uid(), field2: uid() },
|
||||||
// ],
|
],
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
rowKey: 'key',
|
rowKey: 'key',
|
||||||
// isRemoteDataSource: true,
|
dragSort: 'sort',
|
||||||
|
showIndex: true,
|
||||||
|
defaultFilter: {},
|
||||||
|
defaultSort: [],
|
||||||
|
pagination: {
|
||||||
|
defaultPageSize: 50,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
properties: {
|
properties: {
|
||||||
[`action_bar_${uid()}`]: {
|
[`action_bar_${uid()}`]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Table.ActionBar',
|
'x-component': 'Table.ActionBar',
|
||||||
|
'x-designable-bar': 'Table.ActionBar.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
action1: {
|
action1: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
name: 'action1',
|
|
||||||
title: '筛选',
|
title: '筛选',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
|
'x-designable-bar': 'Table.Filter.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
popover1: {
|
popover1: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
@ -104,7 +111,7 @@ const schema: ISchema = {
|
|||||||
name: 'action1',
|
name: 'action1',
|
||||||
title: '新增',
|
title: '新增',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-designable-bar': 'Action.DesignableBar',
|
'x-designable-bar': 'Table.Action.DesignableBar',
|
||||||
properties: {
|
properties: {
|
||||||
drawer1: {
|
drawer1: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
@ -135,6 +142,7 @@ const schema: ISchema = {
|
|||||||
type: 'void',
|
type: 'void',
|
||||||
name: 'action1',
|
name: 'action1',
|
||||||
title: '删除',
|
title: '删除',
|
||||||
|
'x-designable-bar': 'Table.Action.SimpleDesignableBar',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
useAction: '{{ Table.useTableDestroyAction }}',
|
||||||
@ -157,175 +165,43 @@ const schema: ISchema = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
// [`column_${uid()}`]: {
|
||||||
|
// type: 'void',
|
||||||
|
// title: '排序',
|
||||||
|
// 'x-component': 'Table.Column',
|
||||||
|
// properties: {
|
||||||
|
// sort: {
|
||||||
|
// type: 'void',
|
||||||
|
// 'x-component': 'Table.SortHandle',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// [`column_${uid()}`]: {
|
||||||
|
// type: 'void',
|
||||||
|
// title: '序号',
|
||||||
|
// 'x-component': 'Table.Column',
|
||||||
|
// properties: {
|
||||||
|
// index: {
|
||||||
|
// type: 'void',
|
||||||
|
// 'x-component': 'Table.Index',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
[`column_${uid()}`]: {
|
[`column_${uid()}`]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '排序',
|
|
||||||
'x-component': 'Table.Column',
|
|
||||||
properties: {
|
|
||||||
sort: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Table.SortHandle',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '序号',
|
|
||||||
'x-component': 'Table.Column',
|
|
||||||
properties: {
|
|
||||||
index: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Table.Index',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '字段1',
|
|
||||||
'x-component': 'Table.Column',
|
'x-component': 'Table.Column',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
// title: 'z1',
|
className: 'nb-table-operation',
|
||||||
},
|
},
|
||||||
'x-designable-bar': 'Table.Column.DesignableBar',
|
|
||||||
properties: {
|
|
||||||
field1: {
|
|
||||||
type: 'string',
|
|
||||||
required: true,
|
|
||||||
'x-read-pretty': true,
|
|
||||||
'x-decorator-props': {
|
|
||||||
feedbackLayout: 'popover',
|
|
||||||
},
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '字段2',
|
|
||||||
'x-component': 'Table.Column',
|
|
||||||
'x-designable-bar': 'Table.Column.DesignableBar',
|
|
||||||
properties: {
|
|
||||||
field2: {
|
|
||||||
type: 'string',
|
|
||||||
// title: '字段2',
|
|
||||||
required: true,
|
|
||||||
'x-read-pretty': true,
|
|
||||||
'x-decorator-props': {
|
|
||||||
feedbackLayout: 'popover',
|
|
||||||
},
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[`column_${uid()}`]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '操作',
|
|
||||||
'x-component': 'Table.Column',
|
|
||||||
properties: {
|
properties: {
|
||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
name: 'action1',
|
|
||||||
title: '查看',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
|
||||||
properties: {
|
|
||||||
drawer1: {
|
|
||||||
type: 'void',
|
|
||||||
title: '查看',
|
|
||||||
'x-component': 'Action.Modal',
|
|
||||||
'x-component-props': {},
|
|
||||||
properties: {
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Tabs',
|
|
||||||
properties: {
|
|
||||||
tab1: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Tabs.TabPane',
|
|
||||||
'x-component-props': {
|
|
||||||
tab: 'Tab1',
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
aaa: {
|
|
||||||
type: 'string',
|
|
||||||
title: 'AAA',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
required: true,
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
tab2: {
|
|
||||||
type: 'void',
|
|
||||||
'x-component': 'Tabs.TabPane',
|
|
||||||
'x-component-props': {
|
|
||||||
tab: 'Tab2',
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
bbb: {
|
|
||||||
type: 'string',
|
|
||||||
title: 'BBB',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
required: true,
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
name: 'action1',
|
|
||||||
title: '修改',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-designable-bar': 'Table.Action.DesignableBar',
|
|
||||||
properties: {
|
|
||||||
drawer1: {
|
|
||||||
type: 'void',
|
|
||||||
title: '编辑表单',
|
|
||||||
"x-decorator": 'Form',
|
|
||||||
'x-decorator-props': {
|
|
||||||
useValues: '{{ Table.useTableRow }}',
|
|
||||||
},
|
|
||||||
'x-component': 'Action.Modal',
|
|
||||||
'x-component-props': {
|
|
||||||
useOkAction: '{{ Table.useTableUpdateAction }}',
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
field1: {
|
|
||||||
type: 'string',
|
|
||||||
title: '字段1',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
field2: {
|
|
||||||
type: 'string',
|
|
||||||
title: '字段2',
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '删除',
|
|
||||||
'x-component': 'Action',
|
|
||||||
'x-component-props': {
|
|
||||||
useAction: '{{ Table.useTableDestroyAction }}',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
[uid()]: {
|
|
||||||
type: 'void',
|
|
||||||
title: '...',
|
|
||||||
'x-component': 'Action.Dropdown',
|
'x-component': 'Action.Dropdown',
|
||||||
|
'x-component-props': {
|
||||||
|
buttonProps: {
|
||||||
|
icon: 'EllipsisOutlined',
|
||||||
|
},
|
||||||
|
},
|
||||||
properties: {
|
properties: {
|
||||||
[uid()]: {
|
[uid()]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
@ -333,6 +209,9 @@ const schema: ISchema = {
|
|||||||
'x-component': 'Menu.Action',
|
'x-component': 'Menu.Action',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
useAction,
|
useAction,
|
||||||
|
style: {
|
||||||
|
minWidth: 150,
|
||||||
|
},
|
||||||
disabled: true,
|
disabled: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -410,7 +289,7 @@ const schema: ISchema = {
|
|||||||
drawer1: {
|
drawer1: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '编辑表单',
|
title: '编辑表单',
|
||||||
"x-decorator": 'Form',
|
'x-decorator': 'Form',
|
||||||
'x-decorator-props': {
|
'x-decorator-props': {
|
||||||
useValues: '{{ Table.useTableRow }}',
|
useValues: '{{ Table.useTableRow }}',
|
||||||
},
|
},
|
||||||
@ -447,6 +326,46 @@ const schema: ISchema = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
[`column_${uid()}`]: {
|
||||||
|
type: 'void',
|
||||||
|
title: '字段1',
|
||||||
|
'x-component': 'Table.Column',
|
||||||
|
'x-component-props': {
|
||||||
|
// title: 'z1',
|
||||||
|
},
|
||||||
|
'x-designable-bar': 'Table.Column.DesignableBar',
|
||||||
|
properties: {
|
||||||
|
field1: {
|
||||||
|
type: 'string',
|
||||||
|
required: true,
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-decorator-props': {
|
||||||
|
feedbackLayout: 'popover',
|
||||||
|
},
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Input',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[`column_${uid()}`]: {
|
||||||
|
type: 'void',
|
||||||
|
title: '字段2',
|
||||||
|
'x-component': 'Table.Column',
|
||||||
|
'x-designable-bar': 'Table.Column.DesignableBar',
|
||||||
|
properties: {
|
||||||
|
field2: {
|
||||||
|
type: 'string',
|
||||||
|
// title: '字段2',
|
||||||
|
required: true,
|
||||||
|
'x-read-pretty': true,
|
||||||
|
'x-decorator-props': {
|
||||||
|
feedbackLayout: 'popover',
|
||||||
|
},
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Input',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -457,7 +376,11 @@ const form = createForm({
|
|||||||
export default observer(() => {
|
export default observer(() => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<SchemaRenderer scope={{ Table, useTableCreateAction }} form={form} schema={schema} />
|
<SchemaRenderer
|
||||||
|
scope={{ Table, useTableCreateAction }}
|
||||||
|
form={form}
|
||||||
|
schema={schema}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -19,24 +19,40 @@ import {
|
|||||||
Table as AntdTable,
|
Table as AntdTable,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
Menu,
|
Menu,
|
||||||
|
Select,
|
||||||
|
Switch,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import { findIndex, get } from 'lodash';
|
import { findIndex, get, set } from 'lodash';
|
||||||
import constate from 'constate';
|
import constate from 'constate';
|
||||||
import useRequest from '@ahooksjs/use-request';
|
import useRequest from '@ahooksjs/use-request';
|
||||||
import { BaseResult } from '@ahooksjs/use-request/lib/types';
|
|
||||||
import { uid, clone } from '@formily/shared';
|
import { uid, clone } from '@formily/shared';
|
||||||
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
import {
|
||||||
|
EllipsisOutlined,
|
||||||
|
MenuOutlined,
|
||||||
|
DragOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
} from '@ant-design/icons';
|
||||||
import {
|
import {
|
||||||
SortableHandle,
|
SortableHandle,
|
||||||
SortableContainer,
|
SortableContainer,
|
||||||
SortableElement,
|
SortableElement,
|
||||||
} from 'react-sortable-hoc';
|
} from 'react-sortable-hoc';
|
||||||
import cls from 'classnames';
|
import cls from 'classnames';
|
||||||
import { getSchemaPath, removeSchema, useDesignable, useSchemaPath, VisibleContext } from '../';
|
import {
|
||||||
|
getSchemaPath,
|
||||||
|
removeSchema,
|
||||||
|
ResourceContextProvider,
|
||||||
|
useCollectionContext,
|
||||||
|
useDesignable,
|
||||||
|
useResourceContext,
|
||||||
|
useSchemaPath,
|
||||||
|
VisibleContext,
|
||||||
|
} from '../';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import { DraggableBlockContext } from '../../components/drag-and-drop';
|
import { DraggableBlockContext } from '../../components/drag-and-drop';
|
||||||
import AddNew from '../add-new';
|
import AddNew from '../add-new';
|
||||||
import { isGridRowOrCol } from '../grid';
|
import { isGridRowOrCol } from '../grid';
|
||||||
|
import { options } from '../database-field/interfaces';
|
||||||
|
|
||||||
interface TableRowProps {
|
interface TableRowProps {
|
||||||
index: number;
|
index: number;
|
||||||
@ -116,7 +132,7 @@ function useTableActionBars() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function useTableColumns(props?: any) {
|
function useTableColumns(props?: any) {
|
||||||
const { schema } = useDesignable();
|
const { schema, designable } = useDesignable();
|
||||||
// const schema = useFieldSchema();
|
// const schema = useFieldSchema();
|
||||||
const { dataSource } = props || {};
|
const { dataSource } = props || {};
|
||||||
|
|
||||||
@ -129,8 +145,9 @@ function useTableColumns(props?: any) {
|
|||||||
}, []);
|
}, []);
|
||||||
}
|
}
|
||||||
|
|
||||||
return findColumns(schema).map((item) => {
|
const columns = findColumns(schema).map((item) => {
|
||||||
const columnProps = item['x-component-props'] || {};
|
const columnProps = item['x-component-props'] || {};
|
||||||
|
console.log(item);
|
||||||
return {
|
return {
|
||||||
title: <RecursionField name={item.name} schema={item} onlyRenderSelf />,
|
title: <RecursionField name={item.name} schema={item} onlyRenderSelf />,
|
||||||
dataIndex: item.name,
|
dataIndex: item.name,
|
||||||
@ -150,6 +167,83 @@ function useTableColumns(props?: any) {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// columns.unshift({
|
||||||
|
// title: '',
|
||||||
|
// className: 'nb-table-operation',
|
||||||
|
// dataIndex: 'operation',
|
||||||
|
// render(value, record, recordIndex) {
|
||||||
|
// const index = dataSource.indexOf(record);
|
||||||
|
// return (
|
||||||
|
// <TableRowContext.Provider
|
||||||
|
// value={{
|
||||||
|
// index: index,
|
||||||
|
// data: record,
|
||||||
|
// }}
|
||||||
|
// >
|
||||||
|
// <Table.Operation />
|
||||||
|
// </TableRowContext.Provider>
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
|
||||||
|
designable &&
|
||||||
|
columns.push({
|
||||||
|
title: <AddColumn />,
|
||||||
|
dataIndex: 'addnew',
|
||||||
|
});
|
||||||
|
|
||||||
|
return columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AddColumn() {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
const { resource = {}, refresh } = useResourceContext();
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
trigger={['click']}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={setVisible}
|
||||||
|
overlay={
|
||||||
|
<Menu>
|
||||||
|
<Menu.ItemGroup title={'要展示的字段'}>
|
||||||
|
{resource?.fields?.map((field) => (
|
||||||
|
<Menu.Item style={{ minWidth: 150 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{field.uiSchema.title}</span>
|
||||||
|
<Switch size={'small'} defaultChecked />
|
||||||
|
</div>
|
||||||
|
</Menu.Item>
|
||||||
|
))}
|
||||||
|
</Menu.ItemGroup>
|
||||||
|
<Menu.Divider />
|
||||||
|
<Menu.SubMenu title={'新增字段'}>
|
||||||
|
{options.map((option) => (
|
||||||
|
<Menu.ItemGroup title={option.label}>
|
||||||
|
{option.children.map((item) => (
|
||||||
|
<Menu.Item
|
||||||
|
style={{ minWidth: 150 }}
|
||||||
|
key={item.name}
|
||||||
|
onClick={async () => {}}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</Menu.Item>
|
||||||
|
))}
|
||||||
|
</Menu.ItemGroup>
|
||||||
|
))}
|
||||||
|
</Menu.SubMenu>
|
||||||
|
</Menu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button size={'small'} type={'dashed'} icon={<PlusOutlined />}></Button>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTableRow() {
|
export function useTableRow() {
|
||||||
@ -200,7 +294,7 @@ export function useTableDestroyAction() {
|
|||||||
|
|
||||||
export function useTableFilterAction() {
|
export function useTableFilterAction() {
|
||||||
const { field, refresh, params } = useTableContext();
|
const { field, refresh, params } = useTableContext();
|
||||||
const [,setVisible] = useContext(VisibleContext);
|
const [, setVisible] = useContext(VisibleContext);
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
return {
|
return {
|
||||||
async run() {
|
async run() {
|
||||||
@ -212,7 +306,7 @@ export function useTableFilterAction() {
|
|||||||
|
|
||||||
export function useTableCreateAction() {
|
export function useTableCreateAction() {
|
||||||
const { field, run: exec, params } = useTableContext();
|
const { field, run: exec, params } = useTableContext();
|
||||||
const [,setVisible] = useContext(VisibleContext);
|
const [, setVisible] = useContext(VisibleContext);
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
return {
|
return {
|
||||||
async run() {
|
async run() {
|
||||||
@ -229,7 +323,7 @@ export function useTableCreateAction() {
|
|||||||
|
|
||||||
export function useTableUpdateAction() {
|
export function useTableUpdateAction() {
|
||||||
const { field, refresh, params } = useTableContext();
|
const { field, refresh, params } = useTableContext();
|
||||||
const [,setVisible] = useContext(VisibleContext);
|
const [, setVisible] = useContext(VisibleContext);
|
||||||
const ctx = useContext(TableRowContext);
|
const ctx = useContext(TableRowContext);
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
return {
|
return {
|
||||||
@ -245,8 +339,10 @@ const [TableContextProvider, useTableContext] = constate(() => {
|
|||||||
const field = useField<Formily.Core.Models.ArrayField>();
|
const field = useField<Formily.Core.Models.ArrayField>();
|
||||||
const schema = useFieldSchema();
|
const schema = useFieldSchema();
|
||||||
const defaultSelectedRowKeys = useContext(SelectedRowKeysContext);
|
const defaultSelectedRowKeys = useContext(SelectedRowKeysContext);
|
||||||
const [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelectedRowKeys || []);
|
const [selectedRowKeys, setSelectedRowKeys] = useState(
|
||||||
console.log({ defaultSelectedRowKeys })
|
defaultSelectedRowKeys || [],
|
||||||
|
);
|
||||||
|
console.log({ defaultSelectedRowKeys });
|
||||||
const pagination = usePaginationProps();
|
const pagination = usePaginationProps();
|
||||||
const response = useRequest<{
|
const response = useRequest<{
|
||||||
list: any[];
|
list: any[];
|
||||||
@ -293,8 +389,9 @@ export { TableContextProvider, useTableContext };
|
|||||||
export const SelectedRowKeysContext = createContext([]);
|
export const SelectedRowKeysContext = createContext([]);
|
||||||
|
|
||||||
const TableContainer = observer((props) => {
|
const TableContainer = observer((props) => {
|
||||||
|
const { schema } = useDesignable();
|
||||||
const field = useField<Formily.Core.Models.ArrayField>();
|
const field = useField<Formily.Core.Models.ArrayField>();
|
||||||
const schema = useFieldSchema();
|
// const schema = useFieldSchema();
|
||||||
const actionBars = useTableActionBars();
|
const actionBars = useTableActionBars();
|
||||||
const { loading, data, refresh, selectedRowKeys, setSelectedRowKeys } =
|
const { loading, data, refresh, selectedRowKeys, setSelectedRowKeys } =
|
||||||
useTableContext();
|
useTableContext();
|
||||||
@ -316,6 +413,8 @@ const TableContainer = observer((props) => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const dragSort = schema?.['x-component-props']?.['dragSort'];
|
||||||
|
const showIndex = schema?.['x-component-props']?.['showIndex'];
|
||||||
return (
|
return (
|
||||||
<div ref={ref} className={'nb-table'}>
|
<div ref={ref} className={'nb-table'}>
|
||||||
{actionBars.top.map((actionBarSchema) => {
|
{actionBars.top.map((actionBarSchema) => {
|
||||||
@ -340,6 +439,26 @@ const TableContainer = observer((props) => {
|
|||||||
rowSelection={{
|
rowSelection={{
|
||||||
type: 'checkbox',
|
type: 'checkbox',
|
||||||
selectedRowKeys,
|
selectedRowKeys,
|
||||||
|
renderCell: (checked, record, _, originNode) => {
|
||||||
|
const index = dataSource.indexOf(record);
|
||||||
|
return (
|
||||||
|
<TableRowContext.Provider
|
||||||
|
value={{
|
||||||
|
index: index,
|
||||||
|
data: record,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cls('nb-table-selection', { dragSort, showIndex })}
|
||||||
|
>
|
||||||
|
{dragSort && <Table.SortHandle />}
|
||||||
|
{showIndex && <Table.Index />}
|
||||||
|
{originNode}
|
||||||
|
{/* <Table.Operation /> */}
|
||||||
|
</div>
|
||||||
|
</TableRowContext.Provider>
|
||||||
|
);
|
||||||
|
},
|
||||||
onChange: (keys) => {
|
onChange: (keys) => {
|
||||||
console.log(keys);
|
console.log(keys);
|
||||||
setSelectedRowKeys(keys);
|
setSelectedRowKeys(keys);
|
||||||
@ -384,13 +503,13 @@ const TableContainer = observer((props) => {
|
|||||||
if (!defaultAction) {
|
if (!defaultAction) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const el = (e.target as HTMLElement);
|
const el = e.target as HTMLElement;
|
||||||
if (
|
if (!el.classList.contains('ant-table-cell')) {
|
||||||
!el.classList.contains('ant-table-cell')
|
|
||||||
) {
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const btn = el.parentElement.querySelector<HTMLElement>(`.name-${defaultAction.name}`);
|
const btn = el.parentElement.querySelector<HTMLElement>(
|
||||||
|
`.name-${defaultAction.name}`,
|
||||||
|
);
|
||||||
btn && btn.click();
|
btn && btn.click();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -415,8 +534,16 @@ const TableContainer = observer((props) => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
export const Table: any = observer((props) => {
|
export const Table: any = observer((props: any) => {
|
||||||
return (
|
const { resourceName } = props;
|
||||||
|
return resourceName ? (
|
||||||
|
// @ts-ignore
|
||||||
|
<ResourceContextProvider resourceName={resourceName}>
|
||||||
|
<TableContextProvider>
|
||||||
|
<TableContainer />
|
||||||
|
</TableContextProvider>
|
||||||
|
</ResourceContextProvider>
|
||||||
|
) : (
|
||||||
<TableContextProvider>
|
<TableContextProvider>
|
||||||
<TableContainer />
|
<TableContainer />
|
||||||
</TableContextProvider>
|
</TableContextProvider>
|
||||||
@ -477,41 +604,53 @@ Table.Column.DesignableBar = () => {
|
|||||||
}}
|
}}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item onClick={(e) => {
|
<Menu.Item
|
||||||
const title = uid();
|
onClick={(e) => {
|
||||||
field.title = title;
|
const title = uid();
|
||||||
schema.title = title;
|
field.title = title;
|
||||||
setVisible(false);
|
schema.title = title;
|
||||||
}}>点击修改按钮文案</Menu.Item>
|
setVisible(false);
|
||||||
<Menu.Item onClick={() => {
|
}}
|
||||||
remove();
|
>
|
||||||
console.log('Table.Column.DesignableBar', { schema });
|
点击修改按钮文案
|
||||||
}}>删除列</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item onClick={() => {
|
<Menu.Item
|
||||||
const name = uid();
|
onClick={() => {
|
||||||
insertAfter({
|
remove();
|
||||||
name: `column_${name}`,
|
console.log('Table.Column.DesignableBar', { schema });
|
||||||
type: 'void',
|
}}
|
||||||
title: `字段 ${name}`,
|
>
|
||||||
'x-component': 'Table.Column',
|
删除列
|
||||||
'x-component-props': {
|
</Menu.Item>
|
||||||
// title: 'z1',
|
<Menu.Item
|
||||||
},
|
onClick={() => {
|
||||||
'x-designable-bar': 'Table.Column.DesignableBar',
|
const name = uid();
|
||||||
properties: {
|
insertAfter({
|
||||||
[name]: {
|
name: `column_${name}`,
|
||||||
type: 'string',
|
type: 'void',
|
||||||
required: true,
|
title: `字段 ${name}`,
|
||||||
// 'x-read-pretty': true,
|
'x-component': 'Table.Column',
|
||||||
'x-decorator-props': {
|
'x-component-props': {
|
||||||
feedbackLayout: 'popover',
|
// title: 'z1',
|
||||||
},
|
|
||||||
'x-decorator': 'FormItem',
|
|
||||||
'x-component': 'Input',
|
|
||||||
},
|
},
|
||||||
},
|
'x-designable-bar': 'Table.Column.DesignableBar',
|
||||||
})
|
properties: {
|
||||||
}}>插入列</Menu.Item>
|
[name]: {
|
||||||
|
type: 'string',
|
||||||
|
required: true,
|
||||||
|
// 'x-read-pretty': true,
|
||||||
|
'x-decorator-props': {
|
||||||
|
feedbackLayout: 'popover',
|
||||||
|
},
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Input',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
插入列
|
||||||
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -522,10 +661,61 @@ Table.Column.DesignableBar = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Table.ActionBar = observer((props) => {
|
function AddActionButton() {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
return (
|
return (
|
||||||
<div className={'action-bar'}>
|
<Dropdown
|
||||||
<Space>{props.children}</Space>
|
trigger={['click']}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={setVisible}
|
||||||
|
overlay={
|
||||||
|
<Menu>
|
||||||
|
<Menu.ItemGroup title={'要展示的操作'}>
|
||||||
|
{[
|
||||||
|
{ title: '筛选', key: 'filter' },
|
||||||
|
{ title: '导出', key: 'export' },
|
||||||
|
{ title: '新增', key: 'create' },
|
||||||
|
{ title: '删除', key: 'destroy' },
|
||||||
|
].map((item) => (
|
||||||
|
<Menu.Item style={{ minWidth: 150 }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{item.title}</span>
|
||||||
|
<Switch size={'small'} defaultChecked />
|
||||||
|
</div>
|
||||||
|
</Menu.Item>
|
||||||
|
))}
|
||||||
|
</Menu.ItemGroup>
|
||||||
|
<Menu.Divider />
|
||||||
|
<Menu.SubMenu title={'自定义'}>
|
||||||
|
<Menu.Item style={{ minWidth: 120 }}>函数操作</Menu.Item>
|
||||||
|
<Menu.Item>弹窗表单</Menu.Item>
|
||||||
|
<Menu.Item>复杂弹窗</Menu.Item>
|
||||||
|
</Menu.SubMenu>
|
||||||
|
</Menu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button type={'dashed'} icon={<PlusOutlined />}></Button>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Table.ActionBar = observer((props: any) => {
|
||||||
|
const { align = 'top' } = props;
|
||||||
|
const { schema, designable } = useDesignable();
|
||||||
|
const designableBar = schema['x-designable-bar'];
|
||||||
|
console.log('designableBar', designableBar);
|
||||||
|
return (
|
||||||
|
<div className={cls('nb-action-bar', `align-${align}`)}>
|
||||||
|
<Space>
|
||||||
|
{props.children}
|
||||||
|
{designable && designableBar && <AddActionButton />}
|
||||||
|
</Space>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@ -533,19 +723,17 @@ Table.ActionBar = observer((props) => {
|
|||||||
Table.Pagination = observer((props) => {
|
Table.Pagination = observer((props) => {
|
||||||
const { data, params, run } = useTableContext();
|
const { data, params, run } = useTableContext();
|
||||||
return (
|
return (
|
||||||
data?.total > params?.pageSize && (
|
<Pagination
|
||||||
<Pagination
|
{...props}
|
||||||
{...props}
|
defaultCurrent={1}
|
||||||
defaultCurrent={1}
|
defaultPageSize={5}
|
||||||
defaultPageSize={5}
|
current={params?.page}
|
||||||
current={params?.page}
|
pageSize={params?.pageSize}
|
||||||
pageSize={params?.pageSize}
|
total={data?.total}
|
||||||
total={data?.total}
|
onChange={(page, pageSize) => {
|
||||||
onChange={(page, pageSize) => {
|
run({ page, pageSize });
|
||||||
run({ page, pageSize });
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -560,17 +748,16 @@ const SortHandle = SortableHandle((props: any) => {
|
|||||||
}) as any;
|
}) as any;
|
||||||
|
|
||||||
Table.SortHandle = observer((props) => {
|
Table.SortHandle = observer((props) => {
|
||||||
const field = useField<Formily.Core.Models.Field>();
|
|
||||||
console.log('SortHandle', field.value);
|
|
||||||
return <SortHandle {...props} />;
|
return <SortHandle {...props} />;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Table.Operation = observer((props) => {
|
||||||
|
return <EllipsisOutlined />;
|
||||||
|
});
|
||||||
|
|
||||||
Table.Index = observer((props) => {
|
Table.Index = observer((props) => {
|
||||||
const index = useTableIndex();
|
const index = useTableIndex();
|
||||||
const schema = useFieldSchema();
|
return <span className={'nb-table-index'}>{index + 1}</span>;
|
||||||
const field = useField<Formily.Core.Models.Field>();
|
|
||||||
const path = useSchemaPath();
|
|
||||||
return <div>{index + 1}</div>;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
Table.Addition = observer((props: any) => {
|
Table.Addition = observer((props: any) => {
|
||||||
@ -599,7 +786,7 @@ Table.Addition = observer((props: any) => {
|
|||||||
|
|
||||||
Table.Action = () => null;
|
Table.Action = () => null;
|
||||||
|
|
||||||
Table.Action.DesignableBar = () => {
|
Table.Action.SimpleDesignableBar = () => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const path = useSchemaPath();
|
const path = useSchemaPath();
|
||||||
const { schema, remove, refresh, insertAfter } = useDesignable();
|
const { schema, remove, refresh, insertAfter } = useDesignable();
|
||||||
@ -621,10 +808,125 @@ Table.Action.DesignableBar = () => {
|
|||||||
}}
|
}}
|
||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item onClick={(e) => {
|
<Menu.Item
|
||||||
schema.title = uid();
|
onClick={(e) => {
|
||||||
refresh();
|
schema.title = uid();
|
||||||
}}>点击修改按钮文案</Menu.Item>
|
refresh();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
修改名称和图标
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item>放置在右侧</Menu.Item>
|
||||||
|
<Menu.Divider />
|
||||||
|
<Menu.Item>删除</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<MenuOutlined />
|
||||||
|
</Dropdown>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Table.Filter = observer((props) => {
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
|
||||||
|
Table.Filter.DesignableBar = () => {
|
||||||
|
const field = useField();
|
||||||
|
const path = useSchemaPath();
|
||||||
|
const { schema, remove, refresh, insertAfter } = useDesignable();
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
// console.log('Table.Action.DesignableBar', path, field.address.entire, { schema, field });
|
||||||
|
return (
|
||||||
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
|
<span
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
className={cls('designable-bar-actions', { active: visible })}
|
||||||
|
>
|
||||||
|
<Dropdown
|
||||||
|
trigger={['click']}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={(visible) => {
|
||||||
|
setVisible(visible);
|
||||||
|
}}
|
||||||
|
overlay={
|
||||||
|
<Menu>
|
||||||
|
<Menu.Item
|
||||||
|
onClick={(e) => {
|
||||||
|
schema.title = uid();
|
||||||
|
refresh();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
修改名称和图标
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item>自定义筛选字段</Menu.Item>
|
||||||
|
<Menu.Item>放置在右侧</Menu.Item>
|
||||||
|
<Menu.Divider />
|
||||||
|
<Menu.Item>删除</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<MenuOutlined />
|
||||||
|
</Dropdown>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Table.Action.DesignableBar = () => {
|
||||||
|
const field = useField();
|
||||||
|
const path = useSchemaPath();
|
||||||
|
const { schema, remove, refresh, insertAfter } = useDesignable();
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
const isPopup = Object.keys(schema.properties || {}).length > 0;
|
||||||
|
const inActionBar = schema.parent['x-component'] === 'Table.ActionBar';
|
||||||
|
// console.log('Table.Action.DesignableBar', path, field.address.entire, { schema, field });
|
||||||
|
return (
|
||||||
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
|
<span
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
className={cls('designable-bar-actions', { active: visible })}
|
||||||
|
>
|
||||||
|
<Dropdown
|
||||||
|
trigger={['click']}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={(visible) => {
|
||||||
|
setVisible(visible);
|
||||||
|
}}
|
||||||
|
overlay={
|
||||||
|
<Menu>
|
||||||
|
<Menu.Item
|
||||||
|
onClick={(e) => {
|
||||||
|
schema.title = uid();
|
||||||
|
refresh();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
修改名称和图标
|
||||||
|
</Menu.Item>
|
||||||
|
{isPopup && (
|
||||||
|
<Menu.Item>
|
||||||
|
在{' '}
|
||||||
|
<Select
|
||||||
|
bordered={false}
|
||||||
|
size={'small'}
|
||||||
|
defaultValue={'modal'}
|
||||||
|
>
|
||||||
|
<Select.Option value={'modal'}>对话框</Select.Option>
|
||||||
|
<Select.Option value={'drawer'}>抽屉</Select.Option>
|
||||||
|
<Select.Option value={'window'}>浏览器窗口</Select.Option>
|
||||||
|
</Select>{' '}
|
||||||
|
内打开
|
||||||
|
</Menu.Item>
|
||||||
|
)}
|
||||||
|
{inActionBar && <Menu.Item>放置在右侧</Menu.Item>}
|
||||||
|
<Menu.Divider />
|
||||||
|
<Menu.Item>删除</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
@ -643,6 +945,8 @@ Table.DesignableBar = observer((props) => {
|
|||||||
if (!designable) {
|
if (!designable) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
const defaultPageSize =
|
||||||
|
schema['x-component-props']?.['pagination']?.['defaultPageSize'] || 20;
|
||||||
return (
|
return (
|
||||||
<div className={cls('designable-bar', { active: visible })}>
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
<span
|
<span
|
||||||
@ -663,12 +967,51 @@ Table.DesignableBar = observer((props) => {
|
|||||||
overlay={
|
overlay={
|
||||||
<Menu>
|
<Menu>
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
key={'update'}
|
key={'showIndex'}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
field.readPretty = false;
|
const bool = !field.componentProps.showIndex;
|
||||||
|
schema['x-component-props']['showIndex'] = bool;
|
||||||
|
field.componentProps.showIndex = bool;
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
编辑Markdown
|
{field.componentProps.showIndex ? '隐藏序号' : '显示序号'}
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item
|
||||||
|
key={'dragSort'}
|
||||||
|
onClick={() => {
|
||||||
|
const dragSort = field.componentProps.dragSort
|
||||||
|
? false
|
||||||
|
: 'sort';
|
||||||
|
schema['x-component-props']['dragSort'] = dragSort;
|
||||||
|
field.componentProps.dragSort = dragSort;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{field.componentProps.dragSort
|
||||||
|
? '禁用拖拽排序'
|
||||||
|
: '启用拖拽排序'}
|
||||||
|
</Menu.Item>
|
||||||
|
{!field.componentProps.dragSort && (
|
||||||
|
<Menu.Item key={'defaultSort'}>默认排序</Menu.Item>
|
||||||
|
)}
|
||||||
|
<Menu.Item key={'defaultFilter'}>筛选范围</Menu.Item>
|
||||||
|
<Menu.Item key={'defaultPageSize'}>
|
||||||
|
每页默认显示{' '}
|
||||||
|
<Select
|
||||||
|
bordered={false}
|
||||||
|
size={'small'}
|
||||||
|
onChange={(value) => {
|
||||||
|
const componentProps = schema['x-component-props'] || {};
|
||||||
|
set(componentProps, 'pagination.defaultPageSize', value);
|
||||||
|
schema['x-component-props'] = componentProps;
|
||||||
|
refresh();
|
||||||
|
}}
|
||||||
|
defaultValue={defaultPageSize}
|
||||||
|
>
|
||||||
|
<Select.Option value={20}>20</Select.Option>
|
||||||
|
<Select.Option value={50}>50</Select.Option>
|
||||||
|
<Select.Option value={100}>100</Select.Option>
|
||||||
|
</Select>{' '}
|
||||||
|
条
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Divider />
|
<Menu.Divider />
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
|
|||||||
@ -53,8 +53,167 @@
|
|||||||
}
|
}
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
color: #00000040;
|
color: #00000040;
|
||||||
background-color:#fff;
|
background-color: #fff;
|
||||||
cursor:not-allowed;
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nb-action-bar {
|
||||||
|
&.align-top {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
&.align-bottom {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th.nb-table-operation,
|
||||||
|
td.nb-table-operation {
|
||||||
|
width: 24px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 !important;
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td.nb-table-operation {
|
||||||
|
.ant-btn {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
padding: 6px;
|
||||||
|
height: auto;
|
||||||
|
line-height: 16px;
|
||||||
|
background: none;
|
||||||
|
&:hover {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nb-table-selection {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
&.dragSort {
|
||||||
|
.nb-table-index {
|
||||||
|
padding-left: 20px;
|
||||||
|
min-width: 38px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nb-table-sort-handle {
|
||||||
|
margin-right: 8px;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
&.showIndex {
|
||||||
|
.ant-checkbox-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
// right: 8px;
|
||||||
|
}
|
||||||
|
.nb-table-sort-handle {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: baseline;
|
||||||
|
position: absolute;
|
||||||
|
// left: 8px;
|
||||||
|
cursor: grab;
|
||||||
|
margin-right: 8px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-checkbox-wrapper {
|
||||||
|
// position: absolute;
|
||||||
|
// right: 0;
|
||||||
|
// display: none;
|
||||||
|
// right: 8px;
|
||||||
|
}
|
||||||
|
.nb-table-index {
|
||||||
|
// display: inline-flex;
|
||||||
|
// align-items: baseline;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
text-align: center;
|
||||||
|
// padding-left: 20px;
|
||||||
|
width: 100%;
|
||||||
|
// min-width: 38px;
|
||||||
|
// position: absolute;
|
||||||
|
// right: 8px;
|
||||||
|
// height: 16px;
|
||||||
|
// line-height: 16px;
|
||||||
|
// text-align: center;
|
||||||
|
// background-color: #fff;
|
||||||
|
// min-width: 16px;
|
||||||
|
// width: 100%;
|
||||||
|
// z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-selection-column {
|
||||||
|
text-align: right !important;
|
||||||
|
&:hover {
|
||||||
|
.nb-table-index {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.ant-checkbox-wrapper {
|
||||||
|
z-index: 4;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-row-selected {
|
||||||
|
.nb-table-index {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.ant-checkbox-wrapper {
|
||||||
|
z-index: 4;
|
||||||
|
display: inline-flex !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-cell {
|
||||||
|
.ant-formily-item-feedback-layout-popover {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.ant-formily-item-control .ant-formily-item-control-content .ant-formily-item-control-content-component {
|
||||||
|
min-height: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.ant-dropdown-menu-item {
|
||||||
|
&:hover {
|
||||||
|
.designable-bar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.designable-bar {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
border: 2px solid #1890ff;
|
||||||
|
&.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.designable-bar-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
line-height: 1rem;
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0 3px;
|
||||||
|
.anticon {
|
||||||
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user