套餐开始时段和结束时段限制

src/views/system/pack/index.vue

@@ -153,10 +153,11 @@
           <el-input v-model="form.price" placeholder="请输入金额" />
         </el-form-item>
         <el-form-item label="套餐开始时段" prop="packaStartPeriod">
-          <el-input v-model="form.packaStartPeriod" placeholder="请输入套餐开始时段" />
+          <!--指定0到23范围的数字-->
+          <el-input-number v-model="form.packaStartPeriod" :min="0" :max="23" label="套餐开始时段"/>
         </el-form-item>
         <el-form-item label="套餐结束时段" prop="packaEndPeriod">
-          <el-input v-model="form.packaEndPeriod" placeholder="请输入套餐结束时段" />
+          <el-input-number v-model="form.packaEndPeriod" :min="0" :max="23" label="套餐开始时段"/>
         </el-form-item>
         <el-form-item label="是否首次下单可用" prop="firstOrderAvailable">
           <el-radio-group v-model="form.firstOrderAvailable">
@@ -223,6 +224,19 @@ export default {
       form: {},
       // 表单校验
       rules: {
+        packaEndPeriod: [
+          {required: true, message: "请输入套餐结束时段", trigger: "blur"},
+          {
+            validator: (rule, value, callback) => {
+              if (value <= this.form.packaStartPeriod) {
+                callback(new Error("套餐结束时段必须大于套餐开始时段"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur"
+          }
+        ],
       }
     };
   },