612 lines
16 KiB
Plaintext
612 lines
16 KiB
Plaintext
<script lang="ts">
|
|
import { type PropType } from "vue"
|
|
import { getUid,setPagePullRefresh,getPagePullRefresh } from "../../core/util/xCoreUtil.uts"
|
|
import { getDefaultColor } from "../../core/util/xCoreColorUtil.uts"
|
|
import { xDate, xDateTypeTime, createDate } from "../../core/util/xDate.uts"
|
|
import { xConfig } from "../../config/xConfig.uts"
|
|
import { PICKER_ITEM_INFO } from "../../interface.uts"
|
|
type coverValue = {
|
|
value : string[][],
|
|
str : string
|
|
}
|
|
|
|
/**
|
|
* @name 时间选择器 xPickerTime
|
|
* @description 这是单独显示和控制选择时分秒选择器。如果你需要年月日到秒的全部选择请参考x-picker-date。
|
|
* @page /pages/index/picker-time
|
|
* @category 表单组件
|
|
* @constant 平台兼容
|
|
* | Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|
|
| --- | --- | --- | --- | --- | --- | --- | --- |
|
|
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
|
|
*/
|
|
export default {
|
|
data() {
|
|
let startValue = new xDate('2000-1-1 0:0:0');
|
|
let endValue = new xDate('2000-1-1 23:59:59')
|
|
return {
|
|
default_year: 2000,
|
|
default_month: 1,
|
|
default_date: 1,
|
|
default_time_date: "2000-1-1 ",
|
|
show: false,
|
|
nowValue: [] as string[][],
|
|
nowValueStr: '',
|
|
startDate: startValue,
|
|
endDate: endValue,
|
|
dateList: [] as PICKER_ITEM_INFO[][],
|
|
nowPull:false
|
|
}
|
|
},
|
|
emits: [
|
|
/**
|
|
* 取消时触发
|
|
*/
|
|
'cancel',
|
|
/**
|
|
* 确认触发
|
|
* @param {string} date 当前选中时间
|
|
*/
|
|
'confirm',
|
|
/**
|
|
* 滑动变换时触发
|
|
* @param {string} date - 当前选中时间
|
|
*/
|
|
'change',
|
|
/**
|
|
* 变量控制打开状态
|
|
* 等同v-model:model-show
|
|
*/
|
|
'update:modelShow',
|
|
/**
|
|
* 经格式化后的值。等同v-model:model-str
|
|
*/
|
|
'update:modelStr',
|
|
'update:modelValue'
|
|
],
|
|
props: {
|
|
|
|
/**
|
|
* 当前时间,与modelStr不同，此提供的值必须是正常的时间格式xx:xx:xx
|
|
* 否则报错，无法运行。
|
|
*/
|
|
modelValue: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
/**
|
|
* 当前时间经过format格式化后输出的值。
|
|
* 此值不会处理输入，只输出显示。
|
|
*/
|
|
modelStr: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
/**
|
|
* 当前打开的状态。
|
|
* 等同v-model:model-show
|
|
*/
|
|
modelShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
/**
|
|
* 顶部标题
|
|
*/
|
|
title: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
/**
|
|
* 取消按钮的文本
|
|
*/
|
|
cancelText: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
/**
|
|
* 确认按钮的文本
|
|
*/
|
|
confirmText: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
/**
|
|
* 开始时间：请提供正确的时间格式xx:xx:xx
|
|
*/
|
|
start: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
/**
|
|
* 结束时间：请提供正确的时间格式xx:xx:xx
|
|
*/
|
|
end: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
/**
|
|
* 精确到的级别
|
|
* hour:小时
|
|
* minute:小时分钟
|
|
* second:小时分钟秒
|
|
*/
|
|
type: {
|
|
type: String as PropType<"hour" | "minute" | "second" | "day" | "year" | "month">,
|
|
default: "second"
|
|
},
|
|
/**
|
|
* 输出时间格式，只对v-model:modelStr有效
|
|
* 有效格式：
|
|
* hh小时
|
|
* mm分钟
|
|
* ss秒
|
|
*/
|
|
format: {
|
|
type: String,
|
|
default: "hh:mm:ss"
|
|
},
|
|
/**
|
|
* 上方的单位名称,'年', '月', '日', '小时', '分钟', '秒数'
|
|
*/
|
|
cellUnits: {
|
|
type: Array as PropType<string[]>,
|
|
default: () : string[] => [] as string[]
|
|
},
|
|
/**
|
|
* 层级
|
|
*/
|
|
zIndex:{
|
|
type: Number,
|
|
default: 1100
|
|
},
|
|
showClose:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
/**
|
|
* 是否禁用弹出
|
|
*/
|
|
disabled:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
/**
|
|
* 宽屏时是否让内容剧中显示
|
|
* 并限制其宽为屏幕宽，只展示中间内容以适应宽屏。
|
|
*/
|
|
widthCoverCenter: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
_cellUnits():string[]{
|
|
if(this.cellUnits.length==0){
|
|
|
|
return [
|
|
this!.i18n.t("tmui4x.pickerDate.year"),
|
|
this!.i18n.t("tmui4x.pickerDate.month"),
|
|
this!.i18n.t("tmui4x.pickerDate.day"),
|
|
this!.i18n.t("tmui4x.pickerDate.hour"),
|
|
this!.i18n.t("tmui4x.pickerDate.minute"),
|
|
this!.i18n.t("tmui4x.pickerDate.second"),
|
|
]
|
|
}
|
|
return this.cellUnits;
|
|
},
|
|
_start_date() : xDate {
|
|
if (this.start == "") return this.startDate
|
|
return new xDate(this.default_time_date + this.start)
|
|
},
|
|
_end_date() : xDate {
|
|
if (this.end == "") return this.endDate
|
|
return new xDate(this.default_time_date + this.end)
|
|
},
|
|
_getDateType() : xDateTypeTime {
|
|
let isType = 's' as xDateTypeTime
|
|
if (this.type == 'year') isType = 'y'
|
|
if (this.type == 'month') isType = 'm'
|
|
if (this.type == 'day') isType = 'd'
|
|
if (this.type == 'hour') isType = 'h'
|
|
if (this.type == 'minute') isType = 'M'
|
|
return isType;
|
|
},
|
|
_disabled():boolean{
|
|
return this.disabled
|
|
},
|
|
_cancelText():string{
|
|
if(this.cancelText==''){
|
|
return this!.i18n.t("tmui4x.cancel")
|
|
}
|
|
return this.cancelText;
|
|
},
|
|
_confirmText():string{
|
|
if(this.confirmText==''){
|
|
return this!.i18n.t("tmui4x.confirm")
|
|
}
|
|
return this.confirmText;
|
|
},
|
|
_title():string{
|
|
if(this.title==''){
|
|
return this!.i18n.t("tmui4x.pickerTitle")
|
|
}
|
|
return this.title;
|
|
}
|
|
},
|
|
watch: {
|
|
modelValue(newvalue : string) {
|
|
if (newvalue == '') return;
|
|
let isType = this._getDateType
|
|
let nowValue = new xDate(this.default_time_date + newvalue)
|
|
if (nowValue.isBetweenOf(new xDate(this.nowValueStr), '=', isType)) return;
|
|
this.defaultModelvalue(nowValue.format('hh:mm:ss'), true)
|
|
|
|
},
|
|
modelShow(newValue : boolean) {
|
|
if (newValue == this.show) return;
|
|
this.show = newValue
|
|
}
|
|
},
|
|
mounted() {
|
|
this.nowPull = getPagePullRefresh()
|
|
let nowValue = new xDate(this.default_time_date + this.modelValue)
|
|
this.defaultModelvalue(nowValue.format('hh:mm:ss'), this.modelValue != '')
|
|
|
|
},
|
|
methods: {
|
|
|
|
defaultModelvalue(newvalue : string, showStr : boolean) {
|
|
let isType = this._getDateType
|
|
let nowValue = new xDate(this.default_time_date + newvalue)
|
|
if (nowValue.isBetweenOf(this._start_date, '<=', isType)) {
|
|
nowValue = this._start_date;
|
|
}
|
|
if (nowValue.isBetweenOf(this._end_date, '>=', isType)) {
|
|
nowValue = this._end_date;
|
|
}
|
|
|
|
let stp = this.getRangByDateTime(nowValue)
|
|
|
|
this.nowValue = stp.value;
|
|
|
|
this.nowValueStr = stp.str;
|
|
this.dateList = this.getTimeTreeByStartAndEnd(this._start_date, this._end_date)
|
|
if (showStr) {
|
|
/**
|
|
* 经格式化后的值。等同v-model:model-str
|
|
*/
|
|
this.$emit('update:modelStr', this.formatTimeDate());
|
|
}
|
|
},
|
|
getRangByDateTime(d : xDate) : coverValue {
|
|
let nowRange = [
|
|
[d.getYear().toString()],
|
|
[(d.getMonth()).toString()],
|
|
[d.getDate().toString()],
|
|
[d.getHours().toString()],
|
|
[d.getMinutes().toString()],
|
|
[d.getSeconds().toString()],
|
|
] as string[][]
|
|
let nowRangeStr = d.getYear().toString() + "-" + (d.getMonth() + 1).toString()
|
|
+ "-" + d.getDate().toString()
|
|
+ " " + d.getHours().toString() + ":"
|
|
+ d.getMinutes().toString() + ":"
|
|
+ d.getSeconds().toString()
|
|
|
|
|
|
return {
|
|
value: nowRange as string[][],
|
|
str: nowRangeStr
|
|
} as coverValue
|
|
},
|
|
|
|
getNowTypeLenIndex() : number {
|
|
let index = 6
|
|
if (this.type == 'hour') {
|
|
index = 4;
|
|
} else if (this.type == 'minute') {
|
|
index = 5;
|
|
}
|
|
return index;
|
|
},
|
|
indexToHex(i:number):string{
|
|
let n = i.toString()
|
|
if(n.length==1) return '0'+n;
|
|
return n;
|
|
},
|
|
getTimeTreeByStartAndEnd(start : xDate, end : xDate) : PICKER_ITEM_INFO[][] {
|
|
|
|
|
|
let startCopy = start.getClone();
|
|
let nowDate = new xDate(this.nowValueStr)
|
|
let endCopy = end.getClone();
|
|
let years = [] as PICKER_ITEM_INFO[];
|
|
let months = [] as PICKER_ITEM_INFO[];
|
|
let days = [] as PICKER_ITEM_INFO[];
|
|
let hours = [] as PICKER_ITEM_INFO[];
|
|
let minutes = [] as PICKER_ITEM_INFO[];
|
|
let seconds = [] as PICKER_ITEM_INFO[];
|
|
|
|
for (let i = startCopy.getYear(); i <= endCopy.getYear(); i++) {
|
|
years.push({
|
|
id: i.toString(),
|
|
title: this.indexToHex(i)
|
|
} as PICKER_ITEM_INFO)
|
|
}
|
|
let _this = this;
|
|
function getD(type : string, s : number, n : number) {
|
|
if (type == 'm') {
|
|
for (let i = s; i <= n; i++) {
|
|
months.push({
|
|
id: i.toString(),
|
|
title: _this.indexToHex(i+1)
|
|
} as PICKER_ITEM_INFO)
|
|
}
|
|
} else if (type == 'd') {
|
|
for (let i = s; i <= n; i++) {
|
|
days.push({
|
|
id: i.toString(),
|
|
title: _this.indexToHex(i)
|
|
} as PICKER_ITEM_INFO)
|
|
}
|
|
} else if (type == 'h') {
|
|
for (let i = s; i <= n; i++) {
|
|
hours.push({
|
|
id: i.toString(),
|
|
title: _this.indexToHex(i)
|
|
} as PICKER_ITEM_INFO)
|
|
}
|
|
} else if (type == 'M') {
|
|
for (let i = s; i <= n; i++) {
|
|
minutes.push({
|
|
id: i.toString(),
|
|
title: _this.indexToHex(i)
|
|
} as PICKER_ITEM_INFO)
|
|
}
|
|
} else if (type == 's') {
|
|
for (let i = s; i <= n; i++) {
|
|
seconds.push({
|
|
id: i.toString(),
|
|
title: _this.indexToHex(i)
|
|
} as PICKER_ITEM_INFO)
|
|
}
|
|
}
|
|
}
|
|
function getDnumber(type:xDateTypeTime,target:xDateTypeTime):number[]{
|
|
let st = 0;
|
|
let et = 0
|
|
|
|
// 不包含起始, 开始和结束内。
|
|
if (nowDate.isBetween(startCopy,endCopy,type, '()')) {
|
|
if(target=='m'){
|
|
st = 0
|
|
et = 11
|
|
}else if(target=='d'){
|
|
st = 1
|
|
et = nowDate.getMonthCountDay()
|
|
}else if(target=='h'){
|
|
st = 0
|
|
et = 23
|
|
}else if(target=='M'||target=='s'){
|
|
st = 0
|
|
et = 59
|
|
}
|
|
|
|
//
|
|
} else{
|
|
// 开始和结束相等
|
|
if(startCopy.isBetweenOf(endCopy, '=', type)){
|
|
|
|
if(target=='m'){
|
|
st = startCopy.getMonth()
|
|
et = endCopy.getMonth()
|
|
}else if(target=='d'){
|
|
st = startCopy.getDate()
|
|
et = endCopy.getDate()
|
|
}else if(target=='h'){
|
|
st = startCopy.getHours()
|
|
et = endCopy.getHours()
|
|
}else if(target=='M'){
|
|
st = startCopy.getMinutes()
|
|
et = endCopy.getMinutes()
|
|
}else if(target=='s'){
|
|
st = startCopy.getSeconds()
|
|
et = endCopy.getSeconds()
|
|
}
|
|
|
|
}else if(nowDate.isBetweenOf(startCopy, '<=', type)){
|
|
|
|
if(target=='m'){
|
|
st = startCopy.getMonth()
|
|
et = 11
|
|
}else if(target=='d'){
|
|
st = startCopy.getDate()
|
|
et = startCopy.getMonthCountDay()
|
|
}else if(target=='h'){
|
|
st = startCopy.getHours()
|
|
et = 23
|
|
}else if(target=='M'){
|
|
st = startCopy.getMinutes()
|
|
et = 59
|
|
}else if(target=='s'){
|
|
st = startCopy.getSeconds()
|
|
et = 59
|
|
}
|
|
}else if(nowDate.isBetweenOf(endCopy, '>=', type)){
|
|
|
|
if(target=='m'){
|
|
st = 0
|
|
et = endCopy.getMonth()
|
|
}else if(target=='d'){
|
|
st = 1
|
|
et = endCopy.getMonthCountDay()
|
|
}else if(target=='h'){
|
|
st = 0
|
|
et = endCopy.getHours()
|
|
}else if(target=='M'){
|
|
st = 0
|
|
et = endCopy.getMinutes()
|
|
}else if(target=='s'){
|
|
st = 0
|
|
et = endCopy.getSeconds()
|
|
}
|
|
}
|
|
}
|
|
return [st,et] as number[]
|
|
}
|
|
let maxlen = this.getNowTypeLenIndex();
|
|
|
|
if (maxlen >1) {
|
|
let sdate = getDnumber('y','m')
|
|
getD('m', sdate[0]!, sdate[1]!)
|
|
}
|
|
if (maxlen >2) {
|
|
let sdate = getDnumber('m','d')
|
|
getD('d', sdate[0]!, sdate[1]!)
|
|
}
|
|
if (maxlen >3) {
|
|
let sdate = getDnumber('d','h')
|
|
getD('h', sdate[0]!, sdate[1]!)
|
|
}
|
|
if (maxlen >4) {
|
|
let sdate = getDnumber('h','M')
|
|
getD('M', sdate[0]!, sdate[1]!)
|
|
}
|
|
if (maxlen >5) {
|
|
let sdate = getDnumber('M','s')
|
|
getD('s', sdate[0]!, sdate[1]!)
|
|
}
|
|
|
|
|
|
return [years, months, days, hours, minutes, seconds].slice(0, this.getNowTypeLenIndex()) as PICKER_ITEM_INFO[][];
|
|
},
|
|
getRangNumber(start : number, end : number) : string[] {
|
|
let iar = [] as string[];
|
|
for (let i = start; i <= end; i++) {
|
|
iar.push(i.toString());
|
|
}
|
|
return iar;
|
|
},
|
|
stringArValuCoverToString() : string {
|
|
if (this.nowValue.length != 6) return "";
|
|
return this.fillNumber(this.nowValue[0][0]) + "-" + this.fillNumber((parseInt(this.nowValue[1][0]) + 1).toString())
|
|
+ "-" + this.fillNumber(this.nowValue[2][0])
|
|
+ " " + this.fillNumber(this.nowValue[3][0]) + ":"
|
|
+ this.fillNumber(this.nowValue[4][0]) + ":"
|
|
+ this.fillNumber(this.nowValue[5][0])
|
|
|
|
},
|
|
fillNumber(n : string) : string {
|
|
if (n.length > 1) return n;
|
|
return "0" + n
|
|
},
|
|
formatTimeDate() : string {
|
|
if (this.nowValue.length != 6) return "";
|
|
let sp = this.format;
|
|
sp = sp.replace(/YYYY/g, this.fillNumber(this.nowValue[0][0]))
|
|
sp = sp.replace(/MM/g, this.fillNumber((parseInt(this.nowValue[1][0]) + 1).toString()))
|
|
sp = sp.replace(/DD/g, this.fillNumber(this.nowValue[2][0]))
|
|
sp = sp.replace(/hh/g, this.fillNumber(this.nowValue[3][0]))
|
|
sp = sp.replace(/mm/g, this.fillNumber(this.nowValue[4][0]))
|
|
sp = sp.replace(/ss/g, this.fillNumber(this.nowValue[5][0]))
|
|
return sp;
|
|
},
|
|
openShow() {
|
|
if(this._disabled) return;
|
|
this.show = true;
|
|
/**
|
|
* 变量控制打开状态
|
|
* 等同v-model:model-show
|
|
*/
|
|
this.$emit('update:modelShow', true)
|
|
setPagePullRefresh(false)
|
|
},
|
|
onClose() {
|
|
/**
|
|
* 变量控制打开状态
|
|
* 等同v-model:model-show
|
|
*/
|
|
this.$emit('update:modelShow', false)
|
|
this.cancelResetDataCol()
|
|
setPagePullRefresh(this.nowPull)
|
|
},
|
|
mchange(ids : string[], index : number) {
|
|
this.nowValue.splice(index, 1, ids)
|
|
this.nowValueStr = this.stringArValuCoverToString()
|
|
/**
|
|
* 滑动变换时触发
|
|
* @param {string} date 当前选中时间
|
|
*/
|
|
this.$emit('change', this.nowValueStr.split(" ")[1])
|
|
|
|
this.dateList = this.getTimeTreeByStartAndEnd(this._start_date, this._end_date)
|
|
},
|
|
|
|
onCancel() {
|
|
this.$emit('cancel')
|
|
this.cancelResetDataCol()
|
|
},
|
|
cancelResetDataCol() {
|
|
let stp = this.getRangByDateTime(new xDate(this.default_time_date + this.modelValue))
|
|
this.nowValue = stp.value;
|
|
this.nowValueStr = stp.str;
|
|
this.dateList = this.getTimeTreeByStartAndEnd(this._start_date, this._end_date)
|
|
},
|
|
|
|
onConfirm() {
|
|
this.nowValueStr = this.stringArValuCoverToString()
|
|
/**
|
|
* 点击确认时同步。等同v-model
|
|
*/
|
|
this.$emit('update:modelValue', this.nowValueStr.split(" ")[1]);
|
|
|
|
/**
|
|
* 经格式化后的值。等同v-model:model-str
|
|
*/
|
|
this.$emit('update:modelStr', this.formatTimeDate());
|
|
this.$emit('confirm', this.nowValueStr.split(" ")[1]);
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
<template>
|
|
<view @click="openShow">
|
|
<!--
|
|
@slot 插槽,默认触发打开选择器。你的默认布局可以放置在这里。
|
|
-->
|
|
<slot></slot>
|
|
</view>
|
|
<x-drawer
|
|
:lazy="true"
|
|
:cancel-text="_cancelText"
|
|
:confirm-text="_confirmText"
|
|
:zIndex="zIndex"
|
|
:widthCoverCenter="widthCoverCenter"
|
|
:disabledScroll="true"
|
|
:title="_title"
|
|
@close="onClose"
|
|
@confirm="onConfirm"
|
|
@cancel="onCancel"
|
|
:showFooter="true"
|
|
v-model:show="show"
|
|
:show-close="showClose"
|
|
size="410px">
|
|
|
|
<view class="xPickerDateWrap">
|
|
<x-picker-view v-if="show"
|
|
:cellUnits="[_cellUnits[index+3]]"
|
|
v-for="(item,index) in dateList.slice(3)"
|
|
:key="index+3"
|
|
@change="mchange($event as string[],index+3)" :model-value="nowValue[index+3]" style="flex: 1;"
|
|
:list="item"></x-picker-view>
|
|
</view>
|
|
</x-drawer>
|
|
</template>
|
|
<style scoped>
|
|
.xPickerDateWrap {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
}
|
|
</style> |