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

<template>
  <div>
    <el-card class="!border-none" v-loading="loading" shadow="never">
      <el-button v-perms="['flow_type/add']" type="primary" @click="handleAdd">
        <template #icon>
          <icon name="el-icon-Plus" />
        </template>
        新增
      </el-button>
      <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("-") }}
                <!-- {{ data.isSelected ? '✔️' : '' }} -->
              </p>
              <div
                class="task"
                :class="{
                  fou: item.priority == 4,
                  tow: item.priority == 2,
                  the: item.priority == 3,
                }"
                v-if="taskList[data.day]"
                @click="handleEdit(item)"
                v-for="(item, index) in taskList[data.day]"
                :key="index"
              >
                {{ item.title }}
              </div>
            </div>
            <!-- <div class="task" style="color: var(--el-color-primary);">完成BUG测试</div>
                          <div class="task" style="color: var(--el-color-danger);">完成BUG测试</div> -->
          </template>
        </el-calendar>
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      :dict-data="dictData"
      :dateValue="dateValue"
      @success="loadTask"
      @close="showEdit = false"
    />
  </div>
</template>
  
  <script lang="ts" setup name="task">
import { useDictData } from "@/hooks/useDictOptions";
import { apiTaskIndex } from "@/api/task";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
// import { getRoutePath } from "router";
import EditPopup from "./edit.vue";
import { reactive, watch } from "vue";
import { apiTaskList }    from '@/api/task'
const dateValue = ref(new Date());

watch(
  () => dateValue,
  (newValue, oldValue) => {
    initShowDate(timeFormat(newValue.value.getTime()));
  },
  { deep: true }
);
// apiTaskList()

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

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

// 查询条件
const queryParams = reactive({
  start_time: "",
  end_time: "",
  day: 1,
  page_no: 1,
  pageSize: 150,
});

const taskList = ref<any>([]);

// 查询
const loadTask = async () => {
  //   let res: any = await apiTaskIndex(queryParams);
  //   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 { dictData } = useDictData("");

// 添加
const handleAdd = async () => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};

// 编辑
const handleEdit = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("edit");
  editRef.value?.setFormData(data);
};

// 删除
// const handleDelete = async (id: number | any[]) => {
//   await feedback.confirm("确定要删除？");
//   await apiFlowTypeDelete({ id });
//   getLists();
// };

// getLists();
</script>
  
  <style lang="scss">
.is-selected {
  color: #1989fa;
}
.el-calendar-table .el-calendar-day {
  height: auto;
  min-height: 6.2rem;
  padding: 0;
}
.task {
  font-size: 0.8rem;
  color: #f7ba2a;
  white-space: nowrap; /* 设置文本不换行 */
  overflow: hidden; /* 隐藏溢出的部分 */
  text-overflow: ellipsis; /* 在溢出的部分显示省略号 */
}
.the {
  color: #ff5100;
}
.tow {
  color: #f38200;
}
.fou {
  color: red;
}
</style>