feature_20260420_陈列任务识别排面数修改

src/views/historicalVisit/perfectStoreTask.vue

@@ -68,12 +68,29 @@
         </van-form>
       </div>
       <div class="skuDeatil">
-        <div class="headline" style="margin-top: 10px">
-          <span class="headlineIcon"></span>
-          <span class="headlineTitle">SKU图像识别结果</span>
+        <div class="headline" style="margin-top: 10px; justify-content: space-between">
+          <div
+            class="skuDeatilHeaderLeft"
+            style="
+              font-weight: 600;
+              font-size: 16px;
+              position: relative;
+              display: flex;
+              align-items: center;
+            ">
+            <span class="headlineIcon"></span>
+            <span class="headlineTitle">SKU图像识别结果</span>
+          </div>
+          <div
+            class="skuDeatilHeaderRight"
+            v-if="!formData.displayRewardTaskEditable"
+            style="margin-right: 85px">
+            <span style="color: #07c160" @click="editTable" v-if="!editTableFlag">编辑</span>
+            <span style="color: red" @click="saveTable" v-if="editTableFlag">保存</span>
+          </div>
         </div>
         <el-table
-          :data="formData.taskPhotoRecognitionResult"
+          :data="taskPhotoRecognitionResult"
           :span-method="taskObjectSpanMethod"
           border
           class="table-headermd1"
@@ -89,14 +106,17 @@
               <span class="tipTitle">{{ scope.row.skuProductName }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="排面数" prop="identifyTheNumberOfCards" align="center" width="50">
-            <template slot-scope="scope"
-              ><van-field
+          <el-table-column label="排面数" prop="identifyTheNumberOfCards" align="center" width="80">
+            <template slot-scope="scope">
+              <span v-if="!editTableFlag">{{ scope.row.identifyTheNumberOfCards }}</span>
+              <van-field
+                v-else
                 v-model="scope.row.identifyTheNumberOfCards"
                 placeholder="请输入排面数"
                 type="digit"
-                @blur="inputbluwl(scope.row)"
-            /></template>
+                @input="onPositiveIntegerInput(scope.row, $event)"
+                @blur="inputbluwl(scope.row)" />
+            </template>
           </el-table-column>
           <el-table-column label="要求" prop="conditionIdentifyNum" align="center" width="60px">
             <template slot-scope="scope">
@@ -142,13 +162,10 @@
       @close="vanPopup == false"
       custom-class="identifyResultdialog">
       <!-- 识别结果 -->
-      <div
-        class="identifyResult"
-        v-if="formData.taskPhotoRecognitionResult"
-        style="padding: 0 10px">
+      <div class="identifyResult" v-if="taskPhotoRecognitionResult" style="padding: 0 10px">
         <div class="resultContent">
           <el-table
-            :data="formData.taskPhotoRecognitionResult"
+            :data="taskPhotoRecognitionResult"
             :span-method="taskObjectSpanMethod"
             border
             class="table-headermd1"
@@ -199,6 +216,7 @@ export default {
       vanPopup: false,
       taskPhotoRecognitionResult: null,
       spanArr: [],
+      editTableFlag: false,
     };
   },
   activated() {
@@ -251,8 +269,9 @@ export default {
         this.toastLoading().clear();
         if (res.code == 200 && res.data) {
           this.formData = res.data;
-          console.log(this.formData.taskPhotoRecognitionResult);
-          this.getSpanArr(this.formData.taskPhotoRecognitionResult);
+          this.taskPhotoRecognitionResult =
+            JSON.parse(JSON.stringify(this.formData.taskPhotoRecognitionResult)) || [];
+          this.getSpanArr(this.taskPhotoRecognitionResult);
           console.log(this.formData);
         } else {
           this.formData = null;
@@ -295,14 +314,40 @@ export default {
     },
     inputbluwl(row) {
       console.log(row);
-      // if (row.identifyTheNumberOfCards != null) {
-      //   row.meetTheStandard =
-      //     Number(row.identifyTheNumberOfCards) >= Number(row.conditionIdentifyNum)
-      //       ? 1
-      //       : 0;
-      // } else {
-      //   row.meetTheStandard = null;
-      // }
+      let filteredResults = this.formData.taskPhotoRecognitionResult.filter(
+        (val) => val.skuProductCode == row.skuProductCode,
+      );
+      if (row.identifyTheNumberOfCards != null && row.identifyTheNumberOfCards !== '') {
+        const original = Number(filteredResults[0]?.identifyTheNumberOfCards || '0');
+        const current = Number(row.identifyTheNumberOfCards);
+        if (current < original) {
+          this.$toast('排面数不能小于原始值');
+          row.identifyTheNumberOfCards = String(original);
+        }
+      } else {
+        this.$toast('排面数不能为空');
+        row.identifyTheNumberOfCards = filteredResults[0]?.identifyTheNumberOfCards;
+      }
+    },
+    onPositiveIntegerInput(row, value) {
+      if (value == null) {
+        row.identifyTheNumberOfCards = '';
+        return;
+      }
+      let sanitized = String(value).replace(/[^\d]/g, '');
+      if (sanitized !== '') {
+        sanitized = sanitized.replace(/^0+/, '');
+        if (sanitized === '') {
+          sanitized = '0';
+        }
+      }
+      row.identifyTheNumberOfCards = sanitized;
+    },
+    editTable() {
+      this.editTableFlag = true;
+    },
+    saveTable() {
+      this.editTableFlag = false;
     },
     onClickLeft() {
       this.$router.go(-1);
@@ -463,6 +508,18 @@ export default {
     background-color: #ee0a24 !important;
     border: 1px solid #ee0a24 !important;
   }
+  .table-headermd1 {
+    .el-table__cell {
+      height: 50px !important;
+      .van-field {
+        padding: 0 !important;
+      }
+      .van-field__control {
+        height: 32px;
+        text-align: center;
+      }
+    }
+  }
 }
 .identifyResultdialog {
   width: vw(690) !important;