chooseList.jsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  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. };
  40. options.push(obj);
  41. defaultValue.push(item.title);
  42. });
  43. this.setState({
  44. columns: this.props.columns,
  45. options: options,
  46. defaultValue,
  47. checkedValues: defaultValue,
  48. flag: true
  49. });
  50. }
  51. onChange(checkedValues) {
  52. this.setState({
  53. checkedValues
  54. });
  55. let flag = false
  56. // checkedValues.forEach((v) => {
  57. // this.props.columns.forEach((i) => {
  58. // if( v != i.title ) {
  59. // flag = false
  60. // return
  61. // }
  62. // flag = true;
  63. // })
  64. // })
  65. if (checkedValues.length == this.props.columns.length) {
  66. flag = true
  67. }
  68. this.setState({
  69. flag
  70. })
  71. }
  72. showModal() {
  73. this.setState({
  74. visible: true
  75. });
  76. if (this.props.changeList != undefined) {
  77. const arr = []
  78. this.props.changeList.forEach((i) => {
  79. arr.push(i.title)
  80. })
  81. let flag = false
  82. if (arr.length == this.state.columns.length) {
  83. flag = true
  84. }
  85. this.setState({
  86. checkedValues: arr,
  87. flag
  88. })
  89. } else {
  90. const arr = [];
  91. this.props.columns.forEach(i => {
  92. arr.push(i.title);
  93. });
  94. let flag = false;
  95. if (arr.length == this.state.columns.length) {
  96. flag = true;
  97. }
  98. this.setState({
  99. checkedValues: arr,
  100. flag
  101. });
  102. }
  103. }
  104. handleOk() {
  105. this.setState({
  106. confirmLoading: true
  107. });
  108. setTimeout(() => {
  109. this.setState({
  110. visible: false,
  111. confirmLoading: false
  112. });
  113. this.props.changeFn(this.state.checkedValues);
  114. }, 0);
  115. }
  116. handleCancel() {
  117. // this.load()
  118. this.setState({
  119. visible: false
  120. });
  121. }
  122. allChange() {
  123. if (this.state.flag) {
  124. this.setState({
  125. checkedValues: []
  126. });
  127. } else {
  128. this.setState({
  129. checkedValues: this.state.defaultValue
  130. });
  131. }
  132. this.setState({
  133. flag: !this.state.flag
  134. })
  135. }
  136. render() {
  137. const { visible, confirmLoading, columns } = this.state;
  138. return (
  139. // style={{ position: "absolute", right: "187px", top: this.props.top }}
  140. <div style={{ display: this.props.display }}>
  141. <Button type="primary" onClick={this.showModal} style={{ marginBottom: 10, marginTop: this.props.margin }}>
  142. 更改表格显示数据
  143. </Button>
  144. <Modal
  145. maskClosable={false}
  146. title="更改表格显示数据"
  147. visible={visible}
  148. onOk={this.handleOk}
  149. confirmLoading={confirmLoading}
  150. onCancel={this.handleCancel}
  151. >
  152. <div>
  153. <Checkbox onChange={this.allChange} checked={this.state.flag}>
  154. 全选
  155. </Checkbox>
  156. <Checkbox.Group
  157. options={this.state.options}
  158. defaultValue={this.state.defaultValue}
  159. onChange={this.onChange}
  160. className={"chooseList"}
  161. value={this.state.checkedValues}
  162. />
  163. </div>
  164. </Modal>
  165. </div>
  166. );
  167. }
  168. }
  169. export { ChooseList };