完整项目更新

leiqunqing

2026-03-05 891207469b41c23d22805876a4e179d75832572f

 ´úÂë¹ÜÀí/WIDESEAWCS_Client/src/views/Home.vue

@@ -34,6 +34,14 @@
              v-model="leftPartCodes[index]"
              disabled
            />
            <!-- æ–°å¢žï¼šä¾›æ–¹ä»£ç è¾“入框 -->
            <input
              type="text"
              class="input-box supplier-code-input"
              v-model="leftPartSupplierCodes[index]"
              disabled
              placeholder="供方代码"
            />
            <label class="checkbox-container">
              <input
                type="checkbox"
@@ -57,7 +65,14 @@
      <div class="right-top">
        <div class="form-row input-submit-row">
          <span class="label">录入框：</span>
          <input type="text" class="input-box" v-model="rightTopInput" />
          <!-- å…³é”®ä¿®æ”¹1：添加ref标识 -->
          <input
            ref="inputBoxRef"
            type="text"
            class="input-box"
            v-model="rightTopInput"
            @blur="handleInputBlur"
          />
          <button class="btn save-btn submit-input-btn" @click="saveData">
            <i class="icon icon-submit"></i>提交
          </button>
@@ -76,6 +91,14 @@
            />
            <button class="btn clear-btn" @click="clearFinishedProductCode">
              <i class="icon icon-clear"></i>清除
            </button>
            <!-- æ–°å¢žï¼šåˆ é™¤å½“前托盘按钮 -->
            <button
              class="btn delete-tray-btn"
              @click="deleteCurrentTray"
              :disabled="deleteLoading"
            >
              <i class="icon icon-delete"></i>删除当前托盘
            </button>
          </div>
          <div
@@ -101,7 +124,7 @@
</template>

<script>
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from "vue";
import axios from "axios";

export default {
@@ -111,12 +134,19 @@
    const finishedProductId = ref(""); // å·¦ä¾§æˆå“ID（接口返回）
    const rightTopInput = ref(""); // å³ä¾§æ ¸å¿ƒå½•å…¥æ¡†
    const leftPartCodes = ref(Array(10).fill("")); // å·¦ä¾§é›¶ä»¶ç¼–号数组
    // æ–°å¢žï¼šå·¦ä¾§ä¾›æ–¹ä»£ç æ•°ç»„
    const leftPartSupplierCodes = ref(Array(10).fill(""));
    const rightPartCodes = ref(Array(10).fill("")); // å³ä¾§é›¶ä»¶ç¼–号数组
    const leftPartChecked = ref(Array(10).fill(false)); // å·¦ä¾§é›¶ä»¶å‹¾é€‰çŠ¶æ€
    const leftPartIds = ref(Array(10).fill("")); // å·¦ä¾§é›¶ä»¶ID（接口返回）
    const finishedProductCode = ref(""); // å³ä¾§æˆå“ç¼–号输入框
    const fillIndex = ref(-1); // å½•å…¥æ¡†è‡ªåŠ¨å¡«å……索引
    const checkLoading = ref(Array(10).fill(false)); // é›¶ä»¶å‹¾é€‰åŠ è½½é”
    // æ–°å¢žï¼šåˆ é™¤æ‰˜ç›˜åŠ è½½çŠ¶æ€
    const deleteLoading = ref(false);

    // å…³é”®ä¿®æ”¹2：定义录入框ref
    const inputBoxRef = ref(null);

    // ä¿¡å·ç¯ç›¸å…³
    const signalStates = ref([false, false, false, false, false]);
@@ -136,6 +166,17 @@
    const destroyDelayTime = 500; // å½•å…¥æ¡†å¡«å……延迟500ms
    let autoSubmitDebounceTimer = null;
    let submitLock = ref(false); // æäº¤é”ï¼Œé˜²æ­¢é‡å¤æäº¤

    // å…³é”®ä¿®æ”¹3：封装聚焦方法
    const focusInputBox = () => {
      nextTick(() => {
        if (inputBoxRef.value) {
          inputBoxRef.value.focus();
          // å¯é€‰ï¼šé€‰ä¸­è¾“入框内容，方便直接覆盖输入
          // inputBoxRef.value.select();
        }
      });
    };

    // è®¡ç®—属性 - ç»Ÿè®¡æœ‰æ•ˆå‹¾é€‰/填充数量（过滤空值）
    const checkedCount = computed(() => {
@@ -162,6 +203,8 @@
            for (let i = 0; i < 10; i++) {
              leftPartCodes.value[i] = data.leftPartCodes[i] || "";
              leftPartIds.value[i] = data.leftPartIds?.[i] || "";
              // æ–°å¢žï¼šèµ‹å€¼ä¾›æ–¹ä»£ç 
              leftPartSupplierCodes.value[i] = data.leftPartSupplierCodes?.[i] || "";
            }
          }
          if (Array.isArray(data.leftPartChecked) && data.leftPartChecked.length >= 10) {
@@ -172,6 +215,9 @@
        }
      } catch (error) {
        console.error("获取左侧初始数据失败：", error);
      } finally {
        // æ•°æ®åŠ è½½å®ŒæˆåŽèšç„¦
        focusInputBox();
      }
    };

