index.js

/* eslint-disable no-use-before-define */
/* eslint-disable eqeqeq */
import React, { useState, useEffect, useRef } from 'react';
import { Modal, Checkbox, Tabs, Input, Button, Pagination, Empty, Tag, Divider, Radio } from 'antd';
import { appService } from '@/api';

import { cloneDeep } from 'lodash';
import styles from './index.less';
const CheckboxGroup = Checkbox.Group;
const { TabPane } = Tabs;
const RMSComponents = props => {
  const {
    callBackSubmit = () => {},
    pickItem,
    visible,
    newCheckedList,
    groupName,
    chooseGroupName,
    dataType,
    isRadio,
    allData,
  } = props;
  const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
  const [searchWord, setSearchWord] = useState(''); // 关键字
  const { Search } = Input;
  const [total, setTotal] = useState();
  const [pageSize, setPageSize] = useState(45);
  const [currentPage, setCurrentPage] = useState(1);
  const [checkDataRole, setCheckDataRole] = useState([]);
  const [checkDataPm, setCheckDataPm] = useState([]);
  const [checkDataSite, setCheckDataSite] = useState([]);
  const [saveCheckValue, setSaveCheckValue] = useState([]); // 保存选中值
  const [keepTabKey, setKeepTabKey] = useState(0); // 保存tabs的key
  const [keyValue, setKeyValue] = useState('0');
  const [emptyValue, setEmptyValue] = useState(0);
  const [selected, setSelected] = useState(new Map()); // 已勾选角色列表
  const [optionValue, setOptionValue] = useState([]);
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const [indeterminate1, setIndeterminate1] = useState(false);
  const [checkAll1, setCheckAll1] = useState(false);
  const [indeterminate2, setIndeterminate2] = useState(false);
  const [checkAll2, setCheckAll2] = useState(false);
  const keepFiled = useRef({});
  const [radioValue, setRadioValue] = useState();

  const radioChange = e => {
    setRadioValue(e.target.value);
    const data = optionValue['站点'].find(i => i.value === e.target.value);
    const cs = new Map();
    cs.set(data.value, {
      value: data.label,
      type: 2,
    });
    setSelected(cs);
  };

  const onSubmit = () => {
    const selectData = [];
    const ids = [];
    selected.forEach((val, key) => {
      selectData.push(val.value);
      ids.push(key);
    });
    callBackSubmit({
      str: selectData.join(','),
      pickItem,
      stt: selectData,
      ids,
    });
    setKeyValue('0');
    setSearchWord('');
  };
  const init = async () => {
    if (visible) {
      let mData = cloneDeep(allData);
      if (!mData) {
        const res = await appService.LoadDepartmentAndRole();
        mData = res.data?.data || [];
      }
      keepFiled.current = groupArr(mData, 'groupType');
      if (groupName == '角色') {
        setKeyValue('0');
        setKeepTabKey(0);
      } else if (groupName == '部门') {
        setKeyValue('1');
        setKeepTabKey(1);
      } else if (groupName == '站点') {
        setKeyValue('2');
        setKeepTabKey(2);
      }

      const checkArr = [];
      // 角色
      const listdata = [];
      const listId = [];
      newCheckedList.map(checkItem => {
        keepFiled.current['角色'] &&
          keepFiled.current['角色'].map(i => {
            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
            if (canSave) {
              listdata.push(i);
              listId.push(i.value.toString());
            }
          });
      });
      const cs = selected;
      listdata.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 0,
        });
      });
      setSelected(cs);
      const dataId = Array.from(new Set(listId));
      setCheckDataRole(dataId); // 用于设置首次展示已选列表角色数据
      checkArr[0] = dataId;
      // 部门
      const pmdata = [];
      const pmId = [];
      newCheckedList.map(checkItem => {
        keepFiled.current['部门'] &&
          keepFiled.current['部门'].map(i => {
            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
            if (canSave) {
              pmdata.push(i);
              pmId.push(i.value.toString());
            }
          });
      });
      const cs1 = selected;
      pmdata.map(i => {
        cs1.set(i.value, {
          value: i.label,
          type: 1,
        });
      });
      setSelected(cs1);
      const datapmId = Array.from(new Set(pmId));
      setCheckDataPm(datapmId);
      checkArr[1] = datapmId;
      // 站点
      const sitedata = [];
      const siteId = [];
      newCheckedList.map(checkItem => {
        keepFiled.current['站点'] &&
          keepFiled.current['站点'].map(i => {
            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
            if (canSave) {
              sitedata.push(i);
              siteId.push(i.value.toString());
            }
          });
      });
      const cs2 = selected;
      sitedata.map(i => {
        cs2.set(i.value, {
          value: i.label,
          type: 2,
        });
      });
      setSelected(cs2);
      const datasiteId = Array.from(new Set(siteId));
      setCheckDataSite(datasiteId);
      checkArr[2] = datasiteId;
      if (isRadio) {
        setRadioValue(siteId[0]);
      }
      setSaveCheckValue(checkArr);
      setCheckedList(checkArr);
      getRoles(groupName, '', pageSize, 1, 0, checkArr);
    } else {
      setSelected(new Map());
      setPageSize(45);
      setCurrentPage(1);
      setIndeterminate(false);
      setCheckAll(false);
      setCheckedList([]);
      setRadioValue();
      setOptionValue([]);
    }
  };
  useEffect(() => {
    init();
  }, [visible]);

  const submitSearchUser = () => {
    if (keepTabKey == 0) {
      sreachRoles('角色', searchWord, pageSize, 1);
    }
    if (keepTabKey == 1) {
      sreachRoles('部门', searchWord, pageSize, 1);
    }
    if (keepTabKey == 2) {
      sreachRoles('站点', searchWord, pageSize, 1);
    }
  };

  // 获取搜索框的值
  const handleSearch = e => {
    setSearchWord(e.target.value);
  };

  // 搜索时获取数据
  const sreachRoles = async (type, keywords, pageSizes, pageIndex) => {
    let mData = cloneDeep(allData);
    if (!mData) {
      const res = await appService.LoadDepartmentAndRole({
        type,
        keywords,
        pageSize: 999,
        pageIndex: 1,
      });
      mData = res.data?.data || [];
    }
    if (keywords && allData) {
      mData = mData.map(m => {
        if (m.root) {
          m.root = m.root.filter(a => a.Name.includes(keywords));
        }
        return m;
      });
    }

    setOptionValue(groupArr(mData, 'groupType'));
    const aa = groupArr(mData, 'groupType');
    const list = [];
    let data = '';
    if (type == '角色') {
      data = 0;
    } else if (type === '部门') {
      data = 1;
    } else if (type === '站点') {
      data = 2;
    }
    aa[type] &&
      aa[type].map(i => {
        if (checkedList[data].indexOf(i.value) != -1) {
          list.push(i.value);
        }
      });
    if (list.length === aa[type].length) {
      if (type === '角色') {
        setCheckAll(true);
        setIndeterminate(false);
      } else if (type === '部门') {
        setCheckAll1(true);
        setIndeterminate1(false);
      } else if (type === '站点') {
        setCheckAll2(true);
        setIndeterminate2(false);
      }
    } else if (list.length < aa[type].length && list.length !== 0) {
      if (type === '角色') {
        setCheckAll(false);
        setIndeterminate(true);
      } else if (type === '部门') {
        setCheckAll1(false);
        setIndeterminate1(true);
      } else if (type === '站点') {
        setCheckAll2(false);
        setIndeterminate2(true);
      }
    } else if (list.length === 0) {
      if (type === '角色') {
        setCheckAll(false);
        setIndeterminate(false);
      } else if (type === '部门') {
        setCheckAll1(false);
        setIndeterminate1(false);
      } else if (type === '站点') {
        setCheckAll2(false);
        setIndeterminate2(false);
      }
    }
    setCurrentPage(1);
    setTotal(mData.length);
    if (mData.length === 0) {
      setEmptyValue(1);
    } else {
      setEmptyValue(0);
    }
  };

  const getRoles = async (type, keywords, pageSizes, pageIndex, flag, check) => {
    let mData = cloneDeep(allData);
    if (!mData) {
      const res = await appService.LoadDepartmentAndRole({
        type,
        keywords,
        pageSize: 999,
        pageIndex: 1,
      });
      mData = res.data?.data || [];
    }

    setTotal(mData.length);
    setOptionValue(groupArr(mData, 'groupType'));
    const aa = groupArr(mData, 'groupType');
    const list = [];
    let data = '';
    if (type === '角色') {
      data = 0;
    } else if (type === '部门') {
      data = 1;
    } else if (type === '站点') {
      data = 2;
    }
    // 首次进入调用
    if (flag != undefined) {
      const listId = [];
      newCheckedList.map(checkItem => {
        if (keepFiled.current[groupName]) {
          keepFiled.current[groupName].map(i => {
            const canSave = dataType === 'name' ? i.label == checkItem : i.value == checkItem;
            if (canSave) {
              listId.push(i.value.toString());
            }
          });
        }
      });
      aa[type] &&
        aa[type].map(i => {
          if (listId.indexOf(i.value) != -1) {
            list.push(i.value);
          }
        });
    } else {
      aa[type] &&
        aa[type].map(i => {
          if (checkedList[data].indexOf(i.value) != -1) {
            list.push(i.value);
          }
        });
    }

    if (list.length === aa[type].length) {
      if (type == '角色') {
        setCheckAll(true);
        setIndeterminate(false);
      } else if (type == '部门') {
        setCheckAll1(true);
        setIndeterminate1(false);
      } else if (type == '站点') {
        setCheckAll2(true);
        setIndeterminate2(false);
      }
    } else if (list.length < aa[type].length && list.length !== 0) {
      if (type == '角色') {
        setCheckAll(false);
        setIndeterminate(true);
      } else if (type == '部门') {
        setCheckAll1(false);
        setIndeterminate1(true);
      } else if (type == '站点') {
        setCheckAll2(false);
        setIndeterminate2(true);
      }
    } else if (list.length === 0) {
      if (type == '角色') {
        setCheckAll(false);
        setIndeterminate(false);
      } else if (type == '部门') {
        setCheckAll1(false);
        setIndeterminate1(false);
      } else if (type == '站点') {
        setCheckAll2(false);
        setIndeterminate2(false);
      }
    }
    if (mData.length === 0) {
      setEmptyValue(1);
    } else {
      setEmptyValue(0);
    }
  };

  const groupArr = (initialArr, name) => {
    const list = {};
    if (!Array.isArray(initialArr)) return list;
    initialArr.map(i => {
      const ar = [];
      i.root.map(j => {
        const ss = {};
        ss.label = j.Name;
        ss.value = j.ID.toString();
        ar.push(ss);
      });
      list[i.groupType] = ar;
    });
    return list;
  };

  const handleParChange = key => {
    setKeyValue(key);
    // setSearchWord('');
    setCurrentPage(1);
    setKeepTabKey(key);
    if (key == 0) {
      getRoles('角色', searchWord, pageSize, 1);
    }
    if (key == 1) {
      getRoles('部门', searchWord, pageSize, 1);
    }
    if (key == 2) {
      getRoles('站点', searchWord, pageSize, 1);
    }
  };

  const onChangeListNew = list => {
    const checkedListArr = [...saveCheckValue];
    const data = checkDataRole;
    const DataValue = [];
    if (optionValue['角色']) {
      optionValue['角色'].map(i => {
        if (checkDataRole.indexOf(i.value) != -1) {
          DataValue.push(i.value);
        }
      });
    }
    // del
    if (DataValue.length > list.length) {
      DataValue.forEach(item => {
        if (list.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
          const hhh = selected;
          hhh.delete(item);
          setSelected(hhh);
        }
      });
    } else {
      // add
      list.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
      const arrList = [];
      keepFiled.current['角色'] &&
        keepFiled.current['角色'].map(k => {
          if (data.indexOf(k.value) != -1) {
            arrList.push(k);
          }
        });
      const cs = selected;
      arrList.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 0,
        });
      });
      setSelected(cs);
    }
    checkedListArr[0] = data;
    const listdata = [];
    optionValue['角色'].map(i => {
      if (data.indexOf(i.value) != -1) {
        listdata.push(i.value);
      }
    });
    if (listdata.length === optionValue['角色'].length) {
      setCheckAll(true);
      setIndeterminate(false);
    } else if (listdata.length < optionValue['角色'].length && listdata.length !== 0) {
      setCheckAll(false);
      setIndeterminate(true);
    } else if (listdata.length === 0) {
      setCheckAll(false);
      setIndeterminate(false);
    }
    setCheckDataRole(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };
  const onChangeListNew1 = list => {
    const checkedListArr = [...saveCheckValue];
    const data = checkDataPm;
    const DataValue = [];
    // 拿到当前页数据
    if (optionValue['部门']) {
      optionValue['部门'].map(i => {
        if (checkDataPm.indexOf(i.value) != -1) {
          DataValue.push(i.value);
        }
      });
    }
    // del
    if (DataValue.length > list.length) {
      DataValue.forEach(item => {
        if (list.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
          const hhh = selected;
          hhh.delete(item);
          setSelected(hhh);
        }
      });
    } else {
      // add
      list.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
      const arrList = [];
      keepFiled.current['部门'] &&
        keepFiled.current['部门'].map(k => {
          if (data.indexOf(k.value) != -1) {
            arrList.push(k);
          }
        });
      const cs = selected;
      arrList.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 1,
        });
      });
      setSelected(cs);
    }
    checkedListArr[1] = data;
    const listdata = [];
    optionValue['部门'].map(i => {
      if (data.indexOf(i.value) != -1) {
        listdata.push(i.value);
      }
    });
    if (listdata.length === optionValue['部门'].length) {
      setCheckAll1(true);
      setIndeterminate1(false);
    } else if (listdata.length < optionValue['部门'].length && listdata.length !== 0) {
      setCheckAll1(false);
      setIndeterminate1(true);
    } else if (listdata.length === 0) {
      setCheckAll1(false);
      setIndeterminate1(false);
    }
    setCheckDataPm(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };
  const onChangeListNew2 = list => {
    const checkedListArr = [...saveCheckValue];
    const data = checkDataSite;
    const DataValue = [];
    // 拿到当前页数据
    if (optionValue['站点']) {
      optionValue['站点'].map(i => {
        if (checkDataSite.indexOf(i.value) != -1) {
          DataValue.push(i.value);
        }
      });
    }
    // del
    if (DataValue.length > list.length) {
      DataValue.forEach(item => {
        if (list.indexOf(item) == -1) {
          data.splice(data.findIndex(ele => ele === item), 1);
          const hhh = selected;
          hhh.delete(item);
          setSelected(hhh);
        }
      });
    } else {
      // add
      list.forEach(item => {
        if (data.indexOf(item) == -1) {
          data.push(item);
        }
      });
      const arrList = [];
      keepFiled.current['站点'] &&
        keepFiled.current['站点'].map(k => {
          if (data.indexOf(k.value) != -1) {
            arrList.push(k);
          }
        });
      const cs = selected;
      arrList.map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 2,
        });
      });
      setSelected(cs);
    }
    checkedListArr[2] = data;
    const listdata = [];
    optionValue['站点'].map(i => {
      if (data.indexOf(i.value) != -1) {
        listdata.push(i.value);
      }
    });
    if (listdata.length === optionValue['站点'].length) {
      setCheckAll2(true);
      setIndeterminate2(false);
    } else if (listdata.length < optionValue['站点'].length && listdata.length !== 0) {
      setCheckAll2(false);
      setIndeterminate2(true);
    } else if (listdata.length === 0) {
      setCheckAll2(false);
      setIndeterminate2(false);
    }
    setCheckDataSite(data);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  const changeColor = e => {
    if (e === 0) {
      return 'cyan';
    }
    if (e === 1) {
      return 'orange';
    }
    return 'purple';
  };

  // 删除已选中列表
  const delSelected = value => {
    setRadioValue('');
    const aa = selected.get(value).type;
    const list = [];
    const checkedListArr = saveCheckValue;
    checkedListArr[aa].map(i => {
      if (i != value) {
        list.push(i);
      }
    });
    checkedListArr[aa] = list;
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
    let name = '';
    if (aa === 0) {
      setCheckDataRole(list);
      name = '角色';
    } else if (aa === 1) {
      setCheckDataPm(list);
      name = '部门';
    } else if (aa === 2) {
      setCheckDataSite(list);
      name = '站点';
    }
    const hhh = selected;
    hhh.delete(value);
    setSelected(hhh);
    const keepValue = [];
    optionValue[name].map(i => {
      if (list.indexOf(i.value) != -1) {
        keepValue.push(i);
      }
    });
    if (keepValue.length === optionValue[name].length) {
      if (aa == 0) {
        setCheckAll(true);
        setIndeterminate(false);
      } else if (aa == 1) {
        setCheckAll1(true);
        setIndeterminate1(false);
      } else if (aa == 2) {
        setCheckAll2(true);
        setIndeterminate2(false);
      }
    } else if (keepValue.length < optionValue[name].length && keepValue.length != 0) {
      if (aa == 0) {
        setCheckAll(false);
        setIndeterminate(true);
      } else if (aa == 1) {
        setCheckAll1(false);
        setIndeterminate1(true);
      } else if (aa == 2) {
        setCheckAll2(false);
        setIndeterminate2(true);
      }
    } else if (keepValue.length === 0) {
      if (aa == 0) {
        setCheckAll(false);
        setIndeterminate(false);
      } else if (aa == 1) {
        setCheckAll1(false);
        setIndeterminate1(false);
      } else if (aa == 2) {
        setCheckAll2(false);
        setIndeterminate2(false);
      }
    }
  };

  const onCheckAllChange = e => {
    setIndeterminate(false);
    setCheckAll(e.target.checked);
    const checkedListArr = [...saveCheckValue];
    const data = [];
    optionValue['角色'] &&
      optionValue['角色'].map(i => {
        data.push(i.value);
      });
    let list = [];
    if (e.target.checked) {
      // 复选框
      list = Array.from(new Set([...checkedList[0], ...data]));
      checkedListArr[0] = list;
      // 已选列表
      const cs = selected;
      optionValue['角色'].map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 0,
        });
      });
      setSelected(cs);
    } else {
      checkedListArr[0].map(i => {
        if (data.indexOf(i) == -1) {
          list.push(i);
        }
      });
      checkedListArr[0] = list;
      // 已选列表
      const hhh = selected;
      data.map(i => {
        hhh.delete(i);
      });
      setSelected(hhh);
    }
    setCheckDataRole(list);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  const onCheckAllChange1 = e => {
    setIndeterminate1(false);
    setCheckAll1(e.target.checked);
    const checkedListArr = [...saveCheckValue];
    const data = [];
    optionValue['部门'] &&
      optionValue['部门'].map(i => {
        data.push(i.value);
      });
    let list = [];
    if (e.target.checked) {
      // 复选框
      list = Array.from(new Set([...checkedList[1], ...data]));
      checkedListArr[1] = list;
      // 已选列表
      const cs = selected;
      optionValue['部门'].map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 1,
        });
      });
      setSelected(cs);
    } else {
      checkedListArr[1].map(i => {
        if (data.indexOf(i) == -1) {
          list.push(i);
        }
      });
      checkedListArr[1] = list;
      // 已选列表
      const hhh = selected;
      data.map(i => {
        hhh.delete(i);
      });
      setSelected(hhh);
    }
    setCheckDataPm(list);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  const onCheckAllChange2 = e => {
    setIndeterminate2(false);
    setCheckAll2(e.target.checked);
    const checkedListArr = [...saveCheckValue];
    const data = [];
    optionValue['站点'] &&
      optionValue['站点'].map(i => {
        data.push(i.value);
      });
    let list = [];
    if (e.target.checked) {
      // 复选框
      list = Array.from(new Set([...checkedList[2], ...data]));
      checkedListArr[2] = list;
      // 已选列表
      const cs = selected;
      optionValue['站点'].map(i => {
        cs.set(i.value, {
          value: i.label,
          type: 2,
        });
      });
      setSelected(cs);
    } else {
      checkedListArr[2].map(i => {
        if (data.indexOf(i) == -1) {
          list.push(i);
        }
      });
      checkedListArr[2] = list;
      // 已选列表
      const hhh = selected;
      data.map(i => {
        hhh.delete(i);
      });
      setSelected(hhh);
    }
    setCheckDataSite(list);
    setSaveCheckValue(checkedListArr);
    setCheckedList(checkedListArr);
  };

  return (
    <Modal
      title="权限选择"
      bodyStyle={{ width: '100%', height: '590px', overflowY: 'scorll' }}
      width="1000px"
      style={{ top: '-20px' }}
      destroyOnClose
      centered
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender
      // getContainer={false}
      afterClose={() => {
        setKeyValue('0');
        setSearchWord('');
      }}
      wrapClassName="roleModalContainer"
    >
      <div className={styles.pageContent}>
        {/* 可选列表 */}
        <div className={styles.optionalList}>
          <div className={styles.header} />
          <Search
            className={styles.searchInput}
            allowClear
            placeholder="搜索"
            onSearch={submitSearchUser}
            onChange={e => handleSearch(e)}
            value={searchWord}
          />
          <div className={styles.tabContent}>
            {visible && (
              <Tabs type="card" activeKey={keyValue} onChange={handleParChange}>
                {chooseGroupName.indexOf('角色') !== -1 ? (
                  <TabPane tab="角色" key="0">
                    <div className={styles.checkContent}>
                      {emptyValue == 0 ? (
                        <div className={styles.check}>
                          <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
                            全选
                          </Checkbox>
                          <Divider />
                          <CheckboxGroup
                            options={optionValue['角色']}
                            value={checkedList[0]}
                            onChange={onChangeListNew}
                          />
                        </div>
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
                      )}
                    </div>
                  </TabPane>
                ) : (
                  <></>
                )}
                {chooseGroupName.indexOf('部门') !== -1 ? (
                  <TabPane tab="部门" key="1">
                    <div className={styles.checkContent}>
                      {emptyValue == 0 ? (
                        <div className={styles.check}>
                          <Checkbox indeterminate={indeterminate1} onChange={onCheckAllChange1} checked={checkAll1}>
                            全选
                          </Checkbox>
                          <Divider />
                          <CheckboxGroup
                            options={optionValue['部门']}
                            value={checkedList[1]}
                            onChange={onChangeListNew1}
                          />
                        </div>
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
                      )}
                    </div>
                  </TabPane>
                ) : (
                  <></>
                )}
                {chooseGroupName.indexOf('站点') !== -1 ? (
                  <TabPane tab="站点" key="2">
                    <div className={styles.checkContent}>
                      {emptyValue == 0 ? (
                        <div className={styles.check}>
                          {isRadio ? (
                            <Radio.Group onChange={radioChange} value={radioValue}>
                              {optionValue['站点']?.map(i => <Radio value={i.value}>{i.label}</Radio>)}
                            </Radio.Group>
                          ) : (
                            <>
                              <Checkbox indeterminate={indeterminate2} onChange={onCheckAllChange2} checked={checkAll2}>
                                全选
                              </Checkbox>
                              <Divider />
                              <CheckboxGroup
                                options={optionValue['站点']}
                                value={checkedList[2]}
                                onChange={onChangeListNew2}
                              />
                            </>
                          )}
                        </div>
                      ) : (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" />
                      )}
                    </div>
                  </TabPane>
                ) : (
                  <></>
                )}
              </Tabs>
            )}
          </div>
        </div>
        {/* 已选列表 */}
        <div className={styles.selectedList}>
          <div className={styles.header}>
            <div className={styles.title}>已选列表</div>
            <div className={styles.tagHead}>
              {chooseGroupName.indexOf('角色') !== -1 ? (
                <div className={styles.tagContent}>
                  <div className={styles.tagRol} />
                  <div>角色</div>
                </div>
              ) : (
                <></>
              )}
              {chooseGroupName.indexOf('部门') !== -1 ? (
                <div className={styles.tagContent}>
                  <div className={styles.tagOrg} />
                  <div>部门</div>
                </div>
              ) : (
                <></>
              )}
              {chooseGroupName.indexOf('站点') !== -1 ? (
                <div className={styles.tagContent}>
                  <div className={styles.tagSite} />
                  <div>站点</div>
                </div>
              ) : (
                <></>
              )}
            </div>
          </div>
          <div className={styles.selectBox}>
            {[...selected].length > 0 ? (
              <div className={styles.selectContent}>
                {[...selected].map(item => (
                  <div className={styles.selectValue} key={item[0]}>
                    <Tag closable color={changeColor(item[1].type)} onClose={() => delSelected(item[0])}>
                      {item[1].value}
                    </Tag>
                  </div>
                ))}
              </div>
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={`请选择${chooseGroupName.toString()}`} />
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default RMSComponents;