|
|
@@ -37,15 +37,43 @@
|
|
|
|
|
|
<!-- 日期选择 -->
|
|
|
<a-form-item v-if="formModel.rangeType === 'start'" label="过滤条件">
|
|
|
- <a-date-picker v-model="formModel.startDate" style="width: 100%" />
|
|
|
+ <a-date-picker
|
|
|
+ v-model="formModel.startDate"
|
|
|
+ :showTime="props.filter?.format_str === 'datetime'"
|
|
|
+ :type="props.filter?.format_str === 'datetime' ? 'datetime' : 'date'"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ :disabledTime="props.filter?.format_str === 'datetime' ? disabledTime : undefined"
|
|
|
+ :show-now-btn="false"
|
|
|
+ class="date-picker-custom"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item v-if="formModel.rangeType === 'end'" label="过滤条件">
|
|
|
- <a-date-picker v-model="formModel.endDate" style="width: 100%" />
|
|
|
+ <a-date-picker
|
|
|
+ v-model="formModel.endDate"
|
|
|
+ :showTime="props.filter?.format_str === 'datetime'"
|
|
|
+ :type="props.filter?.format_str === 'datetime' ? 'datetime' : 'date'"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ :disabledTime="props.filter?.format_str === 'datetime' ? disabledTime : undefined"
|
|
|
+ :show-now-btn="false"
|
|
|
+ class="date-picker-custom"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item v-if="formModel.rangeType === 'between'" label="过滤条件">
|
|
|
- <a-range-picker v-model="formModel.dateRange" style="width: 100%" />
|
|
|
+ <a-range-picker
|
|
|
+ v-model="formModel.dateRange"
|
|
|
+ :showTime="props.filter?.format_str === 'datetime'"
|
|
|
+ :type="props.filter?.format_str === 'datetime' ? 'datetime' : 'date'"
|
|
|
+ :disabledDate="disabledDate"
|
|
|
+ :disabledTime="props.filter?.format_str === 'datetime' ? disabledRangeTime : undefined"
|
|
|
+ :timePickerProps="{ hideDisabledOptions: true }"
|
|
|
+ :show-now-btn="false"
|
|
|
+ class="date-picker-custom"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
@@ -86,6 +114,141 @@ const formModel = ref({
|
|
|
is_aggregatable: 1
|
|
|
});
|
|
|
|
|
|
+// 禁用日期函数
|
|
|
+const disabledDate = (current) => {
|
|
|
+ const timeLimit = props.filter?.time_limit;
|
|
|
+ const now = new Date();
|
|
|
+ const yesterday = new Date(now);
|
|
|
+ yesterday.setDate(yesterday.getDate() - 1);
|
|
|
+
|
|
|
+ // 重置时间部分，只比较日期
|
|
|
+ const currentDate = new Date(current);
|
|
|
+ currentDate.setHours(0, 0, 0, 0);
|
|
|
+ const todayDate = new Date(now);
|
|
|
+ todayDate.setHours(0, 0, 0, 0);
|
|
|
+ const yesterdayDate = new Date(yesterday);
|
|
|
+ yesterdayDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ switch (timeLimit) {
|
|
|
+ case 'limit_to_day_start':
|
|
|
+ case 'limit_to_day_end':
|
|
|
+ // 最多选到今天
|
|
|
+ return currentDate > todayDate;
|
|
|
+ case 'limit_to_yesterday_start':
|
|
|
+ case 'limit_to_yesterday_end':
|
|
|
+ // 最多选到昨天
|
|
|
+ return currentDate > yesterdayDate;
|
|
|
+ default:
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 禁用时间函数（单个日期选择器）
|
|
|
+const disabledTime = (date) => {
|
|
|
+ const timeLimit = props.filter?.time_limit;
|
|
|
+ const now = new Date();
|
|
|
+
|
|
|
+ // 检查当前选择的日期是否是限制的最后一天
|
|
|
+ const selectedDate = new Date(date);
|
|
|
+ selectedDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ const todayDate = new Date(now);
|
|
|
+ todayDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ const yesterdayDate = new Date(now);
|
|
|
+ yesterdayDate.setDate(yesterdayDate.getDate() - 1);
|
|
|
+ yesterdayDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ // 检查是否是限制的最后一天
|
|
|
+ const isLastDay =
|
|
|
+ ((timeLimit === 'limit_to_day_start' || timeLimit === 'limit_to_day_end') &&
|
|
|
+ selectedDate.getTime() === todayDate.getTime()) ||
|
|
|
+ ((timeLimit === 'limit_to_yesterday_start' || timeLimit === 'limit_to_yesterday_end') &&
|
|
|
+ selectedDate.getTime() === yesterdayDate.getTime());
|
|
|
+
|
|
|
+ if (!isLastDay) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+
|
|
|
+ switch (timeLimit) {
|
|
|
+ case 'limit_to_day_start':
|
|
|
+ // 最多选到今天的 00：00：00
|
|
|
+ return {
|
|
|
+ disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour > 0),
|
|
|
+ disabledMinutes: () => Array.from({ length: 60 }, (_, i) => i).filter((minute) => minute > 0),
|
|
|
+ disabledSeconds: () => Array.from({ length: 60 }, (_, i) => i).filter((second) => second > 0)
|
|
|
+ };
|
|
|
+ case 'limit_to_yesterday_start':
|
|
|
+ // 最多选到昨天的 00：00：00
|
|
|
+ return {
|
|
|
+ disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour > 0),
|
|
|
+ disabledMinutes: () => Array.from({ length: 60 }, (_, i) => i).filter((minute) => minute > 0),
|
|
|
+ disabledSeconds: () => Array.from({ length: 60 }, (_, i) => i).filter((second) => second > 0)
|
|
|
+ };
|
|
|
+ case 'limit_to_day_end':
|
|
|
+ // 最多选到今天的 23：59：59
|
|
|
+ return {};
|
|
|
+ case 'limit_to_yesterday_end':
|
|
|
+ // 最多选到昨天的 23：59：59
|
|
|
+ return {};
|
|
|
+ default:
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 禁用时间函数（范围选择器）
|
|
|
+const disabledRangeTime = (date, type) => {
|
|
|
+ const timeLimit = props.filter?.time_limit;
|
|
|
+ const now = new Date();
|
|
|
+
|
|
|
+ // 检查当前选择的日期是否是限制的最后一天
|
|
|
+ const selectedDate = new Date(date);
|
|
|
+ selectedDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ const todayDate = new Date(now);
|
|
|
+ todayDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ const yesterdayDate = new Date(now);
|
|
|
+ yesterdayDate.setDate(yesterdayDate.getDate() - 1);
|
|
|
+ yesterdayDate.setHours(0, 0, 0, 0);
|
|
|
+
|
|
|
+ // 检查是否是限制的最后一天
|
|
|
+ const isLastDay =
|
|
|
+ ((timeLimit === 'limit_to_day_start' || timeLimit === 'limit_to_day_end') &&
|
|
|
+ selectedDate.getTime() === todayDate.getTime()) ||
|
|
|
+ ((timeLimit === 'limit_to_yesterday_start' || timeLimit === 'limit_to_yesterday_end') &&
|
|
|
+ selectedDate.getTime() === yesterdayDate.getTime());
|
|
|
+
|
|
|
+ if (!isLastDay) {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+
|
|
|
+ switch (timeLimit) {
|
|
|
+ case 'limit_to_day_start':
|
|
|
+ // 最多选到今天的 00：00：00
|
|
|
+ return {
|
|
|
+ disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour > 0),
|
|
|
+ disabledMinutes: () => Array.from({ length: 60 }, (_, i) => i).filter((minute) => minute > 0),
|
|
|
+ disabledSeconds: () => Array.from({ length: 60 }, (_, i) => i).filter((second) => second > 0)
|
|
|
+ };
|
|
|
+ case 'limit_to_yesterday_start':
|
|
|
+ // 最多选到昨天的 00：00：00
|
|
|
+ return {
|
|
|
+ disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour > 0),
|
|
|
+ disabledMinutes: () => Array.from({ length: 60 }, (_, i) => i).filter((minute) => minute > 0),
|
|
|
+ disabledSeconds: () => Array.from({ length: 60 }, (_, i) => i).filter((second) => second > 0)
|
|
|
+ };
|
|
|
+ case 'limit_to_day_end':
|
|
|
+ // 最多选到今天的 23：59：59
|
|
|
+ return {};
|
|
|
+ case 'limit_to_yesterday_end':
|
|
|
+ // 最多选到昨天的 23：59：59
|
|
|
+ return {};
|
|
|
+ default:
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
// 2. 从 props 获取配置（安全）
|
|
|
const templateConfig = computed(() => {
|
|
|
return Array.isArray(props.filter?.template_config) ? props.filter.template_config : [];
|
|
|
@@ -98,6 +261,7 @@ const rangeTypeConfig = computed(() => {
|
|
|
// 3. 【关键】初始化表单（避免在 reactive 中直接用 computed）
|
|
|
const initForm = () => {
|
|
|
const f = props.filter || {};
|
|
|
+ console.log('initForm', f);
|
|
|
|
|
|
// 字段基础信息
|
|
|
formModel.value.field_name = f.field_name || '字段名称';
|
|
|
@@ -242,3 +406,9 @@ const handleCancel = () => {
|
|
|
background-color: var(--primary-default);
|
|
|
}
|
|
|
</style>
|
|
|
+<style>
|
|
|
+.arco-picker-cell-selected .arco-picker-date-value {
|
|
|
+ color: white;
|
|
|
+ background-color: var(--primary-default);
|
|
|
+}
|
|
|
+</style>
|
韩洋