@@ -214,16 +260,19 @@
      if (!finishedProductId.value) {
        alert("成品ID不存在，无法更新零件扫码状态！");
        leftPartChecked.value[index] = !isChecked;
        focusInputBox(); // æç¤ºåŽèšç„¦
        return;
      }
      if (!partId) {
        alert(`零件${index + 1}数据库ID不存在，无法更新扫码状态！`);
        leftPartChecked.value[index] = !isChecked;
        focusInputBox(); // æç¤ºåŽèšç„¦
        return;
      }
      if (!partCode.trim()) {
        alert(`零件${index + 1}编号为空，无法更新扫码状态！`);
        leftPartChecked.value[index] = !isChecked;
        focusInputBox(); // æç¤ºåŽèšç„¦
        return;
      }

@@ -254,6 +303,7 @@
        checkLoading.value[index] = false;
        if (checkDebounceTimer) clearTimeout(checkDebounceTimer);
        checkDebounceTimer = null;
        focusInputBox(); // æ“ä½œå®ŒæˆåŽèšç„¦
      }
    };

@@ -271,12 +321,10 @@
          fillIndex.value++;
        } else {
          alert("成品编号和零件1-10已全部填充完成,无法继续录入!");
          rightTopInput.value = "";
          destroyDelayTimer = null;
          return;
        }
        rightTopInput.value = "";
        destroyDelayTimer = null;
        focusInputBox(); // å¡«å……完成后聚焦
      }, destroyDelayTime);
    };

@@ -289,9 +337,23 @@
      { immediate: false }
    );

    // å…³é”®ä¿®æ”¹4：失去焦点时重新聚焦
    const handleInputBlur = () => {
      // å»¶è¿Ÿä¸€ç‚¹æ‰§è¡Œï¼Œé¿å…å’Œå…¶ä»–操作冲突
      setTimeout(() => {
        focusInputBox();
      }, 50);
    };

    // å³ä¾§è¾“入框清除方法
    const clearRightPart = (index) => (rightPartCodes.value[index] = "");
    const clearFinishedProductCode = () => (finishedProductCode.value = "");
    const clearRightPart = (index) => {
      rightPartCodes.value[index] = "";
      focusInputBox(); // æ¸…除后聚焦
    };
    const clearFinishedProductCode = () => {
      finishedProductCode.value = "";
      focusInputBox(); // æ¸…除后聚焦
    };

    // æ ¸å¿ƒä¿®æ”¹ï¼šæ¢å¤æˆå“ç¼–号必填校验，未填写直接提示并终止提交
    const saveData = async () => {
@@ -299,6 +361,7 @@
      const productCode = finishedProductCode.value.trim();
      if (!productCode) {
        alert("请先填写成品编号，成品编号为必填项！");
        focusInputBox(); // æç¤ºåŽèšç„¦
        return;
      }
      // 2. æäº¤é”ï¼šé˜²æ­¢é‡å¤ç‚¹å‡»
@@ -328,10 +391,14 @@
          rightPartCodes.value = Array(10).fill("");
          rightTopInput.value = "";
          fillIndex.value = -1;
          const msg = resData.message;

          // æ ¸å¿ƒä¿®æ”¹ï¼šä»…当 msg ä¸æ˜¯ null æ—¶æ‰å¼¹å‡ºæç¤º
          if (msg !== null) {
            alert(msg);
          }
        } else {
          // ä¸šåŠ¡é”™è¯¯ï¼šç›´æŽ¥å±•ç¤ºåŽç«¯è¿”回的message（如物料错误、无配方）
          const errorMsg = resData.message || "提交失败，未知业务错误";
          alert(`提交失败：${errorMsg}`);
          alert(`${resData.message || "未知错误"}`);
        }
      } catch (error) {
        // 6. å¼‚常捕获：兼容后端未捕获异常（如PLC通讯异常、数组越界、500错误）
@@ -352,6 +419,7 @@
      } finally {
        // 7. é‡Šæ”¾æäº¤é”ï¼šæ— è®ºæˆåŠŸ/失败都要释放
        submitLock.value = false;
        focusInputBox(); // æäº¤å®ŒæˆåŽèšç„¦
      }
    };

