feat: 角色选择

src/pages/mobileConfig/menuconfig/AddForm.jsx

@@ -6,7 +6,6 @@ import PicturesWall from '@/components/Upload/index';
 const { Item } = Form;
 const AddForm = props => {
   const { submitCallback, nodeType, nodeObj, addType } = props;
-  // const [type, setType] = useState(2);
   const [form] = Form.useForm();
   const [otherForm] = Form.useForm();
   console.log(nodeObj, 'nodeObj');

src/pages/mobileConfig/menuconfig/checkBox.jsx

+import React, { useState, useEffect } from 'react';
+import { Checkbox, Empty } from 'antd';
+import styles from './checkBox.less';
+const CheckList = props => {
+  const { info, valueCallback, nodeType } = props;
+  console.log(info, 'info');
+  const [list, setList] = useState([]);
+  const [checkList, setCheckList] = useState([]);
+  const [flag, setFlag] = useState(false);
+  const a = 'a';
+  useEffect(() => {
+    if (info.pageUrl) {
+      let arr = [...info.relatedRoleList];
+      let arr2 = [];
+      arr.map(item => {
+        if (item.related) {
+          arr2.push(item.relatedRoleCode);
+        }
+      });
+      console.log(arr2, 'arr2');
+
+      setCheckList(arr2);
+      setList(arr);
+      setFlag(true);
+    }
+    return () => {
+      setFlag(false);
+      setCheckList([]);
+    };
+  }, [info]);
+
+  const handleSelect = (e, val) => {
+    console.log(e.target, 'e', val);
+    let arr = [];
+    list.forEach(item => {
+      if (item.relatedRoleCode === val) {
+        item.related = e.target.checked;
+      }
+    });
+    setList([...list]);
+    valueCallback(list);
+  };
+  return (
+    <div>
+      {nodeType === 3 || nodeType === 4 ? (
+        <div className={styles.box}>
+          {/* <Checkbox>全选/反选</Checkbox> */}
+
+          {list &&
+            list.length > 0 &&
+            list.map(item => (
+              <div key={item.relatedRoleCode} className={styles.check}>
+                <Checkbox
+                  checked={item.related}
+                  onChange={e => {
+                    handleSelect(e, item.relatedRoleCode);
+                  }}
+                >
+                  {item.relatedRoleName}
+                </Checkbox>
+              </div>
+            ))}
+        </div>
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+      )}
+    </div>
+  );
+};
+
+export default CheckList;

src/pages/mobileConfig/menuconfig/checkBox.less

+.box{
+  display: flex;
+  padding: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.check{
+  flex-shrink: 0;
+  flex-grow: 0;
+  min-width: 150px;
+  padding-bottom: 10px;
+}
\ No newline at end of file

src/pages/mobileConfig/menuconfig/miniMenu.jsx

@@ -31,6 +31,7 @@ import {
 import styles from './miniMenu.less';
 import AddForm from './AddForm';
 import EditForm from './editForm';
+import CheckList from './checkBox';
 
 const MiniMenu = props => {
   const [flag, setFlag] = useState(1); // 刷新标志
@@ -47,6 +48,7 @@ const MiniMenu = props => {
   const [nodeObj, setNodeObj] = useState({});
   const [addType, setAddType] = useState(''); // 添加下级类型
   const [modalTitle, setModalTitle] = useState('');
+  const [roleList, setRoleList] = useState([]); // 复选框选中的值
   // 获取菜单树
   useEffect(() => {
     updateTrees();
@@ -74,10 +76,10 @@ const MiniMenu = props => {
           setTreeData(result);
           console.log(result);
           // 第一次加载，默认选择第一个组织
-          if (treeFlage) {
-            handleSelect([result[0].menuID], false);
-            setTreeFlag(false);
-          }
+          // if (treeFlage) {
+          //   handleSelect([result[0].menuID], false);
+          //   setTreeFlag(false);
+          // }
         }
       })
       .catch(err => {
@@ -288,6 +290,9 @@ const MiniMenu = props => {
     setLoading(true);
     console.log(prop);
     let obj = { ...prop };
+    if (nodeType === 3 || nodeType === 4) {
+      obj.relatedRoleList = String(roleList) || '';
+    }
     editMenu({
       _dc: Date.now(),
       menuID,
@@ -319,6 +324,17 @@ const MiniMenu = props => {
         setLoading(false);
       });
   };
+  const valueCallback = val => {
+    console.log(val);
+    let arr = [...val];
+    let arr2 = [];
+    arr.map(item => {
+      if (item.related) {
+        arr2.push(item.relatedRoleCode);
+      }
+    });
+    setRoleList(arr2);
+  };
   return (
     <Spin spinning={loading} tip="loading...">
       <div
@@ -428,6 +444,11 @@ const MiniMenu = props => {
           })}
         >
           关联角色
+          <CheckList
+            info={info}
+            nodeType={nodeType}
+            valueCallback={valueCallback}
+          />
         </div>
       </div>
     </Spin>

src/pages/mobileConfig/menuconfig/miniMenu.less

@@ -4,7 +4,7 @@
 }
 .left{
   min-width: 300px;
-  width: 300px;
+  width: 350px;
   min-height: 100%;
   border: 1px solid #eee;
   padding: 10px;