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