106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import React, { FC, useState } from 'react';
|
|
import { Modal, ModalProps, Radio, RadioGroupProps, Select, SelectProps, TransferProps, TreeDataNode, TreeProps } from 'antd';
|
|
import TreeTransfer from '../treeTransfer';
|
|
import { ALL_LIST, BOX_TYPE_LIST } from '../utils/constants';
|
|
|
|
export interface TreeTransferModalProps {
|
|
dataSource: TreeDataNode[]
|
|
treeProps?: TreeProps
|
|
targetItems: TreeDataNode[];
|
|
checkedKeys: string[];
|
|
onTreeSelect?: TreeProps['onSelect']
|
|
onTreeCheck?: TreeProps['onCheck']
|
|
onItemDelete?: (key: string, info?: { root: TreeDataNode[], keys: string[] }) => void
|
|
onChange?: TransferProps['onChange'];
|
|
onOk?: (data: any) => void;
|
|
onReset?: () => void;
|
|
open?: boolean
|
|
onCancel?: ModalProps['onCancel']
|
|
onRadioChange?: RadioGroupProps['onChange']
|
|
onSelect?: SelectProps['onSelect']
|
|
modalProps?: ModalProps
|
|
radioProps?: RadioGroupProps
|
|
selectProps?: SelectProps
|
|
}
|
|
|
|
const TreeTransferModal: FC<TreeTransferModalProps> = (props) => {
|
|
const {
|
|
open,
|
|
dataSource = [],
|
|
checkedKeys,
|
|
onItemDelete,
|
|
onOk,
|
|
onCancel,
|
|
onReset,
|
|
onRadioChange,
|
|
onTreeCheck,
|
|
onSelect,
|
|
targetItems,
|
|
modalProps,
|
|
radioProps,
|
|
selectProps,
|
|
} = props
|
|
|
|
const [type, setType] = useState('1')
|
|
|
|
return (
|
|
<Modal
|
|
open={open}
|
|
destroyOnClose
|
|
title="统计点位"
|
|
width="948px"
|
|
footer={null}
|
|
onCancel={onCancel}
|
|
{...modalProps}
|
|
>
|
|
<div>
|
|
<div>
|
|
<Radio.Group
|
|
onChange={e => {
|
|
setType(e.target.value)
|
|
onRadioChange?.(e)
|
|
}}
|
|
style={{ marginLeft: '24px', padding: '20px 0' }}
|
|
value={type}
|
|
options={BOX_TYPE_LIST}
|
|
{...radioProps}
|
|
/>
|
|
<Select
|
|
defaultValue={''}
|
|
style={{ marginLeft: 200, width: 150 }}
|
|
options={ALL_LIST}
|
|
onSelect={onSelect}
|
|
{...selectProps}
|
|
/>
|
|
</div>
|
|
{type === 'box' ?
|
|
(
|
|
<TreeTransfer
|
|
dataSource={dataSource}
|
|
targetItems={targetItems}
|
|
checkedKeys={checkedKeys}
|
|
onTreeCheck={onTreeCheck}
|
|
onItemDelete={onItemDelete}
|
|
onOk={onOk}
|
|
onReset={onReset}
|
|
/>
|
|
) : (
|
|
<TreeTransfer
|
|
dataSource={dataSource}
|
|
targetItems={targetItems}
|
|
checkedKeys={checkedKeys}
|
|
onTreeCheck={onTreeCheck}
|
|
onItemDelete={onItemDelete}
|
|
onOk={onOk}
|
|
onReset={onReset}
|
|
/>
|
|
)}
|
|
<p style={{ textAlign: 'right' }} >已选中{targetItems.length}个点位</p>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
};
|
|
|
|
export default TreeTransferModal;
|
|
|