Browse Source

fix: 为折让比例添加表单验证,确保输入有效性

xieyong 2 tuần trước cách đây
mục cha
commit
6dfde6a720

+ 38 - 11
src/views/financialManage/invoiceManage/components/tableInfo.vue

@@ -87,17 +87,44 @@
 
       <!-- 折让比例 -->
       <template v-slot:discountRatio="scope">
-        <span v-if="dialogType === 'view'">{{ scope.row.discountRatio }}</span>
-        <div v-else class="input-with-suffix">
-          <el-input
-            v-model="scope.row.discountRatio"
-            type="number"
-            :min="0"
-            :max="100"
-            placeholder="请输入"
-          ></el-input>
-          <span class="suffix">%</span>
-        </div>
+        <el-form-item
+          style="width: 100%;"
+          :prop="'detailList.' + scope.$index + '.discountRatio'"
+          :rules="[
+            {
+              required: true,
+              message: '请输入折让比例',
+              trigger: 'blur'
+            },
+            {
+              validator: (rule, value, callback) => {
+                if (value === undefined || value === null || value === '') {
+                  callback('请输入折让比例');
+                } else if (parseFloat(value) < 0) {
+                  callback('折让比例不能小于0');
+                } else if (parseFloat(value) > 100) {
+                  callback('折让比例不能大于100');
+                } else {
+                  callback();
+                }
+              },
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <span v-if="dialogType === 'view'">{{ scope.row.discountRatio }}</span>
+          <div v-else class="input-with-suffix">
+            <el-input
+              v-model="scope.row.discountRatio"
+              type="number"
+              :min="0"
+              :max="100"
+              placeholder="请输入"
+              @input="recalcDetailList(scope.row, scope.$index)"
+            ></el-input>
+            <span class="suffix">%</span>
+          </div>
+        </el-form-item>
       </template>
 
       <!-- 工艺路线 -->