checkBox.jsx 2.74 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
  useEffect(() => {
    if (info.pageUrl) {
      let arr = [...info.relatedRoleList];
      let arr2 = [];
      arr.map(item => {
        if (item.related) {
          arr2.push(item.relatedRoleCode);
        }
      });
Maofei94's avatar
Maofei94 committed
17
      valueCallback(arr);
皮倩雯's avatar
皮倩雯 committed
18
      console.log(arr);
Maofei94's avatar
Maofei94 committed
19 20 21
      setList(arr);
    }
  }, [info]);
Maofei94's avatar
Maofei94 committed
22 23 24 25 26
  useEffect(() => {
    if (addList && addList.length > 0) {
      setAddRoleList([...addList]);
    }
  }, [addList]);
Maofei94's avatar
Maofei94 committed
27 28 29 30 31 32 33 34 35
  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
36 37 38 39 40 41 42 43 44
  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
45 46 47
  return (
    <div>
      {nodeType === 3 || nodeType === 4 ? (
Maofei94's avatar
Maofei94 committed
48 49 50 51 52 53
        <>
          <div className={styles.boxtitle}>
            <span className={styles.boxspan}>关联角色</span>
          </div>
          <div className={styles.box}>
            {/* <Checkbox>全选/反选</Checkbox> */}
Maofei94's avatar
Maofei94 committed
54

Maofei94's avatar
Maofei94 committed
55 56 57 58 59 60 61
            {list &&
              list.length > 0 &&
              list.map(item => (
                <div
                  key={item.relatedRoleCode}
                  className={styles.check}
                  title={item.relatedRoleName}
Maofei94's avatar
Maofei94 committed
62
                >
Maofei94's avatar
Maofei94 committed
63 64 65 66 67 68 69 70 71 72 73 74
                  <Checkbox
                    checked={item.related}
                    onChange={e => {
                      handleSelect(e, item.relatedRoleCode);
                    }}
                  >
                    {item.relatedRoleName}
                  </Checkbox>
                </div>
              ))}
          </div>
        </>
Maofei94's avatar
Maofei94 committed
75 76 77
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
Maofei94's avatar
Maofei94 committed
78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

      {/* {
        <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
97 98 99 100 101
    </div>
  );
};

export default CheckList;