index.jsx 5.42 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1
/* eslint-disable no-unused-expressions */
张烨's avatar
张烨 committed
2
import React, { useState, useEffect } from 'react';
3
import { Spin, Checkbox, Button, Empty } from 'antd';
4
import _ from 'lodash';
Maofei94's avatar
Maofei94 committed
5
import ListCardItem from './ItemCard';
6
import styles from './itemCard.less';
7
import { GetMapSetByGroupID } from '@/services/userManage/api';
Maofei94's avatar
Maofei94 committed
8 9

const tip = 'loading...';
10

11
export const getId = item => item.userID || item.roleID || item.stationID || item.id;
12
export const checkIsGroup = node =>
13
  ['widgetGroup'].includes(node?.type || node) && node.children?.length > 0;
14 15

// 递归遍历节点的方法
16
export const checkChildrenByCondition = (item, fn, withGroup = true, method = 'every') => {
17 18 19
  if (!checkIsGroup(item)) {
    return fn(item);
  }
20
  const childrenResults = item.children[method](t =>
张烨's avatar
张烨 committed
21
    checkChildrenByCondition(t, fn, withGroup, method),
22 23
  );
  return withGroup ? [fn(item), ...childrenResults] : [...childrenResults];
24 25
};

Maofei94's avatar
Maofei94 committed
26
const ListCard = props => {
张烨's avatar
张烨 committed
27 28 29 30 31 32 33
  const {
    ouid,
    searchWord,
    onCommit = () => {},
    dataList,
    onChange,
    checkList,
Maofei94's avatar
Maofei94 committed
34
    btnLoading = false,
张烨's avatar
张烨 committed
35
    loading,
36
    roleID,
张烨's avatar
张烨 committed
37
  } = props;
皮倩雯's avatar
皮倩雯 committed
38 39 40 41 42 43
  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);
张烨's avatar
张烨 committed
44

皮倩雯's avatar
皮倩雯 committed
45
  // 首次进入处理数据后续不触发
张烨's avatar
张烨 committed
46
  useEffect(() => {
47
    console.log(checkList);
皮倩雯's avatar
皮倩雯 committed
48 49 50 51 52
    let aa = dataList
      .map(l => checkChildrenByCondition(l, it => [getId(it)], true, 'map').flat(Infinity))
      .flat(Infinity)
      .filter(Boolean).length;
    setKeepAA(aa);
张烨's avatar
张烨 committed
53
    setValueList(checkList);
皮倩雯's avatar
皮倩雯 committed
54 55 56 57 58 59 60 61 62 63
    if (checkList.length === 0) {
      setIndeterminate(false);
      setCheckValue(false);
    } else if (checkList.length < aa) {
      setIndeterminate(true);
      setCheckValue(false);
    } else {
      setIndeterminate(false);
      setCheckValue(true);
    }
Maofei94's avatar
Maofei94 committed
64
  }, [dataList, loading, checkList]);
65

皮倩雯's avatar
皮倩雯 committed
66
  // 处理选中的值
67
  const updateValueList = (checkedKeys, childrenKeys, sourceItem) => {
68 69 70 71
    const removekeys = _.difference(childrenKeys, checkedKeys);
    let result = _.uniq(_.union(checkedKeys, valueList));
    _.remove(result, v => removekeys.includes(v));
    setValueList(result);
皮倩雯's avatar
皮倩雯 committed
72
    setChangedItem(sourceItem);
张烨's avatar
张烨 committed
73
    onChange && onChange(result);
皮倩雯's avatar
皮倩雯 committed
74 75 76 77 78 79 80 81 82 83
    if (result.length === 0) {
      setIndeterminate(false);
      setCheckValue(false);
    } else if (result.length < keepAA) {
      setIndeterminate(true);
      setCheckValue(false);
    } else {
      setIndeterminate(false);
      setCheckValue(true);
    }
84
  };
Maofei94's avatar
Maofei94 committed
85

皮倩雯's avatar
皮倩雯 committed
86
  // 全选
87
  const checkAll = e => {
皮倩雯's avatar
皮倩雯 committed
88
    setFlag(flag + 1);
89
    if (e.target.checked) {
皮倩雯's avatar
皮倩雯 committed
90 91
      const arr = JSON.parse(JSON.stringify(dataList));
      const result = arr.map(item => getAllID(item)).flat(Infinity);
92
      setValueList(result);
皮倩雯's avatar
皮倩雯 committed
93 94
      setCheckValue(true);
      setIndeterminate(false);
95 96 97 98
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange(result);
    } else {
      setValueList([]);
皮倩雯's avatar
皮倩雯 committed
99 100
      setCheckValue(false);
      setIndeterminate(false);
101 102 103 104 105
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange([]);
    }
  };

皮倩雯's avatar
皮倩雯 committed
106
  // 获取所有ID
107 108
  const getAllID = item => {
    let result = [];
109
    const haveChildren = Array.isArray(item.children) && item.children.length > 0;
110 111 112 113 114 115 116 117 118
    // 统一使用 getId
    result.push(getId(item));
    if (haveChildren) {
      // 每次递归result被置空,所以要另外保存
      result = [...item.children.map(i => getAllID(i)), ...result];
    }
    return result;
  };

Maofei94's avatar
Maofei94 committed
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
  return (
    <div>
      {loading ? (
        <Spin
          size="large"
          spinning={loading}
          tip={tip}
          style={{
            position: 'absolute',
            top: '30%',
            left: '0',
            right: '0',
            bottom: '0',
          }}
        />
      ) : (
皮倩雯's avatar
皮倩雯 committed
135 136 137 138 139 140 141 142 143 144 145 146 147
        <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>
Maofei94's avatar
Maofei94 committed
148
          {dataList && dataList.length > 0 ? (
张烨's avatar
张烨 committed
149
            dataList
张烨's avatar
张烨 committed
150
              .filter(d => d.type === 'widgetGroup' || 'widget')
张烨's avatar
张烨 committed
151 152
              .map((item, index) => (
                <ListCardItem
153 154
                  item={item}
                  ouid={ouid}
皮倩雯's avatar
皮倩雯 committed
155
                  flag={flag}
156
                  roleID={roleID}
张烨's avatar
张烨 committed
157
                  changedItem={changedItem}
158 159
                  updateValueList={updateValueList}
                  valueList={valueList}
张烨's avatar
张烨 committed
160 161 162 163
                  key={`item${index}key`}
                  searchWord={searchWord}
                  {...props}
                />
Maofei94's avatar
Maofei94 committed
164 165
              ))
          ) : (
Maofei94's avatar
Maofei94 committed
166
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
Maofei94's avatar
Maofei94 committed
167
          )}
皮倩雯's avatar
皮倩雯 committed
168
        </div>
Maofei94's avatar
Maofei94 committed
169
      )}
Maofei94's avatar
Maofei94 committed
170
      {true && !loading && dataList && dataList.length > 0 && (
Maofei94's avatar
Maofei94 committed
171
        <div className={styles.btnBox}>
张烨's avatar
张烨 committed
172 173 174
          <Button
            type="primary"
            onClick={() => onCommit(valueList.filter(Boolean))}
Maofei94's avatar
Maofei94 committed
175
            loading={btnLoading}
张烨's avatar
张烨 committed
176
          >
Maofei94's avatar
Maofei94 committed
177 178 179
            提交
          </Button>
        </div>
Maofei94's avatar
Maofei94 committed
180 181 182 183 184 185
      )}
    </div>
  );
};

export default ListCard;