[新增] 无懈可击的时间防御

src/main.js

@@ -8,6 +8,17 @@ import "./assets/scss/app.scss";
 import Vuelidate from "vuelidate";
 import VueFlatPickr from "vue-flatpickr-component";
 import "flatpickr/dist/flatpickr.css";
+import flatpickr from "../node_modules/flatpickr";
+import { Mandarin } from "../node_modules/flatpickr/dist/l10n/zh.js";
+// date picker
+flatpickr.setDefaults({
+  enableTime: true,
+  dateFormat: "U",
+  altFormat: "M	j, Y  H:i",
+  altInput: true,
+  locale: Mandarin
+});
+
 Vue.config.productionTip = false;
 
 Vue.use(Vuelidate);

src/mixins/time.js

@@ -1,22 +1,20 @@
 import dayjs from "dayjs";
-import { Hindi } from "flatpickr/dist/l10n/hi.js";
+import { Mandarin } from "../../node_modules/flatpickr/dist/l10n/zh.js";
 
 export default {
-  data() {
-    return {
-      config: {
-        wrap: true, // set wrap to true only when using 'input-group'
-        altFormat: "M	j, Y",
-        altInput: true,
-        dateFormat: "Y-m-d",
-        locale: Hindi // locale for this instance only
-      }
-    };
-  },
   methods: {
     displayUnixTime(time) {
       if (!time) return;
       return dayjs.unix(time).format("YYYY年 MM月 DD日 HH:mm:ss");
+    },
+    getDefaultConfig() {
+      return {
+        enableTime: true,
+        dateFormat: "U",
+        altFormat: "M	j, Y  H:i",
+        altInput: true,
+        locale: Mandarin
+      };
     }
   }
 };

src/views/teacher/Review/index.vue

@@ -32,15 +32,14 @@
           {{ errorMassage }}
         </b-notification>
         <div class="content">
