feat: 新建假期验证

src/views/holidays/HolidaysDetail.vue

@@ -8,11 +8,11 @@
     class="cust-modal"
     okText="保存"
   >
-    <a-form>
+    <a-form :form="form">
       <a-row>
         <a-col :span="12">
-          <a-form-item label='假期名称' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
-            <a-input v-model="detailInfo.name" placeholder="双休日请输入星期六或星期日" />
+          <a-form-item label='假期名称' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }" >
+            <a-input v-model="detailInfo.name" v-decorator="['假期名称', {rules: [{ required: true, message: '请输入假期名称' }]}]" placeholder="双休日请输入星期六或星期日" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
@@ -33,8 +33,8 @@
           </a-form-item>
 
           <a-form-item v-else label='假期范围' :labelCol="{ span: 5 }" :wrapperCol="{ span: 17 }">
-             <a-range-picker :disabled-date="disabledDate" v-if="isEdit" v-model="dateRange"  @change="onChange" />
-            <a-range-picker :disabled-date="disabledDate" v-else @change="onChange" />
+             <a-range-picker v-decorator="['假期范围', {rules: [{ required: true, message: '请选择假期范围' }]}]" :disabled-date="disabledDate" v-if="isEdit" v-model="dateRange"  @change="onChange" />
+            <a-range-picker v-decorator="['假期范围', {rules: [{ required: true, message: '请选择假期范围' }]}]" :disabled-date="disabledDate" v-else @change="onChange" />
           </a-form-item>
         </a-col>
         <a-col :span="12">
@@ -65,7 +65,8 @@ export default {
       durationInput: this.detailData.dayCode === SYS_CONST.HOLIDAY_TYPE.WEEKEND,
       detailInfo: this.detailData,
       dateRange: [moment(this.detailData.startDate), moment(this.detailData.endDate)],
-      dateTime: moment(this.detailData.startDate)
+      dateTime: moment(this.detailData.startDate),
+      form: this.$form.createForm(this)
     }
   },
   watch:{
@@ -78,12 +79,16 @@ export default {
   },
   methods: {
     handleOk() {
-      addHoliday(this.detailInfo).then(response => {
-        if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
-          this.visible = false;
-          this.$emit('flushData')
+      this.form.validateFieldsAndScroll((err) => {
+        if (!err) {
+          addHoliday(this.detailInfo).then(response => {
+            if (response && response.code == SYS_CONST.REQUEST.SUCCEED) {
+              this.visible = false;
+              this.$emit('flushData')
+            }
+          })
         }
-      });
+      })
     },
     onChange(date,dateStr) {
      this.detailInfo.duration = date[1].diff(date[0],'day')+1;