初始提交

2026-01-04 11:09:06 +08:00
commit 8fa31df250
1326 changed files with 213907 additions and 0 deletions
--- a/components/Jnpf/DateRange/index.vue
+++ b/components/Jnpf/DateRange/index.vue
@@ -0,0 +1,141 @@
+<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>