123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- import React, { Component } from "react";
- import { Button, message, Modal, Spin, Table, Checkbox, Collapse, } from "antd";
- import $ from "jquery/src/ajax";
- import "./index.less";
- class Cascaders extends Component {
- constructor(props) {
- super(props);
- this.state = {
- visible: false,
- authTree: [],
- checkedList: [],
- };
- 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);
- });
- }
- // 点击选择部门
- onSelect() {
- const list = JSON.parse(localStorage.getItem("departmentData"))
- const authTree = list
- this.setState({
- visible: true,
- authTree: authTree,
- }, () => {
- this.authTreeFun();
- })
- }
- onOks() {
- const { authTree, checkedList } = this.state
- const { id = "id", children = "children", onSel } = this.props
- let list = []
- authTree.forEach((its) => {
- if (its[children]) {
- its[children].forEach((itl) => {
- if (itl.checked) {
- list.push(itl[id])
- }
- });
- }
- })
- this.setState({
- checkedList: list,
- visible: false,
- })
- onSel(checkedList)
- }
- onCancel() {
- this.setState({
- visible: false,
- })
- }
- // 代码三级联动核心就在这里
- itemHandle(iD, checked = true) {
- const { id = "id", children = "children" } = this.props
- const { authTree } = this.state
- // const authTree = [...this.state.authTree];
- authTree.forEach((item1) => {
- if (item1[id] == iD) {
- item1.checked = checked;
- if (item1[children]) {
- item1[children].forEach((item2) => {
- item2.checked = checked;
- });
- }
- } else {
- // 反向思路: 保存子选项框的个数, 子选项选中就-1, 等于0说明都选中了, 父选项就勾上
- let temp1 = !!item1[children] ? item1[children].length : 0;
- !!item1[children] && item1[children].forEach((item2) => {
- if (item2[id] == iD) {
- item2.checked = checked;
- }
- // 选中-1, 未选中不动
- item2.checked ? temp1 -= 1 : temp1;
- });
- // 长度是0, 父选项框就勾选
- !!item1[children] && temp1 === 0 ? item1.checked = true : item1.checked = false;
- }
- });
- this.setState({
- authTree,
- });
- }
- render() {
- const { Panel } = Collapse;
- const { visible, authTree, checkedList } = this.state
- const {
- placeholder = "选择部门",
- width = 200,
- height = 32,
- id = "id",
- name = "name",
- children = "children",
- } = this.props
- const authTreeMap = authTree.map((item1) => (
- // Panel是手风琴
- <Panel
- key={item1[id]}
- header={(
- <div className="item" onClick={(e) => { e.stopPropagation(); }}>
- {/* 一级复选框(向下操控二级三级) */}
- <Checkbox
- name={item1[id]}
- checked={item1.checked}
- onClick={(e) => {
- 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">{item2[name]}</div>
- </div>
- ))}
- </Panel>
- ));
- return (
- <div className="cascaders">
- <div
- className="cinput"
- style={{
- height: height,
- width: width,
- color: checkedList.length > 0 ? "rgba(0, 0, 0, 0.65)" : "rgba(191, 191, 191, 1)"
- }}
- onClick={this.onSelect}
- >{checkedList.length > 0 ? `已选择${checkedList.length}个部门` : placeholder}
- </div>
- {
- visible &&
- <div
- className="cpop"
- style={{
- width: width,
- }}
- >
- <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>
- );
- }
- }
- export default Cascaders;
|