serviceQuery.jsx 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701
  1. import React from 'react';
  2. import {Button ,Input,Select,Spin,Table, Switch, message, DatePicker, Modal,Form ,Row,Col,TimePicker} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import moment from 'moment';
  6. import './myClient.less';
  7. import { areaSelect} from '../../../NewDicProvinceList';
  8. const { Column, ColumnGroup } = Table;
  9. import {socialAttribute,newFollow,lvl, customerStatus,intentionalService} from '../../../dataDic.js';
  10. import {getcustomerStatue,getprovince,getStatusFollow,getCompanyIntention,getfllowSituation,getContactType } from '../../../tools.js';
  11. const ServiceQuery= Form.create()(React.createClass({
  12. loadData(pageNo, apiUrl) {
  13. this.state.data = [];
  14. this.setState({
  15. loading: true
  16. });
  17. $.ajax({
  18. method: "post",
  19. dataType: "json",
  20. crossDomain: false,
  21. url:globalConfig.context + '/api/admin/customer/listAllBusiness',
  22. data: {
  23. pageNo: pageNo || 1,
  24. pageSize: this.state.pagination.pageSize,
  25. businessGlossoryId: this.state.businessIdS, //业务意向
  26. identifyName:this.state.identifyNameS,
  27. followSituation:this.state.followSituationS,
  28. customerStatus:this.state.customerStatusS,
  29. adminName: this.state.adminNameS,
  30. startDate: this.state.releaseDate[0],
  31. endDate: this.state.releaseDate[1],
  32. },
  33. success: function (data) {
  34. let theArr = [];
  35. if (data.error.length || data.data.list=="") {
  36. if (data.error && data.error.length) {
  37. message.warning(data.error[0].message);
  38. };
  39. } else {
  40. for (let i = 0; i < data.data.list.length; i++) {
  41. let thisdata = data.data.list[i];
  42. theArr.push({
  43. key: i,
  44. id: thisdata.id,
  45. businessId:thisdata.businessId,
  46. businessName:thisdata.businessName,
  47. identifyName:thisdata.identifyName,
  48. followSituation:thisdata.followSituation,
  49. customerStatus:thisdata.customerStatus,
  50. adminName:thisdata.adminName,
  51. createTime:thisdata.createTime
  52. });
  53. };
  54. };
  55. this.state.pagination.current = data.data.pageNo?data.data.pageNo:'0';
  56. this.state.pagination.total = data.data.totalCount?data.data.totalCount:'0';
  57. this.setState({
  58. dataSource: theArr,
  59. pagination: this.state.pagination
  60. });
  61. }.bind(this),
  62. }).always(function () {
  63. this.setState({
  64. loading: false
  65. });
  66. }.bind(this));
  67. },
  68. getInitialState() {
  69. return {
  70. dataSources:[],
  71. customerName:[],
  72. orgCodeUrl:[],
  73. companyLogoUrl:[],
  74. visible: false ,
  75. searchMore: true,
  76. releaseDate: [],
  77. releaseDate: [],
  78. selectedRowKeys: [],
  79. selectedRowKey: [],
  80. selectedRows: [],
  81. loading: false,
  82. pagination: {
  83. defaultCurrent: 1,
  84. defaultPageSize: 10,
  85. showQuickJumper: true,
  86. pageSize: 10,
  87. onChange: function (page) {
  88. this.loadData(page);
  89. }.bind(this),
  90. showTotal: function (total) {
  91. return '共' + total + '条数据';
  92. }
  93. },
  94. paginations: {
  95. defaultCurrent: 1,
  96. defaultPageSize: 10,
  97. showQuickJumper: true,
  98. pageSize: 10,
  99. onChange: function (page) {
  100. this.loadVisit(page);
  101. }.bind(this),
  102. showTotal: function (total) {
  103. return '共' + total + '条数据';
  104. }
  105. },
  106. businessFollowList: [
  107. {
  108. title: '跟进时间',
  109. dataIndex: 'followTime',
  110. key: 'followTime',
  111. }, {
  112. title: '营销员',
  113. dataIndex: 'adminName',
  114. key: 'adminName',
  115. }, {
  116. title: '意向进度',
  117. dataIndex: 'followSituation',
  118. key: 'followSituation',
  119. render:text=>{return getfllowSituation(text)}
  120. }, {
  121. title: '客户状态',
  122. dataIndex: 'customerStatus',
  123. key: 'customerStatus',
  124. render:text=>{return getcustomerStatue(text)}
  125. },
  126. {
  127. title: '拜访方式',
  128. dataIndex: 'contactType',
  129. key:'contactType',
  130. render:text=>{return getContactType(text)}
  131. }, {
  132. title: '联系人',
  133. dataIndex: 'contacts',
  134. key: 'contacts',
  135. },
  136. {
  137. title: '联系电话',
  138. dataIndex: 'contactMobile',
  139. key:'contactMobile',
  140. },
  141. ],
  142. columns: [
  143. {
  144. title: '业务名称',
  145. dataIndex: 'businessName',
  146. key: 'businessName',
  147. }, {
  148. title: '意向时间',
  149. dataIndex: 'createTime',
  150. key: 'createTime',
  151. }, {
  152. title: '客户名称',
  153. dataIndex: 'identifyName',
  154. key: 'identifyName',
  155. }, {
  156. title: '营销员',
  157. dataIndex: 'adminName',
  158. key: 'adminName',
  159. },
  160. {
  161. title: '意向进度',
  162. dataIndex: 'followSituation',
  163. key:'followSituation',
  164. render: text => { return getfllowSituation(text) }
  165. },
  166. {
  167. title: '客户状态',
  168. dataIndex: 'customerStatus',
  169. key: 'customerStatus',
  170. render: text => { return getcustomerStatue(text) }
  171. },
  172. ],
  173. dataSource: [],
  174. searchTime: [,]
  175. };
  176. },
  177. componentWillMount() {
  178. //意向服务
  179. let intentionalArr = [];
  180. newFollow.map(function (item) {
  181. intentionalArr.push(
  182. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  183. )
  184. });
  185. //客户状态
  186. let customerStatusArr = [];
  187. customerStatus.map(function (item) {
  188. customerStatusArr.push(
  189. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  190. )
  191. });
  192. this.state.intentionalOption = intentionalArr;
  193. this.state.customerStatusArrOption = customerStatusArr;
  194. this.loadData();
  195. },
  196. search() {
  197. this.loadData();
  198. },
  199. reset() {
  200. this.state.businessIdS=undefined; //名称1
  201. this.state.identifyNameS='';
  202. this.state.followSituationS=undefined;
  203. this.state.customerStatusS=undefined;
  204. this.state.adminNameS='';
  205. this.state.releaseDate[0]=undefined;
  206. this.state.releaseDate[1]=undefined;
  207. this.loadData();
  208. },
  209. searchSwitch() {
  210. this.setState({
  211. searchMore: !this.state.searchMore
  212. });
  213. },
  214. //查看基本详情基本信息
  215. loadInformation(record){
  216. $.ajax({
  217. method: "get",
  218. dataType: "json",
  219. crossDomain: false,
  220. url: globalConfig.context + '/api/admin/customer/toUpdateBusiness',
  221. data: {
  222. businessId: record
  223. },
  224. success: function (data) {
  225. let thisData = data.data;
  226. if (!thisData) {
  227. if (data.error && data.error.length) {
  228. message.warning(data.error[0].message);
  229. };
  230. thisData = {};
  231. };
  232. this.setState({
  233. uids:thisData.uid,
  234. dataInformation:thisData,
  235. followSituation:thisData.followSituation,
  236. businessGlossoryId:thisData.businessGlossoryId,
  237. customerStatus:thisData.customerStatus,
  238. remarks:thisData.remarks,
  239. });
  240. }.bind(this),
  241. }).always(function () {
  242. this.loadVisit();
  243. this.setState({
  244. loading: false
  245. });
  246. }.bind(this));
  247. },
  248. detailsModalOk(e) {
  249. this.setState({ modal5Visible:adminData.isSuperAdmin?true:false });//需要一个请求数据
  250. this.loadInformation(e.businessId)
  251. },
  252. //点击消失函数
  253. detailsModal(e) {
  254. this.setState({
  255. modal5Visible:false
  256. });
  257. },
  258. businessFollowOk(){
  259. this.setState({
  260. businessFollowModul:false
  261. });
  262. },
  263. businessFollowCancel(){
  264. this.setState({
  265. businessFollowModul:false
  266. });
  267. },
  268. //进入修改时
  269. listFollowUp(e){
  270. $.ajax({
  271. method: "get",
  272. dataType: "json",
  273. crossDomain: false,
  274. url: globalConfig.context + "/api/admin/customer/toUpdateFollowOneBusiness",
  275. data:{
  276. ufbId:e.ufbId
  277. },
  278. success: function (data) {
  279. let thedata=data.data;
  280. if (!thedata) {
  281. if (data.error && data.error.length) {
  282. message.warning(data.error[0].message);
  283. };
  284. thedata = {};
  285. };
  286. this.setState({
  287. businessGlossoryId:thedata.businessGlossoryId,
  288. followSituation:thedata.followSituation,
  289. customerStatus:thedata.customerStatus,
  290. followTime:thedata.followTime,
  291. createTime:thedata.createTime,
  292. identifyName:thedata.identifyName,
  293. contactType:parseInt(thedata.contactType),
  294. result:thedata.result,
  295. remarks:thedata.remarks,
  296. adminName:thedata.adminName,
  297. contacts:thedata.contacts,
  298. contactMobile:thedata.contactMobile,
  299. ufbId:thedata.ufbId,
  300. followId:thedata.followId,
  301. });
  302. }.bind(this),
  303. }).always(function () {
  304. this.setState({
  305. ufbIds:e.ufbId,
  306. loading: false
  307. });
  308. }.bind(this));
  309. },
  310. //新建HTTP获取数据
  311. addTime(){
  312. $.ajax({
  313. method: "get",
  314. dataType: "json",
  315. crossDomain: false,
  316. url: globalConfig.context + "/api/admin/customer/toAddBusinessAndFollow",
  317. data:{
  318. },
  319. success: function (data) {
  320. let theArr = [];
  321. let thedata=data.data;
  322. if (!thedata) {
  323. if (data.error && data.error.length) {
  324. message.warning(data.error[0].message);
  325. };
  326. thedata = {};
  327. };
  328. let creatMent=thedata.createTime.substr(10,9);
  329. let createYear=thedata.createTime.substr(0,10);
  330. this.setState({
  331. createTime:thedata.createTime,
  332. creatMent:creatMent,
  333. createYear:createYear,
  334. followTime:thedata.followTime,
  335. adminName: thedata.adminName,
  336. });
  337. }.bind(this),
  338. }).always(function () {
  339. this.setState({
  340. loading: false
  341. });
  342. }.bind(this));
  343. },
  344. //获取拜访详情ajax
  345. loadVisit(pageNo) {
  346. this.setState({
  347. loading: true
  348. });
  349. $.ajax({
  350. method: "get",
  351. dataType: "json",
  352. crossDomain: false,
  353. url:globalConfig.context + '/api/admin/customer/listFollowHistory',
  354. data: {
  355. pageNo: pageNo || 1,
  356. pageSize: this.state.paginations.pageSize,
  357. uid: this.state.uids, //名称1
  358. businessGlossoryId:this.state.businessGlossoryId,
  359. },
  360. success: function (data) {
  361. let theArr = [];
  362. if (data.error.length || data.data.list=="") {
  363. if (data.error && data.error.length) {
  364. message.warning(data.error[0].message);
  365. };
  366. } else {
  367. for (let i = 0; i < data.data.list.length; i++) {
  368. let thisdata = data.data.list[i];
  369. theArr.push({
  370. followId:thisdata.followId,
  371. followTime:thisdata.followTime,
  372. identifyName:thisdata.identifyName,
  373. contacts:thisdata.contacts,
  374. contactMobile:thisdata.contactMobile,
  375. result:thisdata.result,
  376. ufbId:thisdata.ufbId,
  377. adminName:thisdata.adminName,
  378. followSituation:thisdata.followSituation,
  379. customerStatus:thisdata.customerStatus,
  380. contactType:thisdata.contactType
  381. });
  382. };
  383. this.state.paginations.current = data.data.pageNo;
  384. this.state.paginations.total = data.data.totalCount;
  385. };
  386. this.setState({
  387. visitArrList: theArr,
  388. paginations: this.state.paginations
  389. });
  390. }.bind(this),
  391. }).always(function () {
  392. this.setState({
  393. loading: false
  394. });
  395. }.bind(this));
  396. },
  397. componentWillReceiveProps(nextProps) {
  398. if (!this.props.visible && nextProps.visible) {
  399. if (nextProps.data && nextProps.data.id) {
  400. this.loadData(nextProps.data.id, nextProps.detailApiUrl);
  401. };
  402. this.state.data = {};
  403. this.state.companyLogoUrl = [];
  404. this.state.orgCodeUrl = [];
  405. };
  406. },
  407. tableRowClick(record, index) {
  408. this.state.RowData = record;
  409. this.detailsModalOk(record);
  410. this.setState({
  411. selectedRowKeys:[],
  412. rowId:record.businessId,
  413. })
  414. },
  415. followRowClick(record, index) {
  416. this.state.RowData = record;
  417. this.listFollowUp(record);
  418. this.setState({
  419. businessFollowModul: true,
  420. selectedRowKeys:[],
  421. });
  422. },
  423. render() {
  424. const FormItem = Form.Item
  425. const rowSelection = {
  426. selectedRowKeys: this.state.selectedRowKeys,
  427. onChange: (selectedRowKeys, selectedRows) => {
  428. this.setState({
  429. selectedRows: selectedRows.slice(-1),
  430. selectedRowKeys: selectedRowKeys.slice(-1)
  431. });
  432. },
  433. onSelect: (recordt, selected, selectedRows) => {
  434. this.setState({
  435. recordt:recordt.id
  436. })
  437. },
  438. };
  439. const rowSelections = {
  440. selectedRowKeys: this.state.selectedRowKey,
  441. onChange: (selectedRowKey, selectedRow) => {
  442. this.setState({
  443. selectedRow: selectedRow.slice(-1),
  444. selectedRowKey: selectedRowKey.slice(-1)
  445. });
  446. },
  447. onSelect: (records, selected, selectedRow) => {
  448. this.setState({
  449. selectedRow: selectedRow.slice(-1),
  450. records:records.id,
  451. })
  452. },
  453. };
  454. const hasSelected = this.state.selectedRowKeys.length > 0;
  455. const { RangePicker } = DatePicker;
  456. const { getFieldDecorator } = this.props.form;
  457. const formItemLayout = {
  458. labelCol: { span: 8 },
  459. wrapperCol: { span: 14 },
  460. };
  461. const theInformation=this.state.dataInformation || {}
  462. const contactsOption="";
  463. const formItemLayput = {
  464. labelCol: { span: 10 },
  465. wrapperCol: { span: 14 },
  466. };
  467. const businessIds=this.state.businessId||'';
  468. const dataSources=this.state.customerArr || [];
  469. const options = dataSources.map((group) =>
  470. <Option key={group.id} value={group.name}>{group.name}</Option>
  471. )
  472. return (
  473. <div className="user-content" >
  474. <div className="content-title">
  475. <span>我的业务</span>
  476. </div>
  477. <div className="user-search">
  478. <Input placeholder="客户名称"
  479. value={this.state.identifyNameS}
  480. onChange={(e) => { this.setState({ identifyNameS: e.target.value }); }} />
  481. <Select placeholder="服务意向" value={this.state.businessIdS} onChange={(e) => {
  482. this.setState({businessIdS:e})}} style={{width:'150px'}}>
  483. {
  484. intentionalService.map(function (item) {
  485. return <Select.Option key={item.value} >{item.key}</Select.Option>
  486. })
  487. }
  488. </Select>
  489. <Button type="primary" onClick={this.search}>搜索</Button>
  490. <Button onClick={this.reset}>重置</Button>
  491. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  492. <div className='clearfix' style={{marginTop:'5px'}}>
  493. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  494. <RangePicker
  495. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  496. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  497. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  498. <Select placeholder="客户状态"
  499. style={{ width: 150 }}
  500. value={this.state.customerStatusS}
  501. onChange={(e) => { this.setState({ customerStatusS: e }) }}>
  502. {this.state.customerStatusArrOption}
  503. </Select>
  504. <Select placeholder="业务进度"
  505. style={{ width: 150 }}
  506. value={this.state.followSituationS}
  507. onChange={(e) => { this.setState({ followSituationS: e }) }}>
  508. {this.state.intentionalOption}
  509. </Select>
  510. <Input placeholder="营销员" style={{width:'150px'}}
  511. value={this.state.adminNameS}
  512. onChange={(e) => { this.setState({ adminNameS: e.target.value }); }} />
  513. </div>
  514. </div>
  515. </div>
  516. <div className="patent-table">
  517. <Spin spinning={this.state.loading}>
  518. <Table columns={this.state.columns}
  519. dataSource={this.state.dataSource}
  520. rowSelection={rowSelection}
  521. pagination={this.state.pagination}
  522. onRowClick={this.tableRowClick}
  523. />
  524. </Spin>
  525. </div>
  526. <Modal
  527. className="customeDetails"
  528. title="我的业务意向详情"
  529. width='1000px'
  530. visible={this.state.modal5Visible}
  531. onOk={this.detailsModal}
  532. onCancel={this.detailsModal}
  533. footer=''
  534. >
  535. <Form horizontal onSubmit={this.newSubmit} id="demand-form">
  536. <Spin spinning={this.state.loading}>
  537. <div className="clearfix">
  538. <FormItem className="half-item"
  539. {...formItemLayout}
  540. label="意向名称"
  541. >
  542. <span>{getCompanyIntention(theInformation.businessGlossoryId)}</span>
  543. </FormItem>
  544. <FormItem className="half-item"
  545. {...formItemLayout}
  546. label="意向时间"
  547. >
  548. <span>{theInformation.createTime}</span>
  549. </FormItem>
  550. <FormItem className="half-item"
  551. {...formItemLayout}
  552. label="客户名称"
  553. >
  554. <span>{theInformation.identifyName}</span>
  555. </FormItem>
  556. <FormItem className="half-item"
  557. {...formItemLayout}
  558. label="营销员"
  559. >
  560. <span>{theInformation.adminName}</span>
  561. </FormItem>
  562. <FormItem className="half-item"
  563. {...formItemLayout}
  564. label="意向进度"
  565. >
  566. <span>{getfllowSituation(theInformation.followSituation)}</span>
  567. </FormItem>
  568. <FormItem className="half-item"
  569. {...formItemLayout}
  570. label="客户状态"
  571. >
  572. <span>{getcustomerStatue(theInformation.customerStatus)}</span>
  573. </FormItem>
  574. <div className="clearfix">
  575. <FormItem
  576. labelCol={{ span: 4 }}
  577. wrapperCol={{ span: 16 }}
  578. label="意向说明" >
  579. <span>{this.state.remarks}</span>
  580. </FormItem>
  581. </div>
  582. </div>
  583. <div className="clearfix">
  584. <div style={{fontSize:'18px',marginLeft:'40px',marginBottom:'20px'}}>业务跟进</div>
  585. <div className="clearfix" style={{paddingLeft:'40px',paddingRight:'40px'}}>
  586. <Spin spinning={this.state.loading}>
  587. <Table
  588. pagination={this.state.paginations}
  589. columns={this.state.businessFollowList}
  590. dataSource={this.state.visitArrList}
  591. onRowClick={this.followRowClick}
  592. />
  593. </Spin>
  594. </div>
  595. </div>
  596. </Spin>
  597. </Form>
  598. </Modal>
  599. <Modal
  600. footer=''
  601. title="业务跟进详情"
  602. width='1000px'
  603. visible={this.state.businessFollowModul}
  604. onOk={this.businessFollowOk}
  605. onCancel={this.businessFollowCancel}
  606. >
  607. <div className="clearfix">
  608. <Form horizontal id="demand-form" >
  609. <Spin spinning={this.state.loading}>
  610. <div className="clearfix">
  611. <FormItem className="half-item"
  612. {...formItemLayout}
  613. label="意向名称"
  614. >
  615. <span>{getCompanyIntention(this.state.businessGlossoryId)}</span>
  616. </FormItem>
  617. <FormItem className="half-item"
  618. {...formItemLayout}
  619. label="意向时间"
  620. >
  621. <span>{this.state.createTime}</span>
  622. </FormItem>
  623. <FormItem className="half-item"
  624. {...formItemLayout}
  625. label="客户名称"
  626. >
  627. <span>{this.state.identifyName}</span>
  628. </FormItem>
  629. <FormItem className="half-item"
  630. {...formItemLayout}
  631. label="营销员"
  632. >
  633. <span>{this.state.adminName}</span>
  634. </FormItem>
  635. <FormItem className="half-item"
  636. {...formItemLayout}
  637. label="意向进度"
  638. >
  639. <span>{getfllowSituation(this.state.followSituation)}</span>
  640. </FormItem>
  641. <FormItem className="half-item"
  642. {...formItemLayout}
  643. label="客户状态"
  644. >
  645. <span>{getcustomerStatue(this.state.customerStatus)}</span>
  646. </FormItem>
  647. <div className="clearfix">
  648. <FormItem
  649. labelCol={{ span: 4 }}
  650. wrapperCol={{ span: 16 }}
  651. label="意向说明" >
  652. <span>{this.state.remarks}</span>
  653. </FormItem>
  654. </div>
  655. <div style={{fontSize:'18px',marginLeft:'30px'}}>拜访情况</div>
  656. <FormItem className="half-item"
  657. labelCol={{ span: 8 }}
  658. wrapperCol={{ span: 16 }}
  659. label="拜访方式" >
  660. <span>{getContactType(parseInt(this.state.contactType))}</span>
  661. </FormItem>
  662. <FormItem className="half-item"
  663. {...formItemLayout}
  664. label="当前联系人"
  665. >
  666. <span>{this.state.contacts}</span>
  667. </FormItem>
  668. <FormItem className="half-item"
  669. {...formItemLayout}
  670. label="拜访人"
  671. >
  672. <span>{this.state.adminName}</span>
  673. </FormItem>
  674. <FormItem className="half-item"
  675. {...formItemLayout}
  676. label="拜访时间" >
  677. <span>{this.state.followTime}</span>
  678. </FormItem>
  679. <FormItem
  680. labelCol={{ span: 4 }}
  681. wrapperCol={{ span: 16 }}
  682. label="拜访备注" >
  683. <span>{this.state.result}</span>
  684. </FormItem>
  685. </div>
  686. </Spin>
  687. </Form>
  688. </div>
  689. </Modal>
  690. </div >
  691. );
  692. }
  693. }));
  694. export default ServiceQuery;