123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484 |
- import React, { Component } from "react";
- import { Table, Spin, Button, message, Select, Modal, Icon } from "antd";
- import $ from "jquery/src/ajax";
- import moment from 'moment';
- import "./index.less";
- class Outbound extends Component {
- constructor(props) {
- super(props);
- this.state = {
- loading: false,
- pVisible: false,
- rVisible: false,
- tVisible: false,
- status: false,
- id: null,
- uList: [],
- tList: [],
- transAgent: "",
- mobile: '',
- info: {},
- dataSource: [],
- pagination: {
- defaultCurrent: 1,
- defaultPageSize: 10,
- showQuickJumper: true,
- pageSize: 10,
- onChange: function (page) {
- this.userCallList(page);
- }.bind(this),
- showTotal: function (total) {
- return '共' + total + '条数据';
- }
- },
- columns: [
- {
- title: '通话人',
- dataIndex: 'adminName',
- key: 'adminName',
- },
- {
- title: '联系人',
- dataIndex: 'contacts',
- key: 'contacts',
- },
- {
- title: '电话',
- dataIndex: 'mobile',
- key: 'mobile',
- },
- // {
- // title: '电话(尾号)',
- // dataIndex: 'mobileLastDigits',
- // key: 'mobileLastDigits',
- // width: 100,
- // },
- {
- title: '时长',
- dataIndex: 'duration',
- key: 'duration',
- render: (text) => {
- return this.isTime(text)
- }
- },
- {
- title: '时间',
- dataIndex: 'createTime',
- key: 'createTime',
- },
- {
- title: '备注',
- dataIndex: 'remarks',
- key: 'remarks',
- },
- ],
- };
- this.onOk = this.onOk.bind(this);
- this.blindTransferByAgent = this.blindTransferByAgent.bind(this);
- this.webSocket = null;
- }
- componentDidMount() {
- }
- componentWillUnmount() {
- }
- isTime(second) {
- let time = "0秒"
- if (second > 3600) {
- time = moment.utc(second * 1000).format('h小时m分s秒')
- } else if (second > 60) {
- time = moment.utc(second * 1000).format('m分s秒')
- } else {
- time = moment.utc(second * 1000).format('s秒')
- }
- return time
- }
- getWebSocket() {
- const _this = this
- if (typeof (WebSocket) == "undefined") {
- console.log('\x1b[31m您的浏览器不支持WebSocket\x1b[0m')
- } else {
- console.log('\x1b[32m您的浏览器支持WebSocket\x1b[0m')
- }
- // 测试
- // this.webSocket = new WebSocket('ws://uat.jishutao.com/webSocketServer');
- // 生产
- this.webSocket = new WebSocket('wss://bm.jishutao.com/webSocketServer');
- // 处理WebSocket打开事件
- this.webSocket.onopen = () => {
- console.log('WebSocke已打开');
- };
- // 处理收到消息的事件
- this.webSocket.onmessage = (event) => {
- const newMessage = event.data;
- console.log('WebSocke已连接', newMessage);
- _this.setState({
- status: false
- })
- // const newMessage = event.data;
- // this.setState((prevState) => ({
- // messages: [...prevState.messages, newMessage],
- // }));
- if (this.webSocket) {
- console.log("关闭WebSocket连接")
- this.webSocket.close();
- }
- };
- // 处理WebSocket关闭事件
- this.webSocket.onclose = () => {
- console.log('WebSocket已关闭');
- _this.setState({
- status: false
- })
- };
- // 处理WebSocket错误事件
- this.webSocket.onerror = (error) => {
- console.error('WebSocket出错了', error);
- _this.setState({
- status: false
- })
- };
- }
- onOk() {
- const { uid } = this.props
- this.setState({
- status: true,
- id: uid,
- })
- this.callNumber()
- }
- // 公共库-默认联系人
- getDefaultMobile() {
- const { uid } = this.props
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/userOutbound/getDefaultMobile",
- data: {
- uid,
- }
- }).done(function (data) {
- if (!data.error.length) {
- if (data.data) {
- let mobile = data.data.mobile
- this.setState({
- pVisible: true,
- mobile,
- })
- } else {
- message.warning("暂无查询到联系人号码~")
- }
- } else {
- message.warning(data.error[0].message);
- };
- }.bind(this));
- }
- // 私有-客户联系方式列表
- findCustomerContacts() {
- const { uid, isOwn = 0 } = this.props
- // isOwn
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
- data: {
- uid,
- type: isOwn,
- }
- }).done(function (data) {
- if (!data.error.length) {
- let list = data.data || [];
- let mobile = "";
- if (list && list.length > 0) {
- for (var i = 0; i < list.length; i++) {
- if (list[i].major == 1) {
- mobile = list[i].mobile
- }
- }
- }
- this.setState({
- pVisible: true,
- mobile: mobile,
- uList: list,
- })
- } else {
- message.warning(data.error[0].message);
- };
- }.bind(this));
- }
- // 转移列表
- agentList() {
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/userOutbound/agentList",
- data: {}
- }).done(function (data) {
- if (!data.error.length) {
- let newList = data.data || []
- this.setState({
- transAgent: newList[0].callNo,
- tList: newList
- })
- } else {
- message.warning(data.error[0].message);
- };
- }.bind(this));
- }
- // 呼叫
- callNumber() {
- const { uid } = this.props
- const { mobile } = this.state
- $.ajax({
- method: "post",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/userOutbound/callNumber",
- data: {
- uid,
- callee: mobile,
- }
- }).done(function (data) {
- if (!data.error.length) {
- this.setState({
- pVisible: false
- })
- message.success(data.data)
- } else {
- this.setState({
- status: false,
- id: null,
- })
- this.webSocket.close();
- message.warning(data.error[0].message);
- };
- }.bind(this));
- }
- // 呼叫转移
- blindTransferByAgent() {
- const { transAgent } = this.state
- const _this = this
- $.ajax({
- method: "post",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/userOutbound/blindTransferByAgent",
- data: {
- transAgent,
- }
- }).done(function (data) {
- if (!data.error.length) {
- _this.setState({
- tVisible: false
- })
- message.success(data.data)
- } else {
- message.warning(data.error[0].message);
- };
- }.bind(this));
- }
- // 通话记录
- userCallList(pageNo) {
- const { pagination } = this.state;
- const { uid } = this.props
- this.setState({
- loading: true,
- });
- $.ajax({
- method: "get",
- dataType: "json",
- crossDomain: false,
- url: globalConfig.context + "/api/admin/userOutbound/userCallList",
- data: {
- uid,
- pageNo: pageNo || 1,
- pageSize: pagination.pageSize,
- },
- success: function (data) {
- this.setState({
- loading: false,
- });
- if (data.error && data.error.length === 0) {
- if (data.data.page.list) {
- pagination.current = data.data.page.pageNo;
- pagination.total = data.data.page.totalCount;
- if (data.data.page && data.data.page.list && !data.data.page.list.length) {
- pagination.current = 0;
- pagination.total = 0;
- }
- this.setState({
- dataSource: data.data.page.list,
- pagination: this.state.pagination,
- pageNo: data.data.pageNo,
- info: data.data.sum
- });
- } else {
- this.setState({
- dataSource: data.data,
- pagination: false,
- });
- }
- } else {
- message.warning(data.error[0].message);
- }
- }.bind(this),
- }).always(
- function () {
- this.setState({
- loading: false,
- });
- }.bind(this)
- );
- }
- render() {
- const { id, status, pVisible, rVisible, tVisible, transAgent, tList, mobile, uList } = this.state
- const { type, uid, noTransfer = false } = this.props
- //noTransfer
- //type= history 只查看呼叫记录
- //type= private 私有呼叫
- //type= public 公共库呼叫
- return (
- <span>
- {type != "history" &&
- <Button
- style={{ background: ((id == uid) && status) ? "red" : "green", border: 0 }}
- type="primary"
- loading={pVisible}
- onClick={() => {
- if (status) {
- return
- }
- this.getWebSocket();
- type == "public"
- ? this.getDefaultMobile()
- : this.findCustomerContacts()
- }}
- >{!pVisible && <Icon type="phone" />} {((id == uid) && status) ? '正在通话中' : '呼叫'}</Button>}
- {type == "private" && status && (id == uid) && !noTransfer &&
- <Button
- style={{ background: "green", border: 0, marginLeft: 10 }}
- type="primary"
- onClick={() => {
- this.agentList();
- this.setState({ tVisible: true })
- }}
- ><Icon type="phone" /> 呼叫转移</Button>}
- <Button
- style={{ background: "green", border: 0, marginLeft: 10 }}
- type="primary"
- onClick={() => {
- this.userCallList();
- this.setState({ rVisible: true })
- }}
- ><Icon type="phone" /> 历史记录</Button>
- <Modal
- title="联系人电话"
- width={420}
- visible={pVisible}
- maskClosable={false}
- okText="呼叫"
- onOk={this.onOk}
- onCancel={() => {
- this.setState({
- pVisible: false
- })
- }}
- >
- <div className="contacts" style={{ position: "relative" }}>
- <Select
- style={{ width: 200 }}
- value={mobile}
- onChange={e => {
- this.setState({
- mobile: e
- })
- }}
- >
- {
- uList.map(item =>
- <Select.Option value={item.mobile} key={item.id}>{item.mobile}</Select.Option>
- )
- }
- </Select>
- {uList.length > 1 && <span style={{ color: 'red', position: "absolute", right: 0, top: 4 }}>有多电话可选!</span>}
- </div>
- </Modal>
- <Modal
- title="呼叫转移"
- width={420}
- visible={tVisible}
- maskClosable={false}
- okText="呼叫转移"
- onOk={this.blindTransferByAgent}
- onCancel={() => {
- this.setState({
- tVisible: false
- })
- }}
- >
- <div className="contacts">
- <Select
- style={{ width: 200 }}
- value={transAgent}
- onChange={(e) => {
- this.setState({
- transAgent: e
- })
- }}
- >
- {
- tList.map(item =>
- <Select.Option value={item.callNo} key={item.id}>{item.name}</Select.Option>
- )
- }
- </Select>
- </div>
- </Modal>
- <Modal
- title="历史记录"
- width={600}
- visible={rVisible}
- maskClosable={false}
- onCancel={() => {
- this.setState({
- rVisible: false
- })
- }}
- footer={null}
- >
- <div>
- <div style={{ marginBottom: 5 }}>公司名称:{this.state.info.name}</div>
- <div style={{ marginBottom: 10 }}>累计通话次数:{this.state.info.callCount}次 通话时长:{this.isTime(this.state.info.callDuration)}</div>
- <Spin spinning={this.state.loading}>
- <Table
- size="middle"
- columns={this.state.columns}
- dataSource={this.state.dataSource}
- pagination={this.state.pagination}
- />
- </Spin>
- </div>
- </Modal>
- </span>
- );
- }
- }
- export default Outbound;
|