subscriber.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. import React from 'react';
  2. import { Icon, message, Row, Col, Select, Radio, Checkbox, Input, InputNumber, Button, Table, Spin, Pagination } from 'antd';
  3. import '../portal.less';
  4. import logoImg from '../../../../image/logo.png';
  5. import searchImg from '../../../../image/search.png';
  6. import { techFieldList, getTechField } from '../../DicTechFieldList';
  7. import { provinceList, getProvince } from '../../NewDicProvinceList';
  8. import { companySearch } from '../../tools';
  9. import ajax from 'jquery/src/ajax/xhr.js';
  10. import $ from 'jquery/src/ajax';
  11. import avatarImg from '../../../../image/avatarImg.png';
  12. const SubContent = React.createClass({
  13. loadData(pageNo) {
  14. this.setState({
  15. loading: true
  16. });
  17. $.ajax({
  18. method: "get",
  19. dataType: "json",
  20. url: globalConfig.context + "/portal/search/subscriberList",
  21. data: {
  22. "level": this.state.level, //认证状态 (0--未认证,1--认证)
  23. "type": this.state.type, //用户类型 (0--个人用户,1--组织用户)
  24. "field": this.state.firstField ? ((this.state.firstField || '') + ',' + (this.state.secondField || '') + ',' + (this.state.thirdField || '')) : null,
  25. "province": this.state.province,
  26. "city": this.state.city,
  27. "area": this.state.area,
  28. "name": this.state.searchName,
  29. "pageNo": pageNo || 1,
  30. "pageSize": this.state.pagination.pageSize
  31. },
  32. success: function (data) {
  33. let theArr = [];
  34. if (!data.data || !data.data.list) {
  35. if (data.error && data.error.length) {
  36. message.warning(data.error[0].message);
  37. };
  38. } else {
  39. for (let i = 0; i < data.data.list.length; i++) {
  40. let thisdata = data.data.list[i];
  41. theArr.push({
  42. key: i,
  43. uid: thisdata.uid, //用户ID
  44. identityId: thisdata.identityId, //认证ID (详情接口传入ID)
  45. username: thisdata.username,// 用户名称
  46. unitName: thisdata.unitName,
  47. type: this.state.type,
  48. personPortraitUrl: thisdata.personPortraitUrl,//用户头像URL
  49. logoUrl: thisdata.logoUrl,
  50. achievementNum: thisdata.achievementNum, //科技成果数量
  51. demandNum: thisdata.demandNum, //科技需求数量
  52. province: thisdata.province
  53. });
  54. };
  55. };
  56. this.state.pagination.pageNo = data.data.pageNo;
  57. this.state.pagination.total = data.data.totalCount;
  58. this.setState({
  59. dataSource: theArr,
  60. pagination: this.state.pagination
  61. });
  62. }.bind(this),
  63. }).done(function (data) {
  64. if (data.error && data.error.length) {
  65. message.warning(data.error[0].message);
  66. };
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. getInitialState() {
  73. return {
  74. loading: false,
  75. type: 0,
  76. pagination: {
  77. pageNo: 1,
  78. pageSize: 15,
  79. total: 0
  80. },
  81. dataSource: []
  82. };
  83. },
  84. componentWillMount() {
  85. let theFieldArr = [], theProvinceArr = [];
  86. techFieldList.map((item) => {
  87. theFieldArr.push(
  88. <Select.Option key={item.value}>{item.label}</Select.Option>
  89. )
  90. });
  91. provinceList.map((item) => {
  92. theProvinceArr.push(
  93. <Select.Option key={item.id}>{item.name}</Select.Option>
  94. )
  95. });
  96. this.state.fieldFirstOption = theFieldArr;
  97. this.state.provinceOption = theProvinceArr;
  98. this.loadData();
  99. },
  100. fieldFirstChange(e) {
  101. let theArr = [];
  102. techFieldList.map((item) => {
  103. if (item.value == e) {
  104. item.children.map((children) => {
  105. theArr.push(
  106. <Select.Option key={children.value}>{children.label}</Select.Option>
  107. )
  108. });
  109. }
  110. });
  111. this.state.firstField = e;
  112. this.state.secondField = undefined;
  113. this.state.thirdField = undefined;
  114. this.setState({
  115. fieldSecondOption: theArr,
  116. firstField: e,
  117. secondField: undefined,
  118. thirdField: undefined
  119. });
  120. this.loadData();
  121. },
  122. fieldSecondChange(e) {
  123. let theArr = [], _me = this;
  124. techFieldList.map((item) => {
  125. if (item.value == _me.state.firstField) {
  126. item.children.map((children) => {
  127. if (children.value == e) {
  128. children.children.map((third) => {
  129. theArr.push(
  130. <Select.Option key={third.value}>{third.label}</Select.Option>
  131. )
  132. })
  133. }
  134. });
  135. }
  136. });
  137. this.state.secondField = e;
  138. this.state.thirdField = undefined;
  139. this.setState({
  140. fieldThirdOption: theArr,
  141. secondField: e,
  142. thirdField: undefined
  143. });
  144. this.loadData();
  145. },
  146. provinceChange(e) {
  147. let theArr = [];
  148. provinceList.map((item) => {
  149. if (item.id == e) {
  150. item.cityList.map((city) => {
  151. theArr.push(
  152. <Select.Option key={city.id}>{city.name}</Select.Option>
  153. )
  154. });
  155. }
  156. });
  157. this.state.province = e;
  158. this.state.city = undefined;
  159. this.state.area = undefined;
  160. this.setState({
  161. cityOption: theArr,
  162. province: e,
  163. city: undefined,
  164. area: undefined
  165. });
  166. this.loadData();
  167. },
  168. cityChange(e) {
  169. let theArr = [], _me = this;
  170. provinceList.map((item) => {
  171. if (item.id == _me.state.province) {
  172. item.cityList.map((city) => {
  173. if (city.id == e) {
  174. city.areaList.map((area) => {
  175. theArr.push(
  176. <Select.Option key={area.id}>{area.name}</Select.Option>
  177. )
  178. });
  179. };
  180. });
  181. };
  182. });
  183. this.state.city = e;
  184. this.state.area = undefined;
  185. this.setState({
  186. areaOption: theArr,
  187. city: e,
  188. area: undefined
  189. });
  190. this.loadData();
  191. },
  192. tableRowClick(record, index) {
  193. window.open(globalConfig.context + '/user/subscriberDetail.html?rid=' + record.uid + '&type=' + record.type);
  194. },
  195. render() {
  196. const { pageNo, pageSize, total } = this.state.pagination;
  197. const _me = this;
  198. return (
  199. <div className="portal-body">
  200. <div className="portal-nav clearfix">
  201. <div className="nav-logoBox">
  202. <img src={logoImg} alt="" />
  203. </div>
  204. <ul className="nav-list clearfix">
  205. <li className={this.props.searchType == 'achievement' ? 'active' : ''}><a href={"/portal/search/achievement.html"}>科技成果</a></li>
  206. <li className={this.props.searchType == 'demand' ? 'active' : ''}><a href={"/portal/search/demand.html"}>科技需求</a></li>
  207. <li className={this.props.searchType == 'subscriber' ? 'active' : ''}><a href={"/portal/search/subscriber.html"}>伙伴/行家</a></li>
  208. </ul>
  209. <div className="nav-search">
  210. <Input onChange={(e) => { this.state.searchName = e.target.value; }} />
  211. <Button onClick={() => { this.loadData() }}>
  212. <img src={searchImg} alt="" />
  213. </Button>
  214. </div>
  215. </div>
  216. <div className="portal-content clearfix" >
  217. <Row className="search-criteria">
  218. <Col className="search-title" span={2}>
  219. <span>行业分类</span>
  220. </Col>
  221. <Col className="search-select" span={22}>
  222. <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
  223. value={this.state.firstField}
  224. placeholder="请选择行业一级分类"
  225. notFoundContent="未获取到行业分类"
  226. showSearch
  227. filterOption={companySearch}
  228. onChange={this.fieldFirstChange}>
  229. {this.state.fieldFirstOption}
  230. </Select>
  231. <Select style={{ width: 200, marginRight: '10px', marginBottom: '10px' }}
  232. value={this.state.secondField}
  233. placeholder="请选择行业二级分类"
  234. notFoundContent="未获取到行业分类"
  235. showSearch
  236. filterOption={companySearch}
  237. onChange={this.fieldSecondChange}>
  238. {this.state.fieldSecondOption}
  239. </Select>
  240. <Select style={{ width: 240, marginRight: '10px', marginBottom: '10px' }}
  241. value={this.state.thirdField}
  242. placeholder="请选择行业三级分类"
  243. notFoundContent="未获取到行业分类"
  244. showSearch
  245. filterOption={companySearch}
  246. onChange={(e) => {
  247. this.state.thirdField = e;
  248. this.setState({ thirdField: e });
  249. this.loadData();
  250. }}>
  251. {this.state.fieldThirdOption}
  252. </Select>
  253. <Button type="ghost" style={{ marginLeft: '20px' }}
  254. onClick={() => {
  255. this.setState({
  256. firstField: undefined,
  257. secondField: undefined,
  258. thirdField: undefined
  259. });
  260. this.state.firstField = undefined;
  261. this.state.secondField = undefined;
  262. this.state.thirdField = undefined;
  263. this.loadData();
  264. }}>不限</Button>
  265. </Col>
  266. </Row>
  267. <Row className="search-criteria">
  268. <Col className="search-title" span={2}>
  269. <span>地区</span>
  270. </Col>
  271. <Col className="search-select" span={22}>
  272. <Select style={{ width: 100, marginRight: '10px', marginBottom: '10px' }}
  273. value={this.state.province}
  274. placeholder="请选择省份"
  275. notFoundContent="未获取到省份列表"
  276. showSearch
  277. filterOption={companySearch}
  278. onChange={this.provinceChange}>
  279. {this.state.provinceOption}
  280. </Select>
  281. <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
  282. value={this.state.city}
  283. placeholder="请选择行业城市"
  284. notFoundContent="未获取到城市列表"
  285. showSearch
  286. filterOption={companySearch}
  287. onChange={this.cityChange}>
  288. {this.state.cityOption}
  289. </Select>
  290. <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
  291. value={this.state.area}
  292. placeholder="请选择行政区"
  293. notFoundContent="未获取到行政区列表"
  294. showSearch
  295. filterOption={companySearch}
  296. onChange={(e) => {
  297. this.state.area = e;
  298. this.setState({ area: e });
  299. this.loadData();
  300. }}>
  301. {this.state.areaOption}
  302. </Select>
  303. <Button type="ghost" style={{ marginLeft: '20px' }}
  304. onClick={() => {
  305. this.setState({
  306. province: undefined,
  307. city: undefined,
  308. area: undefined
  309. });
  310. this.state.province = undefined;
  311. this.state.city = undefined;
  312. this.state.area = undefined;
  313. this.loadData();
  314. }}>不限</Button>
  315. </Col>
  316. </Row>
  317. <Row className="search-criteria">
  318. <Col className="search-title" span={2}>
  319. <span>用户类型</span>
  320. </Col>
  321. <Col className="search-select" span={6}>
  322. <Radio.Group defaultValue={0} onChange={(e) => {
  323. this.setState({
  324. type: e.target.value
  325. });
  326. this.state.type = e.target.value;
  327. this.loadData();
  328. }}>
  329. <Radio.Button value={0}>个人</Radio.Button>
  330. <Radio.Button value={1}>组织</Radio.Button>
  331. </Radio.Group>
  332. </Col>
  333. </Row>
  334. <Spin spinning={this.state.loading}>
  335. <ul className="clearfix">
  336. {this.state.dataSource.map((item, i) => {
  337. return <li key={i} className="user-detail" onClick={() => { _me.tableRowClick(item); }}>
  338. <div className="logo">
  339. <img src={(item.personPortraitUrl || item.logoUrl) ?
  340. (globalConfig.avatarHost + "/upload" + (_me.state.type == 0 ? item.personPortraitUrl : item.logoUrl))
  341. : avatarImg} alt="头像" />
  342. </div>
  343. <div className="name">
  344. {_me.state.type == 0 ? item.username : item.unitName}
  345. </div>
  346. <div className="province">
  347. <span style={{ letterSpacing: '32px' }}>地</span>
  348. <span>区: </span>
  349. <span className="address"> {getProvince(item.province)}</span>
  350. </div>
  351. <div className="text">
  352. <span style={{ letterSpacing: '32px' }}>需</span>
  353. <span>求: </span>
  354. <span className="text-Number"> {item.demandNum || 0} </span>
  355. <span className="text-unit"> 条</span>
  356. </div>
  357. <div className="text">
  358. <span>技术成果: </span>
  359. <span className="text-Number"> {item.achievementNum || 0} </span>
  360. <span className="text-unit"> 条</span>
  361. </div>
  362. </li>
  363. })}
  364. </ul>
  365. <Pagination style={{ float: 'right' }}
  366. onChange={(e) => { this.loadData(e); }}
  367. total={total}
  368. showTotal={() => { return '共' + total + '条数据' }}
  369. current={pageNo}
  370. pageSize={pageSize} />
  371. </Spin>
  372. </div>
  373. </div>
  374. )
  375. }
  376. });
  377. export default SubContent;