riku
2024-10-24 3d3e7f45086799fdd7a412e2079710a6cdf8dc2b
src/views/fysp/task/components/CompMonitorPlan.vue
@@ -55,9 +55,9 @@
    default: () => {}
  }
});
const emit = defineEmits(['dateChange'])
const emit = defineEmits(['dateChange']);
// 选中日期
const dateValue = ref(new Date());
const dateValue = ref();
// 日历标题
const title = computed(() => {
  if (props.task) {
@@ -70,18 +70,27 @@
// 日历范围
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('-');
@@ -92,12 +101,16 @@
// 获取日任务统计信息
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));
}
@@ -119,11 +132,11 @@
}
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);
  }
}
// 总任务统计
@@ -141,12 +154,14 @@
watch(
  () => props.task,
  (nV) => {
    if (nV.tguid) {
      fetchDayTasks(nV.tguid);
    if (nV && nV.tguid) {
      fetchDayTasks();
    }
  },
  { immediate: true }
);
defineExpose({ fetchDayTasks });
</script>
<style scoped>
.li-01 {
@@ -185,7 +200,7 @@
  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 {