优化代码

src/views/workOrder/components/details.vue

@@ -390,12 +390,9 @@
                 >
                   <span
                     class="route-node"
-                    :class="{
-                      'route-node--done':
-                        item.executionType != null && item.executionType !== ''
-                    }"
+                    :class="{ 'route-node--done': isDotLineTaskDone(item) }"
                   >
-                    {{ item.taskName || item.name || `工艺${index + 1}` }}
+                    {{ getDotLineTaskName(item, index) }}
                   </span>
                   <span
                     v-if="index < dotLineTaskList.length - 1"
@@ -436,7 +433,7 @@
                   >
                     <template slot-scope="{ row, $index }">
                       <span class="task-name-text">{{
-                        row.taskName || row.name || `工艺${$index + 1}`
+                        getDotLineTaskName(row, $index)
                       }}</span>
                     </template>
                   </el-table-column>
@@ -487,7 +484,6 @@
   import { getPlanDotLine } from '@/api/productionPlan/planDotLine';
 
   const EXEC_TYPE_MAP = { 0: '自制', 1: '请托', 2: '委外' };
-
   export default {
     components: {},
     props: {
@@ -776,38 +772,53 @@
       },
 
       async loadDotLineData() {
-        if (!this.form.productionPlanId) return;
+        if (!this.form.productionPlanId) {
+          this.resetDotLineState();
+          return;
+        }
         try {
           const planData = await getPlanDotLine({
             planId: this.form.productionPlanId
           });
           const details = planData?.detailList;
-          if (details && details.length > 0) {
-            this.hasDotLineDetail = true;
-            this.dotLineTaskList = [...details]
-              .sort((a, b) => (a.taskSort ?? 0) - (b.taskSort ?? 0))
-              .map((item, i) => ({
-                ...item,
-                _taskKey: item.id ?? `detail-${item.taskId ?? i}`,
-                executionStartTime: this.formatDotLineTime(
-                  item.executionStartTime
-                ),
-                executionEndTime: this.formatDotLineTime(item.executionEndTime),
-                executionType:
-                  item.executionType != null
-                    ? Number(item.executionType)
-                    : undefined
-              }));
-          } else {
-            this.hasDotLineDetail = false;
-            this.dotLineTaskList = [];
+          if (!Array.isArray(details) || details.length === 0) {
+            this.resetDotLineState();
+            return;
           }
+          this.hasDotLineDetail = true;
+          this.dotLineTaskList = details
+            .slice()
+            .sort((a, b) => (a.taskSort ?? 0) - (b.taskSort ?? 0))
+            .map((item, i) => this.normalizeDotLineItem(item, i));
         } catch {
-          this.hasDotLineDetail = false;
-          this.dotLineTaskList = [];
+          this.resetDotLineState();
         }
       },
 
+      resetDotLineState() {
+        this.hasDotLineDetail = false;
+        this.dotLineTaskList = [];
+      },
+
+      normalizeDotLineItem(item, index) {
+        return {
+          ...item,
+          _taskKey: item.id ?? `detail-${item.taskId ?? index}`,
+          executionStartTime: this.formatDotLineTime(item.executionStartTime),
+          executionEndTime: this.formatDotLineTime(item.executionEndTime),
+          executionType:
+            item.executionType != null ? Number(item.executionType) : undefined
+        };
+      },
+
+      getDotLineTaskName(item, index) {
+        return item.taskName || item.name || `工艺${index + 1}`;
+      },
+
+      isDotLineTaskDone(item) {
+        return item.executionType != null && item.executionType !== '';
+      },
+
       formatDotLineTime(val) {
         if (val == null || val === '') return '';
         const str = String(val).trim();
@@ -848,10 +859,6 @@
     color: #ab7777;
   }
 
-  // .dot-line-tabs {
-  //   margin-top: 16px;
-  // }
-
   .plan-dot-line,
   .top-route,
   .config-panel,