feat:完成了工单接口（关单，删除，获取工单列表）的对接，工单详情对了一部分
This commit is contained in:
KindSeven
@@ -1,15 +1,56 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { 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 dataDetails = {};
|
||||
let opsCallList = {};
|
||||
const open = (row) => {
|
||||
dialogVisible.value = true;
|
||||
console.log(row);
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
console.log(123);
|
||||
const data = await orderGetDetails(props.rowData.orderNumber)
|
||||
|
||||
// console.log("111", data);
|
||||
return data
|
||||
|
||||
}
|
||||
|
||||
watch(() => props.rowData, (newRowData) => {
|
||||
if (newRowData) {
|
||||
// console.log(getData(newRowData));
|
||||
|
||||
getData(newRowData).then((data) => {
|
||||
// console.log(data.data);
|
||||
dataDetails = data.data
|
||||
console.log(dataDetails.value);
|
||||
opsCallList = dataDetails.opsCallList
|
||||
console.log(opsCallList);
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
}, {
|
||||
immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
|
||||
});
|
||||
// getData()
|
||||
|
||||
|
||||
|
||||
const test = [
|
||||
{
|
||||
content: "待处理",
|
||||
@@ -58,10 +99,12 @@ const data = [
|
||||
state: '已接通',
|
||||
time: '18 : 32',
|
||||
}]
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -70,7 +113,7 @@ defineExpose({
|
||||
<div class="common-layout">
|
||||
<el-container>
|
||||
<el-header class="header"><span>工单号 :</span>
|
||||
<span>666</span>
|
||||
<span>{{ rowData.orderNumber }}</span>
|
||||
</el-header>
|
||||
<el-container class="main-container">
|
||||
<el-aside width="200px" :style="{ position: 'static' }">
|
||||
@@ -79,7 +122,7 @@ defineExpose({
|
||||
<el-timeline-item v-for="(activity, index) in test" :key="index" :icon="activity.icon"
|
||||
:type="activity.type" :color="activity.color" :size="activity.size"
|
||||
:hollow="activity.hollow" :timestamp="activity.timestamp">
|
||||
{{ activity.content }}
|
||||
<p style="font-size: 17px;"> {{ activity.content }}</p>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
@@ -87,28 +130,28 @@ defineExpose({
|
||||
<el-main :style="{ position: 'static' }" class="main-content">
|
||||
<div class="top">
|
||||
<div class="info">
|
||||
<span>创始人 :</span>
|
||||
<span>处理人 :</span>
|
||||
<span>创始人 : {{ rowData.createBy }}</span>
|
||||
<span>处理人 :{{ rowData.operationUser }}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>工单名称 :</span>
|
||||
<span>关单人 :</span>
|
||||
<span>工单名称 :{{ rowData.siteName }}</span>
|
||||
<span>关单人 :{{ rowData.knotter }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div>
|
||||
<div>工单内容 :</div>
|
||||
<div class="text"></div>
|
||||
<div class="text">{{ rowData.orderContent }}</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div>工单内容 :</div>
|
||||
<div class="text"></div>
|
||||
<div>处理内容 :</div>
|
||||
<div class="text">{{ rowData.processedContent }}</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div>工单内容 :</div>
|
||||
<div class="text"></div>
|
||||
<div>录音信息 :</div>
|
||||
<div class="text">{{ rowData.recordUrl }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,18 +161,23 @@ defineExpose({
|
||||
<div>
|
||||
<el-scrollbar height="20vh">
|
||||
<el-timeline style="max-width: 99%" class="timeline">
|
||||
<el-timeline-item v-for="(activity, index) in test2" :key="index"
|
||||
<el-timeline-item v-for="(activity, index) in opsCallList" :key="index"
|
||||
:icon="activity.icon" :type="activity.type" :color="activity.color"
|
||||
:size="activity.size">
|
||||
<div class="custom-card">
|
||||
<div>{{ activity.date }}</div>
|
||||
<div v-for="(info, index) in data" :key="index">
|
||||
<div>
|
||||
<span :style="{color:'#a8abb2'}">{{ info.number }}</span>
|
||||
<span :style="{ color: info.state === '通话中' ? '#6cc23a' : '#409eff' }">{{ info.state }}</span>
|
||||
<span class="span-3th" :style="{color:'#a8abb2'}">{{ info.time }}</span>
|
||||
</div>
|
||||
<div>{{ activity.createTime }}</div>
|
||||
<!-- <div v-for="(info, index) in data" :key="index"> -->
|
||||
<div>
|
||||
<span :style="{ color: '#a8abb2' }">{{ activity.callIdNumber
|
||||
}}</span>
|
||||
<span :style="{
|
||||
color: activity.callState
|
||||
=== '通话中' ? '#6cc23a' : '#409eff'
|
||||
}">{{ activity.callState }}</span>
|
||||
<span class="span-3th" :style="{ color: '#a8abb2' }">{{
|
||||
activity.answer_time }}</span>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
@@ -172,7 +220,8 @@ defineExpose({
|
||||
|
||||
.main-content .info {
|
||||
border-bottom: 1.5px solid #e4e7ed;
|
||||
margin-bottom: 50px
|
||||
margin-bottom: 50px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.main-content .body {
|
||||
@@ -209,18 +258,19 @@ defineExpose({
|
||||
position: relative;
|
||||
left: 3px;
|
||||
// background-color: red;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.custom-card{
|
||||
.custom-card {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.custom-card span {
|
||||
padding-top: 10px;
|
||||
width: 20%;
|
||||
margin: 2px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.custom-card .span-3th {
|
||||
|
||||
Reference in New Issue
Block a user