();
- const { fieldNames = { label: 'label' }, ...others } = props;
+ const { fieldNames = { label: 'id' }, ...others } = props;
const value = field.value || field.initialValue;
- const schema = useFieldSchema();
+ const { schema } = useDesignable();
console.log({ fieldNames, field, value });
if (!value) {
return null;
}
const values = toArr(value);
+ const s = schema.reduceProperties((buf, current) => {
+ if (current['x-component'] === 'Select.OptionTag') {
+ return current;
+ }
+ return buf;
+ }, null);
return (
- {values.map((data, index) => {
- return (
-
- {data[fieldNames.label]}
- {/* {
- return s['x-component'] === 'Select.OptionTag';
- }}
- /> */}
-
- );
- })}
+
+
+ {values.map((data, index) => {
+ return (
+
+ {s ? (
+
+ ) : (
+ data[fieldNames.label]
+ )}
+
+ );
+ })}
+
+
);
}),
),
);
+Select.Drawer.useResource = ({ onSuccess }) => {
+ const { collection } = useCollectionContext();
+ const ctx = useContext(OptionTagContext);
+ const resource = Resource.make({
+ resourceName: collection?.name,
+ resourceKey: ctx.data.id,
+ });
+ console.log('OptionTagContext', ctx.data.id)
+ const { schema } = useDesignable();
+ const fieldFields = (schema: Schema) => {
+ const names = [];
+ schema.reduceProperties((buf, current) => {
+ if (current['x-component'] === 'Form.Field') {
+ const fieldName = current['x-component-props']?.['fieldName'];
+ if (fieldName) {
+ buf.push(fieldName);
+ }
+ } else {
+ const fieldNames = fieldFields(current);
+ buf.push(...fieldNames);
+ }
+ return buf;
+ }, names);
+ return names;
+ };
+ const [visible] = useContext(VisibleContext);
+ const service = useRequest(
+ (params?: any) => {
+ console.log('Table.useResource', params);
+ return resource.get({ ...params, appends: fieldFields(schema) });
+ },
+ {
+ formatResult: (result) => result?.data,
+ onSuccess,
+ manual: true,
+ },
+ );
+ useEffect(() => {
+ if (visible) {
+ service.run();
+ }
+ }, [visible]);
+ return { resource, service, initialValues: service.data, ...service };
+}
+
Select.Options = observer((props) => {
return <>{props.children};
});
+Select.Options.Drawer = Action.Drawer;
+
export function useSelect() {
const { onChange } = useContext(SelectContext);
return {
@@ -418,12 +499,10 @@ Select.OptionTag = observer((props) => {
const [visible, setVisible] = useState(false);
const { data, fieldNames } = useContext(OptionTagContext);
return (
- <>
+
setVisible(true)}>{data[fieldNames.label]}
- setVisible(false)}>
- {props.children}
-
-
+ {props.children}
+
);
});
diff --git a/packages/client/src/schemas/table/demos/demo3.tsx b/packages/client/src/schemas/table/demos/demo3.tsx
index 45482a681b..7ba4862374 100644
--- a/packages/client/src/schemas/table/demos/demo3.tsx
+++ b/packages/client/src/schemas/table/demos/demo3.tsx
@@ -3,39 +3,29 @@ import { range } from 'lodash';
import { ISchema } from '@formily/react';
import { SchemaRenderer } from '../..';
import { uid } from '@formily/shared';
+import {
+ CollectionsProvider,
+ DesignableSwitchProvider,
+} from '@nocobase/client/src/constate';
+import { RequestProvider } from '@nocobase/client/src/demos/RequestProvider';
-const loadDataSource = (params?: any): Promise => {
- const { page, pageSize = 50 } = params || {};
- console.log({ pageSize });
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve({
- list: range(50 || pageSize).map(() => {
- return { id: uid(), title: uid() };
- }),
- total: 50,
- });
- }, 1000);
- });
-};
-
-const schema: ISchema = {
+const schema = {
+ name: 'table1',
type: 'array',
- name: 'arr',
+ 'x-designable-bar': 'Table.DesignableBar',
+ 'x-decorator': 'CardItem',
'x-component': 'Table',
+ default: [],
'x-component-props': {
+ collectionName: 'users',
+ rowKey: 'id',
dragSort: true,
showIndex: true,
- refreshRequestOnChange: false,
- clientSidePagination: true,
- dataRequest: '{{ loadDataSource }}',
+ refreshRequestOnChange: true,
pagination: {
- pageSize: 2,
+ pageSize: 10,
},
},
- // default: range(50).map(() => {
- // return { id: uid(), title: uid() };
- // }),
properties: {
[uid()]: {
type: 'void',
@@ -44,6 +34,12 @@ const schema: ISchema = {
properties: {
[uid()]: {
type: 'void',
+ title: '筛选',
+ 'x-decorator': 'AddNew.Displayed',
+ 'x-decorator-props': {
+ displayName: 'filter',
+ },
+ 'x-align': 'left',
'x-component': 'Table.Filter',
'x-designable-bar': 'Table.Filter.DesignableBar',
'x-component-props': {
@@ -53,15 +49,44 @@ const schema: ISchema = {
[uid()]: {
type: 'void',
name: 'action1',
- title: '添加',
+ title: '删除',
+ 'x-align': 'right',
+ 'x-decorator': 'AddNew.Displayed',
+ 'x-decorator-props': {
+ displayName: 'destroy',
+ },
'x-component': 'Action',
'x-designable-bar': 'Table.Action.DesignableBar',
+ 'x-component-props': {
+ icon: 'DeleteOutlined',
+ confirm: {
+ title: '删除数据',
+ content: '删除后无法恢复，确定要删除吗？',
+ },
+ useAction: '{{ Table.useTableDestroyAction }}',
+ },
+ },
+ [uid()]: {
+ type: 'void',
+ name: 'action1',
+ title: '添加',
+ 'x-align': 'right',
+ 'x-decorator': 'AddNew.Displayed',
+ 'x-decorator-props': {
+ displayName: 'create',
+ },
+ 'x-component': 'Action',
+ 'x-component-props': {
+ icon: 'PlusOutlined',
+ type: 'primary',
+ },
+ 'x-designable-bar': 'Table.Action.DesignableBar',
properties: {
modal: {
type: 'void',
title: '添加数据',
'x-decorator': 'Form',
- 'x-component': 'Action.Modal',
+ 'x-component': 'Action.Drawer',
'x-component-props': {
useOkAction: '{{ Table.useTableCreateAction }}',
},
@@ -77,76 +102,55 @@ const schema: ISchema = {
},
},
},
- [uid()]: {
- type: 'void',
- name: 'action1',
- title: '删除',
- 'x-component': 'Action',
- 'x-designable-bar': 'Table.Action.DesignableBar',
- 'x-component-props': {
- useAction: '{{ Table.useTableDestroyAction }}',
- },
- },
},
},
- column2: {
+ [uid()]: {
type: 'void',
title: '操作',
'x-component': 'Table.Column',
- 'x-component-props': {
- className: 'nb-table-operation',
- },
+ 'x-component-props': {},
+ 'x-designable-bar': 'Table.Operation.DesignableBar',
properties: {
- action1: {
+ [uid()]: {
type: 'void',
- name: 'dropdown1',
- 'x-component': 'Action.Dropdown',
- 'x-designable-bar': 'Action.DesignableBar',
+ 'x-component': 'Action.Group',
'x-component-props': {
- buttonProps: {
- icon: 'EllipsisOutlined',
- },
+ type: 'link',
},
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-component': 'Action',
+ 'x-component-props': {
+ type: 'link',
+ },
'x-designable-bar': 'Table.Action.DesignableBar',
+ 'x-action-type': 'view',
properties: {
[uid()]: {
type: 'void',
- title: '查看',
- 'x-component': 'Action.Modal',
+ title: '查看数据',
+ 'x-component': 'Action.Drawer',
'x-component-props': {
bodyStyle: {
background: '#f0f2f5',
- paddingTop: 0,
+ // paddingTop: 0,
},
},
properties: {
[uid()]: {
type: 'void',
'x-component': 'Tabs',
+ 'x-designable-bar': 'Tabs.DesignableBar',
properties: {
[uid()]: {
type: 'void',
+ title: '详情',
+ 'x-designable-bar': 'Tabs.TabPane.DesignableBar',
'x-component': 'Tabs.TabPane',
- 'x-component-props': {
- tab: 'Tab1',
- },
+ 'x-component-props': {},
properties: {
[uid()]: {
type: 'void',
@@ -166,17 +170,22 @@ const schema: ISchema = {
[uid()]: {
type: 'void',
title: '编辑',
- 'x-component': 'Menu.Action',
+ 'x-component': 'Action',
+ 'x-component-props': {
+ type: 'link',
+ },
'x-designable-bar': 'Table.Action.DesignableBar',
+ 'x-action-type': 'update',
properties: {
[uid()]: {
type: 'void',
title: '编辑数据',
'x-decorator': 'Form',
'x-decorator-props': {
+ useResource: '{{ Table.useResource }}',
useValues: '{{ Table.useTableRowRecord }}',
},
- 'x-component': 'Action.Modal',
+ 'x-component': 'Action.Drawer',
'x-component-props': {
useOkAction: '{{ Table.useTableUpdateAction }}',
},
@@ -187,75 +196,39 @@ const schema: ISchema = {
'x-component-props': {
addNewComponent: 'AddNew.FormItem',
},
- properties: {
- [uid()]: {
- type: 'void',
- 'x-component': 'Grid.Row',
- properties: {
- [uid()]: {
- type: 'void',
- 'x-component': 'Grid.Col',
- properties: {
- title: {
- title: '标题',
- type: 'string',
- 'x-component': 'Input',
- 'x-decorator': 'FormItem',
- },
- },
- },
- },
- },
- },
},
},
},
},
},
- [uid()]: {
- type: 'void',
- title: '删除',
- 'x-component': 'Menu.Action',
- 'x-component-props': {
- useAction: '{{ Table.useTableDestroyAction }}',
- },
- },
+ // [uid()]: {
+ // type: 'void',
+ // title: '删除',
+ // 'x-component': 'Action',
+ // 'x-designable-bar': 'Table.Action.DesignableBar',
+ // 'x-action-type': 'destroy',
+ // 'x-component-props': {
+ // type: 'link',
+ // useAction: '{{ Table.useTableDestroyAction }}',
+ // },
+ // },
},
},
},
},
- column0: {
- type: 'void',
- title: 'ID',
- 'x-component': 'Table.Column',
- 'x-designable-bar': 'Table.Column.DesignableBar',
- properties: {
- id: {
- type: 'string',
- 'x-component': 'Input',
- 'x-read-pretty': true,
- },
- },
- },
- column1: {
- type: 'void',
- title: 'Title',
- 'x-component': 'Table.Column',
- properties: {
- title: {
- type: 'string',
- 'x-component': 'Input',
- 'x-read-pretty': true,
- },
- },
- },
},
};
export default () => {
return (
-
+
+
+
+
+
+
+
);
};
diff --git a/packages/client/src/schemas/table/index.tsx b/packages/client/src/schemas/table/index.tsx
index 3dd187a29a..f20439c23f 100644
--- a/packages/client/src/schemas/table/index.tsx
+++ b/packages/client/src/schemas/table/index.tsx
@@ -40,7 +40,11 @@ import {
SchemaField,
SchemaRenderer,
} from '../../components/schema-renderer';
-import { interfaces, isAssociation, options } from '../database-field/interfaces';
+import {
+ interfaces,
+ isAssociation,
+ options,
+} from '../database-field/interfaces';
import { DraggableBlockContext } from '../../components/drag-and-drop';
import AddNew from '../add-new';
import { isGridRowOrCol } from '../grid';
@@ -94,7 +98,7 @@ export interface ITableRowContext {
const TableContext = createContext({} as any);
export const TableRowContext = createContext(null);
-const CollectionFieldContext = createContext(null);
+export const CollectionFieldContext = createContext(null);
export const useTable = () => {
return useContext(TableContext);
@@ -417,20 +421,133 @@ function AddColumn() {
checked={displayed.has(field.name)}
onChange={async (checked) => {
if (checked) {
- console.log('SwitchMenuItem.field.name', field.dataType, service.params[0])
- const data = appendChild({
+ console.log(
+ 'SwitchMenuItem.field.name',
+ field.dataType,
+ service.params[0],
+ );
+ const columnSchema: ISchema = {
type: 'void',
'x-component': 'Table.Column',
'x-component-props': {
fieldName: field.name,
},
'x-designable-bar': 'Table.Column.DesignableBar',
- });
+ };
+ if (field.interface === 'linkTo') {
+ columnSchema.properties = {
+ options: {
+ type: 'void',
+ 'x-decorator': 'Form',
+ 'x-component': 'Select.Options.Drawer',
+ 'x-component-props': {
+ useOkAction: '{{ Select.useOkAction }}',
+ },
+ title: '关联数据',
+ properties: {
+ table: {
+ type: 'array',
+ 'x-designable-bar': 'Table.DesignableBar',
+ 'x-decorator': 'BlockItem',
+ 'x-decorator-props': {
+ draggable: false,
+ },
+ 'x-component': 'Table',
+ default: [],
+ 'x-component-props': {
+ rowKey: 'id',
+ defaultSelectedRowKeys: '{{ Select.useSelectedRowKeys() }}',
+ onSelect: '{{ Select.useSelect() }}',
+ collectionName: field.target,
+ // dragSort: true,
+ showIndex: true,
+ refreshRequestOnChange: true,
+ pagination: {
+ pageSize: 10,
+ },
+ },
+ properties: {
+ [uid()]: {
+ type: 'void',
+ 'x-component': 'Table.ActionBar',
+ 'x-designable-bar':
+ 'Table.ActionBar.DesignableBar',
+ properties: {
+ [uid()]: {
+ type: 'void',
+ title: '筛选',
+ 'x-decorator': 'AddNew.Displayed',
+ 'x-decorator-props': {
+ displayName: 'filter',
+ },
+ 'x-align': 'left',
+ 'x-component': 'Table.Filter',
+ 'x-designable-bar':
+ 'Table.Filter.DesignableBar',
+ 'x-component-props': {
+ fieldNames: [],
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ option: {
+ type: 'void',
+ 'x-component': 'Select.OptionTag',
+ properties: {
+ [uid()]: {
+ type: 'void',
+ title: '查看数据',
+ 'x-component': 'Action.Drawer',
+ 'x-component-props': {
+ bodyStyle: {
+ background: '#f0f2f5',
+ },
+ },
+ properties: {
+ [uid()]: {
+ type: 'void',
+ 'x-component': 'Tabs',
+ 'x-designable-bar': 'Tabs.DesignableBar',
+ properties: {
+ [uid()]: {
+ type: 'void',
+ title: '详情',
+ 'x-designable-bar':
+ 'Tabs.TabPane.DesignableBar',
+ 'x-component': 'Tabs.TabPane',
+ 'x-component-props': {},
+ properties: {
+ [uid()]: {
+ type: 'void',
+ 'x-component': 'Grid',
+ 'x-component-props': {
+ addNewComponent: 'AddNew.PaneItem',
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ },
+ };
+ }
+ const data = appendChild(columnSchema);
await createSchema(data);
if (isAssociation(field)) {
- const defaultAppends = service.params[0]?.defaultAppends || [];
+ const defaultAppends =
+ service.params[0]?.defaultAppends || [];
defaultAppends.push(field.name);
- await service.run({...service.params[0], defaultAppends});
+ await service.run({
+ ...service.params[0],
+ defaultAppends,
+ });
}
} else {
const s: any = displayed.get(field.name);
@@ -439,12 +556,16 @@ function AddColumn() {
await removeSchema(removed);
displayed.remove(field.name);
if (isAssociation(field)) {
- const defaultAppends = service.params[0]?.defaultAppends || [];
+ const defaultAppends =
+ service.params[0]?.defaultAppends || [];
const index = defaultAppends.indexOf(field.name);
if (index > -1) {
defaultAppends.splice(index, 1);
}
- await service.run({...service.params[0], defaultAppends});
+ await service.run({
+ ...service.params[0],
+ defaultAppends,
+ });
}
}
// service.refresh();
@@ -535,7 +656,7 @@ const TableMain = () => {
setSelectedRowKeys,
service,
field,
- props: { rowKey, dragSort, showIndex },
+ props: { rowKey, dragSort, showIndex, onSelect },
refresh,
} = useTable();
const columns = useTableColumns();
@@ -624,8 +745,9 @@ const TableMain = () => {
rowSelection={{
type: 'checkbox',
selectedRowKeys,
- onChange: (rowKeys) => {
+ onChange: (rowKeys, rows) => {
setSelectedRowKeys(rowKeys);
+ onSelect && onSelect(rowKeys, rows);
},
renderCell: (checked, record, _, originNode) => {
const index = findIndex(
@@ -697,12 +819,15 @@ const TableProvider = (props: any) => {
rowKey = 'id',
dataRequest,
useResource = useGeneralResource,
+ defaultSelectedRowKeys,
...others
} = props;
const { schema } = useDesignable();
const field = useField();
const [pagination, setPagination] = usePagination();
- const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+ const [selectedRowKeys, setSelectedRowKeys] = useState(
+ defaultSelectedRowKeys || [],
+ );
const [, refresh] = useState(uid());
const { resource } = useResource();
const { sortableField } = useCollectionContext();
@@ -1859,6 +1984,9 @@ Table.Cell = observer((props: any) => {
feedbackLayout: 'popover',
},
'x-decorator': 'FormilyFormItem',
+ properties: {
+ ...schema?.properties,
+ },
},
},
})