{actionBars.top.map((actionBarSchema) => {
@@ -340,6 +439,26 @@ const TableContainer = observer((props) => {
rowSelection={{
type: 'checkbox',
selectedRowKeys,
+ renderCell: (checked, record, _, originNode) => {
+ const index = dataSource.indexOf(record);
+ return (
+
+
+ {dragSort &&
}
+ {showIndex &&
}
+ {originNode}
+ {/*
*/}
+
+ );
+ },
onChange: (keys) => {
console.log(keys);
setSelectedRowKeys(keys);
@@ -384,13 +503,13 @@ const TableContainer = observer((props) => {
if (!defaultAction) {
return;
}
- const el = (e.target as HTMLElement);
- if (
- !el.classList.contains('ant-table-cell')
- ) {
+ const el = e.target as HTMLElement;
+ if (!el.classList.contains('ant-table-cell')) {
return;
}
- const btn = el.parentElement.querySelector
(`.name-${defaultAction.name}`);
+ const btn = el.parentElement.querySelector(
+ `.name-${defaultAction.name}`,
+ );
btn && btn.click();
},
};
@@ -415,8 +534,16 @@ const TableContainer = observer((props) => {
);
});
-export const Table: any = observer((props) => {
- return (
+export const Table: any = observer((props: any) => {
+ const { resourceName } = props;
+ return resourceName ? (
+ // @ts-ignore
+
+
+
+
+
+ ) : (
@@ -477,41 +604,53 @@ Table.Column.DesignableBar = () => {
}}
overlay={
}
>
@@ -522,10 +661,61 @@ Table.Column.DesignableBar = () => {
);
};
-Table.ActionBar = observer((props) => {
+function AddActionButton() {
+ const [visible, setVisible] = useState(false);
return (
-
-
{props.children}
+
+
+ {[
+ { title: '筛选', key: 'filter' },
+ { title: '导出', key: 'export' },
+ { title: '新增', key: 'create' },
+ { title: '删除', key: 'destroy' },
+ ].map((item) => (
+
+
+ {item.title}
+
+
+
+ ))}
+
+
+
+ 函数操作
+ 弹窗表单
+ 复杂弹窗
+
+
+ }
+ >
+ }>
+
+ );
+}
+
+Table.ActionBar = observer((props: any) => {
+ const { align = 'top' } = props;
+ const { schema, designable } = useDesignable();
+ const designableBar = schema['x-designable-bar'];
+ console.log('designableBar', designableBar);
+ return (
+
+
+ {props.children}
+ {designable && designableBar && }
+
);
});
@@ -533,19 +723,17 @@ Table.ActionBar = observer((props) => {
Table.Pagination = observer((props) => {
const { data, params, run } = useTableContext();
return (
- data?.total > params?.pageSize && (
-
{
- run({ page, pageSize });
- }}
- />
- )
+ {
+ run({ page, pageSize });
+ }}
+ />
);
});
@@ -560,17 +748,16 @@ const SortHandle = SortableHandle((props: any) => {
}) as any;
Table.SortHandle = observer((props) => {
- const field = useField();
- console.log('SortHandle', field.value);
return ;
});
+Table.Operation = observer((props) => {
+ return ;
+});
+
Table.Index = observer((props) => {
const index = useTableIndex();
- const schema = useFieldSchema();
- const field = useField();
- const path = useSchemaPath();
- return {index + 1}
;
+ return {index + 1};
});
Table.Addition = observer((props: any) => {
@@ -599,7 +786,7 @@ Table.Addition = observer((props: any) => {
Table.Action = () => null;
-Table.Action.DesignableBar = () => {
+Table.Action.SimpleDesignableBar = () => {
const field = useField();
const path = useSchemaPath();
const { schema, remove, refresh, insertAfter } = useDesignable();
@@ -621,10 +808,125 @@ Table.Action.DesignableBar = () => {
}}
overlay={
+ }
+ >
+
+
+
+
+ {
+ e.stopPropagation();
+ }}
+ className={cls('designable-bar-actions', { active: visible })}
+ >
+ {
+ setVisible(visible);
+ }}
+ overlay={
+
+ }
+ >
+
+
+
+
+ );
+};
+
+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 (
+
+
{
+ e.stopPropagation();
+ }}
+ className={cls('designable-bar-actions', { active: visible })}
+ >
+ {
+ setVisible(visible);
+ }}
+ overlay={
+
}
>
@@ -643,6 +945,8 @@ Table.DesignableBar = observer((props) => {
if (!designable) {
return null;
}
+ const defaultPageSize =
+ schema['x-component-props']?.['pagination']?.['defaultPageSize'] || 20;
return (
{
overlay={