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">
@@ -101,9 +103,9 @@
                  <view class="info-label">不良描述</view>
                  <view class="info-value danger">{{formData.funit}}</view>
               </view>
               <view v-if="formData.meom!=null" class="result-ng">
                  <view class="info-label">备注</view>
                  <view class="info-value danger">{{formData.meom}}</view>
               <view class="result-ng">
                   <view class="info-label">备注</view>
                   <view class="info-value danger">{{formData.meom}}</view>
               </view>
            </view>
         </view>
@@ -112,7 +114,7 @@
         <view class="section">
            <view class="section-header">检验结果录入</view>
            <view class="section-body">
               <view class="input-group" v-if="tableData.length >= formData.checkQyt">
               <view class="input-group" v-if="tableData.length >= formData.checkQyt && formData.fstand == null">
                  <view class="input-wrapper">
                     <input v-model="batchInput" type="text" class="result-input"
                        placeholder="格式：OK-3 或 NG-3（请勿修改结果为数字的值）" placeholder-class="placeholder"
@@ -138,8 +140,21 @@
                        <uni-icons type="compose" size="16" color="#fff"></uni-icons>
                        备注
                     </button>
                     <input v-if="(tableData.length < formData.checkQyt)" @input="search($event)"
                        v-model="inputTxt" type="text" class="result-input" placeholder="请输入检验结果..."
                     <input v-if="(tableData.length < formData.checkQyt) && formData.fupAllow && formData.fdownAllow"
                        @input="onNumberInput"
                        @confirm="onEnterSave"
                        v-model="formData.fcheckResu"
                        type="text"
                        class="result-input"
                        placeholder="请输入检验结果..."
                        placeholder-class="placeholder" />
                     <input v-else
                        @input="search($event)"
                        @confirm="onEnterSave"
                        v-model="inputTxt"
                        type="text"
                        class="result-input"
                        placeholder="请输入检验结果..."
                        placeholder-class="placeholder" />
                     <button v-if="(tableData.length < formData.checkQyt)"
                        style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn"
@@ -168,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)"
@@ -230,7 +246,7 @@
                 </form>
             </view>
         </view>
         <view v-if="showPopup" class="overlay">
         <view v-if="showMeom" class="overlay">
            <view class="popup">
               <h3>修改检验结果</h3>
               <form :modelValue="editData">
@@ -239,7 +255,7 @@
                     <input class="form-input" type="text" v-model="editData.fcheckResu" />
                  </view>
                  <button type="warn" @click="eidt">修改</button>
                  <button @click="showPopup = !showPopup">取消</button>
                  <button @click="showMeom = !showMeom">取消</button>
               </form>
            </view>
         </view>
@@ -275,10 +291,77 @@
            isBatchInputValid: false,
            funit:'',
            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;
@@ -363,6 +446,21 @@
         //检测输入框的输入，并给变量赋值
         search(event) {
            this.formData.fcheckResu = event.detail.value;
            this.inputTxt = event.detail.value;
				
            // 触发自动保存
            this.autoSaveResult();
         },
         onNumberInput(e) {
            // 只允许输入数字和小数点
            let val = e.detail.value.replace(/[^\d.]/g, '');
            // 只允许一个小数点
            val = val.replace(/\.{2,}/g, '.');
            val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
            this.formData.fcheckResu = val;
				
            // 触发自动保存
            this.autoSaveResult();
         },
         toggleResult(item) {
            let fstand = "√";
@@ -413,7 +511,11 @@
                  this.$showMessage("请输入正确的检验值");
                  return;
               }

					
               if (!/^-?\d+(\.\d+)?$/.test(this.formData.fcheckResu)) {
                           this.$showMessage("请输入正确的数值！");
                           return;
               }
               if (parseFloat(this.formData.fcheckResu) >= parseFloat(this.formData.fdownAllow) && parseFloat(this
                     .formData
                     .fcheckResu) <= parseFloat(this.formData.fupAllow)) {
@@ -483,6 +585,7 @@
               } else {
                  this.isNumber = false;
               }
					
            })
         },
         editResult(fcheckResu) {
@@ -494,20 +597,23 @@
         },
         toDetail(item) {
            this.showPopup = !this.showPopup;
            this.showMeom = !this.showMeom;
            this.editData = item;
				
         },
         upMeom() {
             this.meomPopup = true;
             this.meom = this.formData.meom || ''; // 初始化备注值
			    
         },
         editMeom() {
             // 保存备注信息
             if (this.Meom) {
             if (this.meom) {
                 this.$post({
                     url: "/LLJ/saveRemarksPid",
                     data: {
                         pid: this.formData.id,
                         remarks: this.meom
                         meom: this.meom,
							
                     }
                 }).then(res => {
                     if (res.data.tbBillList > 0) {
@@ -534,7 +640,7 @@
         },
         editRemarks() {
            if (this.remarks) {
               //saveRemarksGid
					
               this.$post({
                  url: "/LLJ/saveRemarksPid",
                  data: {
@@ -641,7 +747,7 @@
            data: {
               id: this.formID,
               releaseNo: this.releaseNo,
               meom:this.meom
					
            }
         }).then(res1 => {
            let tableData = res1.data.tbBillList
@@ -669,6 +775,14 @@
         this.$nextTick(() => {
            this.validateBatchInput();
         });
      },
		
      // 页面卸载时清除定时器
      onUnload() {
         if (this.autoSaveTimer) {
            clearTimeout(this.autoSaveTimer);
            this.autoSaveTimer = null;
         }
      }
   }
</script>
@@ -703,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;