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>{{ dateNow(data.day) }}</div>
              <div
                class="task"
                :class="{
                  fou: item.priority == 4,
                  tow: item.priority == 2,
                  the: item.priority == 3,
                }"
                @click="handleEdit(item)"
                v-for="(item, index) in taskList"
                :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
      ref="editRef"
      :dict-data="dictData"
      :dateValue="dateValue"
      :detailsdata="detailsdata"
      @success="loadTask"
      @close="showEdit = false"
    />
    <EditTowPopup
      ref="editTowRef"
      :dict-data="dictData"
      :dateValue="dateValue"
      :detailsdata="detailsdata"
      @success="loadTask"
      @close="showEditTow = 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 EditTowPopup from "./editTow.vue";
import { reactive, watch } from "vue";
import { apiTaskList, apiTaskDetails } from "@/api/task";
import { apiTaskSchedulingPlanAdd } from "@/api/task_scheduling_plan";

const dateValue = ref(new Date());
const detailsdata = reactive({
  create_time: "",
  create_user_id: 0,
  delete_time: "",
  end_time: "",
  extend: "",
  id: "",
  scheduling_id: "",
  sn: "",
  start_time: "",
  status: "",
  task_id: "",
  task_info: {
    admin_id: 0,
    content: "",
    create_time: "",
    delete_time: "",
    id: 0,
    money: "",
    status: 0,
    title: "",
    type: 0,
    type_name: "",
    update_time: "",
  },
  template_id: 0,
  update_time: "",
});
watch(
  () => dateValue,
  async (newValue, oldValue) => {
    const id = taskList.value.find(
      (item) =>
        item.start_time.split(" ")[0] == timeFormat(newValue.value.getTime())
    )?.id;
    if (id) {
      const res = await apiTaskDetails({ id });
      Object.keys(detailsdata).forEach((key) => {
        res[key] ? (detailsdata[key] = res[key]) : null;
      });
      editRef.value?.open("add");
      initShowDate(timeFormat(newValue.value.getTime()));
    }
  },
  { deep: true }
);

// 加载
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({
  start_time: "",
  end_time: "",
  page_no: 1,
  pageSize: 150,
});

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

// 查询
const loadTask = async () => {
  //   let res: any = await apiTaskIndex(queryParams);
  //   taskList.value = res.lists;
  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 dateNow = (day) => {
  return taskList.value.find((item) => item.start_time.split(" ")[0] == day)
    ?.template_name;
};

// 获取字典数据
// const { dictData } = useDictData("");

// 添加
const handleAdd = async () => {
  showEditTow.value = true;
  await nextTick();
  editTowRef.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>