checkBox.jsx 2.41 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1 2 3 4
import React, { useState, useEffect } from 'react';
import { Checkbox, Empty } from 'antd';
import styles from './checkBox.less';
const CheckList = props => {
Maofei94's avatar
Maofei94 committed
5
  const { info = {}, valueCallback = () => {}, nodeType = '', addList } = props;
Maofei94's avatar
Maofei94 committed
6
  const [list, setList] = useState([]);
Maofei94's avatar
Maofei94 committed
7
  const [addRoleList, setAddRoleList] = useState([]);
Maofei94's avatar
Maofei94 committed
8 9 10 11 12 13 14 15 16 17 18 19
  useEffect(() => {
    if (info.pageUrl) {
      let arr = [...info.relatedRoleList];
      let arr2 = [];
      arr.map(item => {
        if (item.related) {
          arr2.push(item.relatedRoleCode);
        }
      });
      setList(arr);
    }
  }, [info]);
Maofei94's avatar
Maofei94 committed
20 21 22 23 24
  useEffect(() => {
    if (addList && addList.length > 0) {
      setAddRoleList([...addList]);
    }
  }, [addList]);
Maofei94's avatar
Maofei94 committed
25 26 27 28 29 30 31 32 33
  const handleSelect = (e, val) => {
    list.forEach(item => {
      if (item.relatedRoleCode === val) {
        item.related = e.target.checked;
      }
    });
    setList([...list]);
    valueCallback(list);
  };
Maofei94's avatar
Maofei94 committed
34 35 36 37 38 39 40 41 42
  const handleRoleSelect = (e, val) => {
    addRoleList.forEach(item => {
      if (item.roleCode === val) {
        item.related = e.target.checked;
      }
    });
    setAddRoleList([...addRoleList]);
    valueCallback(addRoleList);
  };
Maofei94's avatar
Maofei94 committed
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
  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} />
      )}
Maofei94's avatar
Maofei94 committed
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

      {/* {
        <div className={styles.box}>
          {addRoleList &&
            addRoleList.length > 0 &&
            addRoleList.map(item => (
              <div key={item.roleCode} className={styles.check}>
                <Checkbox
                  checked={item.related}
                  onChange={e => {
                    handleRoleSelect(e, item.roleCode);
                  }}
                >
                  {item.roleName}
                </Checkbox>
              </div>
            ))}
        </div>
      } */}
Maofei94's avatar
Maofei94 committed
86 87 88 89 90
    </div>
  );
};

export default CheckList;