Procházet zdrojové kódy

feat: 积分订单的详情(修改物流单号,修改收货人信息,修改回寄单号)给这些弹窗添加规则校验

xyh před 5 měsíci
rodič
revize
922a5dec1e

+ 20 - 9
src/views/pointsManagement/pointsOrdeManagement/details.vue

@@ -54,6 +54,13 @@ export default {
         logisticsNo: '',
         logisticsNo: '',
         type: '' // type: 'order' 表示普通物流单号,'afterSales' 表示售后物流单号
         type: '' // type: 'order' 表示普通物流单号,'afterSales' 表示售后物流单号
       },
       },
+      // 物流单号表单校验规则
+      logisticsRules: {
+        logisticsNo: [
+          { required: true, message: '请输入物流单号', trigger: 'blur' },
+          { pattern: /^[A-Za-z0-9]+$/, message: '物流单号只能包含字母和数字', trigger: 'blur' }
+        ]
+      },
       // 弹窗状态
       // 弹窗状态
       logistics: false,
       logistics: false,
     };
     };
@@ -85,13 +92,17 @@ export default {
     },
     },
     saveLogisticsNo() {
     saveLogisticsNo() {
       // 保存物流单号
       // 保存物流单号
-      if (this.logisticsForm.type === 'order') {
-        this.orderInfo.logisticsNo = this.logisticsForm.logisticsNo;
-      } else if (this.logisticsForm.type === 'afterSales') {
-        this.afterSalesInfo.logisticsNo = this.logisticsForm.logisticsNo;
-      }
-      this.logistics = false;
-      this.$message.success('物流单号修改成功');
+      this.$refs.logisticsFormRef.validate((valid) => {
+        if (valid) {
+          if (this.logisticsForm.type === 'order') {
+            this.orderInfo.logisticsNo = this.logisticsForm.logisticsNo;
+          } else if (this.logisticsForm.type === 'afterSales') {
+            this.afterSalesInfo.logisticsNo = this.logisticsForm.logisticsNo;
+          }
+          this.logistics = false;
+          this.$message.success('物流单号修改成功');
+        }
+      });
     },
     },
     //费用详情弹窗
     //费用详情弹窗
     viewAfterSalesDetails() {
     viewAfterSalesDetails() {
@@ -253,8 +264,8 @@ export default {
       :visible.sync="logistics"
       :visible.sync="logistics"
       width="500px"
       width="500px"
     >
     >
-      <el-form :model="logisticsForm" label-width="120px">
-        <el-form-item label="物流单号">
+      <el-form :model="logisticsForm" :rules="logisticsRules" ref="logisticsFormRef" label-width="120px">
+        <el-form-item label="物流单号" prop="logisticsNo">
           <el-input v-model="logisticsForm.logisticsNo" placeholder="请输入物流单号"></el-input>
           <el-input v-model="logisticsForm.logisticsNo" placeholder="请输入物流单号"></el-input>
         </el-form-item>
         </el-form-item>
       </el-form>
       </el-form>