kede-client/js/component/manageCenter/customerService/administration/customerServiceRecord.jsx

import React,{Component} from "react";
import {DatePicker, Input, Radio, Select, Table, Checkbox, Button, message, Spin, Tooltip, Modal} from "antd";
import $ from "jquery";
import moment from "moment";

const RadioGroup = Radio.Group;
const confirm = Modal.confirm;

class CustomerServiceRecord extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns:[
                {
                    title: "跟进时间",
                    dataIndex: "createTimes",
                    key: "createTimes",
                    width: 100,
                },
                {
                    title: "跟进人",
                    dataIndex: "adminName",
                    key: "adminName",
                    width: 130,
                },
                {
                    title: "是否已添微信",
                    dataIndex: "addWechat",
                    key: "addWechat",
                    width: 100,
                    render: (text,record) => {
                        let str = text === 1 ? '是('+record.wechat+')' : text === 0 ? '否' : '';
                        return (
                            <Tooltip placement="topLeft" title={str}>
                                <div style={{
                                    maxWidth:'100px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{str}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "续签情况",
                    dataIndex: "renewal",
                    key: "renewal",
                    width: 150,
                    render: (text,record) => {
                        let str = text === 0 ? '未联系上当前联系人' :
                            text === 1 ? '企业已签其他机构' :
                                text === 2 ? '企业自己申报' :
                                    text === 3 ? '企业不打算申报/注销' :
                                        text === 4 ? '待续签，未报价（客服维护中）' :
                                            text === 5 ? '待续签，已报价（客服维护中）' :
                                                text === 6 ? ('已续签/复审、续签时间、续签项目' + (record.renewalTimes ? '('+record.renewalTimes+')' : '')): ''
                        return (
                            <Tooltip placement="topLeft" title={str}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{str}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "已签项目",
                    dataIndex: "signProject",
                    key: "signProject",
                    width: 150,
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>)
                    }
                },
                {
                    title: "技术端满意度",
                    dataIndex: "techSatisfaction",
                    key: "techSatisfaction",
                    render: (text) => {
                        //0 已投诉 1不满意 2一般满意 3非常满意
                        return (
                            <span>
                                {
                                    text === 0 ? '已投诉' :
                                        text === 1 ? '不满意' :
                                            text === 2 ? '一般满意' :
                                                text === 3 ? '非常满意' : ''
                                }
                            </span>
                        )
                    }
                },
                {
                    title: "业务端满意度",
                    dataIndex: "businessSatisfaction",
                    key: "businessSatisfaction",
                    render: (text) => {
                        return (
                            <span>
                                {
                                    text === 0 ? '已投诉' :
                                        text === 1 ? '不满意' :
                                            text === 2 ? '一般满意' :
                                                text === 3 ? '非常满意' : ''
                                }
                            </span>
                            )
                    }
                },
                {
                    title: "备注",
                    dataIndex: "remarks",
                    key: "remarks",
                    width: 150,
                    render: (text) => {
                        return (
                            <Tooltip placement="topLeft" title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>)
                    }
                },
            ],
            dataSource:[],
            releaseDate:'',
            techSatisfaction:'',
            businessSatisfaction:'',
            addWechat:'',
            wx:'',
            situation:'',
            comment:'',
            selectUidByprojectList:[],
            signProjectId:[],
            signProject:[],
            removeSelectList:[],
        }
        this.preservation = this.preservation.bind(this);
        this.loadData = this.loadData.bind(this);
        this.selectUidByprojectList = this.selectUidByprojectList.bind(this);
        this.inquiry = this.inquiry.bind(this);
    }

    componentDidMount() {
        this.loadData();
    }

    inquiry(){
        let _this = this;
        confirm({
            title: '确定要保存提交吗?',
            content: '请再次确定您填写的客服信息，客服信息提交后，不能修改或删除！',
            okText: '确定',
            okType: 'primary',
            cancelText: '取消',
            onOk() {
                _this.preservation();
            },
        });
    }

    preservation(){
        if(isNaN(parseInt(this.state.addWechat))){
            message.warning('请选择是否添加客服微信');
            return;
        }
        if(this.state.addWechat === 1 && !this.state.wx){
            message.warning('请填写微信号');
            return;
        }
        if(isNaN(parseInt(this.state.situation))){
            message.warning('请选择续签情况');
            return;
        }
        // if(this.state.situation === 6 && !this.state.releaseDate){
        //     message.warning('请选择续签时间');
        //     return;
        // }
        if(!this.state.comment){
            message.warning('请填写备注');
            return;
        }
        let hide = message.loading('提交中...',0);
        this.setState({
            preservationLoading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/addUseService',
            method: 'post',
            data: {
                uid:this.props.uid,
                addWechat:this.state.addWechat,
                wechat:this.state.wx,
                renewal:this.state.situation,
                renewalTimes:this.state.releaseDate || undefined,
                techSatisfaction:this.state.techSatisfaction,
                businessSatisfaction:this.state.businessSatisfaction,
                remarks:this.state.comment,
                signProjectId:this.state.signProjectId.join(','),
                signProject:this.state.signProject.join(','),
            }
        }).done((res) => {
            if (!res.error.length) {
                message.success("提交成功");
                this.loadData();
            } else {
                message.error(res.error[0].message);
            }
        }).always(() => {
            hide();
            this.setState({
                preservationLoading: false
            });
        })
    }

    loadData() {
        let _this = this;
        this.setState({
            listLoading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/listUseServiceFollow",
            data: {
                uid:this.props.uid
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                }else {
                    if(data.data.length !== 0){
                        let info = data.data[0];
                        let signProjectId = info.signProjectId ? info.signProjectId.split(',') : [];
                        let signProject = info.signProject ? info.signProject.split(',') : [];
                        this.setState({
                            releaseDate:info.renewalTimes,
                            techSatisfaction:info.techSatisfaction,
                            businessSatisfaction:info.businessSatisfaction,
                            addWechat:info.addWechat,
                            wx:info.wechat,
                            situation:info.renewal,
                            comment:info.remarks,
                            signProjectId:signProjectId,
                            signProject:signProject,
                        },()=>{
                            _this.selectUidByprojectList(signProjectId,signProject);
                        })
                    }else{
                        _this.selectUidByprojectList();
                    }
                    this.setState({
                        dataSource: data.data,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    listLoading: false,
                });
            }.bind(this)
        );
    }

    selectUidByprojectList(signProjectId = [],signProject=[]) {
        this.setState({
            selectLoading: true,
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/orderProject/selectUidByproject",
            data: {
                uid:this.props.uid
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                }else{
                    let removeArr = [];
                    if(signProjectId.length > 0){
                        let info = data.data;
                        let arr = [];
                        for(let i of info){
                            for(let v of i.list){
                                arr.push(v);
                            }
                        }
                        for(let i of signProjectId){
                            let arr1 = arr.filter(v=>{
                                return i==v.id;
                            });
                            if(arr1.length < 1){
                                let index = signProjectId.findIndex(d=>d == i);
                                removeArr.push({
                                    name:signProject[index],
                                    id:signProjectId[index],
                                })
                            }
                        }
                    }
                    this.setState({
                        selectUidByprojectList:data.data,
                        removeSelectList:removeArr
                    })
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    selectLoading: false,
                });
            }.bind(this)
        );
    }

    render() {
        return (
            <div style={{padding:"15px"}}>
                <Spin spinning={this.state.listLoading}>
                    <Table
                        pagination={false}
                        bordered
                        size="small"
                        columns={this.state.columns}
                        dataSource={this.state.dataSource}
                    />
                </Spin>
                <Spin spinning={this.state.listLoading}>
                    <div style={{paddingTop:"20px"}}>
                        <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px'}}><span style={{color:'#f00'}}>*</span>添加客服微信:</div>
                            <RadioGroup
                                value={this.state.addWechat}
                                onChange={(e) => {
                                    this.setState({ addWechat: e.target.value });
                                    if(e.target.value === 0){
                                        this.setState({
                                            wx:''
                                        })
                                    }
                                }}
                            >
                                <Radio value={0}>否,暂未添加</Radio>
                                <Radio value={1}>
                                    <span>
                                        是
                                    </span>
                                </Radio>
                            </RadioGroup>
                        </div>
                        {this.state.addWechat === 1 ? <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px'}}><span style={{color:'#f00'}}>*</span>微信号</div>
                            <Input
                                placeholder='请输入微信号'
                                style={{ width: 150, marginRight: 10 }}
                                value={this.state.wx}
                                onChange={(e)=>{
                                    this.setState({wx:e.target.value})
                                }}/>
                        </div> : null}
                        <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px'}}><span style={{color:'#f00'}}>*</span>续签情况:</div>
                            <Select
                                placeholder="续签情况"
                                style={{ width: 250, marginRight: 10 }}
                                value={this.state.situation}
                                onChange={(e) => {
                                    this.setState({ situation: e });
                                    if(e !== 6){
                                        this.setState({
                                            releaseDate:'',
                                            signProjectId:[],
                                            signProject:[],
                                        })
                                    }
                                }}
                            >
                                <Option value={6}>已续签/复审、续签时间、续签项目</Option>
                                <Option value={5}>待续签，已报价（客服维护中）</Option>
                                <Option value={4}>待续签，未报价（客服维护中）</Option>
                                <Option value={3}>企业不打算申报/注销</Option>
                                <Option value={2}>企业自己申报</Option>
                                <Option value={1}>企业已签其他机构</Option>
                                <Option value={0}>未联系上当前联系人</Option>
                            </Select>
                        </div>
                        {this.state.situation === 6 ? <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px'}}>
                                {/*<span style={{color:'#f00'}}>*</span>*/}
                                续签时间:
                            </div>
                            <DatePicker
                                value={this.state.releaseDate ? moment(this.state.releaseDate) : null}
                                onChange={(data, dataString) => {
                                    this.setState({ releaseDate: dataString });
                                }}
                            />
                        </div> : null}
                        {this.state.situation === 6 ? <div style={{paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px',paddingBottom:'15px',whiteSpace:"nowrap"}}>已签项目:</div>
                            <Spin spinning={this.state.selectLoading}>
                                {
                                    this.state.selectUidByprojectList.map((value,key)=>(
                                        <div key={key} style={{
                                            paddingBottom:'10px',
                                            display:'flex',
                                            flexFlow:"row nowrap",
                                            alignItems:'flex-start',
                                            padding:'10px 5px 0 5px',
                                            background:key % 2 === 0 ? '#afacad' : '#fff',
                                            color:key % 2 === 0 ? '#fff' : '#000',
                                            borderRadius: '4px',
                                        }}>
                                            <div style={{whiteSpace:"nowrap",paddingBottom:'10px'}}>{value.orderNo+':'}</div>
                                            <div style={{
                                                flex:1,
                                                display:'flex',
                                                flexFlow:"row wrap",
                                            }}>
                                                {
                                                    value.list.map((v,k)=>{
                                                        let arr = this.state.signProjectId;
                                                        let index = arr.findIndex(d=>d == v.id);
                                                        let lv =  index >= 0;
                                                        return (
                                                            <Checkbox checked={lv || v.checked}  style={{
                                                                padding:"0 10px 10px 10px",
                                                                marginLeft:'0px',
                                                                whiteSpace: 'nowrap'
                                                            }} key={k} onChange={(e)=>{
                                                                if(e.target.checked){
                                                                    this.state.signProjectId.push(v.id);
                                                                    this.state.signProject.push(v.commodityName);
                                                                    this.setState({
                                                                        signProjectId:this.state.signProjectId,
                                                                        signProject:this.state.signProject,
                                                                    })
                                                                }else{
                                                                    let index = this.state.signProjectId.findIndex(d=>d == v.id);
                                                                    this.state.signProjectId.splice(index,1);
                                                                    this.state.signProject.splice(index,1);
                                                                    this.setState({
                                                                        signProjectId:this.state.signProjectId,
                                                                        signProject:this.state.signProject,
                                                                    })
                                                                }
                                                                v.checked=e.target.checked
                                                            }}>{v.commodityName}</Checkbox>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                    ))
                                }
                                {
                                    this.state.removeSelectList.length !== 0 ? <div style={{marginTop:"15px",borderTop:'1px dashed #000'}}>
                                        <div>已删项目(已签)</div>
                                        {
                                            this.state.removeSelectList.map((v,k)=>(
                                                <Checkbox checked={true} disabled={true}  style={{paddingRight:"10px"}} key={k}>{v.name}</Checkbox>
                                            ))
                                        }
                                    </div> : ''
                                }
                            </Spin>
                        </div> : null}
                        <div style={{display:'flex',paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px'}}>技术端满意度:</div>
                            <Radio.Group onChange={(e)=>{
                                this.setState({
                                    techSatisfaction:e.target.value
                                })
                            }} value={this.state.techSatisfaction}>
                                <Radio value={3}>非常满意</Radio>
                                <Radio value={2}>一般满意</Radio>
                                <Radio value={1}>不满意</Radio>
                                <Radio value={0}>已投诉</Radio>
                            </Radio.Group>
                        </div>
                        <div style={{display:'flex',paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px'}}>业务端满意度:</div>
                            <Radio.Group onChange={(e)=>{
                                this.setState({
                                    businessSatisfaction:e.target.value
                                })
                            }} value={this.state.businessSatisfaction}>
                                <Radio value={3}>非常满意</Radio>
                                <Radio value={2}>一般满意</Radio>
                                <Radio value={1}>不满意</Radio>
                                <Radio value={0}>已投诉</Radio>
                            </Radio.Group>
                        </div>
                        <div style={{display:'flex',paddingBottom:"10px"}}>
                            <div style={{fontWeight:"bolder",paddingRight:'10px'}}><span style={{color:'#f00'}}>*</span>备注:</div>
                            <div style={{position:"relative"}}>
                                <Input
                                    placeholder={'请输入备注'}
                                    type='textarea'
                                    rows={4}
                                    maxLength={200}
                                    style={{
                                        width:"400px"
                                    }}
                                    value={this.state.comment}
                                    onChange={(e) => {
                                        this.setState({ comment: e.target.value });
                                    }}
                                />
                                <div style={{position:"absolute",zIndex:9999,color:'#a09f9f',bottom:'8px',right:'21px'}}>{this.state.comment.length+'/'+200}</div>
                            </div>
                        </div>
                    </div>
                </Spin>
                <div style={{display:'flex',justifyContent:'center'}}>
                    <Button type="primary" size={'large'} style={{marginTop:"10px"}} loading={this.state.preservationLoading || this.state.listLoading} onClick={this.inquiry}>
                        提交保存
                    </Button>
                </div>
            </div>
        )
    }
}

export default CustomerServiceRecord;