sichuan.jsx 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550
  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. let thisData=data.data;
  223. this.setState({
  224. id:thisData.id,//需求ID
  225. name: thisData.name,//成果名称
  226. type:0,//需求类型
  227. industry:thisData.industry?thisData.industry.toString():"",//行业
  228. patentNumber: thisData.patentNumber,//专利编号
  229. ownerName: thisData.ownerName,//所有权人
  230. publisherName: thisData.publisherName,//联系人
  231. telephone: thisData.telephone,//联系方式
  232. reserveButtMode: (thisData.reserveButtMode||thisData.reserveButtMode==0)?thisData.reserveButtMode.toString():undefined,//拟对接方式
  233. introduce: thisData.introduce,//技术成果内容
  234. pIntroduce: thisData.pIntroduce,//企业简介
  235. });
  236. } else {
  237. message.warning(data.error[0].message);
  238. };
  239. this.setState({
  240. loading: false,
  241. });
  242. }.bind(this));
  243. }
  244. handleOk() {
  245. this.handleSubmit();
  246. }
  247. handleCancel() {
  248. this.resets();
  249. this.setState({
  250. visible: false
  251. });
  252. }
  253. handleSubmit() {
  254. this.setState({
  255. loading: true
  256. });
  257. if(!this.state.name){
  258. message.warning("技术简称必须填写");
  259. this.setState({
  260. loading: false
  261. });
  262. return;
  263. }
  264. $.ajax({
  265. method: "POST",
  266. dataType: "json",
  267. crossDomain: false,
  268. url: globalConfig.context +( this.state.addState?"/open/api/achievements":"/open/api/updateAchievement"),
  269. data: {
  270. id:this.state.id,//需求ID
  271. name: this.state.name,//成果名称
  272. type:0,//需求类型
  273. industry:this.state.industry,//行业
  274. patentNumber: this.state.patentNumber,//专利编号
  275. ownerName: this.state.ownerName,//所有权人
  276. publisherName: this.state.publisherName,//联系人
  277. telephone: this.state.telephone,//联系方式
  278. reserveButtMode: this.state.reserveButtMode,//拟对接方式
  279. introduce: this.state.introduce,//技术成果内容
  280. pIntroduce: this.state.pIntroduce,//企业简介
  281. }
  282. }).done(function (data) {
  283. if (!data.error.length) {
  284. message.success(this.state.addState?'新建成功!':"修改成功!");
  285. this.setState({
  286. visible: false,
  287. });
  288. this.loadData();
  289. this.resets();
  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 url="https://api.qrserver.com/v1/create-qr-code/?data=http://"+window.location.host+"/open/achievementDetails?id="+this.state.id+"&size=100x100"
  324. const rowSelection = {
  325. selectedRowKeys: this.state.selectedRowKeys,
  326. onChange: (selectedRowKeys, selectedRows) => {
  327. this.setState({
  328. selectedRows: selectedRows.slice(-1),
  329. selectedRowKeys: selectedRowKeys.slice(-1)
  330. });
  331. }
  332. };
  333. const formItemLayout = {
  334. labelCol: { span: 6 },
  335. wrapperCol: { span: 12 }
  336. };
  337. return (
  338. <div className="user-content">
  339. <div className="content-title">
  340. <span className="title">四川科技成果</span>
  341. <div className="patent-addNew">
  342. <Button type="primary" onClick={this.add.bind(this)}>
  343. 发布成果<Icon type="plus" />
  344. </Button>
  345. </div>
  346. </div>
  347. <div className="user-search">
  348. <Input
  349. placeholder="成果名称"
  350. value={this.state.seachName}
  351. className="searchInp"
  352. onChange={(e) => {
  353. this.setState({ seachName: e.target.value });
  354. }}
  355. style={{ width: 120 }}
  356. />
  357. <Input
  358. placeholder="所有权人"
  359. value={this.state.seachOwnerName}
  360. onChange={(e) => {
  361. this.setState({ seachOwnerName: e.target.value });
  362. }}
  363. style={{ width: 120 }}
  364. />
  365. <Input
  366. placeholder="专利编号"
  367. value={this.state.seachPatentNumber}
  368. onChange={(e) => {
  369. this.setState({ seachPatentNumber: e.target.value });
  370. }}
  371. style={{ width: 120 }}
  372. />
  373. <Button type="primary" onClick={this.search.bind(this)} className="interval">
  374. 搜索
  375. </Button>
  376. <Button onClick={this.reset.bind(this)} className="interval">
  377. 重置
  378. </Button>
  379. </div>
  380. <div className="patent-table">
  381. <Spin spinning={this.state.loading}>
  382. <Table
  383. columns={this.state.columns}
  384. dataSource={this.state.dataSource}
  385. rowSelection={rowSelection}
  386. pagination={this.state.pagination}
  387. onRowClick={this.tableRowClick.bind(this)}
  388. />
  389. </Spin>
  390. </div>
  391. <Modal
  392. title={this.state.addState ? '新建成果' : '成果详情'}
  393. visible={this.state.visible}
  394. width="900px"
  395. onOk={this.handleOk.bind(this)}
  396. onCancel={this.handleCancel.bind(this)}
  397. okText="保存"
  398. cancelText="取消"
  399. >
  400. <Form layout="horizontal" id="demand-form">
  401. <Spin spinning={this.state.loading}>
  402. <div className="clearfix">
  403. <FormItem
  404. className="half-item"
  405. {...formItemLayout}
  406. label={
  407. <span>
  408. <strong style={{ color: '#f00' }}>*</strong>技术简称
  409. </span>
  410. }
  411. >
  412. <Input
  413. placeholder="技术简称"
  414. value={this.state.name}
  415. onChange={(e) => {
  416. this.setState({ name: e.target.value });
  417. }}
  418. />
  419. </FormItem>
  420. <FormItem className="half-item" {...formItemLayout} label={
  421. <span>
  422. <strong style={{ color: '#f00' }}>*</strong>行业领域
  423. </span>
  424. }>
  425. <Select
  426. value={this.state.industry}
  427. onChange={(e) => {
  428. this.setState({ industry: e });
  429. }}
  430. placeholder="请选择行业领域"
  431. >
  432. <Select.Option value="1">先进制造与自动化</Select.Option>
  433. <Select.Option value="2">电子信息技术</Select.Option>
  434. <Select.Option value="3">新材料技术</Select.Option>
  435. <Select.Option value="4">生物与新药</Select.Option>
  436. <Select.Option value="5">资源与环境</Select.Option>
  437. <Select.Option value="6">新能源</Select.Option>
  438. </Select>
  439. </FormItem>
  440. <FormItem className="half-item" {...formItemLayout} label="专利编号">
  441. <Input
  442. placeholder="专利编号"
  443. value={this.state.patentNumber}
  444. onChange={(e) => {
  445. this.setState({ patentNumber: e.target.value });
  446. }}
  447. />
  448. </FormItem>
  449. <FormItem className="half-item" {...formItemLayout} label={
  450. <span>
  451. <strong style={{ color: '#f00' }}>*</strong>所有权人
  452. </span>
  453. }>
  454. <Input
  455. placeholder="所有权人"
  456. value={this.state.ownerName}
  457. onChange={(e) => {
  458. this.setState({ ownerName: e.target.value });
  459. }}
  460. />
  461. </FormItem>
  462. <FormItem className="half-item" {...formItemLayout} label={
  463. <span>
  464. <strong style={{ color: '#f00' }}>*</strong>项目负责人
  465. </span>
  466. }>
  467. <Input
  468. placeholder="项目负责人"
  469. value={this.state.publisherName}
  470. onChange={(e) => {
  471. this.setState({ publisherName: e.target.value });
  472. }}
  473. />
  474. </FormItem>
  475. <FormItem className="half-item" {...formItemLayout} label={
  476. <span>
  477. <strong style={{ color: '#f00' }}>*</strong>联系方式
  478. </span>
  479. }>
  480. <Input
  481. placeholder="联系电话"
  482. value={this.state.telephone}
  483. onChange={(e) => {
  484. this.setState({ telephone: e.target.value });
  485. }}
  486. />
  487. </FormItem>
  488. <FormItem className="half-item" {...formItemLayout} label="拟对接方式">
  489. <Select
  490. value={this.state.reserveButtMode}
  491. onChange={(e) => {
  492. this.setState({ reserveButtMode: e });
  493. }}
  494. placeholder="请选择对接方式"
  495. >
  496. <Select.Option value="0">直接对接</Select.Option>
  497. <Select.Option value="1">技术合作</Select.Option>
  498. </Select>
  499. </FormItem>
  500. <div className="clearfix">
  501. <FormItem
  502. labelCol={{ span: 3 }}
  503. wrapperCol={{ span: 18 }}
  504. label={
  505. <span>
  506. <strong style={{ color: '#f00' }}>*</strong>技术成果内容
  507. </span>
  508. }
  509. style={{ margin: '10px 0px' }}
  510. >
  511. <TextArea
  512. autosize={{ minRows: 4, maxRows: 10 }}
  513. placeholder="输入技术成果内容"
  514. value={this.state.introduce}
  515. onChange={(e) => {
  516. this.setState({ introduce: e.target.value });
  517. }}
  518. />
  519. </FormItem>
  520. </div>
  521. <div className="clearfix">
  522. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="企业简介">
  523. <TextArea autosize={{ minRows: 4, maxRows: 10 }} placeholder="输入企业简介"
  524. value={this.state.pIntroduce}
  525. onChange={(e) => {
  526. this.setState({ pIntroduce: e.target.value });
  527. }}/>
  528. </FormItem>
  529. </div>
  530. {!this.state.addState&&<div className="clearfix" style={{marginTop:"10px"}}>
  531. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 19 }} label="二维码">
  532. <img src={url} style={{width:"100px",height:"100px"}}/>
  533. </FormItem>
  534. </div>
  535. }
  536. </div>
  537. </Spin>
  538. </Form>
  539. </Modal>
  540. </div>
  541. );
  542. }
  543. }
  544. export default Achievement;