91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { BoxSelectTree } from '@zhst/biz';
|
||
import { treeData, boxDataSource } from './mock'
|
||
import { Select, TreeProps, Modal, Checkbox, Button } from '@zhst/meta';
|
||
|
||
const { Option } = Select
|
||
|
||
const demo = () => {
|
||
const [activeKey, setActiveKey] = useState('1')
|
||
const [searchType, setSearchType] = useState('1')
|
||
const [searchVal, setSearchVal] = useState('')
|
||
const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
|
||
const [modal, contextHolder] = Modal.useModal();
|
||
|
||
const onTreeCheck: TreeProps['onCheck'] = (keys: any) => {
|
||
setCheckedKeys(keys)
|
||
}
|
||
|
||
const onBoxBatchDelete = () => {
|
||
console.log('盒子批量删除', checkedKeys)
|
||
modal.warning({
|
||
content: (
|
||
<div>
|
||
<p>请确认是否从系统中删除盒子？</p>
|
||
<Checkbox>所选盒子同时从系统中删除</Checkbox>
|
||
</div>
|
||
),
|
||
cancelText: '取消',
|
||
okText: '确定',
|
||
onOk() {},
|
||
onCancel() {}
|
||
})
|
||
}
|
||
|
||
return (
|
||
<div style={{ border: '1px solid #ccc', width: '320px', minHeight: '900px' }}>
|
||
{contextHolder}
|
||
<BoxSelectTree
|
||
data={activeKey === '1' ? treeData : boxDataSource}
|
||
boxDataSource={boxDataSource}
|
||
onSearch={e => console.log('搜索', e)}
|
||
onCreateSubmit={async (_data) => {
|
||
console.log('新建盒子', _data)
|
||
return true
|
||
}}
|
||
onItemCheck={onTreeCheck}
|
||
onItemSelect={e => console.log('onItemSelect', e)}
|
||
onTabChange={val => setActiveKey(val)}
|
||
onBoxBatchDelete={onBoxBatchDelete}
|
||
onClockClick={() => console.log('时钟点击事件')}
|
||
onImport={() => console.log('导入盒子')}
|
||
tabsProps={{
|
||
activeKey,
|
||
}}
|
||
searchInputProps={{
|
||
addonBefore: (
|
||
<Select
|
||
value={searchType}
|
||
dropdownMatchSelectWidth={false}
|
||
onChange={_type => {
|
||
setSearchType(_type)
|
||
setSearchVal('')
|
||
}}
|
||
style={{ width: '72px' }}
|
||
>
|
||
{[
|
||
{ value: '1', label: '盒子' },
|
||
{ value: '2', label: '盒子组' }
|
||
].map(item => (
|
||
<Option value={item.value}>{item.label}</Option>
|
||
))}
|
||
</Select>
|
||
),
|
||
onChange: e => setSearchVal(e.target.value),
|
||
value: searchVal
|
||
}}
|
||
treeProps={{
|
||
onItemDelete: data => console.log('删除', data),
|
||
onItemSetting: data => console.log('配置事件', data),
|
||
onItemRename: (data) =>console.log('重命名', data),
|
||
onItemRenameFinish: async (val, data) => console.log('盒子重命名提交(返回boolean,控制弹框显示\隐藏)', val, data),
|
||
checkedKeys,
|
||
}}
|
||
footer={<Button block >加载更多</Button>}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default demo;
|