-          //```json { "documentHwId": Number, //文档作业id, "taskNumber":
-          Number, //互评任务数 "startAt" : Number, //互评开始时间 "reviewDdl" :
-          **Number** - 互评结束时间 | `timestamp`, "argueDdl" : **Number** -
-          argue结束时间 | `timestamp`, "endDdl" : **Number** - 最后结束时间 |
-          `timestamp` } ```
-          <b-field label="目标文档作业">
+          <b-field
+            label="目标文档作业"
+            :type="$v.documentHwId.$error ? 'is-danger' : ''"
+            :message="$v.documentHwId.$error ? '请选择文档' : ''"
+          >
             <b-select
               :loading="docHomeworkLoading"
-              v-model="nextReview.documentHwId"
+              v-model="$v.documentHwId.$model"
               placeholder="选择一个文档作业"
               expanded
             >
@@ -53,20 +52,56 @@
               </option>
             </b-select>
           </b-field>
-          <b-field label="互评任务数">
-            <b-input type="number" v-model="nextReview.taskNumber"></b-input>
+          <b-field
+            label="互评任务数"
+            :type="$v.taskNumber.$error ? 'is-danger' : ''"
+            :message="$v.taskNumber.$error ? '请输入互评任务数' : ''"
+          >
+            <b-input type="number" v-model="$v.taskNumber.$model"></b-input>
           </b-field>
-          <b-field label="互评开始时间">
-            <b-input type="number" v-model="nextReview.startAt"></b-input>
+          <b-field
+            label="互评开始时间"
+            :type="$v.startAt.$error ? 'is-danger' : ''"
+            :message="$v.startAt.$error ? '请选择时间' : ''"
+          >
+            <flat-pickr
+              class="input"
+              v-model="$v.startAt.$model"
+              :config="startAtConfig"
+            ></flat-pickr>
           </b-field>
-          <b-field label="互评结束时间">
-            <b-input type="number" v-model="nextReview.reviewDdl"></b-input>
+          <b-field
+            label="互评结束时间"
+            :type="$v.reviewDdl.$error ? 'is-danger' : ''"
+            :message="$v.reviewDdl.$error ? '请选择时间' : ''"
+          >
+            <flat-pickr
+              class="input"
+              v-model="$v.reviewDdl.$model"
+              :config="reviewDdlConfig"
+            ></flat-pickr>
           </b-field>
-          <b-field label="申请重审结束时间">
-            <b-input type="number" v-model="nextReview.argueDdl"></b-input>
+          <b-field
+            label="申请重审结束时间"
+            :type="$v.argueDdl.$error ? 'is-danger' : ''"
+            :message="$v.argueDdl.$error ? '请选择时间' : ''"
+          >
+            <flat-pickr
+              class="input"
+              v-model="$v.argueDdl.$model"
+              :config="argueDdlConfig"
+            ></flat-pickr>
           </b-field>
-          <b-field label="重审结束时间">
-            <b-input type="number" v-model="nextReview.endDdl"></b-input>
+          <b-field
+            label="重审结束时间"
+            :type="$v.endDdl.$error ? 'is-danger' : ''"
+            :message="$v.endDdl.$error ? '请选择时间' : ''"
+          >
+            <flat-pickr
+              class="input"
+              v-model="$v.endDdl.$model"
+              :config="endDdlConfig"
+            ></flat-pickr>
           </b-field>
 
           <a
@@ -90,6 +125,8 @@ import PageHeader from "@/components/PageHeader";
 import PageBody from "@/components/PageBody/index";
 import ReviewStateTag from "@/components/ReviewStateTag/index";
 import { getDocAssignmentListByCrs } from "@/api/assignment";
+import timeMixins from "@/mixins/time";
+import { required } from "vuelidate/lib/validators";
 export default {
   components: {
     ReviewStateTag,
@@ -102,6 +139,7 @@ export default {
       course: state => state.course.currentCourse
     })
   },
+  mixins: [timeMixins],
   data() {
     return {
       courses: [],
@@ -112,9 +150,31 @@ export default {
       docHomeworkLoading: false,
       errorMassage: false,
       isServerError: false,
-      nextReview: {
-        documentHwId: null,
-        taskNumber: 0
+      documentHwId: null,
+      taskNumber: null,
+      startAt: null,
+      reviewDdl: null,
+      argueDdl: null,
+      endDdl: null,
+      startAtConfig: {
+        ...this.getDefaultConfig(),
+        minDate: "today",
+        maxDate: null
+      },
+      reviewDdlConfig: {
+        ...this.getDefaultConfig(),
+        minDate: "today",
+        maxDate: null
+      },
+      argueDdlConfig: {
+        ...this.getDefaultConfig(),
+        minDate: "today",
+        maxDate: null
+      },
+      endDdlConfig: {
+        ...this.getDefaultConfig(),
+        minDate: "today",
+        maxDate: null
       }
     };
   },
@@ -123,11 +183,59 @@ export default {
       value => (this.review = value.data)
     );
   },
+  validations: {
+    documentHwId: {
+      required
+    },
+    taskNumber: {
+      required
+    },
+    startAt: {
+      required
+    },
+    reviewDdl: {
+      required
+    },
+    argueDdl: {
+      required
+    },
+    endDdl: {
+      required
+    }
+  },
   watch: {
     showModal(newValue) {
       if (newValue) {
         this.getDocHomework();
       }
+    },
+    startAt(newValue) {
+      if (newValue !== "") {
+        this.adjustMinDate("reviewDdlConfig", newValue);
+        this.adjustMinDate("argueDdlConfig", newValue);
+        this.adjustMinDate("endDdlConfig", newValue);
+      }
+    },
+    reviewDdl(newValue) {
+      if (newValue !== "") {
+        this.adjustMaxDate("startAtConfig", newValue);
+        this.adjustMinDate("argueDdlConfig", newValue);
+        this.adjustMinDate("endDdlConfig", newValue);
+      }
+    },
+    argueDdl(newValue) {
+      if (newValue !== "") {
+        this.adjustMaxDate("startAtConfig", newValue);
+        this.adjustMaxDate("reviewDdlConfig", newValue);
+        this.adjustMinDate("endDdlConfig", newValue);
+      }
+    },
+    endDdl(newValue) {
+      if (newValue !== "") {
+        this.adjustMaxDate("startAtConfig", newValue);
+        this.adjustMaxDate("reviewDdlConfig", newValue);
+        this.adjustMaxDate("argueDdlConfig", newValue);
+      }
     }
   },
   methods: {
@@ -137,6 +245,24 @@ export default {
       const { data } = await getDocAssignmentListByCrs(courseId);
       this.docHomework = data;
       this.docHomeworkLoading = false;
+    },
+    adjustMinDate(config, newValue) {
+      const configMinDate = Number(this[config].minDate);
+      if (!configMinDate || configMinDate < Number(newValue)) {
+        this[config].minDate = newValue;
+      }
+    },
+    adjustMaxDate(config, newValue) {
+      const configMinDate = Number(this[config].maxDate);
+      if (!configMinDate || configMinDate > Number(newValue)) {
+        this[config].maxDate = newValue;
+      }
+    },
+    submit() {
+      this.$v.$touch();
+      if (!this.$v.$invalid) {
+        console.log("hahha");
+      }
     }
   }
 };