|
@@ -22,7 +22,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons';
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
|
|
|
|
const AreaTree = ({
|
|
const AreaTree = ({
|
|
- checkSign,
|
|
|
|
|
|
+ checkSign, //是否是查看状态
|
|
spaceMap,
|
|
spaceMap,
|
|
checkedValues,
|
|
checkedValues,
|
|
radioValue,
|
|
radioValue,
|
|
@@ -122,64 +122,104 @@ const AreaTree = ({
|
|
allSpacesTemp.push(sitem.spaceId);
|
|
allSpacesTemp.push(sitem.spaceId);
|
|
return cnode;
|
|
return cnode;
|
|
});
|
|
});
|
|
|
|
+
|
|
node.children = children;
|
|
node.children = children;
|
|
treeDataTemp.push(node);
|
|
treeDataTemp.push(node);
|
|
}
|
|
}
|
|
setAllSpaces(allSpacesTemp);
|
|
setAllSpaces(allSpacesTemp);
|
|
|
|
+ console.log('treeDataTemptreeDataTemp', treeDataTemp);
|
|
setTreeData(treeDataTemp);
|
|
setTreeData(treeDataTemp);
|
|
}, [spaceMap]);
|
|
}, [spaceMap]);
|
|
|
|
|
|
const renderNode = (nodeData) => {
|
|
const renderNode = (nodeData) => {
|
|
return (
|
|
return (
|
|
<div className={styles.treeTitle}>
|
|
<div className={styles.treeTitle}>
|
|
- <div style={{ width: 210 - 24 * nodeData.level + 'px' }}> {nodeData.title}</div>
|
|
|
|
|
|
+ <div style={{ width: 210 - 24 * nodeData?.level + 'px' }}> {nodeData?.title}</div>
|
|
<div className={styles.residentSpan}>
|
|
<div className={styles.residentSpan}>
|
|
<Radio
|
|
<Radio
|
|
- value={nodeData.key}
|
|
|
|
disabled={checkSign == 'check'}
|
|
disabled={checkSign == 'check'}
|
|
- // checked={nodeData.radioChecked}
|
|
|
|
|
|
+ value={nodeData.key}
|
|
|
|
+ checked={nodeData.key == radioValue}
|
|
|
|
+ onChange={oneRadioChange}
|
|
>
|
|
>
|
|
- {nodeData.key == 'special' ? '不选择' : ''}
|
|
|
|
|
|
+ {nodeData?.key == 'special' ? '不选择' : ''}
|
|
</Radio>
|
|
</Radio>
|
|
</div>
|
|
</div>
|
|
<div className={styles.controlSpan}>
|
|
<div className={styles.controlSpan}>
|
|
- <Checkbox disabled={checkSign == 'check'} value={nodeData.key} onChange={onOneChange}>
|
|
|
|
- {nodeData.key == 'special' ? '全选' : ''}
|
|
|
|
|
|
+ <Checkbox
|
|
|
|
+ disabled={checkSign == 'check'}
|
|
|
|
+ value={nodeData.key}
|
|
|
|
+ checked={checkedValues.indexOf(nodeData.key) > -1}
|
|
|
|
+ onChange={oneCheckChange}
|
|
|
|
+ >
|
|
|
|
+ {nodeData?.key == 'special' ? '全选' : ''}
|
|
</Checkbox>
|
|
</Checkbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
};
|
|
};
|
|
|
|
|
|
- const onOneChange = (event) => {
|
|
|
|
- // debugger;
|
|
|
|
- // event.target.value event.target.checked
|
|
|
|
|
|
+ const oneCheckChange = (event) => {
|
|
|
|
+ console.log('event.target.value', event.target.value, event.target.checked);
|
|
|
|
+ var value = event.target.value;
|
|
|
|
+ var checkCopy = [...checkedValues];
|
|
|
|
+ if (event.target.checked) {
|
|
|
|
+ //选中
|
|
|
|
+ checkCopy.push(value);
|
|
|
|
+ if (value == 'special') {
|
|
|
|
+ //全选选中
|
|
|
|
+ setCheckedValues(allSpaces);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ checkCopy = checkedValues.filter((item) => {
|
|
|
|
+ return item != value;
|
|
|
|
+ });
|
|
|
|
+ if (value == 'special') {
|
|
|
|
+ //全选取消
|
|
|
|
+ setCheckedValues([]);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ setCheckedValues(checkCopy);
|
|
};
|
|
};
|
|
- const onRadioChange = (event) => {
|
|
|
|
|
|
+ const oneRadioChange = (event) => {
|
|
|
|
+ console.log('event.target.value', event.target.value, event.target.checked);
|
|
var value = event.target.value;
|
|
var value = event.target.value;
|
|
- setRadioValue(event.target.value);
|
|
|
|
|
|
+ setRadioValue(value);
|
|
|
|
+ var checkCopy = [...checkedValues];
|
|
var index = checkedValues.findIndex((ele) => ele === value);
|
|
var index = checkedValues.findIndex((ele) => ele === value);
|
|
if (index == -1) {
|
|
if (index == -1) {
|
|
- checkedValues.push(value);
|
|
|
|
|
|
+ checkCopy.push(value);
|
|
}
|
|
}
|
|
- setCheckedValues(checkedValues);
|
|
|
|
- };
|
|
|
|
- const onCheckboxChange = (values) => {
|
|
|
|
- debugger;
|
|
|
|
- var lastValue = values[values.length - 1];
|
|
|
|
- if (lastValue == 'special') {
|
|
|
|
- //全选选中
|
|
|
|
- setCheckedValues(allSpaces);
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- if (checkedValues.includes('special') && !values.includes('special')) {
|
|
|
|
- //全选取消
|
|
|
|
- setCheckedValues([]);
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
- setCheckedValues(values);
|
|
|
|
|
|
+ setCheckedValues(checkCopy);
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+ // const onRadioChange = (event) => {
|
|
|
|
+ // var value = event.target.value;
|
|
|
|
+ // setRadioValue(event.target.value);
|
|
|
|
+ // var index = checkedValues.findIndex((ele) => ele === value);
|
|
|
|
+ // if (index == -1) {
|
|
|
|
+ // checkedValues.push(value);
|
|
|
|
+ // }
|
|
|
|
+ // setCheckedValues(checkedValues);
|
|
|
|
+ // };
|
|
|
|
+ // const onCheckboxChange = (values) => {
|
|
|
|
+ // var lastValue = values[values.length - 1];
|
|
|
|
+ // if (lastValue == 'special') {
|
|
|
|
+ // //全选选中
|
|
|
|
+ // setCheckedValues(allSpaces);
|
|
|
|
+ // return;
|
|
|
|
+ // }
|
|
|
|
+ // if (checkedValues.includes('special') && !values.includes('special')) {
|
|
|
|
+ // //全选取消
|
|
|
|
+ // setCheckedValues([]);
|
|
|
|
+ // return;
|
|
|
|
+ // }
|
|
|
|
+ // setCheckedValues(values);
|
|
|
|
+ // };
|
|
|
|
+
|
|
const debounceHandle = (event) => {};
|
|
const debounceHandle = (event) => {};
|
|
return (
|
|
return (
|
|
<>
|
|
<>
|
|
@@ -194,23 +234,23 @@ const AreaTree = ({
|
|
<div className={styles.residentSpan}>常驻工区选择</div>
|
|
<div className={styles.residentSpan}>常驻工区选择</div>
|
|
<div className={styles.controlSpan}>可控工区选择</div>
|
|
<div className={styles.controlSpan}>可控工区选择</div>
|
|
</div>
|
|
</div>
|
|
- <Checkbox.Group onChange={onCheckboxChange} value={checkedValues}>
|
|
|
|
- <Radio.Group onChange={onRadioChange} value={radioValue}>
|
|
|
|
- <Tree
|
|
|
|
- height={310}
|
|
|
|
- defaultExpandedKeys={['0-0-0']}
|
|
|
|
- selectable={false}
|
|
|
|
- treeData={treeData}
|
|
|
|
- titleRender={(nodeData) => {
|
|
|
|
- if (nodeData.children && nodeData.children.length) {
|
|
|
|
- return <div className={styles.treeTitle}>{nodeData.title}</div>;
|
|
|
|
- } else {
|
|
|
|
- return renderNode(nodeData);
|
|
|
|
- }
|
|
|
|
- }}
|
|
|
|
- />
|
|
|
|
- </Radio.Group>
|
|
|
|
- </Checkbox.Group>
|
|
|
|
|
|
+ {/* <Checkbox.Group onChange={onCheckboxChange} value={checkedValues}>
|
|
|
|
+ <Radio.Group onChange={onRadioChange} value={radioValue} > */}
|
|
|
|
+ <Tree
|
|
|
|
+ height={310}
|
|
|
|
+ // expandedKeys={['Fl11010802593241ec348ecb4148806b9034c8957454']}
|
|
|
|
+ selectable={false}
|
|
|
|
+ treeData={treeData}
|
|
|
|
+ titleRender={(nodeData) => {
|
|
|
|
+ if (nodeData?.children && nodeData?.children?.length) {
|
|
|
|
+ return <div className={styles.treeTitle}>{nodeData?.title}</div>;
|
|
|
|
+ } else {
|
|
|
|
+ return renderNode(nodeData || {});
|
|
|
|
+ }
|
|
|
|
+ }}
|
|
|
|
+ />
|
|
|
|
+ {/* </Radio.Group>
|
|
|
|
+ </Checkbox.Group> */}
|
|
</div>
|
|
</div>
|
|
</>
|
|
</>
|
|
);
|
|
);
|