selectContent.jsx 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. import {Component} from 'react';
  2. import {Button,Modal,message,Table,Spin,Input, Row,Col,Card,Form} from 'antd';
  3. import './selectContent.less';
  4. import {getMsgType} from '@/tools';
  5. class SelectContent extends Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. loading:false,
  10. RowData:[],
  11. recD:[],
  12. selectedRowKeys: [],
  13. selectedRows: [],
  14. loading: false,
  15. pagination: {
  16. defaultCurrent: 1,
  17. defaultPageSize: 10,
  18. showQuickJumper: true,
  19. pageSize: 10,
  20. onChange: function (page) {
  21. this.loadData(page);
  22. }.bind(this),
  23. showTotal: function (total) {
  24. return '共' + total + '条数据';
  25. }
  26. },
  27. columns: [
  28. {
  29. title: '名称',
  30. dataIndex: 'title',
  31. key: 'title',
  32. },
  33. {
  34. title: '简介',
  35. dataIndex: 'summary',
  36. key: 'summary',
  37. render: text => { return text&&text.length>16?text.substr(0,16)+'...':text}
  38. },
  39. {
  40. title: '类型',
  41. dataIndex: 'fromTable',
  42. key: 'fromTable',
  43. render:(text)=>{
  44. return getMsgType(text)
  45. }
  46. },
  47. {
  48. title: '关键字',
  49. dataIndex: 'keyword',
  50. key: 'keyword',
  51. render: text => { return text&&text.length>16?text.substr(0,16)+'...':text}
  52. },
  53. {
  54. title: '操作',
  55. dataIndex: 'caozuo',
  56. key: 'caozuo',
  57. render:(text,recard) => {
  58. return <div className="btnRight">
  59. <Button type="primary" style={{ background: "#3fcf9e", border: "none", color: "#fff" }} onClick={(e)=>{e.stopPropagation();this.subVal(recard)}}>选择</Button>
  60. </div>
  61. }
  62. }
  63. ],
  64. dataSource: [],
  65. }
  66. }
  67. loadData(pageNo) {
  68. this.state.data = [];
  69. this.setState({
  70. selectedRowKeys:[],
  71. page:pageNo,
  72. loading: true
  73. });
  74. $.ajax({
  75. method: "get",
  76. dataType: "json",
  77. crossDomain: false,
  78. url: globalConfig.context + "/portal/globalSearch",
  79. data: {
  80. pageNo: pageNo || 1,
  81. pageSize: 5,
  82. name:this.state.searchVal
  83. },
  84. success: function (data) {
  85. let theArr = [];
  86. if (!data.data || !data.data.list) {
  87. if (data.error && data.error.length) {
  88. message.warning(data.error[0].message);
  89. };
  90. } else {
  91. for (let i = 0; i < data.data.list.length; i++) {
  92. let thisdata = data.data.list[i];
  93. theArr.push({
  94. key: i,
  95. rowId: thisdata.rowId,
  96. keyword: thisdata.keyword,
  97. summary:thisdata.summary,
  98. title:thisdata.title,
  99. fromTable:thisdata.fromTable
  100. });
  101. };
  102. };
  103. this.state.pagination.current = data.data.pageNo;
  104. this.state.pagination.total = data.data.totalCount;
  105. if(data.data&&data.data.list&&!data.data.list.length){
  106. this.state.pagination.current=0;
  107. this.state.pagination.total=0;
  108. };
  109. this.setState({
  110. dataSource: theArr,
  111. pagination: this.state.pagination
  112. });
  113. }.bind(this),
  114. }).always(function () {
  115. this.setState({
  116. loading: false
  117. });
  118. }.bind(this));
  119. }
  120. //点推送时
  121. subVal(recard){
  122. this.setState({
  123. recD:recard
  124. })
  125. this.props.visFun(false,recard)
  126. }
  127. handOk(){
  128. this.setState({
  129. visible:false
  130. })
  131. this.props.visFun(false,this.state.recD);
  132. }
  133. handleCancel(){
  134. this.setState({
  135. visible:false
  136. })
  137. this.props.visFun(false,this.state.recD);
  138. }
  139. componentWillReceiveProps(nextProps){
  140. this.state.visible = nextProps.visible;
  141. }
  142. tableRowClick(record, index) {
  143. this.state.RowData = record;
  144. this.setState({
  145. DetailVis: true
  146. });
  147. }
  148. searchFun(){
  149. this.loadData()
  150. }
  151. okDetail(){
  152. this.setState({
  153. DetailVis: false
  154. });
  155. }
  156. render() {
  157. const formItemLayout = {
  158. labelCol: { span: 6 },
  159. wrapperCol: { span: 12 },
  160. };
  161. const FormItem = Form.Item
  162. let RowData=this.state.RowData||[];
  163. return ( <div>
  164. <Modal
  165. visible={this.state.visible}
  166. onOk={this.handOk.bind(this)}
  167. onCancel={this.handleCancel.bind(this)}
  168. width="800px"
  169. title="选择推送内容"
  170. footer=""
  171. >
  172. <div className="sendBody">
  173. <div className="megSearch">
  174. <Input type="text"
  175. size="large"
  176. value={this.state.searchVal}
  177. onChange={(e)=>{this.setState({searchVal:e.target.value})}}/>
  178. <Button type="primary" size="large" onClick={this.searchFun.bind(this)}>搜索</Button>
  179. </div>
  180. <Spin spinning={this.state.loading}>
  181. <Table columns={this.state.columns}
  182. dataSource={this.state.dataSource}
  183. pagination={this.state.pagination}
  184. onRowClick={this.tableRowClick.bind(this)} />
  185. </Spin>
  186. </div>
  187. </Modal>
  188. <Modal
  189. visible={this.state.DetailVis}
  190. title="详情"
  191. onOk={this.okDetail.bind(this)}
  192. onCancel={this.okDetail.bind(this)}
  193. footer=''
  194. width="600px"
  195. >
  196. <div className="detailList">
  197. <div className="clearfix">
  198. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="名称">
  199. <span>{RowData.title}</span>
  200. </FormItem>
  201. </div>
  202. <div className="clearfix">
  203. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="简介">
  204. <p>{RowData.summary}</p>
  205. </FormItem>
  206. </div>
  207. <div className="clearfix">
  208. <FormItem className="half-item" {...formItemLayout} label="类型">
  209. <p>{getMsgType(RowData.fromTable)}</p>
  210. </FormItem>
  211. <FormItem className="half-item" {...formItemLayout} label="关键字">
  212. <p>{RowData.keyword}</p>
  213. </FormItem>
  214. </div>
  215. </div>
  216. </Modal>
  217. </div> );
  218. }
  219. }
  220. export default SelectContent;