94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { InputProps, Tabs, TabsProps, TreeDataNode, TreeProps } from 'antd'
|
|
import BoxPanel from './components/boxPanel';
|
|
import { ModalFormProps } from '@ant-design/pro-components';
|
|
|
|
export interface BoxSelectTreeProps {
|
|
boxDataSource: TreeDataNode[]
|
|
data: TreeDataNode[]
|
|
onSearch?: (e: any) => void // 搜索
|
|
onItemSelect?: TreeProps['onSelect']
|
|
onItemCheck?: TreeProps['onCheck']
|
|
onTabChange?: (e: any) => void
|
|
onBoxBatchDelete?: (data?: any) => void
|
|
onBoxDelete?: (data?: any) => void
|
|
onCreateSubmit?: ModalFormProps['onFinish']
|
|
tabsProps?: TabsProps
|
|
searchInputProps?: InputProps
|
|
treeProps?: TreeProps
|
|
}
|
|
|
|
const BoxSelectTree: FC<BoxSelectTreeProps> = (props) => {
|
|
const {
|
|
data,
|
|
boxDataSource = [],
|
|
onTabChange,
|
|
onSearch,
|
|
onItemCheck,
|
|
onItemSelect,
|
|
onBoxBatchDelete,
|
|
onBoxDelete,
|
|
onCreateSubmit,
|
|
tabsProps,
|
|
searchInputProps,
|
|
treeProps
|
|
} = props
|
|
|
|
const onChange = (key: string) => {
|
|
onTabChange?.(key)
|
|
};
|
|
|
|
const items: TabsProps['items'] = [
|
|
{
|
|
key: '1',
|
|
label: <div style={{ textAlign:'center', width: '160px' }} >盒子组</div>,
|
|
children: (
|
|
<BoxPanel
|
|
searchInputProps={searchInputProps}
|
|
boxDataSource={boxDataSource}
|
|
treeProps={treeProps}
|
|
data={data}
|
|
onCreateSubmit={onCreateSubmit}
|
|
onBoxBatchDelete={onBoxBatchDelete}
|
|
onBoxDelete={onBoxDelete}
|
|
onSearch={onSearch}
|
|
onItemCheck={onItemCheck}
|
|
onItemSelect={onItemSelect}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
key: '2',
|
|
label: <div style={{ textAlign:'center', width: '160px' }} >盒子</div>,
|
|
children: (
|
|
<BoxPanel
|
|
boxDataSource={boxDataSource}
|
|
searchInputProps={searchInputProps}
|
|
treeProps={treeProps}
|
|
data={data}
|
|
onBoxBatchDelete={onBoxBatchDelete}
|
|
onCreateSubmit={onCreateSubmit}
|
|
onBoxDelete={onBoxDelete}
|
|
onSearch={onSearch}
|
|
onItemCheck={onItemCheck}
|
|
onItemSelect={onItemSelect}
|
|
/>
|
|
)
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Tabs
|
|
defaultActiveKey="1"
|
|
centered
|
|
items={items}
|
|
onChange={onChange}
|
|
tabBarGutter={0}
|
|
indicator={{ size: (origin) => origin, align: 'center' }}
|
|
{...tabsProps}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default BoxSelectTree;
|