index.jsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. import React, { Component } from "react";
  2. import { Button, message, Modal, Spin, Table, Checkbox, Collapse, } from "antd";
  3. import $ from "jquery/src/ajax";
  4. const params = {
  5. "authTree": [
  6. {
  7. "authName": "商场数据分析",
  8. "authId": 1,
  9. "children": [{
  10. "authName": "数据概览",
  11. "authId": 3,
  12. },
  13. {
  14. "authName": "数据概览2",
  15. "authId": 4,
  16. }]
  17. },
  18. {
  19. "authName": "商场数据分析2",
  20. "authId": 2,
  21. "children": [{
  22. "authName": "数据概览3",
  23. "authId": 5,
  24. }]
  25. }
  26. ],
  27. "checkedList": [6, 7, 11]
  28. }
  29. class Cascaders extends Component {
  30. constructor(props) {
  31. super(props);
  32. this.state = {
  33. visible: false,
  34. authTree: [],
  35. checkedList: [],
  36. };
  37. this.itemHandle = this.itemHandle.bind(this);
  38. }
  39. componentDidMount() {
  40. // 后端返回的数据,转成前端要用的数据保存页面使用
  41. const authTree = params.authTree;
  42. const checkedList = params.checkedList;
  43. this.setState({
  44. authTree,
  45. checkedList,
  46. }, () => {
  47. this.authTreeFun();
  48. });
  49. }
  50. // 转成前端要用的数据
  51. authTreeFun() {
  52. const checkedList = this.state.checkedList;
  53. checkedList.forEach((item) => {
  54. this.itemHandle(item);
  55. });
  56. }
  57. // 代码三级联动核心就在这里
  58. itemHandle(authId, checked = true) {
  59. const authTree = [...this.state.authTree];
  60. authTree.forEach((item1) => {
  61. if (item1.authId === authId) {
  62. item1.checked = checked;
  63. if (item1.children) {
  64. item1.children.forEach((item2) => {
  65. item2.checked = checked;
  66. // if (item2.children) {
  67. // item2.children.forEach((item3) => {
  68. // item3.checked = checked;
  69. // });
  70. // }
  71. });
  72. }
  73. } else {
  74. // 反向思路: 保存子选项框的个数, 子选项选中就-1, 等于0说明都选中了, 父选项就勾上
  75. let temp1 = item1.children.length;
  76. item1.children.forEach((item2) => {
  77. if (item2.authId === authId) {
  78. item2.checked = checked;
  79. // if (item2.children) {
  80. // item2.children.forEach((item3) => {
  81. // item3.checked = checked;
  82. // });
  83. // }
  84. } else {
  85. // let temp2 = item2.children.length;
  86. // item2.children.forEach((item3) => {
  87. // if (item3.authId === authId) {
  88. // item3.checked = checked;
  89. // }
  90. // item3.checked ? temp2 -= 1 : temp2;
  91. // });
  92. // temp2 === 0 ? item2.checked = true : item2.checked = false;
  93. }
  94. // 选中-1, 未选中不动
  95. item2.checked ? temp1 -= 1 : temp1;
  96. });
  97. // 长度是0, 父选项框就勾选
  98. temp1 === 0 ? item1.checked = true : item1.checked = false;
  99. }
  100. });
  101. this.setState({
  102. authTree,
  103. });
  104. }
  105. render() {
  106. const { Panel } = Collapse;
  107. const authTreeMap = this.state.authTree.map((item1) => (
  108. // Panel是手风琴
  109. <Panel
  110. key={item1.authId}
  111. header={(
  112. <span onClick={(e) => { e.stopPropagation(); }}>
  113. {/* 一级复选框(向下操控二级三级) */}
  114. <Checkbox
  115. name={item1.authId.toString()}
  116. checked={item1.checked}
  117. onClick={(e) => {
  118. this.itemHandle(parseInt(e.target.name), e.target.checked);
  119. }}
  120. >
  121. {item1.authName}
  122. </Checkbox>
  123. </span>
  124. )}
  125. >
  126. {/* 二级复选框(向下操控三级,向上联动一级) */}
  127. {item1.children.map((item2) => (
  128. <div key={item2.authId}>
  129. <Checkbox
  130. name={item2.authId.toString()}
  131. checked={item2.checked}
  132. onClick={(e) => {
  133. this.itemHandle(parseInt(e.target.name), e.target.checked);
  134. }}
  135. >
  136. {item2.authName}
  137. </Checkbox>
  138. {/* <span>|</span>
  139. {item2.children.map((item3) => (
  140. <Checkbox
  141. key={item3.authId}
  142. name={item3.authId.toString()}
  143. checked={item3.checked}
  144. onClick={(e) => {
  145. this.itemHandle(parseInt(e.target.name), e.target.checked);
  146. }}
  147. >
  148. {item3.authName}
  149. </Checkbox>
  150. ))} */}
  151. </div>
  152. ))}
  153. </Panel>
  154. ));
  155. return (
  156. <div>
  157. <Collapse expandIconPosition="right">
  158. {authTreeMap}
  159. </Collapse>
  160. </div>
  161. );
  162. }
  163. }
  164. export default Cascaders;