ItemCard.jsx 6.29 KB
Newer Older
1
/* eslint-disable no-unused-expressions */
皮倩雯's avatar
皮倩雯 committed
2
/* eslint-disable import/order */
Maofei94's avatar
Maofei94 committed
3 4
import React, { useState, useEffect } from 'react';
import { Checkbox } from 'antd';
张烨's avatar
张烨 committed
5
import classnames from 'classnames';
Maofei94's avatar
Maofei94 committed
6
import styles from './itemCard.less';
7
import { checkChildrenByCondition, checkIsGroup, getId } from '.';
8
import { FolderFilled, FileOutlined } from '@ant-design/icons';
张烨's avatar
张烨 committed
9

Maofei94's avatar
Maofei94 committed
10
const ListCardItem = props => {
11
  const { searchWord, item, valueList, updateValueList, ouid, changedItem, flag, roleID } = props;
张烨's avatar
张烨 committed
12 13

  // id
14
  const id = getId(item);
张烨's avatar
张烨 committed
15
  // 是否是地图组件
16
  const isMapWedgt = item.type === 'widgetUIPage';
张烨's avatar
张烨 committed
17 18

  // 当前组件是否是分组id
19
  const isGroup = checkIsGroup(item);
皮倩雯's avatar
皮倩雯 committed
20
  const [indeterminate, setIndeterminate] = useState(isGroup);
21 22
  const [childrenKeys, setChildrenKeys] = useState([]); // 本次循环item的全部子元素id
  const [flag1, setFlag1] = useState(); // 首次进入刷新回显
皮倩雯's avatar
皮倩雯 committed
23

Maofei94's avatar
Maofei94 committed
24
  useEffect(() => {
25
    setFlag1(roleID);
皮倩雯's avatar
皮倩雯 committed
26
    // 子节点勾选状态变化时
张烨's avatar
张烨 committed
27
    if (isGroup) {
张烨's avatar
张烨 committed
28
      const keys = item.children
皮倩雯's avatar
皮倩雯 committed
29
        .map(child => checkChildrenByCondition(child, c => getId(c), true, 'map'))
张烨's avatar
张烨 committed
30
        .flat(Infinity);
31
      setChildrenKeys(keys);
张烨's avatar
张烨 committed
32
    }
33 34
    // 父复选框
    if (localStorage.getItem('aa') == 1) {
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
      // 菜单组当前项,完整一次循环当前项不变
      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);
        }
      }
51
    } else if (localStorage.getItem('aa') == 0) {
52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
      // 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) {
皮倩雯's avatar
皮倩雯 committed
85
      if (childrenKeys.every(c => valueList.includes(c))) {
张烨's avatar
张烨 committed
86
        // 全选
皮倩雯's avatar
皮倩雯 committed
87
        updateValueList([id], [id], { item, value: true });
张烨's avatar
张烨 committed
88 89 90
        setIndeterminate(false);
      } else if (childrenKeys.some(c => valueList.includes(c))) {
        // 半选
皮倩雯's avatar
皮倩雯 committed
91
        valueList.includes(id) && updateValueList([], [id], { item, value: false });
张烨's avatar
张烨 committed
92 93 94
        setIndeterminate(true);
      } else {
        // 零选
皮倩雯's avatar
皮倩雯 committed
95
        valueList.includes(id) && updateValueList([], [id], { item, value: false });
张烨's avatar
张烨 committed
96 97 98
        setIndeterminate(false);
      }
    }
99
  }, [flag, flag1]); // 最外层全选刷新,首次进入刷新标识,点击父复选框
张烨's avatar
张烨 committed
100

张烨's avatar
张烨 committed
101
  // 勾选事件处理
