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

import React,{Component} from "react";
import {AutoComplete, Button, Cascader, 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:[],

            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=== 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(',')
        }
        $.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(',')
                        })
                    }
                    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'}}>省-市-区:</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' ? '1000px': this.props.type === 'modify' ? (this.state.changeType === 0 ? '300px' : '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 ? '意向合作项目' : ''
                                        }
                                        :
                                    </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 : ''
                                        }
                                    </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>
                                                        : ''
                                        }
                                    </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;