|
@@ -0,0 +1,415 @@
|
|
|
+<template>
|
|
|
+ <div >
|
|
|
+ <u-popup ref="popup" class="popup" :mask="true" mode="bottom" >
|
|
|
+ <view >
|
|
|
+ <view class="popup-title ">
|
|
|
+ <text >时间筛选</text>
|
|
|
+ <text @click="$refs.popup.close()">×</text>
|
|
|
+ </view>
|
|
|
+ <view style="margin-left: 16px;">
|
|
|
+ <text class="quick-title">快捷选择</text>
|
|
|
+ <view style="margin: 15px 0;">
|
|
|
+ <text style="margin-right: 25px;" :class="typeStatistics == val.value ? 'selected' : 'text-border'" v-for="val in partnerTypeOption"
|
|
|
+ :key="val.value" @click="getPartnerType(val.value)">{{ val.lable }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="quick-title" style="margin-left: 16px;">自定义时间</text>
|
|
|
+ <view style="padding: 15px">
|
|
|
+ <view class="popup-data dis j-s">
|
|
|
+ <text :class="startShow? 'active' :''" @click="startClick()">{{ interviewStartTime||'开始时间' }}</text>至
|
|
|
+ <text :class="endShow? 'active' :''" @click="endClick()">{{ interviewEndTime || '结束时间' }}</text>
|
|
|
+ </view>
|
|
|
+ <picker-view v-show="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
|
|
|
+ class="picker-view">
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
|
|
+ </picker-view-column>
|
|
|
+ <picker-view-column>
|
|
|
+ <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
|
|
+ </picker-view-column>
|
|
|
+ </picker-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="popup-footer dis j-s">
|
|
|
+ <text @click.stop="reset" >重置</text>
|
|
|
+ <text @click.stop="confirm" >确定</text>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ <u-toast ref="uToast" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { log } from 'util';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ typeStatistics:0,
|
|
|
+ partnerTypeOption: [
|
|
|
+ {
|
|
|
+ lable: '今日',
|
|
|
+ value: '1'
|
|
|
+ }, {
|
|
|
+ lable: '本月',
|
|
|
+ value: '2'
|
|
|
+ }, {
|
|
|
+ lable: '本年',
|
|
|
+ value: '3'
|
|
|
+ }, {
|
|
|
+ lable: '全部',
|
|
|
+ value: '4'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ startShow: false,
|
|
|
+ endShow: false,
|
|
|
+ interviewStartTime:'',
|
|
|
+ interviewEndTime:'',
|
|
|
+ beginStartTime:'',
|
|
|
+ beginEndTime:'',
|
|
|
+ years: [],
|
|
|
+ year: null,
|
|
|
+ months: [],
|
|
|
+ month: null,
|
|
|
+ days: [],
|
|
|
+ day: null,
|
|
|
+ hours: [],
|
|
|
+ hour: null,
|
|
|
+ minutes: [],
|
|
|
+ minute: null,
|
|
|
+ value: [],
|
|
|
+ indicatorStyle: `height: 50px;color:#2D6DFF `,
|
|
|
+ visible:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // visible: {
|
|
|
+ // type: Boolean,
|
|
|
+ // default: true
|
|
|
+ // },
|
|
|
+
|
|
|
+ // interviewTime: {
|
|
|
+ // type: String,
|
|
|
+ // default() {
|
|
|
+ // return '';
|
|
|
+ // },
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // visible: {
|
|
|
+ // handler(newValue, oldValue) {
|
|
|
+ // if (newValue) {
|
|
|
+ // if (this.interviewTime) {
|
|
|
+ // this.init(this.interviewTime);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // immediate: false,
|
|
|
+ // deep: true
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(){
|
|
|
+ this.typeStatistics=0
|
|
|
+ this.interviewStartTime=''
|
|
|
+ this.interviewEndTime =''
|
|
|
+ this.visible=false
|
|
|
+ this.startShow = false
|
|
|
+ this.endShow = false
|
|
|
+ this.$refs.popup.open()
|
|
|
+ },
|
|
|
+ bindChange: function (e) {
|
|
|
+ const val = e.detail.value
|
|
|
+ let year = this.years[val[0]]
|
|
|
+ let isDay = 30, days = [];
|
|
|
+ if (val[1]+1 == 2) {
|
|
|
+ if((val[0]%4==0 && year%100!=0)||(year%400==0)){
|
|
|
+ console.log('闰年')
|
|
|
+ isDay = 29;
|
|
|
+ }else {
|
|
|
+ isDay = 28;
|
|
|
+ console.log('平年')
|
|
|
+ }
|
|
|
+ } else if ([1,3,5,7,8,10,12].includes(val[1]+1)) {
|
|
|
+ isDay = 31;
|
|
|
+ } else {
|
|
|
+ isDay = 30;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 1; i <= isDay; i++) {
|
|
|
+ days.push(i)
|
|
|
+ }
|
|
|
+ this.days = days;
|
|
|
+ this.year = this.years[val[0]]
|
|
|
+ this.month = this.months[val[1]]
|
|
|
+ this.day = this.days[val[2]]
|
|
|
+ if(this.startShow){
|
|
|
+ this.interviewStartTime=this.year+'-'+this.month+'-'+this.day
|
|
|
+ }
|
|
|
+ if(this.endShow){
|
|
|
+ this.interviewEndTime=this.year+'-'+this.month+'-'+this.day
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ const date = new Date();
|
|
|
+ const years = []
|
|
|
+ const year = date.getFullYear()
|
|
|
+ const months = []
|
|
|
+ const month = date.getMonth() + 1
|
|
|
+ const days = []
|
|
|
+ const day = date.getDate()
|
|
|
+
|
|
|
+ let isDay = 30;
|
|
|
+ if (month == 2) {
|
|
|
+ if((year%4==0 && year%100!=0)||(year%400==0)){
|
|
|
+ isDay = 29;
|
|
|
+ }else {
|
|
|
+ isDay = 28;
|
|
|
+ }
|
|
|
+ } else if ([1,3,5,7,8,10,12].includes(month)) {
|
|
|
+ isDay = 31;
|
|
|
+ } else {
|
|
|
+ isDay = 30;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = date.getFullYear(); i >= 1900; i--) {
|
|
|
+ years.push(i)
|
|
|
+ }
|
|
|
+ for (let i = 1; i <= 12; i++) {
|
|
|
+ months.push(i)
|
|
|
+ }
|
|
|
+ for (let i = 1; i <= isDay; i++) {
|
|
|
+ days.push(i)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.years = years
|
|
|
+ this.year = year
|
|
|
+ this.months = months
|
|
|
+ this.month = month
|
|
|
+ this.days = days
|
|
|
+ this.day = day
|
|
|
+ this.value = [0, month-1, day-1]
|
|
|
+ },
|
|
|
+ // 补0
|
|
|
+ padZeroStr(originStr){
|
|
|
+ if(+originStr < 10){
|
|
|
+ return String(originStr).padStart(2,'0')
|
|
|
+ }
|
|
|
+ return originStr + ''
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+ this.$emit('update:visible', false);
|
|
|
+ },
|
|
|
+ reset(){
|
|
|
+ this.$emit('update:visible', false);
|
|
|
+ this.interviewStartTime=''
|
|
|
+ this.interviewEndTime =''
|
|
|
+ },
|
|
|
+ startClick(){
|
|
|
+ // this.interviewStartTime=''
|
|
|
+ this.typeStatistics=0
|
|
|
+ this.interviewStartTime = this.year+'-'+this.month+'-'+this.day
|
|
|
+ this.visible=true
|
|
|
+ this.startShow = true
|
|
|
+ this.endShow = false
|
|
|
+ },
|
|
|
+ endClick(){
|
|
|
+ this.typeStatistics=0
|
|
|
+ this.interviewEndTime= this.year+'-'+this.month+'-'+this.day
|
|
|
+ this.visible=true
|
|
|
+ this.startShow = false
|
|
|
+ this.endShow = true
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ // let monthStr = this.padZeroStr(this.month)
|
|
|
+ // let dayStr = this.padZeroStr(this.day)
|
|
|
+ // let hourStr = this.padZeroStr(this.hour)
|
|
|
+ // let minuteStr = this.padZeroStr(this.minute)
|
|
|
+ // this.timeValue = `${this.year}/${monthStr}/${dayStr} ${hourStr}:${minuteStr}:00`;
|
|
|
+ let timeValue=''
|
|
|
+ // if(this.interviewStartTime || this.interviewEndTime){
|
|
|
+ // timeValue=this.interviewStartTime ||this.interviewEndTime
|
|
|
+ // }
|
|
|
+ if(this.interviewStartTime && this.interviewEndTime){
|
|
|
+ // let timeValue=this.interviewStartTime +'~'+this.interviewEndTime
|
|
|
+ // console.log(this.compareArrays(this.interviewStartTime.split('-'),this.interviewEndTime.split('-')),999)
|
|
|
+ // if(!this.compareArrays(this.interviewStartTime.split('-'),this.interviewEndTime.split('-'))){
|
|
|
+ // this.$refs.uToast.show({
|
|
|
+ // title: '开始时间必须小于结束时间',
|
|
|
+ // type: 'warning',
|
|
|
+ // icon:false
|
|
|
+ // // url: '/pages/user/index'
|
|
|
+ // })
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ // this.compareArrays(this.interviewStartTime.split('-'),this.interviewEndTime.split('-'))
|
|
|
+ // log(this.compareDates(new Date(this.interviewStartTime),new Date(this.interviewEndTime),222222))
|
|
|
+ // log(this.compareDates(new Date("2022-01-01"),new Date("2022-01-02"),222222))
|
|
|
+ if(this.compareDates(new Date(this.interviewStartTime),new Date(this.interviewEndTime))==1){
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '开始时间必须小于结束时间',
|
|
|
+ type: 'warning',
|
|
|
+ icon:false
|
|
|
+ // url: '/pages/user/index'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '请选择时间!',
|
|
|
+ type: 'warning',
|
|
|
+ icon:false
|
|
|
+ // url: '/pages/user/index'
|
|
|
+ })
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.$emit('confirmPickDate', this.interviewStartTime,this.interviewEndTime,this.interviewStartTime +'~'+this.interviewEndTime);
|
|
|
+ this.$refs.popup.close()
|
|
|
+ },
|
|
|
+ compareDates(date1, date2) {
|
|
|
+ var dateString1 = date1.toISOString().slice(0, 10);
|
|
|
+ var dateString2 = date2.toISOString().slice(0, 10);
|
|
|
+
|
|
|
+ if (dateString1 > dateString2) {
|
|
|
+ return 1;
|
|
|
+ } else if (dateString1 < dateString2) {
|
|
|
+ return -1;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCurrentMonthFirst() {
|
|
|
+ // 获取当月第一天数据
|
|
|
+ let date = new Date()
|
|
|
+ date.setDate(1)
|
|
|
+ let month = parseInt(date.getMonth() + 1)
|
|
|
+ let day = date.getDate()
|
|
|
+ if (month < 10) month = '0' + month
|
|
|
+ if (day < 10) day = '0' + day
|
|
|
+ return date.getFullYear() + '-' + month + '-' + day
|
|
|
+ },
|
|
|
+ getCurrentMonthLast() {
|
|
|
+ // 获取当月最后一天数据
|
|
|
+ let date = new Date()
|
|
|
+ let year = date.getFullYear()
|
|
|
+ let month = date.getMonth() + 1
|
|
|
+ month = month < 10 ? '0' + month : month
|
|
|
+ let day = new Date(year, month, 0)
|
|
|
+ return year + '-' + month + '-' + day.getDate()
|
|
|
+ },
|
|
|
+ getPartnerType(type) {
|
|
|
+ this.typeStatistics=type
|
|
|
+ let now = new Date();
|
|
|
+ let year = now.getFullYear();
|
|
|
+ let month = now.getMonth() + 1; // 月份是从0开始的,所以需要加1
|
|
|
+ let day = now.getDate();
|
|
|
+ if(type==1){
|
|
|
+ let theDay=`${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
|
|
+ this.$emit('confirmPickDate',theDay,theDay,'今日数据');
|
|
|
+ this.$refs.popup.close()
|
|
|
+ }
|
|
|
+ else if(type==2){
|
|
|
+ this.$emit('confirmPickDate', this.getCurrentMonthFirst(),this.getCurrentMonthLast(),'本月数据');
|
|
|
+ this.$refs.popup.close()
|
|
|
+ }
|
|
|
+ else if(type==3 ){
|
|
|
+ this.$emit('confirmPickDate', year+'-01-01',year+ '-12-31','本年数据');
|
|
|
+ this.$refs.popup.close()
|
|
|
+ }
|
|
|
+ else if(type==4 ){
|
|
|
+ this.$emit('confirmPickDate', '','','全部数据');
|
|
|
+ this.$refs.popup.close()
|
|
|
+ }
|
|
|
+ this.interviewStartTime=''
|
|
|
+ this.interviewEndTime =''
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .popup {
|
|
|
+ border-radius:10px 10px 0 0 !important;
|
|
|
+ }
|
|
|
+ .quick-title{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .text-border{
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 3px 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .selected {
|
|
|
+ padding: 3px 10px;
|
|
|
+ color: #2D6DFF;
|
|
|
+ background: rgba(45,109,255,0.1);
|
|
|
+ }
|
|
|
+ .popup-title{
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333333;
|
|
|
+ padding:10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ text:first-child {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ text:last-child {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ font-size: 21px;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 23px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-footer{
|
|
|
+ margin:10px 15px;
|
|
|
+ text{
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 0;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ text:first-child {
|
|
|
+ color: #2D6DFF;
|
|
|
+ background: rgba(45,109,255,0.1);
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ }
|
|
|
+ text:last-child {
|
|
|
+ background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);
|
|
|
+ border-radius: 5px 5px 5px 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-data{
|
|
|
+ line-height: 25px;
|
|
|
+ text{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999 ;
|
|
|
+ display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #DDDDDD;
|
|
|
+ border-radius: 2px 2px 2px 2px;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ border: 1px solid #2D6DFF;
|
|
|
+ color: #2D6DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .picker-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+</style>
|