68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { TreeTransfer } from '@zhst/biz';
|
|
import { TreeDataNode } from 'antd';
|
|
import { TreeProps } from 'antd/lib';
|
|
import { boxDataSource } from './mock'
|
|
|
|
const App: React.FC = () => {
|
|
const [targetItems, setTargetItems] = useState<TreeDataNode[]>([]);
|
|
const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
|
|
|
|
const onTreeCheck: TreeProps['onCheck'] = (keys: any, info) => {
|
|
let _targetItems: TreeDataNode[] = []
|
|
setCheckedKeys(keys)
|
|
info.checkedNodes.forEach(o => {
|
|
o.isLeaf && _targetItems.push(o)
|
|
})
|
|
setTargetItems(_targetItems)
|
|
}
|
|
|
|
/**
|
|
* 删除
|
|
* @param key
|
|
* @param param1
|
|
*/
|
|
const onItemDelete = (key: any, { keys = [] }: any) => {
|
|
setCheckedKeys(pre => {
|
|
const newKeys = pre.filter(_key => _key !== key)
|
|
console.log('newKeys', newKeys, keys)
|
|
return newKeys
|
|
})
|
|
setTargetItems(pre => pre.filter(o => o.key !== key))
|
|
}
|
|
|
|
const onOk = (data: any) => {
|
|
console.log('data', data)
|
|
}
|
|
|
|
const onReset = () => {
|
|
setCheckedKeys([])
|
|
setTargetItems([])
|
|
}
|
|
|
|
return (
|
|
<TreeTransfer
|
|
leftPanelWidth={800}
|
|
rightPanelWidth={500}
|
|
showLeftPanelFooter
|
|
dataSource={boxDataSource}
|
|
targetItems={targetItems}
|
|
checkedKeys={checkedKeys}
|
|
onTreeCheck={onTreeCheck}
|
|
leftPanelFooterRender={(
|
|
<div style={{ padding: '6px', color: 'red' }}>
|
|
自定义脚部dom
|
|
</div>
|
|
)}
|
|
onItemDelete={onItemDelete}
|
|
onOk={onOk}
|
|
onReset={onReset}
|
|
searchInputProps={{
|
|
onChange: e => console.log('123123')
|
|
}}
|
|
/>
|
|
)
|
|
};
|
|
|
|
export default App;
|