TaskSystem-admin/src/views/task/calendar.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%;" @click="test(data)">
                            <p :class="data.isSelected ? 'is-selected' : ''">
                                {{ 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]"
                                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;
    // console.log(taskList.value);
    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: 6.2rem;
}
.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>