unit.jsx 18 KB

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