unit.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642
  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. });
  185. }.bind(this)
  186. }).always(
  187. function() {
  188. this.setState({
  189. loading: false
  190. });
  191. }.bind(this)
  192. );
  193. },
  194. //图片
  195. getOrgCodeUrl(e) {
  196. this.setState({
  197. orgCodeUrl: e
  198. });
  199. },
  200. getCompanyLogoUrl(e) {
  201. this.setState({
  202. companyLogoUrl: e
  203. });
  204. },
  205. //基本信息提交
  206. newSubmit(e) {
  207. e.preventDefault();
  208. if(!this.state.identifyName){
  209. message.warning('请填写单位名称!');
  210. return;
  211. }
  212. if (!this.state.industry) {
  213. message.warning('请选择行业!');
  214. return false;
  215. }
  216. if (!this.state.societyTag) {
  217. message.warning('请选择社会性质!');
  218. return false;
  219. }
  220. if (!this.state.ProvinceCity.length) {
  221. message.warning('请选择省-市-区!');
  222. return false;
  223. }
  224. if (isNaN(this.state.registeredCapital)) {
  225. message.warning('注册资本只能输入数字!');
  226. return false;
  227. }
  228. if (isNaN(this.state.enterpriseScale)) {
  229. message.warning('单位规模只能输入数字!');
  230. return false;
  231. }
  232. this.setState({
  233. selectedRowKeys: []
  234. });
  235. let theorgCodeUrl = [];
  236. if (this.state.orgCodeUrl.length) {
  237. let picArr = [];
  238. this.state.orgCodeUrl.map(function(item) {
  239. if (item.response && item.response.data && item.response.data.length) {
  240. picArr.push(item.response.data);
  241. }
  242. });
  243. theorgCodeUrl = picArr.join(',');
  244. }
  245. let thecompanyLogoUrl = [];
  246. if (this.state.companyLogoUrl.length) {
  247. let picArr = [];
  248. this.state.companyLogoUrl.map(function(item) {
  249. if (item.response && item.response.data && item.response.data.length) {
  250. picArr.push(item.response.data);
  251. }
  252. });
  253. thecompanyLogoUrl = picArr.join(',');
  254. }
  255. this.setState({
  256. loading: true
  257. });
  258. $.ajax({
  259. method: 'post',
  260. dataType: 'json',
  261. url: globalConfig.context + '/api/admin/customer/updateOrganizationCustomer',
  262. data: {
  263. id: this.state.InformationId,
  264. uid: this.state.InformationUid,
  265. societyTag: this.state.societyTag,
  266. identifyName: this.state.identifyName, //单位名称
  267. introduction: this.state.introduction,
  268. unitName: this.state.unitName,
  269. industry: this.state.industry,
  270. locationProvince: this.state.ProvinceCity[0], //省-
  271. locationCity: this.state.ProvinceCity[1], //市
  272. locationArea: this.state.ProvinceCity[2], //区
  273. postalAddress: this.state.postalAddress,
  274. fixedTel: this.state.fixedTel,
  275. contactsFax: this.state.contactsFax,
  276. registeredCapital: this.state.registeredCapital ? this.state.registeredCapital : 0,
  277. enterpriseScale: this.state.enterpriseScale ? this.state.enterpriseScale : 0,
  278. legalPerson: this.state.legalPerson,
  279. legalPersonIdCard: this.state.legalPersonIdCard,
  280. legalPersonTel: this.state.legalPersonTel,
  281. legalPersonEmail: this.state.legalPersonEmail,
  282. highTechZone: this.state.highTechZone,
  283. listed: this.state.listed,
  284. contacts: this.state.contacts,
  285. orgCode: this.state.orgCode,
  286. businessScope: this.state.businessScope,
  287. introduction: this.state.introduction,
  288. companyLogoUrl: thecompanyLogoUrl != 0 ? thecompanyLogoUrl : '',
  289. orgCodeUrl: theorgCodeUrl != 0 ? theorgCodeUrl : '',
  290. auditStatus: this.state.auditStatus
  291. }
  292. }).done(
  293. function(data) {
  294. this.setState({
  295. loading: false
  296. });
  297. if (!data.error.length) {
  298. message.success('保存成功!');
  299. this.loadInformation()
  300. } else {
  301. message.warning(data.error[0].message);
  302. }
  303. }.bind(this)
  304. );
  305. },
  306. componentWillMount() {
  307. this.loadInformation();
  308. },
  309. componentWillReceiveProps(nextProps) {
  310. },
  311. render() {
  312. return (
  313. <div className="unit-wrap">
  314. <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form">
  315. <Spin spinning={this.state.loading}>
  316. <Row style={{ marginBottom: 20 }}>
  317. <Col offset={2} span={4}>
  318. <h4>单位资料</h4>
  319. </Col>
  320. </Row>
  321. <div className="clearfix" style={{ paddingLeft: '60px' }}>
  322. <FormItem
  323. className="half-item"
  324. labelCol={{ span: 4 }}
  325. wrapperCol={{ span: 18 }}
  326. label="单位名称"
  327. >
  328. <Input
  329. style={{width:'90%'}}
  330. value={this.state.identifyName}
  331. onChange={(e) => {
  332. this.setState({ identifyName: e.target.value });
  333. }}
  334. placeholder="请输入单位名称"
  335. />
  336. <span className="color-red"> * </span>
  337. </FormItem>
  338. </div>
  339. <div className="clearfix" style={{ paddingLeft: '60px' }}>
  340. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="行业">
  341. <Select
  342. placeholder="选择行业"
  343. value={this.state.industry}
  344. style={{width:'90%'}}
  345. onChange={(e) => {
  346. this.setState({ industry: e });
  347. }}
  348. >
  349. {industry.map(function(item) {
  350. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  351. })}
  352. </Select>
  353. <span className="color-red"> * </span>
  354. </FormItem>
  355. <FormItem
  356. className="half-item"
  357. labelCol={{ span: 4 }}
  358. wrapperCol={{ span: 18 }}
  359. label="社会属性"
  360. >
  361. <Select
  362. placeholder="客户社会属性(必填项)"
  363. value={this.state.societyTag}
  364. style={{width:'90%'}}
  365. onChange={(e) => {
  366. this.setState({ societyTag: e });
  367. }}
  368. >
  369. {socialAttribute.map(function(item) {
  370. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  371. })}
  372. </Select>
  373. <span className="color-red"> * </span>
  374. </FormItem>
  375. <FormItem
  376. className="half-item"
  377. labelCol={{ span: 4 }}
  378. wrapperCol={{ span: 18 }}
  379. label="省-市-区"
  380. >
  381. <Cascader
  382. options={areaSelect()}
  383. value={this.state.ProvinceCity}
  384. placeholder="选择城市"
  385. style={{width:'90%'}}
  386. onChange={(e, pre) => {
  387. this.setState({ ProvinceCity: e });
  388. }}
  389. />
  390. <span className="color-red"> * </span>
  391. </FormItem>
  392. <FormItem
  393. className="half-item"
  394. labelCol={{ span: 4 }}
  395. wrapperCol={{ span: 18 }}
  396. label="通信地址"
  397. >
  398. <Input
  399. placeholder="客户通信地址"
  400. value={this.state.postalAddress}
  401. onChange={(e) => {
  402. this.setState({ postalAddress: e.target.value });
  403. }}
  404. />
  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.fixedTel}
  415. onChange={(e) => {
  416. this.setState({ fixedTel: 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.fixedTel}
  429. onChange={(e) => {
  430. this.setState({ fixedTel: 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.registeredCapital}
  443. maxLength="6"
  444. onChange={(e) => {
  445. this.setState({ registeredCapital: e.target.value });
  446. }}
  447. />
  448. </FormItem>
  449. <FormItem
  450. className="half-item"
  451. labelCol={{ span: 4 }}
  452. wrapperCol={{ span: 18 }}
  453. label="单位规模"
  454. >
  455. <Input
  456. placeholder="单位规模"
  457. value={this.state.enterpriseScale}
  458. maxLength="1"
  459. onChange={(e) => {
  460. this.setState({ enterpriseScale: 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.legalPerson}
  473. onChange={(e) => {
  474. this.setState({ legalPerson: 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.legalPersonIdCard}
  487. onChange={(e) => {
  488. this.setState({ legalPersonIdCard: 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.legalPersonTel}
  501. onChange={(e) => {
  502. this.setState({ legalPersonTel: 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.legalPersonEmail}
  515. onChange={(e) => {
  516. this.setState({ legalPersonEmail: 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.orgCode}
  529. onChange={(e) => {
  530. this.setState({ orgCode: e.target.value });
  531. }}
  532. />
  533. </FormItem>
  534. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="高新">
  535. <Radio.Group
  536. value={this.state.highTechZone}
  537. onChange={(e) => {
  538. this.setState({ highTechZone: e.target.value });
  539. }}
  540. >
  541. <Radio value={0}>是</Radio>
  542. <Radio value={1}>否 </Radio>
  543. </Radio.Group>
  544. </FormItem>
  545. <FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="上市">
  546. <Radio.Group
  547. value={this.state.listed}
  548. onChange={(e) => {
  549. this.setState({ listed: e.target.value });
  550. }}
  551. >
  552. <Radio value={0}>是</Radio>
  553. <Radio value={1}>否 </Radio>
  554. </Radio.Group>
  555. </FormItem>
  556. <div className="clearfix pictures">
  557. <FormItem
  558. className="half-item"
  559. labelCol={{ span: 4 }}
  560. wrapperCol={{ span: 18 }}
  561. style={{ marginTop: 15 }}
  562. label="机构证(PIC)"
  563. >
  564. <PicturesWall
  565. pictureSign="PIC"
  566. fileList={this.getOrgCodeUrl}
  567. pictureUrl={this.state.orgCodeUrl}
  568. />
  569. <p>图片建议:图片要清晰。</p>
  570. </FormItem>
  571. <FormItem
  572. className="half-item"
  573. labelCol={{ span: 4 }}
  574. wrapperCol={{ span: 18 }}
  575. label="单位logo"
  576. >
  577. <PicturesWall
  578. pictureSign="logo"
  579. fileList={this.getCompanyLogoUrl}
  580. pictureUrl={this.state.companyLogoUrl}
  581. />
  582. <p>图片建议:图片要清晰。</p>
  583. </FormItem>
  584. </div>
  585. <div className="clearfix">
  586. <FormItem
  587. className="half-item"
  588. labelCol={{ span: 4 }}
  589. wrapperCol={{ span: 18 }}
  590. label="业务范围"
  591. >
  592. <Input
  593. type="textarea"
  594. rows={4}
  595. value={this.state.businessScope}
  596. placeholder="请输入业务范围"
  597. onChange={(e) => {
  598. this.setState({ businessScope: e.target.value });
  599. }}
  600. />
  601. </FormItem>
  602. <FormItem
  603. className="half-item"
  604. labelCol={{ span: 4 }}
  605. wrapperCol={{ span: 18 }}
  606. label="单位简介"
  607. >
  608. <Input
  609. type="textarea"
  610. rows={4}
  611. value={this.state.introduction}
  612. placeholder="请输入单位简介"
  613. onChange={(e) => {
  614. this.setState({ introduction: e.target.value });
  615. }}
  616. />
  617. </FormItem>
  618. </div>
  619. <Row style={{ marginBottom: 20 ,marginTop:10}}>
  620. <Col offset={2} span={4}>
  621. <Button size="large" className="set-submit" type="primary" htmlType="submit">
  622. 保存
  623. </Button>
  624. </Col>
  625. </Row>
  626. </div>
  627. </Spin>
  628. </Form>
  629. </div>
  630. );
  631. }
  632. });
  633. export default Unit;