+
@@ -12,26 +15,10 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
diff --git a/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.js b/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.js
index af3f645eb..85ada18d1 100644
--- a/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.js
+++ b/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.js
@@ -1,19 +1,17 @@
/** @odoo-module **/
-
-import { Component } from "@odoo/owl";
-import { Domain } from "@web/core/domain";
-import {DateFilter} from "../fields_filter/date_filter/date_filter";
+import { Component, useState } from "@odoo/owl";
+import { DateTimeInput } from "@web/core/datetime/datetime_input";
+import { serializeDateTime, serializeDate, deserializeDate, deserializeDateTime } from "@web/core/l10n/dates";
// 选择日期筛选,用于自己选择不同时间字段进行筛选
export class SelectDateFilter extends Component {
setup() {
super.setup();
- // 默认选择第一个时间字段
- this.dateField = this.props.dateFields[0];
- // 开始时间
- this.startDate = undefined;
- // 结束时间
- this.endDate = undefined;
+ this.state = useState({
+ dateField: this.env.searchModel.headerSearchInfo?.DateFilter?.fieldName || this.props.dateFields[0],
+ startDate: this.env.searchModel.headerSearchInfo?.DateFilter?.startDate,
+ endDate: this.env.searchModel.headerSearchInfo?.DateFilter?.endDate,
+ })
}
get dateFields() {
@@ -25,11 +23,29 @@ export class SelectDateFilter extends Component {
});
}
+ get dateFieldType() {
+ return this.env.searchModel.searchViewFields[this.state.dateField].type;
+ }
+
+ get dateFrom() {
+ const dateValue = this.state.startDate;
+ return dateValue ? (this.dateFieldType === "datetime" ? deserializeDateTime(dateValue) : deserializeDate(dateValue)) : undefined;
+ }
+
+ get dateTo() {
+ const dateValue = this.state.endDate;
+ return dateValue ? (this.dateFieldType === "datetime" ? deserializeDateTime(dateValue) : deserializeDate(dateValue)) : undefined;
+ }
+
// 设置筛选字段的值
- setActiveValues(ev) {
- const value = ev.target.value;
- if (ev.target.id === "select_start_date") { this.startDate = value}
- if (ev.target.id === "select_end_date"){ this.endDate = value}
+ setActiveValues(dateValue, type) {
+ const value = dateValue ? (this.dateFieldType === "datetime" ? serializeDateTime(dateValue) : serializeDate(dateValue)) : undefined;
+ if (type === "startDate") {
+ this.state.startDate = value
+ }
+ if (type === "endDate") {
+ this.state.endDate = value
+ }
}
get domain(){
@@ -37,49 +53,121 @@ export class SelectDateFilter extends Component {
// 时间筛选应该返回类似这样的domain
// ["&", ("create_date", ">=", "2024-05-22 16:00:00"), ("create_date", "<=", "2024-05-23 15:59:59")]
const domain = [];
- if (this.startDate && this.endDate) {domain.push("&")}
- if (this.startDate){domain.push([this.dateField, ">=", this.startDate])}
- if (this.endDate){domain.push([this.dateField, "<=", this.endDate])}
+ if (this.state.startDate && this.state.endDate) {domain.push("&")}
+ if (this.state.startDate){domain.push([this.state.dateField, ">=", this.state.startDate])}
+ if (this.state.endDate){domain.push([this.state.dateField, "<=", this.state.endDate])}
return domain.length === 0? []: domain
}
- // 选择时间字段变化
+ applySelectDateFilter() {
+ this.env.searchModel.setSelectDateFilter(
+ this.state.dateField,
+ this.state.startDate,
+ this.state.endDate,
+ this.domain
+ );
+ this.env.searchModel.applyHeaderFilters();
+ }
+
dateFieldOnchange(ev){
- this.dateField = ev.target.value;
- this.env.searchModel.setSelectDateFilter(this.dateField, this.domain);
- this.env.searchModel.applyHeaderFilters();
+ this.state.dateField = ev.target.value;
+ this.state.startDate = undefined;
+ this.state.endDate = undefined;
+ this.applySelectDateFilter()
}
- // 日期变化
- dateOnchange(ev) {
- this.setActiveValues(ev);
- this.env.searchModel.setSelectDateFilter(this.dateField, this.domain);
- this.env.searchModel.applyHeaderFilters();
+ startDateOnchange (startDate) {
+ this.setActiveValues(startDate, "startDate");
+ this.applySelectDateFilter()
}
- setDateRange(months) {
- const today = new Date();
- const startDate = new Date();
- startDate.setMonth(startDate.getMonth() - months);
- this.startDate = startDate.toISOString().split('T')[0];
- this.endDate = today.toISOString().split('T')[0];
- this.env.searchModel.setSelectDateFilter(this.dateField, this.domain);
- this.env.searchModel.applyHeaderFilters();
+ endDateOnchange (endDate) {
+ this.setActiveValues(endDate, "endDate");
+ this.applySelectDateFilter()
+ }
+
+ setDateRange(direction) {
+ // 只允许 next 或 previous
+ if (!["next", "previous"].includes(direction)) {
+ return;
+ }
+ // 月份偏移量
+ const monthOffset = direction === "next" ? 1 : -1;
+ // 当前时间(作为默认基准)
+ const now = luxon.DateTime.now();
+ // 反序列化开始时间
+ const start = this.state.startDate
+ ? (this.dateFieldType === "datetime"
+ ? deserializeDateTime(this.state.startDate)
+ : deserializeDate(this.state.startDate))
+ : null;
+ // 反序列化结束时间
+ const end = this.state.endDate
+ ? (this.dateFieldType === "datetime"
+ ? deserializeDateTime(this.state.endDate)
+ : deserializeDate(this.state.endDate))
+ : null;
+ // 情况一:开始和结束时间都不存在,默认使用当前月
+ if (!start && !end) {
+ const base = now.plus({ months: monthOffset });
+ // 当月开始
+ const monthStart = base.startOf("month");
+ // 当月结束
+ const monthEnd = base.endOf("month");
+ this.state.startDate = this.dateFieldType === "datetime"
+ ? serializeDateTime(monthStart)
+ : serializeDate(monthStart);
+
+ this.state.endDate = this.dateFieldType === "datetime"
+ ? serializeDateTime(monthEnd)
+ : serializeDate(monthEnd);
+ }
+ // 情况二:只存在开始时间
+ else if (start && !end) {
+ const newStart = start.plus({ months: monthOffset });
+
+ this.state.startDate = this.dateFieldType === "datetime"
+ ? serializeDateTime(newStart)
+ : serializeDate(newStart);
+ }
+ // 情况三:只存在结束时间
+ else if (!start && end) {
+ const newEnd = end.plus({ months: monthOffset });
+
+ this.state.endDate = this.dateFieldType === "datetime"
+ ? serializeDateTime(newEnd)
+ : serializeDate(newEnd);
+ }
+ // 情况四:开始和结束时间都存在
+ else {
+ const newStart = start.plus({ months: monthOffset });
+ const newEnd = end.plus({ months: monthOffset });
+ this.state.startDate = this.dateFieldType === "datetime"
+ ? serializeDateTime(newStart)
+ : serializeDate(newStart);
+
+ this.state.endDate = this.dateFieldType === "datetime"
+ ? serializeDateTime(newEnd)
+ : serializeDate(newEnd);
+ }
+ this.applySelectDateFilter()
}
// 点击重置按钮
resetFilter() {
- this.dateField = this.props.dateFields[0];
- this.startDate = undefined;
- this.endDate = undefined;
+ this.state.dateField = this.props.dateFields[0];
+ this.state.startDate = undefined;
+ this.state.endDate = undefined;
// 重新渲染
- this.env.searchModel.setSelectDateFilter(this.dateField, this.domain);
- this.env.searchModel.applyHeaderFilters();
+ this.applySelectDateFilter()
}
}
SelectDateFilter.template = "header_search_panel.SelectDateFilter";
+SelectDateFilter.components = {
+ DateTimeInput,
+};
SelectDateFilter.props = {
// 时间字段列表
dateFields: { type: Array, required: true },
diff --git a/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.xml b/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.xml
index ff45da0e7..4b8fcfbf7 100644
--- a/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.xml
+++ b/header_search_panel/static/src/search/header_search/components/select_date_filter/select_date_filter.xml
@@ -5,10 +5,10 @@