526a5780ae
【主 题】：时间跨度组件 修改 【描 述】： [原因]：不显示时分秒 太长了 显示不下 [过程]： [影响]： 【结 束】 # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
112 lines
3.7 KiB
Vue
112 lines
3.7 KiB
Vue
<template>
|
|
<el-date-picker v-model="value" type="daterange" align="right" unlink-panels range-separator="至"
|
|
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
const orderSearch = this.$store.getters['app/getOrderSerch']
|
|
const startTimestamp = orderSearch.start_time
|
|
const endTimestamp = orderSearch.end_time
|
|
return {
|
|
pickerOptions: {
|
|
shortcuts: [
|
|
{
|
|
text: '今天',
|
|
onClick (picker) {
|
|
const start = new Date(new Date().setHours(0, 0, 0, 0))
|
|
const end = new Date(new Date().setHours(23, 59, 59, 999))
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
},
|
|
{
|
|
text: '这月',
|
|
onClick (picker) {
|
|
const end = new Date()
|
|
end.setHours(23, 59, 59, 999)
|
|
const start = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 0, 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
},
|
|
{
|
|
text: '今年',
|
|
onClick (picker) {
|
|
const end = new Date()
|
|
end.setHours(23, 59, 59, 999)
|
|
const start = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
},
|
|
{
|
|
text: '最近一周',
|
|
onClick (picker) {
|
|
const end = new Date()
|
|
end.setHours(23, 59, 59, 999)
|
|
const start = new Date()
|
|
start.setDate(end.getDate() - 6)
|
|
start.setHours(0, 0, 0, 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
},
|
|
{
|
|
text: '最近一个月',
|
|
onClick (picker) {
|
|
const end = new Date()
|
|
end.setHours(23, 59, 59, 999)
|
|
const start = new Date()
|
|
start.setMonth(end.getMonth() - 1)
|
|
start.setHours(0, 0, 0, 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
},
|
|
{
|
|
text: '最近三个月',
|
|
onClick (picker) {
|
|
const end = new Date()
|
|
end.setHours(23, 59, 59, 999)
|
|
const start = new Date()
|
|
start.setMonth(end.getMonth() - 3)
|
|
start.setHours(0, 0, 0, 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
},
|
|
{
|
|
text: '上月',
|
|
onClick (picker) {
|
|
const end = new Date(new Date().getFullYear(), new Date().getMonth(), 0, 23, 59, 59, 999)
|
|
const start = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1, 0, 0, 0, 0)
|
|
picker.$emit('pick', [start, end])
|
|
}
|
|
}
|
|
]
|
|
},
|
|
value: [startTimestamp, endTimestamp]
|
|
}
|
|
},
|
|
watch: {
|
|
value (newVal) {
|
|
if (newVal && newVal.length === 2) {
|
|
const end = newVal[1]
|
|
end.setHours(23, 59, 59, 999) // 设置结束日期为当天的23:59:59
|
|
const startTimestamp = Math.floor(newVal[0].getTime() / 1000) // 转换毫秒为秒
|
|
const endTimestamp = Math.floor(end.getTime() / 1000) // 转换毫秒为秒
|
|
this.$store.commit('app/setOrderSerch', { start_time: startTimestamp })
|
|
this.$store.commit('app/setOrderSerch', { end_time: endTimestamp })
|
|
}
|
|
if (newVal === null) {
|
|
this.$store.commit('app/setOrderSerch', { start_time: '' })
|
|
this.$store.commit('app/setOrderSerch', { end_time: '' })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-date-editor .el-range__close-icon {
|
|
display: block !important;
|
|
}
|
|
</style>
|