Skip to content

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

fix: 修改初始值

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