sichuan.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658
  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. } from 'antd';
  20. import { citySelect, provinceList ,areaSelect} from '@/NewDicProvinceList';
  21. import {demandProfile} from '../../../dataDic.js';
  22. import ajax from 'jquery/src/ajax/xhr.js';
  23. import $ from 'jquery/src/ajax';
  24. //import axios from 'axios';
  25. import 'antd/dist/antd.css';
  26. const FormItem = Form.Item;
  27. import './sichuan.css';
  28. const { TextArea } = Input;
  29. const CheckboxGroup = Checkbox.Group;
  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/demandList",
  41. data: {
  42. pageNo: pageNo || 1,
  43. pageSize: this.state.pagination.pageSize,
  44. name:this.state.seachName,//需求名称
  45. type:0,
  46. reserveButtUnit:this.state.seachReserveButtUnit,//对接单位
  47. },
  48. success: function (data) {
  49. let theArr = [];
  50. if (!data.data || !data.data.list) {
  51. if (data.error && data.error.length) {
  52. message.warning(data.error[0].message);
  53. };
  54. } else {
  55. for (let i = 0; i < data.data.list.length; i++) {
  56. let thisdata = data.data.list[i];
  57. theArr.push({
  58. key: i,
  59. id: thisdata.id,//需求编号
  60. name: thisdata.name,//需求名称
  61. industry: thisdata.industry,//行业
  62. reserveButtUnit:thisdata.reserveButtUnit,//对接单位
  63. orgName:thisdata.orgName,//企业名称
  64. });
  65. };
  66. this.state.pagination.current = data.data.pageNo;
  67. this.state.pagination.total = data.data.totalCount;
  68. };
  69. this.setState({
  70. dataSource: theArr,
  71. pagination: this.state.pagination
  72. });
  73. }.bind(this),
  74. }).always(function () {
  75. this.setState({
  76. loading: false
  77. });
  78. }.bind(this));
  79. }
  80. constructor(props) {
  81. super(props);
  82. this.state = {
  83. loading:false,
  84. publishPages: [],
  85. nature:'',
  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: 'industry',
  108. key: 'industry'
  109. },
  110. {
  111. title: '企业名称',
  112. dataIndex: 'orgName',
  113. key: 'orgName'
  114. },
  115. {
  116. title: '拟对接单位',
  117. dataIndex: 'reserveButtUnit',
  118. key: 'reserveButtUnit'
  119. },
  120. {
  121. title: '操作',
  122. dataIndex: 'caozuo',
  123. key: 'caozuo',
  124. render: (text, recard) => {
  125. return (
  126. <div className="btnRight">
  127. <Button
  128. type="danger"
  129. onClick={(e) => {
  130. e.stopPropagation();
  131. this.delectRow(recard);
  132. }}
  133. >
  134. 删除
  135. </Button>
  136. </div>
  137. );
  138. }
  139. }
  140. ]
  141. };
  142. }
  143. //删除
  144. delectRow(recard) {
  145. $.ajax({
  146. method: "get",
  147. dataType: "json",
  148. crossDomain: false,
  149. url: globalConfig.context + "/open/api/delectDemand",
  150. data: {
  151. id:recard.id
  152. },
  153. success: function (data) {
  154. if (!data.error.length) {
  155. message.success('删除成功!');
  156. this.setState({
  157. loading: false,
  158. });
  159. this.loadData();
  160. } else {
  161. message.warning(data.error[0].message);
  162. };
  163. }.bind(this),
  164. }).always(function () {
  165. this.setState({
  166. loading: false
  167. });
  168. }.bind(this));
  169. }
  170. details(recard){
  171. this.state({
  172. loading:true
  173. })
  174. }
  175. add() {
  176. this.setState({
  177. id:"",
  178. uid: '',
  179. visible: true,
  180. addState: true,
  181. name: '',
  182. introduce: '',
  183. industry: '',
  184. summary: [],
  185. ownerName: '',
  186. reserveButtMode: '',
  187. patentNumber: '',
  188. transferPrice: '',
  189. telephone: '',
  190. cname: ''
  191. });
  192. }
  193. search() {
  194. this.loadData(1);
  195. }
  196. reset() {
  197. this.state.name = '';
  198. this.state.reserveButtUnit = '';
  199. this.loadData(1);
  200. }
  201. tableRowClick(record, index) {
  202. this.setState({
  203. visible: true,
  204. addState: false,
  205. id:record.id,
  206. });
  207. $.ajax({
  208. method: "get",
  209. dataType: "json",
  210. crossDomain: false,
  211. url: globalConfig.context + "/open/api/demandDetails",
  212. data: {
  213. id: record.id,//需求名称
  214. }
  215. }).done(function (data) {
  216. if (!data.error.length) {
  217. console.log(data.data);
  218. let thisData=data.data;
  219. let ProvinceCityArr = [];
  220. let ProvinceS =thisData.province? parseInt(thisData.province):""; //省
  221. let citys = thisData.city?parseInt(thisData.city):"";//市
  222. ProvinceCityArr.push(ProvinceS, citys);
  223. this.setState({
  224. id:thisData.id,
  225. name: thisData.name,//需求名称
  226. industry:(thisData.industry||thisData.industry==0)?thisData.industry.toString():undefined,//行业
  227. investmentCost: thisData.investmentCost,//经费投入
  228. reserveButtUnit: thisData.reserveButtUnit,//拟对接单位
  229. reserveButtMode: (thisData.reserveButtMode||thisData.reserveButtMode==0)?thisData.reserveButtMode.toString():undefined,//拟对接方式
  230. reserveSolveMode:(thisData.reserveSolveMode||thisData.reserveSolveMode==0)?thisData.reserveSolveMode.toString():undefined ,//拟解决方式
  231. publisherName: thisData.publisherName,//联系人
  232. telephone: thisData.telephone,//联系方式
  233. summary: thisData.summary?thisData.summary.split(","):[],//需求项目概况this.state.shehui?this.state.shehui.join(","):undefined
  234. introduce: thisData.introduce,//需求内容
  235. Pname: thisData.pname,//企业名称
  236. nature: thisData.nature,//企业特质
  237. feature: thisData.feature,//企业特征
  238. ProvinceCity:ProvinceCityArr[0]!=null?ProvinceCityArr:undefined,//地区
  239. zipCode: thisData.zipCode,//邮政编码
  240. legalPerson: thisData.legalPerson,//法人名称
  241. website: thisData.website,//企业网址
  242. email: thisData.email,//企业邮箱
  243. pintroduce:thisData.pintroduce,//企业简介
  244. });
  245. } else {
  246. message.warning(data.error[0].message);
  247. };
  248. this.setState({
  249. loading: false,
  250. });
  251. }.bind(this));
  252. }
  253. handleOk() {
  254. this.handleSubmit();
  255. }
  256. handleCancel() {
  257. this.resets();
  258. this.setState({
  259. visible: false
  260. });
  261. }
  262. handleSubmit() {
  263. this.setState({
  264. loading: true
  265. });
  266. console.log(this.state.addState);
  267. $.ajax({
  268. method: "POST",
  269. dataType: "json",
  270. crossDomain: false,
  271. url: globalConfig.context +( this.state.addState?"/open/api/addDemand":"/open/api/updateDemand"),
  272. data: {
  273. id:this.state.id,//需求ID
  274. name: this.state.name,//需求名称
  275. type:0,//需求类型
  276. industry:this.state.industry,//行业
  277. investmentCost: this.state.investmentCost,//经费投入
  278. reserveButtUnit: this.state.reserveButtUnit,//拟对接单位
  279. reserveButtMode: this.state.reserveButtMode,//拟对接方式
  280. reserveSolveMode: this.state.reserveSolveMode,//拟解决方式
  281. publisherName: this.state.publisherName,//联系人
  282. telephone: this.state.telephone,//联系方式
  283. summary: this.state.summary?this.state.summary.join(","):undefined,//需求项目概况this.state.shehui?this.state.shehui.join(","):undefined
  284. introduce: this.state.introduce,//需求内容
  285. pname: this.state.Pname,//企业名称
  286. nature: this.state.nature,//企业特质
  287. feature: this.state.feature,//企业特征
  288. province: this.state.ProvinceCity?this.state.ProvinceCity[0]:"",//省
  289. city: this.state.ProvinceCity?this.state.ProvinceCity[1]:"",//市
  290. zipCode: this.state.zipCode,//邮政编码
  291. legalPerson: this.state.legalPerson,//法人名称
  292. website: this.state.website,//企业网址
  293. email: this.state.email,//企业邮箱
  294. pintroduce: this.state.pintroduce,//企业简介
  295. }
  296. }).done(function (data) {
  297. if (!data.error.length) {
  298. message.success(this.state.addState?'新建成功!':"修改成功!");
  299. this.setState({
  300. visible: false,
  301. });
  302. this.loadData();
  303. } else {
  304. message.warning(data.error[0].message);
  305. };
  306. this.setState({
  307. loading: false,
  308. });
  309. }.bind(this));
  310. }
  311. resets(){
  312. this.state.name = '',//需求名称
  313. this.state.industry = undefined,//行业
  314. this.state.investmentCost = '',//经费投入
  315. this.state.reserveButtUnit = '',//拟对接单位
  316. this.state.reserveButtMode = '',//拟对接方式
  317. this.state.reserveSolveMode = '',//拟解决方式
  318. this.state.publisherName = '',//联系人
  319. this.state.telephone = '',//联系方式
  320. this.state.summary = '',
  321. this.state.introduce = '',//需求内容
  322. this.state.Pname = '',//企业名称
  323. this.state.nature = undefined,//企业特质
  324. this.state.feature = '',//企业特征
  325. this.state.ProvinceCity =undefined,//省
  326. this.state.zipCode = '',//邮政编码
  327. this.state.legalPerson = '',//法人名称
  328. this.state.website = '',//企业网址
  329. this.state.email = '',//企业邮箱
  330. this.state.pintroduce = ''//企业简介
  331. }
  332. componentWillMount() {
  333. this.loadData(1);
  334. }
  335. render() {
  336. const rowSelection = {
  337. selectedRowKeys: this.state.selectedRowKeys,
  338. onChange: (selectedRowKeys, selectedRows) => {
  339. this.setState({
  340. selectedRows: selectedRows.slice(-1),
  341. selectedRowKeys: selectedRowKeys.slice(-1)
  342. });
  343. }
  344. };
  345. const formItemLayout = {
  346. labelCol: { span: 6 },
  347. wrapperCol: { span: 12 }
  348. };
  349. return (
  350. <div className="user-content">
  351. <div className="content-title">
  352. <span className="title">四川科技需求</span>
  353. <div className="patent-addNew">
  354. <Button type="primary" onClick={this.add.bind(this)}>
  355. 发布需求<Icon type="plus" />
  356. </Button>
  357. </div>
  358. </div>
  359. <div className="user-search">
  360. <Input
  361. placeholder="需求名称"
  362. value={this.state.seachName}
  363. className="searchInp"
  364. onChange={(e) => {
  365. this.setState({ seachName: e.target.value });
  366. }}
  367. style={{ width: 120 }}
  368. />
  369. <Input
  370. placeholder="对接单位"
  371. value={this.state.seachReserveButtUnit}
  372. onChange={(e) => {
  373. this.setState({ seachReserveButtUnit: e.target.value });
  374. }}
  375. style={{ width: 120 }}
  376. />
  377. <Button type="primary" onClick={this.search.bind(this)} className="interval">
  378. 搜索
  379. </Button>
  380. <Button onClick={this.reset.bind(this)} className="interval">
  381. 重置
  382. </Button>
  383. </div>
  384. <div className="patent-table">
  385. <Spin spinning={this.state.loading}>
  386. <Table
  387. columns={this.state.columns}
  388. dataSource={this.state.dataSource}
  389. rowSelection={rowSelection}
  390. pagination={this.state.pagination}
  391. onRowClick={this.tableRowClick.bind(this)}
  392. />
  393. </Spin>
  394. </div>
  395. <Modal
  396. title={this.state.addState ? '新建需求' : '需求详情'}
  397. visible={this.state.visible}
  398. width="900px"
  399. onOk={this.handleOk.bind(this)}
  400. onCancel={this.handleCancel.bind(this)}
  401. okText="保存"
  402. cancelText="取消"
  403. >
  404. <Form layout="horizontal" id="demand-form">
  405. <Spin spinning={this.state.loading}>
  406. <div className="clearfix">
  407. <div className="clearfix">
  408. <FormItem
  409. className="half-item"
  410. {...formItemLayout}
  411. label={
  412. <span>
  413. <strong style={{ color: '#f00' }}>*</strong>需求名称
  414. </span>
  415. }
  416. >
  417. <Input
  418. placeholder="需求名称"
  419. value={this.state.name}
  420. onChange={(e) => {
  421. this.setState({ name: e.target.value });
  422. }}
  423. />
  424. </FormItem>
  425. <FormItem className="half-item" {...formItemLayout} label="行业领域">
  426. <Select
  427. value={this.state.industry}
  428. onChange={(e) => {
  429. this.setState({ industry: e });
  430. }}
  431. placeholder="请选择"
  432. >
  433. <Select.Option value="0">先进制造与自动化</Select.Option>
  434. <Select.Option value="1">电子信息技术</Select.Option>
  435. <Select.Option value="2">新材料技术</Select.Option>
  436. <Select.Option value="3">生物与新药</Select.Option>
  437. <Select.Option value="4">资源与新环境</Select.Option>
  438. <Select.Option value="5">新能源</Select.Option>
  439. </Select>
  440. </FormItem>
  441. <FormItem className="half-item" {...formItemLayout} label="经费投入计划">
  442. <Input
  443. placeholder="经费投入计划"
  444. value={this.state.investmentCost}
  445. onChange={(e) => {
  446. this.setState({ investmentCost: e.target.value });
  447. }}
  448. />
  449. </FormItem>
  450. <FormItem className="half-item" {...formItemLayout} label="拟对接单位">
  451. <Input
  452. placeholder="拟对接单位"
  453. value={this.state.reserveButtUnit}
  454. onChange={(e) => {
  455. this.setState({ reserveButtUnit: e.target.value });
  456. }}
  457. />
  458. </FormItem>
  459. <FormItem className="half-item" {...formItemLayout} label="拟对接方式">
  460. <Select
  461. value={this.state.reserveButtMode}
  462. onChange={(e) => {
  463. this.setState({ reserveButtMode: e });
  464. }}
  465. placeholder="请选择对接方式"
  466. >
  467. <Select.Option value="0">直接对接</Select.Option>
  468. <Select.Option value="1">技术合作</Select.Option>
  469. </Select>
  470. </FormItem>
  471. <FormItem className="half-item" {...formItemLayout} label="拟合作方式">
  472. <Select
  473. value={this.state.reserveSolveMode}
  474. onChange={(e) => {
  475. this.setState({ reserveSolveMode: e });
  476. }}
  477. placeholder="请选择解决方式"
  478. >
  479. <Select.Option value="0">技术转让</Select.Option>
  480. <Select.Option value="1">技术入股</Select.Option>
  481. <Select.Option value="2">合作实施</Select.Option>
  482. <Select.Option value="3">委托开发</Select.Option>
  483. </Select>
  484. </FormItem>
  485. <FormItem className="half-item" {...formItemLayout} label="项目负责人">
  486. <Input
  487. placeholder="项目负责人"
  488. value={this.state.publisherName}
  489. onChange={(e) => {
  490. this.setState({ publisherName: e.target.value });
  491. }}
  492. />
  493. </FormItem>
  494. <FormItem className="half-item" {...formItemLayout} label="联系电话">
  495. <Input
  496. placeholder="联系电话"
  497. value={this.state.telephone}
  498. onChange={(e) => {
  499. this.setState({ telephone: e.target.value });
  500. }}
  501. />
  502. </FormItem>
  503. </div>
  504. <FormItem
  505. labelCol={{ span: 3 }}
  506. wrapperCol={{ span: 18 }}
  507. label="需求项目概况"
  508. >
  509. <CheckboxGroup options={demandProfile} value={this.state.summary} onChange={(e)=>{this.setState({summary:e})}} />
  510. </FormItem>
  511. <div className="clearfix">
  512. <FormItem
  513. labelCol={{ span: 3 }}
  514. wrapperCol={{ span: 18 }}
  515. label={
  516. <span>
  517. <strong style={{ color: '#f00' }}>*</strong>需求内容
  518. </span>
  519. }
  520. style={{ margin: '10px 0px' }}
  521. >
  522. <TextArea
  523. autosize={{ minRows: 4, maxRows: 10 }}
  524. placeholder="输入需求内容"
  525. value={this.state.introduce}
  526. onChange={(e) => {
  527. this.setState({ introduce: e.target.value });
  528. }}
  529. />
  530. </FormItem>
  531. </div>
  532. <Row>
  533. <Col span={8} style={{ fontSize: 18 }}>
  534. 技术成果企业情况
  535. </Col>
  536. </Row>
  537. <div className="clearfix">
  538. <FormItem
  539. className="half-item"
  540. {...formItemLayout}
  541. label={
  542. <span>
  543. <strong style={{ color: '#f00' }}>*</strong>企业名称
  544. </span>
  545. }
  546. >
  547. <Input
  548. placeholder="企业名称"
  549. value={this.state.Pname}
  550. onChange={(e) => {
  551. this.setState({ Pname: e.target.value });
  552. }}
  553. />
  554. </FormItem>
  555. <FormItem className="half-item" {...formItemLayout} label="单位性质">
  556. <Select
  557. value={this.state.nature}
  558. onChange={(e) => {
  559. this.setState({ nature: e });
  560. }}
  561. placeholder="请选择单位性质"
  562. >
  563. <Select.Option value="1">国家行政企业</Select.Option>
  564. <Select.Option value="2">公私合作企业</Select.Option>
  565. <Select.Option value="3">中外合资企业</Select.Option>
  566. <Select.Option value="4">社会组织机构</Select.Option>
  567. <Select.Option value="5">国际组织机构</Select.Option>
  568. <Select.Option value="6">外资企业</Select.Option>
  569. <Select.Option value="7">私营企业</Select.Option>
  570. <Select.Option value="8">集体企业</Select.Option>
  571. <Select.Option value="9">国防军事企业</Select.Option>
  572. </Select>
  573. </FormItem>
  574. <FormItem className="half-item" {...formItemLayout} label="企业特征">
  575. <Input
  576. placeholder="企业特征"
  577. value={this.state.feature}
  578. onChange={(e) => {
  579. this.setState({ feature: e.target.value });
  580. }}
  581. />
  582. </FormItem>
  583. <FormItem className="half-item"
  584. {...formItemLayout}
  585. label="企业所在地"
  586. >
  587. <Cascader options={citySelect()} value={this.state.ProvinceCity} placeholder="选择城市"
  588. onChange={(e,pre) => { this.setState({ ProvinceCity: e }) }} />
  589. </FormItem>
  590. <FormItem className="half-item" {...formItemLayout} label="邮政编码">
  591. <Input
  592. placeholder="邮政编码"
  593. value={this.state.zipCode}
  594. onChange={(e) => {
  595. this.setState({ zipCode: e.target.value });
  596. }}
  597. />
  598. </FormItem>
  599. <FormItem className="half-item" {...formItemLayout} label="法定代表人">
  600. <Input
  601. placeholder="法定代表人"
  602. value={this.state.legalPerson}
  603. onChange={(e) => {
  604. this.setState({ legalPerson: e.target.value });
  605. }}
  606. />
  607. </FormItem>
  608. <FormItem className="half-item" {...formItemLayout} label="企业网址">
  609. <Input
  610. placeholder="企业网址"
  611. value={this.state.website}
  612. onChange={(e) => {
  613. this.setState({ website: e.target.value });
  614. }}
  615. />
  616. </FormItem>
  617. <FormItem className="half-item" {...formItemLayout} label="E-Mail">
  618. <Input
  619. placeholder="E-Mail"
  620. value={this.state.email}
  621. onChange={(e) => {
  622. this.setState({ email: e.target.value });
  623. }}
  624. />
  625. </FormItem>
  626. </div>
  627. <div className="clearfix">
  628. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 19 }} label="企业简介">
  629. <Input type="textarea" rows={4} placeholder="企业简介" value={this.state.pintroduce}
  630. onChange={(e) => { this.setState({ pintroduce: e.target.value }) }} style={{width:'95%'}}/>
  631. </FormItem>
  632. </div>
  633. <div className="clearfix">
  634. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 19 }} label="二维码">
  635. <img src="http://localhost:8080/open/achievementDetails?id=4c3f363e-fc5f-42b2-b7b8-71fa8659b468" style={{width:"100px",height:"100px"}}/>
  636. </FormItem>
  637. </div>
  638. </div>
  639. </Spin>
  640. </Form>
  641. </Modal>
  642. </div>
  643. );
  644. }
  645. }
  646. export default Achievement;