sichuan.jsx 22 KB

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