d8f68c9ec2
refactor(api): 移除冗余API路径前缀 style(websocket): 移除重复的日志打印 feat(label): 新增原料标签组件并替换生产标签 refactor(lines): 移除废弃的流程图组件和配置 feat(utils): 新增日期范围工具函数 feat(statistic): 集成日期筛选和图表分析功能
248 lines
8.3 KiB
Vue
248 lines
8.3 KiB
Vue
<template>
|
||
<div class="date-filter-view" style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap;">
|
||
<!-- 视图模式选择（Vue2 v-model 绑定value） -->
|
||
<el-select
|
||
v-model="innerViewMode"
|
||
placeholder="选择视图模式"
|
||
style="width: 120px;"
|
||
>
|
||
<el-option label="日视图" value="day"></el-option>
|
||
<el-option label="月视图" value="month"></el-option>
|
||
<el-option label="年视图" value="year"></el-option>
|
||
</el-select>
|
||
|
||
<!-- 日视图：日期范围选择 -->
|
||
<div v-if="innerViewMode === 'day'">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
format="yyyy-MM-dd"
|
||
value-format="yyyy-MM-dd"
|
||
@change="handleDateRangeChange"
|
||
style="width: 350px;"
|
||
></el-date-picker>
|
||
</div>
|
||
|
||
<!-- 月视图：月份范围选择 -->
|
||
<div v-if="innerViewMode === 'month'">
|
||
<el-date-picker
|
||
v-model="monthRange"
|
||
type="monthrange"
|
||
range-separator="至"
|
||
start-placeholder="开始月份"
|
||
end-placeholder="结束月份"
|
||
format="yyyy-MM"
|
||
value-format="yyyy-MM"
|
||
@change="handleMonthRangeChange"
|
||
style="width: 350px;"
|
||
></el-date-picker>
|
||
</div>
|
||
|
||
<!-- 年视图：年份选择 -->
|
||
<div v-if="innerViewMode === 'year'">
|
||
<el-date-picker
|
||
v-model="selectedYear"
|
||
type="year"
|
||
placeholder="选择年份"
|
||
format="yyyy"
|
||
value-format="yyyy"
|
||
@change="handleYearChange"
|
||
style="width: 200px;"
|
||
></el-date-picker>
|
||
</div>
|
||
|
||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 导入日期工具函数（Vue2 导入语法不变）
|
||
import { getCurrentMonthFirstDayOrToday } from '../utils/monent'; // 请根据实际路径调整
|
||
|
||
export default {
|
||
name: 'DateFilterView',
|
||
// Vue2 Props 定义（v-model 对应 value，而非 modelValue）
|
||
props: {
|
||
// Vue2 v-model 绑定的视图模式（day/month/year）
|
||
value: {
|
||
type: String,
|
||
default: 'day',
|
||
validator: (val) => ['day', 'month', 'year'].includes(val)
|
||
},
|
||
// .sync 双向绑定的开始时间
|
||
startTime: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// .sync 双向绑定的结束时间
|
||
endTime: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 内部视图模式（避免直接修改props）
|
||
innerViewMode: this.value,
|
||
dateRange: [], // 日视图日期范围
|
||
monthRange: [], // 月视图月份范围
|
||
selectedYear: '' // 年视图选中年份
|
||
};
|
||
},
|
||
watch: {
|
||
// Vue2 监听外部 v-model 变化（监听 value）
|
||
value(newVal) {
|
||
this.innerViewMode = newVal;
|
||
// 视图变化时初始化对应默认值
|
||
this.initViewDefault(newVal);
|
||
},
|
||
// 监听内部视图模式变化，触发外部事件
|
||
innerViewMode(newVal) {
|
||
// Vue2 v-model 更新事件为 input（而非 update:modelValue）
|
||
this.$emit('input', newVal);
|
||
// 触发视图切换自定义事件
|
||
this.$emit('view-change', newVal);
|
||
// 清空其他视图的选择器
|
||
this.clearOtherViewData(newVal);
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化默认视图的日期值
|
||
this.initViewDefault(this.innerViewMode);
|
||
// 如果外部传入了startTime/endTime，同步到内部选择器
|
||
this.syncExternalDateToInner();
|
||
},
|
||
methods: {
|
||
// 初始化对应视图的默认日期
|
||
initViewDefault(viewMode) {
|
||
if (viewMode === 'day') {
|
||
this.initDayViewDefault();
|
||
} else if (viewMode === 'month') {
|
||
this.initMonthViewDefault();
|
||
} else if (viewMode === 'year') {
|
||
this.initYearViewDefault();
|
||
}
|
||
},
|
||
// 清空非当前视图的选择器数据
|
||
clearOtherViewData(currentView) {
|
||
if (currentView !== 'day') this.dateRange = [];
|
||
if (currentView !== 'month') this.monthRange = [];
|
||
if (currentView !== 'year') this.selectedYear = '';
|
||
},
|
||
// 同步外部传入的startTime/endTime到内部选择器
|
||
syncExternalDateToInner() {
|
||
if (!this.startTime || !this.endTime) return;
|
||
|
||
if (this.innerViewMode === 'day') {
|
||
this.dateRange = [this.startTime, this.endTime];
|
||
} else if (this.innerViewMode === 'month') {
|
||
// 从startTime/endTime提取月份（yyyy-MM）
|
||
const startMonth = this.startTime.slice(0, 7);
|
||
const endMonth = this.endTime.slice(0, 7);
|
||
this.monthRange = [startMonth, endMonth];
|
||
} else if (this.innerViewMode === 'year') {
|
||
// 从startTime提取年份（yyyy）
|
||
this.selectedYear = this.startTime.slice(0, 4);
|
||
}
|
||
},
|
||
// 初始化日视图默认值：当前月第一天-今天
|
||
initDayViewDefault() {
|
||
if (this.startTime && this.endTime) {
|
||
this.dateRange = [this.startTime, this.endTime];
|
||
return;
|
||
}
|
||
// 调用工具函数获取默认值
|
||
const [firstDay, today] = getCurrentMonthFirstDayOrToday();
|
||
this.dateRange = [firstDay, today];
|
||
// 更新外部startTime/endTime（Vue2 .sync 触发 update:xxx）
|
||
this.updateStartAndEndTime(firstDay, today);
|
||
},
|
||
// 初始化月视图默认值：当前月-当前月
|
||
initMonthViewDefault() {
|
||
if (this.startTime && this.endTime) {
|
||
const startMonth = this.startTime.slice(0, 7);
|
||
const endMonth = this.endTime.slice(0, 7);
|
||
this.monthRange = [startMonth, endMonth];
|
||
return;
|
||
}
|
||
const now = new Date();
|
||
const currentMonth = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}`;
|
||
this.monthRange = [currentMonth, currentMonth];
|
||
// 转换为该月第一天和最后一天
|
||
const startDate = `${currentMonth}-01`;
|
||
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
|
||
const endDate = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`;
|
||
this.updateStartAndEndTime(startDate, endDate);
|
||
},
|
||
// 初始化年视图默认值：当前年
|
||
initYearViewDefault() {
|
||
if (this.startTime && this.endTime) {
|
||
this.selectedYear = this.startTime.slice(0, 4);
|
||
return;
|
||
}
|
||
const now = new Date();
|
||
const currentYear = now.getFullYear().toString();
|
||
this.selectedYear = currentYear;
|
||
// 转换为该年1月1日和12月31日
|
||
const startDate = `${currentYear}-01-01`;
|
||
const endDate = `${currentYear}-12-31`;
|
||
this.updateStartAndEndTime(startDate, endDate);
|
||
},
|
||
// 更新开始/结束时间（Vue2 .sync 触发 update:startTime/update:endTime）
|
||
updateStartAndEndTime(start, end) {
|
||
this.$emit('update:startTime', start);
|
||
this.$emit('update:endTime', end);
|
||
// 触发日期变更自定义事件
|
||
this.$emit('date-change', { startTime: start, endTime: end });
|
||
},
|
||
// 日视图日期范围变化处理
|
||
handleDateRangeChange(val) {
|
||
if (val && val.length === 2) {
|
||
this.updateStartAndEndTime(val[0], val[1]);
|
||
} else {
|
||
this.updateStartAndEndTime(undefined, undefined);
|
||
}
|
||
},
|
||
// 月视图月份范围变化处理
|
||
handleMonthRangeChange(val) {
|
||
if (val && val.length === 2) {
|
||
// 开始月份转该月第一天
|
||
const startDate = `${val[0]}-01`;
|
||
// 结束月份转该月最后一天
|
||
const [endYear, endMonth] = val[1].split('-');
|
||
const lastDay = new Date(endYear, endMonth, 0);
|
||
const endDate = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`;
|
||
this.updateStartAndEndTime(startDate, endDate);
|
||
}
|
||
},
|
||
// 年视图年份变化处理
|
||
handleYearChange(val) {
|
||
if (val) {
|
||
const startDate = `${val}-01-01`;
|
||
const endDate = `${val}-12-31`;
|
||
this.updateStartAndEndTime(startDate, endDate);
|
||
}
|
||
},
|
||
// 查询按钮点击事件
|
||
handleQuery() {
|
||
this.$emit('query', {
|
||
viewMode: this.innerViewMode,
|
||
startTime: this.startTime,
|
||
endTime: this.endTime
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.date-filter-view {
|
||
background: #fff;
|
||
padding: 15px 20px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
|
||
}
|
||
</style> |