155 lines
3.4 KiB
Vue
155 lines
3.4 KiB
Vue
<template>
|
|
<view @click="handleSelectDate" class="pos-rlt">
|
|
<u-input :placeholder="placeholder" :fontSize="fontSize" :modelValue="inputValue"
|
|
:custom-style="`border-radius: 10rpx;padding: 11rpx 20rpx;${customStyle};`"
|
|
readonly="true"
|
|
>
|
|
<template v-slot:suffix>
|
|
<u-icon name="calendar" :size="fontSize*1.5"></u-icon>
|
|
</template>
|
|
</u-input>
|
|
<view class="pos-abt-all">
|
|
<view v-if="showTools" @click.stop="">
|
|
<tpx-select :list="toolsRangesList" v-model:value="rangeVal" mode="drop" @onChange="handleToolsRangChange">
|
|
<view :style="`height: 64rpx;`" ></view>
|
|
</tpx-select>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 日历 -->
|
|
<view v-if="showCladar">
|
|
<u-calendar title="请选择日期范围" :minDate="minDate" :monthNum="monthNum" color="#B12D29" :mode="mode" rowHeight="90" closeOnClickOverlay :show="showCladar" :defaultDate="value" @confirm="handleClaOk" @close="handleSwitchCladar"
|
|
></u-calendar>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { } from "@/common/untool"
|
|
import dayjs from "dayjs"
|
|
const formatStr = 'YYYY-MM-DD'
|
|
|
|
export default {
|
|
computed: {
|
|
inputValue() {
|
|
let val = this.value
|
|
if(Array.isArray(val)) {
|
|
val = [].concat(val)
|
|
if(val.length > 1) {
|
|
val[0] = dayjs(val[0]).format(formatStr)
|
|
}
|
|
if(val.length > 1) {
|
|
val[1] = dayjs(val[1]).format(formatStr)
|
|
}
|
|
}
|
|
return val && (val.length > 1 ? val.join("~") : val[0])
|
|
},
|
|
},
|
|
props: {
|
|
value: {
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
placeholder:{
|
|
default () {
|
|
return '请选择日期'
|
|
}
|
|
},
|
|
fontSize: {
|
|
default () {
|
|
return 26
|
|
}
|
|
},
|
|
minDate: {
|
|
default() {
|
|
return dayjs().subtract(12, 'months').format(`${formatStr}`)
|
|
}
|
|
},
|
|
monthNum: {
|
|
default() {
|
|
return 24
|
|
}
|
|
},
|
|
mode: {
|
|
default() {
|
|
return 'range' // single | multiple | range
|
|
}
|
|
},
|
|
customStyle:{
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
showTools:{
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
toolsRangesList: {
|
|
default () {
|
|
let today = dayjs().format(`${formatStr}`),
|
|
yesterday = dayjs().subtract(1, 'days').format(`${formatStr}`),
|
|
lastWeek = dayjs().subtract(7, 'days').format(`${formatStr}`)
|
|
return [
|
|
{ title: '今日', val: '1', range: [ today, today ] },
|
|
{ title: '昨日', val: '2', range: [yesterday, yesterday] },
|
|
{ title: '最近一周', val: '3', range: [lastWeek, today] },
|
|
{ title: '自定义', val: '-1', range: [] },
|
|
]
|
|
}
|
|
},
|
|
placeholderStyle:{
|
|
default () {
|
|
return ''
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
showCladar: false,
|
|
rangeVal: ''
|
|
}
|
|
},
|
|
created() {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
unmounted() {},
|
|
|
|
methods: {
|
|
handleSelectDate() {
|
|
this.handleSwitchCladar()
|
|
},
|
|
handleChange(val){
|
|
val[0] = dayjs(val[0]).format(`${formatStr} 00:00:00`)
|
|
val[1] = dayjs(val[1]).format(`${formatStr} 23:59:59`)
|
|
this.$emit('change', val)
|
|
this.$emit('update:value', val)
|
|
},
|
|
handleClaOk(res){
|
|
const ary = Object.values(res)
|
|
const val = [ary[0], ary[ary.length-1]]
|
|
this.handleChange(val)
|
|
this.handleSwitchCladar()
|
|
},
|
|
handleSwitchCladar() {
|
|
this.showCladar = !this.showCladar
|
|
},
|
|
handleToolsRangChange(val) {
|
|
if(val == -1) {
|
|
this.handleSwitchCladar()
|
|
} else {
|
|
let sltRang = this.toolsRangesList.filter(t=> t.val == val)[0].range
|
|
this.handleChange(sltRang)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style> |