Tree

import lodash from 'lodash'; import { useModel } from 'umi'; import { utils } from '@/utils/utils'; import { DataNode } from 'antd/lib/tree'; import React, { useEffect, useMemo, useState } from 'react'; import { Empty, Spin, Tree } from 'antd'; import * as restfulApi from '@/services/api/index';

export interface RouteTreeRenterSelectProps { merchantId: string value?: string[]; isRefetch?: boolean; loading?: boolean; onChange?: (value?: string[], access?: any[]) => void; }

const convertCheckedKeys = (accessData: any[], value?: string[]): string[] => { if (!value) return []; const access: any[] = value.map((id) => lodash.find(accessData, { id })).filter((it) => !!it);

return access .filter((_access) => lodash.isEmpty(accessData.filter((it) => it?.parentId === _access?.id)), ) .map((it) => it?.id); };

const RouteTreeRenterSelect: React.FC = ({ merchantId, value, isRefetch, loading: loadingByProps, onChange, }) => { // @ts-ignore const { initialState } = useModel('@@initialState');

const [loading, setLoading] = useState(false); const [dataSource, setDataSource] = useState<any[]>([]); const [expandedKeys, setExpandedKeys] = useState<string[]>([]);

useEffect(() => { accessListLoad(); }, [])

useEffect(() => { if (loadingByProps) { setLoading(loadingByProps) } }, [loadingByProps])

const treeData: DataNode[] = useMemo(() => { const routes = dataSource.map((it) => { return { ...it, key: it.id, title: ${it.menuName}, }; });

return utils.arrayToTree(routes, 'id', 'parentId');

}, [dataSource])

const newCheckedKeys = useMemo(() => { return convertCheckedKeys(dataSource, value); }, [dataSource, value])

useEffect(() => { setExpandedKeys(treeData.map((it) => it.key) as string[]); }, [loading, treeData]);

useEffect(() => { accessListLoad(); }, [!!isRefetch]);

const accessListLoad = async () => { setLoading(true) const result = await restfulApi.roleListByMerchantId(merchantId);

setLoading(false)
if (result?.data && !lodash.isEmpty(result?.data)) {
  setDataSource(result?.data)
}

}

if (!loading && lodash.isEmpty(dataSource)) { return ; }

return ( <Tree treeData={treeData} selectable={false} checkable expandedKeys={expandedKeys} defaultCheckedKeys={newCheckedKeys} onCheck={(keys, e) => { const { halfCheckedKeys } = e; if (onChange) { const newValue = [...(keys as string[]), ...(halfCheckedKeys as string[])]; onChange( newValue, dataSource.filter((it) => newValue.indexOf(it.id) !== -1), ); } }} onExpand={(keys) => { setExpandedKeys(keys as string[]); }} /> ); };

export default RouteTreeRenterSelect;