<template>
|
<div style="display: inline">
|
<el-form-item :label="labelName|| '起止时间'" prop="startDate">
|
<el-date-picker
|
@change="seleTime"
|
v-model="time"
|
type="datetimerange"
|
format="yyyy-MM-dd HH:mm:ss"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间">
|
</el-date-picker>
|
</el-form-item>
|
<el-radio-group v-model="radioVal" size="small" @input="changeRadio">
|
<el-radio-button label="0">当天</el-radio-button>
|
<el-radio-button label="1">近7天</el-radio-button>
|
<el-radio-button label="2">近30天</el-radio-button>
|
</el-radio-group>
|
</div>
|
</template>
|
|
<script>
|
// import Bus from '@/utils/eventBus'
|
import {timeForMat} from "@/utils/util";
|
export default {
|
name: 'timerRange',
|
props: {
|
radio: {
|
type: Number,
|
required: false,
|
default: 0
|
},
|
labelName: {
|
type: String,
|
required: false,
|
default: '起止时间'
|
}
|
},
|
data() {
|
return {
|
startDate:null,
|
endDate:null,
|
radioVal:null,
|
time: []
|
}
|
},
|
created() {
|
this.radioVal =this.radio
|
this.changeRadio(this.radioVal)
|
},
|
methods: {
|
changeRadio (e) {
|
if (e === '0') {
|
this.startDate = timeForMat(0)[0]
|
this.endDate = timeForMat(0)[1]
|
this.time = timeForMat(0)
|
} else if (e === '1') {
|
this.startDate = timeForMat(6)[0]
|
this.endDate = timeForMat(6)[1]
|
this.time = timeForMat(6)
|
} else if (e === '2') {
|
this.startDate = timeForMat(29)[0]
|
this.endDate = timeForMat(29)[1]
|
this.time = timeForMat(29)
|
}
|
this.callback()
|
},
|
seleTime (e) {
|
this.startDate = e[0]
|
this.endDate = e[1]
|
this.radio = null
|
this.callback()
|
},
|
callback () {
|
this.$emit('callback', this.time)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tree {
|
/*width: 100%;*/
|
/*height: auto;*/
|
/*border-radius: 5px;*/
|
/*overflow: hidden;*/
|
/*border: 1px solid #eeeeee;*/
|
/*box-sizing: border-box;*/
|
.tree_childern {
|
margin-left: 20px;
|
}
|
.activeItem {
|
background: #F4F7FC;
|
}
|
.tree_item {
|
display: flex;
|
align-items: center;
|
height: 48px;
|
cursor: pointer;
|
padding-left: 10px;
|
.tree_item_label {
|
font-size: 14px;
|
font-weight: 400;
|
color: #333333;
|
white-space: nowrap;
|
}
|
i {
|
margin-right: 5px;
|
}
|
.color {
|
color: #999999 !important;
|
}
|
.activeColor {
|
color: #305ED5 !important;
|
}
|
}
|
}
|
</style>
|
