fix: '角色管理'

src/components/CheckGroup/ItemCard.jsx

+/* eslint-disable import/order */
 import React, { useState, useEffect } from 'react';
 import { Checkbox } from 'antd';
 import classnames from 'classnames';
 import styles from './itemCard.less';
 import { checkChildrenByCondition, checkIsGroup, getId } from '.';
+import { FolderOpenOutlined, FolderOutlined } from '@ant-design/icons';
 
 const ListCardItem = props => {
-  const {
-    searchWord,
-    item,
-    valueList,
-    updateValueList,
-    ouid,
-    changedItem,
-  } = props;
+  const { searchWord, item, valueList, updateValueList, ouid, changedItem, flag } = props;
 
   // id
   const id = getId(item);
@@ -21,46 +16,55 @@ const ListCardItem = props => {
 
   // 当前组件是否是分组id
   const isGroup = checkIsGroup(item);
-  const [indeterminate, setIndeterminate] = useState(!isGroup);
+  const [indeterminate, setIndeterminate] = useState(isGroup);
   const [childrenKeys, setChildrenKeys] = useState([]);
+
   useEffect(() => {
+    console.log(valueList);
+    console.log(changedItem); // 改变项
+    console.log(item); // 本次进循环的项
+    // console.log(childrenKeys); // 本次循环item的全部子元素id
+    // 子节点勾选状态变化时
     if (isGroup) {
       const keys = item.children
-        .map(child =>
-          checkChildrenByCondition(child, c => getId(c), true, 'map'),
-        )
+        .map(child => checkChildrenByCondition(child, c => getId(c), true, 'map'))
         .flat(Infinity);
       setChildrenKeys(keys);
-    } else {
-      //
     }
-  }, [item]);
-
-  useEffect(() => {
-    // 子节点勾选状态变化时
     if (
-      isGroup &&
-      changedItem.item !== item &&
-      !checkIsGroup(changedItem.item) &&
-      childrenKeys.includes(getId(changedItem.item))
+      isGroup
+      // changedItem.item !== item &&
+      // !checkIsGroup(changedItem.item) &&
+      // childrenKeys.includes(getId(changedItem.item))
     ) {
-      if (changedItem.value && childrenKeys.every(c => valueList.includes(c))) {
+      // console.log(childrenKeys.every(c => valueList.includes(c)));
+      console.log(item);
+      console.log(childrenKeys);
+      if (childrenKeys.every(c => valueList.includes(c))) {
         // 全选
-        updateValueList([id], [id]);
+        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]);
+        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]);
+        valueList.includes(id) && updateValueList([], [id], { item, value: false });
         setIndeterminate(false);
       }
     }
-  }, [changedItem.item, changedItem.value]);
+  }, [changedItem.item, changedItem.value, flag]);
 
   // 勾选事件处理
   const handleChecked = e => {
@@ -70,6 +74,8 @@ 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 });
     }
   };
@@ -85,11 +91,13 @@ const ListCardItem = props => {
         ouid={ouid}
         changedItem={changedItem}
         searchWord={searchWord}
+        flag={flag}
       />
     ));
