From 5c486b4ee509d6cf27b0ff9d20533822a1dfd461 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Mon, 14 Aug 2023 12:05:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BB=BB=E5=8A=A1=E6=97=A5?=
 =?UTF-8?q?=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/task.ts                 |  12 ++
 src/components/popup/index.vue  | 239 +++++++++++-----------
 src/views/task/editTow.vue      | 245 ++++++++++++++++-------
 src/views/task/taskCalendar.vue | 338 ++++++++++++++++----------------
 4 files changed, 483 insertions(+), 351 deletions(-)

diff --git a/src/api/task.ts b/src/api/task.ts
index 3fe300e..25bb3d1 100644
--- a/src/api/task.ts
+++ b/src/api/task.ts
@@ -4,6 +4,18 @@ import request from '@/utils/request'
 export function apiTaskAdd(params: any) {
     return request.post({ url: '/task_scheduling_plan.task_scheduling_plan/add', params })
 }
+
+//修改任务
+export function apiTaskEdit(params: any) {
+    return request.post({ url: '/task_scheduling_plan.task_scheduling_plan/edit', params })
+}
+
+//删除任务
+export function apiTaskDelete(params: any) {
+    return request.post({ url: '/task_scheduling_plan.task_scheduling_plan/delete', params })
+}
+
+
 //任务日程-列表
 export function apiTaskList(params: any) {
     return request.get({ url: '/task_scheduling_plan.task_scheduling_plan/lists', params })
diff --git a/src/components/popup/index.vue b/src/components/popup/index.vue
index b68cb3c..d37cecb 100644
--- a/src/components/popup/index.vue
+++ b/src/components/popup/index.vue
@@ -1,132 +1,137 @@
 <template>
-    <div class="dialog">
-        <div class="dialog__trigger" @click="open">
-            <!-- 触发弹窗 -->
-            <slot name="trigger"></slot>
-        </div>
-        <el-dialog
-            v-model="visible"
-            :custom-class="customClass"
-            :center="center"
-            :append-to-body="true"
-            :width="width"
-            :close-on-click-modal="clickModalClose"
-            @closed="close"
-        >
-            <!-- 弹窗内容 -->
-            <template v-if="title" #header>{{ title }}</template>
-
-            <!-- 自定义内容 -->
-            <slot>{{ content }}</slot>
-            <!-- 底部弹窗页脚 -->
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button v-if="cancelButtonText" @click="handleEvent('cancel')">
-                        {{ cancelButtonText }}
-                    </el-button>
-                    <el-button
-                        v-if="confirmButtonText"
-                        type="primary"
-                        @click="handleEvent('confirm')"
-                    >
-                        {{ confirmButtonText }}
-                    </el-button>
-                </div>
-            </template>
-        </el-dialog>
+  <div class="dialog">
+    <div class="dialog__trigger" @click="open">
+      <!-- 触发弹窗 -->
+      <slot name="trigger"></slot>
     </div>
+    <el-dialog
+      v-model="visible"
+      :custom-class="customClass"
+      :center="center"
+      :append-to-body="true"
+      :width="width"
+      :close-on-click-modal="clickModalClose"
+      @closed="close"
+    >
+      <!-- 弹窗内容 -->
+      <template v-if="title" #header>{{ title }}</template>
+
+      <!-- 自定义内容 -->
+      <slot>{{ content }}</slot>
+      <!-- 底部弹窗页脚 -->
+      <template v-if="button" #footer>
+        <div class="dialog-footer">
+          <el-button v-if="cancelButtonText" @click="handleEvent('cancel')">
+            {{ cancelButtonText }}
+          </el-button>
+          <el-button
+            v-if="confirmButtonText"
+            type="primary"
+            @click="handleEvent('confirm')"
+          >
+            {{ confirmButtonText }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts">
 export default defineComponent({
-    props: {
-        title: {
-            // 弹窗标题
-            type: String,
-            default: ''
-        },
-        content: {
-            // 弹窗内容
-            type: String,
-            default: ''
-        },
-        confirmButtonText: {
-            // 确认按钮内容
-            type: [String, Boolean],
-            default: '确定'
-        },
-        cancelButtonText: {
-            // 取消按钮内容
-            type: [String, Boolean],
-            default: '取消'
-        },
-        width: {
-            // 弹窗的宽度
-            type: String,
-            default: '400px'
-        },
-        disabled: {
-            // 是否禁用
-            type: Boolean,
-            default: false
-        },
-        async: {
-            // 是否开启异步关闭
-            type: Boolean,
-            default: false
-        },
-        clickModalClose: {
-            // 点击遮罩层关闭对话窗口
-            type: Boolean,
-            default: false
-        },
-        center: {
-            // 是否居中布局
-            type: Boolean,
-            default: false
-        },
-        customClass: {
-            type: String,
-            default: ''
-        }
+  props: {
+    title: {
+      // 弹窗标题
+      type: String,
+      default: "",
     },
-    emits: ['confirm', 'cancel', 'close', 'open'],
-    setup(props, { emit }) {
-        const visible = ref(false)
+    button: {
+      // 是否显示按钮
+      type: Boolean,
+      default: true,
+    },
+    content: {
+      // 弹窗内容
+      type: String,
+      default: "",
+    },
+    confirmButtonText: {
+      // 确认按钮内容
+      type: [String, Boolean],
+      default: "确定",
+    },
+    cancelButtonText: {
+      // 取消按钮内容
+      type: [String, Boolean],
+      default: "取消",
+    },
+    width: {
+      // 弹窗的宽度
+      type: String,
+      default: "400px",
+    },
+    disabled: {
+      // 是否禁用
+      type: Boolean,
+      default: false,
+    },
+    async: {
+      // 是否开启异步关闭
+      type: Boolean,
+      default: false,
+    },
+    clickModalClose: {
+      // 点击遮罩层关闭对话窗口
+      type: Boolean,
+      default: false,
+    },
+    center: {
+      // 是否居中布局
+      type: Boolean,
+      default: false,
+    },
+    customClass: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["confirm", "cancel", "close", "open"],
+  setup(props, { emit }) {
+    const visible = ref(false);
 
-        const handleEvent = (type: 'confirm' | 'cancel') => {
-            emit(type)
-            if (!props.async || type === 'cancel') {
-                close()
-            }
-        }
+    const handleEvent = (type: "confirm" | "cancel") => {
+      emit(type);
+      if (!props.async || type === "cancel") {
+        close();
+      }
+    };
 
-        const close = () => {
-            visible.value = false
-            nextTick(() => {
-                emit('close')
-            })
-        }
-        const open = () => {
-            if (props.disabled) {
-                return
-            }
-            emit('open')
-            visible.value = true
-        }
-        provide('visible', visible)
-        return {
-            visible,
-            handleEvent,
-            close,
-            open
-        }
-    }
-})
+    const close = () => {
+      visible.value = false;
+      nextTick(() => {
+        emit("close");
+      });
+    };
+    const open = () => {
+      if (props.disabled) {
+        return;
+      }
+      emit("open");
+      visible.value = true;
+    };
+    provide("visible", visible);
+    return {
+      visible,
+      handleEvent,
+      close,
+      open,
+    };
+  },
+});
 </script>
 
 <style scoped lang="scss">
 .dialog-body {
-    white-space: pre-line;
+  white-space: pre-line;
 }
 </style>
diff --git a/src/views/task/editTow.vue b/src/views/task/editTow.vue
index 8bdefc8..d5f74f6 100644
--- a/src/views/task/editTow.vue
+++ b/src/views/task/editTow.vue
@@ -1,92 +1,199 @@
 <template>
-    <div class="edit-popup">
-        <popup
-            ref="popupRef"
-            title="创建日程安排"
-            :async="true"
-            width="800px"
-            @confirm="handleSubmit"
-            @close="handleClose"
-        >
-            <el-form class="formdata" :model="detailsdt" label-width="120px">
-                <el-form-item label="任务日期">
-                    <el-date-picker v-model="formData.time" type="date" placeholder="选择日期" />
-                </el-form-item>
-                <el-form-item label="任务模板">
-                    <el-input
-                        v-model="formData.template_name"
-                        @click="isShow = true"
-                        clearable
-                        placeholder="请输入任务模板"
-                    />
-                </el-form-item>
-            </el-form>
-        </popup>
-        <el-dialog v-model="isShow" title="选择任务" width="60%">
-            <DialogIndex @customEvent="customEvent" />
-        </el-dialog>
-    </div>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      :title="title"
+      :async="true"
+      width="800px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+      :clickModalClose="mode == 'show'"
+      :button="mode != 'show'"
+    >
+      <el-form
+        ref="formRef"
+        :rules="rules"
+        class="formdata"
+        :model="formData"
+        label-width="120px"
+      >
+        <el-form-item required label="任务日期" prop="datetime">
+          <el-date-picker
+            :disabled="isDisabled"
+            v-model="formData.datetime"
+            name="datetime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="changeDateTime"
+          />
+        </el-form-item>
+        <el-form-item required label="任务模板" prop="template_id">
+          <el-input
+            :disabled="isDisabled"
+            v-model="formData.template_name"
+            @click="isShow = true"
+            name="template_id"
+            clearable
+            placeholder="请输入任务模板"
+          />
+        </el-form-item>
+        <el-form-item v-if="mode == 'show'" label="">
+          <el-button type="primary" @click="clickUpdate"> 修改 </el-button>
+          <el-button type="danger" @click="clickDelete"> 删除 </el-button>
+        </el-form-item>
+      </el-form>
+    </popup>
+    <el-dialog v-model="isShow" title="选择任务" width="60%">
+      <DialogIndex @customEvent="customEvent" />
+    </el-dialog>
+  </div>
 </template>
 
 <script lang="ts" setup name="taskEidt">
-import type { FormInstance } from 'element-plus'
-import Popup from '@/components/popup/index.vue'
-import { apiTaskAdd } from '@/api/task'
-import { reactive, onUpdated, type PropType } from 'vue'
-import DialogIndex from '@/views/task_template/list_two.vue'
-const route = useRoute()
+import type { FormInstance, FormRules } from "element-plus";
+import Popup from "@/components/popup/index.vue";
+import { apiTaskAdd, apiTaskEdit, apiTaskDelete } from "@/api/task";
+import { reactive, onUpdated, type PropType } from "vue";
+import DialogIndex from "@/views/task_template/list_two.vue";
+import { timeFormat } from "@/utils/util";
+import feedback from "@/utils/feedback";
+const route = useRoute();
 
-const emit = defineEmits(['success', 'close'])
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const mode = ref('add')
-const detailsdt = ref({})
-const isShow = ref(false)
+const emit = defineEmits(["success", "close"]);
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
+const mode = ref("add");
+const detailsdt = ref({});
+const isShow = ref(false);
+const title = ref("创建日程安排");
+
+const changeDateTime = (e: any) => {
+  formData.start_time = timeFormat(e[0]);
+  formData.end_time = timeFormat(e[1]);
+};
 
 // 表单数据
 const formData = reactive({
-    time: '',
-    template_id: '',
-    scheduling_id: '',
-    template_name: ''
-})
-function customEvent(data: any) {
-    isShow.value = false
-    formData.template_id = data.id
-    formData.template_name = data.title
-}
-if (route.query.id) {
-    formData.scheduling_id = route.query.id.toString()
+  id: "",
+  create_user_id: "",
+  status: "",
+  template_id: "",
+  scheduling_id: "",
+  template_name: "",
+  start_time: "",
+  end_time: "",
+  datetime: "",
+});
+
+interface RuleForm {
+  datetime: Date | String;
+  template_id: String;
 }
 
+const rules = reactive<FormRules<RuleForm>>({
+  datetime: { required: true, message: "请选择时间范围", trigger: "blur" },
+  template_id: {
+    required: true,
+    message: "请选择任务模板",
+    trigger: "change",
+  },
+});
+
+function customEvent(data: any) {
+  isShow.value = false;
+  formData.template_id = data.id;
+  formData.template_name = data.title;
+}
+if (route.query.id) {
+  formData.scheduling_id = route.query.id.toString();
+}
+
+const formRef = ref(null);
+
+const props = defineProps({
+  task: {
+    type: Object,
+    defualt: () => {
+      null;
+    },
+  },
+});
+const isDisabled = ref(false);
+
+const updatedForm = async () => {
+  if (mode.value == "show") {
+    title.value = "查看日程安排";
+    isDisabled.value = true;
+    Object.keys(formData).forEach((key: any) => {
+      if (props.task[key] != null && props.task[key] != undefined)
+        formData[key] = props.task[key];
+    });
+    formData.datetime = [
+      formData.start_time.split(" ")[0],
+      formData.end_time.split(" ")[0],
+    ];
+  } else {
+    isDisabled.value = false;
+    Object.keys(formData).forEach((key: any) => {
+      formData[key] = "";
+    });
+  }
+  await nextTick();
+  formRef.value.resetFields();
+};
+
+const clickUpdate = () => {
+  mode.value = "edit";
+  isDisabled.value = false;
+};
+
+// 删除
+const clickDelete = () => {
+  feedback.confirm("确定要删除吗?").then(async (e) => {
+    if (e == "confirm") {
+      await apiTaskDelete({ id: formData.id });
+      popupRef.value?.close();
+      emit("success");
+    }
+  });
+};
+
 // 提交按钮
-const handleSubmit = async () => {
-    const data = { ...formData }
-    console.log(data)
-    mode.value == 'edit' ? await apiTaskAdd(data) : await apiTaskAdd(data)
-    popupRef.value?.close()
-    emit('success')
-}
+const handleSubmit = () => {
+  if (mode.value == "show") return popupRef.value?.close();
+  else
+    formRef.value.validate(async (e: Boolean) => {
+      if (e) {
+        const data = { ...formData };
+        mode.value == "edit" ? await apiTaskEdit(data) : await apiTaskAdd(data);
+        popupRef.value?.close();
+        emit("success");
+      }
+    });
+};
 //打开弹窗
-const open = (type = 'add') => {
-    mode.value = type
-    popupRef.value?.open()
-}
+const open = (type = "add") => {
+  mode.value = type;
+  popupRef.value?.open();
+};
 
 // 关闭回调
 const handleClose = () => {
-    emit('close')
-}
+  emit("close");
+};
 
 defineExpose({
-    open
-})
+  open,
+  updatedForm,
+});
 </script>
 <style lang="scss" scoped>
 .formdata {
-    .el-form-item {
-        .el-date-picker {
-            width: 100%;
-        }
+  .el-form-item {
+    .el-date-picker {
+      width: 100%;
     }
+  }
 }
 </style>
diff --git a/src/views/task/taskCalendar.vue b/src/views/task/taskCalendar.vue
index 5f69edb..5e67251 100644
--- a/src/views/task/taskCalendar.vue
+++ b/src/views/task/taskCalendar.vue
@@ -1,205 +1,213 @@
 <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 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("-") }}
