From 4267612a5e4447a35e94216765fae90221ba86fa Mon Sep 17 00:00:00 2001
From: KindSeven <2845382437@qq.com>
Date: Tue, 17 Sep 2024 18:27:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E4=BA=86=E5=B7=A5?=
 =?UTF-8?q?=E5=8D=95=E7=8A=B6=E6=80=81=E6=97=B6=E9=97=B4=E5=92=8C=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=9A=84=E6=98=BE=E7=A4=BAbug=EF=BC=8C=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E4=BA=86=E5=88=9B=E5=A7=8B=E4=BA=BA=EF=BC=8C=E5=BD=95?=
 =?UTF-8?q?=E9=9F=B3=E4=BF=A1=E6=81=AF=E6=94=B9=E4=B8=BA=E4=B8=A4=E4=B8=AA?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=92=AD=E6=94=BE=E5=BD=95=E9=9F=B3=E5=92=8C?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BD=E5=BD=95=E9=9F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/voice/index.vue                |   6 +-
 src/views/home/index.vue                      |   2 +-
 .../task-management/all-work-order/index.vue  |   2 +-
 .../task-management/components/WorkDialog.vue | 189 +++++++++++-------
 4 files changed, 127 insertions(+), 72 deletions(-)

diff --git a/src/components/voice/index.vue b/src/components/voice/index.vue
index 74850d3..e908a15 100644
--- a/src/components/voice/index.vue
+++ b/src/components/voice/index.vue
@@ -3,6 +3,10 @@ const dialogVisible = ref(false);
 const open = (row) => {
     dialogVisible.value = true;
 };
+// console.log(dialogVisible.value);
+defineProps({
+    title:String
+})
 defineExpose({
     open,
 });
@@ -10,7 +14,7 @@ defineExpose({
 </script>
 
 <template>
-    <el-dialog v-model="dialogVisible" title="语音详情" width="500" :before-close="handleClose">
+    <el-dialog v-model="dialogVisible" :title="title" width="500" >
         <audio src="" controls style="width: 100%;"></audio>
         <template #footer>
             <div class="dialog-footer">
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 292d197..e6edaab 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="call-history"><h3 >历史通话记录</h3>
       <fvTable ref="tableIns" :tableConfig="tableConfig" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
-      <voice ref="voiceRef" />
+      <voice ref="voiceRef" title="语音详情"/>
       <infoLiveCall ref="infoLiveCallRef"/>
     </div>
   </div>
diff --git a/src/views/task-management/all-work-order/index.vue b/src/views/task-management/all-work-order/index.vue
index 8b5d480..70561a8 100644
--- a/src/views/task-management/all-work-order/index.vue
+++ b/src/views/task-management/all-work-order/index.vue
@@ -260,7 +260,7 @@ const headBtnClick = (key) => {
 const handleDetail = (row) => {
   // console.log(row);
   
-  workDialogRef.value.open(row)
+  workDialogRef.value.open()
   rowData.value = row
 }
 
diff --git a/src/views/task-management/components/WorkDialog.vue b/src/views/task-management/components/WorkDialog.vue
index 49bf07d..104a077 100644
--- a/src/views/task-management/components/WorkDialog.vue
+++ b/src/views/task-management/components/WorkDialog.vue
@@ -1,20 +1,23 @@
 <script setup>
 import { nextTick, onMounted, reactive, ref, watch } from "vue";
 import { ElMessageBox } from "element-plus";
-import { MoreFilled } from "@element-plus/icons-vue";
+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;
 };
@@ -22,29 +25,77 @@ const open = (row) => {
 const getData = async () => {
     // console.log(123);
     const data = await orderGetDetails(props.rowData.orderNumber)
-
     // console.log("111", data);
     return data
 
 }
-
-let content = [
+let contentState0 = [
     {
         content: "待处理",
         timestamp: "orderData.value",
+        icon: Check,
         color: "#0bbd87",
+        size: "large",
     },
     {
         content: "已处理",
-        timestamp: "2022-07-20 20:00",
+        timestamp: "--",
         type: "primary",
         icon: MoreFilled,
         size: "large",
     },
     {
         content: "结单",
-        timestamp: "2022-07-20 20:00",
+        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",
     },
 ];
 
@@ -54,6 +105,7 @@ watch(() => props.rowData, (newRowData) => {
         getData(newRowData).then((data) => {
             opsCallList.value = []
             orderData.value = data.data
+
             //电话拨打记录
             const dataDetails = data.data.opsCallList
             // console.log(dataDetails);
@@ -80,36 +132,28 @@ watch(() => props.rowData, (newRowData) => {
                     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(':', ' : ')
+                        let timeOnly = info.answeredTime.slice(startIndex, startIndex + 8);
+                        info.answeredTime = timeOnly.replace(/:/g, ':')
+                        // info.answeredTime = timeOnly
                     }
                 })
-                // 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(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);
 
         })
@@ -117,37 +161,31 @@ watch(() => props.rowData, (newRowData) => {
 }, {
     immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
 });
-// getData()
-
-
-const test2 = [
+const inputOrderTime = (item, index) => {
     {
-
-        date: '2024-8-31',
-        type: "primary",
-        icon: MoreFilled,
-        size: "large",
-    }, {
-        content: "结单",
-        size: "large",
+        if (index === 0) {
+            item.timestamp = orderData.value.operationTime || '--'
+        } else if (index === 1) {
+            // item.timestamp = orderData.value.processedTime || '--'
+        } else {
+            // item.timestamp = orderData.value.completionTime || '--'
+        }
     }
-];
-// const data = [
-//     {
-//         number: '17628661307',
-//         state: '通话中',
-//         time: '18 : 32',
-//     },
-//     {
-//         number: '17628661307',
-//         state: '已接通',
-//         time: '18 : 32',
-//     },
-//     {
-//         number: '17628661307',
-//         state: '已接通',
-//         time: '18 : 32',
-//     }]
+}
+
+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,
 });
@@ -178,11 +216,11 @@ defineExpose({
                     <el-main :style="{ position: 'static' }" class="main-content">
                         <div class="top">
                             <div class="info">
-                                <span>创始人：{{ rowData.createBy }}</span>
+                                <!-- <span>创始人：{{ rowData.createBy }}</span> -->
                                 <span>处理人：{{ rowData.operationUser }}</span>
                             </div>
                             <div class="info">
-                                <span>工单名称：{{ rowData.siteName }}</span>
+                                <span>工单名称：{{ rowData.orderName }}</span>
                                 <span>关单人：{{ rowData.knotter }}</span>
                             </div>
                         </div>
@@ -196,7 +234,7 @@ defineExpose({
                                 </div>
                             </div>
                             <div>
-                                <div>处理内容：</div>
+                                <div>通话记录：</div>
                                 <div class="textBox">
                                     <el-scrollbar>
                                         <div class="text">{{ rowData.processedContent }}</div>
@@ -206,10 +244,17 @@ defineExpose({
                             </div>
                             <div>
                                 <div>录音信息：</div>
-                                <div class="textBox">
-                                    <el-scrollbar>
-                                        <div class="text">{{ rowData.recordUrl }}</div>
-                                    </el-scrollbar>
+                                <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>
@@ -234,7 +279,7 @@ defineExpose({
                                                                 color: info.callState === '通话中' ? '#6cc23a' : '#409eff'
                                                             }">{{ info.callState }}</span> -->
                                                             <span class="span-3th" :style="{ color: '#a8abb2' }">{{
-                                                                info.answeredTime || '00 : 00' }}</span>
+                                                                info.answeredTime || '00:00:00' }}</span>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -298,13 +343,19 @@ defineExpose({
     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
 }