import React, { Component } from "react"; import { Button, Input, message, Modal, Popconfirm, Spin, Table, Tooltip } from "antd"; import InforChange from './inforChange'; import './index.less'; import $ from "jquery/src/ajax"; class EnterpriseNameChange extends Component { constructor(props) { super(props); this.state = { visible: false, enterpriseName: '', loading: false, colunmn: [ { title: "操作人名称", dataIndex: "adminName", key: "adminName", }, { title: "客户名称", dataIndex: "name", key: "name", render: (text) => { return ( <Tooltip title={text}> <div style={{ maxWidth: '150px', overflow: 'hidden', textOverflow: "ellipsis", whiteSpace: 'nowrap', }}>{text}</div> </Tooltip> ) } }, { title: "操作时间", dataIndex: "createTimes", key: "createTimes", }, ], dataSource: [] } this.onCancel = this.onCancel.bind(this); this.onOk = this.onOk.bind(this); } onCancel() { this.setState({ visible: false, loading: false, }) } onOk() { if (!this.state.enterpriseName) { message.warning('请输入企业名称!'); return; } let re = new RegExp("^[\u4e00-\u9fa5]"); if (!re.test(this.state.enterpriseName)) { message.warning('公司名称必须以汉字开头!') return } if (!re.test(this.state.enterpriseName.charAt(this.state.enterpriseName.length - 1))) { message.warning('公司名称必须以汉字结尾!') return } if (this.state.enterpriseName.length > 64) { message.warning('公司名称字数不超过64个!') return; }; let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g; if (regu.test(this.state.enterpriseName)) { message.warning('公司名称不能存在特殊符号或空格!') return false; } this.setState({ loading: true }); $.ajax({ url: globalConfig.context + "/api/admin/customer/updateUserName", method: "post", data: { uid: this.props.enterpriseId, userName: this.state.enterpriseName } }).done( function (data) { this.setState({ loading: false }); if (data.error.length === 0) { message.success("恭喜您,更名成功!"); this.setState({ visible: false }) this.props.onChangeSuccess(this.state.enterpriseName); } else { message.warning(data.error[0].message); } }.bind(this) ) } loadData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/listUserName", data: { uid: this.props.enterpriseId, }, success: function (data) { if (data.error.length || data.data.list == "") { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { this.setState({ initialName: data.data[0] ? data.data[0].name : '' }) data.data.splice(0, 1); this.setState({ dataSource: data.data, }); } }.bind(this), }).always( function () { this.setState({ loading: false, }); }.bind(this) ); } render() { return ( <span className='enterpriseNameChange'> <Button type="primary" disabled={this.props.disabled} loading={this.state.loading} style={this.props.style} onClick={() => { if (this.props.type === 'journal') { this.loadData(); } this.setState({ visible: true }) }}> {this.props.type === 'journal' ? '更改日志' : this.props.type === 'modify' ? '企业更名' : ''} </Button> { this.props.changeOtherInfor ? <InforChange enterpriseId={this.props.enterpriseId} type={this.props.type} data={this.props.data} onCancel={this.props.onCancel} /> : null } <Modal footer={null} maskClosable={false} width={this.props.type === 'journal' ? '900px' : this.props.type === 'modify' ? '300px' : ''} title={this.props.type === 'journal' ? '更名日志' : this.props.type === 'modify' ? '企业更名' : ''} visible={this.state.visible} onCancel={this.onCancel}> <div> {this.props.type === 'modify' ? <div className='enterpriseNameContent'> <div className='enterpriseNameItem'> <div className='enterpriseNameTitle'>更名前:</div> <div className='enterpriseNameValue'>{this.props.enterpriseName}</div> </div> <div className='enterpriseNameItem'> <div className='enterpriseNameTitle'>更名后:</div> <div className='enterpriseNameValue'> <Input value={this.state.enterpriseName} onChange={(e) => { this.setState({ enterpriseName: e.target.value }) }} /> </div> </div> </div> : this.props.type === 'journal' ? <div> {this.state.initialName ? <div style={{ paddingBottom: '20px' }}> 初始客户名称:{this.state.initialName} </div> : null} <Spin spinning={this.state.loading} > <Table columns={this.state.colunmn} dataSource={this.state.dataSource} pagination={false} scroll={{ x: "max-content", y: 0 }} bordered size="small" /> </Spin> </div> : null } { this.props.type === 'modify' ? <Popconfirm placement="top" title="确定要修改吗?" onConfirm={(e) => { e.stopPropagation(); this.onOk(); }} okText="确定" cancelText="取消" > <Button type='primary' onClick={this.handleCancel}> 确定修改 </Button> </Popconfirm> : null } </div> </Modal> </span> ) } } export default EnterpriseNameChange;