import React, { useState, useMemo, useRef, createContext, useEffect } from 'react'; import { Tree, Input, Popconfirm, Tooltip, Divider, Modal, message } from 'antd'; import { MinusSquareOutlined, FormOutlined, PlusSquareOutlined, ArrowDownOutlined, ArrowRightOutlined, } from '@ant-design/icons'; import { useRequest } from 'ahooks'; import { doFetch } from '@/utils/doFetch'; const ReachableContext = createContext(null); let { Search } = Input, { TreeNode } = Tree; const getParentKey = (key, tree) => { let parentKey; for (let i = 0; i < tree.length; i++) { const node = tree[i]; if (node.children) { if ( node.children.some((item) => { return item.key === key; }) ) { parentKey = node.key; } else if (getParentKey(key, node.children)) { parentKey = getParentKey(key, node.children); } } } return parentKey; }; { /* <TreeRender url="/ngic-workmanship/pmMaterieType/queryTreeList" deleteurl="/ngic-workmanship/pmMaterieType/deleteById" saveurl="/ngic-workmanship/pmMaterieType/save" onselected={(vals) => { setmaterieTypeId(vals[0] ?? ""); }} /> */ } function TreeRender({ url, deleteurl, saveurl, onselected, params, noaction, maxWidth, style, submitKey, }) { const [search, setsearch] = useState(''); const [savetitle, setsavetitle] = useState(null); const [modal, setModal] = useState({ visible: false, }); const [expandall, setexpandall] = useState(false); const [expandedKeys, onExpand] = useState(); const { data, loading, refresh } = useRequest(() => { return doFetch({ url, params: params ?? {} }); }); const [autoExpandParent, setAutoExpandParent] = useState(true); const allkeys = useMemo(() => { let res = []; const fn = (source) => { source.map((el) => { res.push(el); el.children && el.children.length > 0 ? fn(el.children) : ''; // 子级递归 }); }; fn(data?.data?.dataList ?? []); return res.filter((it) => it.children).map((it) => it.key); }, [data]); const alldata = useMemo(() => { let res = []; const fn = (source) => { source.map((el) => { res.push(el); el.children && el.children.length > 0 ? fn(el.children) : ''; // 子级递归 }); }; fn(data?.data?.dataList ?? []); return res; }, [data]); const treeData = useMemo(() => { let res = data?.data?.dataList ?? []; return [ { title: '全部类型', key: '', children: res, }, ]; }, [data]); const onChange = (e) => { const { value } = e.target; const dataLists = getAllList(); const newExpandedKeys = dataLists .map((item) => { if (item.title.indexOf(value) > -1) { return getParentKey(item.key, treeData); } return null; }) .filter((item, i, self) => item && self.indexOf(item) === i); setsearch(value); if (newExpandedKeys.length > 0) { setexpandall(true); setAutoExpandParent(true); } else { setexpandall(false); setAutoExpandParent(false); } onExpand(newExpandedKeys); }; const loop = (data) => data.map((item) => { const index = item.title.indexOf(search); const beforeStr = item.title.substr(0, index); const afterStr = item.title.substr(index + search.length); let title = index > -1 ? ( <Tooltip title={item.title} placement="bottom"> <span style={{ display: 'inline-block', maxWidth: maxWidth ?? 88, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginRight: 6, }} > {beforeStr} <span style={{ color: '#f50' }}>{search}</span> {afterStr} </span> </Tooltip> ) : ( <Tooltip title={item.title} placement="bottom"> <span style={{ display: 'inline-block', maxWidth: maxWidth ?? 88, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginRight: 6, }} > {item.title} </span> </Tooltip> ); const actiontitle = ( <div style={{ display: 'flex', alignItems: 'start', justifyContent: 'space-between', }} > <span style={{ merginRight: 6 }}>{title}</span> <div> {item.key && item.key != '00000000' && ( <Tooltip title="编辑" onClick={(e) => { e.stopPropagation(); setsavetitle(null); if (true) { setModal({ visible: true, closable: true, title: '修改节点名称', okText: '修改', cancelText: '取消', placeholder: item.title, key: item.key, }); } }} > <FormOutlined style={{ color: '#1890ff' }} /> </Tooltip> )} {item.key && item.key != '00000000' && ( <Divider type="vertical" style={{ margin: '0 6px' }}></Divider> )} <Tooltip title="新增"> <PlusSquareOutlined disabled={false} onClick={(e) => { e.stopPropagation(); setsavetitle(null); if (true) { setModal({ visible: true, closable: true, title: '新增子结构', okText: '新增', cancelText: '取消', placeholder: item.title, key: item.key, }); } }} style={{ color: `${true ? 'green' : ''}`, }} /> </Tooltip> {(!item.children || item.children.length == 0) && ( <Divider type="vertical" style={{ margin: '0 6px' }}></Divider> )} {(!item.children || item.children.length == 0) && item.key != '0' && ( <Popconfirm placement="bottom" title="是否删除该节点?" okText="删除" cancelText="取消" onConfirm={() => { doFetch({ url: deleteurl, params: { id: item.key } }).then((res) => { if (res.code == '0000') { message.success('操作成功'); refresh(); } }); }} disabled={true} > <Tooltip title="删除"> <MinusSquareOutlined onClick={(e) => { e.stopPropagation(); }} style={{ color: 'red' }} /> </Tooltip> </Popconfirm> )} {/* { item.key === "00000000" && <Divider type='vertical' style={{ margin: "0 6px" }}></Divider> } */} {/* { item.key === "00000000" && <Tooltip title={expandall ? "收起" : "展开"} onClick={(e) => { e.stopPropagation(); setexpandall(!expandall) onExpand(expandall ? [] : allkeys) }}> {expandall ? <ArrowDownOutlined /> : <ArrowRightOutlined />} </Tooltip> } */} </div> </div> ); if (item.key === '00000000') { title = ( <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flex: 1, }} > {title} <Tooltip title={expandall ? '收起' : '展开'} onClick={(e) => { e.stopPropagation(); setexpandall(!expandall); onExpand(expandall ? [] : allkeys); setAutoExpandParent(!expandall); }} > {expandall ? <ArrowDownOutlined /> : <ArrowRightOutlined />} </Tooltip> </div> ); } if (item.children) { return { title: noaction ? title : actiontitle, key: item.key, children: loop(item.children), level: item.level, type: item.type, }; } return { title: noaction ? title : actiontitle, key: item.key, level: item.level, type: item.type, }; }); useEffect(() => { setexpandall(true); onExpand(allkeys); }, [allkeys]); function getAllList() { const dataLists = []; const generateLists = (data) => { for (let i = 0; i < data.length; i++) { const node = data[i]; const key = node.key; dataLists.push({ key, title: node.title, level: node.level }); if (node.children) { generateLists(node.children, node.key); } } }; generateLists(treeData); return dataLists; } return ( <div style={{ ...style }}> <Modal {...modal} onCancel={() => { setModal((s) => ({ ...s, visible: false, })); }} onOk={() => { if (modal.okText == '修改') { return new Promise((resolve, reject) => { if (savetitle) { doFetch({ url: saveurl, params: { [submitKey]: savetitle, id: modal.key, }, }).then((res) => { if (res.code == '0000') { message.success('操作成功'); refresh(); setModal({ visible: false, }); } }); resolve(); } else { message.warn('请输入修改的名称'); reject(); } }); } else { return new Promise((resolve, reject) => { if (savetitle) { doFetch({ url: saveurl, params: { [submitKey]: savetitle, parentId: modal.key, }, }).then((res) => { if (res.code == '0000') { message.success('操作成功'); refresh(); setModal({ visible: false, }); } }); resolve(); } else { message.warn('请输入修改的名称'); reject(); } }); } }} > {modal.okText == '修改' ? ( <div> <Input placeholder={modal.placeholder} allowClear value={savetitle} onChange={(e) => { setsavetitle(e.target.value); }} ></Input> </div> ) : ( <div> <div style={{ marginBottom: 15, color: '#f50', fontSize: 16 }}> 当前结构:{modal.placeholder} </div> <Input placeholder="子结构" allowClear onChange={(e) => { setsavetitle(e.target.value); }} ></Input> </div> )} </Modal> <Search value={search} style={{ margin: '16px 0 8px 0' }} placeholder="搜索" onChange={onChange} /> <Tree onSelect={(selectedKeys, e) => { // //console.log(selectedKeys); onselected?.(selectedKeys, e, alldata); }} autoExpandParent={autoExpandParent} defaultExpandAll={true} expandedKeys={expandedKeys} onExpand={(expandedKeys, { expanded: bool, node }) => { onExpand(expandedKeys); setAutoExpandParent(false); if (!bool && node.key == '00000000') { setexpandall(false); } else { setexpandall(true); } }} treeData={loop(treeData ?? [])} > {/* {loop(treeData ? treeData : [])} */} </Tree> </div> ); } export default TreeRender;