424 lines
14 KiB
Vue
424 lines
14 KiB
Vue
<script setup>
|
||
import { nextTick, onMounted, reactive, ref, watch } from "vue";
|
||
import { ElMessageBox } from "element-plus";
|
||
import { MoreFilled, Check, Download, VideoPlay } from "@element-plus/icons-vue";
|
||
import { time } from "echarts";
|
||
import { defineExpose } from "vue";
|
||
import { defineProps } from "vue";
|
||
import { orderGetDetails } from "@/api/order/order.js"
|
||
import Voice from '@/components/voice/index.vue'
|
||
//控制显示隐藏
|
||
const dialogVisible = ref(false);
|
||
|
||
const props = defineProps({
|
||
rowData: Object
|
||
})
|
||
|
||
let opsCallList = ref([]);
|
||
let orderData = ref([]);
|
||
let orderContent = ref([]);
|
||
const voiceRef = ref()
|
||
const open = (row) => {
|
||
dialogVisible.value = true;
|
||
};
|
||
|
||
const getData = async () => {
|
||
// console.log(123);
|
||
const data = await orderGetDetails(props.rowData.orderNumber)
|
||
// console.log("111", data);
|
||
return data
|
||
|
||
}
|
||
let contentState0 = [
|
||
{
|
||
content: "待处理",
|
||
timestamp: "orderData.value",
|
||
icon: Check,
|
||
color: "#0bbd87",
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "已处理",
|
||
timestamp: "--",
|
||
type: "primary",
|
||
icon: MoreFilled,
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "结单",
|
||
timestamp: "--",
|
||
size: "large",
|
||
// icon: Check,
|
||
// color: "#0bbd87",
|
||
},
|
||
];
|
||
let contentState1 = [
|
||
{
|
||
content: "待处理",
|
||
timestamp: "orderData.value",
|
||
icon: Check,
|
||
color: "#0bbd87",
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "已处理",
|
||
timestamp: "2022-07-20 20:00:00",
|
||
icon: Check,
|
||
color: "#0bbd87",
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "结单",
|
||
timestamp: "--",
|
||
size: "large",
|
||
type: "primary",
|
||
icon: MoreFilled,
|
||
},
|
||
];
|
||
let contentState2 = [
|
||
{
|
||
content: "待处理",
|
||
timestamp: "orderData.value",
|
||
icon: Check,
|
||
color: "#0bbd87",
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "已处理",
|
||
timestamp: "2022-07-20 20:00:00",
|
||
icon: Check,
|
||
color: "#0bbd87",
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "结单",
|
||
timestamp: "2022-07-20 20:00:00",
|
||
size: "large",
|
||
icon: Check,
|
||
color: "#0bbd87",
|
||
},
|
||
];
|
||
|
||
watch(() => props.rowData, (newRowData) => {
|
||
if (newRowData) {
|
||
// console.log(getData(newRowData));
|
||
getData(newRowData).then((data) => {
|
||
opsCallList.value = []
|
||
orderData.value = data.data
|
||
|
||
//电话拨打记录
|
||
const dataDetails = data.data.opsCallList
|
||
console.log(dataDetails);
|
||
const theData = [{ createTime: '', data: [] }]
|
||
|
||
dataDetails.forEach(for1data => {
|
||
// console.log(for1data.createTime, '--------');
|
||
for (let i = 0; i < theData.length; i++) {
|
||
// console.log(theData[i]);
|
||
if (theData[i].createTime === for1data.createTime) {
|
||
theData[i].data.push(for1data)
|
||
break;
|
||
} else if (theData[i].createTime === '') {
|
||
theData[i].createTime = for1data.createTime
|
||
theData[i].data.push(for1data)
|
||
} else {
|
||
theData.push({ createTime: '', data: [] })
|
||
}
|
||
}
|
||
});
|
||
// theData.pop()
|
||
// theData[0].data.sort((a, b) => b.answer_time- a.answer_time)
|
||
console.log(theData);
|
||
theData.forEach(item => {
|
||
item.data.forEach(info => {
|
||
if (info.answeredTime !== null) {
|
||
// console.log(info.answeredTime);
|
||
let startIndex = info.answeredTime.indexOf(' ') + 1;
|
||
let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
|
||
info.answeredTime = timeOnly.replace(/:/g, ':')
|
||
// info.answeredTime = timeOnly
|
||
}
|
||
})
|
||
// item.data.sort((a, b) => a.answeredTime - b.answeredTime)
|
||
opsCallList.value.push(item)
|
||
})
|
||
|
||
//工单时间线
|
||
orderContent.value = []
|
||
console.log(orderData.value);
|
||
// orderData.value.orderState='2'
|
||
if (orderData.value.orderState === '0') {
|
||
inputOrderContent(contentState0)
|
||
}
|
||
else if (orderData.value.orderState === '1') {
|
||
inputOrderContent(contentState1)
|
||
}
|
||
else if (orderData.value.orderState === '2') {
|
||
inputOrderContent(contentState2)
|
||
}
|
||
// console.log(orderContent.value);
|
||
|
||
})
|
||
}
|
||
}, {
|
||
immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
|
||
});
|
||
const inputOrderTime = (item, index) => {
|
||
{
|
||
if (index === 0) {
|
||
item.timestamp = orderData.value.operationTime || '--'
|
||
} else if (index === 1) {
|
||
// item.timestamp = orderData.value.processedTime || '--'
|
||
} else {
|
||
// item.timestamp = orderData.value.completionTime || '--'
|
||
}
|
||
}
|
||
}
|
||
|
||
const inputOrderContent = (contentState) => {
|
||
contentState.map((item, index) => {
|
||
inputOrderTime(item, index)
|
||
})
|
||
contentState.forEach(item => {
|
||
orderContent.value.push(item)
|
||
})
|
||
}
|
||
|
||
const openRecord = () => {
|
||
voiceRef.value.open(true)
|
||
}
|
||
|
||
defineExpose({
|
||
open,
|
||
});
|
||
|
||
|
||
|
||
</script>
|
||
|
||
<template>
|
||
<el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%">
|
||
<div class="common-layout">
|
||
<el-container>
|
||
<el-header class="header"><span>工单号：</span>
|
||
<span>{{ rowData.orderNumber }}</span>
|
||
</el-header>
|
||
<el-container class="main-container">
|
||
<el-aside width="200px" :style="{ position: 'static' }">
|
||
<div class="aside-content">
|
||
<el-timeline style="max-width: 600px">
|
||
<el-timeline-item v-for="(activity, index) in orderContent" :key="index"
|
||
:icon="activity.icon" :type="activity.type" :color="activity.color"
|
||
:size="activity.size" :hollow="activity.hollow" :timestamp="activity.timestamp">
|
||
<p style="font-size: 17px;"> {{ activity.content }}</p>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</el-aside>
|
||
<el-main :style="{ position: 'static' }" class="main-content">
|
||
<div class="top">
|
||
<div class="info">
|
||
<!-- <span>创始人：{{ rowData.createBy }}</span> -->
|
||
<span>处理人：{{ rowData.operationUser }}</span>
|
||
</div>
|
||
<div class="info">
|
||
<span>工单名称：{{ rowData.orderName }}</span>
|
||
<span>关单人：{{ rowData.knotter }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="body">
|
||
<div>
|
||
<div>工单内容：</div>
|
||
<div class="textBox">
|
||
<el-scrollbar>
|
||
<div class="text">{{ rowData.orderContent }}</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>通话记录：</div>
|
||
<div class="textBox">
|
||
<el-scrollbar>
|
||
<div class="text">{{ rowData.processedContent }}</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
|
||
</div>
|
||
<div>
|
||
<div>录音信息：</div>
|
||
<div class="textBox—record">
|
||
|
||
<el-button @click="openRecord" type="primary" :icon="VideoPlay"
|
||
style="margin-right: 10px ;">播放录音
|
||
</el-button>
|
||
<voice ref="voiceRef" title="录音详情" />
|
||
<a :href="opsCallList.recordUrl" download="record.mp3">
|
||
<el-button type="primary" :icon="Download">下载录音</el-button>
|
||
</a>
|
||
<!-- <el-scrollbar> -->
|
||
<!-- <div class="text">{{ rowData.recordUrl }}</div> -->
|
||
<!-- </el-scrollbar> -->
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div>电话拨打记录：</div>
|
||
<div class="timebox">
|
||
<div>
|
||
<el-scrollbar height="20vh">
|
||
<el-timeline style="max-width: 99%" class="timeline">
|
||
<el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
|
||
icon="MoreFilled" type="primary" size="large">
|
||
<div class="custom-card">
|
||
<div style="font-weight: bold">{{ activity.createTime }}</div>
|
||
<div v-for="(info, index) in activity.data" :key="index">
|
||
<div class="timeline-row">
|
||
<span :style="{ color: '#a8abb2' }">{{ info.callIdNumber
|
||
}}</span>
|
||
<PointTag dictType="call_status" :value="info.callState"
|
||
class="tag" />
|
||
<!-- <span :style="{
|
||
color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
|
||
}">{{ info.callState }}</span> -->
|
||
<span class="span-3th" :style="{ color: '#a8abb2' }">{{
|
||
info.answeredTime || '00:00:00' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.header {
|
||
font-size: 27px;
|
||
color: black;
|
||
}
|
||
|
||
.aside-content {
|
||
position: relative;
|
||
left: 3px;
|
||
}
|
||
|
||
.main-content {
|
||
background-color: white;
|
||
|
||
}
|
||
|
||
.main-content span {
|
||
padding-bottom: 5px;
|
||
color: black;
|
||
display: inline-block;
|
||
width: 50%;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.main-content .info {
|
||
border-bottom: 1.5px solid #e4e7ed;
|
||
margin-bottom: 50px;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.main-content .body {
|
||
font-size: 17px;
|
||
color: black
|
||
}
|
||
|
||
.main-content .body .textBox {
|
||
width: 100%;
|
||
min-height: 10vh;
|
||
max-height: 15vh;
|
||
border: 1.5px solid #e4e7ed;
|
||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.main-content .body .textBox—record {
|
||
width: 100%;
|
||
min-height: 10vh;
|
||
// max-height: 15vh;
|
||
// border: 1.5px solid #e4e7ed;
|
||
// box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||
// margin-bottom: 20px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.main-content .body .text {
|
||
resize: none;
|
||
// overflow-y: auto;
|
||
font-size: 16px;
|
||
line-height: 25px
|
||
}
|
||
|
||
.main-content .footer {
|
||
color: black;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.main-content .timebox {
|
||
width: 100%;
|
||
height: 25vh;
|
||
border: 1.5px solid #e4e7ed;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
box-shadow: 0 4px 8px 0 rgba(242, 242, 242, 1);
|
||
// overflow-x: hidden;
|
||
}
|
||
|
||
.main-content .timeline {
|
||
// width: 100%;
|
||
position: relative;
|
||
left: 3px;
|
||
// background-color: red;
|
||
|
||
}
|
||
|
||
.main-content .timeline-row {
|
||
// border: 1px solid #000;
|
||
display: flex;
|
||
// justify-content: space-between;
|
||
// border: 1px solid #000;
|
||
|
||
}
|
||
|
||
.main-content .tag {
|
||
align-items: center;
|
||
// background-color: red;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.main-content .span-3th {
|
||
// flex-grow: 1;
|
||
// margin-right:;
|
||
flex: 1;
|
||
text-align: right;
|
||
margin-right: 100px;
|
||
|
||
}
|
||
|
||
.custom-card {
|
||
width: 100%;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.custom-card span {
|
||
padding-top: 10px;
|
||
width: 20%;
|
||
margin: 2px;
|
||
|
||
}
|
||
</style>
|