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;