supervision-vue/src/components/home/work/index.vue

<template>
    <el-tabs v-model="activeName">
        <el-tab-pane name="todo">
            <template #label>
                <el-badge :value="myTodoTotal" v-if="myTodoTotal">
                    <span class="tab-nav-title">我的待办</span>
                </el-badge>
                <span class="tab-nav-title" v-else>我的待办</span>
            </template>
            <div v-loading="loading" class="pt-20">
                <home-work-my-todo :data="todos" @update="getList" />
            </div>
        </el-tab-pane>
        
        <el-tab-pane name="second">
            <template #label>
                <el-badge :value="todoToExpires.length" v-if="todoToExpires.length">
                    <span class="tab-nav-title">即将到期</span>
                </el-badge>
                <span class="tab-nav-title" v-else>即将到期</span>
            </template>
            <div v-loading="loading" class="mt-20">
                <home-work-my-todo :data="todoToExpires" @update="getList" />
            </div>
        </el-tab-pane>
        <el-tab-pane name="third">
            <template #label>
                <span class="tab-nav-title">我的收藏</span>
            </template>
            <div v-loading="loading" class="mt-20">
                <home-work-my-fav />
            </div>
            
        </el-tab-pane>
        <el-tab-pane name="comfort">
            <template #label>
                <el-badge :value="myComfortTotal" v-if="comforts.length">
                    <span class="tab-nav-title">抚慰申请</span>
                </el-badge>
                <span class="tab-nav-title" v-else>抚慰申请</span>
            </template>
            <div v-loading="comfortLoading" class="pt-20">
                <home-work-my-comfort :data="comforts" @update="getComfortList" />
            </div>
        </el-tab-pane>
        <el-tab-pane name="alarm">
            <template #label>
                <el-badge :value="myAlarmTotal" v-if="alarms.length">
                    <span class="tab-nav-title">通知提醒</span>
                </el-badge>
                <span class="tab-nav-title" v-else>通知提醒</span>
            </template>
            <div v-loading="alarmLoading" class="pt-20">
                <home-work-my-alarm :data="alarms" @update="getAlarmList" />
            </div>
        </el-tab-pane>
      <el-tab-pane name="countersign">
        <template #label>
          <el-badge :value="countersignTodos.length" v-if="countersignTodos.length">
            <span class="tab-nav-title">会签提醒</span>
          </el-badge>
          <span class="tab-nav-title" v-else>会签提醒</span>
        </template>
        <div v-loading="loading" class="pt-20">
          <home-work-my-countersign :data="countersignTodos" @update="getList" />
        </div>
      </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import {listTodoCountersign, listTodos} from "@/api/work";
import {
    alarmNotificationPageByTodo
} from "@/api/work/alarm";
import {
    listComfortTodos
} from "@/api/rightsComfort/comfort";
const activeName = "todo";
const myTodoTotal = ref(0)
const todos = ref([])
const todoToExpires = ref([])

const alarms = ref([])
const myAlarmTotal = ref(0)

const loading = ref(true)
const countersignTodos = ref([]);
function getList() {
    loading.value = true
    listTodos({
        current: 1,
        size: 100,
    }).then((data) => {
        todos.value = data.records;
        myTodoTotal.value = data.total
        todoToExpires.value = data.records.filter(item => item.remainingDuration < 43200)
        loading.value = false
    });
  listTodoCountersign({
    current: 1,
    size: 100,
  }).then((data) => {
    countersignTodos.value = data.records;
  });
}

const alarmLoading = ref(false)
function getAlarmList() {
    alarmLoading.value = true
    alarmNotificationPageByTodo({
        current: 1,
        size: 100,
    }).then((data) => {
        alarms.value = data.records;
        myAlarmTotal.value = data.total
        alarmLoading.value = false
    });
}

const myComfortTotal = ref(0)
const comfortLoading = ref(false)
const comforts = ref([])
function getComfortList() {
    comfortLoading.value = true
    listComfortTodos({
        current: 1,
        size: 100,
    }).then((data) => {
        comforts.value = data.records;
        myComfortTotal.value = data.total
        comfortLoading.value = false
    });
}

onMounted(() => {
    getList();
    getAlarmList();
    getComfortList();
});
</script>
<style lang="scss" scoped>
.tab-nav-title {
    font-size: 24px;
}
:deep() {
    .tab-nav-title_second {
        font-size: 18px;
    }
    .el-tabs__nav-wrap {
        overflow: visible;
        .el-tabs__nav-scroll {
            overflow: visible;
        }
    }
    .el-tabs__header {
        margin-bottom: 0;
    }
}
</style>