unit.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  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. };
  134. },
  135. loadInformation(record) {
  136. this.setState({
  137. loading:true
  138. })
  139. $.ajax({
  140. method: 'get',
  141. dataType: 'json',
  142. url: globalConfig.context + '/api/admin/customer/findOrganizationCustomerDetail',
  143. data: {
  144. uid: record
  145. },
  146. success: function(data) {
  147. let thisData = data.data;
  148. if (!thisData) {
  149. if (data.error && data.error.length) {
  150. message.warning(data.error[0].message);
  151. }
  152. thisData = {};
  153. }
  154. let ProvinceCityArr = [];
  155. let ProvinceS = thisData.locationProvince; //getprovince
  156. let citys = thisData.locationCity;
  157. let Areas = thisData.locationArea;
  158. ProvinceCityArr.push(ProvinceS, citys, Areas);
  159. this.setState({
  160. InformationId: thisData.id,
  161. InformationUid: thisData.uid,
  162. identifyName: thisData.identifyName,
  163. listed: thisData.listed,
  164. highTechZone: thisData.highTechZone,
  165. orgCodeUrl: thisData.orgCodeUrl
  166. ? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload')
  167. : [],
  168. companyLogoUrl: thisData.companyLogoUrl
  169. ? splitUrl(thisData.companyLogoUrl, ',', globalConfig.avatarHost + '/upload')
  170. : [],
  171. dataInformation: thisData,
  172. ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
  173. contacts: thisData.contacts,
  174. contactMobile: thisData.contactMobile,
  175. industry: String(thisData.industry) == 'null' ? undefined : String(thisData.industry),
  176. international: thisData.international,
  177. societyTag: thisData.societyTag || undefined,
  178. introduction: thisData.introduction,
  179. postalAddress: thisData.postalAddress,
  180. contactsFixedTel: thisData.contactsFixedTel,
  181. contactsFax: thisData.contactsFax,
  182. registeredCapital: thisData.registeredCapital,
  183. enterpriseScale: thisData.enterpriseScale,
  184. legalPerson: thisData.legalPerson,
  185. legalPersonIdCard: thisData.legalPersonIdCard,
  186. legalPersonTel: thisData.legalPersonTel,
  187. legalPersonEmail: thisData.legalPersonEmail,
  188. businessScope: thisData.businessScope,
  189. orgCode: thisData.orgCode,
  190. investment: thisData.investment,
  191. auditStatus: thisData.auditStatus ? String(thisData.auditStatus) : undefined,
  192. businessAudit: thisData.businessAudit,
  193. listed: thisData.listed,
  194. highTechZone: thisData.highTechZone
  195. });
  196. }.bind(this)
  197. }).always(
  198. function() {
  199. this.setState({
  200. loading: false
  201. });
  202. }.bind(this)
  203. );
  204. },
  205. //图片
  206. getOrgCodeUrl(e) {
  207. this.setState({
  208. orgCodeUrl: e
  209. });
  210. },
  211. getCompanyLogoUrl(e) {
  212. this.setState({
  213. companyLogoUrl: e
  214. });
  215. },
  216. //基本信息提交
  217. newSubmit(e) {
  218. e.preventDefault();
  219. if(!this.state.identifyName){
  220. message.warning('请填写单位名称!');
  221. return;
  222. }
  223. if (!this.state.industry) {
  224. message.warning('请选择行业!');
  225. return false;
  226. }
  227. if (!this.state.societyTag) {
  228. message.warning('请选择社会性质!');
  229. return false;
  230. }
  231. if (!this.state.ProvinceCity[1]) {
  232. message.warning('请选择地区!');
  233. return false;
  234. }
  235. if (isNaN(this.state.registeredCapital)) {
  236. message.warning('注册资本只能输入数字!');
  237. return false;
  238. }
  239. if (isNaN(this.state.enterpriseScale)) {
  240. message.warning('单位规模只能输入数字!');
  241. return false;
  242. }
  243. this.setState({
  244. selectedRowKeys: []
  245. });
  246. let theorgCodeUrl = [];
  247. if (this.state.orgCodeUrl.length) {
  248. let picArr = [];
  249. this.state.orgCodeUrl.map(function(item) {
  250. if (item.response && item.response.data && item.response.data.length) {
  251. picArr.push(item.response.data);
  252. }
  253. });
  254. theorgCodeUrl = picArr.join(',');
  255. }
  256. let thecompanyLogoUrl = [];
  257. if (this.state.companyLogoUrl.length) {
  258. let picArr = [];
  259. this.state.companyLogoUrl.map(function(item) {
  260. if (item.response && item.response.data && item.response.data.length) {
  261. picArr.push(item.response.data);
  262. }
  263. });
  264. thecompanyLogoUrl = picArr.join(',');
  265. }
  266. this.setState({
  267. loading: true
  268. });
  269. $.ajax({
  270. method: 'post',
  271. dataType: 'json',
  272. url: globalConfig.context + '/api/admin/customer/updateOrganizationCustomer',
  273. data: {
  274. id: this.state.InformationId,
  275. uid: this.state.InformationUid,
  276. societyTag: this.state.societyTag,
  277. identifyName: this.state.identifyName, //单位名称
  278. introduction: this.state.introduction,
  279. unitName: this.state.unitName,
  280. industry: this.state.industry,
  281. locationProvince: this.state.ProvinceCity[0], //省-
  282. locationCity: this.state.ProvinceCity[1], //市
  283. locationArea: this.state.ProvinceCity[2], //区
  284. postalAddress: this.state.postalAddress,
  285. contactsFixedTel: this.state.contactsFixedTel,
  286. contactsFax: this.state.contactsFax,
  287. registeredCapital: this.state.registeredCapital ? this.state.registeredCapital : 0,
  288. enterpriseScale: this.state.enterpriseScale ? this.state.enterpriseScale : 0,
  289. legalPerson: this.state.legalPerson,
  290. legalPersonIdCard: this.state.legalPersonIdCard,
  291. legalPersonTel: this.state.legalPersonTel,
  292. legalPersonEmail: this.state.legalPersonEmail,
  293. highTechZone: this.state.highTechZone,
  294. listed: this.state.listed,
  295. contacts: this.state.contacts,
  296. contactMobile: this.state.contactMobile,
  297. international: this.state.international,
  298. orgCode: this.state.orgCode,
  299. businessScope: this.state.businessScope,
  300. introduction: this.state.introduction,
  301. companyLogoUrl: thecompanyLogoUrl != 0 ? thecompanyLogoUrl : '',
  302. orgCodeUrl: theorgCodeUrl != 0 ? theorgCodeUrl : '',
  303. businessAudit: this.state.businessAudit,
  304. auditStatus: this.state.auditStatus
  305. }
  306. }).done(
  307. function(data) {
  308. this.setState({
  309. loading: false
  310. });
  311. if (!data.error.length) {
  312. message.success('保存成功!');
  313. this.loadInformation()
  314. } else {
  315. message.warning(data.error[0].message);
  316. }
  317. }.bind(this)
  318. );
  319. },
  320. componentWillMount() {
  321. this.loadInformation();
  322. },
  323. componentWillReceiveProps(nextProps) {
  324. },
  325. render() {
  326. return (
  327. <div className="unit-wrap">
  328. <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form">
  329. <Spin spinning={this.state.loading}>
  330. <Row style={{ marginBottom: 20 }}>
  331. <Col offset={2} span={4}>
  332. <h4>单位资料</h4>
  333. </Col>
  334. </Row>
  335. <div className="clearfix" style={{ paddingLeft: '60px' }}>
  336. <FormItem
  337. className="half-item"
  338. labelCol={{ span: 4 }}
  339. wrapperCol={{ span: 18 }}
  340. label="单位名称"
  341. >
  342. <Input
  343. style={{width:'90%'}}
  344. value={this.state.identifyName}
  345. onChange={(e) => {
  346. this.setState({ identifyName: e.target.value });
  347. }}
  348. placeholder="请输入单位名称"
  349. />
  350. <span className="color-red"> * </span>
  351. </FormItem>
  352. </div>
  353. <div className="clearfix" style={{ paddingLeft: '60px' }}>
  354. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="行业">
  355. <Select
  356. placeholder="选择行业"
  357. value={this.state.industry}
  358. style={{width:'90%'}}
  359. onChange={(e) => {
  360. this.setState({ industry: e });
  361. }}
  362. >
  363. {industry.map(function(item) {
  364. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  365. })}
  366. </Select>
  367. <span className="color-red"> * </span>
  368. </FormItem>
  369. <FormItem
  370. className="half-item"
  371. labelCol={{ span: 4 }}
  372. wrapperCol={{ span: 18 }}
  373. label="社会属性"
  374. >
  375. <Select
  376. placeholder="客户社会属性(必填项)"
  377. value={this.state.societyTag}
  378. style={{width:'90%'}}
  379. onChange={(e) => {
  380. this.setState({ societyTag: e });
  381. }}
  382. >
  383. {socialAttribute.map(function(item) {
  384. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  385. })}
  386. </Select>
  387. <span className="color-red"> * </span>
  388. </FormItem>
  389. <FormItem
  390. className="half-item"
  391. labelCol={{ span: 4 }}
  392. wrapperCol={{ span: 18 }}
  393. label="省-市-区"
  394. >
  395. <Cascader
  396. options={areaSelect()}
  397. value={this.state.ProvinceCity}
  398. placeholder="选择城市"
  399. style={{width:'90%'}}
  400. onChange={(e, pre) => {
  401. this.setState({ ProvinceCity: e });
  402. }}
  403. />
  404. <span className="color-red"> * </span>
  405. </FormItem>
  406. <FormItem
  407. className="half-item"
  408. labelCol={{ span: 4 }}
  409. wrapperCol={{ span: 18 }}
  410. label="通信地址"
  411. >
  412. <Input
  413. placeholder="客户通信地址"
  414. value={this.state.postalAddress}
  415. onChange={(e) => {
  416. this.setState({ postalAddress: e.target.value });
  417. }}
  418. />
  419. </FormItem>
  420. <FormItem
  421. className="half-item"
  422. labelCol={{ span: 4 }}
  423. wrapperCol={{ span: 18 }}
  424. label="固定电话"
  425. >
  426. <Input
  427. placeholder="客户固定电话"
  428. value={this.state.contactsFixedTel}
  429. onChange={(e) => {
  430. this.setState({ contactsFixedTel: e.target.value });
  431. }}
  432. />
  433. </FormItem>
  434. <FormItem
  435. className="half-item"
  436. labelCol={{ span: 4 }}
  437. wrapperCol={{ span: 18 }}
  438. label="客户传真"
  439. >
  440. <Input
  441. placeholder="客户传真"
  442. value={this.state.contactsFax}
  443. onChange={(e) => {
  444. this.setState({ contactsFax: e.target.value });
  445. }}
  446. />
  447. </FormItem>
  448. <FormItem
  449. className="half-item"
  450. labelCol={{ span: 4 }}
  451. wrapperCol={{ span: 18 }}
  452. label="注册资本"
  453. >
  454. <Input
  455. placeholder="注册资本"
  456. value={this.state.registeredCapital}
  457. maxLength="6"
  458. onChange={(e) => {
  459. this.setState({ registeredCapital: e.target.value });
  460. }}
  461. />
  462. </FormItem>
  463. <FormItem
  464. className="half-item"
  465. labelCol={{ span: 4 }}
  466. wrapperCol={{ span: 18 }}
  467. label="单位规模"
  468. >
  469. <Input
  470. placeholder="单位规模"
  471. value={this.state.enterpriseScale}
  472. maxLength="1"
  473. onChange={(e) => {
  474. this.setState({ enterpriseScale: e.target.value });
  475. }}
  476. />
  477. </FormItem>
  478. <FormItem
  479. className="half-item"
  480. labelCol={{ span: 4 }}
  481. wrapperCol={{ span: 18 }}
  482. label="法人名称"
  483. >
  484. <Input
  485. placeholder="法人名称"
  486. value={this.state.legalPerson}
  487. onChange={(e) => {
  488. this.setState({ legalPerson: e.target.value });
  489. }}
  490. />
  491. </FormItem>
  492. <FormItem
  493. className="half-item"
  494. labelCol={{ span: 4 }}
  495. wrapperCol={{ span: 18 }}
  496. label="法人身份证号码"
  497. >
  498. <Input
  499. placeholder="法人身份证号码"
  500. value={this.state.legalPersonIdCard}
  501. onChange={(e) => {
  502. this.setState({ legalPersonIdCard: 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.legalPersonTel}
  515. onChange={(e) => {
  516. this.setState({ legalPersonTel: 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.legalPersonEmail}
  529. onChange={(e) => {
  530. this.setState({ legalPersonEmail: 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.orgCode}
  543. onChange={(e) => {
  544. this.setState({ orgCode: e.target.value });
  545. }}
  546. />
  547. </FormItem>
  548. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="高新">
  549. <Radio.Group
  550. value={this.state.highTechZone}
  551. onChange={(e) => {
  552. this.setState({ highTechZone: e.target.value });
  553. }}
  554. >
  555. <Radio value={0}>是</Radio>
  556. <Radio value={1}>否 </Radio>
  557. </Radio.Group>
  558. </FormItem>
  559. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="上市">
  560. <Radio.Group
  561. value={this.state.listed}
  562. onChange={(e) => {
  563. this.setState({ listed: e.target.value });
  564. }}
  565. >
  566. <Radio value={0}>是</Radio>
  567. <Radio value={1}>否 </Radio>
  568. </Radio.Group>
  569. </FormItem>
  570. <div className="clearfix pictures">
  571. <FormItem
  572. className="half-item"
  573. labelCol={{ span: 4 }}
  574. wrapperCol={{ span: 18 }}
  575. style={{ marginTop: 15 }}
  576. label="机构证(PIC)"
  577. >
  578. <PicturesWall
  579. pictureSign="PIC"
  580. fileList={this.getOrgCodeUrl}
  581. pictureUrl={this.state.orgCodeUrl}
  582. />
  583. <p>图片建议:图片要清晰。</p>
  584. </FormItem>
  585. <FormItem
  586. className="half-item"
  587. labelCol={{ span: 4 }}
  588. wrapperCol={{ span: 18 }}
  589. label="单位logo"
  590. >
  591. <PicturesWall
  592. pictureSign="logo"
  593. fileList={this.getCompanyLogoUrl}
  594. pictureUrl={this.state.companyLogoUrl}
  595. />
  596. <p>图片建议:图片要清晰。</p>
  597. </FormItem>
  598. </div>
  599. <div className="clearfix">
  600. <FormItem
  601. className="half-item"
  602. labelCol={{ span: 4 }}
  603. wrapperCol={{ span: 18 }}
  604. label="业务范围"
  605. >
  606. <Input
  607. type="textarea"
  608. rows={4}
  609. value={this.state.businessScope}
  610. placeholder="请输入业务范围"
  611. onChange={(e) => {
  612. this.setState({ businessScope: e.target.value });
  613. }}
  614. />
  615. </FormItem>
  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.introduction}
  626. placeholder="请输入单位简介"
  627. onChange={(e) => {
  628. this.setState({ introduction: e.target.value });
  629. }}
  630. />
  631. </FormItem>
  632. </div>
  633. <Row style={{ marginBottom: 20 ,marginTop:10}}>
  634. <Col offset={2} span={4}>
  635. <Button size="large" className="set-submit" type="primary" htmlType="submit">
  636. 保存
  637. </Button>
  638. </Col>
  639. </Row>
  640. </div>
  641. </Spin>
  642. </Form>
  643. </div>
  644. );
  645. }
  646. });
  647. export default Unit;