VisibleRoleModal.jsx 10 KB
Newer Older
1 2
/* eslint-disable no-restricted-syntax */
import React, { useEffect, useState } from 'react';
3
import SiteModal from '@/components/Modal/SiteModa';
4 5
import { Checkbox, Input, Button, Modal } from 'antd';
// import { data } from '../Mock'
6 7
import _ from 'lodash';
import classnames from 'classnames';
8
import { ManOutlined } from '@ant-design/icons';
邓超's avatar
邓超 committed
9
import { RoleGroupList } from '@/services/messagemanage/messagemanage';
mayongxin's avatar
mayongxin committed
10
import { useTheme } from 'bizcharts';
11
import styles from './VisibleRoleModal.less';
mayongxin's avatar
mayongxin committed
12

13 14
const checkIsGroup = node => node.children?.length > 0;
const getId = item => item.userID || item.roleID || item.stationID || item.id;
15 16

const VisibleRoleModal = props => {
17 18 19 20 21 22
  const [loading, setLoading] = useState(false);
  const [previewVisible, setPreviewVisible] = useState(false);
  const [selectRole, setSelectRole] = useState([]);
  const [dataTree, setDataTree] = useState([]);
  const [dataLeafs, setDataLeafs] = useState([]);
  const [selectValues, setSelectValues] = useState([]);
23 24 25 26 27 28 29 30 31 32 33
  const {
    onSubmit,
    title,
    operate,
    initValues,
    selectValue,
    tree,
    leafs,
    visible,
    onCancel,
  } = props;
34 35

  useEffect(() => {
36 37
    console.log(tree);
    console.log(leafs);
38 39 40
    // eslint-disable-next-line no-shadow
    if (selectValue) {
      setSelectRole(selectValue);
41
    }
42 43 44
    setDataTree(tree);
    setDataLeafs(leafs);
  }, [visible]);
45 46

  const handleCancel = () => {
47
    onCancel();
48 49 50
  };
  const handleOk = () => {
    // eslint-disable-next-line no-unused-expressions
51
    console.log(selectValues);
52 53
    onSubmit && onSubmit(selectValues);
  };
54 55 56
  // const handleClick = () => {
  //   setPreviewVisible(true);
  // };
57 58 59 60 61 62
  const onChange2 = value => {
    console.log(value);
    const strArr = [];
    // eslint-disable-next-line no-restricted-syntax
    for (const item of value) {
      strArr.push(item.name);
63
    }
64 65 66 67 68
    setSelectRole(strArr.toString());
    setSelectValues(value);
  };
  return (
    <div className={styles.role_container}>
69
      {/* {operate ? (
70 71 72 73 74 75 76 77
        <div onClick={handleClick}>{operate}</div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
          <Input disabled value={selectRole} />
          <div className={styles.select_btn} onClick={handleClick}>
            {title || '选择角色'}
          </div>
        </div>
78
      )} */}
79 80 81 82 83 84 85

      <SiteModal
        {...props}
        title={
          title && Object.prototype.toString.call(title) !== '[object Object]'
            ? `选择${title}`
            : '关联角色'
mayongxin's avatar
mayongxin committed
86
        }
87 88 89 90 91 92 93 94
        bodyStyle={{ width: '100%', minHeight: '100px' }}
        style={{ top: 200, borderRadius: '20px' }}
        width="800px"
        destroyOnClose
        cancelText="取消"
        okText="确认"
        onOk={() => handleOk()}
        confirmLoading={loading}
95
        visible={visible}
96 97 98 99 100 101 102 103 104
        onCancel={handleCancel}
      >
        <div className={styles.list_card}>
          <ListCard
            {...props}
            onChange2={onChange2}
            data={dataTree}
            dataLeafs={dataLeafs}
            initValues={initValues}
105
            selectValue={selectValue}
106
          />
107
        </div>
108 109 110 111
      </SiteModal>
    </div>
  );
};
112
const checkChildrenByCondition = (item, fn, withGroup = true, method = 'every') => {
113 114 115 116 117 118 119
  if (item.children && item.children.length > 0) {
    return fn(item);
  }
  const childrenResults = item.children[method](t =>
    checkChildrenByCondition(t, fn, withGroup, method),
  );
  return withGroup ? [fn(item), ...childrenResults] : [...childrenResults];
120 121
};
const ListCard = props => {
122
  const { onChange, onChange2, data, dataLeafs, initValues, selectValue } = props;
123 124

  const [changedItem, setChangedItem] = useState({ item: {} });
125 126
  const [indeterminateAll, setIndeterminateAll] = useState(false);
  const [checkValue, setCheckValue] = useState(false);
127 128
  const [valueList, setValueList] = useState([]);
  const checkAll = e => {
129
    setIndeterminateAll(false);
130
    if (e.target.checked) {
131
      setCheckValue(true);
132
      const result = data.map(item => getAllID(item)).flat(Infinity);
133
      console.log(result);
134 135 136 137 138 139 140 141 142 143 144 145 146
      setValueList(result);
      // eslint-disable-next-line no-unused-expressions
      const fliterResult = filterChildren(result);
      const strArr = [];
      // eslint-disable-next-line no-restricted-syntax
      for (const item of fliterResult) {
        strArr.push(item.name);
      }
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange(strArr.toString());
      // eslint-disable-next-line no-unused-expressions
      onChange2 && onChange2(fliterResult);
    } else {
147
      setCheckValue(false);
148 149 150 151 152 153 154
      setValueList([]);
      // eslint-disable-next-line no-unused-expressions
      const fliterResult = filterChildren(result);
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange(fliterResult);
      // eslint-disable-next-line no-unused-expressions
      onChange2 && onChange2(fliterResult);
mayongxin's avatar
mayongxin committed
155
    }
156 157 158 159
  };

  const getAllID = item => {
    let result = [];
160
    const haveChildren = Array.isArray(item.children) && item.children.length > 0;
161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
    // 统一使用 getId
    result.push(getId(item));
    if (haveChildren) {
      // 每次递归result被置空,所以要另外保存
      result = [...item.children.map(i => getAllID(i)), ...result];
    }
    return result;
  };
  const filterChildren = select => {
    let selectLeafs = [];

    for (const leaf of dataLeafs) {
      for (const id of select) {
        if (id == leaf.id) {
          selectLeafs.push(leaf);
mayongxin's avatar
mayongxin committed
176
        }
177
      }
178
    }
179 180 181 182 183 184 185
    return selectLeafs;
  };

  const updateValueList = (checkedKeys, childrenKeys, sourceItem) => {
    const removekeys = _.difference(childrenKeys, checkedKeys);
    let result = _.uniq(_.union(checkedKeys, valueList));
    _.remove(result, v => removekeys.includes(v));
186
    console.log(result);
187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202
    setValueList(result);
    if (sourceItem) setChangedItem(sourceItem);
    // eslint-disable-next-line no-unused-expressions

    // onChange && onChange(result);
    // onChange2 && onChange2(result);
    const fliterResult = filterChildren(result);
    const strArr = [];
    // eslint-disable-next-line no-restricted-syntax
    for (const item of fliterResult) {
      strArr.push(item.name);
    }
    // eslint-disable-next-line no-unused-expressions
    onChange && onChange(strArr.toString());
    // eslint-disable-next-line no-unused-expressions
    onChange2 && onChange2(fliterResult);
203 204
    console.log(fliterResult);
    console.log(strArr.toString());
205 206 207 208 209 210
  };

  useEffect(() => {
    // eslint-disable-next-line no-unused-expressions
    initValues && setValueList(initValues);
  }, []);
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234

  useEffect(() => {
    console.log(initValues);
    console.log(initValues.length);

    let dataaa = [];
    data.map(i => {
      i.children.map(j => {
        dataaa.push(j);
      });
    });
    console.log(dataaa);
    if (initValues.length === 0) {
      setIndeterminateAll(false);
      setCheckValue(false);
    } else if (initValues.length < dataaa.length) {
      setIndeterminateAll(true);
      setCheckValue(false);
    } else {
      setIndeterminateAll(false);
      setCheckValue(true);
    }
  }, [selectValue]);

235 236
  return (
    <div>
237 238 239
      <Checkbox onChange={checkAll} indeterminate={indeterminateAll} checked={checkValue}>
        全选/全不选
      </Checkbox>
240 241 242 243 244 245 246 247 248 249 250 251 252
      {data.map((item, i) => (
        <ListCardItem
          key={i}
          item={item}
          updateValueList={updateValueList}
          valueList={valueList}
          changedItem={changedItem}
          {...props}
        />
      ))}
    </div>
  );
};
253
const ListCardItem = props => {
254 255 256 257 258 259 260 261 262 263 264 265 266 267 268
  const { item, valueList, updateValueList, changedItem } = props;
  const { id } = item;
  // 当前组件是否是分组id
  const isGroup = item.children && item.children.length > 0;
  const [indeterminate, setIndeterminate] = useState(!isGroup);
  const [childrenKeys, setChildrenKeys] = useState([]);

  useEffect(() => {
    if (isGroup) {
      const keys = item.children
        .map(child => checkChildrenByCondition(child, c => c.id, true, 'map'))
        .flat(Infinity);
      setChildrenKeys(keys);
    } else {
      //
269
    }
270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335
  }, [item]);

  useEffect(() => {
    // 子节点勾选状态变化时
    if (
      isGroup &&
      changedItem.item !== item &&
      !checkIsGroup(changedItem.item) &&
      childrenKeys.includes(getId(changedItem.item))
    ) {
      if (changedItem.value && childrenKeys.every(c => valueList.includes(c))) {
        // 全选
        updateValueList([id], [id]);
        setIndeterminate(false);
      } else if (childrenKeys.some(c => valueList.includes(c))) {
        // 半选
        // eslint-disable-next-line no-unused-expressions
        valueList.includes(id) && updateValueList([], [id]);
        setIndeterminate(true);
      } else {
        // 零选
        // eslint-disable-next-line no-unused-expressions
        valueList.includes(id) && updateValueList([], [id]);
        setIndeterminate(false);
      }
    }
  }, [changedItem.item, changedItem.value]);

  const handleChecked = e => {
    const { checked: v } = e.target;
    if (isGroup) {
      const result = [...childrenKeys, id];
      updateValueList(v ? result : [], result, { item, value: v });
      setIndeterminate(false);
    } else {
      updateValueList(v ? [id] : [], [id], { item, value: v });
    }
  };
  const renderChild = () =>
    item.children &&
    item.children.map((c, i) => (
      <ListCardItem
        item={c}
        key={`item${i}key`}
        updateValueList={updateValueList}
        valueList={valueList}
        changedItem={changedItem}
      />
    ));
  return (
    <div
      className={classnames({
        [styles.divBox]: isGroup,
        [styles.divSingle]: !isGroup,
      })}
    >
      <div className={styles.topCheckbox}>
        <Checkbox
          indeterminate={isGroup ? indeterminate : false}
          checked={valueList.includes(id)}
          onChange={handleChecked}
        >
          {item.name}
        </Checkbox>
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {renderChild()}
336
        </div>
337 338 339 340 341
      </div>
    </div>
  );
};
export default VisibleRoleModal;