+              </p>
+              <div
+                class="task"
+                @click="clickTask(item)"
+                v-for="(item, index) in taskListFilter(data.day)"
+                :key="index"
+              >
+                {{ item.template_name }}
+              </div>
             </div>
-        </el-card>
+          </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>
+    <edit-popup
+      ref="editRef"
+      :dateValue="dateValue"
+      @success="loadTask"
+      @close="showEdit = false"
+    />
+    <EditTowPopup
+      ref="editTowRef"
+      :task="task"
+      :type="popupType"
+      @success="loadTask"
+      @close="showEditTow = false"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup name="task">
-import { timeFormat } from '@/utils/util'
-import feedback from '@/utils/feedback'
+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 route = useRoute()
+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 route = useRoute();
 
-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 dateValue = ref(new Date());
+// 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 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;
+  handleSelect();
+};
 
 // 加载
-const loading = ref(true)
+const loading = ref(true);
 
-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
-const editTowRef = shallowRef<InstanceType<typeof EditPopup>>()
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
+const editTowRef = shallowRef<InstanceType<typeof EditPopup>>();
 // 是否显示编辑框
-const showEdit = ref(false)
-const showEditTow = ref(false)
+const showEdit = ref(false);
+const showEditTow = ref(false);
 
 // 查询条件
 const queryParams = reactive({
-    start_time: '',
-    end_time: '',
-    page_no: 1,
-    pageSize: 150
-})
+  start_time: "",
+  end_time: "",
+  page_no: 1,
+  pageSize: 150,
+});
 
