import React, { Component } from "react"; import { Button, message, Modal, Spin, Table, Checkbox, Collapse, } from "antd"; import $ from "jquery/src/ajax"; import "./index.less"; //选择部门组件 2022-07-12 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) { let theArr = []; 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 = "children", onSel } = this.props let list = [] authTree.forEach((its) => { if (its.checked) { list.push(its[id]) } if (its[children]) { its[children].forEach((itl) => { if (itl.checked) { list.push(itl[id]) } }); } }) if (list.length === 0) { message.warn("还没有选择的部门") return } this.setState({ checkedList: list, visible: false, }) onSel(list) } // 取消 onCancel() { this.setState({ visible: false, }) } // 代码二级联动 itemHandle(iD, checked = true) { const { id = "id", children = "children" } = this.props const { authTree } = this.state authTree.forEach((item1) => { if (item1[id] == iD) { item1.checked = checked; if (item1[children]) { item1[children].forEach((item2) => { item2.checked = checked; }); } } else { if (!!item1[children]) { // 反向思路: 保存子选项框的个数, 子选项选中就-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, checkedList: [] }) } // checked组件样式 inde(item) { const { children } = this.props if (item.checked) { return false } else { if (!!item[children]) { 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 = "children",//二级列表字段名 } = this.props const authTreeMap = authTree.map((item1) => ( // Panel是手风琴 {/* 一级复选框(向下操控二级三级) */} { e.stopPropagation(); this.itemHandle(e.target.name, e.target.checked); }} >
{item1[name]}
)} > {/* 二级复选框(向下操控三级,向上联动一级) */} {!!item1[children] && item1[children].map((item2) => (
{ this.itemHandle(e.target.name, e.target.checked); }} >
{item2[name]}
))}
)); return (
{ isFous && this.setState({ visible: false }) }} >
0 ? "rgba(0, 0, 0, 0.65)" : "rgba(191, 191, 191, 1)" }} onClick={this.onSelect} >
{checkedList.length > 0 ? `已选择${checkedList.length}项` : placeholder}
{ this.setState({ isFous: true }) }} onMouseEnter={() => { this.setState({ isFous: false }) }} > { visible &&
{authTreeMap}
}
); } } export default Cascaders;