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;
        }
        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;