contactPerson.jsx 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. import React from 'react';
  2. import {Form,Table,Button,Spin,message,Input,Popconfirm,Col} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. const ContactPerson = React.createClass({
  6. getInitialState() {
  7. return {
  8. contactList:[],
  9. loading:false,
  10. ContactsLists: [{
  11. title: '姓名',
  12. dataIndex: 'name',
  13. key: 'name',
  14. render: (text, record, index) => {
  15. return <Input value={record.name} placeholder="姓名(必填项)" key={record.id} required="required"
  16. onChange={(e) => { record.name = e.target.value;
  17. this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
  18. }
  19. }, {
  20. title: '联系人部门',
  21. dataIndex: 'depatrment',
  22. key: 'depatrment',
  23. render: (text, record, index) => {
  24. return <Input value={record.depatrment} placeholder="联系人部门" key={record.id}
  25. onChange={(e) => { record.depatrment = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
  26. }
  27. }, {
  28. title: '联系人职务',
  29. dataIndex: 'position',
  30. key: 'position',
  31. render: (text, record, index) => {
  32. return <Input value={record.position} placeholder="联系人职务" key={record.id}
  33. onChange={(e) => { record.position = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
  34. }
  35. }, {
  36. title: '主要联系人',
  37. dataIndex: 'major',
  38. width:100,
  39. key: 'major',
  40. render:(text) => {
  41. return text?'是':"否"
  42. }
  43. },{
  44. title: '手机号码',
  45. dataIndex: 'mobile',
  46. key: 'mobile',
  47. render: (text, record, index) => {
  48. return <Input value={record.mobile} placeholder="手机号码(必填项)" key={record.id} required="required"
  49. onChange={(e) => { record.mobile = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
  50. }
  51. }, {
  52. title: '微信',
  53. dataIndex: 'wechat',
  54. key: 'wechat',
  55. render: (text, record, index) => {
  56. return <Input value={record.wechat} placeholder="微信" key={record.id}
  57. onChange={(e) => { record.wechat = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
  58. }
  59. }, {
  60. title: '联系人QQ',
  61. dataIndex: 'qq',
  62. key: 'qq',
  63. render: (text, record, index) => {
  64. return <Input value={record.qq} placeholder="联系人QQ" key={record.id}
  65. onChange={(e) => { record.qq = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
  66. }
  67. }, {
  68. title: '电子邮箱',
  69. dataIndex: 'email',
  70. key: 'email',
  71. render: (text, record, index) => {
  72. return <Input value={record.email} placeholder="电子邮箱" key={record.id}
  73. onChange={(e) => { record.email = e.target.value; this.setState({ contactList: this.state.contactList }); }} style={{width:'120px'}}/>
  74. }
  75. },
  76. {
  77. title: '操作',
  78. dataIndex: 'dels',
  79. key: 'dels',
  80. render: (text, record, index) => {
  81. return <div>{adminData.isSuperAdmin ?
  82. <Popconfirm title="是否删除?" onConfirm={(e)=>{this.confirmDelet(record)}} okText="删除" cancelText="不删除">
  83. <Button style={{marginRight:'10px',color:'#ffffff',background:'#f00',border:'none'}}>删除</Button>
  84. </Popconfirm>
  85. :''}
  86. {record.name?<Button style={{marginRight:'10px',color:'#ffffff',background:'green',border:'none'}} onClick={(e)=>{e.stopPropagation(),this.mainContact(record)}}>设为主要联系人</Button>:''}
  87. </div>
  88. }
  89. }
  90. ],
  91. }
  92. },
  93. //tab2删除
  94. confirmDelet(e) {
  95. this.setState({
  96. loading: true
  97. });
  98. if(e.id) {
  99. $.ajax({
  100. method: "get",
  101. dataType: "json",
  102. crossDomain: false,
  103. url: globalConfig.context + "/api/admin/customer/deleteOneContact",
  104. data: {
  105. ocbId: e.id, //删除的ID
  106. }
  107. }).done(function(data) {
  108. if(!data.error.length) {
  109. message.success('删除成功!');
  110. this.setState({
  111. loading: false,
  112. });
  113. } else {
  114. message.warning(data.error[0].message);
  115. };
  116. this.contactLists();
  117. }.bind(this));
  118. } else {
  119. this.contactLists();
  120. }
  121. },
  122. //选择主要联系人
  123. mainContact(record){
  124. this.setState({
  125. loading: true
  126. });
  127. $.ajax({
  128. method: "get",
  129. dataType: "json",
  130. crossDomain: false,
  131. url: globalConfig.context + "/api/admin/customer/updateMainContact",
  132. data: {
  133. uid:this.props.data.id,
  134. ocbId: record.id
  135. }
  136. }).done(function(data) {
  137. if(!data.error.length) {
  138. message.success('设为主要联系人成功!');
  139. this.setState({
  140. loading: false,
  141. });
  142. } else {
  143. message.warning(data.error[0].message);
  144. };
  145. this.contactLists();
  146. }.bind(this));
  147. },
  148. //tab2获取联系人详情
  149. contactLists(ids) {
  150. this.setState({
  151. loading: true
  152. });
  153. $.ajax({
  154. method: "get",
  155. dataType: "json",
  156. crossDomain: false,
  157. url: globalConfig.context + '/api/admin/customer/findCustomerContacts',
  158. data: {
  159. uid: ids||this.props.data.id, //名称1
  160. },
  161. success: function(data) {
  162. let theArr = [];
  163. if(data.error.length || data.data.list == "") {
  164. if(data.error && data.error.length) {
  165. message.warning(data.error[0].message);
  166. };
  167. } else {
  168. for(let i = 0; i < data.data.length; i++) {
  169. let thisdata = data.data[i];
  170. theArr.push({
  171. id: thisdata.id,
  172. name: thisdata.name,
  173. mobile: thisdata.mobile,
  174. email: thisdata.email,
  175. qq: thisdata.qq,
  176. wechat: thisdata.wechat,
  177. depatrment: thisdata.depatrment,
  178. position: thisdata.position,
  179. major:thisdata.major
  180. });
  181. };
  182. };
  183. this.setState({
  184. contactList: theArr,
  185. });
  186. }.bind(this),
  187. }).always(function() {
  188. this.setState({
  189. loading: false
  190. });
  191. }.bind(this));
  192. },
  193. //新增
  194. //tab2新增联系人
  195. addcontact() {
  196. this.state.contactList.push({
  197. id: null,
  198. name: '',
  199. mobile: '',
  200. email: '',
  201. qq: '',
  202. wechat: '',
  203. depatrment: '',
  204. position: '',
  205. });
  206. this.setState({
  207. contactList: this.state.contactList
  208. })
  209. },
  210. //tab2联系人保存
  211. contactSave(e) {
  212. e.preventDefault();
  213. this.setState({
  214. loading: true
  215. });
  216. $.ajax({
  217. url: globalConfig.context + '/api/admin/customer/updateCustomerContacts',
  218. method: 'post',
  219. data: {
  220. uid: this.props.data.id,
  221. contactList: JSON.stringify(this.state.contactList)
  222. }
  223. }).done(function(data) {
  224. this.setState({
  225. loading: false
  226. });
  227. if(!data.error.length) {
  228. message.success('保存成功!');
  229. this.props.closeDetail(false,true)
  230. } else {
  231. message.warning(data.error[0].message);
  232. }
  233. }.bind(this));
  234. },
  235. componentWillMount(){
  236. this.contactLists(this.props.data.id);
  237. },
  238. detailsModal(){
  239. this.props.closeDetail(false, false)
  240. },
  241. componentWillReceiveProps(nextProps) {
  242. if(nextProps.data.id&&nextProps.contactState){
  243. this.contactLists(nextProps.data.id)
  244. }
  245. },
  246. render() {
  247. return(
  248. <div>
  249. <div className="clearfix" >
  250. <Button className="ContactsList" type="primary" onClick={this.addcontact}>新增</Button>
  251. </div>
  252. <div className="clearfix">
  253. <Spin spinning={this.state.loading}>
  254. <Form layout="horizontal" id="demand-form" onSubmit={this.contactSave} >
  255. <Table
  256. pagination={false}
  257. columns={this.state.ContactsLists}
  258. dataSource={this.state.contactList}
  259. />
  260. <Col span={24} offset={9} style={{marginTop:'15px'}}>
  261. <Button type="primary" htmlType="submit">保存</Button>
  262. <Button type="ghost" onClick={this.detailsModal} style={{marginLeft:'100px'}}>取消</Button>
  263. </Col>
  264. </Form>
  265. </Spin>
  266. </div>
  267. </div>
  268. )
  269. }
  270. })
  271. export default ContactPerson;