index.jsx 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  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. // checked组件样式
  148. inde(item) {
  149. const { children } = this.props
  150. if (item.checked) {
  151. return false
  152. } else {
  153. if (!!item[children]) {
  154. let clist = []
  155. for (var i = 0; i < item[children].length; i++) {
  156. if (item[children][i].checked == true) {
  157. clist.push(item[children][i])
  158. }
  159. }
  160. if (!!clist.length && (clist.length < item[children].length)) {
  161. return true
  162. } else {
  163. return false
  164. }
  165. } else {
  166. return false
  167. }
  168. }
  169. }
  170. render() {
  171. const { Panel } = Collapse;
  172. const { visible, authTree, checkedList } = this.state
  173. const {
  174. placeholder = "选择部门",
  175. width = 200,
  176. height = 32,
  177. id = "id",//接口需要的字段名
  178. name = "name",//显示内容字段名
  179. children = "children",//二级列表字段名
  180. } = this.props
  181. const authTreeMap = authTree.map((item1) => (
  182. // Panel是手风琴
  183. <Panel
  184. key={item1[id]}
  185. header={(
  186. <div className="item">
  187. {/* 一级复选框(向下操控二级三级) */}
  188. <Checkbox
  189. indeterminate={this.inde(item1)}
  190. name={item1[id]}
  191. checked={item1.checked}
  192. onClick={(e) => {
  193. e.stopPropagation();
  194. this.itemHandle(e.target.name, e.target.checked);
  195. }}
  196. >
  197. </Checkbox>
  198. <div className="iname">{item1[name]}</div>
  199. </div>
  200. )}
  201. >
  202. {/* 二级复选框(向下操控三级,向上联动一级) */}
  203. {!!item1[children] && item1[children].map((item2) => (
  204. <div key={item2[id]} className="item">
  205. <Checkbox
  206. name={item2[id]}
  207. checked={item2.checked}
  208. onClick={(e) => {
  209. this.itemHandle(e.target.name, e.target.checked);
  210. }}
  211. >
  212. </Checkbox>
  213. <div className="iname" style={{ width: "90%" }}>{item2[name]}</div>
  214. </div>
  215. ))}
  216. </Panel>
  217. ));
  218. return (
  219. <div className="cascaders"
  220. >
  221. <div
  222. className="cinput"
  223. style={{
  224. height: height,
  225. width: width,
  226. color: checkedList.length > 0
  227. ? "rgba(0, 0, 0, 0.65)"
  228. : "rgba(191, 191, 191, 1)"
  229. }}
  230. onClick={this.onSelect}
  231. >
  232. <div className="ctext">
  233. {checkedList.length > 0 ? `已选择${checkedList.length}项` : placeholder}
  234. </div>
  235. </div>
  236. <div data-reactroot
  237. tabIndex={0}
  238. // onBlur={(e) => {
  239. // this.setState({
  240. // visible: false
  241. // })
  242. // }}
  243. >
  244. {
  245. visible &&
  246. <div className="cpop" style={{ width: 260, }}>
  247. <div className="clist">
  248. <Collapse expandIconPosition="right">
  249. {authTreeMap}
  250. </Collapse>
  251. </div>
  252. <div className="cboot">
  253. <Button type="primary" style={{ marginLeft: 10 }} onClick={this.onOks}>确定</Button>
  254. <Button onClick={this.onCancel}>取消</Button>
  255. </div>
  256. </div>
  257. }
  258. </div>
  259. </div>
  260. );
  261. }
  262. }
  263. export default Cascaders;