Maofei94's avatar
Maofei94 committed
102
  const handleChecked = e => {
张烨's avatar
张烨 committed
103
    const { checked: v } = e.target;
104 105
    console.log(e);
    console.log(v);
张烨's avatar
张烨 committed
106
    if (isGroup) {
107 108 109 110 111 112
      let aa = item.children.find(i => i.type == 'widgetGroup');
      if (aa) {
        localStorage.setItem('aa', 1);
      } else {
        localStorage.setItem('aa', 0);
      }
113
      const result = [...childrenKeys, id];
张烨's avatar
张烨 committed
114 115
      updateValueList(v ? result : [], result, { item, value: v });
      setIndeterminate(false);
张烨's avatar
张烨 committed
116
    } else {
张烨's avatar
张烨 committed
117
      updateValueList(v ? [id] : [], [id], { item, value: v });
118
      localStorage.setItem('aa', 0);
张烨's avatar
张烨 committed
119
    }
Maofei94's avatar
Maofei94 committed
120
  };
张烨's avatar
张烨 committed
121 122

  const renderChild = () =>
123 124
    item.children &&
    item.children.map((c, i) => (
张烨's avatar
张烨 committed
125
      <ListCardItem
126
        item={c}
张烨's avatar
张烨 committed
127
        key={`item${i}key`}
128 129 130
        updateValueList={updateValueList}
        valueList={valueList}
        ouid={ouid}
131
        roleID={roleID}
张烨's avatar
张烨 committed
132
        changedItem={changedItem}
张烨's avatar
张烨 committed
133
        searchWord={searchWord}
皮倩雯's avatar
皮倩雯 committed
134
        flag={flag}
张烨's avatar
张烨 committed
135 136
      />
    ));
皮倩雯's avatar
皮倩雯 committed
137
  // 通过把isChecked为true的id存在valueList集合里面,递归数据当id是否被包含在valueList中时返回值来渲染true或false
Maofei94's avatar
Maofei94 committed
138 139
  return (
    <>
张烨's avatar
张烨 committed
140 141
      <div
        className={classnames({
张烨's avatar
张烨 committed
142 143
          [styles.divBox]: isGroup,
          [styles.divSingle]: !isGroup,
张烨's avatar
张烨 committed
144 145
        })}
      >
Maofei94's avatar
Maofei94 committed
146 147
        <div className={styles.topCheckbox}>
          <Checkbox
张烨's avatar
张烨 committed
148
            indeterminate={isGroup ? indeterminate : false}
149
            checked={valueList.includes(id)}
张烨's avatar
张烨 committed
150
            onChange={handleChecked}
Maofei94's avatar
Maofei94 committed
151
          >
张烨's avatar
张烨 committed
152 153 154 155
            {isMapWedgt ? (
              <div
                style={{ display: 'inline-block' }}
                ref={r => {
156
                  if (r) r.innerHTML = item.text;
张烨's avatar
张烨 committed
157 158 159 160 161
                }}
              />
            ) : (
              <span
                className={classnames({
张烨's avatar
张烨 committed
162
                  [styles.boldLabel]: isGroup,
皮倩雯's avatar
皮倩雯 committed
163
                  [styles.isSearch]: searchWord && item.text.includes(searchWord),
张烨's avatar
张烨 committed
164 165
                })}
              >
皮倩雯's avatar
皮倩雯 committed
166 167
                {isGroup ? (
                  <>
168
                    <FolderFilled style={{ color: '#1890ff' }} />
皮倩雯's avatar
皮倩雯 committed
169 170 171 172
                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
                  </>
                ) : (
                  <>
173
                    <FileOutlined style={{ color: '#1890ff' }} />
皮倩雯's avatar
皮倩雯 committed
174 175 176
                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
                  </>
                )}
张烨's avatar
张烨 committed
177 178
              </span>
            )}
Maofei94's avatar
Maofei94 committed
179 180 181
          </Checkbox>
        </div>
        <div style={{ width: '100%' }} className={styles.checkdiv}>
张烨's avatar
张烨 committed
182
          {renderChild()}
Maofei94's avatar
Maofei94 committed
183 184 185 186 187 188 189
        </div>
      </div>
    </>
  );
};

export default ListCardItem;