renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

时间的切换

Browse Source
This commit is contained in:
lq
2025-08-29 16:39:14 +08:00
parent c082aa926c
commit 37ac8662ec
2 changed files with 98 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/utils/DateUtils.ts
View File

@ -33,6 +33,14 @@ class DateUtils {
};
}
static MonthStrToDate(dateStr: string): Date {
const year = parseInt(dateStr.split('年')[0]);
const month = parseInt(dateStr.split('年')[1].split('月')[0]) - 1; // 月份从0开始
const date = new Date(year, month, 1);
return date;
}
/**
* 获取指定年份和月的范围
* @param year 年份

147
src/views/property-marketing/assignment-management/index.vue
View File

@ -15,6 +15,7 @@
v-else-if="choseType === '周'"
@change="onChangeWeek"
v-model="weekModel"
format="YYYY年MM月DD日"
/>
<a-month-picker
class="w-188px size-14px"
@ -199,7 +200,8 @@
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
import type { TableColumnData } from '@arco-design/web-vue';
import { getTaskSchedules } from '@/api/all/assignment-management';
import { fetchAccountOperators } from '@/api/all/propertyMarketing';
@ -213,17 +215,16 @@ import icon7 from '@/assets/img/platform/icon-ks.png';
import icon8 from '@/assets/img/platform/icon-bilibili.png';
import DateUtils from '@/utils/DateUtils';
const choseType = ref('周');
const choseType = ref('日');
const dayModel = ref(new Date());
const weekModel = ref(new Date());
const monthModel = ref(new Date());
const currentDateRange = reactive({
start: '',
end: '',
});
const weekModel = ref(DateUtils.formatDate(new Date()));
const dayModel = ref(DateUtils.formatDate(new Date()));
const monthModel = ref(DateUtils.formatDate(new Date()));
const columns = ref([]);
const data = ref([]);
const columns = ref<TableColumnData[]>([]);
const data = ref<any[]>([]);
const operators = ref([]);
const platformOptions = ref([
{ value: 0, label: '抖音' },
@ -250,7 +251,7 @@ const query = reactive({
execution_time: [] as string[],
});
const handleMore = (record: any[], column: number) => {
const handleMore = (record: any, column: any) => {
console.log('record', record);
console.log('column', column);
console.log('data', record[column.dataIndex]);
@ -259,12 +260,12 @@ const handleMore = (record: any[], column: number) => {
// 计算当前日期范围内的所有日期，统一返回 number 数组
const currentDateHeaders = computed(() => {
if (choseType.value === '周') {
const specificWeek = DateUtils.getWeekDaysByDate(new Date(currentDateRange.start || new Date().toString()), 0);
return specificWeek.map((item) => parseInt(item.day, 10)); // 转换为数字数组
const specificWeek = DateUtils.getWeekDaysByDate(new Date(weekModel.value), 0);
return specificWeek.map((item) => parseInt(item.day.toString(), 10)); // 转换为数字数组
} else if (choseType.value === '月') {
const currentYearMonth = DateUtils.getCurrentYearMonth();
const tabTitle = DateUtils.getDaysAndWeekdays(currentYearMonth.year, currentYearMonth.month);
return tabTitle.map((item) => parseInt(item.day, 10)); // 转换为数字数组
const date = new Date(monthModel.value);
const tabTitle = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
return tabTitle.map((item) => parseInt(item.day.toString(), 10)); // 转换为数字数组
} else {
// 日维度，返回当天的日期数字
const day = new Date(dayModel.value).getDate();
@ -303,7 +304,7 @@ const formatTaskName = (name: string) => {
// 时间戳转日期格式，并提取日期数字
const timestampToDayNumber = (timestamp: number) => {
const date = new Date(timestamp * 1000); // 假设时间戳是秒级
return parseInt(date.getDate().toString().padStart(2, '0')); // 返回 '01', '02', ..., '31'
return date.getDate(); // 返回数字类型的日期
};
// 时间戳转时间格式 (HH:MM)
@ -371,15 +372,16 @@ const setDateRange = () => {
} else if (choseType.value === '月') {
const monthRange = DateUtils.getMonthRangeByYearMonth(
new Date(monthModel.value).getFullYear(),
new Date(monthModel.value).getMonth() + 1
new Date(monthModel.value).getMonth() + 1,
);
currentDateRange.start = monthRange.startFormatted;
currentDateRange.end = monthRange.endFormatted;
query.execution_time = [currentDateRange.start, currentDateRange.end];
} else {
// 日维度
currentDateRange.start = dayModel.value;
currentDateRange.end = dayModel.value;
const date = new Date(dayModel.value);
currentDateRange.start = DateUtils.formatDate(date);
currentDateRange.end = DateUtils.formatDate(date);
query.execution_time = [currentDateRange.start, currentDateRange.end];
}
};
@ -391,7 +393,6 @@ const setTableSpecific = () => {
title: '账号与发布平台',
slotName: 'name',
width: 150,
minWidth: 100,
fixed: 'left',
},
];
@ -399,18 +400,18 @@ const setTableSpecific = () => {
let dateHeaders: any[] = [];
if (choseType.value === '周') {
const specificWeek = DateUtils.getWeekDaysByDate(new Date(currentDateRange.start || new Date().toString()), 0);
const specificWeek = DateUtils.getWeekDaysByDate(new Date(weekModel.value), 0);
dateHeaders = specificWeek;
} else if (choseType.value === '月') {
const currentYearMonth = DateUtils.getCurrentYearMonth();
const tabTitle = DateUtils.getDaysAndWeekdays(currentYearMonth.year, currentYearMonth.month);
const date = new Date(monthModel.value);
const tabTitle = DateUtils.getDaysAndWeekdays(date.getFullYear(), date.getMonth());
dateHeaders = tabTitle;
} else {
// 日维度
const date = new Date(dayModel.value);
const day = date.getDate().toString().padStart(2, '0');
const day = date.getDate();
const weekday = DateUtils.formatDateToWeekdayDay(date);
dateHeaders = [{ day, weekday }];
dateHeaders = [{ day: day, weekday, date: DateUtils.formatDate(date) }];
}
// 添加日期列
@ -418,10 +419,8 @@ const setTableSpecific = () => {
columns.value.push({
title: `${item.weekday}`,
dataIndex: item.day, // 使用日期数字作为dataIndex
key: item.day,
slotName: 'dateCell',
width: 135,
minWidth: 100,
sortable: {
sortDirections: ['ascend', 'descend'],
},
@ -429,41 +428,62 @@ const setTableSpecific = () => {
});
};
// 日期变化处理
// 日期变化处理（日维度）
const onChangeDate = (val: any) => {
if (val) {
dayModel.value = DateUtils.formatDate(new Date(val));
// 确保val是Date对象
const selectedDate = val instanceof Date ? val : new Date(val);
dayModel.value = selectedDate;
// 更新日期范围和其他相关状态
setDateRange();
setTableSpecific();
handleSearch();
// 在下一个tick中执行搜索，确保DOM更新完成
nextTick(() => {
handleSearch();
});
}
};
// 日期变化处理（周维度）
const onChangeWeek = (val: any) => {
console.log('onChangeWeek val', val);
if (val) {
const weekRange = DateUtils.getWeekRange(new Date(val));
console.log('weekRange', weekRange);
currentDateRange.start = weekRange.startFormatted;
currentDateRange.end = weekRange.endFormatted;
query.execution_time = [currentDateRange.start, currentDateRange.end];
weekModel.value = val;
// 确保val是Date对象
const selectedDate = val instanceof Date ? val : new Date(val);
weekModel.value = selectedDate;
// 更新日期范围和其他相关状态
setDateRange();
setTableSpecific();
handleSearch();
// 在下一个tick中执行搜索，确保DOM更新完成
nextTick(() => {
handleSearch();
});
}
};
const onChangeMonth = (val: any) => {
console.log('val', val);
if (typeof val === 'string') {
val = DateUtils.MonthStrToDate(val);
console.log('onChangeMonth val', val);
}
console.log('onChangeMonth val', val);
if (val) {
const monthRange = DateUtils.getMonthRange(new Date(val));
currentDateRange.start = monthRange.startFormatted;
currentDateRange.end = monthRange.endFormatted;
query.execution_time = [currentDateRange.start, currentDateRange.end];
const date = new Date(val);
monthModel.value = val;
// 确保val是Date对象
const selectedDate = val instanceof Date ? val : new Date(val);
monthModel.value = selectedDate;
// 更新日期范围和其他相关状态
setDateRange();
setTableSpecific();
handleSearch();
// 在下一个tick中执行搜索，确保DOM更新完成
nextTick(() => {
handleSearch();
});
}
};
@ -472,7 +492,9 @@ const handleSelect = (val: string) => {
choseType.value = val;
setDateRange();
setTableSpecific();
handleSearch();
nextTick(() => {
handleSearch();
});
};
// 日期导航
@ -481,15 +503,15 @@ const handlePrev = () => {
if (choseType.value === '周') {
const prevWeek = new Date(weekModel.value);
prevWeek.setDate(prevWeek.getDate() - 7);
onChangeWeek(DateUtils.formatDate(prevWeek, false));
onChangeWeek(prevWeek);
} else if (choseType.value === '月') {
const prevMonth = new Date(monthModel.value);
prevMonth.setMonth(prevMonth.getMonth() - 1);
onChangeMonth(DateUtils.formatDate(prevMonth, false));
onChangeMonth(prevMonth);
} else {
const prevDay = new Date(dayModel.value);
prevDay.setDate(prevDay.getDate() - 1);
onChangeDate(DateUtils.formatDate(prevDay, false));
onChangeDate(prevDay);
}
};
@ -498,15 +520,15 @@ const handleNext = () => {
if (choseType.value === '周') {
const nextWeek = new Date(weekModel.value);
nextWeek.setDate(nextWeek.getDate() + 7);
onChangeWeek(DateUtils.formatDate(nextWeek, false));
onChangeWeek(nextWeek);
} else if (choseType.value === '月') {
const nextMonth = new Date(monthModel.value);
nextMonth.setMonth(nextMonth.getMonth() + 1);
onChangeMonth(DateUtils.formatDate(nextMonth, false));
onChangeMonth(nextMonth);
} else {
const nextDay = new Date(dayModel.value);
nextDay.setDate(nextDay.getDate() + 1);
onChangeDate(DateUtils.formatDate(nextDay, false));
onChangeDate(nextDay);
}
};
@ -514,11 +536,11 @@ const handleToday = () => {
// 回到今天
const today = new Date();
if (choseType.value === '周') {
onChangeWeek(DateUtils.formatDate(today, false));
onChangeWeek(today);
} else if (choseType.value === '月') {
onChangeMonth(DateUtils.formatDate(today, false));
onChangeMonth(today);
} else {
onChangeDate(DateUtils.formatDate(today, false));
onChangeDate(today);
}
};
@ -559,9 +581,20 @@ const getOperators = async () => {
// 监听日期维度变化
watch(choseType, (newVal) => {
setDateRange();
setTableSpecific();
handleSearch();
// 重置对应模型的值为当前日期
const now = new Date();
if (newVal === '日') {
dayModel.value = now;
} else if (newVal === '周') {
weekModel.value = now;
} else if (newVal === '月') {
monthModel.value = now;
}
nextTick(() => {
setDateRange();
setTableSpecific();
handleSearch();
});
});
onMounted(() => {