<template>
|
<view class="dropdown">
|
<view class="item">
|
<view class="item-title" style="display: flex;justify-content: space-between;">
|
<text>设备</text>
|
<text @click="closeMenu"><u-icon name="close"></u-icon></text>
|
</view>
|
<view class="item-box">
|
<view v-for="(item,index) in menuList" :key="item.code" :class="['item-menu',item.ck?'active':'']"
|
@click="changeMenu(index)">{{item.name}}
|
</view>
|
</view>
|
|
<view class="item-title">时间</view>
|
<view class="item-box">
|
<view v-for="(item,index) in dateList" :key="item.code"
|
:class="['item-menu',currentDate==index?'active':'']" @click="changeDate(index)">{{item.name}}
|
</view>
|
</view>
|
<view class="custom-date" v-if="currentDate==3">
|
<view class="custom-date-ipute">
|
<dyDatePicker placeholder="开始日期" :minSelect="from_minSelect" :maxSelect="from_maxSelect"
|
:iconshow="false" @getData="starteDate" ref="startDatePickerRef"></dyDatePicker>
|
</view>
|
<view class="custom-date-line"></view>
|
<view class="custom-date-ipute">
|
<dyDatePicker placeholder="结束日期" :minSelect="to_minSelect"
|
:maxSelect="to_maxSelect" :iconshow="false" @getData="endDate" ref="endDatePickerRef">
|
</dyDatePicker>
|
</view>
|
</view>
|
</view>
|
|
<view class="dropdown-footer">
|
<view class="dropdown-footer-btn reset" @click="resetDropdown">重置</view>
|
<view class="dropdown-footer-btn submit" @click="submitSelect">确定</view>
|
</view>
|
</view>
|
</template>
|
<script>
|
import dyDatePicker from '@/components/drop-down-menu/dy-Date/dy-Date.vue';
|
import dayjs from 'dayjs'
|
export default {
|
components: {
|
dyDatePicker
|
},
|
props: {
|
list: {
|
type: Array,
|
default: () => []
|
}
|
},
|
data() {
|
return {
|
menuList: [],
|
dateList: [{
|
code: 1,
|
name: '今天',
|
subDay: 0
|
},
|
{
|
code: 2,
|
name: '昨天',
|
subDay: 1
|
},
|
{
|
code: 3,
|
name: '近一周',
|
subDay: 7
|
},
|
{
|
code: 4,
|
name: '自定义时间',
|
subDay: ''
|
}
|
],
|
from_minSelect: '1900/01/01',
|
from_maxSelect: '2050/12/31',
|
to_minSelect: '1900/01/01',
|
to_maxSelect: '2050/12/31',
|
currentDate: undefined,
|
selectData: {
|
menu: [],
|
startTime: undefined,
|
endTime: undefined
|
},
|
|
}
|
},
|
watch: {
|
list: {
|
handler(newVal, oldVal) {
|
this.init()
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
|
methods: {
|
init() {
|
const menuList = JSON.parse(JSON.stringify(this.list));
|
menuList.forEach(item => item.ck = false);
|
this.menuList = menuList
|
const todayDate = dayjs().format('YYYY-MM-DD');
|
const beforeDate = dayjs().subtract(5, 'year').format('YYYY-MM-DD')
|
this.from_minSelect = beforeDate;
|
this.from_maxSelect = todayDate;
|
this.to_minSelect = beforeDate;
|
this.to_maxSelect = todayDate;
|
this.resetDropdown(false)
|
},
|
// change为false时不发送 change事件 仅仅重置
|
resetDropdown(change=true) {
|
this.menuList.forEach(item => item.ck = false);
|
if (this.currentDate == 3) {
|
this.$refs.startDatePickerRef.clear();
|
this.$refs.endDatePickerRef.clear();
|
}
|
this.currentDate = 999;
|
this.initDate();
|
this.selectData.menu = [];
|
this.selectData.startTime = undefined;
|
this.selectData.endTime = undefined;
|
if(change){
|
this.$emit('reset', this.selectData);
|
}
|
},
|
submitSelect() {
|
if (this.currentDate == 3) {
|
if (!this.selectData.startTime || !this.selectData.endTime) {
|
uni.showToast({
|
icon: "none",
|
title: "开始日期和结束日期都不能为空！",
|
duration: 3000
|
})
|
return
|
};
|
};
|
this.$emit('change', this.selectData);
|
},
|
initDate() {
|
const todayDate = dayjs().format('YYYY-MM-DD');
|
const beforeDate = dayjs().subtract(5, 'year').format('YYYY-MM-DD')
|
this.from_minSelect = beforeDate;
|
this.from_maxSelect = todayDate;
|
this.to_minSelect = beforeDate;
|
this.to_maxSelect = todayDate
|
},
|
changeMenu(index) {
|
const handelItem = this.menuList[index].ck;
|
this.menuList[index].ck = !handelItem;
|
const checkList = [];
|
this.menuList.forEach(item => {
|
if (item.ck) {
|
checkList.push(item.code)
|
}
|
})
|
this.selectData.menu = checkList;
|
},
|
changeDate(index) {
|
this.currentDate = index;
|
if (index == 3) {
|
this.selectData.startTime = undefined;
|
this.selectData.endTime = undefined;
|
return
|
}
|
const todayDate = dayjs().format('YYYY-MM-DD');
|
const beforeDate = dayjs().subtract(this.dateList[index].subDay, 'day').format('YYYY-MM-DD')
|
this.selectData.startTime = beforeDate;
|
this.selectData.endTime = todayDate;
|
},
|
starteDate(val) {
|
if (this.selectData.endTime) {
|
const diffDate = dayjs(this.selectData.endTime).diff(val, 'day');
|
if (diffDate < 0) {
|
uni.showToast({
|
icon: "none",
|
title: "开始日期不能大于结束日期",
|
duration: 3000
|
})
|
this.$refs.startDatePickerRef.clear();
|
return
|
}
|
}
|
this.selectData.startTime = val;
|
},
|
endDate(val) {
|
if (this.selectData.startTime) {
|
const diffDate = dayjs(val).diff(this.selectData.startTime, 'day');
|
if (diffDate < 0) {
|
uni.showToast({
|
icon: "none",
|
title: "结束日期不能小于开始日期",
|
duration: 3000
|
})
|
this.$refs.endDatePickerRef.clear()
|
return
|
}
|
}
|
this.selectData.endTime = val;
|
},
|
closeMenu(){
|
this.$emit('closeMenu')
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.dropdown {
|
;
|
padding: 32rpx 28rpx 48rpx 28rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
|
border-radius: 16rpx;
|
|
.item {
|
&-title {
|
font-size: 24rpx;
|
font-family: PingFangTC-Medium, PingFangTC;
|
font-weight: 600;
|
color: #000000;
|
}
|
|
&-box {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
|
margin-bottom: 32rpx;
|
}
|
|
&-menu {
|
box-sizing: border-box;
|
flex: 0 0 calc(33.33% - 32rpx);
|
height: 56rpx;
|
background: #ECEDF3;
|
border-radius: 8rpx;
|
text-align: center;
|
line-height: 56rpx;
|
margin: 24rpx 10rpx 0 20rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #000000;
|
}
|
|
.active {
|
background: #0064FF;
|
color: #fff;
|
|
}
|
}
|
|
.custom-date {
|
display: flex;
|
align-items: center;
|
|
.custom-date-line {
|
width: 30rpx;
|
height: 2px;
|
background: #eee;
|
margin: 0 10rpx;
|
}
|
|
.custom-date-ipute {
|
border: 1px solid #0064FF;
|
width: 50%;
|
text-align: center;
|
height: 56rpx;
|
color: #0064FF;
|
border-radius: 8rpx;
|
}
|
}
|
|
&-footer {
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
margin-top: 32rpx;
|
|
&-btn {
|
width: 298rpx;
|
height: 82rpx;
|
text-align: center;
|
border-radius: 12rpx;
|
font-weight: 500;
|
line-height: 82rpx;
|
font-size: 32rpx;
|
}
|
|
.reset {
|
border: 2rpx solid #0064FF;
|
color: #0064FF;
|
}
|
|
.submit {
|
color: #fff;
|
background: #0064FF;
|
border: 2rpx solid #0064FF;
|
}
|
}
|
}
|
</style>
|
