kede-client/js/component/common/enterpriseNameChange/index.jsx

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;