HomeConfigModal.jsx

import React, { useState, useEffect } from 'react';
import { Modal, Form, Select, Input, Checkbox } from 'antd';
import lodash from 'lodash';
import styles from './HomeConfigModal.less';
import { GetRoleGroups } from '@/services/webConfig/api';
const { Option } = Select;
const HomeConfigModal = props => {
  const { handleCancel, productList, visible, onFinish, currentPageConfig, client } = props;
  const [form] = Form.useForm();

  const [checkList, setCheckList] = useState(null);
  useEffect(() => {
    if (visible) {
      form.setFieldsValue(currentPageConfig);
      getCheckList();
    } else {
      setCheckList(null);
      form.resetFields();
    }
  }, [visible]);

  // 保存配置
  const onSubmit = () => {
    let roleName = [];
    let roleId = [];
    const getArr = arr => {
      arr.roleGroups.forEach(item => {
        if (item.roleGroups) {
          getArr(item);
        } else if (item.isCheck) {
          roleName.push(item.roleName);
          roleId.push(item.roleId);
        }
      });
    };

    getArr(checkList);
    console.log(checkList, { ...form.getFieldsValue(), roleName, roleId });
    onFinish({
      ...form.getFieldsValue(),
      roleName: roleName.join(','),
      roleId,
      keyIndex: currentPageConfig.keyIndex,
    });
    handleCancel();
  };
  const getCheckList = () => {
    console.log(client, 'client');
    if (!client) {
      return;
    }
    GetRoleGroups({ client }).then(res => {
      if (res.code === 0) {
        let childList = [];
        let defaultList = [];
        const chekMap = new Set(currentPageConfig.roleId);
        res.data.forEach(item => {
          if (item.groupName !== '默认') {
            let checks = [];
            item.roleGroups.forEach(ele => {
              if (chekMap.has(ele.roleId)) {
                checks.push(ele);
              }
            });
            if (checks.length === item.roleGroups.length) {
              item.indeterminate = false;
              item.isCheck = true;
            } else if (checks.length === 0) {
              item.indeterminate = false;
              item.isCheck = false;
            } else {
              item.indeterminate = true;
              item.isCheck = false;
            }
            childList.push(item);
          } else {
            defaultList = item.roleGroups;
          }
        });

        console.log(chekMap, currentPageConfig, 'chekMap');

        let list = {
          groupName: '关联角色',
          isCheck: false,
          roleGroups: [...defaultList, ...childList].map((item, index) => {
            let obj = {
              groupName: item.groupName,
              isCheck: item.isCheck,
              indeterminate: item.indeterminate,
              index: [index],
              roleGroups: item.roleGroups?.map((ele, i) => ({
                ...ele,
                isCheck: chekMap.has(ele.roleId),
                index: [index, i],
              })),
            };
            let ojbChild = { ...item, isCheck: chekMap.has(item.roleId), index: [index] };

            return item.roleGroups ? obj : ojbChild;
          }),
        };
        console.log(list, 'list');
        setCheckList(list);
      }
    });
  };
  // 多选
  const changeAll = (e, item) => {
    console.log(item, 'itemasjdf');
    let list = lodash.cloneDeep(checkList);
    let current = item.index
      ? item.index.reduce((acc, cur) => (acc.roleGroups ? acc.roleGroups[cur] : acc), list)
      : list;
    console.log(current);
    current.isCheck = e.target.checked;
    checkAll(e.target.checked, current.roleGroups);
    current.indeterminate = false;
    setCheckList(list);
  };
  const checkAll = (checked, list) => {
    list.forEach(item => {
      if (item.roleGroups) {
        checkAll(checked, item.roleGroups);
      }
      item.isCheck = checked;
    });
  };
  const onChange = (e, item) => {
    let list = lodash.cloneDeep(checkList);
    console.log(item.index, list, 'asfd');
    let current = item.index.reduce(
      (acc, cur) => (acc.roleGroups ? acc.roleGroups[cur] : acc),
      list,
    );
    console.log(current, 'current');
    current.isCheck = e.target.checked;
    let parentIndex = [...item.index];
    parentIndex.pop();

    let allCurrent = parentIndex.reduce(
      (acc, cur) => (acc.roleGroups ? acc.roleGroups[cur] : acc),
      list,
    );
    console.log(allCurrent, 'allCurrent');
    let num = allCurrent?.roleGroups?.filter(ele => ele.isCheck).length;

    if (num === allCurrent.roleGroups.length) {
      allCurrent.indeterminate = false;
      allCurrent.isCheck = true;
    } else if (num === 0) {
      allCurrent.indeterminate = false;
      allCurrent.isCheck = false;
    } else {
      allCurrent.indeterminate = true;
    }

    setCheckList(list);
  };
  const checkRender = list => {
    console.log(list, 'fasldfjaslkdjf');
    let num = list?.roleGroups?.filter(ele => ele.isCheck || ele.indeterminate).length;
    return (
      <>
        <div className={styles.checkList}>
          {list?.groupName && (
            <div className={styles.title}>
              <Checkbox
                onChange={e => changeAll(e, list)}
                checked={num === list?.roleGroups.length}
                indeterminate={num > 0 && num < list?.roleGroups.length}
              >
                {list?.groupName}
              </Checkbox>
            </div>
          )}
          {list?.roleGroups.map(item => {
            return (
              <>
                {item.roleGroups ? (
                  checkRender(item)
                ) : (
                  <Checkbox
                    onChange={e => onChange(e, item)}
                    style={{ width: '150px', marginLeft: '0px', marginBottom: '10px' }}
                    checked={item.isCheck}
                  >
                    {item.roleName}
                  </Checkbox>
                )}
              </>
            );
          })}
        </div>
      </>
    );
  };
  return (
    <Modal
      width={800}
      title="主页配置"
      visible={visible}
      onCancel={handleCancel}
      maskClosable={false}
      onOk={onSubmit}
      destroyOnClose
    >
      <div className={styles.content}>
        <Form
          form={form}
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 21 }}
          initialValues={{ remember: true }}
        >
          <Form.Item label="产品类型" name="productType">
            <Select placeholder="请选择主页产品类型">
              {productList.map(item => (
                <Option value={item.PackageName} key={item.PackageName}>
                  {`${item.ProductName}（${item.PackageName}）`}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label="主页Url" name="homePage">
            <Input placeholder="请输入主页路径" autoComplete="off" />
          </Form.Item>
        </Form>
        <div className={styles.roleCheck}>{checkRender(checkList)}</div>
      </div>
    </Modal>
  );
};

export default HomeConfigModal;