import React, { useState, useMemo, useRef, createContext } from 'react'; import { Tree, Input, Popconfirm, Tooltip, Divider, Modal, message } from 'antd'; import { MinusSquareOutlined, FormOutlined, PlusSquareOutlined } from '@ant-design/icons'; import getPrem from '@/utils/getPrem'; import { useRequest } from 'ahooks'; import { doFetch } from '@/utils/doFetch'; const ReachableContext = createContext(null); let { Search } = Input, { TreeNode } = Tree; function TreeRender({ url, deleteurl, saveurl, onselected }) { const [search, setsearch] = useState(""); const [savetitle, setsavetitle] = useState(null); const [modal, setModal] = useState({ visible: false }); const { data, loading, refresh } = useRequest(() => { return doFetch({ url, params: { title: search } }) },{ refreshDeps:[search] }); const ref1 = useRef(), ref2 = useRef(); const treeData = useMemo(() => { return data?.data?.dataList ?? [] }, [data]); 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); const title = index > -1 ? ( {beforeStr} {search} {afterStr} ) : ( {item.title} ); const actiontitle = (
{title} { e.stopPropagation(); setsavetitle(null) if (getPrem("enElectricityMeterType_save", "ifs")) { setModal({ visible: true, closable: true, title: "修改节点名称", okText: "修改", cancelText: "取消", placeholder: item.title, key: item.key }) } }}> { e.stopPropagation(); setsavetitle(null) if (getPrem("enElectricityMeterType_save", "ifs")) { setModal({ visible: true, closable: true, title: "新增子结构", okText: "新增", cancelText: "取消", placeholder: item.title, key: item.key }) } }} style={{ color: `${getPrem("enElectricityMeterType_save", "ifs") ? "green" : ""}` }} /> { (!item.children || item.children.length == 0) && } { (!item.children || item.children.length == 0) && { doFetch({ url: deleteurl, params: { id: item.key } }).then(res => { if (res.code == '0000') { message.success("操作成功") refresh(); } }) }} disabled={!getPrem("enElectricityMeterType_deleteById", "ifs")} > { e.stopPropagation() }} style={{ color: "red" }} /> }
) // if (item.children) { // return ( // // {loop(item.children)} // // ); // } // return ; return ( {item.children && loop(item.children)} ); }); return (
{ setModal(s => ({ ...s, visible: false })) }} onOk={() => { if (modal.okText == "修改") { return new Promise((resolve, reject) => { if (savetitle) { console.log(ref1.current); doFetch({ url: saveurl, params: { materieTypeName: 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: { materieTypeName: savetitle, parentId: modal.key, } }).then(res => { if (res.code == "0000") { message.success("操作成功") refresh() setModal({ visible: false }) } }) resolve() } else { message.warn("请输入修改的名称") reject() } }) } }} > { modal.okText == "修改" ?
{ setsavetitle(e.target.value) }}>
:
当前结构:{modal.placeholder}
{ setsavetitle(e.target.value) }}>
}
{ setsearch(e.target.value) }} /> { onselected?.(selectedKeys) }} autoExpandParent={true} > {loop(treeData ? treeData : [])}
); } export default TreeRender;