bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-datetime-picker/u-datetime-picker.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,360 @@
<template>
   <u-picker
      ref="picker"
      :show="show"
      :closeOnClickOverlay="closeOnClickOverlay"
      :columns="columns"
      :title="title"
      :itemHeight="itemHeight"
      :showToolbar="showToolbar"
      :visibleItemCount="visibleItemCount"
      :defaultIndex="innerDefaultIndex"
      :cancelText="cancelText"
      :confirmText="confirmText"
      :cancelColor="cancelColor"
      :confirmColor="confirmColor"
      @close="close"
      @cancel="cancel"
      @confirm="confirm"
      @change="change"
   >
   </u-picker>
</template>

<script>
   function times(n, iteratee) {
       let index = -1
       const result = Array(n < 0 ? 0 : n)
       while (++index < n) {
           result[index] = iteratee(index)
       }
       return result
   }
   import props from './props.js';
   import dayjs from '../../libs/util/dayjs.js';
   /**
    * DatetimePicker æ—¶é—´æ—¥æœŸé€‰æ‹©å™¨
    * @description æ­¤é€‰æ‹©å™¨ç”¨äºŽæ—¶é—´æ—¥æœŸ
    * @tutorial https://www.uviewui.com/components/datetimePicker.html
    * @property {Boolean}         show            ç”¨äºŽæŽ§åˆ¶é€‰æ‹©å™¨çš„弹出与收起 ( é»˜è®¤ false )
    * @property {Boolean}         showToolbar         æ˜¯å¦æ˜¾ç¤ºé¡¶éƒ¨çš„操作栏  ( é»˜è®¤ true )
    * @property {String | Number}   value            ç»‘定值
    * @property {String}         title            é¡¶éƒ¨æ ‡é¢˜
    * @property {String}         mode            å±•ç¤ºæ ¼å¼ mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( é»˜è®¤ â€˜datetime )
    * @property {Number}         maxDate            å¯é€‰çš„最大时间  é»˜è®¤å€¼ä¸ºåŽ10å¹´
    * @property {Number}         minDate            å¯é€‰çš„最小时间  é»˜è®¤å€¼ä¸ºå‰10å¹´
    * @property {Number}         minHour            å¯é€‰çš„最小小时，仅mode=time有效   ( é»˜è®¤ 0 )
    * @property {Number}         maxHour            å¯é€‰çš„最大小时，仅mode=time有效     ( é»˜è®¤ 23 )
    * @property {Number}         minMinute         å¯é€‰çš„最小分钟，仅mode=time有效     ( é»˜è®¤ 0 )
    * @property {Number}         maxMinute         å¯é€‰çš„最大分钟，仅mode=time有效   ( é»˜è®¤ 59 )
    * @property {Function}         filter            é€‰é¡¹è¿‡æ»¤å‡½æ•°
    * @property {Function}         formatter         é€‰é¡¹æ ¼å¼åŒ–函数
    * @property {Boolean}         loading            æ˜¯å¦æ˜¾ç¤ºåŠ è½½ä¸­çŠ¶æ€   ( é»˜è®¤ false )
    * @property {String | Number}   itemHeight         å„列中，单个选项的高度   ( é»˜è®¤ 44 )
    * @property {String}         cancelText         å–消按钮的文字  ( é»˜è®¤ '取消' )
    * @property {String}         confirmText         ç¡®è®¤æŒ‰é’®çš„文字  ( é»˜è®¤ '确认' )
    * @property {String}         cancelColor         å–消按钮的颜色  ( é»˜è®¤ '#909193' )
    * @property {String}         confirmColor      ç¡®è®¤æŒ‰é’®çš„颜色  ( é»˜è®¤ '#3c9cff' )
    * @property {String | Number}   visibleItemCount   æ¯åˆ—中可见选项的数量  ( é»˜è®¤ 5 )
    * @property {Boolean}         closeOnClickOverlay   æ˜¯å¦å…è®¸ç‚¹å‡»é®ç½©å…³é—­é€‰æ‹©å™¨  ( é»˜è®¤ false )
    * @property {Array}         defaultIndex      å„列的默认索引
    * @event {Function} close å…³é—­é€‰æ‹©å™¨æ—¶è§¦å‘
    * @event {Function} confirm ç‚¹å‡»ç¡®å®šæŒ‰é’®ï¼Œè¿”回当前选择的值
    * @event {Function} change å½“选择值变化时触发
    * @event {Function} cancel ç‚¹å‡»å–消按钮
    * @example  <u-datetime-picker :show="show" :value="value1"  mode="datetime" ></u-datetime-picker>
    */
   export default {
      name: 'datetime-picker',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            columns: [],
            innerDefaultIndex: [],
            innerFormatter: (type, value) => value
         }
      },
      watch: {
         show(newValue, oldValue) {
            if (newValue) {
               this.updateColumnValue(this.innerValue)
            }
         },
         propsChange() {
            this.init()
         }
      },
      computed: {
         // å¦‚果以下这些变量发生了变化，意味着需要重新初始化各列的值
         propsChange() {
            return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, ]
         }
      },
      mounted() {
         this.init()
      },
      methods: {
         init() {
            this.innerValue = this.correctValue(this.value)
            this.updateColumnValue(this.innerValue)
         },
         // åœ¨å¾®ä¿¡å°ç¨‹åºä¸­ï¼Œä¸æ”¯æŒå°†å‡½æ•°å½“做props参数，故只能通过ref形式调用
         setFormatter(e) {
            this.innerFormatter = e
         },
         // å…³é—­é€‰æ‹©å™¨
         close() {
            if (this.closeOnClickOverlay) {
               this.$emit('close')
            }
         },
         // ç‚¹å‡»å·¥å…·æ çš„取消按钮
         cancel() {
            this.$emit('cancel')
         },
         // ç‚¹å‡»å·¥å…·æ çš„确定按钮
         confirm() {
            this.$emit('confirm', {
               value: this.innerValue,
               mode: this.mode
            })
            this.$emit('input', this.innerValue)
         },
         //用正则截取输出值,当出现多组数字时,抛出错误
         intercept(e,type){
            let judge = e.match(/\d+/g)
            //判断是否掺杂数字
            if(judge.length>1){
               uni.$u.error("请勿在过滤或格式化函数时添加数字")
               return 0
            }else if(type&&judge[0].length==4){//判断是否是年份
               return judge[0]
            }else if(judge[0].length>2){
               uni.$u.error("请勿在过滤或格式化函数时添加数字")
               return 0
            }else{
               return judge[0]
            }
         },
         // åˆ—发生变化时触发
         change(e) {
            const { indexs, values } = e
            let selectValue = ''
            if(this.mode === 'time') {
               // æ ¹æ®value各列索引，从各列数组中，取出当前时间的选中值
               selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
            } else {
               // å°†é€‰æ‹©çš„值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
               const year = parseInt(this.intercept(values[0][indexs[0]],'year'))
               const month = parseInt(this.intercept(values[1][indexs[1]]))
               let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
               let hour = 0, minute = 0
               // æ­¤æœˆä»½çš„最大天数
               const maxDate = dayjs(`${year}-${month}`).daysInMonth()
               // year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
               if (this.mode === 'year-month') {
                   date = 1
               }
               // ä¸å…è®¸è¶…过maxDate值
               date = Math.min(maxDate, date)
               if (this.mode === 'datetime') {
                   hour = parseInt(this.intercept(values[3][indexs[3]]))
                   minute = parseInt(this.intercept(values[4][indexs[4]]))
               }
               // è½¬ä¸ºæ—¶é—´æ¨¡å¼
               selectValue = Number(new Date(year, month - 1, date, hour, minute))
            }
            // å–出准确的合法值，防止超越边界的情况
            selectValue = this.correctValue(selectValue)
            this.innerValue = selectValue
            this.updateColumnValue(selectValue)
            // å‘出change时间，value为当前选中的时间戳
            this.$emit('change', {
               value: selectValue,
               // #ifndef MP-WEIXIN
               // å¾®ä¿¡å°ç¨‹åºä¸èƒ½ä¼ é€’this实例，会因为循环引用而报错
               picker: this.$refs.picker,
               // #endif
               mode: this.mode
            })
         },
         // æ›´æ–°å„列的值，进行补0、格式化等操作
         updateColumnValue(value) {
            this.innerValue = value
            this.updateColumns()
            this.updateIndexs(value)
         },
         // æ›´æ–°ç´¢å¼•
         updateIndexs(value) {
            let values = []
            const formatter = this.formatter || this.innerFormatter
            const padZero = uni.$u.padZero
            if (this.mode === 'time') {
               // å°†time模式的时间用:分隔成数组
                const timeArr = value.split(':')
               // ä½¿ç”¨formatter格式化方法进行管道处理
                values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
            } else {
                const date = new Date(value)
                values = [
                    formatter('year', `${dayjs(value).year()}`),
                  // æœˆä»½è¡¥0
                    formatter('month', padZero(dayjs(value).month() + 1))
                ]
                if (this.mode === 'date') {
                  // date模式，需要添加天列
                    values.push(formatter('day', padZero(dayjs(value).date())))
                }
                if (this.mode === 'datetime') {
                  // æ•°ç»„çš„push方法，可以写入多个参数
                    values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
                }
            }

            // æ ¹æ®å½“前各列的所有值，从各列默认值中找到默认值在各列中的索引
            const indexs = this.columns.map((column, index) => {
               // é€šè¿‡å–大值，可以保证不会出现找不到索引的-1情况
               return Math.max(0, column.findIndex(item => item === values[index]))
            })
            this.innerDefaultIndex = indexs
         },
         // æ›´æ–°å„列的值
         updateColumns() {
             const formatter = this.formatter || this.innerFormatter
            // èŽ·å–各列的值，并且map后，对各列的具体值进行补0操作
             const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
            this.columns = results
         },
         getOriginColumns() {
             // ç”Ÿæˆå„列的值
             const results = this.getRanges().map(({ type, range }) => {
                 let values = times(range[1] - range[0] + 1, (index) => {
                     let value = range[0] + index
                     value = type === 'year' ? `${value}` : uni.$u.padZero(value)
                     return value
                 })
               // è¿›è¡Œè¿‡æ»¤
                 if (this.filter) {
                     values = this.filter(type, values)
                 }
                 return { type, values }
             })
             return results
         },
         // é€šè¿‡æœ€å¤§å€¼å’Œæœ€å°å€¼ç”Ÿæˆæ•°ç»„
         generateArray(start, end) {
            return Array.from(new Array(end + 1).keys()).slice(start)
         },
         // å¾—出合法的时间
         correctValue(value) {
            const isDateMode = this.mode !== 'time'
            if (isDateMode && !uni.$u.test.date(value)) {
               // å¦‚果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
               value = this.minDate
            } else if (!isDateMode && !value) {
               // å¦‚果是时间类型，而又没有默认值的话，就用最小时间
               value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`
            }
            // æ—¶é—´ç±»åž‹
            if (!isDateMode) {
               if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式')
               let [hour, minute] = value.split(':')
               // å¯¹æ—¶é—´è¡¥é›¶ï¼ŒåŒæ—¶æŽ§åˆ¶åœ¨æœ€å°å€¼å’Œæœ€å¤§å€¼ä¹‹é—´
               hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
               minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
               return `${ hour }:${ minute }`
            } else {
               // å¦‚果是日期格式，控制在最小日期和最大日期之间
               value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
               value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
               return value
            }
         },
         // èŽ·å–每列的最大和最小值
         getRanges() {
             if (this.mode === 'time') {
                 return [
                     {
                         type: 'hour',
                         range: [this.minHour, this.maxHour],
                     },
                     {
                         type: 'minute',
                         range: [this.minMinute, this.maxMinute],
                     },
                 ];
             }
             const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
             const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
             const result = [
                 {
                     type: 'year',
                     range: [minYear, maxYear],
                 },
                 {
                     type: 'month',
                     range: [minMonth, maxMonth],
                 },
                 {
                     type: 'day',
                     range: [minDate, maxDate],
                 },
                 {
                     type: 'hour',
                     range: [minHour, maxHour],
                 },
                 {
                     type: 'minute',
                     range: [minMinute, maxMinute],
                 },
             ];
             if (this.mode === 'date')
                 result.splice(3, 2);
             if (this.mode === 'year-month')
                 result.splice(2, 3);
             return result;
         },
         // æ ¹æ®minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
         getBoundary(type, innerValue) {
             const value = new Date(innerValue)
             const boundary = new Date(this[`${type}Date`])
             const year = dayjs(boundary).year()
             let month = 1
             let date = 1
             let hour = 0
             let minute = 0
             if (type === 'max') {
                 month = 12
               // æœˆä»½çš„天数
                 date = dayjs(value).daysInMonth()
                 hour = 23
                 minute = 59
             }
            // èŽ·å–边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
             if (dayjs(value).year() === year) {
                 month = dayjs(boundary).month() + 1
                 if (dayjs(value).month() + 1 === month) {
                     date = dayjs(boundary).date()
                     if (dayjs(value).date() === date) {
                         hour = dayjs(boundary).hour()
                         if (dayjs(value).hour() === hour) {
                             minute = dayjs(boundary).minute()
                         }
                     }
                 }
             }
             return {
                 [`${type}Year`]: year,
                 [`${type}Month`]: month,
                 [`${type}Date`]: date,
                 [`${type}Hour`]: hour,
                 [`${type}Minute`]: minute
             }
         },
      },
   }
</script>

<style lang="scss" scoped>
   @import '../../libs/css/components.scss';
</style>