修改任务组件

src/views/task/calendar.vue

@@ -10,7 +10,9 @@
       <div class="mt-4">
         <el-calendar v-model="dateValue">
           <template #dateCell="{ data }">
-            <div style="width: 100%; height: 100%">
+            <div
+              style="width: 100%; height: 100%; background-color: aquamarine"
+            >
               <p :class="data.isSelected ? 'is-selected' : ''">
                 {{ data.day.split("-").slice(1).join("-") }}
                 <!-- {{ data.isSelected ? '✔️' : '' }} -->
@@ -92,7 +94,6 @@ const taskList = ref<any>([]);
 const loadTask = async () => {
   let res: any = await apiTaskIndex(queryParams);
   taskList.value = res.lists;
-  // console.log(taskList.value);
   loading.value = false;
 };
 

src/views/task/taskCalendar.vue

@@ -0,0 +1,181 @@
+<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";
+
+const dateValue = ref(new Date());
+
+watch(
+  () => dateValue,
+  (newValue, oldValue) => {
+    initShowDate(timeFormat(newValue.value.getTime()));
+  },
+  { deep: true }
+);
+
+const test = (e: any) => {
+  console.log(e);
+};
+
+// 加载
+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>
+