unit.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708
  1. /*
  2. @author:李霆
  3. @update:2018/05/29
  4. @descript:复制粘贴,拿起来就是干!!
  5. */
  6. import React from 'react';
  7. import {
  8. Radio,
  9. Icon,
  10. Button,
  11. Input,
  12. Select,
  13. Spin,
  14. message,
  15. DatePicker,
  16. Modal,
  17. Upload,
  18. Form,
  19. Row,
  20. Col,
  21. InputNumber
  22. } from 'antd';
  23. import $ from 'jquery/src/ajax';
  24. import './unit.less';
  25. import {
  26. socialAttribute,
  27. industry,
  28. } from '@/dataDic.js';
  29. import {
  30. splitUrl,
  31. } from '@/tools.js';
  32. const FormItem = Form.Item;
  33. //图片组件
  34. const PicturesWall = React.createClass({
  35. getInitialState() {
  36. return {
  37. previewVisible: false,
  38. previewImage: '',
  39. fileList: []
  40. };
  41. },
  42. handleCancel() {
  43. this.setState({
  44. previewVisible: false
  45. });
  46. },
  47. handlePreview(file) {
  48. this.setState({
  49. previewImage: file.url || file.thumbUrl,
  50. previewVisible: true
  51. });
  52. },
  53. handleChange(info) {
  54. let fileList = info.fileList;
  55. this.setState({
  56. fileList
  57. });
  58. this.props.fileList(fileList);
  59. },
  60. componentWillReceiveProps(nextProps) {
  61. this.state.fileList = nextProps.pictureUrl;
  62. },
  63. render() {
  64. const { previewVisible, previewImage, fileList } = this.state;
  65. const uploadButton = (
  66. <div>
  67. <Icon type="plus" />
  68. <div className="ant-upload-text">点击上传</div>
  69. </div>
  70. );
  71. return (
  72. <div style={{ display: 'inline-block' }}>
  73. <Upload
  74. action={globalConfig.context + '/api/user/uploadPicture'}
  75. data={{ sign: 'user_picture' }}
  76. listType="picture-card"
  77. fileList={fileList}
  78. onPreview={this.handlePreview}
  79. onChange={this.handleChange}
  80. >
  81. {fileList.length >= 1 ? null : uploadButton}
  82. </Upload>
  83. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  84. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  85. </Modal>
  86. </div>
  87. );
  88. }
  89. });
  90. const PicturesWallMore = React.createClass({
  91. getInitialState() {
  92. return {
  93. previewVisible: false,
  94. previewImage: '',
  95. fileList: []
  96. };
  97. },
  98. handleCancel() {
  99. this.setState({
  100. previewVisible: false
  101. });
  102. },
  103. handlePreview(file) {
  104. this.setState({
  105. previewImage: file.url || file.thumbUrl,
  106. previewVisible: true
  107. });
  108. },
  109. handleChange(info) {
  110. let fileList = info.fileList;
  111. this.setState({
  112. fileList
  113. });
  114. this.props.fileList(fileList);
  115. },
  116. componentWillReceiveProps(nextProps) {
  117. this.state.fileList = nextProps.pictureUrl;
  118. },
  119. render() {
  120. const { previewVisible, previewImage, fileList } = this.state;
  121. const uploadButton = (
  122. <div>
  123. <Icon type="plus" />
  124. <div className="ant-upload-text">点击上传</div>
  125. </div>
  126. );
  127. return (
  128. <div style={{ display: 'inline-block' }}>
  129. <Upload
  130. action={globalConfig.context + '/api/user/uploadHonerPicture'}
  131. data={{ sign: 'honor_picture' }}
  132. listType="picture-card"
  133. fileList={fileList}
  134. onPreview={this.handlePreview}
  135. onChange={this.handleChange}
  136. >
  137. {fileList.length >= 8 ? null : uploadButton}
  138. </Upload>
  139. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  140. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  141. </Modal>
  142. </div>
  143. );
  144. }
  145. });
  146. const Unit = React.createClass({
  147. getInitialState() {
  148. return {
  149. loading: false,
  150. orgCodeUrl: [],
  151. companyLogoUrl: [],
  152. ProvinceCity:[],
  153. qualiUrl:[]
  154. };
  155. },
  156. loadInformation(record) {
  157. this.setState({
  158. loading:true
  159. })
  160. $.ajax({
  161. method: 'get',
  162. dataType: 'json',
  163. url: globalConfig.context + '/api/user/getOrganizationDetail',
  164. success: function(data) {
  165. let thisData = data.data;
  166. if (!thisData) {
  167. if (data.error && data.error.length) {
  168. message.warning(data.error[0].message);
  169. }
  170. thisData = {};
  171. }
  172. // let ProvinceCityArr = [];
  173. // let ProvinceS = thisData.locationProvince; //getprovince
  174. // let citys = thisData.locationCity;
  175. // let Areas = thisData.locationArea;
  176. // ProvinceCityArr.push(ProvinceS, citys, Areas);
  177. this.setState({
  178. InformationId: thisData.id,
  179. InformationUid: thisData.uid,
  180. identifyName: thisData.identifyName,
  181. listed: thisData.listed,
  182. highTechZone: thisData.highTechZone,
  183. orgCodeUrl: thisData.orgCodeUrl
  184. ? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload')
  185. : [],
  186. companyLogoUrl: thisData.companyLogoUrl
  187. ? splitUrl(thisData.companyLogoUrl, ',', globalConfig.avatarHost + '/upload')
  188. : [],
  189. qualiUrl: thisData.honorPicture
  190. ? splitUrl(thisData.honorPicture, ',', globalConfig.avatarHost + '/upload')
  191. : [],
  192. dataInformation: thisData,
  193. //ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
  194. industry: String(thisData.industry) == 'null' ? undefined : String(thisData.industry),
  195. societyTag: thisData.societyTag || undefined,
  196. introduction: thisData.introduction,
  197. postalAddress: thisData.postalAddress,
  198. fixedTel: thisData.fixedTel,
  199. registeredCapital: thisData.registeredCapital,
  200. enterpriseScale: thisData.enterpriseScale,
  201. legalPerson: thisData.legalPerson,
  202. legalPersonIdCard: thisData.legalPersonIdCard,
  203. legalPersonTel: thisData.legalPersonTel,
  204. legalPersonEmail: thisData.legalPersonEmail,
  205. businessScope: thisData.businessScope,
  206. orgCode: thisData.orgCode,
  207. type:thisData.type,
  208. authentication:thisData.authentication
  209. });
  210. }.bind(this)
  211. }).always(
  212. function() {
  213. this.setState({
  214. loading: false
  215. });
  216. }.bind(this)
  217. );
  218. },
  219. //图片
  220. getOrgCodeUrl(e) {
  221. this.setState({
  222. orgCodeUrl: e
  223. });
  224. },
  225. getCompanyLogoUrl(e) {
  226. this.setState({
  227. companyLogoUrl: e
  228. });
  229. },
  230. getQualiUrl(e) {
  231. this.setState({
  232. qualiUrl: e
  233. });
  234. },
  235. //基本信息提交
  236. newSubmit(e) {
  237. this.setState({
  238. selectedRowKeys: []
  239. });
  240. let theorgCodeUrl = [];
  241. if (this.state.orgCodeUrl.length) {
  242. let picArr = [];
  243. this.state.orgCodeUrl.map(function(item) {
  244. if (item.response && item.response.data && item.response.data.length) {
  245. picArr.push(item.response.data);
  246. }
  247. });
  248. theorgCodeUrl = picArr.join(',');
  249. }
  250. let thecompanyLogoUrl = [];
  251. if (this.state.companyLogoUrl.length) {
  252. let picArr = [];
  253. this.state.companyLogoUrl.map(function(item) {
  254. if (item.response && item.response.data && item.response.data.length) {
  255. picArr.push(item.response.data);
  256. }
  257. });
  258. thecompanyLogoUrl = picArr.join(',');
  259. }
  260. let thequaliUrl = [];
  261. if (this.state.qualiUrl.length) {
  262. let picArr = [];
  263. this.state.qualiUrl.map(function(item) {
  264. if (item.response && item.response.data && item.response.data.length) {
  265. picArr.push(item.response.data);
  266. }
  267. });
  268. thequaliUrl = picArr.join(',');
  269. }
  270. this.setState({
  271. loading: true
  272. });
  273. $.ajax({
  274. method: 'post',
  275. dataType: 'json',
  276. url: globalConfig.context + '/api/user/updateOrganizationDetail',
  277. data: {
  278. id: this.state.InformationId,
  279. uid: this.state.InformationUid,
  280. societyTag: this.state.societyTag,
  281. identifyName: this.state.identifyName, //单位名称
  282. introduction: this.state.introduction,
  283. unitName: this.state.unitName,
  284. industry: this.state.industry,
  285. postalAddress: this.state.postalAddress,
  286. fixedTel: this.state.fixedTel,
  287. contactsFax: this.state.contactsFax,
  288. registeredCapital: this.state.registeredCapital ? this.state.registeredCapital : 0,
  289. enterpriseScale: this.state.enterpriseScale,
  290. legalPerson: this.state.legalPerson,
  291. legalPersonIdCard: this.state.legalPersonIdCard,
  292. legalPersonTel: this.state.legalPersonTel,
  293. legalPersonEmail: this.state.legalPersonEmail,
  294. highTechZone: this.state.highTechZone,
  295. listed: this.state.listed,
  296. contacts: this.state.contacts,
  297. orgCode: this.state.orgCode,
  298. businessScope: this.state.businessScope,
  299. introduction: this.state.introduction,
  300. companyLogoUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '',
  301. honorPicture: thequaliUrl.length != 0 ? thequaliUrl : '',
  302. orgCodeUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '',
  303. auditStatus: this.state.auditStatus,
  304. authentication:this.state.authentication,
  305. type:this.state.type
  306. }
  307. }).done(
  308. function(data) {
  309. this.setState({
  310. loading: false
  311. });
  312. if (!data.error.length) {
  313. if(this.state.type!='1'){
  314. message.success('企业认证成功,1s后回到首页.')
  315. setTimeout(()=>{
  316. window.location.href = globalConfig.context + "/user/account/index.html";
  317. },1000)
  318. }else{
  319. message.success('保存成功');
  320. this.loadInformation();
  321. }
  322. } else {
  323. message.warning(data.error[0].message);
  324. }
  325. }.bind(this)
  326. );
  327. },
  328. subFun(){
  329. if(this.state.type=='0'||this.state.type=='1'){
  330. if(!this.state.identifyName){
  331. message.warning("请填写单位名称")
  332. return;
  333. }
  334. if (!this.state.industry) {
  335. message.warning('请选择行业!');
  336. return false;
  337. }
  338. if (!this.state.societyTag) {
  339. message.warning('请选择社会性质!');
  340. return false;
  341. }
  342. if (isNaN(this.state.registeredCapital)) {
  343. message.warning('注册资本只能输入数字!');
  344. return false;
  345. }
  346. this.newSubmit()
  347. }else{
  348. if(!this.state.identifyName){
  349. message.warning("请填写单位名称")
  350. return;
  351. }
  352. if (!this.state.industry) {
  353. message.warning('请选择行业!');
  354. return false;
  355. }
  356. if (!this.state.societyTag) {
  357. message.warning('请选择社会性质!');
  358. return false;
  359. }
  360. if (isNaN(this.state.registeredCapital)) {
  361. message.warning('注册资本只能输入数字!');
  362. return false;
  363. }
  364. this.setState({
  365. visible:true
  366. })
  367. }
  368. },
  369. handleOk(){
  370. this.newSubmit();
  371. this.setState({
  372. visible:false
  373. })
  374. },
  375. handleCancel(){
  376. this.setState({
  377. visible:false
  378. })
  379. },
  380. componentWillMount() {
  381. this.loadInformation();
  382. },
  383. componentWillReceiveProps(nextProps) {
  384. },
  385. render() {
  386. return (
  387. <div className="unit-wrap">
  388. <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form" style={{width:'80%'}}>
  389. <Spin spinning={this.state.loading}>
  390. <Row style={{ marginBottom: 20 }}>
  391. <Col offset={2} span={4}>
  392. <h4 style={{fontSize:20}}>企业资料</h4>
  393. </Col>
  394. </Row>
  395. <div className="clearfix" style={{ paddingLeft: '60px' }}>
  396. <FormItem
  397. className="half-item"
  398. labelCol={{ span: 4 }}
  399. wrapperCol={{ span: 18 }}
  400. label={<span><span className="color-red"> * </span>企业名称</span>}
  401. >
  402. <Input
  403. maxLength={128}
  404. value={this.state.identifyName}
  405. onChange={(e) => {
  406. this.setState({ identifyName: e.target.value });
  407. }}
  408. placeholder="请输入企业名称"
  409. />
  410. </FormItem>
  411. <FormItem
  412. className="half-item"
  413. labelCol={{ span: 4 }}
  414. wrapperCol={{ span: 18 }}
  415. label="企业规模"
  416. >
  417. <InputNumber
  418. placeholder="企业规模"
  419. value={this.state.enterpriseScale}
  420. InputNumber min={0} max={999999}
  421. style={{width:120,marginRight:10}}
  422. onChange={(e) => {
  423. this.setState({ enterpriseScale: e });
  424. }}
  425. />
  426. <span>人</span>
  427. </FormItem>
  428. </div>
  429. <div className="clearfix" style={{ paddingLeft: '60px' }}>
  430. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label={<span><span className="color-red"> * </span>行业</span>}>
  431. <Select
  432. placeholder="选择行业"
  433. value={this.state.industry}
  434. onChange={(e) => {
  435. this.setState({ industry: e });
  436. }}
  437. >
  438. {industry.map(function(item) {
  439. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  440. })}
  441. </Select>
  442. </FormItem>
  443. <FormItem
  444. className="half-item"
  445. labelCol={{ span: 4 }}
  446. wrapperCol={{ span: 18 }}
  447. label={<span><span className="color-red"> * </span>社会属性</span>}
  448. >
  449. <Select
  450. placeholder="客户社会属性"
  451. value={this.state.societyTag}
  452. onChange={(e) => {
  453. this.setState({ societyTag: e });
  454. }}
  455. >
  456. {socialAttribute.map(function(item) {
  457. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  458. })}
  459. </Select>
  460. </FormItem>
  461. <FormItem
  462. className="half-item"
  463. labelCol={{ span: 4 }}
  464. wrapperCol={{ span: 18 }}
  465. label="通信地址"
  466. >
  467. <Input
  468. maxLength={255}
  469. placeholder="客户通信地址"
  470. value={this.state.postalAddress}
  471. onChange={(e) => {
  472. this.setState({ postalAddress: e.target.value });
  473. }}
  474. />
  475. </FormItem>
  476. <FormItem
  477. className="half-item"
  478. labelCol={{ span: 4 }}
  479. wrapperCol={{ span: 18 }}
  480. label="固定电话"
  481. >
  482. <Input
  483. maxLength={13}
  484. placeholder="客户固定电话"
  485. value={this.state.fixedTel}
  486. onChange={(e) => {
  487. this.setState({ fixedTel: e.target.value });
  488. }}
  489. />
  490. </FormItem>
  491. <FormItem
  492. className="half-item"
  493. labelCol={{ span: 4 }}
  494. wrapperCol={{ span: 18 }}
  495. label="注册资本"
  496. >
  497. <Input
  498. placeholder="注册资本"
  499. value={this.state.registeredCapital}
  500. maxLength="6"
  501. onChange={(e) => {
  502. this.setState({ registeredCapital: e.target.value });
  503. }}
  504. />
  505. </FormItem>
  506. <FormItem
  507. className="half-item"
  508. labelCol={{ span: 4 }}
  509. wrapperCol={{ span: 18 }}
  510. label="法人名称"
  511. >
  512. <Input
  513. placeholder="法人名称"
  514. value={this.state.legalPerson}
  515. onChange={(e) => {
  516. this.setState({ legalPerson: e.target.value });
  517. }}
  518. />
  519. </FormItem>
  520. <FormItem
  521. className="half-item"
  522. labelCol={{ span: 4 }}
  523. wrapperCol={{ span: 18 }}
  524. label="法人身份证号码"
  525. >
  526. <Input
  527. placeholder="法人身份证号码"
  528. value={this.state.legalPersonIdCard}
  529. onChange={(e) => {
  530. this.setState({ legalPersonIdCard: e.target.value });
  531. }}
  532. />
  533. </FormItem>
  534. <FormItem
  535. className="half-item"
  536. labelCol={{ span: 4 }}
  537. wrapperCol={{ span: 18 }}
  538. label="法人电话"
  539. >
  540. <Input
  541. placeholder="法人电话"
  542. value={this.state.legalPersonTel}
  543. onChange={(e) => {
  544. this.setState({ legalPersonTel: e.target.value });
  545. }}
  546. />
  547. </FormItem>
  548. <FormItem
  549. className="half-item"
  550. labelCol={{ span: 4 }}
  551. wrapperCol={{ span: 18 }}
  552. label="法人电子邮箱"
  553. >
  554. <Input
  555. placeholder="法人电子邮箱"
  556. value={this.state.legalPersonEmail}
  557. onChange={(e) => {
  558. this.setState({ legalPersonEmail: e.target.value });
  559. }}
  560. />
  561. </FormItem>
  562. <FormItem
  563. className="half-item"
  564. labelCol={{ span: 4 }}
  565. wrapperCol={{ span: 18 }}
  566. label="机构代码"
  567. >
  568. <Input
  569. placeholder="社会同意机构代码"
  570. value={this.state.orgCode}
  571. onChange={(e) => {
  572. this.setState({ orgCode: e.target.value });
  573. }}
  574. />
  575. </FormItem>
  576. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="高新">
  577. <Radio.Group
  578. value={this.state.highTechZone}
  579. onChange={(e) => {
  580. this.setState({ highTechZone: e.target.value });
  581. }}
  582. >
  583. <Radio value={0}>是</Radio>
  584. <Radio value={1}>否 </Radio>
  585. </Radio.Group>
  586. </FormItem>
  587. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="上市">
  588. <Radio.Group
  589. value={this.state.listed}
  590. onChange={(e) => {
  591. this.setState({ listed: e.target.value });
  592. }}
  593. >
  594. <Radio value={0}>是</Radio>
  595. <Radio value={1}>否 </Radio>
  596. </Radio.Group>
  597. </FormItem>
  598. <div className="clearfix pictures">
  599. <FormItem
  600. className="half-item"
  601. labelCol={{ span: 4 }}
  602. wrapperCol={{ span: 18 }}
  603. style={{ marginTop: 15 }}
  604. label="机构证(PIC)"
  605. >
  606. <PicturesWall
  607. pictureSign="PIC"
  608. fileList={this.getOrgCodeUrl}
  609. pictureUrl={this.state.orgCodeUrl}
  610. />
  611. <p>图片建议:图片要清晰。</p>
  612. </FormItem>
  613. <FormItem
  614. className="half-item"
  615. labelCol={{ span: 4 }}
  616. wrapperCol={{ span: 18 }}
  617. label="企业logo"
  618. >
  619. <PicturesWall
  620. pictureSign="logo"
  621. fileList={this.getCompanyLogoUrl}
  622. pictureUrl={this.state.companyLogoUrl}
  623. />
  624. <p>图片建议:图片要清晰。</p>
  625. </FormItem>
  626. </div>
  627. <div className="clearfix">
  628. <FormItem
  629. className="half-item"
  630. labelCol={{ span: 4 }}
  631. wrapperCol={{ span: 18 }}
  632. label="业务范围"
  633. >
  634. <Input
  635. type="textarea"
  636. rows={4}
  637. value={this.state.businessScope}
  638. placeholder="请输入业务范围"
  639. onChange={(e) => {
  640. this.setState({ businessScope: e.target.value });
  641. }}
  642. />
  643. </FormItem>
  644. <FormItem
  645. className="half-item"
  646. labelCol={{ span: 4 }}
  647. wrapperCol={{ span: 18 }}
  648. label="企业简介"
  649. >
  650. <Input
  651. type="textarea"
  652. rows={4}
  653. value={this.state.introduction}
  654. placeholder="请输入企业简介"
  655. onChange={(e) => {
  656. this.setState({ introduction: e.target.value });
  657. }}
  658. />
  659. </FormItem>
  660. </div>
  661. <div className="clearfix">
  662. <FormItem
  663. labelCol={{ span: 2 }}
  664. wrapperCol={{ span: 18 }}
  665. style={{ marginTop: 15 }}
  666. label="荣誉资质"
  667. >
  668. <PicturesWallMore
  669. pictureSign="PIC"
  670. fileList={this.getQualiUrl}
  671. pictureUrl={this.state.qualiUrl}
  672. />
  673. <p>图片建议:图片要清晰。</p>
  674. </FormItem>
  675. </div>
  676. <Row style={{ marginBottom: 20 ,marginTop:10}}>
  677. <Col offset={2} span={4}>
  678. <Button size="large" className="set-submit" type="primary" onClick={this.subFun} >
  679. 保存
  680. </Button>
  681. </Col>
  682. </Row>
  683. </div>
  684. </Spin>
  685. </Form>
  686. <Modal
  687. visible={this.state.visible}
  688. onOk={this.handleOk}
  689. onCancel={this.handleCancel}
  690. >
  691. <p>是否申请企业用户认证?</p>
  692. </Modal>
  693. </div>
  694. );
  695. }
  696. });
  697. export default Unit;