achievement.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. import React from 'react';
  2. import { Icon, Form, Button, Input, Spin, Table, message, Select, Modal, InputNumber, Upload } from 'antd';
  3. import './techProduct.less';
  4. import { getConversionForm, beforeUploadFile } from '../../../../tools.js';
  5. import { conversionFormList, technicalSourceList } from '../../../../dataDic.js';
  6. import ajax from 'jquery/src/ajax/xhr.js';
  7. import $ from 'jquery/src/ajax';
  8. const AchievementDescFrom = Form.create()(React.createClass({
  9. getInitialState() {
  10. return {
  11. loading: false,
  12. yearOption: [],
  13. conversionFormOption: [],
  14. technicalSourceOption: []
  15. };
  16. },
  17. componentWillMount() {
  18. let d = new Date();
  19. let _me = this;
  20. d = d.getFullYear();
  21. for (let i = d; i > d - 20; i--) {
  22. _me.state.yearOption.push(
  23. <Select.Option value={i.toString()} key={i}>{i}</Select.Option>
  24. )
  25. };
  26. conversionFormList.map(function (item) {
  27. _me.state.conversionFormOption.push(
  28. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  29. )
  30. });
  31. technicalSourceList.map(function (item) {
  32. _me.state.technicalSourceOption.push(
  33. <Select.Option value={item.key} key={item.key}>{item.key}</Select.Option>
  34. )
  35. });
  36. if (this.props.activityNumberList && this.props.activityNumberList.length) {
  37. for (let i = 0; i < this.props.activityNumberList.length; i++) {
  38. _me.state.technicalSourceOption.push(
  39. <Select.Option value={this.props.activityNumberList[i].activityNumber}
  40. key={this.props.activityNumberList[i].uid}>
  41. {this.props.activityNumberList[i].activityName}-{this.props.activityNumberList[i].activityNumber}
  42. </Select.Option>
  43. )
  44. };
  45. };
  46. },
  47. handleSubmit(e) {
  48. e.preventDefault();
  49. if (!this.state.year) {
  50. message.warning("请选择一个年份!");
  51. return;
  52. };
  53. this.props.form.validateFields((err, values) => {
  54. if (!err) {
  55. this.props.spinState(true);
  56. $.ajax({
  57. method: "POST",
  58. dataType: "json",
  59. crossDomain: false,
  60. url: globalConfig.context + "/api/admin/disposeAchievement",
  61. data: {
  62. id: this.props.data.id,
  63. uid: this.props.uid,
  64. achievementName: values.achievementName,
  65. source: values.source,
  66. conversionForm: values.conversionForm,
  67. conversionResult: values.conversionResult,
  68. year: this.state.year,
  69. enclosureUrl: this.state.enclosureUrl
  70. }
  71. }).done(function (data) {
  72. if (!data.error.length) {
  73. message.success('保存成功!');
  74. this.props.clickOk();
  75. this.props.spinState(false);
  76. this.props.form.resetFields();
  77. } else {
  78. message.warning(data.error[0].message);
  79. this.props.spinState(false);
  80. }
  81. }.bind(this));
  82. }
  83. });
  84. },
  85. render() {
  86. const FormItem = Form.Item;
  87. const { getFieldDecorator } = this.props.form;
  88. const theData = this.props.data;
  89. const formItemLayout = {
  90. labelCol: { span: 4 },
  91. wrapperCol: { span: 16 },
  92. };
  93. const _me = this;
  94. return (
  95. <Form onSubmit={this.handleSubmit} className="activityCost-form">
  96. <div className="activityCost-title"><span>年份: </span>
  97. {
  98. theData.year ? <span>{theData.year}</span> :
  99. <Select placeholder="请选择年份" style={{ width: 200 }}
  100. onSelect={(e, n) => { this.state.year = e }}>
  101. {this.state.yearOption}
  102. </Select>
  103. }
  104. </div>
  105. <div className="clearfix">
  106. <FormItem
  107. {...formItemLayout}
  108. label="成果名称"
  109. >
  110. {getFieldDecorator('achievementName', {
  111. rules: [{ type: 'string', required: true, message: '此项为必填项!' }],
  112. initialValue: theData.achievementName
  113. })(
  114. <Input />
  115. )}
  116. </FormItem>
  117. <FormItem
  118. {...formItemLayout}
  119. label="成果来源"
  120. >
  121. {getFieldDecorator('source', {
  122. rules: [{ type: 'string', required: true, message: '此项为必填项!' }],
  123. initialValue: theData.source
  124. })(
  125. <Select placeholder="请选择成果来源" style={{ width: 200 }}>
  126. {this.state.technicalSourceOption}
  127. </Select>
  128. )}
  129. </FormItem>
  130. <FormItem
  131. {...formItemLayout}
  132. label="转化形式"
  133. >
  134. {getFieldDecorator('conversionForm', {
  135. rules: [{ type: 'string', required: true, message: '此项为必填项!' }],
  136. initialValue: theData.conversionForm
  137. })(
  138. <Select placeholder="请选择转化形式" style={{ width: 200 }}>
  139. {this.state.conversionFormOption}
  140. </Select>
  141. )}
  142. </FormItem>
  143. <FormItem
  144. {...formItemLayout}
  145. label="转化结果"
  146. >
  147. {getFieldDecorator('conversionResult', {
  148. rules: [{ type: 'string', required: true, message: '此项为必填项!' }],
  149. initialValue: theData.conversionResult
  150. })(
  151. <Input type="textarea" rows={6} />
  152. )}
  153. </FormItem>
  154. </div>
  155. <div className="hrSituation-roster">
  156. <Upload
  157. name="ratepay"
  158. action={globalConfig.context + "/techservice/cognizance/upload"}
  159. data={{ 'sign': this.props.year + 'enclosure' }}
  160. beforeUpload={beforeUploadFile}
  161. onChange={(info) => {
  162. if (info.file.status !== 'uploading') {
  163. console.log(info.file, info.fileList);
  164. }
  165. if (info.file.status === 'done') {
  166. if (!info.file.response.error.length) {
  167. message.success(`${info.file.name} 文件上传成功!`);
  168. } else {
  169. message.warning(info.file.response.error[0].message);
  170. return;
  171. };
  172. this.state.enclosureUrl = info.file.response.data;
  173. } else if (info.file.status === 'error') {
  174. message.error(`${info.file.name} 文件上传失败。`);
  175. }
  176. }}
  177. >
  178. <Button><Icon type="upload" /> 上传文件 </Button>
  179. </Upload>
  180. </div>
  181. <FormItem style={{ marginTop: '20px' }}>
  182. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  183. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  184. </FormItem>
  185. </Form >
  186. );
  187. },
  188. }));
  189. const AchievementDesc = React.createClass({
  190. getInitialState() {
  191. return {
  192. visible: false,
  193. loading: false
  194. };
  195. },
  196. componentWillReceiveProps(nextProps) {
  197. this.state.visible = nextProps.showDesc
  198. },
  199. showModal() {
  200. this.setState({
  201. visible: true,
  202. });
  203. },
  204. handleOk() {
  205. this.setState({
  206. visible: false,
  207. });
  208. this.props.closeDesc(false,true);
  209. },
  210. handleCancel(e) {
  211. this.setState({
  212. visible: false,
  213. });
  214. this.props.closeDesc(false);
  215. },
  216. spinChange(e) {
  217. this.setState({
  218. loading: e
  219. });
  220. },
  221. render() {
  222. return (
  223. <div className="patent-addNew">
  224. <Spin spinning={this.state.loading} className='spin-box'>
  225. <Modal title="科技成果转化" visible={this.state.visible}
  226. onOk={this.handleOk} onCancel={this.handleCancel}
  227. width='800px'
  228. footer=''
  229. >
  230. <AchievementDescFrom
  231. uid={this.props.uid}
  232. data={this.props.data}
  233. activityNumberList={this.props.activityNumberList}
  234. spinState={this.spinChange} closeModal={this.handleCancel} clickOk={this.handleOk} />
  235. </Modal>
  236. </Spin>
  237. </div>
  238. );
  239. },
  240. });
  241. const Achievement = React.createClass({
  242. loadData(pageNo) {
  243. this.state.data = [];
  244. this.setState({
  245. loading: true
  246. });
  247. $.when($.ajax({
  248. method: "post",
  249. dataType: "json",
  250. crossDomain: false,
  251. url: globalConfig.context + "/api/admin/achievementList",
  252. data: {
  253. pageNo: pageNo || 1,
  254. pageSize: this.state.pagination.pageSize,
  255. uid: this.props.data.uid
  256. }
  257. }), $.ajax({
  258. method: "post",
  259. dataType: "json",
  260. crossDomain: false,
  261. url: globalConfig.context + "/api/admin/activityNumber",
  262. data: {
  263. uid: this.props.data.uid
  264. }
  265. })).done((data1, data2) => {
  266. let data = data1[0];
  267. let activityNumber = data2[0];
  268. if (data.error.length || !data.data || !data.data.list) {
  269. message.warning(data.error[0].message);
  270. return;
  271. };
  272. if (activityNumber.error.length || !activityNumber.data) {
  273. message.warning(activityNumber.error[0].message);
  274. return;
  275. };
  276. for (let i = 0; i < data.data.list.length; i++) {
  277. let thisdata = data.data.list[i];
  278. this.state.data.push({
  279. key: i,
  280. id: thisdata.id,
  281. uid: thisdata.uid,
  282. achievementName: thisdata.achievementName,
  283. source: thisdata.source,
  284. conversionForm: thisdata.conversionForm,
  285. conversionResult: thisdata.conversionResult,
  286. year: thisdata.year,
  287. enclosureUrl: thisdata.enclosureUrl,
  288. });
  289. };
  290. this.state.activityNumberList = activityNumber.data;
  291. this.state.pagination.current = data.data.pageNo;
  292. this.state.pagination.total = data.data.totalCount;
  293. this.setState({
  294. dataSource: this.state.data,
  295. pagination: this.state.pagination
  296. });
  297. }).always(function () {
  298. this.setState({
  299. loading: false
  300. });
  301. }.bind(this));
  302. },
  303. getInitialState() {
  304. return {
  305. selectedRowKeys: [],
  306. selectedRows: [],
  307. loading: false,
  308. pagination: {
  309. defaultCurrent: 1,
  310. defaultPageSize: 10,
  311. showQuickJumper: true,
  312. pageSize: 10,
  313. onChange: function (page) {
  314. this.loadData(page);
  315. }.bind(this),
  316. showTotal: function (total) {
  317. return '共' + total + '条数据';
  318. }
  319. },
  320. columns: [
  321. {
  322. title: '年份',
  323. dataIndex: 'year',
  324. key: 'year'
  325. }, {
  326. title: '成果名称',
  327. dataIndex: 'achievementName',
  328. key: 'achievementName'
  329. }, {
  330. title: '成果来源',
  331. dataIndex: 'source',
  332. key: 'source',
  333. }, {
  334. title: '转化形式',
  335. dataIndex: 'conversionForm',
  336. key: 'conversionForm',
  337. render: (text) => { return getConversionForm(text) }
  338. }, {
  339. title: '转化结果',
  340. dataIndex: 'conversionResult',
  341. key: 'conversionResult',
  342. }, {
  343. title: '相关附件',
  344. dataIndex: 'enclosureUrl',
  345. key: 'enclosureUrl',
  346. render: (text) => {
  347. <a href="" onClick={() => {
  348. window.open(globalConfig.context + "/techservice/patent/downloadFile?path=" + text + "&sign=" + "type")
  349. }}></a>
  350. }
  351. }
  352. ],
  353. dataSource: []
  354. };
  355. },
  356. componentWillMount() {
  357. this.loadData();
  358. },
  359. tableRowClick(record, index) {
  360. this.state.RowData = record;
  361. this.setState({
  362. showDesc: true
  363. });
  364. },
  365. delectRow() {
  366. let deletedIds = [];
  367. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  368. let rowItem = this.state.selectedRows[idx];
  369. if (rowItem.id) {
  370. deletedIds.push(rowItem.id)
  371. }
  372. }
  373. this.setState({
  374. selectedRowKeys: [],
  375. loading: deletedIds.length > 0
  376. });
  377. $.ajax({
  378. method: "POST",
  379. dataType: "json",
  380. crossDomain: false,
  381. url: globalConfig.context + "/techservice/cognizance/deleteAchievement",
  382. data: {
  383. ids: deletedIds
  384. }
  385. }).done(function (data) {
  386. if (!data.error.length) {
  387. message.success('保存成功!');
  388. this.setState({
  389. loading: false,
  390. });
  391. } else {
  392. message.warning(data.error[0].message);
  393. };
  394. this.loadData();
  395. }.bind(this));
  396. },
  397. closeDesc(e, s) {
  398. this.state.showDesc = e;
  399. if (s) {
  400. this.loadData();
  401. };
  402. },
  403. search() {
  404. this.loadData();
  405. },
  406. reset() {
  407. this.loadData();
  408. },
  409. render() {
  410. const rowSelection = {
  411. selectedRowKeys: this.state.selectedRowKeys,
  412. onChange: (selectedRowKeys, selectedRows) => {
  413. this.setState({
  414. selectedRows: selectedRows,
  415. selectedRowKeys: selectedRowKeys
  416. });
  417. }
  418. };
  419. const hasSelected = this.state.selectedRowKeys.length > 0;
  420. return (
  421. <div className="user-content" >
  422. <div className="content-title">
  423. <span>科技成果转化</span>
  424. </div>
  425. <div className="user-search">
  426. <p>
  427. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  428. onClick={this.tableRowClick}>添加<Icon type="plus" /></Button>
  429. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  430. disabled={!hasSelected}
  431. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  432. </p>
  433. </div>
  434. <div className="patent-table">
  435. <Spin spinning={this.state.loading}>
  436. <Table columns={this.state.columns}
  437. dataSource={this.state.dataSource}
  438. pagination={this.state.pagination}
  439. rowSelection={rowSelection}
  440. onRowClick={this.tableRowClick} />
  441. </Spin>
  442. </div>
  443. <AchievementDesc
  444. data={this.state.RowData}
  445. uid={this.props.data.uid}
  446. activityNumberList={this.state.activityNumberList}
  447. showDesc={this.state.showDesc} closeDesc={this.closeDesc} />
  448. </div >
  449. );
  450. }
  451. });
  452. export default Achievement;