widget.qw 1.0.24 → 1.0.25

package/src/components/DatetimePicker/DatetimePop.vue

@@ -1,343 +1,343 @@
-<template>
-    <!-- 弹出层 -->
-    <van-popup v-model:show="isShow" position="bottom" round @close="onClose">
-        <van-picker ref="picker" title="请选择时间" :columns="data.columns" @change="onChange" @cancel="onCancel"
-            @confirm="onConfirm" v-model="data.selectedValues" />
-    </van-popup>
-</template>
-
-
-<script setup>
-import { reactive, watch, getCurrentInstance, computed } from "vue"
-import util from '@/util'
-import { useVModel } from "@vueuse/core"
-import moment from'moment'
-
-
-const data = reactive({
-    columns: [], //所有时间列
-    selectedValues: [] //控件选择的时间值
-})
-const props = defineProps({
-    isShow: {
-        type: Boolean,
-        default: false
-    },
-    modelValue: {
-        type: String,
-        default: ''
-
-    }, //时间值
-    before: {
-        type: Boolean,
-        default: false
-    },
-    //最晚时间
-    latest_time: {
-        type: String,
-        default: ''
-    },
-    columnsType: {
-        type: Array,
-        default: ['year', 'month', 'day', 'hour', 'minute', 'second']
-    }
-})
-//定义要向父组件传递的事件
-const emit = defineEmits(['update:modelValue', 'update:isShow'])
-const isShow = useVModel(props, 'isShow', emit)
-
-watch(
-    () => isShow,
-    (n, o) => {
-        if (!n)
-            return
-        getcolumns()
-    },
-    {
-        immediate: true//立即监听--进入就会执行一次 监听显影状态
-    }
-)
-
-// 修改年月,更新选项
-watch(
-    () => {
-        if(props.columnsType.includes('year')) 
-            return data.selectedValues[0]
-        else
-            return 0
-    },
-    (n, o) => {
-        if (!n)
-            return
-
-        getcolumns()
-    },
-    {
-        immediate: true//立即监听--进入就会执行一次 监听显影状态
-    }
-)
-
-watch(
-    () => {
-        if(props.columnsType.includes('month')) 
-            return data.selectedValues[1]
-        else
-            return 0
-    },
-    (n, o) => {
-        if (!n)
-            return
-
-        getcolumns()
-    },
-    {
-        immediate: true//立即监听--进入就会执行一次 监听显影状态
-    }
-)
-
-watch(
-    () => {
-        if(props.columnsType.includes('day')) 
-            return data.selectedValues[2]
-        else
-            return 0
-    },
-    (n, o) => {
-        if (!n)
-            return
-
-        getcolumns()
-    },
-    {
-        immediate: true//立即监听--进入就会执行一次 监听显影状态
-    }
-)
-
-watch(
-    () => {
-        if(props.columnsType.includes('hour')) 
-            return data.selectedValues[3]
-        else
-            return 0
-    },
-    (n, o) => {
-        if (!n)
-            return
-
-        getcolumns()
-    },
-    {
-        immediate: true//立即监听--进入就会执行一次 监听显影状态
-    }
-)
-
-watch(
-    () => {
-        if(props.columnsType.includes('minute')) 
-            return data.selectedValues[4]
-        else
-            return 0
-    },
-    (n, o) => {
-        if (!n)
-            return
-
-        getcolumns()
-    },
-    {
-        immediate: true//立即监听--进入就会执行一次 监听显影状态
-    }
-)
-
-watch(
-    () => props.latest_time,
-    (n, o) => {
-        if (!n)
-            return
-
-        getcolumns()
-    },
-    {
-        immediate: true//立即监听--进入就会执行一次 监听显影状态
-    }
-)
-
-
-function onChange() {
-    // 无用的方法 
-}
-
-function formatSelectTime() {
-    let res = data.selectedValues[0] +
-        "-" +
-        util.pad0(data.selectedValues[1]) +
-        "-" +
-        util.pad0(data.selectedValues[2]) +
-        " "
-
-        if(props.columnsType.includes('hour'))
-            res += util.pad0(data.selectedValues[3])
-        else
-            res += '00'
-
-        if(props.columnsType.includes('minute'))
-            res +=':'+ util.pad0(data.selectedValues[4])
-        else
-            res += ':00'
-        
-        if(props.columnsType.includes('second'))
-            res +=':'+ util.pad0(data.selectedValues[5])
-        else
-            res += ':00'
-
-    return res
-}
-
-// 根据选取时间，计算时间元素的取值范围
-function getcolumns() {
-    // 清除旧的取值范围
-    data.columns = []
-    let strtime = ''
-    // 根据当先选取的时间计算年月日时分秒取值范围
-    if (data.selectedValues.length > 0) {
-        strtime = formatSelectTime()
-
-        //无效日期时，将日改为1号
-        if (!util.isValidDatetime(strtime)) {
-            data.selectedValues[2] = 1
-            strtime = formatSelectTime()
-        }
-    }
-
-    // 开始没有选取的时间时，取父组件传入的时间
-    if (!strtime && props.modelValue) {
-        strtime = props.modelValue
-    }
-
-    // 传入时间为空时，取当前时间
-    if (!strtime) {
-        strtime = util.date2yyyyMMddhhmmss(new Date()) //传入的时间
-    }
-
-    // 获取选取时间的 年 月 日 时 分 秒
-    let dateVaules = new Date(moment(strtime))
-    let Y = dateVaules.getFullYear()
-    let M = dateVaules.getMonth()+1
-    let D = dateVaules.getDate()
-    let h = dateVaules.getHours()
-    let m = dateVaules.getMinutes()
-    let s = dateVaules.getSeconds()
-
-    let currentYear = new Date().getFullYear()
-    let beginYear = currentYear - 3
-    let endYear = currentYear + 3
-    let earliest_time = new Date(moment(`${beginYear}-01-01 00:00:00`))
-    let latest_time = new Date(moment(`${endYear}-12-31 23:59:59`))
-
-    if(props.before)
-        latest_time = new Date()
-
-    if(props.latest_time && (new Date(moment(props.latest_time)).getTime() < latest_time.getTime())){
-        latest_time = new Date(moment(props.latest_time))
-    }
-
-    endYear = latest_time.getFullYear()
-
-    let years = []; //获取后十年数组
-    years = Array.apply(null, {length:endYear-beginYear+1}).map((item,idx)=>{
-        return { 
-            text: beginYear+idx, 
-            value: beginYear+idx 
-        }
-    })
-    if (props.columnsType.includes('year'))
-        data.columns.push(years) //生成年列
-
-    let total_month = 12
-    if(Y == latest_time.getFullYear())
-        total_month = latest_time.getMonth()+1
-    let months = [] //获取12月数组
-    months = Array.apply(null, { length: total_month }).map(function (item,idx) {
-        return {
-            text: idx+1,
-            value: idx+1
-        }
-    })
-    if (props.columnsType.includes('month'))
-        data.columns.push(months) //生成月列
-
-    //获取当月的天数
-    let total_day = util.YYYYMM2max_day(Y, M)
-    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1))
-        total_day = latest_time.getDate()
-    let days = [] //创建当月天数数组
-    days = Array.apply(null, { length: total_day }).map((item,idx)=>{
-        return { text: idx + 1, value: idx + 1 }
-    })
-    if (props.columnsType.includes('day'))
-        data.columns.push(days) //生成日列
-
-    let total_hour = 24
-    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1) && D == latest_time.getDate())
-        total_hour = latest_time.getHours()
-
-    let hours = [] //创建小时数组
-    hours =Array.apply(null, { length: total_hour }).map((item,idx)=> {
-        return {
-            text: idx,
-            value: idx
-        }
-    })
-    if (props.columnsType.includes('hour'))
-        data.columns.push(hours) //生成小时列
-
-    let total_minute = 60
-    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1) && D == latest_time.getDate() && h == latest_time.getHours())
-        total_minute = latest_time.getMinutes()
-    let minutes = [] //创建分钟数组
-    minutes = Array.apply(null, { length: total_minute }).map((item,idx)=>{
-        return{
-            text: idx,
-            value: idx
-        }
-    })
-    if (props.columnsType.includes('minute'))
-        data.columns.push(minutes) //生成分钟列
-
-    let total_second = 60
-    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1) && D == latest_time.getDate() && h == latest_time.getHours() && m == latest_time.getMinutes())
-        total_second = latest_time.getSeconds()
-    let seconds = []; //创建秒数数组
-    seconds = Array.apply(null, { length: total_minute }).map((item,idx)=>{
-        return{
-            text: idx,
-            value: idx
-        }
-    })
-    if (props.columnsType.includes('second'))
-        data.columns.push(seconds) //生成秒钟列
-
-    // 设置选中的年月日时分秒
-    let selectedValues = [Y, M, D, h, m, s]
-    data.selectedValues = selectedValues.splice(0, props.columnsType.length)
-}
-
-//时间选择器关闭 值不改变并关闭弹框
-function onClose() {
-    isShow.value = false
-}
-
-// 时间选择器确定 值改变
-function onConfirm({ selectedValues }) {
-    let endval = formatSelectTime()
-    isShow.value = false
-
-    console.log(endval)
-    emit("update:modelValue", endval);
-}
-
-function onCancel(){
-    isShow.value = false
-}
-
+<template>
+    <!-- 弹出层 -->
+    <van-popup v-model:show="isShow" position="bottom" round @close="onClose">
+        <van-picker ref="picker" title="请选择时间" :columns="data.columns" @change="onChange" @cancel="onCancel"
+            @confirm="onConfirm" v-model="data.selectedValues" />
+    </van-popup>
+</template>
+
+
+<script setup>
+import { reactive, watch, getCurrentInstance, computed } from "vue"
+import util from '@/util'
+import { useVModel } from "@vueuse/core"
+import moment from'moment'
+
+
+const data = reactive({
+    columns: [], //所有时间列
+    selectedValues: [] //控件选择的时间值
+})
+const props = defineProps({
+    isShow: {
+        type: Boolean,
+        default: false
+    },
+    modelValue: {
+        type: String,
+        default: ''
+
+    }, //时间值
+    before: {
+        type: Boolean,
+        default: false
+    },
+    //最晚时间
+    latest_time: {
+        type: String,
+        default: ''
+    },
+    columnsType: {
+        type: Array,
+        default: ['year', 'month', 'day', 'hour', 'minute', 'second']
+    }
+})
+//定义要向父组件传递的事件
+const emit = defineEmits(['update:modelValue', 'update:isShow'])
+const isShow = useVModel(props, 'isShow', emit)
+
+watch(
+    () => isShow,
+    (n, o) => {
+        if (!n)
+            return
+        getcolumns()
+    },
+    {
+        immediate: true//立即监听--进入就会执行一次 监听显影状态
+    }
+)
+
+// 修改年月,更新选项
+watch(
+    () => {
+        if(props.columnsType.includes('year')) 
+            return data.selectedValues[0]
+        else
+            return 0
+    },
+    (n, o) => {
+        if (!n)
+            return
+
+        getcolumns()
+    },
+    {
+        immediate: true//立即监听--进入就会执行一次 监听显影状态
+    }
+)
+
+watch(
+    () => {
+        if(props.columnsType.includes('month')) 
+            return data.selectedValues[1]
+        else
+            return 0
+    },
+    (n, o) => {
+        if (!n)
+            return
+
+        getcolumns()
+    },
+    {
+        immediate: true//立即监听--进入就会执行一次 监听显影状态
+    }
+)
+
+watch(
+    () => {
+        if(props.columnsType.includes('day')) 
+            return data.selectedValues[2]
+        else
+            return 0
+    },
+    (n, o) => {
+        if (!n)
+            return
+
+        getcolumns()
+    },
+    {
+        immediate: true//立即监听--进入就会执行一次 监听显影状态
+    }
+)
+
+watch(
+    () => {
+        if(props.columnsType.includes('hour')) 
+            return data.selectedValues[3]
+        else
+            return 0
+    },
+    (n, o) => {
+        if (!n)
+            return
+
+        getcolumns()
+    },
+    {
+        immediate: true//立即监听--进入就会执行一次 监听显影状态
+    }
+)
+
+watch(
+    () => {
+        if(props.columnsType.includes('minute')) 
+            return data.selectedValues[4]
+        else
+            return 0
+    },
+    (n, o) => {
+        if (!n)
+            return
+
+        getcolumns()
+    },
+    {
+        immediate: true//立即监听--进入就会执行一次 监听显影状态
+    }
+)
+
+watch(
+    () => props.latest_time,
+    (n, o) => {
+        if (!n)
+            return
+
+        getcolumns()
+    },
+    {
+        immediate: true//立即监听--进入就会执行一次 监听显影状态
+    }
+)
+
+
+function onChange() {
+    // 无用的方法 
+}
+
+function formatSelectTime() {
+    let res = data.selectedValues[0] +
+        "-" +
+        util.pad0(data.selectedValues[1]) +
+        "-" +
+        util.pad0(data.selectedValues[2]) +
+        " "
+
+        if(props.columnsType.includes('hour'))
+            res += util.pad0(data.selectedValues[3])
+        else
+            res += '00'
+
+        if(props.columnsType.includes('minute'))
+            res +=':'+ util.pad0(data.selectedValues[4])
+        else
+            res += ':00'
+        
+        if(props.columnsType.includes('second'))
+            res +=':'+ util.pad0(data.selectedValues[5])
+        else
+            res += ':00'
+
+    return res
+}
+
+// 根据选取时间，计算时间元素的取值范围
+function getcolumns() {
+    // 清除旧的取值范围
+    data.columns = []
+    let strtime = ''
+    // 根据当先选取的时间计算年月日时分秒取值范围
+    if (data.selectedValues.length > 0) {
+        strtime = formatSelectTime()
+
+        //无效日期时，将日改为1号
+        if (!util.isValidDatetime(strtime)) {
+            data.selectedValues[2] = 1
+            strtime = formatSelectTime()
+        }
+    }
+
+    // 开始没有选取的时间时，取父组件传入的时间
+    if (!strtime && props.modelValue) {
+        strtime = props.modelValue
+    }
+
+    // 传入时间为空时，取当前时间
+    if (!strtime) {
+        strtime = util.date2yyyyMMddhhmmss(new Date()) //传入的时间
+    }
+
+    // 获取选取时间的 年 月 日 时 分 秒
+    let dateVaules = new Date(moment(strtime))
+    let Y = dateVaules.getFullYear()
+    let M = dateVaules.getMonth()+1
+    let D = dateVaules.getDate()
+    let h = dateVaules.getHours()
+    let m = dateVaules.getMinutes()
+    let s = dateVaules.getSeconds()
+
+    let currentYear = new Date().getFullYear()
+    let beginYear = currentYear - 3
+    let endYear = currentYear + 3
+    let earliest_time = new Date(moment(`${beginYear}-01-01 00:00:00`))
+    let latest_time = new Date(moment(`${endYear}-12-31 23:59:59`))
+
+    if(props.before)
+        latest_time = new Date()
+
+    if(props.latest_time && (new Date(moment(props.latest_time)).getTime() < latest_time.getTime())){
+        latest_time = new Date(moment(props.latest_time))
+    }
+
+    endYear = latest_time.getFullYear()
+
+    let years = []; //获取后十年数组
+    years = Array.apply(null, {length:endYear-beginYear+1}).map((item,idx)=>{
+        return { 
+            text: beginYear+idx, 
+            value: beginYear+idx 
+        }
+    })
+    if (props.columnsType.includes('year'))
+        data.columns.push(years) //生成年列
+
+    let total_month = 12
+    if(Y == latest_time.getFullYear())
+        total_month = latest_time.getMonth()+1
+    let months = [] //获取12月数组
+    months = Array.apply(null, { length: total_month }).map(function (item,idx) {
+        return {
+            text: idx+1,
+            value: idx+1
+        }
+    })
+    if (props.columnsType.includes('month'))
+        data.columns.push(months) //生成月列
+
+    //获取当月的天数
+    let total_day = util.YYYYMM2max_day(Y, M)
+    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1))
+        total_day = latest_time.getDate()
+    let days = [] //创建当月天数数组
+    days = Array.apply(null, { length: total_day }).map((item,idx)=>{
+        return { text: idx + 1, value: idx + 1 }
+    })
+    if (props.columnsType.includes('day'))
+        data.columns.push(days) //生成日列
+
+    let total_hour = 24
+    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1) && D == latest_time.getDate())
+        total_hour = latest_time.getHours()
+
+    let hours = [] //创建小时数组
+    hours =Array.apply(null, { length: total_hour }).map((item,idx)=> {
+        return {
+            text: idx,
+            value: idx
+        }
+    })
+    if (props.columnsType.includes('hour'))
+        data.columns.push(hours) //生成小时列
+
+    let total_minute = 60
+    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1) && D == latest_time.getDate() && h == latest_time.getHours())
+        total_minute = latest_time.getMinutes()
+    let minutes = [] //创建分钟数组
+    minutes = Array.apply(null, { length: total_minute }).map((item,idx)=>{
+        return{
+            text: idx,
+            value: idx
+        }
+    })
+    if (props.columnsType.includes('minute'))
+        data.columns.push(minutes) //生成分钟列
+
+    let total_second = 60
+    if(Y == latest_time.getFullYear() && M == (latest_time.getMonth()+1) && D == latest_time.getDate() && h == latest_time.getHours() && m == latest_time.getMinutes())
+        total_second = latest_time.getSeconds()
+    let seconds = []; //创建秒数数组
+    seconds = Array.apply(null, { length: total_minute }).map((item,idx)=>{
+        return{
+            text: idx,
+            value: idx
+        }
+    })
+    if (props.columnsType.includes('second'))
+        data.columns.push(seconds) //生成秒钟列
+
+    // 设置选中的年月日时分秒
+    let selectedValues = [Y, M, D, h, m, s]
+    data.selectedValues = selectedValues.splice(0, props.columnsType.length)
+}
+
+//时间选择器关闭 值不改变并关闭弹框
+function onClose() {
+    isShow.value = false
+}
+
+// 时间选择器确定 值改变
+function onConfirm({ selectedValues }) {
+    let endval = formatSelectTime()
+    isShow.value = false
+
+    console.log(endval)
+    emit("update:modelValue", endval);
+}
+
+function onCancel(){
+    isShow.value = false
+}
+
 </script>