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

import React, { Component } from "react";
import { AutoComplete, Button, Cascader, Input, message, Modal, Popconfirm, Select, Spin, Table, Tag, Tooltip } from "antd";
import { areaSelect, getProvince } from '@/NewDicProvinceList';
import $ from "jquery/src/ajax";
import TextArea from "antd/es/input/TextArea";

class InforChange extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      changeType: 0,
      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: [],
      inputVisible: false,
      inputValue: '',

      dataArrar: [],
      cooperationProjects: [],
      orgCode: props.data.orgCode,
      locationProvince: props.data.locationProvince,
      businessScope: props.data.businessScope,
      intendedProject: props.data.intendedProject
    }
    this.onChange = this.onChange.bind(this);
    this.onCancel = this.onCancel.bind(this);
    this.loadData = this.loadData.bind(this);
    this.onOk = this.onOk.bind(this);
    this.showInput = this.showInput.bind(this);
    this.handleInputConfirm = this.handleInputConfirm.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleCloseCooperation = this.handleCloseCooperation.bind(this);
    this.supervisor = this.supervisor.bind(this);
    this.onSelect = this.onSelect.bind(this);
  }

  onChange(type) {
    this.setState({
      visible: true,
      changeType: type,
    })
  }

  onCancel() {
    this.setState({
      visible: false,
      loading: false,
      changeType: 0,

      dataArrar: []
    })
  }

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

  }

  onOk() {
    const { dataArrar } = this.state;
    if (this.state.changeType === 3 && !/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(dataArrar)) {
      message.warning('请输入正确的统一社会信用代码')
      return
    }
    if (this.state.changeType === 0 && dataArrar.length === 0) {
      message.warning('请输入省-市-区');
      return;
    }
    if (this.state.changeType === 1 && dataArrar.length === 0) {
      message.warning('请输入企业主管产品/服务');
      return;
    }
    if (this.state.changeType === 2 && dataArrar.length === 0) {
      message.warning('请输入意向合作项目');
      return;
    }
    this.setState({
      loading: true
    });
    let data = {
      uid: this.props.enterpriseId,
    }
    if (this.state.changeType === 0) {
      data.province = dataArrar[0] || undefined;
      data.city = dataArrar[1] || undefined;
      data.area = dataArrar[2] || undefined;
    }
    if (this.state.changeType === 1) {
      data.businessScope = dataArrar.join(',')
    }
    if (this.state.changeType === 2) {
      let arr = [];
      for (let i of dataArrar) {
        arr.push(i.label)
      }
      data.intendedProject = arr.join(',')
    }
    if (this.state.changeType === 3) {
      data.orgCode = dataArrar
      // this.props.onCancel();
    }
    $.ajax({
      url: globalConfig.context + "/api/admin/customer/updateUserDate",
      method: "post",
      data: data
    }).done(
      function (data) {
        this.setState({
          loading: false
        });
        if (data.error.length === 0) {
          message.success("恭喜您，更改成功！");
          if (this.state.changeType === 0) {
            this.setState({
              locationProvince: getProvince(dataArrar[0], dataArrar[1], dataArrar[2])
            })
          }
          if (this.state.changeType === 1) {
            this.setState({
              businessScope: dataArrar.join(',')
            })
          }
          if (this.state.changeType === 2) {
            let arr = [];
            for (let i of dataArrar) {
              arr.push(i.label)
            }
            this.setState({
              intendedProject: arr.join(',')
            })
          }
          if (this.state.changeType === 3) {
            this.setState({
              orgCode: dataArrar
            })
            this.props.onCancel();
          }
          this.onCancel();
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    )
  }

  showInput() {
    let str = this.state.dataArrar.join('/')
    this.setState({
      inputVisible: true,
      inputValue: str
    });
  }

  handleInputConfirm() {
    let inputValue = this.state.inputValue;
    let arr = inputValue.split('/');
    let lv = true;
    for (let i of arr) {
      if (i.length > 16) {
        message.warning('单个标签字数不能超过16个字符')
        lv = false;
        return;
      }
    }
    if (lv) {
      arr = Array.from(new Set(arr));
      arr = arr.filter(v => v);
      this.setState({
        dataArrar: arr,
        inputVisible: false,
        inputValue: '',
      });
    }
  }

  handleClose(removedTag) {
    let dataArrar = this.state.dataArrar.filter(tag => { return tag !== removedTag });
    this.setState({ dataArrar });
  }

  handleCloseCooperation(removedTag) {
    let dataArrar = this.state.dataArrar.filter(tag => { return tag.value !== removedTag.value });
    this.setState({ dataArrar });
  }

  supervisor(value) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
      data: {
        businessName: value
      },
      success: function (data) {
        let thedata = data.data;
        if (data.error.length === 0) {
          this.setState({
            cooperationProjects: thedata,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  }

  onSelect(value) {
    let arr = this.state.cooperationProjects.filter(v => v.id === value);
    let arr1 = this.state.dataArrar.filter(v => v.value === value);
    if (arr.length > 0) {
      if (arr1.length > 0) {
        message.warning('选项已存在');
      } else {
        this.state.dataArrar.push({
          label: arr[0].bname,
          value: arr[0].id,
        })
        this.setState({
          dataArrar: this.state.dataArrar
        })
      }
    }
  }

  render() {
    return (
      <div style={{
        fontSize: 14,
        fontWeight: "bold",
        marginTop: 20,
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          paddingBottom: '5px'
        }}>
          <div style={{ width: '123px', color: "#58A3FF" }}>统一社会信用代码:</div>
          <div style={{ color: "#58A3FF" }}>
            {
              !this.state.orgCode ? "待补充" : this.state.orgCode
            }
          </div>
          {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(3) }}>修改</Button>}
          {this.props.type === 'modify' && <span style={{ color: "red", marginLeft: 20 }}>如,科德集团则填写91430105670766451M</span>}
        </div>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          paddingBottom: '5px'
        }}>
          <div style={{ width: '123px' }}>省-市-区:</div>
          <div>
            {
              this.state.locationProvince
            }
          </div>
          {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(0) }}>修改</Button>}
        </div>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          paddingBottom: '5px'
        }}>
          <div style={{ width: '123px' }}>企业主营产品/服务:</div>
          <div>
            {
              this.state.businessScope
            }
          </div>
          {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(1) }}>修改</Button>}
        </div>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          paddingBottom: '5px'
        }}>
          <div style={{ width: '123px' }}>意向合作项目:</div>
          <div>
            {
              this.state.intendedProject
            }
          </div>
          {this.props.type === 'modify' && <Button style={{ marginLeft: '5px' }} type="primary" onClick={(e) => { e.stopPropagation(); this.onChange(2) }}>修改</Button>}
        </div>

        <Modal
          footer={null}
          maskClosable={false}
          width={this.props.type === 'journal' ? '1200px' : this.props.type === 'modify' ? '400px' : '800px'}
          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'>
                    {
                      this.state.changeType === 0 ? '省-市-区' :
                        this.state.changeType === 1 ? '企业主管产品/服务' :
                          this.state.changeType === 2 ? '意向合作项目' :
                            this.state.changeType === 3 ? '统一社会信用代码' : ''
                    }
                    :
                  </div>
                  <div className='enterpriseNameValue'>
                    {
                      this.state.changeType === 0 ? this.state.locationProvince :
                        this.state.changeType === 1 ? this.state.businessScope :
                          this.state.changeType === 2 ? this.state.intendedProject :
                            this.state.changeType === 3 ? this.state.orgCode : ''
                    }
                  </div>
                </div>
                <div className='enterpriseNameItem'>
                  <div className='enterpriseNameTitle'>更改:</div>
                  <div className='enterpriseNameValue'>
                    {
                      this.state.changeType === 0 ? <Cascader
                        options={areaSelect()}
                        placeholder="选择城市"
                        onChange={(e, pre) => {
                          this.setState({
                            dataArrar: e
                          })
                        }}
                      /> :
                        this.state.changeType === 1 ?
                          <div>
                            <div>
                              {this.state.dataArrar.map((tag) => {
                                const isLongTag = tag.length > 20;
                                const tagElem = (
                                  <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
                                    {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                                  </Tag>
                                );
                                return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
                              })}
                              {
                                !this.state.inputVisible &&
                                <Button
                                  size="small"
                                  type="primary"
                                  onClick={this.showInput}>
                                  + 新增主营产品
                                </Button>
                              }
                            </div>
                            {this.state.inputVisible && (<div>
                              <TextArea
                                style={{ width: '300px', height: '100px' }}
                                value={this.state.inputValue}
                                onChange={(e) => {
                                  this.setState({
                                    inputValue: e.target.value
                                  })
                                }} />
                              <div style={{ color: '#f00' }}>提示：请用 / 符号隔开关键字</div>
                              <div>
                                <Button
                                  size="small"
                                  type="primary"
                                  onClick={this.handleInputConfirm}>
                                  确定
                                </Button>
                                <Button
                                  size="small"
                                  style={{ marginLeft: '5px' }}
                                  onClick={() => {
                                    this.setState({
                                      inputVisible: false,
                                      inputValue: ''
                                    })
                                  }}>
                                  取消
                                </Button>
                              </div>
                            </div>)}
                          </div>
                          :
                          this.state.changeType === 2 ?
                            <div>
                              <div style={{ paddingBottom: this.state.dataArrar.length === 0 ? 0 : '10px' }}>
                                {this.state.dataArrar.map((tag, index) => {
                                  const isLongTag = tag.label.length > 20;
                                  const tagElem = (
                                    <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
                                      {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
                                    </Tag>
                                  );
                                  return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
                                })}
                              </div>
                              <div>
                                <AutoComplete
                                  style={{ width: 200 }}
                                  onSearch={this.supervisor}
                                  onSelect={this.onSelect}
                                  placeholder="请输入关键字"
                                >
                                  {
                                    this.state.cooperationProjects.map(function (item) {
                                      return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
                                    })
                                  }
                                </AutoComplete>
                              </div>
                            </div>
                            :
                            this.state.changeType === 3 ?
                              <div>
                                <div>
                                  <Input
                                    style={{ width: 200 }}
                                    placeholder="请输入统一社会信用代码"
                                    onChange={(e) => {
                                      this.setState({
                                        dataArrar: e.target.value
                                      })
                                    }}
                                  />
                                </div>
                                <div style={{ color: "red", position: "absolute" }}>如,科德集团则填写91430105670766451M</div>
                              </div>
                              : ''
                    }
                  </div>
                </div>
              </div> : this.props.type === 'journal' ?
                <div>
                  <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'>
                    确定修改
                  </Button>
                </Popconfirm> : null
            }
          </div>
        </Modal >
      </div >
    )
  }
}

export default InforChange;