index.jsx 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. import React, { Component } from "react";
  2. import { Button, message, Modal, Spin, Table, Checkbox, Collapse, } from "antd";
  3. import $ from "jquery/src/ajax";
  4. import "./index.less";
  5. //选择部门组件 2022-07-12
  6. class Cascaders extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. visible: false,//弹窗开关
  11. authTree: [],//列表显示数据
  12. checkedList: [],//选中数据
  13. };
  14. this.itemHandle = this.itemHandle.bind(this);
  15. this.onSelect = this.onSelect.bind(this);
  16. this.onOks = this.onOks.bind(this);
  17. this.onCancel = this.onCancel.bind(this);
  18. }
  19. componentDidMount() {
  20. // 后端返回的数据,转成前端要用的数据保存页面使用
  21. // const authTree = [...params.authTree];
  22. // this.setState({
  23. // authTree
  24. // })
  25. }
  26. // 转成前端要用的数据
  27. authTreeFun() {
  28. const checkedList = this.state.checkedList;
  29. checkedList.forEach((item) => {
  30. this.itemHandle(item);
  31. });
  32. }
  33. // 获取部门数据
  34. selectSuperId() {
  35. $.ajax({
  36. method: "get",
  37. dataType: "json",
  38. url: globalConfig.context + "/api/admin/organization/getAllDep",
  39. data: {},
  40. success: function (data) {
  41. let theArr = [];
  42. if (data.error && data.error.length === 0) {
  43. localStorage.setItem("departmentData", JSON.stringify(data.data));
  44. this.setState({
  45. visible: true,
  46. authTree: data.data || []
  47. }, () => {
  48. this.authTreeFun();
  49. })
  50. } else {
  51. // message.warning(data.error[0].message);
  52. }
  53. }.bind(this),
  54. }).always(
  55. );
  56. }
  57. // 点击选择部门
  58. onSelect() {
  59. // 缓存的后端返回数据,转成前端要用的数据保存页面使用
  60. const list = JSON.parse(localStorage.getItem("departmentData")) || []
  61. const authTree = list
  62. if (authTree.length > 0) {
  63. this.setState({
  64. visible: !this.state.visible,
  65. authTree: authTree,
  66. }, () => {
  67. this.authTreeFun();
  68. })
  69. } else {
  70. //若缓存清理则重新请求接口拿
  71. this.selectSuperId()
  72. }
  73. }
  74. // 确定
  75. onOks() {
  76. const { authTree } = this.state
  77. const { id = "id", children = "children", onSel } = this.props
  78. let list = []
  79. authTree.forEach((its) => {
  80. if (its.checked) {
  81. list.push(its[id])
  82. }
  83. if (its[children]) {
  84. its[children].forEach((itl) => {
  85. if (itl.checked) {
  86. list.push(itl[id])
  87. }
  88. });
  89. }
  90. })
  91. if (list.length === 0) {
  92. message.warn("还没有选择的部门")
  93. return
  94. }
  95. this.setState({
  96. checkedList: list,
  97. visible: false,
  98. })
  99. onSel(list)
  100. }
  101. // 取消
  102. onCancel() {
  103. this.setState({
  104. visible: false,
  105. })
  106. }
  107. // 代码二级联动
  108. itemHandle(iD, checked = true) {
  109. const { id = "id", children = "children" } = this.props
  110. const { authTree } = this.state
  111. authTree.forEach((item1) => {
  112. if (item1[id] == iD) {
  113. item1.checked = checked;
  114. if (item1[children]) {
  115. item1[children].forEach((item2) => {
  116. item2.checked = checked;
  117. });
  118. }
  119. } else {
  120. if (!!item1[children]) {
  121. // 反向思路: 保存子选项框的个数, 子选项选中就-1, 等于0说明都选中了, 父选项就勾上
  122. let temp1 = item1[children].length;
  123. item1[children].forEach((item2) => {
  124. if (item2[id] == iD) {
  125. item2.checked = checked;
  126. }
  127. // 选中-1, 未选中不动
  128. item2.checked ? temp1 -= 1 : temp1;
  129. });
  130. // 长度是0, 父选项框就勾选
  131. temp1 === 0 ? item1.checked = true : item1.checked = false;
  132. } else {
  133. }
  134. }
  135. });
  136. this.setState({
  137. authTree,
  138. });
  139. }
  140. // 清空 现用于重置
  141. empty() {
  142. this.setState({
  143. visible: false,
  144. checkedList: []
  145. })
  146. }
  147. render() {
  148. const { Panel } = Collapse;
  149. const { visible, authTree, checkedList } = this.state
  150. const {
  151. placeholder = "选择部门",
  152. width = 200,
  153. height = 32,
  154. id = "id",//接口需要的字段名
  155. name = "name",//显示内容字段名
  156. children = "children",//二级列表字段名
  157. } = this.props
  158. const authTreeMap = authTree.map((item1) => (
  159. // Panel是手风琴
  160. <Panel
  161. key={item1[id]}
  162. header={(
  163. <div className="item">
  164. {/* 一级复选框(向下操控二级三级) */}
  165. <Checkbox
  166. name={item1[id]}
  167. checked={item1.checked}
  168. onClick={(e) => {
  169. e.stopPropagation();
  170. this.itemHandle(e.target.name, e.target.checked);
  171. }}
  172. >
  173. </Checkbox>
  174. <div className="iname">{item1[name]}</div>
  175. </div>
  176. )}
  177. >
  178. {/* 二级复选框(向下操控三级,向上联动一级) */}
  179. {!!item1[children] && item1[children].map((item2) => (
  180. <div key={item2[id]} className="item">
  181. <Checkbox
  182. name={item2[id]}
  183. checked={item2.checked}
  184. onClick={(e) => {
  185. this.itemHandle(e.target.name, e.target.checked);
  186. }}
  187. >
  188. </Checkbox>
  189. <div className="iname" style={{ width: "90%" }}>{item2[name]}</div>
  190. </div>
  191. ))}
  192. </Panel>
  193. ));
  194. return (
  195. <div className="cascaders"
  196. // tabIndex={0}
  197. // onBlur={(e) => {
  198. // this.setState({
  199. // visible: false
  200. // })
  201. // }}
  202. >
  203. <div
  204. className="cinput"
  205. style={{
  206. height: height,
  207. width: width,
  208. color: checkedList.length > 0
  209. ? "rgba(0, 0, 0, 0.65)"
  210. : "rgba(191, 191, 191, 1)"
  211. }}
  212. onClick={this.onSelect}
  213. >
  214. <div className="ctext">
  215. {checkedList.length > 0 ? `已选择${checkedList.length}项` : placeholder}
  216. </div>
  217. </div>
  218. <div data-reactroot>
  219. {
  220. visible &&
  221. <div className="cpop" style={{ width: 260, }}>
  222. <div className="clist">
  223. <Collapse expandIconPosition="right">
  224. {authTreeMap}
  225. </Collapse>
  226. </div>
  227. <div className="cboot">
  228. <Button type="primary" style={{ marginLeft: 10 }} onClick={this.onOks}>确定</Button>
  229. <Button onClick={this.onCancel}>取消</Button>
  230. </div>
  231. </div>
  232. }
  233. </div>
  234. </div>
  235. );
  236. }
  237. }
  238. export default Cascaders;