basic.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. import React from 'react';
  2. import { Radio, Icon, Button, AutoComplete, Cascader, layout, Input, Select, Tabs, Spin, Popconfirm, Popover, Table, Switch, message, DatePicker, Modal, Upload, Form, Row, Col, TimePicker } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import moment from 'moment';
  6. import { citySelect, provinceList, areaSelect } from '@/NewDicProvinceList';
  7. import { socialAttribute, industry, newFollow, auditStatusL, lvl, currentMember, cityArr, statuslist, customerStatus, intentionalService, sex } from '@/dataDic.js';
  8. import { getCompanyIntention, splitUrl, getIndustry, getStatuslist, getAuditStatus, getContactType, getSocialAttribute, getfllowSituation, beforeUploadFile, getWhether, getcityArr, getcustomerStatue, getfllowSituationOn, getCertification, getcustomerTyp, getLvl, getCurrentMember, getprovince } from '@/tools.js';
  9. const FormItem = Form.Item;
  10. //图片组件
  11. const PicturesWall = React.createClass({
  12. getInitialState() {
  13. return {
  14. previewVisible: false,
  15. previewImage: '',
  16. fileList: [],
  17. }
  18. },
  19. handleCancel() {
  20. this.setState({
  21. previewVisible: false
  22. })
  23. },
  24. handlePreview(file) {
  25. this.setState({
  26. previewImage: file.url || file.thumbUrl,
  27. previewVisible: true,
  28. });
  29. },
  30. handleChange(info) {
  31. let fileList = info.fileList;
  32. this.setState({
  33. fileList
  34. });
  35. this.props.fileList(fileList);
  36. },
  37. componentWillReceiveProps(nextProps) {
  38. this.state.fileList = nextProps.pictureUrl;
  39. },
  40. render() {
  41. const {
  42. previewVisible,
  43. previewImage,
  44. fileList
  45. } = this.state;
  46. const uploadButton = (
  47. <div>
  48. <Icon type="plus" />
  49. <div className="ant-upload-text">点击上传</div>
  50. </div>
  51. );
  52. return(
  53. <div style={{display:"inline-block"}}>
  54. <Upload
  55. action={globalConfig.context + "/api/admin/customer/uploadCustomerImg"}
  56. data={{ 'sign': '' }}
  57. listType="picture-card"
  58. fileList={fileList}
  59. onPreview={this.handlePreview}
  60. onChange={this.handleChange} >
  61. {fileList.length >= 1 ? null : uploadButton}
  62. </Upload>
  63. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  64. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  65. </Modal>
  66. </div>
  67. );
  68. }
  69. });
  70. const Basic = React.createClass({
  71. getInitialState() {
  72. return {
  73. loading: false,
  74. orgCodeUrl: [],
  75. companyLogoUrl: [],
  76. }
  77. },
  78. loadInformation(record) {
  79. $.ajax({
  80. method: "get",
  81. dataType: "json",
  82. url: globalConfig.context + '/api/admin/customer/findOrganizationCustomerDetail',
  83. data: {
  84. uid: record
  85. },
  86. success: function(data) {
  87. let thisData = data.data;
  88. if(!thisData) {
  89. if(data.error && data.error.length) {
  90. message.warning(data.error[0].message);
  91. };
  92. thisData = {};
  93. };
  94. let ProvinceCityArr = [];
  95. let ProvinceS = thisData.locationProvince; //getprovince
  96. let citys = thisData.locationCity;
  97. let Areas = thisData.locationArea;
  98. ProvinceCityArr.push(ProvinceS, citys, Areas);
  99. console.log(ProvinceCityArr)
  100. this.setState({
  101. InformationId: thisData.id,
  102. InformationUid: thisData.uid,
  103. identifyName: thisData.identifyName,
  104. listed: thisData.listed,
  105. highTechZone: thisData.highTechZone,
  106. orgCodeUrl: thisData.orgCodeUrl ? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload') : [],
  107. companyLogoUrl: thisData.companyLogoUrl ? splitUrl(thisData.companyLogoUrl, ',', globalConfig.avatarHost + '/upload') : [],
  108. dataInformation: thisData,
  109. ProvinceCity: ProvinceCityArr[0]!=null?ProvinceCityArr:undefined,
  110. contacts: thisData.contacts,
  111. contactMobile: thisData.contactMobile,
  112. industry: String(thisData.industry) == 'null' ? undefined : String(thisData.industry),
  113. international: thisData.international,
  114. societyTag: thisData.societyTag||undefined,
  115. introduction: thisData.introduction,
  116. postalAddress: thisData.postalAddress,
  117. contactsFixedTel: thisData.contactsFixedTel,
  118. contactsFax: thisData.contactsFax,
  119. registeredCapital: thisData.registeredCapital,
  120. enterpriseScale: thisData.enterpriseScale,
  121. legalPerson: thisData.legalPerson,
  122. legalPersonIdCard: thisData.legalPersonIdCard,
  123. legalPersonTel: thisData.legalPersonTel,
  124. legalPersonEmail: thisData.legalPersonEmail,
  125. businessScope: thisData.businessScope,
  126. orgCode: thisData.orgCode,
  127. investment: thisData.investment,
  128. auditStatus: thisData.auditStatus ? String(thisData.auditStatus) : undefined,
  129. businessAudit: thisData.businessAudit
  130. });
  131. }.bind(this),
  132. }).always(function() {
  133. this.setState({
  134. loading: false
  135. });
  136. }.bind(this));
  137. },
  138. //图片
  139. getOrgCodeUrl(e) {
  140. this.setState({
  141. orgCodeUrl: e
  142. });
  143. },
  144. getCompanyLogoUrl(e) {
  145. this.setState({
  146. companyLogoUrl: e
  147. });
  148. },
  149. //基本信息提交
  150. newSubmit(e) {
  151. e.preventDefault();
  152. if(!this.state.industry) {
  153. message.warning('请选择行业');
  154. return false;
  155. };
  156. if(!this.state.societyTag) {
  157. message.warning('请选择社会性质');
  158. return false;
  159. };
  160. if(!this.state.ProvinceCity[1]) {
  161. message.warning('请选择地区');
  162. return false;
  163. };
  164. if(isNaN(this.state.registeredCapital)) {
  165. message.warning('注册资本只能输入数字')
  166. return false;
  167. };
  168. if(isNaN(this.state.enterpriseScale)) {
  169. message.warning('单位规模只能输入数字')
  170. return false;
  171. }
  172. this.setState({
  173. selectedRowKeys: [],
  174. });
  175. let theorgCodeUrl = [];
  176. if(this.state.orgCodeUrl.length) {
  177. let picArr = [];
  178. this.state.orgCodeUrl.map(function(item) {
  179. if(item.response && item.response.data && item.response.data.length) {
  180. picArr.push(item.response.data);
  181. }
  182. });
  183. theorgCodeUrl = picArr.join(",");
  184. };
  185. let thecompanyLogoUrl = [];
  186. if(this.state.companyLogoUrl.length) {
  187. let picArr = [];
  188. this.state.companyLogoUrl.map(function(item) {
  189. if(item.response && item.response.data && item.response.data.length) {
  190. picArr.push(item.response.data);
  191. }
  192. });
  193. thecompanyLogoUrl = picArr.join(",");
  194. };
  195. this.setState({
  196. loading: true
  197. });
  198. $.ajax({
  199. method: "post",
  200. dataType: "json",
  201. url: globalConfig.context + '/api/admin/customer/updateOrganizationCustomer',
  202. data: {
  203. id: this.state.InformationId,
  204. uid: this.state.InformationUid,
  205. societyTag: this.state.societyTag,
  206. introduction: this.state.introduction,
  207. unitName: this.state.unitName,
  208. industry: this.state.industry,
  209. locationProvince: (this.state.ProvinceCity)[0], //省-
  210. locationCity: (this.state.ProvinceCity)[1], //市
  211. locationArea: (this.state.ProvinceCity)[2], //区
  212. postalAddress: this.state.postalAddress,
  213. contactsFixedTel: this.state.contactsFixedTel,
  214. contactsFax: this.state.contactsFax,
  215. registeredCapital: this.state.registeredCapital ? this.state.registeredCapital : 0,
  216. enterpriseScale: this.state.enterpriseScale ? this.state.enterpriseScale : 0,
  217. legalPerson: this.state.legalPerson,
  218. legalPersonIdCard: this.state.legalPersonIdCard,
  219. legalPersonTel: this.state.legalPersonTel,
  220. legalPersonEmail: this.state.legalPersonEmail,
  221. highTechZone: this.state.highTechZone,
  222. listed: this.state.listed,
  223. contacts: this.state.contacts,
  224. contactMobile: this.state.contactMobile,
  225. international: this.state.international,
  226. orgCode: this.state.orgCode,
  227. businessScope: this.state.businessScope,
  228. introduction: this.state.introduction,
  229. companyLogoUrl: thecompanyLogoUrl != 0 ? thecompanyLogoUrl : '',
  230. orgCodeUrl: theorgCodeUrl != 0 ? theorgCodeUrl : '',
  231. businessAudit: this.state.businessAudit,
  232. auditStatus: this.state.auditStatus
  233. }
  234. }).done(function(data) {
  235. this.setState({
  236. loading: false
  237. });
  238. if(!data.error.length) {
  239. message.success('保存成功!');
  240. this.props.closeDetail(false, true)
  241. } else {
  242. message.warning(data.error[0].message);
  243. }
  244. }.bind(this));
  245. },
  246. //取消
  247. detailsModal() {
  248. this.props.closeDetail(false, false)
  249. },
  250. componentWillMount(){
  251. this.loadInformation(this.props.data.id)
  252. },
  253. componentWillReceiveProps(nextProps) {
  254. if(nextProps.data&&nextProps.basicState){
  255. this.loadInformation(nextProps.data.id)
  256. }
  257. },
  258. render() {
  259. return(
  260. <div>
  261. <Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form">
  262. <Spin spinning={this.state.loading}>
  263. <div className="clearfix" style={{paddingLeft:'60px'}}>
  264. <FormItem className="half-item"
  265. labelCol={{ span: 4 }}
  266. wrapperCol={{ span: 18 }}
  267. label="客户名称"
  268. >
  269. <span>{this.state.identifyName}</span>
  270. </FormItem>
  271. </div>
  272. <div className="clearfix" style={{paddingLeft:'60px'}}>
  273. <FormItem className="half-item"
  274. labelCol={{ span: 4 }}
  275. wrapperCol={{ span: 18 }}
  276. label="行业">
  277. <Select placeholder="选择行业" value={this.state.industry} style={{width:'300px'}}
  278. onChange={(e)=>{this.setState({industry:e})}}>
  279. {
  280. industry.map(function (item) {
  281. return <Select.Option key={item.value} >{item.key}</Select.Option>
  282. })
  283. }
  284. </Select>
  285. <span style={{color:'red',marginLeft:'15px'}}>*</span>
  286. </FormItem>
  287. <FormItem className="half-item"
  288. labelCol={{ span: 4 }}
  289. wrapperCol={{ span: 18 }}
  290. label="社会属性"
  291. >
  292. <Select placeholder="客户社会属性(必填项)" value={this.state.societyTag} style={{width:'300px'}}
  293. onChange={(e)=>{this.setState({societyTag:e})}}>
  294. {
  295. socialAttribute.map(function (item) {
  296. return <Select.Option key={item.value} >{item.key}</Select.Option>
  297. })
  298. }
  299. </Select>
  300. <span style={{color:'red',marginLeft:'15px'}}>*</span>
  301. </FormItem>
  302. <FormItem className="half-item"
  303. labelCol={{ span: 4 }}
  304. wrapperCol={{ span: 18 }}
  305. label="省-市-区"
  306. >
  307. <Cascader options={areaSelect()} value={this.state.ProvinceCity} placeholder="选择城市" style={{width:'300px'}}
  308. onChange={(e,pre) => { this.setState({ ProvinceCity: e }) }} />
  309. <span style={{color:'red',marginLeft:'15px'}}>*</span>
  310. </FormItem>
  311. <FormItem className="half-item"
  312. labelCol={{ span: 4 }}
  313. wrapperCol={{ span: 18 }}
  314. label="通信地址"
  315. >
  316. <Input placeholder="客户通信地址" value={this.state.postalAddress}
  317. onChange={(e)=>{this.setState({postalAddress:e.target.value})}}/>
  318. </FormItem>
  319. <FormItem className="half-item"
  320. labelCol={{ span: 4 }}
  321. wrapperCol={{ span: 18 }}
  322. label="固定电话"
  323. >
  324. <Input placeholder="客户固定电话" value={this.state.contactsFixedTel}
  325. onChange={(e)=>{this.setState({contactsFixedTel:e.target.value})}}/>
  326. </FormItem>
  327. <FormItem className="half-item"
  328. labelCol={{ span: 4 }}
  329. wrapperCol={{ span: 18 }}
  330. label="客户传真"
  331. >
  332. <Input placeholder="客户传真" value={this.state.contactsFax}
  333. onChange={(e)=>{this.setState({contactsFax:e.target.value})}}/>
  334. </FormItem>
  335. <FormItem className="half-item"
  336. labelCol={{ span: 4 }}
  337. wrapperCol={{ span: 18 }}
  338. label="注册资本"
  339. >
  340. <Input placeholder="注册资本" value={this.state.registeredCapital} maxLength='6'
  341. onChange={(e)=>{this.setState({registeredCapital:e.target.value})}}/>
  342. </FormItem>
  343. <FormItem className="half-item"
  344. labelCol={{ span: 4 }}
  345. wrapperCol={{ span: 18 }}
  346. label="单位规模"
  347. >
  348. <Input placeholder="单位规模" value={this.state.enterpriseScale} maxLength='1'
  349. onChange={(e)=>{this.setState({enterpriseScale:e.target.value})}}/>
  350. </FormItem>
  351. <FormItem className="half-item"
  352. labelCol={{ span: 4 }}
  353. wrapperCol={{ span: 18 }}
  354. label="法人名称"
  355. >
  356. <Input placeholder="法人名称" value={this.state.legalPerson}
  357. onChange={(e)=>{this.setState({legalPerson:e.target.value})}}/>
  358. </FormItem>
  359. <FormItem className="half-item"
  360. labelCol={{ span: 4 }}
  361. wrapperCol={{ span: 18 }}
  362. label="身份证号码"
  363. >
  364. <Input placeholder="法人身份证号码" value={this.state.legalPersonIdCard}
  365. onChange={(e)=>{this.setState({legalPersonIdCard:e.target.value})}}/>
  366. </FormItem>
  367. <FormItem className="half-item"
  368. labelCol={{ span: 4 }}
  369. wrapperCol={{ span: 18 }}
  370. label="主要联系人"
  371. >
  372. <Input placeholder="主要联系人" value={this.state.contacts} onChange={(e) => {
  373. this.setState({ contacts: e.target.value })}}/>
  374. </FormItem>
  375. <FormItem className="half-item"
  376. labelCol={{ span: 4 }}
  377. wrapperCol={{ span: 18 }}
  378. label="主要联系人号码"
  379. >
  380. <Input placeholder="主要联系人号码" value={this.state.contactMobile} onChange={(e) => {
  381. this.setState({ contactMobile: e.target.value })}}/>
  382. </FormItem>
  383. <FormItem className="half-item"
  384. labelCol={{ span: 4 }}
  385. wrapperCol={{ span: 18 }}
  386. label="法人电话"
  387. >
  388. <Input placeholder="法人电话" value={this.state.legalPersonTel}
  389. onChange={(e)=>{this.setState({legalPersonTel:e.target.value})}}/>
  390. </FormItem>
  391. <FormItem className="half-item"
  392. labelCol={{ span: 4 }}
  393. wrapperCol={{ span: 18 }}
  394. label="电子邮箱"
  395. >
  396. <Input placeholder="法人电子邮箱" value={this.state.legalPersonEmail}
  397. onChange={(e)=>{this.setState({legalPersonEmail:e.target.value})}}/>
  398. </FormItem>
  399. <FormItem className="half-item"
  400. labelCol={{ span: 4 }}
  401. wrapperCol={{ span: 18 }}
  402. label="机构代码"
  403. >
  404. <Input placeholder="社会同意机构代码" value={this.state.orgCode}
  405. onChange={(e)=>{this.setState({orgCode:e.target.value})}}/>
  406. </FormItem>
  407. <div className="clearfix">
  408. <FormItem className="half-item"
  409. labelCol={{ span: 4 }}
  410. wrapperCol={{ span: 18 }}
  411. label="业务认证"
  412. >
  413. <Radio.Group value={this.state.businessAudit} onChange={(e) => {
  414. this.setState({ businessAudit: e.target.value })
  415. }}>
  416. <Radio value={0}>未认证</Radio>
  417. <Radio value={1}>已认证</Radio>
  418. </Radio.Group>
  419. </FormItem>
  420. <FormItem className="half-item"
  421. labelCol={{ span: 4 }}
  422. wrapperCol={{ span: 18 }}
  423. label="高新"
  424. >
  425. <Radio.Group value={this.state.highTechZone} onChange={(e) => {
  426. this.setState({highTechZone:e.target.value})
  427. }}>
  428. <Radio value={0}>否</Radio>
  429. <Radio value={1}>是</Radio>
  430. </Radio.Group>
  431. </FormItem>
  432. <FormItem className="half-item"
  433. labelCol={{ span: 4 }}
  434. wrapperCol={{ span: 18 }}
  435. label="上市"
  436. >
  437. <Radio.Group value={this.state.listed} onChange={(e) => {
  438. this.setState({listed:e.target.value })
  439. }}>
  440. <Radio value={0}>否</Radio>
  441. <Radio value={1}>是</Radio>
  442. </Radio.Group>
  443. </FormItem>
  444. <FormItem className="half-item"
  445. labelCol={{ span: 4 }}
  446. wrapperCol={{ span: 18 }}
  447. label="国际化"
  448. >
  449. <Radio.Group value={this.state.international} onChange={(e) => {
  450. this.setState({international:e.target.value })
  451. }}>
  452. <Radio value={0}>否</Radio>
  453. <Radio value={1}>是</Radio>
  454. </Radio.Group>
  455. </FormItem>
  456. </div>
  457. <div className="clearfix pictures">
  458. <FormItem
  459. labelCol={{ span: 4 }}
  460. wrapperCol={{ span: 18 }}
  461. label="机构证(PIC)" >
  462. <PicturesWall
  463. pictureSign="PIC"
  464. fileList={this.getOrgCodeUrl}
  465. pictureUrl={this.state.orgCodeUrl} />
  466. <p>图片建议:图片要清晰。</p>
  467. </FormItem>
  468. <FormItem
  469. labelCol={{ span: 4 }}
  470. wrapperCol={{ span: 18 }}
  471. label="单位logo" >
  472. <PicturesWall
  473. pictureSign="logo"
  474. fileList={this.getCompanyLogoUrl}
  475. pictureUrl={this.state.companyLogoUrl} />
  476. <p>图片建议:图片要清晰。</p>
  477. </FormItem>
  478. </div>
  479. <div className="clearfix">
  480. <FormItem
  481. labelCol={{ span: 2 }}
  482. wrapperCol={{ span: 18 }}
  483. label="业务范围" >
  484. <Input type="textarea" rows={4} value={this.state.businessScope}
  485. onChange={(e)=>{this.setState({businessScope:e.target.value})}}/>
  486. </FormItem>
  487. <FormItem
  488. labelCol={{ span: 2 }}
  489. wrapperCol={{ span: 18 }}
  490. label="单位简介" >
  491. <Input type="textarea" rows={4} value={this.state.introduction}
  492. onChange={(e)=>{this.setState({introduction:e.target.value})}}/>
  493. </FormItem>
  494. </div>
  495. <Button className="set-submit" type="primary" htmlType="submit" >保存</Button>
  496. <Button type="ghost" onClick={this.detailsModal}>取消</Button>
  497. </div>
  498. </Spin>
  499. </Form>
  500. </div>
  501. )
  502. }
  503. })
  504. export default Basic;