套餐设置时间配置优化

src/views/system/pack/index.vue

@@ -207,7 +207,7 @@
         <!--        </el-form-item>-->
         <el-form-item label="时长" prop="duration">
           <!--指定0到23范围的数字-->
-          <el-input-number v-model="form.duration" :max="24" :min="0.5" :step="0.5" label="时长"/>
+          <el-input-number v-model="form.duration" :max="23-form.packaStartPeriod" :min="1" :step="1" label="时长" @input="onDurationChange"  />
         </el-form-item>
         <!--        <el-form-item label="金额" prop="price">-->
         <!--          <el-input v-model="form.price" placeholder="请输入金额" />-->
@@ -218,10 +218,10 @@
         </el-form-item>
         <el-form-item label="套餐开始时段" prop="packaStartPeriod">
           <!--指定0到23范围的数字-->
-          <el-input-number v-model="form.packaStartPeriod" :min="0" :max="23" label="套餐开始时段"/>
+          <el-input-number v-model="form.packaStartPeriod" :min="0" :max="23-form.duration" label="套餐开始时段" @input="onStartTimeChange" />
         </el-form-item>
         <el-form-item label="套餐结束时段" prop="packaEndPeriod">
-          <el-input-number v-model="form.packaEndPeriod" :min="0" :max="23" label="套餐开始时段"/>
+          <el-input-number disabled v-model="form.packaEndPeriod" :min="0" :max="23" label="套餐开始时段"/>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <!--指定0到23范围的数字-->
@@ -312,9 +312,9 @@ export default {
         pageNum: 1,
         pageSize: 10,
         name: null,
-        duration: null,
+        duration: '',
         price: null,
-        packaStartPeriod: null,
+        packaStartPeriod: '',
         packaEndPeriod: null,
         firstOrderAvailable: null,
         type: null,
@@ -325,18 +325,8 @@ 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"
-          }
+        packaStartPeriod: [
+          {required: true, message: "请输入套餐结束时段", trigger: "blur"}
         ],
       }
     };
@@ -345,6 +335,12 @@ export default {
     this.getList();
   },
   methods: {
+    onDurationChange(val){
+      this.form.packaEndPeriod = Number(this.form.packaStartPeriod)+val
+    },
+    onStartTimeChange(val){
+      this.form.packaEndPeriod = Number(this.form.duration)+val
+    },
     /** 查询套餐列表 */
     getList() {
       this.loading = true;
@@ -369,10 +365,10 @@ export default {
       this.form = {
         id: null,
         name: null,
-        duration: null,
+        duration: 1,
         price: null,
-        packaStartPeriod: null,
-        packaEndPeriod: null,
+        packaStartPeriod: 0,
+        packaEndPeriod: 1,
         createBy: null,
         createTime: null,
         updateBy: null,