sichuan.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523
  1. import React from 'react';
  2. import {
  3. Icon,
  4. Button,
  5. Input,
  6. Select,
  7. Spin,
  8. Checkbox,
  9. Cascader,
  10. Table,
  11. Form,
  12. Switch,
  13. message,
  14. DatePicker,
  15. Modal,
  16. Row,
  17. Col,
  18. InputNumber,
  19. notification
  20. } from 'antd';
  21. import ajax from 'jquery/src/ajax/xhr.js';
  22. import $ from 'jquery/src/ajax';
  23. //import axios from 'axios';
  24. import 'antd/dist/antd.css';
  25. const FormItem = Form.Item;
  26. import './sichuan.css';
  27. const { TextArea } = Input;
  28. class Achievement extends React.Component {
  29. loadData(pageNo) {
  30. this.setState({
  31. page: pageNo,
  32. loading: true
  33. });
  34. $.ajax({
  35. method: "get",
  36. dataType: "json",
  37. crossDomain: false,
  38. url: globalConfig.context + "/open/api/achievementList",
  39. data: {
  40. pageNo: pageNo || 1,
  41. pageSize: this.state.pagination.pageSize,
  42. type:0,
  43. name:this.state.seachName,//成果名称
  44. ownerName:this.state.seachOwnerName,//所有权人
  45. patentNumber:this.state.seachPatentNumber,//专利编号
  46. },
  47. success: function (data) {
  48. let theArr = [];
  49. if (!data.data || !data.data.list) {
  50. if (data.error && data.error.length) {
  51. message.warning(data.error[0].message);
  52. };
  53. } else {
  54. for (let i = 0; i < data.data.list.length; i++) {
  55. let thisdata = data.data.list[i];
  56. theArr.push({
  57. key: i,
  58. id: thisdata.id,//成果编号
  59. name: thisdata.name,//成果名称
  60. industry: thisdata.industry,//行业
  61. ownerName:thisdata.ownerName,//所有权人
  62. patentNumber:thisdata.patentNumber,//专利编号
  63. contacts:thisdata.contacts,//负责人姓名
  64. telephone:thisdata.telephone,//负责人电话
  65. });
  66. };
  67. this.state.pagination.current = data.data.pageNo;
  68. this.state.pagination.total = data.data.totalCount;
  69. };
  70. this.setState({
  71. dataSource: theArr,
  72. pagination: this.state.pagination
  73. });
  74. }.bind(this),
  75. }).always(function () {
  76. this.setState({
  77. loading: false
  78. });
  79. }.bind(this));
  80. }
  81. constructor(props) {
  82. super(props);
  83. this.state = {
  84. loading:false,
  85. publishPages: [],
  86. visible: false,
  87. pagination: {
  88. defaultCurrent: 1,
  89. defaultPageSize: 10,
  90. showQuickJumper: true,
  91. pageSize: 10,
  92. onChange: function(page) {
  93. this.loadData(page);
  94. }.bind(this),
  95. showTotal: function(total) {
  96. return '共' + total + '条数据';
  97. }
  98. },
  99. columns: [
  100. {
  101. title: '成果名称',
  102. dataIndex: 'name',
  103. key: 'name'
  104. },
  105. {
  106. title: '所有权人',
  107. dataIndex: 'ownerName',
  108. key: 'ownerName'
  109. },
  110. {
  111. title: '专利编号',
  112. dataIndex: 'patentNumber',
  113. key: 'patentNumber'
  114. },
  115. {
  116. title: '负责人姓名',
  117. dataIndex: 'contacts',
  118. key: 'contacts'
  119. },
  120. {
  121. title: '负责人电话',
  122. dataIndex: 'telephone',
  123. key: 'telephone'
  124. },
  125. {
  126. title: '操作',
  127. dataIndex: 'caozuo',
  128. key: 'caozuo',
  129. render: (text, recard) => {
  130. return (
  131. <div className="btnRight">
  132. <Button
  133. type="danger"
  134. onClick={(e) => {
  135. e.stopPropagation();
  136. this.delectRow(recard);
  137. }}
  138. >
  139. 删除
  140. </Button>
  141. </div>
  142. );
  143. }
  144. }
  145. ]
  146. };
  147. }
  148. //删除
  149. delectRow(recard) {
  150. $.ajax({
  151. method: "get",
  152. dataType: "json",
  153. crossDomain: false,
  154. url: globalConfig.context + "/open/api/delectAchievement",
  155. data: {
  156. id:recard.id
  157. },
  158. success: function (data) {
  159. if (!data.error.length) {
  160. message.success('删除成功!');
  161. this.setState({
  162. loading: false,
  163. });
  164. this.loadData();
  165. } else {
  166. message.warning(data.error[0].message);
  167. };
  168. }.bind(this),
  169. }).always(function () {
  170. this.setState({
  171. loading: false
  172. });
  173. }.bind(this));
  174. }
  175. details(recard){
  176. this.state({
  177. loading:true
  178. })
  179. }
  180. add() {
  181. this.setState({
  182. uid: '',
  183. visible: true,
  184. addState: true,
  185. name: '',
  186. introduce: '',
  187. industry: '',
  188. summary: '',
  189. ownerName: '',
  190. reserveButtMode: '',
  191. patentNumber: '',
  192. transferPrice: '',
  193. telephone: '',
  194. cname: ''
  195. });
  196. }
  197. search() {
  198. this.loadData(1);
  199. }
  200. reset() {
  201. this.state.seachName = '';
  202. this.state.seachOwnerName = '';
  203. this.state.seachPatentNumber = '';
  204. this.loadData(1);
  205. }
  206. tableRowClick(record, index) {
  207. this.setState({
  208. visible: true,
  209. addState: false,
  210. id:record.id,
  211. });
  212. $.ajax({
  213. method: "get",
  214. dataType: "json",
  215. crossDomain: false,
  216. url: globalConfig.context + "/open/api/AchievementDetails",
  217. data: {
  218. id: record.id,//需求名称
  219. }
  220. }).done(function (data) {
  221. if (!data.error.length) {
  222. console.log(data.data);
  223. let thisData=data.data;
  224. this.setState({
  225. id:thisData.id,//需求ID
  226. name: thisData.name,//成果名称
  227. type:0,//需求类型
  228. industry:thisData.industry?thisData.industry.toString():"",//行业
  229. patentNumber: thisData.patentNumber,//专利编号
  230. ownerName: thisData.ownerName,//所有权人
  231. publisherName: thisData.publisherName,//联系人
  232. telephone: thisData.telephone,//联系方式
  233. reserveButtMode:thisData.reserveButtMode,//拟对接方式
  234. introduce: thisData.introduce,//技术成果内容
  235. pIntroduce: thisData.pIntroduce,//企业简介
  236. });
  237. } else {
  238. message.warning(data.error[0].message);
  239. };
  240. this.setState({
  241. loading: false,
  242. });
  243. }.bind(this));
  244. }
  245. handleOk() {
  246. this.handleSubmit();
  247. }
  248. handleCancel() {
  249. this.resets();
  250. this.setState({
  251. visible: false
  252. });
  253. }
  254. handleSubmit() {
  255. this.setState({
  256. loading: true
  257. });
  258. if(!this.state.name){
  259. message.warning("技术简称必须填写");
  260. this.setState({
  261. loading: false
  262. });
  263. return;
  264. }
  265. $.ajax({
  266. method: "POST",
  267. dataType: "json",
  268. crossDomain: false,
  269. url: globalConfig.context +( this.state.addState?"/open/api/achievements":"/open/api/updateAchievement"),
  270. data: {
  271. id:this.state.id,//需求ID
  272. name: this.state.name,//成果名称
  273. type:0,//需求类型
  274. industry:this.state.industry,//行业
  275. patentNumber: this.state.patentNumber,//专利编号
  276. ownerName: this.state.ownerName,//所有权人
  277. publisherName: this.state.publisherName,//联系人
  278. telephone: this.state.telephone,//联系方式
  279. reserveButtMode: this.state.reserveButtMode,//拟对接方式
  280. introduce: this.state.introduce,//技术成果内容
  281. pIntroduce: this.state.pIntroduce,//企业简介
  282. }
  283. }).done(function (data) {
  284. if (!data.error.length) {
  285. message.success(this.state.addState?'新建成功!':"修改成功!");
  286. this.setState({
  287. visible: false,
  288. });
  289. this.loadData();
  290. } else {
  291. message.warning(data.error[0].message);
  292. };
  293. this.setState({
  294. loading: false,
  295. });
  296. }.bind(this));
  297. }
  298. resets(){
  299. this.state.name = '',//需求名称
  300. this.state.industry = undefined,//行业
  301. this.state.investmentCost = '',//经费投入
  302. this.state.reserveButtUnit = '',//拟对接单位
  303. this.state.reserveButtMode = '',//拟对接方式
  304. this.state.reserveSolveMode = '',//拟解决方式
  305. this.state.publisherName = '',//联系人
  306. this.state.telephone = '',//联系方式
  307. this.state.summary = '',
  308. this.state.introduce = '',//需求内容
  309. this.state.Pname = '',//企业名称
  310. this.state.nature = undefined,//企业特质
  311. this.state.feature = '',//企业特征
  312. this.state.ProvinceCity =undefined,//省
  313. this.state.zipCode = '',//邮政编码
  314. this.state.legalPerson = '',//法人名称
  315. this.state.website = '',//企业网址
  316. this.state.email = '',//企业邮箱
  317. this.state.pIntroduce = ''//企业简介
  318. }
  319. componentWillMount() {
  320. this.loadData(1);
  321. }
  322. render() {
  323. const rowSelection = {
  324. selectedRowKeys: this.state.selectedRowKeys,
  325. onChange: (selectedRowKeys, selectedRows) => {
  326. this.setState({
  327. selectedRows: selectedRows.slice(-1),
  328. selectedRowKeys: selectedRowKeys.slice(-1)
  329. });
  330. }
  331. };
  332. const formItemLayout = {
  333. labelCol: { span: 6 },
  334. wrapperCol: { span: 12 }
  335. };
  336. return (
  337. <div className="user-content">
  338. <div className="content-title">
  339. <span className="title">四川科技成果</span>
  340. <div className="patent-addNew">
  341. <Button type="primary" onClick={this.add.bind(this)}>
  342. 发布成果<Icon type="plus" />
  343. </Button>
  344. </div>
  345. </div>
  346. <div className="user-search">
  347. <Input
  348. placeholder="成果名称"
  349. value={this.state.seachName}
  350. className="searchInp"
  351. onChange={(e) => {
  352. this.setState({ seachName: e.target.value });
  353. }}
  354. style={{ width: 120 }}
  355. />
  356. <Input
  357. placeholder="所有权人"
  358. value={this.state.seachOwnerName}
  359. onChange={(e) => {
  360. this.setState({ seachOwnerName: e.target.value });
  361. }}
  362. style={{ width: 120 }}
  363. />
  364. <Input
  365. placeholder="专利编号"
  366. value={this.state.seachPatentNumber}
  367. onChange={(e) => {
  368. this.setState({ seachPatentNumber: e.target.value });
  369. }}
  370. style={{ width: 120 }}
  371. />
  372. <Button type="primary" onClick={this.search.bind(this)} className="interval">
  373. 搜索
  374. </Button>
  375. <Button onClick={this.reset.bind(this)} className="interval">
  376. 重置
  377. </Button>
  378. </div>
  379. <div className="patent-table">
  380. <Spin spinning={this.state.loading}>
  381. <Table
  382. columns={this.state.columns}
  383. dataSource={this.state.dataSource}
  384. rowSelection={rowSelection}
  385. pagination={this.state.pagination}
  386. onRowClick={this.tableRowClick.bind(this)}
  387. />
  388. </Spin>
  389. </div>
  390. <Modal
  391. title={this.state.addState ? '新建成果' : '成果详情'}
  392. visible={this.state.visible}
  393. width="900px"
  394. onOk={this.handleOk.bind(this)}
  395. onCancel={this.handleCancel.bind(this)}
  396. okText="保存"
  397. cancelText="取消"
  398. >
  399. <Form layout="horizontal" id="demand-form">
  400. <Spin spinning={this.state.loading}>
  401. <div className="clearfix">
  402. <FormItem
  403. className="half-item"
  404. {...formItemLayout}
  405. label={
  406. <span>
  407. <strong style={{ color: '#f00' }}>*</strong>技术简称
  408. </span>
  409. }
  410. >
  411. <Input
  412. placeholder="技术简称"
  413. value={this.state.name}
  414. onChange={(e) => {
  415. this.setState({ name: e.target.value });
  416. }}
  417. />
  418. </FormItem>
  419. <FormItem className="half-item" {...formItemLayout} label="行业领域">
  420. <Select
  421. value={this.state.industry}
  422. onChange={(e) => {
  423. this.setState({ industry: e });
  424. }}
  425. placeholder="请选择行业领域"
  426. >
  427. <Select.Option value="1">先进制造与自动化</Select.Option>
  428. <Select.Option value="2">电子信息技术</Select.Option>
  429. <Select.Option value="3">新材料技术</Select.Option>
  430. <Select.Option value="4">生物与新药</Select.Option>
  431. <Select.Option value="5">资源与新环境</Select.Option>
  432. <Select.Option value="6">新能源</Select.Option>
  433. </Select>
  434. </FormItem>
  435. <FormItem className="half-item" {...formItemLayout} label="专利编号">
  436. <Input
  437. placeholder="专利编号"
  438. value={this.state.patentNumber}
  439. onChange={(e) => {
  440. this.setState({ patentNumber: e.target.value });
  441. }}
  442. />
  443. </FormItem>
  444. <FormItem className="half-item" {...formItemLayout} label="所有权人">
  445. <Input
  446. placeholder="所有权人"
  447. value={this.state.ownerName}
  448. onChange={(e) => {
  449. this.setState({ ownerName: e.target.value });
  450. }}
  451. />
  452. </FormItem>
  453. <FormItem className="half-item" {...formItemLayout} label="项目负责人">
  454. <Input
  455. placeholder="联系人"
  456. value={this.state.publisherName}
  457. onChange={(e) => {
  458. this.setState({ publisherName: e.target.value });
  459. }}
  460. />
  461. </FormItem>
  462. <FormItem className="half-item" {...formItemLayout} label="联系电话">
  463. <Input
  464. placeholder="联系电话"
  465. value={this.state.telephone}
  466. onChange={(e) => {
  467. this.setState({ telephone: e.target.value });
  468. }}
  469. />
  470. </FormItem>
  471. <FormItem className="half-item" {...formItemLayout} label="拟对接方式">
  472. <Input
  473. placeholder="拟对接方式"
  474. value={this.state.reserveButtMode}
  475. onChange={(e) => {
  476. this.setState({ reserveButtMode: e.target.value });
  477. }}
  478. />
  479. </FormItem>
  480. <div className="clearfix">
  481. <FormItem
  482. labelCol={{ span: 3 }}
  483. wrapperCol={{ span: 18 }}
  484. label={
  485. <span>
  486. <strong style={{ color: '#f00' }}>*</strong>技术成果内容
  487. </span>
  488. }
  489. style={{ margin: '10px 0px' }}
  490. >
  491. <TextArea
  492. autosize={{ minRows: 4, maxRows: 10 }}
  493. placeholder="输入技术成果内容"
  494. value={this.state.introduce}
  495. onChange={(e) => {
  496. this.setState({ introduce: e.target.value });
  497. }}
  498. />
  499. </FormItem>
  500. </div>
  501. <div className="clearfix">
  502. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="企业简介">
  503. <TextArea autosize={{ minRows: 4, maxRows: 10 }} placeholder="输入企业简介"
  504. value={this.state.pIntroduce}
  505. onChange={(e) => {
  506. this.setState({ pIntroduce: e.target.value });
  507. }}/>
  508. </FormItem>
  509. </div>
  510. </div>
  511. </Spin>
  512. </Form>
  513. </Modal>
  514. </div>
  515. );
  516. }
  517. }
  518. export default Achievement;