update

src/layout/user/leaveRequest.vue

@@ -1,107 +1,121 @@
-<template>
-  <div id="leaveRequest">
-    <el-row>
-      <el-col :span="24">
-        <el-form ref="form" :model="form">
-          <van-field name="radio" label="请假类型">
-            <template #input>
-              <van-radio-group v-model="form.type" direction="horizontal">
-                <van-radio name="0">请假</van-radio>
-                <van-radio name="1">退出</van-radio>
-              </van-radio-group>
-            </template>
-          </van-field>
-          <van-cell title="开始时间" is-link :value="form.starttime" @click="birthdayPopup" />
-          <van-popup v-model="birthdayShow" position="bottom">
-            <van-datetime-picker @confirm="birthdayPicker" type="datetime" title="选择完整时间" :min-date="minDate" :max-date="maxDate" />
-          </van-popup>
-          <van-cell title="结束时间" is-link :value="form.endtime" @click="birthdayPopups" v-if="form.type == '0'" />
-          <van-popup v-model="endbirthdayshow" position="bottom">
-            <van-datetime-picker @confirm="birthdayPickers" type="datetime" title="选择完整时间" :min-date="minDate" :max-date="maxDate" />
-          </van-popup>
-          <van-field v-model="form.reason" rows="1" autosize label="请假理由" type="textarea" placeholder="请输入请假理由" />
-          <el-form-item>
-            <el-button type="primary" @click="onSubmit">提交</el-button>
-            <el-button @click="cancelClick()">取消</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import moment from 'moment';
-export default {
-  name: 'leaveRequest',
-  props: {
-    form: null,
-  },
-  components: {},
-  data: () => ({
-    starttime: '',
-    minDate: new Date(2020, 0, 1),
-    maxDate: new Date(2025, 10, 1),
-    currentDate: new Date(),
-    birthdayShow: false,
-    endbirthdayshow: false,
-    date: require('@/assets/date.png'),
-  }),
-  created() {},
-  computed: {},
-  methods: {
-    //开始时间
-    birthdayPopup() {
-      this.birthdayShow = true;
-    },
-    //结束时间
-    birthdayPopups() {
-      this.endbirthdayshow = true;
-    },
-    // 确认选择之后的时间
-    birthdayPicker(val) {
-      let starttime = moment(val).format('YYYY-MM-DD HH:mm');
-      this.$set(this.form, `starttime`, starttime);
-      this.birthdayShow = false;
-    },
-    birthdayPickers(val) {
-      let endtime = moment(val).format('YYYY-MM-DD HH:mm');
-      this.$set(this.form, `endtime`, endtime);
-      this.endbirthdayshow = false;
-    },
-    // 提交
-    onSubmit() {
-      this.$emit('onSubmit', { data: this.form });
-    },
-    // 取消
-    cancelClick() {
-      this.$emit('cancelClick');
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-/deep/.el-form-item__label {
-  width: 100%;
-  text-align: left;
-  float: none;
-}
-/deep/.el-form-item {
-  margin: 15px 0;
-  text-align: center;
-}
-.date {
-  color: blue;
-}
-.endDate {
-  color: red;
-}
-/deep/.el-textarea {
-  width: 90%;
-}
-/deep/.el-textarea__inner {
-  background: #f5f5f5;
-  border: none;
-}
-</style>
+<template>
+  <div id="leaveRequest">
+    <el-row>
+      <el-col :span="24">
+        <el-form ref="form" :model="form">
+          <van-field name="radio" label="请假类型">
+            <template #input>
+              <van-radio-group v-model="form.type" direction="horizontal">
+                <van-radio name="0">请假</van-radio>
+                <van-radio name="1">退出</van-radio>
+              </van-radio-group>
+            </template>
+          </van-field>
+          <van-cell title="开始时间" is-link :value="form.starttime" @click="birthdayPopup" />
+          <van-popup v-model="birthdayShow" position="bottom">
+            <van-datetime-picker @confirm="birthdayPicker" type="datetime" title="选择完整时间" :min-date="startOption.min" />
+          </van-popup>
+          <van-cell title="结束时间" is-link :value="form.endtime" @click="birthdayPopups" v-if="form.type == '0'" />
+          <van-popup v-model="endbirthdayshow" position="bottom">
+            <van-datetime-picker @confirm="birthdayPickers" type="datetime" title="选择完整时间" :min-date="endOption.min" />
+          </van-popup>
+          <van-field v-model="form.reason" rows="1" autosize label="请假理由" type="textarea" placeholder="请输入请假理由" />
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">提交</el-button>
+            <el-button @click="cancelClick()">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+export default {
+  name: 'leaveRequest',
+  props: {},
+  components: {},
+  data: () => ({
+    form: {
+      type: '0',
+      starttime: moment().format('YYYY-MM-DD HH:mm'),
+    },
+    starttime: '',
+    startOption: {
+      min: new Date(),
+    },
+    endOption: {
+      min: new Date(),
+    },
+    minDate: new Date(2020, 0, 1),
+    maxDate: new Date(2025, 10, 1),
+    currentDate: new Date(),
+    birthdayShow: false,
+    endbirthdayshow: false,
+    date: require('@/assets/date.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    //开始时间
+    birthdayPopup() {
+      this.birthdayShow = true;
+    },
+    //结束时间
+    birthdayPopups() {
+      this.endbirthdayshow = true;
+    },
+    // 确认选择之后的时间
+    birthdayPicker(val) {
+      let starttime = moment(val).format('YYYY-MM-DD HH:mm');
+      this.$set(this.form, `starttime`, starttime);
+      // 限制结束时间的开始选择
+      this.$set(this.endOption, 'min', val);
+      this.$set(this.form, 'endtime', '');
+      this.birthdayShow = false;
+    },
+    birthdayPickers(val) {
+      let endtime = moment(val).format('YYYY-MM-DD HH:mm');
+      this.$set(this.form, `endtime`, endtime);
+      this.endbirthdayshow = false;
+    },
+    // 提交
+    onSubmit() {
+      this.$emit('onSubmit', { data: this.form });
+    },
+    // 取消
+    cancelClick() {
+      this.$emit('cancelClick');
+    },
+    selectStart(picker) {
+      console.log(picker);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-form-item__label {
+  width: 100%;
+  text-align: left;
+  float: none;
+}
+/deep/.el-form-item {
+  margin: 15px 0;
+  text-align: center;
+}
+.date {
+  color: blue;
+}
+.endDate {
+  color: red;
+}
+/deep/.el-textarea {
+  width: 90%;
+}
+/deep/.el-textarea__inner {
+  background: #f5f5f5;
+  border: none;
+}
+</style>