Skip to content

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

fix: 修改初始化数据

parent af0ee317
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 72 deletions
src/components/CustomTree/CTreeNode.jsx
View file @ 10d553b0
import React, { forwardRef } from 'react';
import { Checkbox } from 'antd';
import { CaretRightOutlined, CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
import { RightOutlined, DownOutlined, LoadingOutlined } from '@ant-design/icons';
import debounce from 'lodash/debounce';
import styles from './index.less';
......@@ -8,11 +8,12 @@ const CustomTree = forwardRef(props => {
const { treeData } = props;
const onChange = () => {
props.onChange(treeData.key, !treeData.checked, treeData.level);
props.onChange(treeData.key, !treeData.checked, treeData.level, treeData.children);
};
const onVisible = debounce(e => {
e.persist();
if (treeData.isLoading) return;
props.onVisibleChildren(
treeData.key,
!treeData.visibleChildren,
......@@ -27,25 +28,28 @@ const CustomTree = forwardRef(props => {
}
if (treeData.isLeaf) {
return (
<div onClick={onVisible}>
{treeData.visibleChildren ? <CaretDownOutlined /> : <CaretRightOutlined />}
<div onClick={onVisible} className={styles.CBIcon}>
{treeData.visibleChildren ? <DownOutlined /> : <RightOutlined />}
</div>
);
}
return <span />;
};
return (
<div className={styles['ccheck-wrapper']} key={`key${treeData.key}`}>
<div key={`key${treeData.key}`}>
<div className={styles['ccheck-box']}>
<div className={styles['ccheck-box--expand']}>{renderIcon()}</div>
<Checkbox
onChange={onChange}
indeterminate={!treeData.checked && treeData.indeterminate}
checked={treeData.checked}
>
/>
<div className={styles['ccheck-box--label']} onClick={onVisible}>
{props.label}
{treeData.value && treeData.value.length > 0 ? `(${treeData.value.length})` : ''}
</Checkbox>
{treeData.isLeaf && treeData.value && treeData.value.length > 0
? `(${treeData.value.length})`
: ''}
</div>
</div>
</div>
);
......
src/components/CustomTree/index.jsx
View file @ 10d553b0
......@@ -7,6 +7,15 @@ import CTreeNode from './CTreeNode';
const CustomTree = forwardRef(props => {
const [treeData, setTreeData] = useState([]);
const [childrenList, setChildrenList] = useState([]);
const [initValue, setInitValue] = useState([]);
const initChildrenStatus = arr =>
arr.map(item => {
const obj = initValue.find(val => val.key === item.key) || {};
item.checked = obj.checked || item.checked || false;
item.indeterminate = obj.indeterminate || item.indeterminate || false;
return item;
});
// 获取子列表
const getChildrenList = list => {
......@@ -14,7 +23,7 @@ const CustomTree = forwardRef(props => {
const findArr = childrens => {
childrens.forEach(node => {
if (node.children && node.children.length) {
node.visibleChildren && arr.push(node.children);
node.visibleChildren && arr.push(initChildrenStatus(node.children, node.checked));
findArr(node.children);
}
});
......@@ -84,22 +93,30 @@ const CustomTree = forwardRef(props => {
return list;
};
// 更改子复选框状态
const updateChildren = (list, isChecked) => {
list.forEach(item => {
item.indeterminate = false;
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 = [];
}
});
};
// 追加子树
const appendTreeData = (list, key, children) =>
list.map(node => {
const appendTreeData = (list, key, children, isChecked) =>
list.forEach(node => {
if (node.key === key) {
return {
...node,
children: children.length ? children : undefined,
};
}
if (node.children) {
return {
...node,
children: appendTreeData(node.children, key, children),
};
node.children = children.length ? children : [];
isChecked && (node.value = children);
updateChildren(node.children, isChecked);
} else if (node.children && node.children.length) {
appendTreeData(node.children, key, children, isChecked);
}
return node;
});
// 更新子树显示隐藏状态
......@@ -136,36 +153,27 @@ const CustomTree = forwardRef(props => {
return key;
};
// 异步获取数据
const getSyncLoadChildrens = async (arr, ckey, parentChecked) => {
const res = await props.loadData({ key: ckey });
if (res && res.length) {
appendTreeData(arr, ckey, filterData(res, parentChecked), parentChecked);
}
};
// 改变子树显示隐藏状态事件
const onVisibleChildren = async (ckey, visible, children, parentChecked) => {
let arr = [...treeData];
const 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));
}
await getSyncLoadChildrens(arr, ckey, parentChecked);
}
updateVisible(arr, ckey, visible);
setChildrenList(getChildrenList(arr));
setTreeData(arr);
};
// 更改子复选框状态
const updateChildren = (list, isChecked) => {
list.forEach(item => {
item.indeterminate = false;
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 changeChecked = (list, ckey, isChecked, pkey) => {
let key = '';
......@@ -180,9 +188,9 @@ const CustomTree = forwardRef(props => {
node.checked = false;
} else {
node.checked = node.children.every(item => item.checked);
if (node.checked) {
node.value = [];
}
// if (node.checked) {
// node.value = [];
// }
}
key = pkey;
}
......@@ -235,8 +243,11 @@ const CustomTree = forwardRef(props => {
};
// 切换选中状态事件
const onChange = (ckey, isChecked, level) => {
const onChange = async (ckey, isChecked, level, children) => {
const datas = [...treeData];
if (isChecked && children && !children.length && typeof props.loadData === 'function') {
await getSyncLoadChildrens(datas, ckey, isChecked);
}
changeChecked(datas, ckey, isChecked);
const values = getCheckTreeValue(datas, isChecked);
if (level === 1) {
......@@ -266,36 +277,21 @@ const CustomTree = forwardRef(props => {
}
};
// const initTreeData = (arr = [], values = [], level) =>
// arr.map(item => {
// const valueObj = values.find(val => val.key === item.key) || {};
// console.log('valueObj.children :>> ', valueObj.children);
// const json = {
// value: valueObj.children || item.value || [],
// level,
// visibleChildren: false,
// checked: false,
// indeterminate: false,
// label: item[props.labelName || 'label'],
// key: item[props.keyName || 'key'],
// isLeaf: true,
// isLoading: false,
// };
// getIsChecked(item.key, json);
// if (item.children) {
// json.children = initTreeData(item.children, valueObj.children, level + 1);
// }
// return json;
// });
// 初始化数初始化
const initTreeValue = (arr = [], values = [], parentChecked, level = 1) =>
const initTreeValue = (arr = [], values = [], parentChecked, level = 1) => {
const getValues = (item, valueObj) => {
if (item.checked && item.children && item.children.length) {
return item.children.map(c => c.key);
}
return (valueObj.children || []).map(c => c.key);
};
arr.forEach(item => {
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 || [];
item.value = getValues(item, valueObj);
item.isLeaf = typeof item.isLeaf === 'boolean' ? item.isLeaf : true;
item.isLoading = false;
item.visibleChildren = item.visibleChildren || false;
......@@ -304,11 +300,29 @@ const CustomTree = forwardRef(props => {
initTreeValue(item.children, valueObj.children, item.checked, level + 1);
}
});
};
const getInitValue = () => {
const arr = [];
const getDeepValue = list => {
list.forEach(item => {
const obj = { ...item };
delete obj.children;
arr.push(obj);
if (item.children && item.children.length) {
getDeepValue(item.children);
}
});
};
getDeepValue(props.value);
return arr;
};
useEffect(() => {
const datas = [...treeData];
initTreeValue(datas, props.value);
setTreeData(datas);
const arr = getInitValue();
setInitValue(arr);
}, [props.value]);
useEffect(() => {
......
src/components/CustomTree/index.less
View file @ 10d553b0
......@@ -35,6 +35,13 @@
margin-left: 0;
}
}
&--label {
padding: 0 10px;
cursor: pointer;
}
}
.CBIcon {
font-size: 12px;
}
.tree-children-box {
position: absolute;
......
src/pages/distributionArea/addArea/index.jsx
View file @ 10d553b0
......@@ -86,13 +86,12 @@ const AddAreaModal = props => {
}
});
};
const onLoadData = async ({ key, children }) => {
const onLoadData = async ({ key }) => {
const res = await areaList({ parentId: key });
return res || [];
};
useEffect(() => {
// getAreaList();
if (props.templateData) {
let arr = [];
const dealData = list =>
......@@ -118,7 +117,7 @@ const AddAreaModal = props => {
title={props.templateData.status ? '编辑限制区域配送模板' : '添加限制区域配送模板'}
maskClosable={false}
visible={visible}
width="1000px"
width="800px"
onCancel={() => onCancel()}
onOk={() => handleOk()}
>
......
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