content.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  1. import React from 'react';
  2. import { Icon, message, Row, Col, Spin, Tag, Table } from 'antd';
  3. import './detail.less';
  4. import { getSearchUrl, getAchievementCategory, getDemandType } from '../tools';
  5. import { getProvince } from '../NewDicProvinceList';
  6. import { getTechField } from '../DicTechFieldList';
  7. import ajax from 'jquery/src/ajax/xhr.js'
  8. import $ from 'jquery/src/ajax';
  9. import avatarImg from '../../../image/avatarImg.png';
  10. const Content = React.createClass({
  11. loadData() {
  12. this.setState({
  13. loading: true
  14. });
  15. $.ajax({
  16. method: "get",
  17. dataType: "json",
  18. url: globalConfig.context + "/api/user/partner/detail",
  19. data: {
  20. uid: this.state.uid,
  21. type: this.state.type
  22. }
  23. }).done(function (data) {
  24. if (data.error && data.error.length) {
  25. message.warning(data.error[0].message);
  26. } else {
  27. this.state.data = data.data || {};
  28. this.state.theField = this.state.type == 0 ? (data.data.engagedField ? data.data.engagedField.split(',') : []) : (data.data.field ? data.data.field.split(',') : []);
  29. this.state.theImgsrc = this.state.type == 0 ? (data.data.lifePhotoUrl ? data.data.lifePhotoUrl.split(',') : []) : (data.data.publicityPictureUrl ? data.data.publicityPictureUrl.split(',') : []);
  30. }
  31. this.setState({
  32. data: this.state.data,
  33. theField: this.state.theField,
  34. theImgsrc: this.state.theImgsrc,
  35. loading: false
  36. });
  37. }.bind(this));
  38. },
  39. achievementLoadData(pageNo) {
  40. this.setState({
  41. loading: true
  42. });
  43. $.ajax({
  44. method: "get",
  45. dataType: "json",
  46. crossDomain: false,
  47. url: globalConfig.context + "/api/user/partner/achievementList",
  48. data: {
  49. ownerId: this.state.uid,
  50. pageNo: pageNo || 1,
  51. pageSize: this.state.achievementPagination.pageSize
  52. },
  53. success: function (data) {
  54. let theArr = [];
  55. if (!data.data || !data.data.list) {
  56. if (data.error && data.error.length) {
  57. message.warning(data.error[0].message);
  58. };
  59. } else {
  60. for (let i = 0; i < data.data.list.length; i++) {
  61. let thisdata = data.data.list[i];
  62. theArr.push({
  63. key: i,
  64. id: thisdata.id,
  65. serialNumber: thisdata.serialNumber,
  66. dataCategory: thisdata.dataCategory,
  67. name: thisdata.name,
  68. keyword: thisdata.keyword,
  69. category: thisdata.category,
  70. ownerType: thisdata.ownerType,
  71. releaseDate: thisdata.releaseDate,
  72. releaseDateFormattedDate: thisdata.releaseDateFormattedDate,
  73. });
  74. };
  75. }
  76. this.state.achievementPagination.current = data.data.pageNo;
  77. this.state.achievementPagination.total = data.data.totalCount;
  78. this.setState({
  79. achievementDataSource: theArr,
  80. achievementPagination: this.state.achievementPagination
  81. });
  82. }.bind(this),
  83. }).always(function () {
  84. this.setState({
  85. loading: false
  86. });
  87. }.bind(this));
  88. },
  89. demandLoadData(pageNo) {
  90. this.setState({
  91. loading: true
  92. });
  93. $.ajax({
  94. method: "get",
  95. dataType: "json",
  96. crossDomain: false,
  97. url: globalConfig.context + "/api/user/partner/demandList",
  98. data: {
  99. employerId: this.state.uid,
  100. pageNo: pageNo || 1,
  101. pageSize: this.state.demandPagination.pageSize
  102. },
  103. success: function (data) {
  104. let theArr = [];
  105. if (!data.data || !data.data.list) {
  106. if (data.error && data.error.length) {
  107. message.warning(data.error[0].message);
  108. };
  109. } else {
  110. for (let i = 0; i < data.data.list.length; i++) {
  111. let thisdata = data.data.list[i];
  112. theArr.push({
  113. key: i,
  114. id: thisdata.id,
  115. serialNumber: thisdata.serialNumber,
  116. dataCategory: thisdata.dataCategory,
  117. name: thisdata.name,
  118. keyword: thisdata.keyword,
  119. releaseDate: thisdata.releaseDate,
  120. demandType: thisdata.demandType,
  121. validityPeriod: thisdata.validityPeriod,
  122. validityPeriodFormattedDate: thisdata.validityPeriodFormattedDate,
  123. releaseDateFormattedDate: thisdata.releaseDateFormattedDate
  124. });
  125. };
  126. }
  127. this.state.demandPagination.current = data.data.pageNo;
  128. this.state.demandPagination.total = data.data.totalCount;
  129. this.setState({
  130. demandDataSource: theArr,
  131. demandPagination: this.state.demandPagination
  132. });
  133. }.bind(this),
  134. }).always(function () {
  135. this.setState({
  136. loading: false
  137. });
  138. }.bind(this));
  139. },
  140. interestClick() {
  141. this.setState({
  142. loading: true
  143. });
  144. $.ajax({
  145. method: "post",
  146. dataType: "json",
  147. crossDomain: false,
  148. url: globalConfig.context + '/api/user/interest/interestUser',
  149. data: {
  150. toUid: this.state.uid
  151. },
  152. success: function (data) {
  153. if (data.error && data.error.length) {
  154. message.warning(data.error[0].message);
  155. } else {
  156. this.loadData();
  157. };
  158. }.bind(this),
  159. }).always(function () {
  160. this.setState({
  161. loading: false
  162. });
  163. }.bind(this));;
  164. },
  165. cancelInterestClick() {
  166. this.setState({
  167. loading: true
  168. });
  169. $.ajax({
  170. method: "post",
  171. dataType: "json",
  172. crossDomain: false,
  173. url: globalConfig.context + '/api/user/interest/cancelInterest',
  174. data: {
  175. id: this.state.data.interestId
  176. },
  177. success: function (data) {
  178. if (data.error && data.error.length) {
  179. message.warning(data.error[0].message);
  180. } else {
  181. this.loadData(this.props.data.id);
  182. };
  183. }.bind(this),
  184. }).always(function () {
  185. this.setState({
  186. loading: false
  187. });
  188. }.bind(this));;
  189. },
  190. getInitialState() {
  191. return {
  192. loading: false,
  193. theField: [],
  194. data: {},
  195. theImgsrc: [],
  196. achievementPagination: {
  197. defaultCurrent: 1,
  198. defaultPageSize: 10,
  199. showQuickJumper: true,
  200. pageSize: 10,
  201. onChange: function (page) {
  202. this.achievementLoadData(page);
  203. }.bind(this),
  204. showTotal: function (total) {
  205. return '共' + total + '条数据';
  206. }
  207. },
  208. achievementColumns: [
  209. {
  210. title: '编号',
  211. dataIndex: 'serialNumber',
  212. key: 'serialNumber',
  213. }, {
  214. title: '名称',
  215. dataIndex: 'name',
  216. key: 'name',
  217. }, {
  218. title: '关键字',
  219. dataIndex: 'keyword',
  220. key: 'keyword',
  221. }, {
  222. title: '成果类型',
  223. dataIndex: 'dataCategory',
  224. key: 'dataCategory',
  225. render: text => {
  226. switch (text) {
  227. case "0":
  228. return <span>成果</span>;
  229. case "1":
  230. return <span>技术</span>;
  231. case "2":
  232. return <span>项目</span>;
  233. }
  234. }
  235. }, {
  236. title: '类型',
  237. dataIndex: 'category',
  238. key: 'category',
  239. render: text => { return getAchievementCategory(text); }
  240. }, {
  241. title: '发布时间',
  242. dataIndex: 'releaseDateFormattedDate',
  243. key: 'releaseDateFormattedDate',
  244. }
  245. ],
  246. achievementDataSource: [],
  247. demandColumns: [
  248. {
  249. title: '编号',
  250. dataIndex: 'serialNumber',
  251. key: 'serialNumber',
  252. }, {
  253. title: '名称',
  254. dataIndex: 'name',
  255. key: 'name',
  256. }, {
  257. title: '关键字',
  258. dataIndex: 'keyword',
  259. key: 'keyword',
  260. }, {
  261. title: '需求类型',
  262. dataIndex: 'dataCategory',
  263. key: 'dataCategory',
  264. render: text => {
  265. switch (text) {
  266. case "0":
  267. return <span>个人需求</span>;
  268. case "1":
  269. return <span>单位需求</span>;
  270. }
  271. }
  272. }, {
  273. title: '类型',
  274. dataIndex: 'demandType',
  275. key: 'demandType',
  276. render: text => { return getDemandType(text); }
  277. }, {
  278. title: '发布时间',
  279. dataIndex: 'releaseDateFormattedDate',
  280. key: 'releaseDateFormattedDate',
  281. }
  282. ],
  283. demandDataSource: [],
  284. demandPagination: {
  285. defaultCurrent: 1,
  286. defaultPageSize: 10,
  287. showQuickJumper: true,
  288. pageSize: 10,
  289. onChange: function (page) {
  290. this.demandLoadData(page);
  291. }.bind(this),
  292. showTotal: function (total) {
  293. return '共' + total + '条数据';
  294. }
  295. },
  296. };
  297. },
  298. componentWillMount() {
  299. if (window.location.search) {
  300. let theObj = getSearchUrl(window.location.search);
  301. if (theObj.rid && theObj.rid != 'null') {
  302. this.state.uid = theObj.rid;
  303. this.state.type = theObj.type;
  304. this.loadData();
  305. this.achievementLoadData();
  306. this.demandLoadData();
  307. };
  308. };
  309. },
  310. render() {
  311. const theData = this.state.data;
  312. return (
  313. <Spin spinning={this.state.loading}>
  314. <div className="detail-content">
  315. <Row>
  316. <Col span={6}>
  317. <div className="avatar-box">
  318. <img src={(theData.personPortraitUrl || theData.logoUrl) ?
  319. (globalConfig.avatarHost + "/upload" + (this.state.type == 0 ? theData.personPortraitUrl : theData.logoUrl))
  320. : avatarImg} alt="头像" />
  321. </div>
  322. <div className="interest">
  323. {theData.interestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
  324. : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
  325. </div>
  326. </Col>
  327. <Col span={18} className="avatar-right">
  328. <div>
  329. <div className="column-title">用户名称</div>
  330. <div className="column-text">{this.state.type == 0 ? theData.username : theData.unitName}</div>
  331. </div>
  332. <div>
  333. <div className="column-title">用户类型</div>
  334. <div className="column-text">{this.state.type == 0 ? '个人' : '组织'}</div>
  335. </div>
  336. <div>
  337. <div className="column-title">用户等级</div>
  338. <div className="column-text">Lv.{theData.level}</div>
  339. </div>
  340. <div>
  341. <div className="column-title">所在地</div>
  342. <div className="column-text">{getProvince(theData.province, theData.city, theData.area)}</div>
  343. </div>
  344. </Col>
  345. </Row>
  346. <Row>
  347. <Col span={12}>
  348. <div className="column-title">专业领域</div>
  349. <div className="column-text">{getTechField(this.state.theField[0], this.state.theField[1], this.state.theField[2])}</div>
  350. </Col>
  351. </Row>
  352. <Row>
  353. <Col span={12}>
  354. <div className="column-title">能力标签</div>
  355. <div className="column-text">
  356. {theData.abilityLabel ? theData.abilityLabel.split(',').map((item) => {
  357. return <Tag key={item}>{item}</Tag>
  358. }) : ''}
  359. </div>
  360. </Col>
  361. </Row>
  362. <Row>
  363. <Col span={12}>
  364. <div className="column-title">用户介绍</div>
  365. <div className="column-text">
  366. {this.state.type == 0 ? theData.personalProfile : theData.companyIntroduction}
  367. </div>
  368. </Col>
  369. </Row>
  370. <Row>
  371. <Col span={12}>
  372. <div className="column-title">用户展示</div>
  373. <div className="column-img">
  374. {this.state.theImgsrc.map((item, i) => {
  375. return <img key={i} src={globalConfig.avatarHost + "/upload" + item} alt="" />
  376. })}
  377. </div>
  378. </Col>
  379. </Row>
  380. </div>
  381. <div className="detail-content detail-table">
  382. <p>用户成果列表</p>
  383. <Table columns={this.state.achievementColumns}
  384. dataSource={this.state.achievementDataSource}
  385. pagination={this.state.achievementPagination} />
  386. <p>用户需求列表</p>
  387. <Table columns={this.state.demandColumns}
  388. dataSource={this.state.demandDataSource}
  389. pagination={this.state.demandPagination} />
  390. </div>
  391. </Spin>
  392. )
  393. }
  394. });
  395. export default Content;