index.jsx 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. import React, { Component } from "react";
  2. import { Button, Input, message, Modal, Popconfirm, Spin, Table, Tooltip } from "antd";
  3. import InforChange from './inforChange';
  4. import './index.less';
  5. import $ from "jquery/src/ajax";
  6. class EnterpriseNameChange extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. visible: false,
  11. enterpriseName: '',
  12. loading: false,
  13. colunmn: [
  14. {
  15. title: "操作人名称",
  16. dataIndex: "adminName",
  17. key: "adminName",
  18. },
  19. {
  20. title: "客户名称",
  21. dataIndex: "name",
  22. key: "name",
  23. render: (text) => {
  24. return (
  25. <Tooltip title={text}>
  26. <div style={{
  27. maxWidth: '150px',
  28. overflow: 'hidden',
  29. textOverflow: "ellipsis",
  30. whiteSpace: 'nowrap',
  31. }}>{text}</div>
  32. </Tooltip>
  33. )
  34. }
  35. },
  36. {
  37. title: "操作时间",
  38. dataIndex: "createTimes",
  39. key: "createTimes",
  40. },
  41. ],
  42. dataSource: []
  43. }
  44. this.onCancel = this.onCancel.bind(this);
  45. this.onOk = this.onOk.bind(this);
  46. }
  47. onCancel() {
  48. this.setState({
  49. visible: false,
  50. loading: false,
  51. })
  52. }
  53. onOk() {
  54. if (!this.state.enterpriseName) {
  55. message.warning('请输入企业名称!');
  56. return;
  57. }
  58. let re = new RegExp("^[\u4e00-\u9fa5]");
  59. if (!re.test(this.state.enterpriseName)) {
  60. message.warning('公司名称必须以汉字开头!')
  61. return
  62. }
  63. if (!re.test(this.state.enterpriseName.charAt(this.state.enterpriseName.length - 1))) {
  64. message.warning('公司名称必须以汉字结尾!')
  65. return
  66. }
  67. if (this.state.enterpriseName.length > 64) {
  68. message.warning('公司名称字数不超过64个!')
  69. return;
  70. };
  71. let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;
  72. if (regu.test(this.state.enterpriseName)) {
  73. message.warning('公司名称不能存在特殊符号或空格!')
  74. return false;
  75. }
  76. this.setState({
  77. loading: true
  78. });
  79. $.ajax({
  80. url: globalConfig.context + "/api/admin/customer/updateUserName",
  81. method: "post",
  82. data: {
  83. uid: this.props.enterpriseId,
  84. userName: this.state.enterpriseName
  85. }
  86. }).done(
  87. function (data) {
  88. this.setState({
  89. loading: false
  90. });
  91. if (data.error.length === 0) {
  92. message.success("恭喜您,更名成功!");
  93. this.setState({
  94. visible: false
  95. })
  96. this.props.onChangeSuccess(this.state.enterpriseName);
  97. } else {
  98. message.warning(data.error[0].message);
  99. }
  100. }.bind(this)
  101. )
  102. }
  103. loadData() {
  104. this.setState({
  105. loading: true
  106. });
  107. $.ajax({
  108. method: "get",
  109. dataType: "json",
  110. crossDomain: false,
  111. url: globalConfig.context + "/api/admin/customer/listUserName",
  112. data: {
  113. uid: this.props.enterpriseId,
  114. },
  115. success: function (data) {
  116. if (data.error.length || data.data.list == "") {
  117. if (data.error && data.error.length) {
  118. message.warning(data.error[0].message);
  119. }
  120. } else {
  121. this.setState({
  122. initialName: data.data[0] ? data.data[0].name : ''
  123. })
  124. data.data.splice(0, 1);
  125. this.setState({
  126. dataSource: data.data,
  127. });
  128. }
  129. }.bind(this),
  130. }).always(
  131. function () {
  132. this.setState({
  133. loading: false,
  134. });
  135. }.bind(this)
  136. );
  137. }
  138. render() {
  139. return (
  140. <span className='enterpriseNameChange'>
  141. <Button
  142. type="primary"
  143. disabled={this.props.disabled}
  144. loading={this.state.loading}
  145. style={this.props.style}
  146. onClick={() => {
  147. if (this.props.type === 'journal') {
  148. this.loadData();
  149. }
  150. this.setState({
  151. visible: true
  152. })
  153. }}>
  154. {this.props.type === 'journal' ? '更改日志' : this.props.type === 'modify' ? '企业更名' : ''}
  155. </Button>
  156. {
  157. this.props.changeOtherInfor ?
  158. <InforChange
  159. enterpriseId={this.props.enterpriseId}
  160. type={this.props.type}
  161. data={this.props.data}
  162. onCancel={this.props.onCancel}
  163. /> : null
  164. }
  165. <Modal
  166. footer={null}
  167. maskClosable={false}
  168. width={this.props.type === 'journal' ? '900px' : this.props.type === 'modify' ? '300px' : ''}
  169. title={this.props.type === 'journal' ? '更名日志' : this.props.type === 'modify' ? '企业更名' : ''}
  170. visible={this.state.visible}
  171. onCancel={this.onCancel}>
  172. <div>
  173. {this.props.type === 'modify' ?
  174. <div className='enterpriseNameContent'>
  175. <div className='enterpriseNameItem'>
  176. <div className='enterpriseNameTitle'>更名前:</div>
  177. <div className='enterpriseNameValue'>{this.props.enterpriseName}</div>
  178. </div>
  179. <div className='enterpriseNameItem'>
  180. <div className='enterpriseNameTitle'>更名后:</div>
  181. <div className='enterpriseNameValue'>
  182. <Input
  183. value={this.state.enterpriseName}
  184. onChange={(e) => {
  185. this.setState({
  186. enterpriseName: e.target.value
  187. })
  188. }} />
  189. </div>
  190. </div>
  191. </div> : this.props.type === 'journal' ?
  192. <div>
  193. {this.state.initialName ? <div style={{ paddingBottom: '20px' }}>
  194. 初始客户名称:{this.state.initialName}
  195. </div> : null}
  196. <Spin spinning={this.state.loading} >
  197. <Table
  198. columns={this.state.colunmn}
  199. dataSource={this.state.dataSource}
  200. pagination={false}
  201. scroll={{ x: "max-content", y: 0 }}
  202. bordered
  203. size="small"
  204. />
  205. </Spin>
  206. </div> : null
  207. }
  208. {
  209. this.props.type === 'modify' ?
  210. <Popconfirm
  211. placement="top"
  212. title="确定要修改吗?"
  213. onConfirm={(e) => {
  214. e.stopPropagation();
  215. this.onOk();
  216. }}
  217. okText="确定"
  218. cancelText="取消"
  219. >
  220. <Button type='primary' onClick={this.handleCancel}>
  221. 确定修改
  222. </Button>
  223. </Popconfirm> : null
  224. }
  225. </div>
  226. </Modal>
  227. </span>
  228. )
  229. }
  230. }
  231. export default EnterpriseNameChange;