You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
simple-yewu/frontend/views/phone-center/call-records.php

190 lines
8.9 KiB

<?php
use \common\libs\MyLib;
?>
<?php $this->beginBlock('header_css'); ?>
<link href="/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<?php $this->endBlock(); ?>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>通话记录</h5>
<div class="ibox-tools">
<a class="btn btn-primary btn-xs edit-btn" data-id="0" href="javascript:void(0);" onclick="$('#listTable').bootstrapTable('refresh');">
<i class="fa fa-refresh"></i> 刷新
</a>
</div>
</div>
<div class="ibox-content">
<form role="form" class="form-inline" onsubmit="return search();">
<input type="hidden" name="company_type" id="company_type" value="<?=$company_type?>">
5 years ago
<?php if($company_type == 3) { ?>
<div class="form-group" style="margin-bottom: 8px;">
<label for="username">工号</label>
<input type="text" id="username" name="username" class="form-control">
</div>
<?php } ?>
<div class="form-group" style="margin-bottom: 8px;">
<label for="datepicker">通话时间</label>
<div class="input-group" id="datepicker">
<input type="text" class="form-control" id="begin_time" name="begin_time" value="" autocomplete="off" />
<span class="input-group-addon"></span>
<input type="text" class="form-control" id="end_time" name="end_time" value="" autocomplete="off" />
</div>
</div>
<div class="form-group" style="margin-bottom: 8px;">
<label for="caller">主叫电话</label>
<input type="text" id="caller" name="caller" class="form-control">
</div>
<div class="form-group" style="margin-bottom: 8px;">
<label for="called">被叫电话</label>
<input type="text" id="called" name="called" class="form-control">
</div>
<div class="form-group" style="margin-bottom: 8px;">
<label for="call_result">通话状态</label>
<select name="call_result" id="call_result" class="form-control">
<option value="">请选择</option>
<option value="ANSWERED">通话成功</option>
<option value="BUSY">被叫忙</option>
<option value="NO_ANSWER">被叫无应答</option>
<option value="REJECT">被叫拒接</option>
<option value="HANGUP">主叫提前挂机</option>
<option value="INVALID_NUMBER">空号</option>
<option value="POWER_OFF">关机</option>
<option value="UNAVAILABLE">暂时无法接听</option>
<option value="SUSPEND">停机</option>
<option value="TP_NO_BINDING">无绑定关系</option>
<option value="TP_TIMEOUT">号码查询接口超时</option>
<option value="BLACK">黑名单号码</option>
<option value="TP_ERROR">号码查询接口解析错误</option>
<option value="CALLED_BLACK">被叫不支持</option>
<option value="CALL_FORWARD">呼叫转移</option>
<option value="OTHER">其他失败情形</option>
</select>
</div>
<div class="form-group" style="margin-bottom: 8px;">
<label for="duration">通话时长</label>
<div class="input-group" id="duration">
<input type="text" id="duration_begin" name="duration_begin" class="form-control" size="3">
<span class="input-group-addon"></span>
<input type="text" id="duration_end" name="duration_end" class="form-control" size="3">
<span class="input-group-addon">截止(秒为单位)</span>
</div>
</div>
<div class="form-group" style="margin-bottom: 8px;">
<label class="control-label">客户来电</label>
<select name="is_called" name="is_called" class="form-control">
<option value="0">全部</option>
<option value="1" ></option>
<option value="2" ></option>
</select>
</div>
<button type="submit" class="btn btn-primary">搜索</button>
</form>
<div class="row">
<div class="col-md-12">
<table id="listTable">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="username">坐席人员</th>
<th data-field="begin_time">通话时间</th>
<th data-field="caller">主叫真实号码</th>
<th data-field="called">被叫真实号码</th>
<th data-field="caller_show">主叫分配号码</th>
<th data-field="called_show">被叫分配号码</th>
<th data-field="call_duration">通话时长</th>
<th data-field="call_result">通话状态</th>
<th data-formatter="opFormatter">语音</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="player" class="hidden">
<audio controls>
<!-- Audio files -->
<source src="http://music.baidu.com/cms/app/muplayer/test_mp3/1.mp3" type="audio/mp3">
<!-- Fallback for browsers that don't support the <audio> element -->
您的浏览器不支持在线播放,请<a href="http://music.baidu.com/cms/app/muplayer/test_mp3/1.mp3">下载</a>
</audio>
</div>
<?php $this->beginBlock('footer_js'); ?>
<script src="/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/js/plugins/layer/laydate/laydate.js"></script>
<script>
function opFormatter(value, row, index) {
var opStr = [];
if(row.record_file_url !== null) {
5 years ago
opStr.push('<a href="javascript:void(0);" onclick="play(\'' + row.record_file_url + '\')">');
} else {
5 years ago
opStr.push('<a href="javascript:void(0);" onclick="play(\'' + row.record_file_url_real + '\')">');
}
opStr.push('<i class="fa fa-play" title="播放"></i>');
opStr.push('</a>');
return opStr.join(' ');
}
function play(url) {
var body = '<audio controls>';
body += '<source src="' + url + '" type="audio/mp3">';
body += '您的浏览器不支持在线播放,请<a href="' + url + '">下载</a>';
body += '</audio>';
parent.layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['320px', '130px'], //宽高
title: '播放语音',
content: body
});
}
function refreshList() {
$('#listTable').bootstrapTable('refresh');
}
function search() {
$('#listTable').bootstrapTable('destroy');
$('#listTable').bootstrapTable({
url: "/phone-center/call-records-json",
pagination: true,
sidePagination: 'server',
queryParams: function(params) {
params.username = $('#username').val();
params.begin_time = $('#begin_time').val();
params.end_time = $('#end_time').val();
params.caller = $('#caller').val();
params.called = $('#called').val();
params.call_result = $('#call_result').val();
params.duration_begin = $('#duration_begin').val();
params.duration_end = $('#duration_end').val();
params.is_called = $('#is_called').val();
params.company_type = $('#company_type').val();
return params;
}
});
return false;
}
$(function() {
search();
laydate({
elem:'#begin_time',
format: 'YYYY-MM-DD hh:mm:ss',
istime: true
});
laydate({
elem:'#end_time',
format: 'YYYY-MM-DD hh:mm:ss',
istime: true
});
});
</script>
<?php $this->endBlock(); ?>