kede-client/js/component/common/cascaders/index.jsx

import React, { Component } from "react";
import { Button, message, Checkbox, Collapse, } from "antd";
import $ from "jquery/src/ajax";
import "./index.less";

/**
 * 部门多选组件  2022-07-12
 * <Cascaders
 *   ref={ref => this.Cascaders = ref}
 *   placeholder="请选择公出部门"
 *   id="id"
 *   name="name"
 *   children="list"
 *   height={28}
 *   onSel={(e) => {}}
 * />
 */
class Cascaders extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false, // 弹窗开关
      authTree: [], // 列表显示数据
      checkedList: [], // 选中数据
      isFous: true, // 是否在组件外
    };
    this.itemHandle = this.itemHandle.bind(this);
    this.onSelect = this.onSelect.bind(this);
    this.onOks = this.onOks.bind(this);
    this.onCancel = this.onCancel.bind(this);
  }

  componentDidMount() {
    // 后端返回的数据,转成前端要用的数据保存页面使用
    // const authTree = [...params.authTree];
    // this.setState({
    //   authTree
    // })
  }
  // 转成前端要用的数据
  authTreeFun() {
    const checkedList = this.state.checkedList;
    checkedList.forEach((item) => {
      this.itemHandle(item);
    });
  }
  // 获取部门数据
  selectSuperId() {
    $.ajax({
      method: "get",
      dataType: "json",
      url: globalConfig.context + "/api/admin/organization/getAllDep",
      data: {},
      success: function (data) {
        if (data.error && data.error.length === 0) {
          localStorage.setItem("departmentData", JSON.stringify(data.data));
          this.setState({
            visible: true,
            authTree: data.data || []
          }, () => {
            this.authTreeFun();
          })
        } else {
          // message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(

    );
  }
  // 点击选择部门
  onSelect() {
    // 缓存的后端返回数据,转成前端要用的数据保存页面使用 
    const list = JSON.parse(localStorage.getItem("departmentData")) || []
    const authTree = list
    if (authTree.length > 0) {
      this.setState({
        visible: !this.state.visible,
        authTree: authTree,
      }, () => {
        this.authTreeFun();
      })
    } else {
      //若缓存清理则重新请求接口拿
      this.selectSuperId()
    }
  }
  // 确定
  onOks() {
    const { authTree } = this.state
    const { id = "id", children = "list", onSel } = this.props
    let list = []
    authTree.forEach((its) => {
      if (its.checked) {
        list.push(its[id])
      }
      if (!!its[children] && its[children].length > 0) {
        its[children].forEach((itl) => {
          if (itl.checked) {
            list.push(itl[id])
          }
        });
      }
    })
    if (list.length === 0) {
      message.warn("还没有选择的部门")
      return
    }
    this.setState({
      checkedList: list,
      visible: false,
      isFous: true,
    })
    onSel(list)
  }
  // 取消
  onCancel() {
    this.setState({
      visible: false,
      isFous: true,
    })
  }
  // 设置默认选项
  setDefault(list) {
    this.setState({
      checkedList: list
    })
  }
  // 代码二级联动
  itemHandle(iD, checked = true) {
    const { id = "id", children = "list" } = this.props
    const { authTree } = this.state
    authTree.forEach((item1) => {
      if (item1[id] == iD) {
        item1.checked = checked;
        if (!!item1[children] && item1[children].length > 0) {
          item1[children].forEach((item2) => {
            item2.checked = checked;
          });
        }
      } else {
        if (!!item1[children] && item1[children].length > 0) {
          // 反向思路: 保存子选项框的个数, 子选项选中就-1, 等于0说明都选中了, 父选项就勾上
          let temp1 = item1[children].length;
          item1[children].forEach((item2) => {
            if (item2[id] == iD) {
              item2.checked = checked;
            }
            //  选中-1, 未选中不动
            item2.checked ? temp1 -= 1 : temp1;
          });
          //  长度是0, 父选项框就勾选
          temp1 === 0 ? item1.checked = true : item1.checked = false;
        } else {

        }
      }
    });
    this.setState({
      authTree,
    });
  }
  // 清空  现用于父级重置
  empty() {
    this.setState({
      visible: false,
      isFous: true,
      checkedList: []
    })
  }
  // checked组件样式
  inde(item) {
    const { children = "list" } = this.props
    if (item.checked) {
      return false
    } else {
      if (!!item[children] && item[children].length > 0) {
        let clist = []
        for (var i = 0; i < item[children].length; i++) {
          if (item[children][i].checked == true) {
            clist.push(item[children][i])
          }
        }
        if (!!clist.length && (clist.length < item[children].length)) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }
  }


  render() {
    const { Panel } = Collapse;
    const { visible, isFous, authTree, checkedList } = this.state
    const {
      placeholder = "选择部门",
      width = 200,
      height = 32,
      id = "id",//接口需要的字段名
      name = "name",//显示内容字段名
      children = "list",//二级列表字段名
    } = this.props
    const authTreeMap = authTree.map((item1) => (
      // Panel是手风琴
      <Panel
        key={item1[id]}
        header={(
          <div className="item">
            {/* 一级复选框(向下操控二级) */}
            <Checkbox
              indeterminate={this.inde(item1)}
              name={item1[id]}
              checked={item1.checked}
              onClick={(e) => {
                e.stopPropagation();
                this.itemHandle(e.target.name, e.target.checked);
              }}
            >
            </Checkbox>
            <div className="iname">{item1[name]}</div>
          </div>
        )}
      >
        {/* 二级复选框(向上联动一级) */}
        {!!item1[children] && item1[children].map((item2) => (
          <div key={item2[id]} className="item">
            <Checkbox
              name={item2[id]}
              checked={item2.checked}
              onClick={(e) => {
                this.itemHandle(e.target.name, e.target.checked);
              }}
            >
            </Checkbox>
            <div className="iname" style={{ width: "90%" }}>{item2[name]}</div>
          </div>
        ))}
      </Panel>
    ));
    return (
      <div
        className="cascaders"
        tabIndex={0}
        onBlur={(e) => {
          isFous && this.setState({
            visible: false
          })
        }}
      >
        <div
          className="cinput"
          style={{
            height: height,
            width: width,
            borderColor: visible && "#80b9ff",
            color: checkedList.length > 0
              ? "rgba(0, 0, 0, 0.65)"
              : "rgba(191, 191, 191, 1)"
          }}
          onClick={this.onSelect}
        >
          <div className="ctext">
            {checkedList.length > 0 ? `已选择${checkedList.length}项` : placeholder}
          </div>
        </div>
        <div
          data-reactroot
          onMouseLeave={() => {
            this.setState({
              isFous: true
            })
          }}
          onMouseEnter={() => {
            this.setState({
              isFous: false
            })
          }}
        >
          {
            visible &&
            <div className="cpop" style={{ width: 260, }}>
              <div className="clist">
                <Collapse expandIconPosition="right">
                  {authTreeMap}
                </Collapse>
              </div>
              <div className="cboot">
                <Button type="primary" style={{ marginLeft: 10 }} onClick={this.onOks}>确定</Button>
                <Button onClick={this.onCancel}>取消</Button>
              </div>
            </div>
          }
        </div>
      </div>
    );
  }
}

export default Cascaders;