sichuan.jsx 17 KB

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