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; } 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} /> : null } <Modal footer={null} maskClosable={false} width={this.props.type === 'journal' ? '1000px': 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;