-const taskList = ref<any>([])
+const taskList = ref<any>([]);
 
 // 查询
 const loadTask = async () => {
-    apiTaskList(queryParams).then((res) => {
-        taskList.value = res.lists
-    })
-    loading.value = false
-}
+  apiTaskList(queryParams).then((res) => {
+    taskList.value = res.lists;
+  });
+  loading.value = false;
+};
 
-const start_date = ref('')
-const end_date = ref('')
+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 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) => {
+      let now = new Date(e).getTime() / 1000;
+      let start = new Date(item.start_time).getTime() / 1000;
+      let end = new Date(item.end_time).getTime() / 1000;
+      return now - start >= 0 && now - end <= 0;
+    })
+    .slice(0, 5);
+};
 
 // 添加
 const handleAdd = async () => {
-    showEditTow.value = true
-    await nextTick()
-    editTowRef.value?.open('add')
-}
+  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();
+};
 </script>
 
 <style lang="scss">
 .is-selected {
-    color: #1989fa;
+  color: #1989fa;
 }
 .el-calendar-table .el-calendar-day {
-    height: auto;
-    min-height: 6.2rem;
-    padding: 0;
+  min-height: 8.2rem;
+  padding: 0;
 }
 .task {
-    font-size: 0.8rem;
-    color: #f7ba2a;
-    white-space: nowrap; /* 设置文本不换行 */
-    overflow: hidden; /* 隐藏溢出的部分 */
-    text-overflow: ellipsis; /* 在溢出的部分显示省略号 */
+  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;
+  color: #ff5100;
 }
 .tow {
-    color: #f38200;
+  color: #f38200;
 }
 .fou {
-    color: red;
+  color: red;
 }
 </style>