作业执行列表渲染共锁人错误解决

src/views/mes/job/jobplay/index.vue

@@ -121,64 +121,33 @@
           <div
             class="status-container"
             style="
-              width: 100%;
-              display: flex;
-              flex-wrap: wrap;
-              gap: 4px;
-              justify-content: flex-start;
-              tetx-align: center;
-              box-sizing: border-box;
-              margin: 0 auto;
-            "
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        justify-content: flex-start;
+        text-align: center;
+        box-sizing: border-box;
+        margin: 0 auto;
+      "
           >
-            <!-- 渲染 removeColockNum -->
+            <!-- 动态渲染框内容 -->
             <div
-              v-for="(item, index) in scope.row.removeColockNum"
-              :key="'remove-colock-' + index"
+              v-for="(item, index) in generateStatus(scope.row)"
+              :key="'status-' + index"
               class="box"
               style="
-                width: 30px;
-                height: 30px;
-                border: 1px solid black;
-                background-color: #fff;
-                margin: 0 2px;
-
-                box-sizing: border-box;
-              "
-            >
-              <b style="font-size: 20px; line-height: 30px">✓</b>
-            </div>
-            <!-- 渲染 colockedNum -->
-            <div
-              v-for="(item, index) in scope.row.colockedNum"
-              :key="'colocked-' + index"
-              class="box"
-              style="
-                width: 30px;
-                height: 30px;
-                margin: 0 2px;
-                border: 1px solid black;
-                background-color: #fff;
-                box-sizing: border-box;
-              "
+          width: 30px;
+          height: 30px;
+          border: 1px solid black;
+          background-color: #fff;
+          margin: 0 2px;
+          box-sizing: border-box;
+        "
             >
-              <span style="font-size: 20px; line-height: 26px">🔒</span>
-            </div>
-            <!-- 渲染 colockNum -->
-            <div
-              v-for="(item, index) in scope.row.colockNum"
-              :key="'colock-' + index"
-              class="box"
-              style="
-                width: 30px;
-                height: 30px;
-                border: 1px solid black;
-                background-color: #fff;
-                margin: 0 2px;
-                box-sizing: border-box;
-              "
-            >
-              <!-- 空框子，如果没有对号或错号，则为空 -->
+              <b v-if="item === 'check'" style="font-size: 20px; line-height: 30px">✓</b>
+              <span v-else-if="item === 'lock'" style="font-size: 20px; line-height: 26px">🔒</span>
+              <!-- 空框子无需内容 -->
             </div>
           </div>
         </template>
@@ -319,6 +288,33 @@ export default {
     }, 5000);
   },
   methods: {
+    generateStatus(row) {
+      // 从数据中获取值
+      const colockNum = row.colockNum || 0; // 总框数
+      const colockedNum = row.colockedNum || 0; // 锁数量
+      const removeColockNum = row.removeColockNum || 0; // 对号数量
+
+      // 创建状态数组
+      const statusArray = [];
+
+      // 添加对号
+      for (let i = 0; i < removeColockNum; i++) {
+        statusArray.push('check');
+      }
+
+      // 添加锁
+      for (let i = 0; i < colockedNum; i++) {
+        statusArray.push('lock');
+      }
+
+      // 添加空框
+      const emptyNum = colockNum - colockedNum - removeColockNum;
+      for (let i = 0; i < emptyNum; i++) {
+        statusArray.push('empty');
+      }
+
+      return statusArray;
+    },
     // 格式化日期查询数据
     formatDate(date) {
       if (date && date instanceof Date && !isNaN(date)) {