index.jsx 3.9 KB
Newer Older
张烨's avatar
张烨 committed
1
import React, { useState, useEffect } from 'react';
2
import { Spin, Checkbox, Button, Empty } from 'antd';
3
import _ from 'lodash';
Maofei94's avatar
Maofei94 committed
4
import ListCardItem from './ItemCard';
Maofei94's avatar
Maofei94 committed
5
import styles from './ItemCard.less';
Maofei94's avatar
Maofei94 committed
6 7

const tip = 'loading...';
8 9 10 11

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

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

Maofei94's avatar
Maofei94 committed
30
const ListCard = props => {
Maofei94's avatar
Maofei94 committed
31
  console.log(props, 'props');
张烨's avatar
张烨 committed
32 33 34 35 36 37 38
  const {
    ouid,
    searchWord,
    onCommit = () => {},
    dataList,
    onChange,
    checkList,
Maofei94's avatar
Maofei94 committed
39
    btnLoading = false,
张烨's avatar
张烨 committed
40 41
    loading,
  } = props;
42
  const [valueList, setValueList] = useState([]);
张烨's avatar
张烨 committed
43
  const [changedItem, setChangedItem] = useState({ item: {} });
张烨's avatar
张烨 committed
44 45 46

  useEffect(() => {
    setValueList(checkList);
Maofei94's avatar
Maofei94 committed
47
  }, [dataList, loading, checkList]);
48

张烨's avatar
张烨 committed
49
  const updateValueList = (checkedKeys, childrenKeys, sourceItem) => {
张烨's avatar
张烨 committed
50
    // eslint-disable-next-line no-console
张烨's avatar
张烨 committed
51
    // console.time('updateValueList:');
52 53 54 55
    const removekeys = _.difference(childrenKeys, checkedKeys);
    let result = _.uniq(_.union(checkedKeys, valueList));
    _.remove(result, v => removekeys.includes(v));
    setValueList(result);
张烨's avatar
张烨 committed
56
    if (sourceItem) setChangedItem(sourceItem);
张烨's avatar
张烨 committed
57 58 59
    // eslint-disable-next-line no-unused-expressions
    onChange && onChange(result);
    // eslint-disable-next-line no-console
张烨's avatar
张烨 committed
60
    // console.timeEnd('updateValueList:');
61
  };
Maofei94's avatar
Maofei94 committed
62

63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
  const checkAll = e => {
    if (e.target.checked) {
      const result = dataList.map(item => getAllID(item)).flat(Infinity);
      setValueList(result);
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange(result);
    } else {
      setValueList([]);
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange([]);
    }
  };

  const getAllID = item => {
    let result = [];
    const haveChildren =
      Array.isArray(item.children) && item.children.length > 0;
    // 统一使用 getId
    result.push(getId(item));
    if (haveChildren) {
      // 每次递归result被置空,所以要另外保存
      result = [...item.children.map(i => getAllID(i)), ...result];
    }
    return result;
  };

Maofei94's avatar
Maofei94 committed
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
  return (
    <div>
      {loading ? (
        <Spin
          size="large"
          spinning={loading}
          tip={tip}
          style={{
            position: 'absolute',
            top: '30%',
            left: '0',
            right: '0',
            bottom: '0',
          }}
        />
      ) : (
张烨's avatar
张烨 committed
105
        <>
106
          <Checkbox onChange={checkAll}>全选/全不选</Checkbox>
Maofei94's avatar
Maofei94 committed
107
          {dataList && dataList.length > 0 ? (
张烨's avatar
张烨 committed
108
            dataList
张烨's avatar
张烨 committed
109
              .filter(d => d.type === 'widgetGroup' || 'widget')
张烨's avatar
张烨 committed
110 111
              .map((item, index) => (
                <ListCardItem
112 113
                  item={item}
                  ouid={ouid}
张烨's avatar
张烨 committed
114
                  changedItem={changedItem}
115 116
                  updateValueList={updateValueList}
                  valueList={valueList}
张烨's avatar
张烨 committed
117 118 119 120
                  key={`item${index}key`}
                  searchWord={searchWord}
                  {...props}
                />
Maofei94's avatar
Maofei94 committed
121 122
              ))
          ) : (
Maofei94's avatar
Maofei94 committed
123
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
Maofei94's avatar
Maofei94 committed
124
          )}
张烨's avatar
张烨 committed
125
        </>
Maofei94's avatar
Maofei94 committed
126
      )}
Maofei94's avatar
Maofei94 committed
127
      {true && !loading && dataList && dataList.length > 0 && (
Maofei94's avatar
Maofei94 committed
128
        <div className={styles.btnBox}>
张烨's avatar
张烨 committed
129 130 131
          <Button
            type="primary"
            onClick={() => onCommit(valueList.filter(Boolean))}
Maofei94's avatar
Maofei94 committed
132
            loading={btnLoading}
张烨's avatar
张烨 committed
133
          >
Maofei94's avatar
Maofei94 committed
134 135 136
            提交
          </Button>
        </div>
Maofei94's avatar
Maofei94 committed
137 138 139 140 141 142
      )}
    </div>
  );
};

export default ListCard;