addContact.jsx 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. import React from 'react';
  2. import {Modal, message, layout, Spin, Input, Button, Form, Row, Col, Radio, Select} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. const FormItem =Form.Item;
  6. const AddContact = React.createClass({
  7. getInitialState() {
  8. return {
  9. addcontactModul: false,
  10. major:0,
  11. }
  12. },
  13. addcontactModulOK() {
  14. this.setState({
  15. addcontactModul: false
  16. })
  17. this.props.closeFollow(true, true)
  18. },
  19. addcontactModulcancel() {
  20. this.setState({
  21. addcontactModul: false
  22. })
  23. this.props.closeFollow(false, false)
  24. },
  25. //新增联系人保存函数
  26. submitcontactman(e) {
  27. e.preventDefault();
  28. if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.newname)) {
  29. } else {
  30. message.error("请填写正确的姓名,且至少包含一个汉字");
  31. return ;
  32. };
  33. if(this.state.newmobile.length!=11){
  34. message.error('请填写正确的手机号码');
  35. return
  36. }
  37. if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.newdepatrment)) {
  38. } else {
  39. message.error("请填写正确的部门,且至少包含一个汉字");
  40. return;
  41. };
  42. if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.newposition)) {
  43. } else {
  44. message.error("请填写正确的职位,且至少包含一个汉字");
  45. return;
  46. };
  47. this.setState({
  48. loading: true
  49. })
  50. $.ajax({
  51. method: "post",
  52. dataType: "json",
  53. crossDomain: false,
  54. url: globalConfig.context + "/api/admin/customer/addOneContact",
  55. data: {
  56. uid: this.state.uid,
  57. name: this.state.newname,
  58. mobile: this.state.newmobile,
  59. email: this.state.newemail,
  60. fixedTel:this.state.fixedTelModal,
  61. major: this.state.major,
  62. wechat: this.state.newwechat,
  63. depatrment: this.state.newdepatrment,
  64. position: this.state.newposition,
  65. sex: this.state.newsex,
  66. qq: this.state.newqq
  67. },
  68. success: function(data) {
  69. if(!data.error.length) {
  70. message.success('添加成功')
  71. this.addcontactModulOK()
  72. this.setState({
  73. loading: false,
  74. })
  75. } else {
  76. message.warning(data.error[0].message);
  77. };
  78. }.bind(this)
  79. });
  80. },
  81. componentWillReceiveProps(nextProps) {
  82. if(nextProps.addcontactModul && nextProps.uids) {
  83. this.setState({
  84. newsex: undefined,
  85. newname: '',
  86. newmobile: '',
  87. newwechat: '',
  88. newqq: '',
  89. newdepatrment: '',
  90. newposition: '',
  91. newemail: '',
  92. fixedTelModal:'',
  93. major:0,
  94. addcontactModul: true,
  95. uid: nextProps.uids,
  96. loading:false
  97. })
  98. };
  99. },
  100. render() {
  101. return (
  102. <div>
  103. <Modal
  104. maskClosable={false}
  105. footer=""
  106. width="800px"
  107. title="新增联系人"
  108. visible={this.state.addcontactModul}
  109. onCancel={this.addcontactModulcancel}
  110. >
  111. <Form
  112. layout="horizontal"
  113. onSubmit={this.submitcontactman}
  114. id="demand-form"
  115. >
  116. <Spin spinning={this.state.loading}>
  117. <Row style={{ paddingLeft: "50px" }}>
  118. <Col span={2}>
  119. <span style={{ color: "red" }}>*</span>姓名:
  120. </Col>
  121. <Col span={8}>
  122. <Input
  123. value={this.state.newname}
  124. required="required"
  125. onChange={(e) => {
  126. this.setState({ newname: e.target.value });
  127. }}
  128. />
  129. </Col>
  130. <Col span={2} style={{ marginLeft: "50px" }}>
  131. <span style={{ color: "red" }}>*</span>手机:
  132. </Col>
  133. <Col span={8}>
  134. <Input
  135. value={this.state.newmobile}
  136. required="required"
  137. onChange={(e) => {
  138. this.setState({ newmobile: e.target.value });
  139. }}
  140. />
  141. </Col>
  142. </Row>
  143. <Row style={{ marginTop: "20px", paddingLeft: "50px" }}>
  144. <Col span={2}>
  145. <span style={{ color: "red" }}>*</span>部门:
  146. </Col>
  147. <Col span={8}>
  148. <Input
  149. value={this.state.newdepatrment}
  150. required="required"
  151. onChange={(e) => {
  152. this.setState({ newdepatrment: e.target.value });
  153. }}
  154. />
  155. </Col>
  156. <Col span={2} style={{ marginLeft: "50px" }}>
  157. <span style={{ color: "red" }}>*</span>职位:
  158. </Col>
  159. <Col span={8}>
  160. <Input
  161. value={this.state.newposition}
  162. required="required"
  163. onChange={(e) => {
  164. this.setState({ newposition: e.target.value });
  165. }}
  166. />
  167. </Col>
  168. </Row>
  169. <Row style={{ marginTop: "20px", paddingLeft: "50px" }}>
  170. <Col span={2}>微信:</Col>
  171. <Col span={8}>
  172. <Input
  173. value={this.state.newwechat}
  174. onChange={(e) => {
  175. this.setState({ newwechat: e.target.value });
  176. }}
  177. />
  178. </Col>
  179. <Col span={2} style={{ marginLeft: "50px" }}>
  180. Q Q:
  181. </Col>
  182. <Col span={8}>
  183. <Input
  184. value={this.state.newqq}
  185. onChange={(e) => {
  186. this.setState({ newqq: e.target.value });
  187. }}
  188. />
  189. </Col>
  190. </Row>
  191. <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
  192. <Col span={2}>邮箱:</Col>
  193. <Col span={8}>
  194. <Input
  195. onChange={(e) => { this.setState({ newemail: e.target.value }) }} />
  196. </Col>
  197. <Col span={2} style={{ marginLeft: '50px' }}>座机:</Col>
  198. <Col span={8}>
  199. <Input
  200. onChange={(e) => { this.setState({ fixedTelModal: e.target.value }) }} />
  201. </Col>
  202. </Row>
  203. <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
  204. <Col span={2}><span style={{whiteSpace:'nowrap',marginLeft:'-36px'}}>主要联系人:</span></Col>
  205. <Col span={8}>
  206. <Select value={this.state.major} onChange={(e) => { this.setState({ major: e }) }}>
  207. <Select.Option value={1}>是</Select.Option>
  208. <Select.Option value={0}>否</Select.Option>
  209. </Select>
  210. </Col>
  211. <Col span={2} style={{ marginLeft: "50px" }}><span>性别:</span></Col>
  212. <Col span={8}>
  213. <Radio.Group
  214. value={this.state.newsex}
  215. onChange={(e) => {
  216. this.setState({ newsex: e.target.value });
  217. }}
  218. >
  219. <Radio value="男">男</Radio>
  220. <Radio value="女">女</Radio>
  221. </Radio.Group>
  222. </Col>
  223. </Row>
  224. <Row
  225. style={{
  226. marginTop: "20px",
  227. paddingLeft: "50px",
  228. marginBottom: "50px",
  229. }}
  230. >
  231. <Button
  232. className="set-submit"
  233. type="primary"
  234. htmlType="submit"
  235. id="change_keep"
  236. style={{ marginLeft: "60px" }}
  237. >
  238. 保存
  239. </Button>
  240. <Button
  241. className="set-submit"
  242. type="ghost"
  243. onClick={this.addcontactModulcancel}
  244. id="change_rem"
  245. >
  246. 取消
  247. </Button>
  248. </Row>
  249. </Spin>
  250. </Form>
  251. </Modal>
  252. </div>
  253. );
  254. }
  255. })
  256. export default AddContact;