|
|
@@ -0,0 +1,350 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="app-content">
|
|
|
+ <div class="title">我的外呼记录 <span v-if="sumBillingMinute != null" class="sum-info">计费分钟合计：{{ sumBillingMinute }}分钟</span></div>
|
|
|
+ <!-- 筛选区域 -->
|
|
|
+ <el-form class="search-form" :model="queryParams" ref="queryForm" :inline="true">
|
|
|
+ <el-form-item label="手机" prop="callerNum">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.callerNum"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 180px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="加密手机" prop="encryptedCallerNum">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.encryptedCallerNum"
|
|
|
+ placeholder="请输入加密手机"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 220px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
|
|
|
+ <el-option label="成功" :value="2" />
|
|
|
+ <el-option label="失败" :value="3" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="创建时间" prop="dateRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="通话时长(秒)">
|
|
|
+ <el-input v-model="queryParams.minCallTime" placeholder="最小时长" size="small" style="width: 100px" />
|
|
|
+ <span style="margin: 0 4px">-</span>
|
|
|
+ <el-input v-model="queryParams.maxCallTime" placeholder="最大时长" size="small" style="width: 100px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 表格区域 -->
|
|
|
+ <el-table border v-loading="loading" :data="list">
|
|
|
+ <el-table-column label="客户号码" align="center" prop="callerNum" width="140">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ desensitizePhone(scope.row.callerNum) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="坐席号码" align="center" prop="calleeNum" width="140" />
|
|
|
+ <el-table-column label="呼叫时间" align="center" prop="callCreateTime" width="165">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.callCreateTime ? parseTime(scope.row.callCreateTime, '{y}-{m}-{d} {h}:{i}') : '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="接通时间" align="center" prop="callAnswerTime" width="165">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ formatAnswerTime(scope.row.callAnswerTime, scope.row.callCreateTime) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="通话时长" align="center" prop="callTime" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.callTime != null">{{ Math.ceil(scope.row.callTime / 1000) }}秒</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" align="center" prop="status" width="90">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.status == 2" type="success">成功</el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.status == 3" type="danger">失败</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="计费分钟" align="center" prop="billingMinute" width="90">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.billingMinute != null">{{ scope.row.billingMinute }}分钟</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column v-if="checkPermi(['crm:customer:showCallInfo'])" label="录音" align="center" prop="recordPath" min-width="280" show-overflow-tooltip>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <audio v-if="scope.row.recordPath != null" controls :src="handleRecordPath(scope.row.recordPath)"></audio>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="165">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ formatCreateTime(scope.row.createTime) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button v-if="checkPermi(['crm:customer:showCallInfo'])" size="mini" type="text" @click="handleShowContent(scope.row)">查看对话</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 对话记录弹窗 -->
|
|
|
+ <el-dialog title="对话记录" :visible.sync="contentDialog.visible" width="900px" append-to-body class="content-dialog">
|
|
|
+ <div class="content-dialog-wrapper">
|
|
|
+ <div v-if="!contentDialog.content" class="content-empty">
|
|
|
+ 暂无对话内容
|
|
|
+ </div>
|
|
|
+ <div v-else class="chat-container">
|
|
|
+ <div
|
|
|
+ v-for="(msg, index) in parseContentList(contentDialog.content)"
|
|
|
+ :key="index"
|
|
|
+ :class="['chat-item', msg.role === 'user' ? 'chat-right' : 'chat-left']"
|
|
|
+ >
|
|
|
+ <div class="chat-bubble-wrapper">
|
|
|
+ <div class="chat-role">
|
|
|
+ {{ msg.role === 'user' ? '客户' : '客服' }}
|
|
|
+ </div>
|
|
|
+ <div class="chat-bubble">
|
|
|
+ {{ msg.content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listMyManualOutboundCallLog, mySumBillingMinute } from "@/api/crm/manualOutboundCallLog";
|
|
|
+import { parseTime } from "@/utils/common";
|
|
|
+import { checkPermi } from "@/utils/permission";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "MyManualOutboundCallLog",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 列表数据
|
|
|
+ list: [],
|
|
|
+ // 日期范围
|
|
|
+ dateRange: [],
|
|
|
+ // 计费分钟合计
|
|
|
+ sumBillingMinute: null,
|
|
|
+ // 对话记录弹窗
|
|
|
+ contentDialog: {
|
|
|
+ visible: false,
|
|
|
+ content: ''
|
|
|
+ },
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ callerNum: null,
|
|
|
+ encryptedCallerNum: null,
|
|
|
+ status: null,
|
|
|
+ minCallTime: null,
|
|
|
+ maxCallTime: null
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ parseTime,
|
|
|
+ checkPermi,
|
|
|
+ desensitizePhone(phone) {
|
|
|
+ if (!phone || phone.length < 7) return phone;
|
|
|
+ return phone.substring(0, 3) + '****' + phone.substring(phone.length - 4);
|
|
|
+ },
|
|
|
+ formatAnswerTime(answerTime, callCreateTime) {
|
|
|
+ if (!answerTime || answerTime === 0 || answerTime === '0' || answerTime === '') return '';
|
|
|
+ if (callCreateTime && new Date(answerTime).getTime() < new Date(callCreateTime).getTime()) return '';
|
|
|
+ var result = parseTime(answerTime, '{y}-{m}-{d} {h}:{i}');
|
|
|
+ return result || '';
|
|
|
+ },
|
|
|
+ formatCreateTime(time) {
|
|
|
+ if (!time) return '-';
|
|
|
+ if (typeof time === 'string') {
|
|
|
+ return time.replace('T', ' ').substring(0, 16);
|
|
|
+ }
|
|
|
+ return parseTime(time, '{y}-{m}-{d} {h}:{i}') || '-';
|
|
|
+ },
|
|
|
+ handleRecordPath(recordPath) {
|
|
|
+ if (!recordPath) return '';
|
|
|
+ let fullUrl = '';
|
|
|
+ if (recordPath.startsWith('http')) {
|
|
|
+ fullUrl = recordPath;
|
|
|
+ } else {
|
|
|
+ fullUrl = 'http://129.28.164.235:8899/recordings/files?filename=' + recordPath;
|
|
|
+ }
|
|
|
+ return process.env.VUE_APP_BASE_API + '/common/proxy/recording?url=' + encodeURIComponent(fullUrl);
|
|
|
+ },
|
|
|
+ handleShowContent(row) {
|
|
|
+ this.contentDialog.content = row.contentList || '';
|
|
|
+ this.contentDialog.visible = true;
|
|
|
+ },
|
|
|
+ parseContentList(content) {
|
|
|
+ if (!content) return [];
|
|
|
+ try {
|
|
|
+ const parsed = typeof content === 'string' ? JSON.parse(content) : content;
|
|
|
+ if (!Array.isArray(parsed)) return [];
|
|
|
+ return parsed.filter(item => {
|
|
|
+ if (!item) return false;
|
|
|
+ if (item.role === 'system') return false;
|
|
|
+ const text = item.content || '';
|
|
|
+ if (!String(text).trim()) return false;
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.error('解析 contentList 失败', e);
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 查询列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ const params = { ...this.queryParams };
|
|
|
+ if (this.dateRange && this.dateRange.length === 2) {
|
|
|
+ params.beginTime = this.dateRange[0];
|
|
|
+ params.endTime = this.dateRange[1];
|
|
|
+ }
|
|
|
+ // 前端输入秒，直接传秒给后端，由SQL用CEILING(call_time/1000)匹配
|
|
|
+ listMyManualOutboundCallLog(params).then(response => {
|
|
|
+ this.list = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ // 查询当前条件下的计费分钟合计
|
|
|
+ mySumBillingMinute(params).then(response => {
|
|
|
+ this.sumBillingMinute = response.data.sumBillingMinute;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.dateRange = [];
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-container {
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ .app-content {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .sum-info {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #409eff;
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-form {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content-dialog-wrapper {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+.content-empty {
|
|
|
+ text-align: center;
|
|
|
+ color: #909399;
|
|
|
+ padding: 40px 0;
|
|
|
+}
|
|
|
+.chat-container {
|
|
|
+ max-height: 600px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 16px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+.chat-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 14px;
|
|
|
+}
|
|
|
+.chat-left {
|
|
|
+ justify-content: flex-start;
|
|
|
+}
|
|
|
+.chat-right {
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.chat-bubble-wrapper {
|
|
|
+ max-width: 75%;
|
|
|
+}
|
|
|
+.chat-role {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+.chat-left .chat-role {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.chat-right .chat-role {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.chat-bubble {
|
|
|
+ padding: 10px 14px;
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.6;
|
|
|
+ word-break: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
+}
|
|
|
+.chat-left .chat-bubble {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+ color: #303133;
|
|
|
+}
|
|
|
+.chat-right .chat-bubble {
|
|
|
+ background: #409eff;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
