Commit fb74cd23 authored by 皮倩雯's avatar 皮倩雯

fix: '解决角色管理复选框bug'

parent 03f80a51
Pipeline #46286 skipped with stages
/* eslint-disable no-unused-expressions */
/* eslint-disable import/order */
import React, { useState, useEffect } from 'react';
import { Checkbox } from 'antd';
......@@ -7,7 +8,7 @@ import { checkChildrenByCondition, checkIsGroup, getId } from '.';
import { FolderFilled, FileOutlined } from '@ant-design/icons';
const ListCardItem = props => {
const { searchWord, item, valueList, updateValueList, ouid, changedItem, flag } = props;
const { searchWord, item, valueList, updateValueList, ouid, changedItem, flag, roleID } = props;
// id
const id = getId(item);
......@@ -17,13 +18,11 @@ const ListCardItem = props => {
// 当前组件是否是分组id
const isGroup = checkIsGroup(item);
const [indeterminate, setIndeterminate] = useState(isGroup);
const [childrenKeys, setChildrenKeys] = useState([]);
const [childrenKeys, setChildrenKeys] = useState([]); // 本次循环item的全部子元素id
const [flag1, setFlag1] = useState(); // 首次进入刷新回显
useEffect(() => {
console.log(valueList);
console.log(changedItem); // 改变项
console.log(item); // 本次进循环的项
// console.log(childrenKeys); // 本次循环item的全部子元素id
setFlag1(roleID);
// 子节点勾选状态变化时
if (isGroup) {
const keys = item.children
......@@ -31,40 +30,72 @@ const ListCardItem = props => {
.flat(Infinity);
setChildrenKeys(keys);
}
if (
isGroup
// changedItem.item !== item &&
// !checkIsGroup(changedItem.item) &&
// childrenKeys.includes(getId(changedItem.item))
) {
// console.log(childrenKeys.every(c => valueList.includes(c)));
console.log(item);
console.log(childrenKeys);
if (checkIsGroup(changedItem.item)) {
// 菜单组当前项,完整一次循环当前项不变
if (isGroup) {
if (childrenKeys.every(c => valueList.includes(c))) {
// 全选
updateValueList([id], [id], { item, value: true });
setIndeterminate(false);
} else if (childrenKeys.some(c => valueList.includes(c))) {
// 半选
valueList.includes(id) && updateValueList([], [id], { item, value: true });
setIndeterminate(true);
} else {
// 零选
valueList.includes(id) && updateValueList([], [id], { item, value: true });
setIndeterminate(false);
}
}
} else {
// eslint-disable-next-line no-lonely-if
if (
isGroup &&
// changedItem.item !== item &&
// !checkIsGroup(changedItem.item) &&
childrenKeys.includes(getId(changedItem.item)) // 判断本次item是否是改变的本次的子选项用来父级回显,全选时要取消这一限制条件
) {
if (childrenKeys.every(c => valueList.includes(c))) {
// 全选
updateValueList([id], [id], { item, value: true });
setIndeterminate(false);
} else if (childrenKeys.some(c => valueList.includes(c))) {
// 半选
valueList.includes(id) && updateValueList([], [id], { item, value: false });
setIndeterminate(true);
} else {
// 零选
valueList.includes(id) && updateValueList([], [id], { item, value: false });
setIndeterminate(false);
}
}
}
}, [changedItem.item, changedItem.value]);
useEffect(() => {
// 子节点勾选状态变化时
if (isGroup) {
const keys = item.children
.map(child => checkChildrenByCondition(child, c => getId(c), true, 'map'))
.flat(Infinity);
setChildrenKeys(keys);
}
if (isGroup) {
if (childrenKeys.every(c => valueList.includes(c))) {
// 全选
console.log(2121);
updateValueList([id], [id], { item, value: true });
console.log(valueList);
setIndeterminate(false);
} else if (childrenKeys.some(c => valueList.includes(c))) {
console.log(211231);
console.log(valueList);
console.log(id);
// 半选
// eslint-disable-next-line no-unused-expressions
valueList.includes(id) && updateValueList([], [id], { item, value: false });
setIndeterminate(true);
} else {
// 零选
console.log(232323);
console.log(valueList);
console.log(id);
// eslint-disable-next-line no-unused-expressions
valueList.includes(id) && updateValueList([], [id], { item, value: false });
setIndeterminate(false);
}
}
}, [changedItem.item, changedItem.value, flag]);
}, [flag, flag1]); // 全选刷新,首次进入刷新标识
// 勾选事件处理
const handleChecked = e => {
......@@ -74,8 +105,6 @@ const ListCardItem = props => {
updateValueList(v ? result : [], result, { item, value: v });
setIndeterminate(false);
} else {
// console.log(item);
// console.log(v);
updateValueList(v ? [id] : [], [id], { item, value: v });
}
};
......@@ -89,6 +118,7 @@ const ListCardItem = props => {
updateValueList={updateValueList}
valueList={valueList}
ouid={ouid}
roleID={roleID}
changedItem={changedItem}
searchWord={searchWord}
flag={flag}
......@@ -97,7 +127,6 @@ const ListCardItem = props => {
// 通过把isChecked为true的id存在valueList集合里面,递归数据当id是否被包含在valueList中时返回值来渲染true或false
return (
<>
{/* {console.log(valueList, 'valueList')} */}
<div
className={classnames({
[styles.divBox]: isGroup,
......
......@@ -4,6 +4,7 @@ import { Spin, Checkbox, Button, Empty } from 'antd';
import _ from 'lodash';
import ListCardItem from './ItemCard';
import styles from './ItemCard.less';
import { GetMapSetByGroupID } from '@/services/userManage/api';
const tip = 'loading...';
......@@ -23,7 +24,6 @@ export const checkChildrenByCondition = (item, fn, withGroup = true, method = 'e
};
const ListCard = props => {
console.log(props, 'props');
const {
ouid,
searchWord,
......@@ -33,6 +33,7 @@ const ListCard = props => {
checkList,
btnLoading = false,
loading,
roleID,
} = props;
const [valueList, setValueList] = useState([]); // 选中值
const [changedItem, setChangedItem] = useState({ item: {} }); // 改变的项
......@@ -43,7 +44,6 @@ const ListCard = props => {
// 首次进入处理数据后续不触发
useEffect(() => {
console.log(dataList);
let aa = dataList
.map(l => checkChildrenByCondition(l, it => [getId(it)], true, 'map').flat(Infinity))
.flat(Infinity)
......@@ -63,16 +63,11 @@ const ListCard = props => {
}, [dataList, loading, checkList]);
// 处理选中的值
const updateValueList = (checkedKeys, childrenKeys, sourceItem) => {
// console.log(checkedKeys);
// console.log(childrenKeys);
console.log(sourceItem);
console.log(changedItem);
const updateValueList = (checkedKeys, childrenKeys, sourceItem, aa) => {
const removekeys = _.difference(childrenKeys, checkedKeys);
let result = _.uniq(_.union(checkedKeys, valueList));
_.remove(result, v => removekeys.includes(v));
setValueList(result);
console.log(result);
setChangedItem(sourceItem);
onChange && onChange(result);
if (result.length === 0) {
......@@ -157,6 +152,7 @@ const ListCard = props => {
item={item}
ouid={ouid}
flag={flag}
roleID={roleID}
changedItem={changedItem}
updateValueList={updateValueList}
valueList={valueList}
......
......@@ -242,8 +242,8 @@ const AddModal = props => {
name="BuiltInRole"
>
<Radio.Group onChange={onChangeRadio} value={value} defaultValue={value}>
<Radio value={1}></Radio>
<Radio value={2}></Radio>
<Radio value={1}></Radio>
</Radio.Group>
</Item>
<Item label="角色分组" name="group">
......
......@@ -164,8 +164,8 @@ const AddModal = props => {
>
{console.log(value, 'nalie')}
<Radio.Group onChange={onChangeRadio} value={value}>
<Radio value={1}></Radio>
<Radio value={2}></Radio>
<Radio value={1}></Radio>
</Radio.Group>
</Item>
<Item label="角色分组" name="group">
......
......@@ -188,6 +188,14 @@ const SiteManage = () => {
list.push({ ...defaultConfig, ...item });
});
const finalList = buildMap(list);
// if (finalList[0].text == '地图组件') {
// if (finalList[0].children.find(i => i.isChecked == false)) {
// finalList[0].isChecked = false;
// } else {
// finalList[0].isChecked = true;
// }
// }
// console.log(finalList);
setdataList(finalList);
setValueList(
finalList
......@@ -549,7 +557,7 @@ const SiteManage = () => {
notification.error({
message: '提示',
duration: 15,
description: res.message,
description: res.msg,
});
}
})
......@@ -837,6 +845,7 @@ const SiteManage = () => {
>
{roleID ? (
<ListCard
roleID={roleID}
loading={loading}
checkList={valueList}
dataList={dataList}
......
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