chooseList.jsx 4.4 KB

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