Browse Source

日期时间优化

lilei 2 years ago
parent
commit
690fd85906
2 changed files with 68 additions and 18 deletions
  1. 1 1
      public/version.json
  2. 67 17
      src/views/common/rangeDateTime.vue

+ 1 - 1
public/version.json

@@ -1,5 +1,5 @@
 {
 {
   "message": "发现有新版本发布,确定更新系统?",
   "message": "发现有新版本发布,确定更新系统?",
   "vendorJsVersion": "",
   "vendorJsVersion": "",
-  "version": 1672730138035
+  "version": 1673593892636
 }
 }

+ 67 - 17
src/views/common/rangeDateTime.vue

@@ -4,22 +4,43 @@
       :size="size"
       :size="size"
       v-model="startValue"
       v-model="startValue"
       :disabled-date="disabledStartDate"
       :disabled-date="disabledStartDate"
-      :show-time="false"
-      format="YYYY-MM-DD"
+      :show-time="showTime"
+      :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
       placeholder="开始时间"
       placeholder="开始时间"
+      :open="startOpen"
       @openChange="handleStartOpenChange"
       @openChange="handleStartOpenChange"
-    />
+      @panelChange="handleStartPanelChange"
+      :showToday="false"
+    >
+      <div slot="renderExtraFooter">
+        <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
+        <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
+        <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
+        <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
+        <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
+      </div>
+    </a-date-picker>
     <span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>
     <span>&nbsp;&nbsp;至&nbsp;&nbsp;</span>
     <a-date-picker
     <a-date-picker
       :size="size"
       :size="size"
       v-model="endValue"
       v-model="endValue"
       :disabled-date="disabledEndDate"
       :disabled-date="disabledEndDate"
-      :show-time="false"
-      format="YYYY-MM-DD"
+      :show-time="showTime"
+      :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
       placeholder="结束时间"
       placeholder="结束时间"
       :open="endOpen"
       :open="endOpen"
       @openChange="handleEndOpenChange"
       @openChange="handleEndOpenChange"
-    />
+      @panelChange="handleEndPanelChange"
+      :showToday="false"
+    >
+      <div slot="renderExtraFooter">
+        <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
+        <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
+        <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
+        <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
+        <a-button @click="setVal('date5')" type="link" size="small">近一年</a-button>
+      </div>
+    </a-date-picker>
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
@@ -38,14 +59,22 @@ export default {
     },
     },
     showTime: {
     showTime: {
       type: Boolean,
       type: Boolean,
-      default: true
+      default: false
     }
     }
   },
   },
   data () {
   data () {
     return {
     return {
       startValue: this.value[0],
       startValue: this.value[0],
       endValue: this.value[1],
       endValue: this.value[1],
-      endOpen: false
+      endOpen: false,
+      startOpen: false,
+      ranges: {
+        'date1': [moment(), moment()],
+        'date2': [moment().subtract(1, 'months'), moment()],
+        'date3': [moment().startOf('month'), moment()],
+        'date4': [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')],
+        'date5': [moment().subtract(1, 'years'), moment()]
+      }
     }
     }
   },
   },
   watch: {
   watch: {
@@ -57,28 +86,49 @@ export default {
     }
     }
   },
   },
   methods: {
   methods: {
+    setVal (key) {
+      this.startValue = this.ranges[key][0]
+      this.endValue = this.ranges[key][1]
+      this.startOpen = false
+      this.endOpen = false
+    },
     disabledStartDate (startValue) {
     disabledStartDate (startValue) {
       const endValue = this.endValue
       const endValue = this.endValue
-      const oMinYearVs = moment(endValue, 'YYYY-MM-DD').subtract(1, 'years')
       const maxYearVs = moment().endOf('day') //  今天,包含今天
       const maxYearVs = moment().endOf('day') //  今天,包含今天
       if (endValue) {
       if (endValue) {
-        return startValue.valueOf() < oMinYearVs.valueOf() || startValue.valueOf() > maxYearVs.valueOf()
-      } else {
-        return startValue.valueOf() > maxYearVs.valueOf()
+        if (!this.startValue) {
+          return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
+        }
+        return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() > maxYearVs.valueOf()
       }
       }
+      return startValue.valueOf() > maxYearVs.valueOf()
     },
     },
     disabledEndDate (endValue) {
     disabledEndDate (endValue) {
+      const startValue = this.startValue
       const maxYearVs = moment().endOf('day') //  今天,包含今天
       const maxYearVs = moment().endOf('day') //  今天,包含今天
-      return endValue && endValue.valueOf() > maxYearVs.valueOf()
+      if (startValue) {
+        return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > maxYearVs.valueOf()
+      }
+      return endValue.valueOf() > maxYearVs.valueOf()
     },
     },
     handleStartOpenChange (open) {
     handleStartOpenChange (open) {
-      if (!open) {
+      if (!open && !this.endValue) {
         this.endOpen = true
         this.endOpen = true
       }
       }
+      this.startOpen = open
     },
     },
     handleEndOpenChange (open) {
     handleEndOpenChange (open) {
+      if (!open && !this.startValue) {
+        this.startOpen = true
+      }
       this.endOpen = open
       this.endOpen = open
     },
     },
+    handleStartPanelChange (v) {
+      console.log(v)
+    },
+    handleEndPanelChange (v) {
+      console.log(v)
+    },
     changeInput () {
     changeInput () {
       const startValue = this.startValue
       const startValue = this.startValue
       const endValue = this.endValue
       const endValue = this.endValue
@@ -87,12 +137,12 @@ export default {
       if (!dateStrings[0] || !dateStrings[1]) {
       if (!dateStrings[0] || !dateStrings[1]) {
         dateStrings = []
         dateStrings = []
       } else {
       } else {
-        if (this.showTime) {
+        if (!this.showTime) {
           dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00')
           dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD 00:00:00')
           dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59')
           dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD 23:59:59')
         } else {
         } else {
-          dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD')
-          dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD')
+          dateStrings[0] = moment(dateStrings[0]).format('YYYY-MM-DD hh:mm:ss')
+          dateStrings[1] = moment(dateStrings[1]).format('YYYY-MM-DD hh:mm:ss')
         }
         }
       }
       }
       this.$emit('change', dateStrings)
       this.$emit('change', dateStrings)