@@ -372,6 +440,7 @@
        if (!hasProductCode) {
          console.log("⚠️ æˆå“ç¼–号未填写，跳过自动提交");
          autoSubmitDebounceTimer = null;
          focusInputBox(); // æ ¡éªŒåŽèšç„¦
          return;
        }

@@ -393,6 +462,61 @@
      }, 300); // 300ms防抖，避免输入频繁触发
    };

    // æ–°å¢žï¼šåˆ é™¤å½“前托盘方法
    const deleteCurrentTray = async () => {
      // ç¡®è®¤æ“ä½œï¼Œé˜²æ­¢è¯¯åˆ 
      if (!confirm("确认要删除当前托盘数据吗？此操作不可恢复！")) {
        focusInputBox();
        return;
      }

      // è®¾ç½®åŠ è½½çŠ¶æ€ï¼Œé˜²æ­¢é‡å¤ç‚¹å‡»
      deleteLoading.value = true;
      try {
        console.log("📤 è°ƒç”¨åˆ é™¤å½“前托盘接口：/api/boxing/DeleteCurrentTray");
        // è°ƒç”¨åˆ é™¤æŽ¥å£ï¼ˆæ ¹æ®å®žé™…需求选择GET/POST，这里默认用POST，若后端是GET可改为get）
        const response = await axios.post(
          "/api/boxing/DeleteCurrentTray",
          {}, // è‹¥æ— å‚数传空对象
          { timeout: 8000 }
        );
        const resData = response.data;
        console.log("📥 åˆ é™¤å½“前托盘接口返回：", resData);

        // é€‚配后端返回格式
        const isSuccess = resData.status === true || resData.Status === true;
        if (isSuccess) {
          // åˆ é™¤æˆåŠŸåŽæ¸…空右侧输入框
          finishedProductCode.value = "";
          rightPartCodes.value = Array(10).fill("");
          rightTopInput.value = "";
          fillIndex.value = -1;
          alert(resData.message || "当前托盘删除成功！");
        } else {
          alert(`删除失败：${resData.message || "未知错误"}`);
        }
      } catch (error) {
        // å¼‚常处理
        let errorMsg = "删除托盘请求异常！";
        if (error.code === "ECONNABORTED") {
          errorMsg = "删除请求超时！请稍后重试";
        } else if (error.response) {
          errorMsg = `服务器错误：${error.response.status} - ${error.response.statusText}`;
          console.error("❌ åˆ é™¤æ‰˜ç›˜æœåŠ¡å™¨é”™è¯¯è¯¦æƒ…：", error.response.data);
        } else if (error.request) {
          errorMsg = "网络异常！未收到后端响应，请检查接口地址和网络";
        } else {
          errorMsg = `请求错误：${error.message}`;
        }
        alert(errorMsg);
        console.error("❌ åˆ é™¤æ‰˜ç›˜æŽ¥å£å¼‚常详情：", error);
      } finally {
        // é‡Šæ”¾åŠ è½½çŠ¶æ€
        deleteLoading.value = false;
        focusInputBox(); // æ“ä½œå®ŒæˆåŽèšç„¦å½•å…¥æ¡†
      }
    };

    // ç›‘听自动提交相关数据变化，触发校验
    watch([checkedCount, filledPartCount, finishedProductCode], () => checkAutoSubmit(), {
      deep: true,
@@ -403,15 +527,15 @@
    const detectFillIndex = () => {
      if (!finishedProductCode.value.trim()) {
        fillIndex.value = -1;
        return;
      }
      for (let i = 0; i < 10; i++) {
        if (!rightPartCodes.value[i].trim()) {
          fillIndex.value = i;
          return;
      } else {
        for (let i = 0; i < 10; i++) {
          if (!rightPartCodes.value[i].trim()) {
            fillIndex.value = i;
            return;
          }
        }
        fillIndex.value = 10;
      }
      fillIndex.value = 10;
    };

    // ç›‘听成品/零件输入，更新填充索引
@@ -425,6 +549,7 @@
      await fetchLeftInitialData();
      startPolling();
      detectFillIndex();
      focusInputBox(); // é¡µé¢æŒ‚载后立即聚焦
    });

    // ç”Ÿå‘½å‘¨æœŸï¼šå¸è½½æ—¶æ¸…除所有定时器/防抖，防止内存泄漏
@@ -440,16 +565,22 @@
      finishedProduct,
      rightTopInput,
      leftPartCodes,
      // æ–°å¢žï¼šæš´éœ²ä¾›æ–¹ä»£ç æ•°ç»„
      leftPartSupplierCodes,
      rightPartCodes,
      leftPartChecked,
      signalStates,
      signalLabels,
      finishedProductCode,
      checkLoading,
      deleteLoading, // æš´éœ²åˆ é™¤åŠ è½½çŠ¶æ€
      handlePartCheck,
      saveData,
      deleteCurrentTray, // æš´éœ²åˆ é™¤æ‰˜ç›˜æ–¹æ³•
      clearRightPart,
      clearFinishedProductCode,
      inputBoxRef, // æš´éœ²ref
      handleInputBlur, // æš´éœ²æ–¹æ³•
    };
  },
};
@@ -613,6 +744,11 @@
  transition: all 0.2s ease;
  background-color: #ffffff;
}
/* æ–°å¢žï¼šä¾›æ–¹ä»£ç è¾“入框样式（宽度稍窄） */
.supplier-code-input {
  flex: 0 0 150px;
  min-width: 120px;
}
.input-box:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
@@ -645,6 +781,10 @@
  gap: 8px;
  position: relative;
  overflow: hidden;
}
/* æ–°å¢žï¼šåˆ é™¤æ‰˜ç›˜æŒ‰é’®å®½åº¦é€‚配 */
.delete-tray-btn {
  width: 140px !important;
}
.submit-input-btn {
  width: 110px !important;
@@ -692,6 +832,10 @@
.icon-submit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2.01 21L15 13.4 23 21V5H2.01V21zM17 15l-5-5-5 5V7h10v8z'/%3E%3C/svg%3E");
}
/* æ–°å¢žï¼šåˆ é™¤å›¾æ ‡ */
.icon-delete {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* æŒ‰é’®ä¸»é¢˜æ ·å¼ */
.clear-btn {
@@ -711,6 +855,16 @@
.save-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
}
/* æ–°å¢žï¼šåˆ é™¤æ‰˜ç›˜æŒ‰é’®æ ·å¼ */
.delete-tray-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  padding: 0 12px;
}
.delete-tray-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.15);
}

/* ä¿¡å·ç¯æ ·å¼ */
@@ -851,8 +1005,16 @@
  .input-box {
    width: 100%;
  }
  /* é€‚配移动端供方代码输入框 */
  .supplier-code-input {
    flex: 1;
    min-width: 100%;
    margin-top: 6px;
  }
  /* ç§»åŠ¨ç«¯æŒ‰é’®å®½åº¦é€‚配 */
  .btn,
  .submit-input-btn {
  .submit-input-btn,
  .delete-tray-btn {
    width: 100% !important;
    margin-top: 6px;
  }