feat:完成了工作台，修复了工单详情v-for不渲染的bug，增添了信息滚动条

src/views/task-management/components/WorkDialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, reactive, ref, watch } from "vue";
+import { nextTick, onMounted, reactive, ref, watch } from "vue";
 import { ElMessageBox } from "element-plus";
 import { MoreFilled } from "@element-plus/icons-vue";
 import { time } from "echarts";
@@ -13,8 +13,8 @@ const dialogVisible = ref(false);
 const props = defineProps({
     rowData: Object
 })
-let dataDetails = {};
-let opsCallList = {};
+let dataDetails = ref();
+let opsCallList = ref([]);
 const open = (row) => {
     dialogVisible.value = true;
 };
@@ -31,18 +31,17 @@ const getData = async () => {
 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);
-
+            dataDetails = data.data.opsCallList
+            // console.log(dataDetails);
+            // opsCallList = dataDetails.opsCallList
+            dataDetails.forEach(item => {
+                // console.log(item);      
+                opsCallList.value.push(item)
+            });
+            // console.log(opsCallList);
         })
-
-
-
     }
 }, {
     immediate: true // 立即执行一次，以便在rowData初始值非空时也能触发
@@ -108,8 +107,7 @@ defineExpose({
 </script>
 
 <template>
-    <el-dialog v-model="dialogVisible" show-close="true" title="工单详情" width="80%" :before-close="handleClose" overflow:
-        auto>
+    <el-dialog v-model="dialogVisible" :show-close=true title="工单详情" width="80%" overflow: auto>
         <div class="common-layout">
             <el-container>
                 <el-header class="header"><span>工单号：</span>
@@ -122,7 +120,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">
-                                   <p style="font-size: 17px;"> {{ activity.content }}</p>
+                                    <p style="font-size: 17px;"> {{ activity.content }}</p>
                                 </el-timeline-item>
                             </el-timeline>
                         </div>
@@ -141,17 +139,28 @@ defineExpose({
                         <div class="body">
                             <div>
                                 <div>工单内容：</div>
-                                <div class="text">{{ rowData.orderContent }}</div>
-
+                                <div class="textBox">
+                                    <el-scrollbar >
+                                        <div class="text">{{ rowData.orderContent }}</div>
+                                    </el-scrollbar>
+                                </div>
                             </div>
                             <div>
                                 <div>处理内容：</div>
-                                <div class="text">{{ rowData.processedContent }}</div>
+                                <div class="textBox">
+                                    <el-scrollbar >
+                                        <div class="text">{{ rowData.processedContent }}</div>
+                                    </el-scrollbar>
+                                </div>
 
                             </div>
                             <div>
                                 <div>录音信息：</div>
-                                <div class="text">{{ rowData.recordUrl }}</div>
+                                <div class="textBox">
+                                    <el-scrollbar >
+                                        <div class="text">{{ rowData.recordUrl }}</div>
+                                    </el-scrollbar>
+                                </div>
 
                             </div>
                         </div>
@@ -228,13 +237,25 @@ defineExpose({
     color: black
 }
 
-.main-content .body .text {
+.main-content .body .textBox {
     width: 100%;
-    height: 10vh;
+    min-height: 10vh;
+    max-height: 15vh;
     border: 1.5px solid #e4e7ed;
-    resize: none;
-    margin-bottom: 20px;
     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 {