|
@@ -1,32 +1,7 @@
|
|
|
import React, { Component } from "react";
|
|
|
import { Button, message, Modal, Spin, Table, Checkbox, Collapse, } from "antd";
|
|
|
import $ from "jquery/src/ajax";
|
|
|
-
|
|
|
-const params = {
|
|
|
- "authTree": [
|
|
|
- {
|
|
|
- "authName": "商场数据分析",
|
|
|
- "authId": 1,
|
|
|
- "children": [{
|
|
|
- "authName": "数据概览",
|
|
|
- "authId": 3,
|
|
|
- },
|
|
|
- {
|
|
|
- "authName": "数据概览2",
|
|
|
- "authId": 4,
|
|
|
- }]
|
|
|
- },
|
|
|
- {
|
|
|
- "authName": "商场数据分析2",
|
|
|
- "authId": 2,
|
|
|
- "children": [{
|
|
|
- "authName": "数据概览3",
|
|
|
- "authId": 5,
|
|
|
- }]
|
|
|
- }
|
|
|
- ],
|
|
|
- "checkedList": [6, 7, 11]
|
|
|
-}
|
|
|
+import "./index.less";
|
|
|
|
|
|
class Cascaders extends Component {
|
|
|
constructor(props) {
|
|
@@ -37,21 +12,19 @@ class Cascaders extends Component {
|
|
|
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;
|
|
|
- const checkedList = params.checkedList;
|
|
|
- this.setState({
|
|
|
- authTree,
|
|
|
- checkedList,
|
|
|
- }, () => {
|
|
|
- this.authTreeFun();
|
|
|
- });
|
|
|
+ // const authTree = [...params.authTree];
|
|
|
+ // this.setState({
|
|
|
+ // authTree
|
|
|
+ // })
|
|
|
}
|
|
|
-
|
|
|
// 转成前端要用的数据
|
|
|
authTreeFun() {
|
|
|
const checkedList = this.state.checkedList;
|
|
@@ -59,53 +32,71 @@ class Cascaders extends Component {
|
|
|
this.itemHandle(item);
|
|
|
});
|
|
|
}
|
|
|
+ // 点击选择部门
|
|
|
+ onSelect() {
|
|
|
+ const list = JSON.parse(localStorage.getItem("departmentData"))
|
|
|
+ const authTree = list
|
|
|
+ this.setState({
|
|
|
+ visible: true,
|
|
|
+ authTree: authTree,
|
|
|
+ }, () => {
|
|
|
+ this.authTreeFun();
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
- // 代码三级联动核心就在这里
|
|
|
- itemHandle(authId, checked = true) {
|
|
|
- const authTree = [...this.state.authTree];
|
|
|
+ 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.authId === authId) {
|
|
|
+ if (item1[id] == iD) {
|
|
|
item1.checked = checked;
|
|
|
- if (item1.children) {
|
|
|
- item1.children.forEach((item2) => {
|
|
|
+ if (item1[children]) {
|
|
|
+ item1[children].forEach((item2) => {
|
|
|
item2.checked = checked;
|
|
|
- // if (item2.children) {
|
|
|
- // item2.children.forEach((item3) => {
|
|
|
- // item3.checked = checked;
|
|
|
- // });
|
|
|
- // }
|
|
|
});
|
|
|
}
|
|
|
} else {
|
|
|
// 反向思路: 保存子选项框的个数, 子选项选中就-1, 等于0说明都选中了, 父选项就勾上
|
|
|
- let temp1 = item1.children.length;
|
|
|
- item1.children.forEach((item2) => {
|
|
|
- if (item2.authId === authId) {
|
|
|
+ let temp1 = !!item1[children] ? item1[children].length : 0;
|
|
|
+ !!item1[children] && item1[children].forEach((item2) => {
|
|
|
+ if (item2[id] == iD) {
|
|
|
item2.checked = checked;
|
|
|
- // if (item2.children) {
|
|
|
- // item2.children.forEach((item3) => {
|
|
|
- // item3.checked = checked;
|
|
|
- // });
|
|
|
- // }
|
|
|
- } else {
|
|
|
- // let temp2 = item2.children.length;
|
|
|
- // item2.children.forEach((item3) => {
|
|
|
- // if (item3.authId === authId) {
|
|
|
- // item3.checked = checked;
|
|
|
- // }
|
|
|
- // item3.checked ? temp2 -= 1 : temp2;
|
|
|
- // });
|
|
|
- // temp2 === 0 ? item2.checked = true : item2.checked = false;
|
|
|
}
|
|
|
// 选中-1, 未选中不动
|
|
|
item2.checked ? temp1 -= 1 : temp1;
|
|
|
});
|
|
|
// 长度是0, 父选项框就勾选
|
|
|
- temp1 === 0 ? item1.checked = true : item1.checked = false;
|
|
|
+ !!item1[children] && temp1 === 0 ? item1.checked = true : item1.checked = false;
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
this.setState({
|
|
|
authTree,
|
|
|
});
|
|
@@ -114,59 +105,85 @@ class Cascaders extends Component {
|
|
|
|
|
|
render() {
|
|
|
const { Panel } = Collapse;
|
|
|
- const authTreeMap = this.state.authTree.map((item1) => (
|
|
|
+ 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.authId}
|
|
|
+ key={item1[id]}
|
|
|
header={(
|
|
|
- <span onClick={(e) => { e.stopPropagation(); }}>
|
|
|
+ <div className="item" onClick={(e) => { e.stopPropagation(); }}>
|
|
|
{/* 一级复选框(向下操控二级三级) */}
|
|
|
<Checkbox
|
|
|
- name={item1.authId.toString()}
|
|
|
+ name={item1[id]}
|
|
|
checked={item1.checked}
|
|
|
onClick={(e) => {
|
|
|
- this.itemHandle(parseInt(e.target.name), e.target.checked);
|
|
|
+ this.itemHandle(e.target.name, e.target.checked);
|
|
|
}}
|
|
|
>
|
|
|
- {item1.authName}
|
|
|
</Checkbox>
|
|
|
- </span>
|
|
|
+ <div className="iname">{item1[name]}</div>
|
|
|
+ </div>
|
|
|
)}
|
|
|
>
|
|
|
{/* 二级复选框(向下操控三级,向上联动一级) */}
|
|
|
- {item1.children.map((item2) => (
|
|
|
- <div key={item2.authId}>
|
|
|
+ {!!item1[children] && item1[children].map((item2) => (
|
|
|
+ <div key={item2[id]} className="item">
|
|
|
<Checkbox
|
|
|
- name={item2.authId.toString()}
|
|
|
+ name={item2[id]}
|
|
|
checked={item2.checked}
|
|
|
onClick={(e) => {
|
|
|
- this.itemHandle(parseInt(e.target.name), e.target.checked);
|
|
|
+ this.itemHandle(e.target.name, e.target.checked);
|
|
|
}}
|
|
|
>
|
|
|
- {item2.authName}
|
|
|
</Checkbox>
|
|
|
- {/* <span>|</span>
|
|
|
- {item2.children.map((item3) => (
|
|
|
- <Checkbox
|
|
|
- key={item3.authId}
|
|
|
- name={item3.authId.toString()}
|
|
|
- checked={item3.checked}
|
|
|
- onClick={(e) => {
|
|
|
- this.itemHandle(parseInt(e.target.name), e.target.checked);
|
|
|
- }}
|
|
|
- >
|
|
|
- {item3.authName}
|
|
|
- </Checkbox>
|
|
|
- ))} */}
|
|
|
+ <div className="iname">{item2[name]}</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</Panel>
|
|
|
));
|
|
|
return (
|
|
|
- <div>
|
|
|
- <Collapse expandIconPosition="right">
|
|
|
- {authTreeMap}
|
|
|
- </Collapse>
|
|
|
+ <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>
|
|
|
);
|
|
|
}
|