Skip to content

M
merchant-manage-ui
Commit 7d9070cb authored by 武广's avatar 武广
Browse files
Options

feat: 添加初始化tree

parent 0d105a36
Show whitespace changes
Inline Side-by-side
Showing with 164 additions and 176 deletions
src/components/CustomTree/CTreeNode.jsx
View file @ 7d9070cb
......@@ -8,7 +8,7 @@ const CustomTree = forwardRef(props => {
const { treeData } = props;
const onChange = () => {
props.onChange(treeData.key, !treeData.checked);
props.onChange(treeData.key, !treeData.checked, treeData.level);
};
const onVisible = debounce(e => {
......
src/components/CustomTree/index.jsx
View file @ 7d9070cb
......@@ -3,13 +3,33 @@ import React, { useState, useEffect, forwardRef } from 'react';
import { Row, Col } from 'antd';
import styles from './index.less';
import CTreeNode from './CTreeNode';
// import { deepClone } from '@/utils/utils';
const CustomTree = forwardRef(props => {
const [treeData, setTreeData] = useState([]);
const [childrenList, setChildrenList] = useState([]);
const [treeValue, setTreeValue] = useState([]);
const getChildrenList = list => {
const arr = [];
const findArr = childrens => {
childrens.forEach(node => {
if (node.children && node.children.length) {
node.visibleChildren && arr.push(node.children);
findArr(node.children);
}
});
};
findArr(list);
return arr;
};
const ChangeVal = (list, key, v, keyName) => {
list.forEach(node => {
if (node.key === key) {
node[keyName] = v;
} else if (node.children && node.children.length) {
ChangeVal(node.children, key, v);
}
});
};
// 获取选中的值
const getCheckValue = (list, isFrist) => {
const arr = [];
......@@ -24,14 +44,13 @@ const CustomTree = forwardRef(props => {
};
getChildrenCheckValue(list);
};
// 获取默认值是否选中
const getIsChecked = (key, json) => {
const checkfn = list => {
list.forEach(item => {
if (+item[props.valueKey || 'key'] === +key) {
json.checked = !!item.checked;
json.indeterminate = true;
json.indeterminate = !item.checked;
json.value = getCheckValue(item.children, 1);
} else if (item.children) {
checkfn(item.children);
......@@ -40,69 +59,44 @@ const CustomTree = forwardRef(props => {
};
props.value && props.value.length && checkfn(props.value, json);
};
const updateChildren = (list, isChecked) => {
list.forEach(item => {
item.indeterminate = isChecked;
item.checked = isChecked;
if (item.children && item.children.length) {
item.value = isChecked ? item.children.map(c => c.key) : [];
updateChildren(item.children, isChecked);
} else {
item.value = isChecked ? [item.key] : [];
}
});
const filterData = (arr, parentChecked) => {
const list = [];
arr.forEach(item => {
const json = {
label: item.addrName,
key: +item.addrId,
level: item.addrLevel,
value: [],
checked: parentChecked || false,
indeterminate: false,
children: [],
isLeaf: true,
isLoading: false,
};
const updateTreeData = list => {
list.forEach(node => {
let cksel = false;
let cklen = 0;
const value = [];
if (node.children && node.children.length) {
updateTreeData(node.children);
let indeterminate = false;
node.children.forEach(item => {
if (node.checked || item.checked) {
value.push(item.key);
}
item.indeterminate && (indeterminate = true);
});
cklen = value.length;
node.checked = cklen === node.children.length;
cksel = cklen === node.children.length || indeterminate;
if (!parentChecked) {
getIsChecked(item.addrId, json);
}
node.indeterminate = cklen > 0 || cksel;
node.value = value;
list.push(json);
});
return list;
};
const changeChecked = (list, ckey, isChecked, pkey) => {
let key = '';
list.forEach(node => {
if (node.key === ckey) {
node.checked = isChecked;
const values = [...treeValue];
if (isChecked) {
const obj = { ...node };
obj.children = [];
values.push(obj);
} else {
key = pkey;
const index = treeValue.findIndex(item => item.key === node.key);
index > -1 && values.splice(index, 1);
}
setTreeValue(values);
node.children && node.children.length && updateChildren(node.children, isChecked);
} else if (node.children && node.children.length) {
if (changeChecked(node.children, ckey, isChecked, node.key) === node.key) {
node.checked = false;
key = pkey;
const appendTreeData = (list, key, children) =>
list.map(node => {
if (node.key === key) {
return {
...node,
children: children.length ? children : undefined,
};
}
if (node.children) {
return {
...node,
children: appendTreeData(node.children, key, children),
};
}
return node;
});
return key;
};
const updateVisibleChildren = (list, visible) => {
list.forEach(item => {
......@@ -136,98 +130,107 @@ const CustomTree = forwardRef(props => {
return key;
};
const onChange = (ckey, isChecked) => {
const datas = [...treeData];
changeChecked(datas, ckey, isChecked);
updateTreeData(datas);
// updateVisible(datas, ckey, true);
console.log('datas :>> ', datas);
console.log('treeValue :>> ', treeValue);
// props.onChange(getCheckValue(datas));
setTreeData(datas);
// setTimeout(() => {
// props.onChange(treeValue);
// }, 10);
};
const filterData = (arr, parentChecked) => {
const list = [];
arr.forEach(item => {
const json = {
label: item.addrName,
key: +item.addrId,
level: item.addrLevel,
value: [],
checked: parentChecked || false,
indeterminate: false,
children: [],
isLeaf: true,
isLoading: false,
};
if (!parentChecked) {
getIsChecked(item.addrId, json);
const onVisibleChildren = async (ckey, visible, children, parentChecked) => {
let arr = [...treeData];
if (children && !children.length && typeof props.loadData === 'function') {
ChangeVal(arr, ckey, true, 'isLoading');
setTreeData(arr);
const res = await props.loadData({ key: ckey, children });
if (res && res.length) {
arr = appendTreeData(arr, ckey, filterData(res, parentChecked));
}
list.push(json);
});
return list;
};
const appendTreeData = (list, key, children) =>
list.map(node => {
if (node.key === key) {
return {
...node,
children: children.length ? children : undefined,
};
}
if (node.children) {
return {
...node,
children: appendTreeData(node.children, key, children),
updateVisible(arr, ckey, visible);
setChildrenList(getChildrenList(arr));
setTreeData(arr);
};
const updateChildren = (list, isChecked) => {
list.forEach(item => {
item.indeterminate = !isChecked;
item.checked = isChecked;
if (item.children && item.children.length) {
item.value = isChecked ? item.children.map(c => c.key) : [];
updateChildren(item.children, isChecked);
} else {
item.value = isChecked ? [item.key] : [];
}
return node;
});
};
const ChangeVal = (list, key, v, keyName) => {
const changeChecked = (list, ckey, isChecked, pkey) => {
let key = '';
list.forEach(node => {
if (node.key === key) {
node[keyName] = v;
if (node.key === ckey) {
node.checked = isChecked;
key = pkey;
node.children && node.children.length && updateChildren(node.children, isChecked);
} else if (node.children && node.children.length) {
ChangeVal(node.children, key, v);
if (changeChecked(node.children, ckey, isChecked, node.key) === node.key) {
if (!isChecked) {
node.checked = false;
} else {
node.checked = node.children.every(item => item.checked);
if (node.checked) {
node.value = [];
// updateChildren(node.children, true);
// console.log('node :>> ', ...node.children);
}
}
key = pkey;
node.indeterminate = !node.checked;
}
}
});
return key;
};
const getChildrenList = list => {
// 获取选中的值
const getCheckTreeValue = list => {
const arr = [];
const findArr = childrens => {
childrens.forEach(node => {
if (node.children && node.children.length) {
node.visibleChildren && arr.push(node.children);
findArr(node.children);
const getChildrenCheckValue = (childrens, json, values = []) => {
childrens.forEach(item => {
if (item.checked || item.indeterminate) {
const obj = { ...item };
obj.children = [];
json.children.push(obj);
if (!item.checked) {
const valueArr = values.find(val => val.key === item.key) || {};
if (item.children && item.children.length) {
getChildrenCheckValue(item.children, obj, valueArr.children);
} else if (valueArr && valueArr.key) {
obj.children = valueArr.children;
}
}
}
});
};
findArr(list);
list.forEach(item => {
if (item.checked || item.indeterminate) {
const obj = { ...item };
obj.children = [];
if (!item.checked) {
const valueArr = props.value.find(val => val.key === item.key) || {};
if (item.children && item.children.length) {
getChildrenCheckValue(item.children, obj, valueArr.children);
} else if (valueArr && valueArr.key) {
obj.children = valueArr.children;
}
}
arr.push(obj);
}
});
return arr;
};
const onVisibleChildren = async (ckey, visible, children, parentChecked) => {
let arr = [...treeData];
console.log('arr :>> ', arr);
if (children && !children.length && typeof props.loadData === 'function') {
ChangeVal(arr, ckey, true, 'isLoading');
setTreeData(arr);
const res = await props.loadData({ key: ckey, children });
if (res && res.length) {
arr = appendTreeData(arr, ckey, filterData(res, parentChecked));
}
const onChange = (ckey, isChecked, level) => {
const datas = [...treeData];
changeChecked(datas, ckey, isChecked);
const values = getCheckTreeValue(datas, isChecked);
if (level === 1) {
onVisibleChildren('', false);
}
updateVisible(arr, ckey, visible);
updateTreeData(arr);
setChildrenList(getChildrenList(arr));
setTreeData(arr);
props.onChange(values);
};
const renderTreeNodes = data =>
......@@ -249,25 +252,6 @@ const CustomTree = forwardRef(props => {
}
};
const fitTreeValue = () => {
const arr = [];
const fitChildrenTreeValue = list => {
list.forEach(item => {
if (typeof item.checked === 'boolean') {
if (item.checked) {
arr.push(item);
} else if (item.children && item.children.length) {
fitChildrenTreeValue(item.children);
}
} else {
arr.push(item);
}
});
};
fitChildrenTreeValue(props.value);
setTreeValue(arr);
};
const initTreeData = (arr = [], level) =>
arr.map(item => {
const json = {
......@@ -288,20 +272,21 @@ const CustomTree = forwardRef(props => {
return json;
});
const initTreeValue = (arr = []) =>
const initTreeValue = (arr = [], values = [], parentChecked) =>
arr.forEach(item => {
item.checked = props.value.some(val => +val[props.valueKey || 'key'] === +item.key);
if (item.children) {
initTreeValue(item.children);
const valueObj = values.find(val => val.key === item.key) || {};
item.checked =
(typeof parentChecked === 'boolean' && parentChecked) || valueObj.checked || false;
item.indeterminate = valueObj.indeterminate || false;
item.value = valueObj.children || [];
if (item.children && item.children.length) {
initTreeValue(item.children, valueObj.children, item.checked);
}
});
useEffect(() => {
const datas = [...treeData];
console.log('props.value :>> ', props.value);
fitTreeValue();
initTreeValue(datas);
updateTreeData(datas);
initTreeValue(datas, props.value);
setTreeData(datas);
}, [props.value]);
......@@ -310,6 +295,7 @@ const CustomTree = forwardRef(props => {
setTreeData(arr);
}, [props.treeData]);
// 委托 - 点击别的地方关闭子层
useEffect(() => {
window.addEventListener('mouseup', handleMouseUp);
return () => {
......@@ -317,14 +303,6 @@ const CustomTree = forwardRef(props => {
};
}, [treeData]);
useEffect(
e => {
console.log('e :>> ', e);
// props.onChange(treeValue);
},
[treeValue],
);
return (
<div className={styles['tree-box']} id="my-custom-tree-box">
<Row justify="space-between">
......
src/pages/distributionArea/addArea/index.jsx
View file @ 7d9070cb
......@@ -48,15 +48,22 @@ const AddAreaModal = props => {
const handleOk = () => {
validateFields(async (error, fieldsValue) => {
const newData = [];
console.log('fieldsValue :>> ', fieldsValue);
fieldsValue.list.map(itemData =>
const getValues = list => {
list.forEach(itemData => {
if (itemData.checked) {
newData.push({
addressId: itemData.key,
addressLevel: itemData.level,
addressName: itemData.label,
}),
);
});
} else if (itemData.children && itemData.children.length) {
getValues(itemData.children);
}
});
};
if (!error) {
console.log('fieldsValue :>> ', fieldsValue);
getValues(fieldsValue.list);
if (props.templateData.status) {
const data = await forbiddenAddress({
templateId: props.templateData.id,
......@@ -91,6 +98,9 @@ const AddAreaModal = props => {
let arr = [];
const dealData = list =>
list.map(item => {
item.key = +item.addressId;
item.label = item.addressName;
item.indeterminate = !item.isForbidden;
item.checked = item.isForbidden;
item.children && item.children.length && dealData(item.children);
return item;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment