fix: 自定义时间结束取值当天23点59分

apps/bigmember_pc/src/components/selector/timeDropdown.vue

@@ -1,32 +1,70 @@
 <template>
-  <div class="select-container" :class="{ 'custom-select-auto-container': !isDefault }">
-    <el-select ref="selectSelector" v-model="activeLabel" :popper-append-to-body="false"
-      @visible-change="onVisibleChange" @mouseenter.native="onSelectMouseEnter" @mouseleave.native="onSelectMouseLeave"
-      :placeholder="placeholder" popper-class="select-custom">
+  <div
+    class="select-container"
+    :class="{ 'custom-select-auto-container': !isDefault }"
+  >
+    <el-select
+      ref="selectSelector"
+      v-model="activeLabel"
+      :popper-append-to-body="false"
+      :placeholder="placeholder"
+      popper-class="select-custom"
+      @visible-change="onVisibleChange"
+      @mouseenter.native="onSelectMouseEnter"
+      @mouseleave.native="onSelectMouseLeave"
+    >
       <template v-if="!isDefault" slot="prefix">
         <div class="select-prefix">
-          <span class="select-prefix-value highlight-text" v-if="activeLabel">{{ activeLabel }}</span>
-          <span class="select-prefix-value" v-else>{{ placeholder }}</span>
-          <i class="iconfont icon-xiala" :class="{ 'is-reverse': isFocus }"></i>
+          <span v-if="activeLabel" class="select-prefix-value highlight-text">{{
+            activeLabel
+          }}</span>
+          <span v-else class="select-prefix-value">{{ placeholder }}</span>
+          <i class="iconfont icon-xiala" :class="{ 'is-reverse': isFocus }" />
         </div>
       </template>
       <template slot="empty">
         <div class="time-container">
-          <div class="time-item" :class="{ 'active': item.value === activeValue || (item.disabled && isCustom) }"
-            v-for="item in options" :key="item.label" :label="item.label" :value="item.value"
-            @click="handleChange(item)">
-            <el-popover v-if="item.disabled" class="custom-popover" :append-to-body="false" placement="right-end"
-              :trigger="popoverTrigger" :offset="12" v-model="showPopover" @show="popShow" @hide="popHide"
-              ref="customPopover">
+          <div
+            v-for="item in options"
+            :key="item.label"
+            class="time-item"
+            :class="{
+              active: item.value === activeValue || (item.disabled && isCustom)
+            }"
+            :label="item.label"
+            :value="item.value"
+            @click="handleChange(item)"
+          >
+            <el-popover
+              v-if="item.disabled"
+              ref="customPopover"
+              v-model="showPopover"
+              class="custom-popover"
+              :append-to-body="false"
+              placement="right-end"
+              :trigger="popoverTrigger"
+              :offset="12"
+              @show="popShow"
+              @hide="popHide"
+            >
               <div class="custom-time">
-                <el-date-picker ref="timePick" class="time-pick" :append-to-body="false" v-model="p_time"
-                  type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-                  value-format="timestamp" align="center" @change="dateChange">
-                </el-date-picker>
+                <el-date-picker
+                  ref="timePick"
+                  v-model="p_time"
+                  class="time-pick"
+                  :append-to-body="false"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="timestamp"
+                  align="center"
+                  @change="dateChange"
+                />
               </div>
               <div slot="reference" class="custom-label">
                 <span>{{ item.label }}</span>
-                <i class="el-icon-arrow-right"></i>
+                <i class="el-icon-arrow-right" />
               </div>
             </el-popover>
             <span v-else>{{ item.label }}</span>
@@ -36,11 +74,14 @@
     </el-select>
   </div>
 </template>
+
 <script>
-import { Select, Option, Popover, Button, Input, DatePicker } from 'element-ui'
+import { Button, DatePicker, Input, Option, Popover, Select } from 'element-ui'
+import dayjs from 'dayjs'
 import { dateFormatter } from '@/utils/'
