| | |
| | | default: () => {} |
| | | } |
| | | }); |
| | | const emit = defineEmits(['dateChange']) |
| | | const emit = defineEmits(['dateChange']); |
| | | // 选中日期 |
| | | const dateValue = ref(new Date()); |
| | | const dateValue = ref(); |
| | | // 日历标题 |
| | | const title = computed(() => { |
| | | if (props.task) { |
| | |
| | | // 日历范围 |
| | | const startDay = computed(() => dayjs(props.task.starttime)); |
| | | const endDay = computed(() => dayjs(props.task.endtime)); |
| | | const dateRange = computed(() => [startDay.value.toDate(), endDay.value.toDate()]); |
| | | const dateRange = computed(() => [ |
| | | startDay.value.toDate(), |
| | | endDay.value.toDate() |
| | | ]); |
| | | // const dateRange = computed(() => [new Date(2024, 4, 27), new Date(2024, 5, 30)]); |
| | | |
| | | // 日期是否在任务范围内 |
| | | function isDayEnable(day) { |
| | | const _day = dayjs(day); |
| | | return _day.isSameOrAfter(startDay.value, 'day') && _day.isSameOrBefore(endDay.value, 'day'); |
| | | return ( |
| | | _day.isSameOrAfter(startDay.value, 'day') && |
| | | _day.isSameOrBefore(endDay.value, 'day') |
| | | ); |
| | | } |
| | | |
| | | /********************** 日期样式 *********************************/ |
| | | function calendarDayClz(day) { |
| | | return 'calendar-day ' + (isDayEnable(day) ? 'calendar-day-enable' : 'calendar-day-disable'); |
| | | return ( |
| | | 'calendar-day ' + |
| | | (isDayEnable(day) ? 'calendar-day-enable' : 'calendar-day-disable') |
| | | ); |
| | | } |
| | | function getDay(day) { |
| | | return day.split('-').splice(1, 2).join('-'); |
| | |
| | | // 获取日任务统计信息 |
| | | const dayTaskLoading = ref(false); |
| | | const dayTaskList = ref([]); |
| | | function fetchDayTasks(topTaskId) { |
| | | function fetchDayTasks() { |
| | | dayTaskLoading.value = true; |
| | | taskApi |
| | | .fetchDayTasks(topTaskId) |
| | | return taskApi |
| | | .fetchDayTasks(props.task.tguid) |
| | | .then((res) => { |
| | | dayTaskList.value = res; |
| | | // 如果已选日期存在,在重新获取日任务统计信息后,再次触发点击事件 |
| | | if (dateValue.value) { |
| | | onDateChange(dateValue.value) |
| | | } |
| | | }) |
| | | .finally(() => (dayTaskLoading.value = false)); |
| | | } |
| | |
| | | } |
| | | |
| | | function onDateChange(e) { |
| | | const day = dayjs(e).format('YYYY-MM-DD') |
| | | const t = computeDayTask(day) |
| | | console.log(t); |
| | | |
| | | emit('dateChange', t) |
| | | if (isDayEnable(e)) { |
| | | const day = dayjs(e).format('YYYY-MM-DD'); |
| | | const t = computeDayTask(day); |
| | | emit('dateChange', t); |
| | | } |
| | | } |
| | | |
| | | // 总任务统计 |
| | |
| | | watch( |
| | | () => props.task, |
| | | (nV) => { |
| | | if (nV.tguid) { |
| | | fetchDayTasks(nV.tguid); |
| | | if (nV && nV.tguid) { |
| | | fetchDayTasks(); |
| | | } |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | | |
| | | defineExpose({ fetchDayTasks }); |
| | | </script> |
| | | <style scoped> |
| | | .li-01 { |
| | |
| | | border: 1px solid rgb(172, 165, 165); |
| | | border-radius: 50%; */ |
| | | padding: 8px; |
| | | height: var(--el-calendar-cell-width); |
| | | /* min-height: var(--el-calendar-cell-width); */ |
| | | } |
| | | |
| | | .calendar-day-enable { |