push

lib/saas/view/config/configDate.vue

@@ -0,0 +1,207 @@
+<!-- @format -->
+
+<template>
+  <span style="color: #37abc4; cursor: pointer" class="config-input" @click="editTime()">
+    {{ timeValue.expectedValue || '-' }}
+  </span>
+  <a-modal
+    v-model:visible="visibleTime"
+    title="选择"
+    @ok="changeDate"
+    :mask="false"
+    style="top: 150px">
+    <div class="modal-time-picker">
+      <a-time-picker
+        format="HH:mm"
+        v-model:value="startTimeValue"
+        valueFormat="HH:mm"
+        :allowClear="false"
+        v-model:open="startOpen"
+        @change="_onChange"
+        :disabledHours="startDisabledHours"
+        :disabledMinutes="startDisabledMinutes" />~
+      <a-time-picker
+        format="HH:mm"
+        valueFormat="HH:mm"
+        v-model:value="endTimeValue"
+        :allowClear="false"
+        v-model:open="endOpen"
+        @change="_onChange"
+        :disabledHours="endDisabledHours"
+        :disabledMinutes="endDisabledMinutes" />
+    </div>
+  </a-modal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import moment from 'moment';
+
+  export default defineComponent({
+    props: {
+      timeValue: {
+        type: Object,
+      },
+      index: {
+        type: Number,
+      },
+      listKey: {
+        type: String,
+      },
+      // text: {
+      //   type: String,
+      //   default: '',
+      // },
+    },
+    emits: ['changeDate', 'blur'],
+    setup(props, ctx) {
+      const startOpen = ref(false);
+      const endOpen = ref(false);
+      const time = props.timeValue.expectedValue.split('-');
+      let startTimeValue = ref(time[0]);
+      let startTimeValue1 = moment(time[0], 'HH:mm');
+      let endTimeValue = ref(time[1]);
+      let endTimeValue1 = moment(time[1], 'HH:mm');
+      const visibleTime = ref<boolean>(false);
+      let timeValue = ref('');
+      const editTime = () => {
+        visibleTime.value = true;
+      };
+      const changeDate = () => {
+        visibleTime.value = false;
+        let value = {
+          configValue: timeValue.value,
+          index: props.index,
+          key: props.listKey,
+        };
+        ctx.emit('changeDate', value);
+        // console.log(timeValue.value);
+      };
+      const handleClose = () => {
+        startOpen.value = false;
+        endOpen.value = false;
+      };
+      const _onChange = () => {
+        // console.log('change', startTimeValue.value, endTimeValue.value);
+        timeValue.value = startTimeValue.value + '-' + endTimeValue.value;
+
+        return;
+        let start: string = startTimeValue.value._d.toString();
+        let end: string = endTimeValue.value._d.toString();
+        let startTime = start.split(' ');
+        let endTime = end.split(' ');
+        startTimeValue.value = startTime[4].split(':')[0] + ':' + startTime[4].split(':')[1];
+        endTimeValue.value = endTime[4].split(':')[0] + ':' + endTime[4].split(':')[1];
+        timeValue.value = startTimeValue.value + '-' + endTimeValue.value;
+      };
+      const startDisabledHours = () => {
+        let disHours = [];
+        let starthours: Number;
+        if (endTimeValue.value == undefined) {
+          let time = endTimeValue.value.split(':');
+          starthours = time[0];
+        } else {
+          let time = endTimeValue.value;
+          starthours = time.split(':')[0];
+        }
+        for (let i = 24; i > starthours; i--) {
+          disHours.push(i);
+        }
+        return disHours;
+      };
+      const endDisabledHours = () => {
+        let disHours = [];
+        let endhours: Number;
+        if (startTimeValue.value == undefined) {
+          let time = startTimeValue.value.split(':');
+          endhours = time[0];
+        } else {
+          let time = startTimeValue.value;
+          endhours = time.split(':')[0];
+        }
+        for (let i = 0; i < endhours; i++) {
+          disHours.push(i);
+        }
+        return disHours;
+      };
+      const startDisabledMinutes = (selectedHour: any) => {
+        let time: Number[] = [];
+        let endhours: Number;
+        let endMinutes: Number;
+        let disminutes = [];
+        if (endTimeValue.value == undefined) {
+          time = startTimeValue.value.split(':');
+          endhours = time[0];
+          endMinutes = time[1];
+          if (selectedHour == endhours) {
+            for (var i = 59; i > endMinutes; i--) {
+              disminutes.push(i);
+            }
+          }
+        } else {
+          time = endTimeValue.value.split(':');
+          endhours = time[0];
+          endMinutes = time[1];
+          if (selectedHour == endhours) {
+            for (var i = 59; i > endMinutes; i--) {
+              disminutes.push(i);
+            }
+          }
+        }
+        return disminutes;
+      };
+      const endDisabledMinutes = (selectedHour: any) => {
+        let time: Number[] = [];
+        let endhours: Number;
+        let endMinutes: Number;
+        let disminutes = [];
+        if (startTimeValue.value == undefined) {
+          time = startTimeValue.value.split(':');
+          endhours = time[0];
+          endMinutes = time[1];
+          if (selectedHour == endhours) {
+            for (var i = 0; i < endMinutes; i++) {
+              disminutes.push(i);
+            }
+          }
+        } else {
+          time = startTimeValue.value.split(':');
+          endhours = time[0];
+          endMinutes = time[1];
+          if (selectedHour == endhours) {
+            for (var i = 0; i < endMinutes; i++) {
+              disminutes.push(i);
+            }
+          }
+        }
+        return disminutes;
+      };
+      return {
+        editTime,
+        time,
+        _onChange,
+        startDisabledHours,
+        endDisabledHours,
+        startDisabledMinutes,
+        endDisabledMinutes,
+        visibleTime,
+        endOpen,
+        startOpen,
+        startTimeValue,
+        endTimeValue,
+        startTimeValue1,
+        endTimeValue1,
+        changeDate,
+        handleClose,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .modal-time-picker {
+    margin-left: 50px;
+  }
+
+  :deep(.ant-time-picker) {
+    width: 150px;
+  }
+</style>