timeRange 组件封装

src/components/common/timeRange.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-range-picker
+    :disabled-date="disabledDate"
+    :disabled-time="disabledRangeTime"
+    :show-time="{
+      hideDisabledOptions: true,
+      defaultValue: [
+        $moment('00:00:00', 'HH:mm:ss'),
+        $moment('23:59:59', 'HH:mm:ss'),
+      ],
+    }"
+    format="YYYY-MM-DD HH:mm:ss"
+  />
+</template>
+
+<script>
+export default { 
+  methods: {
+    getTimeRange(){
+      console.log(1);
+    },
+    range(start, end) {
+      const result = [];
+      for (let i = start; i < end; i++) {
+        result.push(i);
+      }
+      return result;
+    },
+    disabledDate(current) {
+      // Can not select days before today and today
+      return current && current < this.$moment().endOf("day");
+    },
+
+    disabledDateTime() {
+      return {
+        disabledHours: () => this.range(0, 24).splice(4, 20),
+        disabledMinutes: () => this.range(30, 60),
+        disabledSeconds: () => [55, 56],
+      };
+    },
+    disabledRangeTime(_, type) {
+      if (type === "start") {
+        return {
+          disabledHours: () => this.range(0, 60).splice(24, 4),
+          disabledMinutes: () => this.range(30, 60),
+          disabledSeconds: () => [55, 56],
+        };
+      }
+      return {
+        disabledHours: () => this.range(0, 60).splice(24, 4),
+        disabledMinutes: () => this.range(0, 31),
+        disabledSeconds: () => [55, 56],
+      };
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/components/work/overview/workOverview.vue

@@ -18,23 +18,16 @@
         {{ item.name }}
       </a-select-option>
     </a-select>
-    <a-range-picker
-      :disabled-date="disabledDate"
-      :disabled-time="disabledRangeTime"
-      :show-time="{
-        hideDisabledOptions: true,
-        defaultValue: [
-          $moment('00:00:00', 'HH:mm:ss'),
-          $moment('23:59:59', 'HH:mm:ss'),
-        ],
-      }"
-      format="YYYY-MM-DD HH:mm:ss"
-    />
+    <timeRange ref="timeRange"></timeRange>
+    <a-button @click="getTimeRange"></a-button>
   </div>
 </template>
 <script>
-
+import timeRange from "@/components/common/timeRange.vue";
 export default {
+  components: {
+    timeRange,
+  },
   data() {
     return {
       options: [
@@ -59,45 +52,14 @@ export default {
       ],
     };
   },
-  mounted() {
-     },
+  mounted() {},
   methods: {
-    range(start, end) {
-      const result = [];
-      for (let i = start; i < end; i++) {
-        result.push(i);
-      }
-      return result;
-    },
-    disabledDate(current) {
-      // Can not select days before today and today
-      return current && current < this.$moment().endOf("day");
-    },
-
-    disabledDateTime() {
-      return {
-        disabledHours: () => this.range(0, 24).splice(4, 20),
-        disabledMinutes: () => this.range(30, 60),
-        disabledSeconds: () => [55, 56],
-      };
-    },
-    disabledRangeTime(_, type) {
-      if (type === "start") {
-        return {
-          disabledHours: () => this.range(0, 60).splice(24, 4),
-          disabledMinutes: () => this.range(30, 60),
-          disabledSeconds: () => [55, 56],
-        };
-      }
-      return {
-        disabledHours: () => this.range(0, 60).splice(24, 4),
-        disabledMinutes: () => this.range(0, 31),
-        disabledSeconds: () => [55, 56],
-      };
-    },
     handleChange(value) {
       console.log(`selected ${value}`);
     },
+    getTimeRange(){
+      this.$refs.timeRange.getTimeRange();// 获取时间段
+    }
   },
 };
 </script>