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.data.level && this.props.data.level != 0) {
              Modal.warning({
                title: '系统提示',
                content: (
                  <div>
                    <p>请先设置客户类型。操作位置：</p>
                    <p>1.勾选客户名称</p>
                    <p>2.点击切换至“操作”项</p>
                    <p>3.选择相应的客户类型即可。</p>
                  </div>
                ),
              });
              return
            }
            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;