370 lines
12 KiB
Vue
370 lines
12 KiB
Vue
<script setup>
|
||
import { nextTick, onMounted, reactive, ref, watch } from "vue";
|
||
import { ElMessageBox } from "element-plus";
|
||
import { MoreFilled } from "@element-plus/icons-vue";
|
||
import { time } from "echarts";
|
||
import { defineExpose } from "vue";
|
||
import { defineProps } from "vue";
|
||
import { orderGetDetails } from "@/api/order/order.js"
|
||
//控制显示隐藏
|
||
const dialogVisible = ref(false);
|
||
|
||
const props = defineProps({
|
||
rowData: Object
|
||
})
|
||
let opsCallList = ref([]);
|
||
let orderData = ref([]);
|
||
let orderContent = 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 content = [
|
||
{
|
||
content: "待处理",
|
||
timestamp: "orderData.value",
|
||
color: "#0bbd87",
|
||
},
|
||
{
|
||
content: "已处理",
|
||
timestamp: "2022-07-20 20:00",
|
||
type: "primary",
|
||
icon: MoreFilled,
|
||
size: "large",
|
||
},
|
||
{
|
||
content: "结单",
|
||
timestamp: "2022-07-20 20:00",
|
||
size: "large",
|
||
},
|
||
];
|
||
|
||
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 => {
|
||
theData.forEach(for2data => {
|
||
if (for1data.createTime !== for2data.createTime) {
|
||
// console.log(for2data);
|
||
for2data.createTime = for1data.createTime
|
||
for2data.data.push(for1data)
|
||
theData.push({ createTime: for1data.createTime, data: [] })
|
||
} else {
|
||
for2data.data.push(for1data)
|
||
return;
|
||
}
|
||
})
|
||
});
|
||
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 + 5);
|
||
info.answeredTime = timeOnly.replace(':', ' : ')
|
||
}
|
||
})
|
||
// console.log(item.data);
|
||
|
||
// item.data.sort((a, b) => a.answeredTime - b.answeredTime)
|
||
opsCallList.value.push(item)
|
||
})
|
||
console.log(opsCallList.value);
|
||
|
||
//工单时间线
|
||
orderContent.value = []
|
||
// console.log(orderData.value);
|
||
content.map((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 || '--'
|
||
|
||
}
|
||
|
||
})
|
||
content.forEach(item => {
|
||
orderContent.value.push(item)
|
||
})
|
||
|
||
// console.log(orderContent.value);
|
||
|
||
})
|
||
}
|
||
}, {
|
||
immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
|
||
});
|
||
// getData()
|
||
|
||
|
||
const test2 = [
|
||
{
|
||
|
||
date: '2024-8-31',
|
||
type: "primary",
|
||
icon: MoreFilled,
|
||
size: "large",
|
||
}, {
|
||
content: "结单",
|
||
size: "large",
|
||
}
|
||
];
|
||
// const data = [
|
||
// {
|
||
// number: '17628661307',
|
||
// state: '通话中',
|
||
// time: '18 : 32',
|
||
// },
|
||
// {
|
||
// number: '17628661307',
|
||
// state: '已接通',
|
||
// time: '18 : 32',
|
||
// },
|
||
// {
|
||
// number: '17628661307',
|
||
// state: '已接通',
|
||
// time: '18 : 32',
|
||
// }]
|
||
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.siteName }}</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">
|
||
<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' }}</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 .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>
|