-
+  // 通过把isChecked为true的id存在valueList集合里面，递归数据当id是否被包含在valueList中时返回值来渲染true或false
   return (
     <>
+      {/* {console.log(valueList, 'valueList')} */}
       <div
         className={classnames({
           [styles.divBox]: isGroup,
@@ -113,11 +121,20 @@ const ListCardItem = props => {
               <span
                 className={classnames({
                   [styles.boldLabel]: isGroup,
-                  [styles.isSearch]:
-                    searchWord && item.text.includes(searchWord),
+                  [styles.isSearch]: searchWord && item.text.includes(searchWord),
                 })}
               >
-                {item.text}
+                {isGroup ? (
+                  <>
+                    <FolderOpenOutlined style={{ color: '#1890ff' }} />
+                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
+                  </>
+                ) : (
+                  <>
+                    <FolderOutlined style={{ color: '#1890ff' }} />
+                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
+                  </>
+                )}
               </span>
             )}
           </Checkbox>

src/components/CheckGroup/index.jsx

+/* eslint-disable no-unused-expressions */
 import React, { useState, useEffect } from 'react';
 import { Spin, Checkbox, Button, Empty } from 'antd';
 import _ from 'lodash';
@@ -33,40 +34,80 @@ const ListCard = props => {
     btnLoading = false,
     loading,
   } = props;
-  const [valueList, setValueList] = useState([]);
-  const [changedItem, setChangedItem] = useState({ item: {} });
+  const [valueList, setValueList] = useState([]); // 选中值
+  const [changedItem, setChangedItem] = useState({ item: {} }); // 改变的项
+  const [indeterminate, setIndeterminate] = useState(false);
+  const [keepAA, setKeepAA] = useState('');
+  const [checkValue, setCheckValue] = useState(false);
+  const [flag, setFlag] = useState(0);
 
+  // 首次进入处理数据后续不触发
   useEffect(() => {
+    console.log(dataList);
+    let aa = dataList
+      .map(l => checkChildrenByCondition(l, it => [getId(it)], true, 'map').flat(Infinity))
+      .flat(Infinity)
+      .filter(Boolean).length;
+    setKeepAA(aa);
     setValueList(checkList);
+    if (checkList.length === 0) {
+      setIndeterminate(false);
+      setCheckValue(false);
+    } else if (checkList.length < aa) {
+      setIndeterminate(true);
+      setCheckValue(false);
+    } else {
+      setIndeterminate(false);
+      setCheckValue(true);
+    }
   }, [dataList, loading, checkList]);
 
+  // 处理选中的值
   const updateValueList = (checkedKeys, childrenKeys, sourceItem) => {
-    // eslint-disable-next-line no-console
-    // console.time('updateValueList:');
+    // console.log(checkedKeys);
+    // console.log(childrenKeys);
+    console.log(sourceItem);
+    console.log(changedItem);
     const removekeys = _.difference(childrenKeys, checkedKeys);
     let result = _.uniq(_.union(checkedKeys, valueList));
     _.remove(result, v => removekeys.includes(v));
     setValueList(result);
-    if (sourceItem) setChangedItem(sourceItem);
-    // eslint-disable-next-line no-unused-expressions
+    console.log(result);
+    setChangedItem(sourceItem);
     onChange && onChange(result);
-    // eslint-disable-next-line no-console
-    // console.timeEnd('updateValueList:');
+    if (result.length === 0) {
+      setIndeterminate(false);
+      setCheckValue(false);
+    } else if (result.length < keepAA) {
+      setIndeterminate(true);
+      setCheckValue(false);
+    } else {
+      setIndeterminate(false);
+      setCheckValue(true);
+    }
   };
 
+  // 全选
   const checkAll = e => {
+    setFlag(flag + 1);
     if (e.target.checked) {
-      const result = dataList.map(item => getAllID(item)).flat(Infinity);
+      const arr = JSON.parse(JSON.stringify(dataList));
+      const result = arr.map(item => getAllID(item)).flat(Infinity);
       setValueList(result);
+      setCheckValue(true);
+      setIndeterminate(false);
       // eslint-disable-next-line no-unused-expressions
       onChange && onChange(result);
     } else {
       setValueList([]);
+      setCheckValue(false);
+      setIndeterminate(false);
       // eslint-disable-next-line no-unused-expressions
       onChange && onChange([]);
     }
   };
 
+  // 获取所有ID
   const getAllID = item => {
     let result = [];
     const haveChildren = Array.isArray(item.children) && item.children.length > 0;
@@ -95,8 +136,19 @@ const ListCard = props => {
           }}
         />
       ) : (
-        <>
-          <Checkbox onChange={checkAll}>全选/全不选</Checkbox>
+        <div className={styles.divBox}>
+          <span
+            style={{
+              display: 'block',
+              marginTop: '-14px',
+              width: '120px',
+              backgroundColor: 'white',
+            }}
+          >
+            <Checkbox onChange={checkAll} indeterminate={indeterminate} checked={checkValue}>
+              <span style={{ fontSize: '16px', fontWeight: 'bold' }}>全选/全不选</span>
+            </Checkbox>
+          </span>
           {dataList && dataList.length > 0 ? (
             dataList
               .filter(d => d.type === 'widgetGroup' || 'widget')
@@ -104,6 +156,7 @@ const ListCard = props => {
                 <ListCardItem
                   item={item}
                   ouid={ouid}
+                  flag={flag}
                   changedItem={changedItem}
                   updateValueList={updateValueList}
                   valueList={valueList}
@@ -115,7 +168,7 @@ const ListCard = props => {
           ) : (
             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
           )}
-        </>
+        </div>
       )}
       {true && !loading && dataList && dataList.length > 0 && (
         <div className={styles.btnBox}>

src/components/CheckGroup/itemCard.less

-
 .divBox {
   // display: flex;
   width: 100%;
@@ -8,15 +7,15 @@
   margin-top: 20px;
   min-height: 50px;
   padding: 0 10px 10px 20px;
-  .ant-checkbox-wrapper{
+  .ant-checkbox-wrapper {
     background-color: #fff;
-}
-  .topCheckbox{
+  }
+  .topCheckbox {
     height: 20px;
     margin: -10px 0 0 0px;
     line-height: 20px;
   }
-  .topCheckbox>label :hover{
+  .topCheckbox > label :hover {
     font-weight: 600;
   }
   .checkdiv {
@@ -26,9 +25,10 @@
     // justify-content: space-between;
   }
 }
-.divSingle{
+.divSingle {
   border: none;
   margin-top: 20px;
+  padding-left: 20px;
   min-width: 180px;
   flex-grow: 0;
   flex-shrink: 0;
@@ -37,16 +37,16 @@
   margin-right: 10px;
   background: transparent;
 }
-.isSearch{
+.isSearch {
   color: red;
   background-color: yellow;
 }
-.boldLabel{
+.boldLabel {
   font-size: 15px;
   font-weight: bold;
   background-color: #fff;
 }
-.btnBox{
+.btnBox {
   position: sticky;
   bottom: 0px;
   right: 0px;

src/components/MapScope/index.jsx

@@ -199,7 +199,8 @@ const MapScope = props => {
       title={
         <span>
           <span style={{ marginRight: '20px' }}>
-            <span style={{ fontWeight: 'blod', color: 'red' }}>{title}</span>的范围选择
+            <span style={{ fontWeight: 'blod', color: 'rgb(24, 144, 255)' }}>【{title}】</span>
+            的范围选择
           </span>
           <span style={{ color: 'red' }}>提示：必须框选范围</span>
         </span>
@@ -210,6 +211,7 @@ const MapScope = props => {
         setFlag(0);
       }}
       width="800px"
+      maskClosable={false}
       cancelText="取消"
       okText="确认"
       onOk={() => onSubmit()}

src/pages/userCenter/roleManage/AddModal.jsx

+/* eslint-disable no-unused-expressions */
 import React, { useState, useEffect } from 'react';
-import { Form, Input, notification, Select } from 'antd';
+import { Form, Input, notification, Select, Radio, Tooltip } from 'antd';
 import SiteModal from '@/components/Modal/SiteModa';
-import {
-  addRole,
-  GetRoleGroup,
-  getWebConfigTypes,
-} from '@/services/RoleManage/api';
+import { addRole, GetRoleGroup, getWebConfigTypes } from '@/services/RoleManage/api';
+import { InfoCircleOutlined } from '@ant-design/icons';
 const { Item } = Form;
 const { Option } = Select;
 const AddModal = props => {
@@ -15,6 +13,7 @@ const AddModal = props => {
   const [loading, setLoading] = useState(false);
   const { confirmModal, itemObj, siteList } = props;
   const [typeList, setTypeList] = useState([]); // 应用类别
+  const [value, setValue] = useState(2);
   useEffect(() => {
     itemObj.groupflag &&
       form.setFieldsValue({
@@ -61,15 +60,23 @@ const AddModal = props => {
       .then(res => {
         console.log(form.getFieldsValue());
         setLoading(true);
+        console.log(res.BuiltInRole);
+        if (!res.BuiltInRole || res.BuiltInRole == 2) {
+          res.BuiltInRole = false;
+        } else if (res.BuiltInRole == 1) {
+          res.BuiltInRole = true;
+        }
+        console.log(res.BuiltInRole);
         addRole({
           roleName: res.roleName,
           description: res.description,
           group: res.group,
           subSystemValue: res.subSystemValue || '',
+          BuiltInRole: res.BuiltInRole,
         })
           .then(res => {
             setLoading(false);
-            if (res.msg==='') {
+            if (res.msg === '') {
               let id = res.roleID;
               form.resetFields();
               notification.success({
@@ -111,7 +118,6 @@ const AddModal = props => {
     setGroupList([]);
     console.log(form.getFieldsValue().subSystemValue);
     GetRoleGroup({
-     
       // subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
       // subSystemName: itemObj.subSystemValue || itemObj.visibleValue || '',
       subSystemValue: form.getFieldsValue().subSystemValue || '',
@@ -157,6 +163,10 @@ const AddModal = props => {
     console.log(e);
   };
 
+  const onChangeRadio = e => {
+    console.log(e.target.value);
+    setValue(e.target.value);
+  };
   const onFinish = value => {};
   return (
     <SiteModal
@@ -220,6 +230,22 @@ const AddModal = props => {
             ))}
           </Select>
         </Item>
+        <Item
+          label={
+            <div>
+              <Tooltip title="内置角色不能配置菜单权限">
+                <InfoCircleOutlined style={{ color: 'rgb(24, 144, 255)', marginRight: '5px' }} />
+              </Tooltip>
+              <span>内置角色</span>
+            </div>
+          }
+          name="BuiltInRole"
+        >
+          <Radio.Group onChange={onChangeRadio} value={value} defaultValue={value}>
+            <Radio value={1}>是</Radio>
+            <Radio value={2}>否</Radio>
+          </Radio.Group>
+        </Item>
         <Item label="角色分组" name="group">
           <Select
             mode="tags"

src/pages/userCenter/roleManage/EditModal.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Input, notification, Select } from 'antd';
+import { Form, Input, notification, Select, Radio, Tooltip } from 'antd';
 import SiteModal from '@/components/Modal/SiteModa';
 import { editRole, GetRoleGroup } from '@/services/RoleManage/api';
+import { InfoCircleOutlined } from '@ant-design/icons';
 const { Item } = Form;
 const { Option } = Select;
 const AddModal = props => {
@@ -9,16 +10,24 @@ const AddModal = props => {
   const [formLayout, setFormLayout] = useState('horizontal');
   const [groupList, setGroupList] = useState([]);
   const [loading, setLoading] = useState(false);
-  const { confirmModal, itemObj, editVisible } = props;
+  const { confirmModal = () => {}, itemObj, editVisible } = props;
+  const [value, setValue] = useState('');
   console.log(itemObj, 'itemObj');
 
   useEffect(() => {
+    console.log(itemObj.BuiltInRole);
+
     form.setFieldsValue({
       roleName: itemObj.roleName,
       description: itemObj.description,
       group: itemObj.group,
       subSystemValue: itemObj.subSystemValue,
     });
+    if (itemObj.BuiltInRole === true) {
+      setValue(1);
+    } else {
+      setValue(2);
+    }
   }, [itemObj]);
   const onSubmit = () => {
     form
@@ -26,23 +35,36 @@ const AddModal = props => {
       .then(res => {
         console.log(res, 'res');
         setLoading(true);
+        console.log(value);
+        if (value == 2) {
+          res.BuiltInRole = false;
+        } else {
+          res.BuiltInRole = true;
+        }
+        console.log(res.BuiltInRole);
         editRole({
           roleID: itemObj.roleID,
           roleName: res.roleName,
           description: res.description,
           remark: res.group,
+          BuiltInRole: res.BuiltInRole,
           // subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '',
         })
           .then(res => {
             setLoading(false);
-            if (res.msg==='') {
+            if (res.msg === '') {
               form.resetFields();
               notification.success({
                 message: '提示',
                 duration: 3,
                 description: '编辑成功',
               });
-              confirmModal();
+              console.log(value);
+              if (value == 1) {
+                confirmModal(true);
+              } else {
+                confirmModal(false);
+              }
             } else {
               notification.error({
                 message: '提示',
@@ -95,6 +117,10 @@ const AddModal = props => {
       });
   };
 
+  const onChangeRadio = e => {
+    console.log(e.target.value);
+    setValue(e.target.value);
+  };
   const onFinish = value => {};
   return (
     <SiteModal
@@ -109,12 +135,7 @@ const AddModal = props => {
       onOk={() => onSubmit()}
       confirmLoading={loading}
     >
-      <Form
-        form={form}
-        layout={formLayout}
-        onFinish={onFinish}
-        labelCol={{ span: 4 }}
-      >
+      <Form form={form} layout={formLayout} onFinish={onFinish} labelCol={{ span: 4 }}>
         <Item
           label="角色名称"
           name="roleName"
@@ -127,9 +148,26 @@ const AddModal = props => {
         >
           <Input placeholder="请输入角色名称" />
         </Item>
-        <Item label="角色类别" name="subSystemValue">
+        <Item label="虚拟目录" name="subSystemValue">
           {itemObj.subSystemValue || itemObj.visibleValue}
         </Item>
+        <Item
+          label={
+            <div>
+              <Tooltip title="内置角色不能配置菜单权限">
+                <InfoCircleOutlined style={{ color: 'rgb(24, 144, 255)', marginRight: '5px' }} />
+              </Tooltip>
+              <span>内置角色</span>
+            </div>
+          }
+          name="BuiltInRole"
+        >
+          {console.log(value, 'nalie')}
+          <Radio.Group onChange={onChangeRadio} value={value}>
+            <Radio value={1}>是</Radio>
+            <Radio value={2}>否</Radio>
+          </Radio.Group>
+        </Item>
         <Item label="角色分组" name="group">
           <Select
             mode="tags"

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -91,12 +91,12 @@ const SiteManage = () => {
       const { node } = treenode;
       const { roleID: id } = node;
       setItemObj(node);
-      let aa = chileID.find(i => i.roleID === id);
+      console.log(id);
       if (id) {
         setSaveTreeId(id);
-        if (aa) {
+        if (node.BuiltInRole === true) {
           setRoleID('');
-          setDescrip('系统分组下的角色不可配置菜单权限');
+          setDescrip('内置角色不可配置菜单权限');
           setFlagSearch(0);
         } else {
           setRoleID(id);
@@ -144,47 +144,10 @@ const SiteManage = () => {
     getRoleGroupList({ userID: '1' }).then(res => {
       setSpinLoading(false);
       if (res.code === 0) {
-        console.log(res.data.roleList);
-        res.data.roleList.map((i, j) => {
-          console.log(i);
-          if (i.child.length == 0) {
-            let childData = { visibleTitle: '系统分组', roleList: [] };
-            childData.visibleValue = i.visibleValue;
-            i.child.push(childData);
-          } else {
-            let arr = [];
-            i.child.map(k => {
-              arr.push(k.visibleTitle);
-            });
-            if (arr.indexOf('系统分组') == -1) {
-              let childData = { visibleTitle: '系统分组', roleList: [] };
-              childData.visibleValue = i.visibleValue;
-              console.log(childData.roleList);
-              i.child.push(childData);
-            }
-          }
-        });
         const { roleList } = res.data;
+        console.log(res.data);
         let arr = transTree(roleList);
         setTreeData(arr);
-        console.log(arr);
-        let dataA = [];
-        arr.map(i => {
-          console.log(i.child);
-          dataA.push(i.child.find(j => j.visibleTitle === '系统分组'));
-          // if (i.child.find(j => j.visibleTitle === '系统分组')) {
-          //   data.push(j);
-          // }
-        });
-        console.log(dataA);
-        let Arr = [];
-        dataA.map(i => {
-          i.children.map(j => {
-            Arr.push(j);
-          });
-        });
-        console.log(Arr);
-        setChildID(Arr);
       }
     });
   };
@@ -341,7 +304,7 @@ const SiteManage = () => {
                         />
                       </Tooltip>
                     )}
-                    {i.groupflag && i.groupflag != '系统分组' && (
+                    {i.groupflag && (
                       <Tooltip title="编辑分组" className={styles.fs}>
                         <EditOutlined
                           style={{ fontSize: '16px', color: '#1890FF' }}
@@ -406,7 +369,7 @@ const SiteManage = () => {
                     />
                   </Tooltip>
                 )}
-                {itemRole.groupflag && itemRole.groupflag != '系统分组' && (
+                {itemRole.groupflag && (
                   <Tooltip title="编辑分组" className={styles.fs}>
                     <EditOutlined
                       style={{ fontSize: '16px', color: '#1890FF' }}
@@ -455,7 +418,7 @@ const SiteManage = () => {
                 />
               </Tooltip>
             )}
-            {item.groupflag && item.groupflag != '系统分组' && (
+            {item.groupflag && (
               <Tooltip title="编辑分组" className={styles.fs}>
                 <EditOutlined
                   style={{ fontSize: '16px', color: '#1890FF' }}
@@ -497,12 +460,6 @@ const SiteManage = () => {
   };
   // 新增角色
   const addsUser = (e, record) => {
-    if (record.visibleTitle == '系统分组') {
-      message.warn({
-        duration: 5,
-        content: '系统分组下的角色不能配置菜单权限',
-      });
-    }
     e.stopPropagation();
     setItemObj(record);
     setModalVisible(true);
@@ -530,11 +487,26 @@ const SiteManage = () => {
     setItemObj('');
   };
   // 编辑弹窗回调
-  const editModal = () => {
+  const editModal = prop => {
     setEditVisible(false);
     // setFlag(flag + 1);
     getRoleGroup();
     handleTreeSelect(saveCurId);
+    console.log(currentSelectId);
+    console.log(itemObj);
+    console.log(roleID);
+    console.log(prop);
+    if (itemObj.roleID === currentSelectId[0]) {
+      if (prop == true) {
+        setRoleID('');
+        setDescrip('内置角色不可配置菜单权限');
+        setFlagSearch(0);
+      } else {
+        setRoleID(currentSelectId);
+        setFlagSearch(1);
+      }
+    }
+
     // setItemObj('');
   };
   // 分组编辑回调

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -124,6 +124,7 @@ const SiteManageV2 = () => {
   };
   // 添加下级站点
   const addSite = (e, recode) => {
+    console.log(e);
     e.stopPropagation();
     setCurrentStation(recode.id);
     handleShowModal('addChildVisible', true);