141 lines
3.7 KiB
Vue
141 lines
3.7 KiB
Vue
<template>
|
|
<view class="jnpf-date-range">
|
|
<JnpfDatePicker v-if="type=='date'" v-model="startValue" placeholder="开始日期" :disabled="disabled"
|
|
inputType="text" scene="searchList" :format="format" @change="change" :defaultTime="startDefaultTime"
|
|
selectType='start' :key="key" ref="dateTime" />
|
|
<JnpfTimePicker v-else v-model="startValue" placeholder="开始时间" :disabled="disabled" inputType="text"
|
|
scene="searchList" :format="format" @change="change" :defaultTime="startDefaultTime" selectType='start'
|
|
:key="key" ref="dateTime" />
|
|
|
|
<view class="u-p-l-10 u-p-r-10">至</view>
|
|
|
|
<JnpfDatePicker v-if="type=='date'" v-model="endValue" placeholder="结束日期" :disabled="disabled" inputType="text"
|
|
scene="searchList" :format="format" @change="change" :defaultTime="endDefaultTime" selectType='end'
|
|
:key="key+1" ref="dateTime" />
|
|
<JnpfTimePicker v-else v-model="endValue" placeholder="结束时间" :disabled="disabled" inputType="text"
|
|
scene="searchList" :format="format" @change="change" :defaultTime="endDefaultTime" selectType='end'
|
|
:key="key+1" ref="dateTime" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
const DEFAULT_FORMAT = 'yyyy-mm-dd hh:MM:ss';
|
|
export default {
|
|
name: 'jnpf-date-range',
|
|
props: {
|
|
modelValue: {
|
|
type: [Array, String],
|
|
default: () => []
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择日期范围'
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
format: {
|
|
type: String,
|
|
default: 'yyyy-MM-dd HH:mm:ss'
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'date'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
startDefaultTime: '',
|
|
endDefaultTime: '',
|
|
startValue: '',
|
|
endValue: '',
|
|
datetimerange: [],
|
|
datetimerangeObj: {},
|
|
key: +new Date()
|
|
}
|
|
},
|
|
watch: {
|
|
modelValue: {
|
|
handler(val) {
|
|
if (Array.isArray(val) && val.length) {
|
|
// 当 modelValue 是有效数组时，更新本地状态
|
|
this.startValue = val[0];
|
|
this.endValue = val[1];
|
|
this.$set(this.datetimerangeObj, 'start', val[0]);
|
|
this.$set(this.datetimerangeObj, 'end', val[1]);
|
|
} else {
|
|
// 清空本地状态
|
|
this.startValue = '';
|
|
this.endValue = '';
|
|
this.datetimerangeObj = {};
|
|
this.datetimerange = [];
|
|
// 仅当 val 不是空数组时，才触发更新
|
|
if (!Array.isArray(val) || val.length !== 0) {
|
|
this.$emit('update:modelValue', []);
|
|
}
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
change(e, type) {
|
|
this.datetimerange = [];
|
|
this.$set(this.datetimerangeObj, type, e || '');
|
|
|
|
// 始终使用开始时间作为参考时间
|
|
const startValue = this.datetimerangeObj.start;
|
|
this.setDefaultTime(startValue);
|
|
|
|
this.handleValue();
|
|
},
|
|
setDefaultTime(value) {
|
|
this.$refs.dateTime.defaultTime = this.type === 'time' ? value : this.$u.timeFormat(value, DEFAULT_FORMAT);
|
|
},
|
|
handleValue() {
|
|
const {
|
|
start,
|
|
end
|
|
} = this.datetimerangeObj;
|
|
this.datetimerange = [start, end];
|
|
|
|
if (this.shouldValidate()) {
|
|
if (start > end) {
|
|
this.handleInvalidRange();
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.emitUpdate();
|
|
},
|
|
shouldValidate() {
|
|
return this.datetimerangeObj.start && this.datetimerangeObj.end;
|
|
},
|
|
|
|
handleInvalidRange() {
|
|
this.$u.toast('开始时间不能大于结束时间');
|
|
this.clearValues();
|
|
},
|
|
|
|
clearValues() {
|
|
setTimeout(() => {
|
|
this.startValue = "";
|
|
this.endValue = "";
|
|
this.datetimerangeObj = {};
|
|
this.datetimerange = [];
|
|
this.emitUpdate();
|
|
this.refreshComponent();
|
|
}, 500);
|
|
},
|
|
|
|
emitUpdate() {
|
|
this.$emit('update:modelValue', this.datetimerange);
|
|
},
|
|
|
|
refreshComponent() {
|
|
this.key = +new Date();
|
|
}
|
|
}
|
|
}
|
|
</script> |