customerServiceRecord.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. import React,{Component} from "react";
  2. import {DatePicker, Input, Radio, Select, Table, Checkbox, Button, message, Spin, Tooltip, Modal} from "antd";
  3. import $ from "jquery";
  4. import moment from "moment";
  5. const RadioGroup = Radio.Group;
  6. const confirm = Modal.confirm;
  7. class CustomerServiceRecord extends Component{
  8. constructor(props) {
  9. super(props);
  10. this.state={
  11. columns:[
  12. {
  13. title: "跟进时间",
  14. dataIndex: "createTimes",
  15. key: "createTimes",
  16. width: 100,
  17. },
  18. {
  19. title: "跟进人",
  20. dataIndex: "adminName",
  21. key: "adminName",
  22. width: 100,
  23. },
  24. {
  25. title: "是否已添微信",
  26. dataIndex: "addWechat",
  27. key: "addWechat",
  28. width: 100,
  29. render: (text,record) => {
  30. let str = text === 1 ? '是('+record.wechat+')' : text === 0 ? '否' : '';
  31. return (
  32. <Tooltip placement="topLeft" title={str}>
  33. <div style={{
  34. maxWidth:'100px',
  35. overflow:'hidden',
  36. textOverflow: "ellipsis",
  37. whiteSpace:'nowrap',
  38. }}>{str}</div>
  39. </Tooltip>
  40. )
  41. }
  42. },
  43. {
  44. title: "续签情况",
  45. dataIndex: "renewal",
  46. key: "renewal",
  47. width: 150,
  48. render: (text,record) => {
  49. let str = text === 0 ? '其他' :
  50. text === 1 ? '否,企业已签其他机构' :
  51. text === 2 ? '否,企业自己申报' :
  52. text === 3 ? '否,企业不打算申报/注销' :
  53. text === 4 ? '否,客户考虑中,无报价' :
  54. text === 5 ? '否,客户考虑中,已报价' :
  55. text === 6 ? '是,已续签/复审,续签时间、续签项目('+record.renewalTimes+')' : ''
  56. return (
  57. <Tooltip placement="topLeft" title={str}>
  58. <div style={{
  59. maxWidth:'150px',
  60. overflow:'hidden',
  61. textOverflow: "ellipsis",
  62. whiteSpace:'nowrap',
  63. }}>{str}</div>
  64. </Tooltip>
  65. )
  66. }
  67. },
  68. {
  69. title: "已签项目",
  70. dataIndex: "signProject",
  71. key: "signProject",
  72. width: 150,
  73. render: (text) => {
  74. return (
  75. <Tooltip placement="topLeft" title={text}>
  76. <div style={{
  77. maxWidth:'150px',
  78. overflow:'hidden',
  79. textOverflow: "ellipsis",
  80. whiteSpace:'nowrap',
  81. }}>{text}</div>
  82. </Tooltip>)
  83. }
  84. },
  85. {
  86. title: "备注",
  87. dataIndex: "remarks",
  88. key: "remarks",
  89. width: 150,
  90. render: (text) => {
  91. return (
  92. <Tooltip placement="topLeft" title={text}>
  93. <div style={{
  94. maxWidth:'150px',
  95. overflow:'hidden',
  96. textOverflow: "ellipsis",
  97. whiteSpace:'nowrap',
  98. }}>{text}</div>
  99. </Tooltip>)
  100. }
  101. },
  102. ],
  103. dataSource:[],
  104. releaseDate:'',
  105. addWechat:'',
  106. wx:'',
  107. situation:'',
  108. comment:'',
  109. selectUidByprojectList:[],
  110. signProjectId:[],
  111. signProject:[],
  112. removeSelectList:[],
  113. }
  114. this.preservation = this.preservation.bind(this);
  115. this.loadData = this.loadData.bind(this);
  116. this.selectUidByprojectList = this.selectUidByprojectList.bind(this);
  117. this.inquiry = this.inquiry.bind(this);
  118. }
  119. componentDidMount() {
  120. this.loadData();
  121. }
  122. inquiry(){
  123. let _this = this;
  124. confirm({
  125. title: '确定要保存提交吗?',
  126. content: '请再次确定您填写的客服信息,客服信息提交后,不能修改或删除!',
  127. okText: '确定',
  128. okType: 'primary',
  129. cancelText: '取消',
  130. onOk() {
  131. _this.preservation();
  132. },
  133. });
  134. }
  135. preservation(){
  136. if(isNaN(parseInt(this.state.addWechat))){
  137. message.warning('请选择是否添加客服微信');
  138. return;
  139. }
  140. if(this.state.addWechat === 1 && !this.state.wx){
  141. message.warning('请填写微信号');
  142. return;
  143. }
  144. if(isNaN(parseInt(this.state.situation))){
  145. message.warning('请选择续签情况');
  146. return;
  147. }
  148. if(this.state.situation === 6 && !this.state.releaseDate){
  149. message.warning('请选择续签时间');
  150. return;
  151. }
  152. if(!this.state.comment){
  153. message.warning('请填写备注');
  154. return;
  155. }
  156. let hide = message.loading('提交中...',0);
  157. this.setState({
  158. preservationLoading: true
  159. });
  160. $.ajax({
  161. url: globalConfig.context + '/api/admin/addUseService',
  162. method: 'post',
  163. data: {
  164. uid:this.props.uid,
  165. addWechat:this.state.addWechat,
  166. wechat:this.state.wx,
  167. renewal:this.state.situation,
  168. renewalTimes:this.state.releaseDate,
  169. remarks:this.state.comment,
  170. signProjectId:this.state.signProjectId.join(','),
  171. signProject:this.state.signProject.join(','),
  172. }
  173. }).done((res) => {
  174. if (!res.error.length) {
  175. message.success("提交成功");
  176. this.loadData();
  177. } else {
  178. message.error(res.error[0].message);
  179. }
  180. }).always(() => {
  181. hide();
  182. this.setState({
  183. preservationLoading: false
  184. });
  185. })
  186. }
  187. loadData() {
  188. let _this = this;
  189. this.setState({
  190. listLoading: true,
  191. });
  192. $.ajax({
  193. method: "get",
  194. dataType: "json",
  195. crossDomain: false,
  196. url: globalConfig.context + "/api/admin/listUseServiceFollow",
  197. data: {
  198. uid:this.props.uid
  199. },
  200. success: function (data) {
  201. if (data.error && data.error.length) {
  202. message.warning(data.error[0].message);
  203. }else {
  204. if(data.data.length !== 0){
  205. let info = data.data[0];
  206. let signProjectId = info.signProjectId ? info.signProjectId.split(',') : [];
  207. let signProject = info.signProject ? info.signProject.split(',') : [];
  208. this.setState({
  209. releaseDate:info.renewalTimes,
  210. addWechat:info.addWechat,
  211. wx:info.wechat,
  212. situation:info.renewal,
  213. comment:info.remarks,
  214. signProjectId:signProjectId,
  215. signProject:signProject,
  216. },()=>{
  217. _this.selectUidByprojectList(signProjectId,signProject);
  218. })
  219. }else{
  220. _this.selectUidByprojectList();
  221. }
  222. this.setState({
  223. dataSource: data.data,
  224. });
  225. }
  226. }.bind(this),
  227. }).always(
  228. function () {
  229. this.setState({
  230. listLoading: false,
  231. });
  232. }.bind(this)
  233. );
  234. }
  235. selectUidByprojectList(signProjectId = [],signProject=[]) {
  236. this.setState({
  237. selectLoading: true,
  238. });
  239. $.ajax({
  240. method: "get",
  241. dataType: "json",
  242. crossDomain: false,
  243. url: globalConfig.context + "/api/admin/orderProject/selectUidByproject",
  244. data: {
  245. uid:this.props.uid
  246. },
  247. success: function (data) {
  248. if (data.error && data.error.length) {
  249. message.warning(data.error[0].message);
  250. }else{
  251. let removeArr = [];
  252. if(signProjectId.length > 0){
  253. let info = data.data;
  254. let arr = [];
  255. for(let i of info){
  256. for(let v of i.list){
  257. arr.push(v);
  258. }
  259. }
  260. for(let i of signProjectId){
  261. let arr1 = arr.filter(v=>{
  262. return i==v.id;
  263. });
  264. if(arr1.length < 1){
  265. let index = signProjectId.findIndex(d=>d == i);
  266. removeArr.push(signProject[index])
  267. }
  268. }
  269. }
  270. this.setState({
  271. selectUidByprojectList:data.data,
  272. removeSelectList:removeArr
  273. })
  274. }
  275. }.bind(this),
  276. }).always(
  277. function () {
  278. this.setState({
  279. selectLoading: false,
  280. });
  281. }.bind(this)
  282. );
  283. }
  284. render() {
  285. return (
  286. <div style={{padding:"15px"}}>
  287. <Spin spinning={this.state.listLoading}>
  288. <Table
  289. pagination={false}
  290. bordered
  291. size="small"
  292. columns={this.state.columns}
  293. dataSource={this.state.dataSource}
  294. />
  295. </Spin>
  296. <Spin spinning={this.state.listLoading}>
  297. <div style={{paddingTop:"20px"}}>
  298. <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
  299. <div style={{fontWeight:"bolder",paddingRight:'10px'}}>添加客服微信:</div>
  300. <RadioGroup
  301. value={this.state.addWechat}
  302. onChange={(e) => {
  303. this.setState({ addWechat: e.target.value });
  304. if(e.target.value === 0){
  305. this.setState({
  306. wx:''
  307. })
  308. }
  309. }}
  310. >
  311. <Radio value={0}>否,暂未添加</Radio>
  312. <Radio value={1}>
  313. <span>
  314. </span>
  315. </Radio>
  316. </RadioGroup>
  317. </div>
  318. {this.state.addWechat === 1 ? <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
  319. <div style={{fontWeight:"bolder",paddingRight:'10px'}}>微信号</div>
  320. <Input
  321. placeholder='请输入微信号'
  322. style={{ width: 150, marginRight: 10 }}
  323. value={this.state.wx}
  324. onChange={(e)=>{
  325. this.setState({wx:e.target.value})
  326. }}/>
  327. </div> : null}
  328. <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
  329. <div style={{fontWeight:"bolder",paddingRight:'10px'}}>续签情况:</div>
  330. <Select
  331. placeholder="续签情况"
  332. style={{ width: 250, marginRight: 10 }}
  333. value={this.state.situation}
  334. onChange={(e) => {
  335. this.setState({ situation: e });
  336. if(e !== 6){
  337. this.setState({
  338. releaseDate:'',
  339. signProjectId:[],
  340. signProject:[],
  341. })
  342. }
  343. }}
  344. >
  345. <Option value={6}>是,已续签/复审,续签时间、续签项目</Option>
  346. <Option value={5}>否,客户考虑中,已报价</Option>
  347. <Option value={4}>否,客户考虑中,无报价</Option>
  348. <Option value={3}>否,企业不打算申报/注销</Option>
  349. <Option value={2}>否,企业自己申报</Option>
  350. <Option value={1}>否,企业已签其他机构</Option>
  351. <Option value={0}>其他</Option>
  352. </Select>
  353. </div>
  354. {this.state.situation === 6 ? <div style={{display:'flex',alignItems:"center",paddingBottom:"10px"}}>
  355. <div style={{fontWeight:"bolder",paddingRight:'10px'}}>续签时间:</div>
  356. <DatePicker
  357. value={this.state.releaseDate ? moment(this.state.releaseDate) : null}
  358. onChange={(data, dataString) => {
  359. this.setState({ releaseDate: dataString });
  360. }}
  361. />
  362. </div> : null}
  363. {this.state.situation === 6 ? <div style={{paddingBottom:"10px"}}>
  364. <div style={{fontWeight:"bolder",paddingRight:'10px',paddingBottom:'15px',whiteSpace:"nowrap"}}>已签项目:</div>
  365. <Spin spinning={this.state.selectLoading}>
  366. {
  367. this.state.selectUidByprojectList.map((value,key)=>(
  368. <div key={key} style={{
  369. paddingBottom:'10px',
  370. display:'flex',
  371. flexFlow:"row nowrap",
  372. alignItems:'flex-start',
  373. padding:'10px 5px 0 5px',
  374. background:key % 2 === 0 ? '#afacad' : '#fff',
  375. color:key % 2 === 0 ? '#fff' : '#000',
  376. borderRadius: '4px',
  377. }}>
  378. <div style={{whiteSpace:"nowrap",paddingBottom:'10px'}}>{value.orderNo+':'}</div>
  379. <div style={{
  380. flex:1,
  381. display:'flex',
  382. flexFlow:"row wrap",
  383. }}>
  384. {
  385. value.list.map((v,k)=>{
  386. let arr = this.state.signProjectId;
  387. let index = arr.findIndex(d=>d == v.id);
  388. let lv = index >= 0;
  389. return (
  390. <Checkbox checked={lv || v.checked} style={{
  391. padding:"0 10px 10px 10px",
  392. marginLeft:'0px',
  393. whiteSpace: 'nowrap'
  394. }} key={k} onChange={(e)=>{
  395. if(e.target.checked){
  396. this.state.signProjectId.push(v.id);
  397. this.state.signProject.push(v.commodityName);
  398. this.setState({
  399. signProjectId:this.state.signProjectId,
  400. signProject:this.state.signProject,
  401. })
  402. }else{
  403. let index = this.state.signProjectId.findIndex(d=>d == v.id);
  404. this.state.signProjectId.splice(index,1);
  405. this.state.signProject.splice(index,1);
  406. this.setState({
  407. signProjectId:this.state.signProjectId,
  408. signProject:this.state.signProject,
  409. })
  410. }
  411. v.checked=e.target.checked
  412. }}>{v.commodityName}</Checkbox>
  413. )
  414. })
  415. }
  416. </div>
  417. </div>
  418. ))
  419. }
  420. {
  421. this.state.removeSelectList.length !== 0 ? <div style={{marginTop:"15px",borderTop:'1px dashed #000'}}>
  422. <div>已删项目(已签)</div>
  423. {
  424. this.state.removeSelectList.map((v,k)=>(
  425. <Checkbox checked={true} disabled={true} style={{paddingLeft:"10px"}} key={k}>{v}</Checkbox>
  426. ))
  427. }
  428. </div> : ''
  429. }
  430. </Spin>
  431. </div> : null}
  432. <div style={{display:'flex',paddingBottom:"10px"}}>
  433. <div style={{fontWeight:"bolder",paddingRight:'10px'}}>备注:</div>
  434. <div style={{position:"relative"}}>
  435. <Input
  436. placeholder={'请输入备注'}
  437. type='textarea'
  438. rows={3}
  439. maxLength={64}
  440. style={{
  441. width:"400px"
  442. }}
  443. value={this.state.comment}
  444. onChange={(e) => {
  445. this.setState({ comment: e.target.value });
  446. }}
  447. />
  448. <div style={{position:"absolute",zIndex:9999,color:'#a09f9f',bottom:'8px',right:'21px'}}>{this.state.comment.length+'/'+64}</div>
  449. </div>
  450. </div>
  451. </div>
  452. </Spin>
  453. <div style={{display:'flex',justifyContent:'center'}}>
  454. <Button type="primary" size={'large'} style={{marginTop:"10px"}} loading={this.state.preservationLoading || this.state.listLoading} onClick={this.inquiry}>
  455. 提交保存
  456. </Button>
  457. </div>
  458. </div>
  459. )
  460. }
  461. }
  462. export default CustomerServiceRecord;