+
 export default {
-  name: 'timeDropdown',
+  name: 'TimeDropdown',
   components: {
     [Select.name]: Select,
     [Option.name]: Option,
@@ -54,7 +95,7 @@ export default {
      * select 回显的输入框是否使用默认样式
      * true：自带输入框
      * false: 回显框为根据回显内容自适应宽度，下拉箭头为实心三角箭头
-    */
+     */
     isDefault: {
       type: Boolean,
       default: false
@@ -62,7 +103,7 @@ export default {
     /**
      * 下拉框展开方式
      * hover: 鼠标悬浮 click: 点击
-    */
+     */
     trigger: {
       type: String,
       default: 'click'
@@ -74,7 +115,7 @@ export default {
     /**
      * 自定义popover展开方式
      * hover: 鼠标悬浮 click: 点击
-    */
+     */
     popoverTrigger: {
       type: String,
       default: 'hover'
@@ -142,19 +183,19 @@ export default {
     activeLabel() {
       const time = this.activeValue
       if (time) {
-        if (this.options.find(v => v.value === time)) {
-          let label = this.options.find(v => v.value === time).label
+        if (this.options.find((v) => v.value === time)) {
+          const label = this.options.find((v) => v.value === time).label
           if (label === '自定义') {
-            let start = time.split('-')[0]
-            let end = time.split('-')[1]
-            return dateFormatter(Number(start), 'yyyy-MM-dd') + '-' + dateFormatter(Number(end), 'yyyy-MM-dd')
+            const start = time.split('-')[0]
+            const end = time.split('-')[1]
+            return `${dateFormatter(Number(start), 'yyyy-MM-dd')}-${dateFormatter(Number(end), 'yyyy-MM-dd')}`
           } else {
             return label || ''
           }
         } else {
-          let start = time.split('-')[0]
-          let end = time.split('-')[1]
-          return dateFormatter(Number(start), 'yyyy-MM-dd') + '-' + dateFormatter(Number(end), 'yyyy-MM-dd')
+          const start = time.split('-')[0]
+          const end = time.split('-')[1]
+          return `${dateFormatter(Number(start), 'yyyy-MM-dd')}-${dateFormatter(Number(end), 'yyyy-MM-dd')}`
         }
       } else {
         return ''
@@ -168,7 +209,9 @@ export default {
           setTimeout(() => {
             // popover在下拉框展示时需要重新计算位置，通过先将popover弹框透明度将为0等位置计算完成后再恢复
             this.$refs.customPopover[0].updatePopper()
-            const $popover = this.$root.$el.querySelector('.custom-popover > .el-popover')
+            const $popover = this.$root.$el.querySelector(
+              '.custom-popover > .el-popover'
+            )
             $popover.style.opacity = '1'
             if (this.$refs.timePick) {
               this.$refs.timePick[0].focus()
@@ -218,12 +261,13 @@ export default {
     },
     dateChange(val) {
       if (!val || val.length === 0) return
-      let start = val[0]
+      const start = val[0]
       let end = val[1]
+      end = dayjs(end).endOf('day').valueOf()
       this.activeValue = `${start}-${end}`
       this.time.start = start
       this.time.end = end
-      this.options.forEach(item => {
+      this.options.forEach((item) => {
         if (item.label === '自定义') {
           item.value = `${start}-${end}`
         }
@@ -260,7 +304,9 @@ export default {
     setState(data) {
       this.isCustom = false
       if (data) {
-        const valueArr = this.options.filter(v => !v.disabled).map(t => t.value)
+        const valueArr = this.options
+          .filter((v) => !v.disabled)
+          .map((t) => t.value)
         if (valueArr.includes(data)) {
           this.activeValue = data
         } else {
@@ -274,7 +320,9 @@ export default {
           this.p_time = [start, end]
           this.showPopover = true
           this.$nextTick(() => {
-            const $popover = this.$root.$el.querySelector('.custom-popover > .el-popover')
+            const $popover = this.$root.$el.querySelector(
+              '.custom-popover > .el-popover'
+            )
             $popover.style.opacity = '0'
           })
         }
@@ -296,7 +344,6 @@ export default {
 
   .time-pick {
     ::v-deep {
-
       .el-range-input,
       .el-input__icon,
       .el-range-separator {
@@ -309,7 +356,6 @@ export default {
         top: -48px !important;
       }
     }
-
   }
 
   ::v-deep {
@@ -360,7 +406,7 @@ export default {
         font-size: 16px;
         flex-shrink: 0;
         transform: rotate(0deg);
-        transition: transform .5s;
+        transition: transform 0.5s;
 
         &.is-reverse {
           transform: rotate(180deg);
@@ -427,7 +473,7 @@ export default {
       cursor: pointer;
 
       &:hover {
-        background: #ECECEC;
+        background: #ececec;
       }
 
       &.active {