addContact.jsx 7.3 KB

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