import React, { useState, useEffect } from 'react';
import { useRouter } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import Customer from '../../services/customerProfileList';
import starIc from '../../assets/star.png';
import { AtIcon } from 'taro-ui';
import './index.scss';
const TreeNode = props => {
const change = () => {
props.changeData(props.itemNode);
};
return (
<View className="client-tree-child-tree">
<View className="client-tree-node-content">
<Text>{props.title}</Text>
<View>
({props.admin_name}){props.isCurrent ? <Image src={starIc} /> : null}
{props?.children?.length > 0 ? (
<Text style={{ marginLeft: '20rpx' }} onClick={change}>
{props?.collapse ? (
<AtIcon value="chevron-up" size="15" color="#979ea5"></AtIcon>
) : (
<AtIcon value="chevron-down" size="15" color="#979ea5"></AtIcon>
)}
</Text>
) : null}
</View>
</View>
{props?.collapse ? props.children : null}
</View>
);
};
const renderTreeNodes = (data, id, changeData) => {
return data?.map(item => {
const { client_name: title, admin_name: name, children, collapse } = item;
if (children && children.length > 0) {
return (
<TreeNode
key={data.id}
isCurrent={item.id === Number(id)}
title={title}
admin_name={name}
collapse={collapse}
changeData={changeData}
itemNode={item}
>
{renderTreeNodes(children, id, changeData)}
</TreeNode>
);
}
return (
<TreeNode
key={data.id}
isCurrent={item.id === Number(id)}
title={title}
admin_name={name}
itemNode={item}
changeData={changeData}
/>
);
});
};
// const client2 = [
// {
// admin_name: '何蕾蕾0',
// client_name: '徐州金蝶软件有限公司',
// id: 3709,
// phone: '15358165572',
// pid: null,
// children: [
// {
// admin_name: '何蕾蕾1',
// client_name: '徐州长龙能源科技有限公司',
// id: 3079,
// phone: '15358165572',
// pid: 3709,
// children: [
// {
// admin_name: '何蕾蕾1-1',
// client_name: '徐州长龙能源科技有限公司',
// id: 307933,
// phone: '15358165572',
// pid: 3079,
// },
// {
// admin_name: '何蕾蕾1-2',
// client_name: '徐州长龙能源科技有限公司',
// id: 37701,
// phone: '15358165572',
// pid: 3079,
// },
// ],
// },
// {
// admin_name: '何蕾蕾',
// client_name: '徐州长龙能源科技有限公司',
// id: 3770,
// phone: '15358165572',
// pid: 3709,
// },
// ],
// },
// {
// admin_name: '何蕾蕾',
// client_name: '徐州金蝶软件有限公司',
// id: 37099,
// phone: '15358165572',
// pid: null,
// children: [
// {
// admin_name: '何蕾蕾',
// client_name: '徐州长龙能源科技有限公司',
// id: 37701,
// phone: '15358165572',
// pid: 37099,
// },
// ],
// },
// ];
// const findData = (arr, curId) => {
// let result = null; // 运行结果
// const getTreeItem = (data, id) => {
// data.map(item => {
// if (Number(id) === Number(item?.id)) {
// result = item; // 结果赋值
// return false;
// }
// if (item.children) {
// getTreeItem(item.children, id);
// }
// return { ...item };
// });
// };
// getTreeItem(arr, curId);
// return result;
// };
// const mapAllData = (arr, curId) => {
// let arrDatas = [];
// const getTreeItem = (data, id) => {
// let flag = false;
// arrDatas = data.map(item => {
// const newItem = item;
// if (Number(id) === Number(item?.id)) {
// newItem.collapse = true;
// flag = true;
// } else {
// newItem.collapse = false;
// }
// if (item.children) {
// const isChildTarget = getTreeItem(item.children, id);
// if (isChildTarget) {
// newItem.collapse = true;
// }
// }
// return { ...item };
// });
// return flag;
// };
// getTreeItem(arr, curId);
// return arrDatas;
// };
// 查找子节点的所有父节点
const getParentNode = (arr1, curId) => {
const getNodeArr = [];
const forFunc = (arr, id) => {
for (let i = 0; i < arr.length; i++) {
if (Number(id) === Number(arr[i].id)) {
const arr2 = arr[i];
arr2.collapse = false;
getNodeArr.push(arr2);
forFunc(arr1, arr[i]?.pid);
break;
} else if (arr[i].children) {
forFunc(arr[i].children, id);
}
}
};
forFunc(arr1, curId);
return getNodeArr;
};
// 更改节点
const changeAllNodes = (arr, ids) => {
let arrDatas = [];
const getTreeItem = (data, id) => {
arrDatas = data?.map(item => {
const newItem = item;
if (Number(id) === Number(item?.id)) {
newItem.collapse = true;
} else {
// newItem.collapse = false;
}
if (item.children) {
getTreeItem(item.children, id);
}
return { ...item };
});
};
ids.forEach(element => {
getTreeItem(arr, element);
});
console.log('arrDatas', arrDatas);
return arrDatas;
};
const AssociatedClient = () => {
const [client, setClient] = useState([]);
const {
params: { id },
} = useRouter();
useEffect(() => {
Customer.fetchAssociatedClients(id).then(res => {
if (res.XCmdrCode === 0) {
const initDatas = [...(res.XCmdrResult || [])];
const datap = getParentNode([...initDatas], id);
const openNodeIds = datap
?.map(item => item.id)
?.filter(el => Number(el) !== Number(id)); // 所有父节点,展开目标节点的父节点
// const getData = mapAllData([...initDatas], id); // 初始化数据
const pids = changeAllNodes(initDatas, openNodeIds);
setClient(pids);
}
});
}, [id]);
const clickAllData = (arr, curId) => {
let arrDatas = [];
const getTreeItem = (data, id) => {
arrDatas = data?.map(item => {
const newItem = item;
if (Number(id) === Number(item?.id)) {
newItem.collapse = !newItem.collapse;
}
if (item.children) {
getTreeItem(item.children, id);
}
return { ...item };
});
};
getTreeItem(arr, curId);
return arrDatas;
};
const changeData = item => {
const getDatas = [...client];
const changeDatas = clickAllData(getDatas, item?.id);
setClient(changeDatas);
};
return (
<View className="associated-client-container">
<View className="client-tree-wrap">{renderTreeNodes(client, id, changeData)}</View>
</View>
);
};
export default AssociatedClient;
展开收缩处理
默认展开当前用户
关键部分
/ 查找子节点的所有父节点
const getParentNode = (arr1, id) => {
const getNodeArr = [];
const forFunc = (arr, id) => {
for (let i = 0; i < arr.length; i++) {
if (Number(id) === Number(arr[i].id)) {
getNodeArr.push(arr[i]);
forFunc(arr1, arr[i]?.pid);
break;
} else if (arr[i].children) {
forFunc(arr[i].children, id);
}
}
};
forFunc(arr1, id);
return getNodeArr;
};
// 更改节点
const changeAllNodes = (arr, ids) => {
let arrDatas = [];
const getTreeItem = (data, id) => {
arrDatas = data.map(item => {
const newItem = item;
if (Number(id) === Number(item?.id) || Number(id) === Number(item?.pid)) {
newItem.collapse = true;
} else {
newItem.collapse = false;
}
if (item.children) {
getTreeItem(item.children, id);
}
return { ...item };
});
};
ids.forEach(element => {
getTreeItem(arr, element);
});
return arrDatas;
};
const datap = getParentNode([...client2], id);
const openNodeIds = datap.map(item => item.id); // 所有父节点
console.log('datap', datap);
console.log('openNode', openNodeIds);
const pids = changeAllNodes(initDatas, openNodeIds);
import React, { useState, useEffect } from 'react';
import { useRouter } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import Customer from '../../services/customerProfileList';
import starIc from '../../assets/star.png';
import { AtIcon } from 'taro-ui';
import './index.scss';
const TreeNode = props => {
const change = () => {
props.changeData(props.itemNode);
};
return (
<View className="client-tree-child-tree">
<View className="client-tree-node-content">
<Text>{props.title}</Text>
<View>
({props.admin_name}){props.isCurrent ? <Image src={starIc} /> : null}
{props?.children?.length > 0 ? (
<Text style={{ marginLeft: '20rpx' }} onClick={change}>
{props?.collapse ? (
<AtIcon value="chevron-up" size="15" color="#979ea5"></AtIcon>
) : (
<AtIcon value="chevron-down" size="15" color="#979ea5"></AtIcon>
)}
</Text>
) : null}
</View>
</View>
{props?.collapse ? props.children : null}
</View>
);
};
const renderTreeNodes = (data, id, changeData) => {
return data?.map(item => {
const { client_name: title, admin_name: name, children, collapse } = item;
if (children && children.length > 0) {
return (
<TreeNode
key={data.id}
isCurrent={item.id === Number(id)}
title={title}
admin_name={name}
collapse={collapse}
changeData={changeData}
itemNode={item}
>
{renderTreeNodes(children, id, changeData)}
</TreeNode>
);
}
return (
<TreeNode
key={data.id}
isCurrent={item.id === Number(id)}
title={title}
admin_name={name}
itemNode={item}
changeData={changeData}
/>
);
});
};
const client2 = [
{
admin_name: '何蕾蕾0',
client_name: '徐州金蝶软件有限公司',
id: 3709,
phone: '15358165572',
pid: null,
children: [
{
admin_name: '何蕾蕾1',
client_name: '徐州长龙能源科技有限公司',
id: 307922,
phone: '15358165572',
pid: 3709,
children: [
{
admin_name: '何蕾蕾1-1',
client_name: '徐州长龙能源科技有限公司',
id: 3079,
phone: '15358165572',
pid: 307922,
},
{
admin_name: '何蕾蕾1-2',
client_name: '徐州长龙能源科技有限公司',
id: 37701,
phone: '15358165572',
pid: 307922,
},
],
},
{
admin_name: '何蕾蕾',
client_name: '徐州长龙能源科技有限公司',
id: 3770,
phone: '15358165572',
pid: 3709,
},
],
},
{
admin_name: '何蕾蕾',
client_name: '徐州金蝶软件有限公司',
id: 37099,
phone: '15358165572',
pid: null,
children: [
{
admin_name: '何蕾蕾',
client_name: '徐州长龙能源科技有限公司',
id: 37701,
phone: '15358165572',
pid: 37099,
},
],
},
];
const findData = (arr, curId) => {
let result = null; // 运行结果
const getTreeItem = (data, id) => {
data.map(item => {
if (Number(id) === Number(item?.id)) {
result = item; // 结果赋值
return false;
}
if (item.children) {
getTreeItem(item.children, id);
}
return { ...item };
});
};
getTreeItem(arr, curId);
return result;
};
const mapAllData = (arr, curId) => {
let arrDatas = [];
const getTreeItem = (data, id) => {
const statusMachine = { flag: false };
arrDatas = data.map(item => {
const newItem = item;
if (Number(id) === Number(item?.id)) {
newItem.collapse = true;
statusMachine.flag = true;
} else {
newItem.collapse = false;
}
if (item.children) {
const isChildTarget = getTreeItem(item.children, id);
if (isChildTarget?.flag) {
newItem.collapse = true;
}
}
return { ...item };
});
return statusMachine;
};
getTreeItem(arr, curId);
return arrDatas;
};
// 查找子节点的所有父节点
const getParentNode = (arr1, id) => {
const getNodeArr = [];
const forFunc = (arr, id) => {
for (let i = 0; i < arr.length; i++) {
if (Number(id) === Number(arr[i].id)) {
getNodeArr.push(arr[i]);
forFunc(arr1, arr[i]?.pid);
break;
} else if (arr[i].children) {
forFunc(arr[i].children, id);
}
}
};
forFunc(arr1, id);
return getNodeArr;
};
const changeAllNodes = (arr, ids) => {
let arrDatas = [];
const getTreeItem = (data, id) => {
arrDatas = data.map(item => {
const newItem = item;
if (Number(id) === Number(item?.id) || Number(id) === Number(item?.pid)) {
newItem.collapse = true;
} else {
newItem.collapse = false;
}
if (item.children) {
getTreeItem(item.children, id);
}
return { ...item };
});
};
ids.forEach(element => {
getTreeItem(arr, element);
});
return arrDatas;
};
const AssociatedClient = () => {
const [client, setClient] = useState([]);
const {
params: { id },
} = useRouter();
useEffect(() => {
Customer.fetchAssociatedClients(id).then(res => {
if (res.XCmdrCode === 0) {
// setClient(res.XCmdrResult || []);
const initDatas = [...client2];
// const getData = mapAllData([...initDatas], id); // 初始化数据
console.log('initDatas', initDatas);
// console.log('getData', getData);
const datap = getParentNode([...client2], id);
const openNodeIds = datap.map(item => item.id); // 所有父节点
console.log('datap', datap);
console.log('openNode', openNodeIds);
const pids = changeAllNodes(initDatas, openNodeIds);
console.log('pids', pids);
setClient(pids);
}
});
}, [id]);
const clickAllData = (arr, curId) => {
let arrDatas = [];
const getTreeItem = (data, id) => {
arrDatas = data.map(item => {
const newItem = item;
if (Number(id) === Number(item?.id)) {
newItem.collapse = !newItem.collapse;
}
if (item.children) {
getTreeItem(item.children, id);
}
return { ...item };
});
};
getTreeItem(arr, curId);
return arrDatas;
};
const changeData = item => {
console.log('item', item);
const getDatas = [...client];
const changeDatas = clickAllData(getDatas, item?.id);
setClient(changeDatas);
};
return (
<View className="associated-client-container">
<View className="client-tree-wrap">{renderTreeNodes(client, id, changeData)}</View>
</View>
);
};
export default AssociatedClient;