Skip to content

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

fix: 修改初始值

parent 5e8e57d8
Show whitespace changes
Inline Side-by-side
Showing with 212 additions and 155 deletions
config/env.config.js
View file @ 0d105a36
const isProduction = process.env.NODE_ENV === 'production';
const isPre = process.env.PRE_ENV === 'pre';
const environment = 'xyqb';
const environment = 'sc';
const envAPi = {
api: `https://security-${environment}.liangkebang.net`,
kdspOpApi: `https://sc-merchant-api-${environment}.liangkebang.net`,
......
src/components/CustomTree/CTreeNode.jsx
View file @ 0d105a36
import React, { useState, useImperativeHandle, useRef, forwardRef, useEffect } from 'react';
import React, { forwardRef } from 'react';
import { Checkbox } from 'antd';
import { CaretRightOutlined, CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
import debounce from 'lodash/debounce';
import styles from './index.less';
const CustomTree = forwardRef((props, ref) => {
const CustomTree = forwardRef(props => {
const { treeData } = props;
const refNode = useRef(null);
const onChange = () => {
props.onChange(treeData.key, !treeData.checked);
};
const onVisible = debounce(e => {
e.stopPropagation();
props.onVisibleChildren(treeData.key, !treeData.visibleChildren, treeData.children);
e.persist();
props.onVisibleChildren(
treeData.key,
!treeData.visibleChildren,
treeData.children,
treeData.checked,
);
}, 100);
const renderIcon = () => {
......@@ -30,21 +34,9 @@ const CustomTree = forwardRef((props, ref) => {
}
return <span />;
};
// treeData.children && treeData.isLoading ? (
// [<LoadingOutlined />]
// ) : treeData.isLeaf ? (
// [
// <div onClick={onVisible}>
// {treeData.visibleChildren ? <CaretDownOutlined /> : <CaretRightOutlined />}
// </div>,
// ]
// ) : (
// <span />
// );
return (
<div className={styles['ccheck-wrapper']}>
<div className={styles['ccheck-box']} ref={refNode}>
<div className={styles['ccheck-wrapper']} key={`key${treeData.key}`}>
<div className={styles['ccheck-box']}>
<div className={styles['ccheck-box--expand']}>{renderIcon()}</div>
<Checkbox
onChange={onChange}
......@@ -52,12 +44,8 @@ const CustomTree = forwardRef((props, ref) => {
checked={treeData.checked}
>
{props.label}
{treeData.value.length > 0 ? `(${treeData.value.length})` : ''}
{treeData.value && treeData.value.length > 0 ? `(${treeData.value.length})` : ''}
</Checkbox>
{(treeData.visibleChildren && treeData.children && treeData.children.length && (
<div className={styles['ccheck-box--childrens']}>{props.children}</div>
)) ||
''}
</div>
</div>
);
......
src/components/CustomTree/index.jsx
View file @ 0d105a36
/* eslint-disable no-unused-expressions */
import React, { useState, useEffect, useRef, forwardRef } from 'react';
import React, { useState, useEffect, forwardRef } from 'react';
import { Row, Col } from 'antd';
import { relativeTimeRounding } from 'moment';
import styles from './index.less';
import CTreeNode from './CTreeNode';
import { deepClone } from '@/utils/utils';
// import { deepClone } from '@/utils/utils';
const CustomTree = forwardRef(props => {
const refNode = useRef();
const [treeData, setTreeData] = useState([]);
const [childrenList, setChildrenList] = useState([]);
const [treeValue, setTreeValue] = useState([]);
// 获取选中的值
const getCheckValue = (list, isFrist) => {
const arr = [];
const getChildrenCheckValue = childrens => {
childrens.forEach(item => {
if (item.checked) {
arr.push({ ...item, [props.valueKey]: item.key });
} else if (item.children && !isFrist) {
getChildrenCheckValue(item.children);
}
});
};
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.value = getCheckValue(item.children, 1);
} else if (item.children) {
checkfn(item.children);
}
});
};
props.value && props.value.length && checkfn(props.value, json);
};
const updateChildren = (list, isChecked) => {
list.forEach(item => {
......@@ -51,9 +82,17 @@ const CustomTree = forwardRef(props => {
list.forEach(node => {
if (node.key === ckey) {
node.checked = isChecked;
if (!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) {
......@@ -65,13 +104,6 @@ const CustomTree = forwardRef(props => {
return key;
};
const onChange = (ckey, isChecked) => {
const datas = [...treeData];
changeChecked(datas, ckey, isChecked);
updateTreeData(datas);
setTreeData(datas);
};
const updateVisibleChildren = (list, visible) => {
list.forEach(item => {
item.visibleChildren = false;
......@@ -104,22 +136,38 @@ const CustomTree = forwardRef(props => {
return key;
};
const filterData = arr => {
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 checked = props.value.some(val => +val[props.valueKey || 'key'] === +item.addrId);
list.push({
const json = {
label: item.addrName,
key: +item.addrId,
level: item.addrLevel,
value: [],
checked,
checked: parentChecked || false,
indeterminate: false,
children: [],
isLeaf: true,
isLoading: false,
// value: props.templateData.list.filter(item => item.)
});
};
if (!parentChecked) {
getIsChecked(item.addrId, json);
}
list.push(json);
});
return list;
};
......@@ -151,17 +199,34 @@ const CustomTree = forwardRef(props => {
});
};
const onVisibleChildren = async (ckey, visible, children) => {
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 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));
arr = appendTreeData(arr, ckey, filterData(res, parentChecked));
}
}
updateVisible(arr, ckey, visible);
updateTreeData(arr);
setChildrenList(getChildrenList(arr));
setTreeData(arr);
};
......@@ -169,15 +234,12 @@ const CustomTree = forwardRef(props => {
data &&
data.map(item => (
<CTreeNode
ref={refNode}
label={item.label}
onChange={onChange}
onVisibleChildren={onVisibleChildren}
key={item.key}
treeData={item}
>
{(item.children && item.children.length && renderTreeNodes(item.children, item)) || ''}
</CTreeNode>
/>
));
const handleMouseUp = e => {
......@@ -187,29 +249,66 @@ 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 = {
value: item.value || [],
level,
visibleChildren: false,
checked: props.value.some(val => val[props.valueKey || 'key'] === item.key),
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, level + 1);
}
return json;
});
const initTreeValue = (arr = []) =>
arr.forEach(item => {
item.checked = props.value.some(val => +val[props.valueKey || 'key'] === +item.key);
if (item.children) {
initTreeValue(item.children);
}
});
useEffect(() => {
const datas = [...treeData];
console.log('props.value :>> ', props.value);
fitTreeValue();
initTreeValue(datas);
updateTreeData(datas);
setTreeData(datas);
}, [props.value]);
useEffect(() => {
const arr = initTreeData(props.treeData, 1);
setTreeData(arr);
}, [props.value, props.treeData]);
}, [props.treeData]);
useEffect(() => {
window.addEventListener('mouseup', handleMouseUp);
......@@ -218,31 +317,42 @@ 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">
{treeData.length &&
{(treeData.length &&
treeData.map(item => (
<Col span={7}>
<Col span={7} key={`col${item.key}`}>
<div className={styles['tree-box--wrapper']}>
<CTreeNode
ref={refNode}
label={item.label}
onChange={onChange}
onVisibleChildren={onVisibleChildren}
key={item.key}
treeData={item}
>
{(item.children && item.children.length && (
></CTreeNode>
{(item.visibleChildren && childrenList && childrenList.length && (
<div className={styles['tree-children-box']}>
{childrenList.map(arr => (
<div className={styles['tree-children-wrapper']}>
{renderTreeNodes(item.children, item) || ''}
{renderTreeNodes(arr) || ''}
</div>
))}
</div>
)) ||
''}
</CTreeNode>
</div>
</Col>
))}
))) ||
''}
</Row>
</div>
);
......
src/components/CustomTree/index.less
View file @ 0d105a36
.tree-box {
position: relative;
:global(.ant-col) {
display: flex;
}
&--wrapper {
position: relative;
}
}
.ccheck-box {
position: relative;
......@@ -15,7 +21,7 @@
cursor: pointer;
}
&--childrens {
position: absolute;
position: relative;
left: 100%;
z-index: 2;
display: flex;
......@@ -30,17 +36,24 @@
}
}
}
// .tree-children-box {
// position: absolute;
// left: 100%;
// z-index: 2;
// background-color: #fff;
// }
// .tree-children-wrapper {
// position: relative;
// background-color: #fff;
// box-shadow: 0 0 3px #ccc;
// }
// .ccheck-wrapper {
// position: relative;
// }
.tree-children-box {
position: absolute;
top: 0;
left: 100%;
z-index: 2;
display: flex;
padding: 0 10px;
background-color: #fff;
box-shadow: 0 0 3px #ccc;
}
.tree-children-wrapper {
display: flex;
flex-direction: column;
max-height: 220px;
padding-left: 5px;
overflow-y: auto;
border-left: 1px solid #ccc;
&:first-child {
border: 0;
}
}
src/pages/distributionArea/addArea/index.jsx
View file @ 0d105a36
......@@ -4,22 +4,16 @@ import { Modal, Input, Select, Cascader, Tag, notification, Tree, Col, Row } fro
import React, { useState, useEffect } from 'react';
import { el } from 'date-fns/locale';
import { areaList, getAddTemplate, forbiddenAddress } from '../services';
import { treeDataList } from '../data';
// import { treeDataList } from '../data';
import CustomTree from '@/components/CustomTree';
const { Option } = Select;
const { TreeNode } = Tree;
const AddAreaModal = props => {
const {
visible,
form: { getFieldDecorator, validateFields, resetFields, setFieldsValue },
templateData,
} = props;
const [addList, setAddList] = useState([]);
const [selectedList, setSelectedList] = useState([]);
const [selected, setSelect] = useState([]);
const [expandedKeys, setExpandedKeys] = useState([]);
const [treeData, setTreeData] = useState([]);
const formItemLayout = {
......@@ -48,24 +42,18 @@ const AddAreaModal = props => {
};
const onCancel = () => {
setSelectedList([]);
resetFields();
setSelect([]);
props.onSubmit();
};
const handleOk = async () => {
const { length } = selectedList;
// if (!selectedList.length) {
// notification.error({ message: '请选择限制区域！' });
// return;
// }
const handleOk = () => {
validateFields(async (error, fieldsValue) => {
const newData = [];
selectedList.map(itemData =>
console.log('fieldsValue :>> ', fieldsValue);
fieldsValue.list.map(itemData =>
newData.push({
addressId: itemData.addressId,
addressLevel: itemData.addressLevel,
addressName: itemData.addressName,
addressId: itemData.key,
addressLevel: itemData.level,
addressName: itemData.label,
}),
);
if (!error) {
......@@ -92,65 +80,23 @@ const AddAreaModal = props => {
}
});
};
// 判断是否重复
// const getChilds = select => {
// const reslutData = selectedList.filter(
// item =>
// !select.addressName.includes(item.addressName) &&
// !item.addressName.includes(select.addressName),
// );
// reslutData.push(select);
// return reslutData;
// };
// const renderTreeNodes = data =>
// data.map(item => {
// if (item.children) {
// return (
// <TreeNode title={item.name} key={item.key} dataRef={item}>
// {renderTreeNodes(item.children)}
// </TreeNode>
// );
// }
// return <TreeNode key={item.key} {...item} />;
// });
const updateTreeData = (list, key, children) =>
list.map(node => {
if (node.key === key) {
return {
...node,
children,
};
}
if (node.children) {
return {
...node,
children: updateTreeData(node.children, key, children),
};
}
return node;
});
// const onExpand = expandedKeysValue => {
// console.log('onExpand', expandedKeysValue);
// setExpandedKeys(expandedKeysValue);
// };
const onLoadData = async ({ key, children }) => {
console.log('key :>> ', key);
const res = await areaList({ parentId: key });
return res || [];
// if (!res || !res.length) {
// return;
// }
// setTreeData(origin =>
// updateTreeData(origin, key, filterData(res)),
// );
};
useEffect(() => {
// getAreaList();
if (props.templateData) {
console.log('props.templateData :>> ', props.templateData);
setSelectedList(props.templateData.list);
let arr = [];
const dealData = list =>
list.map(item => {
item.checked = item.isForbidden;
item.children && item.children.length && dealData(item.children);
return item;
});
arr = dealData(props.templateData.list || []);
setSelectedList(arr);
}
}, [props.templateData]);
......@@ -176,8 +122,8 @@ const AddAreaModal = props => {
</Form.Item>
<Form.Item label="限制配送区域">
{getFieldDecorator('list', {
rules: [{ required: true, message: '请选择限制配送区域!' }],
initialValue: templateData.list,
rules: [{ required: true, message: '请选择限制配送区域!', type: 'array' }],
initialValue: selectedList,
})(<CustomTree treeData={treeData} loadData={onLoadData} valueKey="addressId" />)}
</Form.Item>
</Form>
......
src/pages/distributionArea/index.jsx
View file @ 0d105a36
......@@ -55,7 +55,7 @@ const TableList = props => {
),
]}
/>
<AddArea visible={visible} onSubmit={reload} templateData={templateData} />
{visible && <AddArea visible={visible} onSubmit={reload} templateData={templateData} />}
</PageHeaderWrapper>
);
};
......
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