Skip to content

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

feat: 添加地址组件

parent 2450732e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 361 additions and 362 deletions
src/components/CustomTree/CTreeNode.jsx
View file @ 5e8e57d8
import React, { useState, useImperativeHandle, useRef, forwardRef, useEffect } from 'react'; import React, { useState, useImperativeHandle, useRef, forwardRef, useEffect } from 'react';
import { Checkbox } from 'antd'; import { Checkbox } from 'antd';
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons'; import { CaretRightOutlined, CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
import debounce from 'lodash/debounce';
import styles from './index.less'; import styles from './index.less';
const CheckboxGroup = Checkbox.Group;
const CustomTree = forwardRef((props, ref) => { const CustomTree = forwardRef((props, ref) => {
const [checked, setChecked] = useState(false); const { treeData } = props;
const [checkExpand, setCheckExpand] = useState(false);
const refNode = useRef(null); const refNode = useRef(null);
const onChange = e => { const onChange = () => {
console.log('props.treeData :>> ', props.treeData); props.onChange(treeData.key, !treeData.checked);
props.onChange(
{
key: props.treeData.key,
children: props.children,
},
!checked,
);
setChecked(!checked);
};
const onClose = () => {
setCheckExpand(false);
}; };
useImperativeHandle(ref, () => ({ const onVisible = debounce(e => {
onClose, e.stopPropagation();
})); props.onVisibleChildren(treeData.key, !treeData.visibleChildren, treeData.children);
}, 100);
// useEffect(() => { const renderIcon = () => {
// // console.log('props.hideChildren :>> ', props.hideChildren); if (treeData.children && treeData.isLoading) {
// // setCheckExpand(false); return <LoadingOutlined />;
// console.log('props.treeData :>> ', props.treeData); }
// }, []) if (treeData.isLeaf) {
return (
<div onClick={onVisible}>
{treeData.visibleChildren ? <CaretDownOutlined /> : <CaretRightOutlined />}
</div>
);
}
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-box']} ref={refNode}> <div className={styles['ccheck-box']} ref={refNode}>
{props.children && ( <div className={styles['ccheck-box--expand']}>{renderIcon()}</div>
<div className={styles['ccheck-box--expand']} onClick={() => setCheckExpand(!checkExpand)}>
{checkExpand ? <CaretDownOutlined /> : <CaretRightOutlined />}
</div>
)}
<Checkbox <Checkbox
onChange={onChange} onChange={onChange}
indeterminate={ indeterminate={!treeData.checked && treeData.indeterminate}
!props.checked && props.treeData.value ? props.treeData.value.length > 0 : false checked={treeData.checked}
}
checked={props.checked}
> >
{props.label} {props.label}
{`${props.checked}`} {treeData.value.length > 0 ? `(${treeData.value.length})` : ''}
</Checkbox> </Checkbox>
{checkExpand && <div className={styles['ccheck-box--childrens']}>{props.children}</div>} {(treeData.visibleChildren && treeData.children && treeData.children.length && (
<div className={styles['ccheck-box--childrens']}>{props.children}</div>
)) ||
''}
</div>
</div> </div>
); );
}); });
......
src/components/CustomTree/index.jsx
View file @ 5e8e57d8
This diff is collapsed.
src/components/CustomTree/index.less
View file @ 5e8e57d8
...@@ -30,3 +30,17 @@ ...@@ -30,3 +30,17 @@
} }
} }
} }
// .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;
// }
src/pages/distributionArea/addArea/CheckboxList.jsx deleted 100644 → 0
View file @ 2450732e
import React, { useRef, useState } from 'react';
import { Row, Col, Tree } from 'antd';
import { treeDataList } from '../data';
import CustomTree from '@/components/CustomTree';
const { TreeNode } = Tree;
const { CTreeNode } = CustomTree;
const CheckboxList = props => {
const [expandedKeys, setExpandedKeys] = useState([]);
const [treeData, setTreeData] = useState(treeDataList);
const refTreeNode = useRef();
const renderTreeNodes = data =>
data.map(item => {
if (item.children) {
return (
<CTreeNode ref={refTreeNode} label={item.title} key={item.key} dataRef={item}>
{renderTreeNodes(item.children)}
</CTreeNode>
);
}
return <CTreeNode ref={refTreeNode} key={item.key} label={item.title} {...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 = ({ key, children }) =>
new Promise(resolve => {
if (children) {
resolve();
return;
}
setTimeout(() => {
setTreeData(origin =>
updateTreeData(origin, key, [
{ title: 'Child Node', key: `${key}-0` },
{ title: 'Child Node', key: `${key}-1` },
]),
);
resolve();
}, 1000);
});
return (
// <CustomTree>
// <Row justify="space-between">
// {treeData && treeData.length && treeData.map(item =>
// <Col span={7}>
// <CTreeNode treeData={item} ref={refTreeNode} label={item.title}>
// {item.children && renderTreeNodes(item.children)}
// </CTreeNode>
// </Col>,
// )}
// </Row>
// </CustomTree>
<CustomTree treeData={treeData} />
);
};
export default CheckboxList;
src/pages/distributionArea/addArea/index.jsx
View file @ 5e8e57d8
...@@ -5,7 +5,7 @@ import React, { useState, useEffect } from 'react'; ...@@ -5,7 +5,7 @@ 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 CheckboxList from './CheckboxList'; import CustomTree from '@/components/CustomTree';
const { Option } = Select; const { Option } = Select;
const { TreeNode } = Tree; const { TreeNode } = Tree;
...@@ -20,7 +20,7 @@ const AddAreaModal = props => { ...@@ -20,7 +20,7 @@ const AddAreaModal = props => {
const [selectedList, setSelectedList] = useState([]); const [selectedList, setSelectedList] = useState([]);
const [selected, setSelect] = useState([]); const [selected, setSelect] = useState([]);
const [expandedKeys, setExpandedKeys] = useState([]); const [expandedKeys, setExpandedKeys] = useState([]);
const [treeData, setTreeData] = useState(treeDataList); const [treeData, setTreeData] = useState([]);
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
...@@ -30,15 +30,19 @@ const AddAreaModal = props => { ...@@ -30,15 +30,19 @@ const AddAreaModal = props => {
span: 16, span: 16,
}, },
}; };
const loadProvice = async () => {
const data = await areaList(); const filterData = arr =>
if (data && data.length) { arr.map(item => ({
const arr = data.map(item => ({ label: item.addrName,
title: item.addrName, key: Number(item.addrId),
key: item.addrId,
level: item.addrLevel, level: item.addrLevel,
children: [], children: [],
// value: props.templateData.list.filter(item => item.)
})); }));
const loadProvice = async () => {
const data = await areaList();
if (data && data.length) {
const arr = filterData(data);
setTreeData(arr); setTreeData(arr);
} }
}; };
...@@ -89,27 +93,27 @@ const AddAreaModal = props => { ...@@ -89,27 +93,27 @@ const AddAreaModal = props => {
}); });
}; };
// 判断是否重复 // 判断是否重复
const getChilds = select => { // const getChilds = select => {
const reslutData = selectedList.filter( // const reslutData = selectedList.filter(
item => // item =>
!select.addressName.includes(item.addressName) && // !select.addressName.includes(item.addressName) &&
!item.addressName.includes(select.addressName), // !item.addressName.includes(select.addressName),
); // );
reslutData.push(select); // reslutData.push(select);
return reslutData; // return reslutData;
}; // };
const renderTreeNodes = data => // const renderTreeNodes = data =>
data.map(item => { // data.map(item => {
if (item.children) { // if (item.children) {
return ( // return (
<TreeNode title={item.name} key={item.key} dataRef={item}> // <TreeNode title={item.name} key={item.key} dataRef={item}>
{renderTreeNodes(item.children)} // {renderTreeNodes(item.children)}
</TreeNode> // </TreeNode>
); // );
} // }
return <TreeNode key={item.key} {...item} />; // return <TreeNode key={item.key} {...item} />;
}); // });
const updateTreeData = (list, key, children) => const updateTreeData = (list, key, children) =>
list.map(node => { list.map(node => {
if (node.key === key) { if (node.key === key) {
...@@ -126,36 +130,33 @@ const AddAreaModal = props => { ...@@ -126,36 +130,33 @@ const AddAreaModal = props => {
} }
return node; return node;
}); });
const onExpand = expandedKeysValue => { // const onExpand = expandedKeysValue => {
console.log('onExpand', expandedKeysValue); // console.log('onExpand', expandedKeysValue);
setExpandedKeys(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)),
// );
}; };
const onLoadData = ({ key, children }) =>
new Promise(resolve => {
if (children) {
resolve();
return;
}
setTimeout(() => {
setTreeData(origin =>
updateTreeData(origin, key, [
{ title: 'Child Node', key: `${key}-0` },
{ title: 'Child Node', key: `${key}-1` },
]),
);
resolve();
}, 1000);
});
useEffect(() => { useEffect(() => {
// getAreaList(); // getAreaList();
if (props.templateData) { if (props.templateData) {
console.log('props.templateData :>> ', props.templateData);
setSelectedList(props.templateData.list); setSelectedList(props.templateData.list);
} }
}, [props.templateData]); }, [props.templateData]);
// useEffect(() => { useEffect(() => {
// props.visible && loadProvice(); props.visible && loadProvice();
// }, [props.visible]) }, [props.visible]);
return ( return (
<Modal <Modal
...@@ -173,7 +174,12 @@ const AddAreaModal = props => { ...@@ -173,7 +174,12 @@ const AddAreaModal = props => {
initialValue: templateData.templateName, initialValue: templateData.templateName,
})(<Input placeholder="请填写模板名称" maxLength={20} />)} })(<Input placeholder="请填写模板名称" maxLength={20} />)}
</Form.Item> </Form.Item>
<Form.Item label="限制配送区域">{getFieldDecorator('name')(<CheckboxList />)}</Form.Item> <Form.Item label="限制配送区域">
{getFieldDecorator('list', {
rules: [{ required: true, message: '请选择限制配送区域!' }],
initialValue: templateData.list,
})(<CustomTree treeData={treeData} loadData={onLoadData} valueKey="addressId" />)}
</Form.Item>
</Form> </Form>
</Modal> </Modal>
); );
......
src/pages/distributionArea/data.js
View file @ 5e8e57d8
...@@ -76,65 +76,65 @@ export const treeDataList = [ ...@@ -76,65 +76,65 @@ export const treeDataList = [
{ title: '0-0-0-2', key: '0-0-0-2', level: 3 }, { title: '0-0-0-2', key: '0-0-0-2', level: 3 },
], ],
}, },
// { {
// title: '0-0-1', title: '0-0-1',
// key: '0-0-1', key: '0-0-1',
// level: 2, level: 2,
// children: [ children: [
// { title: '0-0-1-0', key: '0-0-1-0', level: 3 }, { title: '0-0-1-0', key: '0-0-1-0', level: 3 },
// { title: '0-0-1-1', key: '0-0-1-1', level: 3 }, { title: '0-0-1-1', key: '0-0-1-1', level: 3 },
// { title: '0-0-1-2', key: '0-0-1-2', level: 3 }, { title: '0-0-1-2', key: '0-0-1-2', level: 3 },
// ], ],
// }, },
// { {
// title: '0-0-2', title: '0-0-2',
// key: '0-0-2', key: '0-0-2',
// level: 2, level: 2,
// }, },
],
},
{
title: '0-1',
key: '0-1',
level: 1,
children: [
{ title: '0-1-0-0', key: '0-1-0-0', level: 2 },
{ title: '0-1-0-1', key: '0-1-0-1', level: 2 },
{ title: '0-1-0-2', key: '0-1-0-2', level: 2 },
],
},
{
title: '0-2',
key: '0-2',
level: 1,
children: [
{
title: '0-2-0',
key: '0-2-0',
level: 2,
children: [
{ title: '0-2-0-0', key: '0-2-0-0', level: 3 },
{ title: '0-2-0-1', key: '0-2-0-1', level: 3 },
{ title: '0-2-0-2', key: '0-2-0-2', level: 3 },
],
},
{
title: '0-2-1',
key: '0-2-1',
level: 2,
children: [
{ title: '0-2-1-0', key: '0-2-1-0', level: 3 },
{ title: '0-2-1-1', key: '0-2-1-1', level: 3 },
{ title: '0-2-1-2', key: '0-2-1-2', level: 3 },
],
},
{
title: '0-2-2',
key: '0-2-2',
level: 2,
},
], ],
}, },
// {
// title: '0-1',
// key: '0-1',
// level: 1,
// children: [
// { title: '0-1-0-0', key: '0-1-0-0', level: 2 },
// { title: '0-1-0-1', key: '0-1-0-1', level: 2 },
// { title: '0-1-0-2', key: '0-1-0-2', level: 2 },
// ],
// },
// {
// title: '0-2',
// key: '0-2',
// level: 1,
// children: [
// {
// title: '0-2-0',
// key: '0-2-0',
// level: 2,
// children: [
// { title: '0-2-0-0', key: '0-2-0-0', level: 3 },
// { title: '0-2-0-1', key: '0-2-0-1', level: 3 },
// { title: '0-2-0-2', key: '0-2-0-2', level: 3 },
// ],
// },
// {
// title: '0-2-1',
// key: '0-2-1',
// level: 2,
// children: [
// { title: '0-2-1-0', key: '0-2-1-0', level: 3 },
// { title: '0-2-1-1', key: '0-2-1-1', level: 3 },
// { title: '0-2-1-2', key: '0-2-1-2', level: 3 },
// ],
// },
// {
// title: '0-2-2',
// key: '0-2-2',
// level: 2,
// },
// ],
// },
// { // {
// title: '0-2', // title: '0-2',
// key: '0-2', // key: '0-2',
......
src/pages/distributionArea/index.jsx
View file @ 5e8e57d8
...@@ -11,7 +11,7 @@ import { DISTRIBUTION_AREA } from '@/../config/permission.config'; ...@@ -11,7 +11,7 @@ import { DISTRIBUTION_AREA } from '@/../config/permission.config';
const TableList = props => { const TableList = props => {
const { permissions } = props; const { permissions } = props;
const canEditable = permissions[DISTRIBUTION_AREA.EDITABLE]; const canEditable = permissions[DISTRIBUTION_AREA.EDITABLE];
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(false);
const [templateData, settemplateData] = useState(''); const [templateData, settemplateData] = useState('');
const actionRef = useRef(); const actionRef = useRef();
const reload = () => { const reload = () => {
......
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