chooseList.jsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Button, message, Table, Input, Checkbox } from "antd";
  3. import "../../../../../css/base.less"
  4. class ChooseList extends Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. visible: false,
  9. confirmLoading: false,
  10. columns: [],
  11. // 复选框数组
  12. options: [],
  13. defaultValue: [],
  14. // 被选中的数组
  15. checkedValues: [],
  16. flag: false
  17. };
  18. this.showModal = this.showModal.bind(this);
  19. this.handleOk = this.handleOk.bind(this);
  20. this.handleCancel = this.handleCancel.bind(this);
  21. this.onChange = this.onChange.bind(this);
  22. this.allChange = this.allChange.bind(this);
  23. this.load = this.load.bind(this);
  24. }
  25. // componentWillReceiveProps(nextProp) {
  26. // this.setState({
  27. // })
  28. // }
  29. componentDidMount() {
  30. this.load()
  31. }
  32. load() {
  33. const options = [];
  34. const defaultValue = [];
  35. this.props.columns.forEach(item => {
  36. let obj = {
  37. label: item.title,
  38. value: item.title,
  39. disabled: !adminData.isSuperAdmin && item.disabled,
  40. };
  41. options.push(obj);
  42. defaultValue.push(item.title);
  43. });
  44. this.setState({
  45. columns: this.props.columns,
  46. options: options,
  47. defaultValue,
  48. checkedValues: defaultValue,
  49. flag: true
  50. });
  51. }
  52. onChange(checkedValues) {
  53. this.setState({
  54. checkedValues
  55. });
  56. let flag = false
  57. // checkedValues.forEach((v) => {
  58. // this.props.columns.forEach((i) => {
  59. // if( v != i.title ) {
  60. // flag = false
  61. // return
  62. // }
  63. // flag = true;
  64. // })
  65. // })
  66. if (checkedValues.length == this.props.columns.length) {
  67. flag = true
  68. }
  69. this.setState({
  70. flag
  71. })
  72. }
  73. showModal() {
  74. this.load()
  75. this.setState({
  76. visible: true
  77. });
  78. if (this.props.changeList != undefined) {
  79. const arr = []
  80. this.props.changeList.forEach((i) => {
  81. arr.push(i.title)
  82. })
  83. let flag = false
  84. if (arr.length == this.state.columns.length) {
  85. flag = true
  86. }
  87. this.setState({
  88. checkedValues: arr,
  89. flag
  90. })
  91. } else {
  92. const arr = [];
  93. this.props.columns.forEach(i => {
  94. arr.push(i.title);
  95. });
  96. let flag = false;
  97. if (arr.length == this.state.columns.length) {
  98. flag = true;
  99. }
  100. this.setState({
  101. checkedValues: arr,
  102. flag
  103. });
  104. }
  105. }
  106. handleOk() {
  107. this.setState({
  108. confirmLoading: true
  109. });
  110. setTimeout(() => {
  111. this.setState({
  112. visible: false,
  113. confirmLoading: false
  114. });
  115. this.props.changeFn(this.state.checkedValues);
  116. }, 0);
  117. }
  118. handleCancel() {
  119. // this.load()
  120. this.setState({
  121. visible: false
  122. });
  123. }
  124. allChange() {
  125. if (this.state.flag) {
  126. this.setState({
  127. checkedValues: []
  128. });
  129. } else {
  130. this.setState({
  131. checkedValues: this.state.defaultValue
  132. });
  133. }
  134. this.setState({
  135. flag: !this.state.flag
  136. })
  137. }
  138. render() {
  139. const { visible, confirmLoading, columns } = this.state;
  140. return (
  141. // style={{ position: "absolute", right: "187px", top: this.props.top }}
  142. <div style={{ display: this.props.display }}>
  143. <Button type="primary" onClick={this.showModal} style={{ marginBottom: 10, marginTop: this.props.margin }}>
  144. 更改表格显示数据
  145. </Button>
  146. <Modal
  147. maskClosable={false}
  148. title="更改表格显示数据"
  149. visible={visible}
  150. onOk={this.handleOk}
  151. confirmLoading={confirmLoading}
  152. onCancel={this.handleCancel}
  153. >
  154. <div>
  155. <Checkbox onChange={this.allChange} checked={this.state.flag}>
  156. 全选
  157. </Checkbox>
  158. <Checkbox.Group
  159. options={this.state.options}
  160. defaultValue={this.state.defaultValue}
  161. onChange={this.onChange}
  162. className={"chooseList"}
  163. value={this.state.checkedValues}
  164. />
  165. </div>
  166. </Modal>
  167. </div>
  168. );
  169. }
  170. }
  171. export { ChooseList };