TaskSystem-admin/src/views/task/taskCalendar.vue

<template>
  <div>
    <el-card class="!border-none" v-loading="loading" shadow="never">
      <div style="display: flex; justify-content: space-between">
        <el-button
          v-perms="['task.taskCalendar/add']"
          type="primary"
          @click="handleAdd"
        >
          <template #icon>
            <icon name="el-icon-Plus" />
          </template>
          新增
        </el-button>
        <!-- <div class="btn">
          <div :class="{ active: nowType == 0 }" @click="nowType = 0">日历</div>
          <div :class="{ active: nowType == 1 }" @click="nowType = 1">列表</div>
        </div> -->
      </div>
      <calendar
        :list="taskList"
        @clickItem="clickTask"
        @initShowDate="initShowDate"
      ></calendar>
      <!-- <div class="mt-4">
        <el-calendar v-model="dateValue">
          <template #dateCell="{ data }">
            <div style="width: 100%; height: 100%">
              <p
                :class="data.isSelected ? 'is-selected' : ''"
                style="padding: 8px 8px 0 8px"
              >
                {{ data.day.split("-").slice(1).join("-") }}
              </p>
              <div
                class="task"
                @click="clickTask(item)"
                v-for="(item, index) in taskListFilter(data.day)"
                :key="index"
              >
                {{ item.template_name }}
              </div>
            </div>
          </template>
        </el-calendar>
      </div>-->
    </el-card>

    <EditTowPopup
      ref="editTowRef"
      :task="task"
      :type="popupType"
      :company_id="company_id"
      @success="loadTask"
      @close="showEditTow = false"
    />
  </div>
</template>

<script lang="ts" setup name="task">
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
// import { getRoutePath } from "router";
import EditTowPopup from "./editTow.vue";
import { reactive, watch } from "vue";
import { apiTaskList, apiTaskDetails } from "@/api/task";
import calendar from "./calendar.vue";

const route = useRoute();

const dateValue = ref(new Date());

// 当前点击的任务
const task = ref({
  create_user_id: 0,
  end_time: "",
  id: 0,
  scheduling_id: 0,
  start_time: "",
  status: 0,
  template_id: 0,
  template_name: "",
});
const popupType = ref("add");
const clickTask = (e: any) => {
  popupType.value = "show";
  // task.value = e;
  task.value = taskList.value.find((item: any) => item.id == e) || null;
  handleSelect();
};

// 加载
const loading = ref(true);

const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const editTowRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);
const showEditTow = ref(false);

// 查询条件
const queryParams = reactive({
  scheduling_id: "",
  start_time: "",
  end_time: "",
  page_no: 1,
  pageSize: 150,
});
if (route.query.id) {
  queryParams.scheduling_id = route.query.id.toString();
}
const company_id = ref("");
if (route.query.company_id) company_id.value = route.query.company_id;
const taskList = ref<any>([]);

// 查询
const loadTask = async () => {
  apiTaskList(queryParams).then((res) => {
    taskList.value = res.lists;
    loading.value = false;
  });
};

const start_date = ref("");
const end_date = ref("");
// 计算当前显示的第一天和最后一天
const initShowDate = (dateStr = "") => {
  const currentDate = dateStr ? new Date(dateStr) : new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  const lastDay = new Date(currentYear, currentMonth + 1, 0).getDay(); //获取第一天星期
  const startDay = new Date(currentYear, currentMonth, 1).getDay(); //获取最后一天星期
  // console.log(new Date(currentYear, currentMonth, 1-startDay).getDate());
  // console.log(new Date(currentYear, currentMonth + 1, 6-lastDay).getDate());
  start_date.value = timeFormat(
    new Date(currentYear, currentMonth, 1 - startDay).getTime()
  ); //获取第一天时间
  end_date.value = timeFormat(
    new Date(currentYear, currentMonth + 1, 6 - lastDay).getTime()
  ); //获取最后一天时间
  if (queryParams.start_time != start_date.value) {
    queryParams.start_time = start_date.value;
    queryParams.end_time = end_date.value;
    loading.value = true;
    loadTask();
  }
};
initShowDate();

// 过滤的任务列表
const taskListFilter = (e: any) => {
  return taskList.value
    .filter((item: any) => {
      const now = new Date(e).getTime() / 1000;
      const start = new Date(item.start_time).getTime() / 1000;
      const end = new Date(item.end_time).getTime() / 1000;
      return now - start >= 0 && now - end <= 0;
    })
    .slice(0, 5);
};

// 添加
const handleAdd = async () => {
  popupType.value = "add";
  showEditTow.value = true;
  await nextTick();
  editTowRef.value?.open("add");
  editTowRef.value?.updatedForm();
};
// 查询
const handleSelect = async () => {
  popupType.value = "show";
  showEditTow.value = true;
  await nextTick();
  editTowRef.value?.open("show");
  editTowRef.value?.updatedForm(task.value);
};

// 当前选择类型
const nowType = ref(0);
const handleTypeClick = (e) => {
  console.log(e);
};
</script>

<style lang="scss">
.is-selected {
  color: #1989fa;
}
.el-calendar-table .el-calendar-day {
  min-height: 8.2rem;
  padding: 0;
}
.task {
  font-size: 0.8rem;
  /* color: #f7ba2a; */
  color: #1989fa;
  padding: 0 8px;
  white-space: nowrap; /* 设置文本不换行 */
  overflow: hidden; /* 隐藏溢出的部分 */
  text-overflow: ellipsis; /* 在溢出的部分显示省略号 */
  &:hover {
    background-color: rgba($color: #f38200, $alpha: 0.7);
    border-radius: 4px;
    color: #fff;
  }
}
.the {
  color: #ff5100;
}
.tow {
  color: #f38200;
}
.fou {
  color: red;
}
.btn {
  height: 30px;
  width: 150px;
  border: 1px solid #4a5dff;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  div {
    flex: 1;
    text-align: center;
    line-height: 30px;
  }
  .active {
    background-color: #4a5dff;
    color: #fff;
  }
}
</style>