<template>
|
<div class="time-select">
|
<div class="date-box" @click="select($event)">
|
<div :class="{on: dateType == 'date'}" :data-type="'date'" :data-holder="'选择日'">
|
<span :data-type="'date'" :data-holder="'选择日'">日</span>
|
</div>
|
<div :class="{on: dateType == 'month'}" :data-type="'month'" :data-holder="'选择月'">
|
<span :data-type="'month'" :data-holder="'选择月'">月</span>
|
</div>
|
<div :class="{on: dateType == 'year'}" :data-type="'year'" :data-holder="'选择年'">
|
<span :data-type="'year'" :data-holder="'选择年'">年</span>
|
</div>
|
</div>
|
|
<el-date-picker
|
class="emit-el-date-picker"
|
size="small"
|
v-model="currentDate"
|
@change="selectChange"
|
:type="dateType"
|
:placeholder="datePlaceHolder"
|
></el-date-picker>
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'DateSelect',
|
|
props: ['type'],
|
|
data () {
|
return {
|
dateType: 'month',
|
datePlaceHolder: '选择月',
|
currentDate: ''
|
}
|
},
|
created () {
|
var date = new Date()
|
this.currentDate = date
|
},
|
methods: {
|
select (e) {
|
this.dateType = e.target.dataset.type
|
this.datePlaceHolder = e.target.dataset.holder
|
|
var currentTime = this.gettime(this.currentDate)
|
if (this.type == 'taskSelect') {
|
this.$parent.getTaskTime(currentTime)
|
} else if (this.type == 'ncptrSelect') {
|
this.$parent.getNcptrTime(currentTime)
|
} else if (this.type == 'nztrSelect') {
|
this.$parent.getNztrTime(currentTime)
|
} else if (this.type == 'cltjSelect') {
|
this.$parent.getCltjTime(currentTime)
|
} else if (this.type == 'symSelect') {
|
this.$parent.getSymTime(currentTime)
|
} else if (this.type == 'ncpjgSelect') {
|
this.$parent.productsSupervise(currentTime)
|
}
|
},
|
selectChange (e) {
|
var currentTime = this.gettime(e)
|
if (this.type == 'taskSelect') {
|
this.$parent.getTaskTime(currentTime)
|
} else if (this.type == 'ncptrSelect') {
|
this.$parent.getNcptrTime(currentTime)
|
} else if (this.type == 'nztrSelect') {
|
this.$parent.getNztrTime(currentTime)
|
} else if (this.type == 'cltjSelect') {
|
this.$parent.getCltjTime(currentTime)
|
} else if (this.type == 'symSelect') {
|
this.$parent.getSymTime(currentTime)
|
} else if (this.type == 'ncpjgSelect') {
|
this.$parent.productsSupervise(currentTime)
|
}
|
},
|
gettime (data) {
|
let dateValue = data.getFullYear()
|
if (this.dateType == 'date') {
|
dateValue += '-'
|
dateValue += this.checkTime(data.getMonth() + 1)
|
dateValue += '-'
|
dateValue += this.checkTime(data.getDate())
|
} else if (this.dateType == 'month') {
|
dateValue += '-'
|
dateValue += this.checkTime(data.getMonth() + 1)
|
}
|
|
return dateValue
|
},
|
checkTime (i) {
|
if (i < 10) {
|
i = '0' + i
|
}
|
return i
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.time-select {
|
margin-top: 20px;
|
padding: 0 4px;
|
display: flex;
|
align-items: center;
|
height: 34px;
|
|
.date-box {
|
margin-right: 20px;
|
display: flex;
|
box-sizing: border-box;
|
align-items: center;
|
height: 100%;
|
background: rgba(33, 186, 196, 0.1);
|
color: #a9d1d7;
|
|
& > div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 50px;
|
height: 100%;
|
cursor: pointer;
|
}
|
|
.on {
|
background: rgba(33, 186, 196, 0.5);
|
border: 1px solid #66dde9;
|
}
|
}
|
}
|
</style>
|
