You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
549 lines
13 KiB
549 lines
13 KiB
<template>
|
|
<view class="">
|
|
<view class="card" v-if="timeType">
|
|
<view class="card-title">
|
|
时间类型
|
|
</view>
|
|
<view class="timetype">
|
|
<view class="timetype_item" :class="[defaultTimeType==0?'active':'']" @click="changeTimeType('年')">
|
|
年
|
|
</view>
|
|
<view class="timetype_item" :class="[defaultTimeType==1?'active':'']" @click="changeTimeType('月')">
|
|
月
|
|
</view>
|
|
<view class="timetype_item" :class="[defaultTimeType==2?'active':'']" @click="changeTimeType('日')">
|
|
日
|
|
</view>
|
|
<!-- <time-type height="300rpx" :value="defaultTimeType" @change="changeTimeType" lineHeight="60rpx">
|
|
</time-type> -->
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="card-title">
|
|
时间选择
|
|
<text style="font-size: 24rpx;color: #FA6200;" v-if="defaultTimeType!=0">（关联之后起止时间联动,间隔不超过30天）</text>
|
|
<text style="font-size: 24rpx;color: #FA6200;" v-if="defaultTimeType==0">（关联之后起止时间联动,间隔不超过365天）</text>
|
|
</view>
|
|
<view class="card-content">
|
|
<view class="time left" :class="[chooseOne==0?'active':'']" @click="clickChoose(0)">
|
|
{{startTimeFormat}}
|
|
</view>
|
|
<view class="label">至</view>
|
|
<view class="time right" :class="[chooseOne==1?'active':'']" @click="clickChoose(1)">
|
|
{{endTimeFormat}}
|
|
</view>
|
|
</view>
|
|
<view style="position: relative;height:20rpx;top: -20rpx;">
|
|
<view
|
|
style="font-size: 24rpx;color: red;position: absolute;top: 0;left: 0;right: 0;transform: scale(.8);transform-origin: left;">
|
|
{{validate}}
|
|
</view>
|
|
</view>
|
|
<view style="display: flex;align-items: center;">
|
|
<template>
|
|
<view @click="selectToday()" class="btn">
|
|
今天
|
|
</view>
|
|
<view v-if="defaultTimeType!=0" @click="selectOneMonth()" class="btn">
|
|
近30天
|
|
</view>
|
|
<view v-if="defaultTimeType==0" @click="selectOneYear()" class="btn">
|
|
近1年
|
|
</view>
|
|
<view @click="clickBind" class="btn" :class="[isBind?'active':'']">
|
|
关联起止时间
|
|
</view>
|
|
</template>
|
|
<view style="text-align: right;flex: 1;width: 0;">
|
|
<image style="width: 28rpx;height: 28rpx;"
|
|
src="https://www.enesoon-saas-back-test.cn/company/static/icon-clear@2x.png" @tap="clearDate" />
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<day :value="defaultTime" @change="changeTime" height="400rpx" ref="day" :current="true"
|
|
:type="timeType"></day>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="card-title">
|
|
年份选择
|
|
</view>
|
|
<view class="card-content">
|
|
<scroll-view scroll-x>
|
|
<view class="year-list">
|
|
<view class="year-item" @click="delYearList(item,index)" v-for="(item,index) in sortYearList"
|
|
:key="index">
|
|
{{item}}
|
|
<u-icon name="close-circle-fill" color="#999" size="16rpx" top="-10rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<scroll-view scroll-y style="height: 240rpx;">
|
|
<view class="year-choose-list">
|
|
<view class="year-choose-item" @click="addYearList(item,index)"
|
|
:class="[yearList.includes(+item)?'highlight':'', selectYearData==item?'disabled':'']"
|
|
v-for="(item,index) in yearAllList" :key="index">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import day from "./day.vue"
|
|
import {
|
|
dateTimeFormat
|
|
} from "./util.js"
|
|
import TimeType from "./TimeType.vue"
|
|
|
|
let intevalTime = 30 * 24 * 60 * 60 * 1000; // 30天
|
|
export default{
|
|
components: {
|
|
day,
|
|
TimeType
|
|
},
|
|
data() {
|
|
return {
|
|
yearAllList: [2021, 2020, 2019, 2018],
|
|
yearList: [],
|
|
isBind: true,
|
|
startTime: '',
|
|
endTime: '',
|
|
chooseOne: -1,
|
|
defaultTime: null,
|
|
timeType: "year,month,day",
|
|
defaultTimeType: 1
|
|
};
|
|
},
|
|
created() {
|
|
this.changeTimeType('月')
|
|
this.chooseOne = 0
|
|
let day = new Date().getTime()
|
|
let dayD = new Date(day)
|
|
this.endTime = dayD
|
|
let dayc = new Date(this.endTime).getTime() - intevalTime
|
|
let dayA = new Date(dayc)
|
|
dayA.setHours(0,0,0)
|
|
this.startTime = dayA
|
|
this.defaultTime = this.startTime
|
|
this.bindDay()
|
|
},
|
|
computed: {
|
|
validate() {
|
|
if(!this.endTime || !this.startTime){
|
|
return ""
|
|
}
|
|
if (this.endTime.getTime() - this.startTime.getTime() < 0) {
|
|
return "开始时间不能大于结束时间"
|
|
}
|
|
if (this.endTime.getTime() - this.startTime.getTime() > intevalTime) {
|
|
if(this.defaultTimeType!=0){
|
|
return "时间间隔不能大于30天"
|
|
}else{
|
|
return "时间间隔不能大于365天"
|
|
}
|
|
}
|
|
return ''
|
|
},
|
|
startTimeFormat() {
|
|
if (!this.startTime) {
|
|
return "开始时间"
|
|
}
|
|
// yyyy-MM-dd HH:mm:ss
|
|
if (this.defaultTimeType == 0) {
|
|
return dateTimeFormat(this.startTime, 'yyyy-MM')
|
|
}
|
|
if (this.defaultTimeType == 1) {
|
|
return dateTimeFormat(this.startTime, 'yyyy-MM-dd')
|
|
}
|
|
if (this.defaultTimeType == 2) {
|
|
return dateTimeFormat(this.startTime, 'yyyy-MM-dd')
|
|
}
|
|
return dateTimeFormat(this.startTime, 'yyyy-MM-dd')
|
|
},
|
|
endTimeFormat() {
|
|
if (!this.endTime) {
|
|
return "结束时间"
|
|
}
|
|
// yyyy-MM-dd HH:mm:ss
|
|
if (this.defaultTimeType == 0) {
|
|
return dateTimeFormat(this.endTime, 'yyyy-MM')
|
|
}
|
|
if (this.defaultTimeType == 1) {
|
|
return dateTimeFormat(this.endTime, 'yyyy-MM-dd')
|
|
}
|
|
if (this.defaultTimeType == 2) {
|
|
return dateTimeFormat(this.endTime, 'yyyy-MM-dd')
|
|
}
|
|
return dateTimeFormat(this.endTime, 'yyyy-MM-dd')
|
|
},
|
|
selectYearData() {
|
|
let year = -1
|
|
if (this.startTime && this.endTime) {
|
|
let Ayear = +dateTimeFormat(this.startTime, "yyyy")
|
|
let Byear = +dateTimeFormat(this.endTime, "yyyy")
|
|
if (Ayear == Byear) {
|
|
year = Ayear
|
|
}
|
|
}
|
|
return year
|
|
},
|
|
sortYearList() {
|
|
return this.yearList.sort(function(a, b) {
|
|
return +b - (+a)
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
clearDate() {
|
|
this.startTime = ""
|
|
this.endTime = ""
|
|
this.yearList = [];
|
|
},
|
|
delYearList(item) {
|
|
// if (!this.year) {
|
|
// return
|
|
// }
|
|
if (item == this.selectYearData) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "该年份不能修改"
|
|
})
|
|
return
|
|
}
|
|
let index = this.yearList.indexOf(item)
|
|
this.yearList.splice(index, 1)
|
|
this.buildDate()
|
|
},
|
|
addYearList(item) {
|
|
// if (!this.year) {
|
|
// return
|
|
// }
|
|
if (item == this.selectYearData) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "该年份不能修改"
|
|
})
|
|
return
|
|
}
|
|
let index = this.yearList.indexOf(item)
|
|
if (index == -1) {
|
|
if (this.startTime && this.endTime) {
|
|
let Ayear = +dateTimeFormat(this.startTime, "yyyy")
|
|
let Byear = +dateTimeFormat(this.endTime, "yyyy")
|
|
if (Ayear != Byear) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "跨年不能选择"
|
|
})
|
|
return
|
|
}
|
|
if (this.yearList.length == 3) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "只能选择三个年份"
|
|
})
|
|
return
|
|
}
|
|
this.yearList.push(item)
|
|
this.buildDate()
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请完善时间范围"
|
|
})
|
|
}
|
|
} else {
|
|
this.yearList.splice(index, 1)
|
|
this.buildDate()
|
|
}
|
|
},
|
|
clickChoose(type) {
|
|
if (type == 0) {
|
|
if (this.chooseOne != 0) {
|
|
this.chooseOne = 0;
|
|
if (this.startTime) {
|
|
this.defaultTime = this.startTime
|
|
} else {
|
|
this.defaultTime = new Date()
|
|
}
|
|
} else {
|
|
this.chooseOne = -1;
|
|
}
|
|
}
|
|
if (type == 1) {
|
|
if (this.chooseOne != 1) {
|
|
this.chooseOne = 1;
|
|
if (this.endTime) {
|
|
this.defaultTime = this.endTime
|
|
} else {
|
|
this.defaultTime = new Date()
|
|
}
|
|
} else {
|
|
this.chooseOne = -1;
|
|
}
|
|
}
|
|
},
|
|
changeTimeType(type) {
|
|
switch (type) {
|
|
case "年":
|
|
this.defaultTimeType = 0
|
|
intevalTime = 365 * 24 * 60 * 60 * 1000;
|
|
this.timeType = 'year,month'
|
|
break;
|
|
case "月":
|
|
intevalTime = 30 * 24 * 60 * 60 * 1000;
|
|
this.defaultTimeType = 1
|
|
this.timeType = 'year,month,day'
|
|
break;
|
|
case '日':
|
|
intevalTime = 30 * 24 * 60 * 60 * 1000;
|
|
this.defaultTimeType = 2
|
|
this.timeType = "year,month,day,hour,minute,second"
|
|
break;
|
|
case 'only-year':
|
|
intevalTime = 30 * 24 * 60 * 60 * 1000;
|
|
this.defaultTimeType = 3
|
|
this.timeType = "year"
|
|
break;
|
|
default:
|
|
this.defaultTimeType = 1
|
|
this.timeType = 'year,month,day'
|
|
break;
|
|
}
|
|
},
|
|
bindDay() {
|
|
if (this.chooseOne == 0 || this.chooseOne == -1) {
|
|
if (this.isBind && ((this.startTime && this.endTime && this.isBigger30Day(this.startTime.getTime(),
|
|
this.endTime
|
|
.getTime())) || (!this.endTime && this.startTime))) {
|
|
let day = new Date(dateTimeFormat(this.startTime, "yyyy/MM/dd HH:mm:ss")).getTime() + intevalTime
|
|
this.endTime = new Date(day)
|
|
}
|
|
|
|
}
|
|
if (this.chooseOne == 1) {
|
|
if (this.isBind && ((this.startTime && this.endTime && this.isBigger30Day(this.startTime.getTime(),
|
|
this.endTime
|
|
.getTime())) || (!this.startTime && this.endTime))) {
|
|
let day = new Date(dateTimeFormat(this.endTime, "yyyy/MM/dd HH:mm:ss")).getTime() - intevalTime
|
|
this.startTime = new Date(day)
|
|
}
|
|
}
|
|
if (this.startTime && this.endTime) {
|
|
let Ayear = +dateTimeFormat(this.startTime, "yyyy")
|
|
let Byear = +dateTimeFormat(this.endTime, "yyyy")
|
|
if (Ayear == Byear) {
|
|
this.yearList = [Ayear]
|
|
} else {
|
|
this.yearList = []
|
|
}
|
|
}
|
|
this.buildDate()
|
|
},
|
|
buildDate() {
|
|
let format = "yyyy-MM-dd HH:mm:ss"
|
|
if(this.defaultTimeType==0){
|
|
format = "yyyy-MM"
|
|
}
|
|
if(this.defaultTimeType==1){
|
|
format = "yyyy-MM-dd"
|
|
}
|
|
// console.log("输出");
|
|
// console.log(dateTimeFormat(this.startTime, format));
|
|
// console.log(dateTimeFormat(this.endTime, format));
|
|
// console.log(this.yearList);
|
|
// console.log(this.defaultTimeType);
|
|
if (this.startTime && this.endTime) {
|
|
if (this.endTime.getTime() - this.startTime.getTime() < 0) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "开始时间不能大于结束时间"
|
|
})
|
|
}
|
|
if(this.endTime.getTime() - this.startTime.getTime() > intevalTime){
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "时间间隔大于30天"
|
|
})
|
|
}
|
|
}
|
|
},
|
|
isBigger30Day(time1, time2) {
|
|
return (time2 - time1 > intevalTime) || (time2 - time1 < 0)
|
|
},
|
|
changeTime(time) {
|
|
if (this.chooseOne == 0) {
|
|
this.startTime = time
|
|
}
|
|
if (this.chooseOne == 1) {
|
|
this.endTime = time
|
|
}
|
|
this.bindDay()
|
|
if (this.chooseOne == -1) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请先选中一项"
|
|
})
|
|
}
|
|
},
|
|
selectOneYear() {
|
|
this.selectToday(1)
|
|
this.select(0)
|
|
},
|
|
selectOneMonth() {
|
|
this.selectToday(1)
|
|
this.select(0)
|
|
},
|
|
fixedTime(time,chooseOne){
|
|
time.setHours(0,0,0)
|
|
return time
|
|
},
|
|
select(chooseOne) {
|
|
if (chooseOne == 0 && this.endTime) {
|
|
let day = new Date(dateTimeFormat(this.endTime, "yyyy/MM/dd HH:mm:ss")).getTime() - intevalTime
|
|
this.defaultTime = new Date(day)
|
|
this.startTime = new Date(day)
|
|
// this.$refs.day.setTime(new Date(day))
|
|
}
|
|
if (chooseOne == 1 && this.startTime) {
|
|
let day = new Date(dateTimeFormat(this.startTime, "yyyy/MM/dd HH:mm:ss")).getTime() + intevalTime
|
|
this.defaultTime = new Date(day)
|
|
this.endTime = new Date(day)
|
|
}
|
|
this.bindDay()
|
|
},
|
|
selectToday(chooseOne) {
|
|
if (this.chooseOne == -1) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请先选中一项"
|
|
})
|
|
return
|
|
}
|
|
if (this.chooseOne == 0 || chooseOne===0) {
|
|
this.startTime = new Date()
|
|
}
|
|
if (this.chooseOne == 1 || chooseOne===1) {
|
|
this.endTime = new Date()
|
|
}
|
|
this.bindDay()
|
|
},
|
|
clickBind() {
|
|
this.isBind = !this.isBind;
|
|
this.bindDay()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
|
|
margin: 20rpx;
|
|
|
|
.card-title {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.card-content {
|
|
margin: 20rpx 0;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.time {
|
|
width: 260rpx;
|
|
border-bottom: 1px solid #CECECE;
|
|
|
|
&.active {
|
|
color: #22AB39;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
color: #666666;
|
|
flex: 1;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
border: 1px solid #C0C0C0;
|
|
color: #333333;
|
|
padding: 4rpx 15rpx;
|
|
border-radius: 10rpx;
|
|
color: #000;
|
|
|
|
+.btn {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
&.active {
|
|
border-color: #22AB39;
|
|
color: #22AB39;
|
|
}
|
|
}
|
|
|
|
.year-choose-list {
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
|
|
.year-choose-item {
|
|
margin: 10rpx 0;
|
|
color: #999;
|
|
|
|
&.highlight {
|
|
color: #333;
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
&.disabled {
|
|
color: #333;
|
|
background: #F5F5F5;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.year-list {
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
color: #22AB39;
|
|
line-height: 60rpx;
|
|
height: 60rpx;
|
|
|
|
.year-item {
|
|
display: inline-block;
|
|
padding: 0 20rpx;
|
|
}
|
|
}
|
|
.timetype{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: 20rpx 0;
|
|
.timetype_item{
|
|
line-height: 1;
|
|
padding: 8rpx 42rpx;
|
|
border-radius: 4rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #37363B;
|
|
&.active{
|
|
background-color: #22AB39;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|