booking interval

frontend/src/views/setting/BookingSetting.vue

@@ -16,8 +16,8 @@
             v-decorator="[
                 'pre_booking_interval_day',
                 {rules: [
-                {required: true, message: '请输入提前预约间隔'},
-                {pattern: /^[1-9]\d*$/, message: '请输入大于1的正整数'},
+                  {required: true, message: '请输入提前预约间隔'},
+                  {pattern: /^[1-9]\d*$/, message: '请输入大于1的正整数'},
                 ],
                 validateTrigger: 'blur',
                 initialValue: setting.pre_booking_interval_day}
@@ -25,28 +25,32 @@
           </a-input>
         </a-form-item>
         <a-form-item
-          label="预约间隔(DEV)"
+          label="预约间隔"
           v-bind="layout">
-          <a-input
-            disabled
-            type="number"
-            addonAfter="分钟"
+          <a-radio-group
             v-decorator="[
                 'booking_interval',
                 {rules: [
-                {required: true, message: '请输入预约间隔'},
-                {pattern: /(^[1-9]\d*$)/, message: '请输入正整数'},
+                  {required: true, message: '请选择预约间隔'},
+                  {validator: validateInterval, message: '请确保预约间隔和开始结束时间匹配'}
                 ], validateTrigger: 'blur',
                 initialValue: setting.booking_interval}
               ]">
-          </a-input>
+            <a-radio :value="30">30分钟</a-radio>
+            <a-radio :value="60">60分钟</a-radio>
+          </a-radio-group>
         </a-form-item>
         <a-form-item
           label="开始时间"
           v-bind="layout">
           <a-time-picker
-            :minuteStep="30"
+            :minuteStep="setting.booking_interval"
             :secondStep="60"
+            :disabledHours="getStartTimeDisabledHours"
+            :disabledMinutes="getStartTimeDisabledMinutes"
+            :hideDisabledOptions="true"
+            :inputReadOnly="true"
+            :allowEmpty="false"
             style="width: 100%;"
             v-decorator="[
             'start_time',{
@@ -57,7 +61,16 @@
         <a-form-item
           label="结束时间"
           v-bind="layout">
-          <a-time-picker style="width: 100%;" v-decorator="[
+          <a-time-picker
+            :minuteStep="setting.booking_interval"
+            :secondStep="60"
+            :disabledHours="getEndTimeDisabledHours"
+            :disabledMinutes="getEndTimeDisabledMinutes"
+            :hideDisabledOptions="true"
+            :inputReadOnly="true"
+            :allowEmpty="false"
+            style="width: 100%;"
+            v-decorator="[
             'end_time',{
               rules: [{ type: 'object', required: true, message: '请选择结束时间' }],
               initialValue: setting.end_time
@@ -72,8 +85,8 @@
             v-decorator="[
                 'punish_point',
                 {rules: [
-                {required: true, message: '请输入惩罚积分数'},
-                {pattern: /(^[1-9]\d*$)/, message: '请输入大于1的正整数'},
+                  {required: true, message: '请输入惩罚积分数'},
+                  {pattern: /(^[1-9]\d*$)/, message: '请输入大于1的正整数'},
                 ], validateTrigger: 'blur',
                 initialValue: setting.punish_point}
               ]">
@@ -88,8 +101,8 @@
             v-decorator="[
                 'reward_point',
                 {rules: [
-                {required: true, message: '请输入奖励积分数'},
-                {pattern: /(^[1-9]\d*$)/, message: '请输入大于1的正整数'},
+                  {required: true, message: '请输入奖励积分数'},
+                  {pattern: /(^[1-9]\d*$)/, message: '请输入大于1的正整数'},
                 ], validateTrigger: 'blur',
                 initialValue: setting.reward_point}
               ]">
@@ -148,6 +161,59 @@
           }
         )
       },
+      getStartTimeDisabledHours () {
+        let ret = []
+        let end_time = this.form.getFieldValue('end_time')
+        let end_hour = end_time.hour()
+        for (let i = 0; i < 24; i++) {
+          if (i > end_hour) {
+            ret.push(i)
+          }
+        }
+        if (end_time.minute() === 0 || this.setting.booking_interval === 60) {
+          ret.push(end_hour)
+        }
+        return ret
+      },
+      getStartTimeDisabledMinutes (selectedHour) {
+        let ret = []
+        let end_time = this.form.getFieldValue('end_time')
+        if (selectedHour === end_time.hour()) {
+          ret.push(30)
+        }
+        return ret
+      },
+      getEndTimeDisabledHours () {
+        let ret = []
+        let start_time = this.form.getFieldValue('start_time')
+        let start_hour = start_time.hour()
+        for (let i = 0; i < 24; i++) {
+          if (i < start_hour) {
+            ret.push(i)
+          }
+        }
+        if (start_time.minute() === 30 || this.setting.booking_interval === 60) {
+          ret.push(start_hour)
+        }
+        return ret
+      },
+      getEndTimeDisabledMinutes (selectedHour) {
+        let ret = []
+        let start_time = this.form.getFieldValue('start_time')
+        if (selectedHour === start_time.hour()) {
+          ret.push(0)
+        }
+        return ret
+      },
+      validateInterval (rule, value, callback) {
+        let start_time = this.form.getFieldValue('start_time')
+        let end_time = this.form.getFieldValue('end_time')
+        if (end_time.diff(start_time) / 1000 / 60 % value === 0) {
+          callback()
+        } else {
+          callback('can by divided by interval')
+        }
+      }
     }
   }
 </script>