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是手风琴