<template>
|
<div>
|
<div
|
v-show="isExpandForm"
|
style="display:flex;justify-content: center;align-items: center;position: relative"
|
>
|
|
<el-popover
|
v-model="cycleTimePopoverIsShow"
|
placement="bottom"
|
width="500"
|
trigger="hover"
|
@show="cycleTimePopoverIsShow=true"
|
>
|
<div class="popoverList">
|
<div class="popoverListItem">
|
<div style="width: 40px">周</div>
|
<el-button
|
:class="cycleTime===1?'selectButton':''"
|
@click="cycleTimeClick(1)"
|
>本 周
|
</el-button>
|
<el-button
|
:class="cycleTime===2?'selectButton':''"
|
@click="cycleTimeClick(2)"
|
>上 周
|
</el-button>
|
</div>
|
<div class="popoverListItem">
|
<div style="width: 40px">月</div>
|
<el-button
|
:class="cycleTime===3?'selectButton':''"
|
@click="cycleTimeClick(3)"
|
>本 月
|
</el-button>
|
<el-button
|
:class="cycleTime===4?'selectButton':''"
|
@click="cycleTimeClick(4)"
|
>上 月
|
</el-button>
|
</div>
|
<div class="popoverListItem">
|
<div style="width: 40px">季</div>
|
<el-button
|
:class="cycleTime===5?'selectButton':''"
|
@click="cycleTimeClick(5)"
|
>本 季
|
</el-button>
|
<el-button
|
:class="cycleTime===6?'selectButton':''"
|
@click="cycleTimeClick(6)"
|
>上 季
|
</el-button>
|
</div>
|
<div class="popoverListItem">
|
<div style="width: 40px">年</div>
|
<el-button
|
:class="cycleTime===7?'selectButton':''"
|
@click="cycleTimeClick(7)"
|
>本 年
|
</el-button>
|
<el-button
|
:class="cycleTime===8?'selectButton':''"
|
@click="cycleTimeClick(8)"
|
>上 年
|
</el-button>
|
</div>
|
<div class="popoverListItem">
|
<div style="width: 40px">其他</div>
|
<el-button
|
:class="cycleTime===9?'selectButton':''"
|
@click="cycleTimeClick(9)"
|
>近3天
|
</el-button>
|
<el-button
|
:class="cycleTime===10?'selectButton':''"
|
@click="cycleTimeClick(10)"
|
>近7天
|
</el-button>
|
<el-button
|
:class="cycleTime===11?'selectButton':''"
|
@click="cycleTimeClick(11)"
|
>近14天
|
</el-button>
|
<el-button
|
:class="cycleTime===12?'selectButton':''"
|
@click="cycleTimeClick(12)"
|
>今 天
|
</el-button>
|
<el-button
|
:class="cycleTime===13?'selectButton':''"
|
@click="cycleTimeClick(13)"
|
>昨 天
|
</el-button>
|
</div>
|
|
</div>
|
|
<div
|
slot="reference"
|
style="width:15px;height:15px;background:transparent;
|
cursor: pointer;position:absolute;z-index: 100;left: 110px;top:13px"
|
/>
|
|
</el-popover>
|
|
<el-popover
|
placement="bottom"
|
width="100"
|
trigger="hover"
|
:value="datatypePopoverIsShow"
|
@show="datatypePopoverIsShow=true"
|
>
|
<div class="popoverList">
|
<div v-for="item in datatypeList" :key="item.code" class="popoverListItem2">
|
<el-button
|
:class="datatype===item.code?'selectButton':''"
|
@click="datatypeClick(item.code)"
|
>{{ item.name }}
|
</el-button>
|
</div>
|
|
<!-- <div class="popoverListItem2">-->
|
<!-- <el-button-->
|
<!-- :class="datatype==='PS'?'selectButton':''"-->
|
<!-- @click="datatypeClick('PS')"-->
|
<!-- >预计开工日期-->
|
<!-- </el-button>-->
|
<!-- </div>-->
|
<!-- <div class="popoverListItem2">-->
|
<!-- <el-button-->
|
<!-- :class="datatype==='PE'?'selectButton':''"-->
|
<!-- @click="datatypeClick('PE')"-->
|
<!-- >预计完工日期-->
|
<!-- </el-button>-->
|
<!-- </div>-->
|
<!-- <div class="popoverListItem2">-->
|
<!-- <el-button-->
|
<!-- :class="datatype==='ED'?'selectButton':''"-->
|
<!-- @click="datatypeClick('ED')"-->
|
<!-- >预计交付日期-->
|
<!-- </el-button>-->
|
<!-- </div>-->
|
</div>
|
|
<div
|
slot="reference"
|
style="color: #a7a7a7;font-weight: 600; font-size:14px;width: 100px;text-align: center;
|
font-family:'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif';"
|
>
|
{{ datatypeList.find(i=>i.code===datatype).name }}
|
<!-- {{ datatype === 'PS' ? '预计开工日期' : datatype === 'PE' ? '预计完工日期' : '预计交付日期' }}-->
|
</div>
|
|
</el-popover>
|
|
<el-date-picker
|
v-model="timeValue"
|
type="daterange"
|
range-separator="~"
|
class="timeMini"
|
size="mini"
|
style="width: 200px;display: flex;line-height: 34px;height: 34px;margin-right: 10px"
|
:clearable="false"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
@change="pickerChange"
|
/>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
|
export default {
|
name: 'Index',
|
props: {
|
isExpandForm: {
|
type: Boolean,
|
default() {
|
return false
|
}
|
},
|
// cycleTimePopoverIsShow: {
|
// type: Boolean,
|
// default() {
|
// return false
|
// }
|
// },
|
// cycleTime: {
|
// type: Number,
|
// default() {
|
// return 0
|
// }
|
// },
|
// datatypePopoverIsShow: {
|
// type: Boolean,
|
// default() {
|
// return false
|
// }
|
// },
|
// datatype: {
|
// type: String,
|
// default() {
|
// return 'ED'
|
// }
|
// }
|
datatypeList: {
|
type: Array,
|
default() {
|
return [
|
{ code: 'PS', name: '预计开工日期' },
|
{ code: 'PE', name: '预计完工日期' },
|
{ code: 'ED', name: '预计交付日期' }
|
// { code: 'CT', name: '创建日期' }
|
]
|
}
|
}
|
|
},
|
data() {
|
return {
|
timeValue: [],
|
cycleTimePopoverIsShow: false,
|
datatype: 'ED',
|
cycleTime: 0,
|
datatypePopoverIsShow: false
|
}
|
},
|
methods: {
|
cycleTimeClick(value) {
|
this.cycleTimePopoverIsShow = false
|
|
const date = new Date()
|
const cWeek = moment(date).format('E')
|
let newDate = []
|
switch (value) {
|
case 1:// 本周
|
newDate = [
|
moment(date).subtract(Number(cWeek) - 1, 'days').format('YYYY-MM-DD'),
|
moment(moment().week(moment().week()).endOf('week').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
case 2:// 上周
|
newDate = [
|
moment(moment().add(-13, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().add(-6, 'days').startOf('day').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
|
case 3:// 本月
|
newDate = [
|
moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
|
case 4:// 上月
|
newDate = [
|
moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().month(moment().month()).startOf('month').valueOf()).add(-1, 'days').format('YYYY-MM-DD')
|
]
|
break
|
|
case 5:// 本季度
|
newDate = [
|
moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
|
case 6:// 上季度
|
newDate = [
|
moment(moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
|
case 7:// 本年
|
newDate = [
|
moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().year(moment().year()).endOf('year').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
|
case 8:// 去年
|
newDate = [
|
moment(moment().year(moment().year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().year(moment().year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
|
case 9:// 近3天
|
newDate = [
|
moment(moment().add(-2, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
case 10:// 近7天
|
newDate = [
|
moment(moment().add(-6, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
case 11:// 近14天
|
newDate = [
|
moment(moment().add(-13, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
case 12:// 今天
|
newDate = [
|
moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
case 13:// 昨天
|
newDate = [
|
moment(moment().add(-1, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
|
moment(moment().startOf('day').valueOf()).format('YYYY-MM-DD')
|
]
|
break
|
}
|
|
this.timeValue = newDate
|
this.cycleTime = value
|
|
this.$emit('cycleTimeChange', this.timeValue)
|
},
|
|
datatypeClick(value) {
|
this.datatype = value
|
this.datatypePopoverIsShow = false
|
this.$emit('DateTypeChange', this.datatype)
|
},
|
|
pickerChange(value) {
|
this.cycleTime = null
|
this.$emit('cycleTimeChange', value)
|
},
|
|
clearValue() {
|
this.cycleTime = null
|
this.timeValue = []
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
.popoverList {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.popoverListItem {
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
}
|
|
.popoverListItem2 {
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
}
|
|
.selectButton {
|
color: #42B983;
|
}
|
|
</style>
|
