LLJ检验结果录入优化：添加自动保存和回车保存功能

啊鑫

2025-07-21 1bcee828a3340d5f5642b3dbcf4cd9733072b7aa

 pages/QC/LLJ/detail.vue

@@ -7,12 +7,14 @@
      </view>

      <!-- 标签栏 -->
      <view class="tabs">
         <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{active: currentTab === index}"
            @tap="switchTab(index,tab.id)">
            {{ tab.fcheckItem }}
      <scroll-view class="tabs" scroll-x="true" :show-scrollbar="false">
         <view class="tabs-container">
            <view v-for="(tab, index) in tabs" :key="index" class="tab" :class="{active: currentTab === index}"
               @tap="switchTab(index,tab.id)">
               {{ tab.fcheckItem }}
            </view>
         </view>
      </view>
      </scroll-view>
      <view class="tab-content">
         <!-- 基本信息 -->
         <view class="section">
@@ -140,6 +142,7 @@
                     </button>
                     <input v-if="(tableData.length < formData.checkQyt) && formData.fupAllow && formData.fdownAllow"
                        @input="onNumberInput"
                        @confirm="onEnterSave"
                        v-model="formData.fcheckResu"
                        type="text"
                        class="result-input"
@@ -147,6 +150,7 @@
                        placeholder-class="placeholder" />
                     <input v-else
                        @input="search($event)"
                        @confirm="onEnterSave"
                        v-model="inputTxt"
                        type="text"
                        class="result-input"
@@ -179,6 +183,7 @@
                  <view class="input-wrapper" style="margin-top: 15px;">

                     <input v-if="(tableData.length < formData.checkQyt)" @input="search($event)"
                        @confirm="onEnterSave"
                        v-model="inputTxt" type="text" class="result-input" placeholder="请输入检验结果..."
                        placeholder-class="placeholder" />
                     <button v-if="(tableData.length < formData.checkQyt)"
@@ -288,9 +293,75 @@
            meomPopup: false,
            showMeom:false,
            meom: '',
            autoSaveTimer: null, // 自动保存定时器
         }
      },
      methods: {
         // 防抖自动保存方法
         autoSaveResult() {
            // 清除之前的定时器
            if (this.autoSaveTimer) {
               clearTimeout(this.autoSaveTimer);
            }
				
            // 设置新的定时器，1秒后自动保存
            this.autoSaveTimer = setTimeout(() => {
               // 检查是否已经达到检验数量上限
               if (this.tableData.length >= this.formData.checkQyt) {
                  return;
               }
					
               // 验证输入并保存
               if (this.validateAndSave()) {
                  this.saveResult();
               }
            }, 2000);
         },
			
         // 验证输入是否有效
         validateAndSave() {
            // 有上下限的情况
            if (this.formData.fupAllow && this.formData.fdownAllow) {
               const value = this.formData.fcheckResu;
               if (!value || value.trim() === '') {
                  return false;
               }
					
               // 验证是否为有效数字
               if (isNaN(parseFloat(value)) || !/^-?\d+(\.\d+)?$/.test(value)) {
                  return false;
               }
					
               return true;
            } else {
               // 无上下限的情况，检验结果存储在 formData.fcheckResu 中
               const value = this.formData.fcheckResu;
               if (!value || value.trim() === '') {
                  return false;
               }
					
               return true;
            }
         },
			
         // 处理回车键保存事件
         onEnterSave() {
            // 检查是否已经达到检验数量上限
            if (this.tableData.length >= this.formData.checkQyt) {
               this.$showMessage("已达到检验数量上限");
               return;
            }
				
            // 清除自动保存定时器
            if (this.autoSaveTimer) {
               clearTimeout(this.autoSaveTimer);
               this.autoSaveTimer = null;
            }
				
            // 直接保存结果
            this.saveResult();
         },
			
         switchTab(index, mainIds) {
            this.currentTab = index
            this.mainId = mainIds;
@@ -375,6 +446,10 @@
         //检测输入框的输入，并给变量赋值
         search(event) {
            this.formData.fcheckResu = event.detail.value;
            this.inputTxt = event.detail.value;
				
            // 触发自动保存
            this.autoSaveResult();
         },
         onNumberInput(e) {
            // 只允许输入数字和小数点
@@ -383,6 +458,9 @@
            val = val.replace(/\.{2,}/g, '.');
            val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            this.formData.fcheckResu = val;
				
            // 触发自动保存
            this.autoSaveResult();
         },
         toggleResult(item) {
            let fstand = "√";
@@ -697,6 +775,14 @@
         this.$nextTick(() => {
            this.validateBatchInput();
         });
      },
		
      // 页面卸载时清除定时器
      onUnload() {
         if (this.autoSaveTimer) {
            clearTimeout(this.autoSaveTimer);
            this.autoSaveTimer = null;
         }
      }
   }
</script>
@@ -731,17 +817,25 @@
   }

   .tabs {
      display: flex;
      background-color: $bg-color;
      border-bottom: 1px solid $border-color;
      width: 100%;
      white-space: nowrap;

      .tabs-container {
         display: flex;
         min-width: 100%;
      }

      .tab {
         flex: 1;
         flex: none;
         min-width: 120px;
         text-align: center;
         padding: 12px 0;
         padding: 12px 16px;
         border-right: 1px solid $border-color;
         color: #666;
         transition: all 0.3s;
         white-space: nowrap;

         &:last-child {
            border-right: none;