待我处理每个类型数量统计，以及切换tab数据变化修改

src/views/my/pending/index.vue

@@ -24,16 +24,26 @@ const revokeModal = ref<boolean>(false);
 const revokeSaving = ref<boolean>(false);
 const revokeReason = ref<string>("");
 const disposalModal = ref<boolean>(false);
+
+// 变更类型
+const typeList = ref<any[]>([]);
+// 变更等级
+const levelList = ref<any[]>([]);
+// 提醒天数
+const remindDays = ref<number>(7);
+// 源数据
+const dataSource = ref<any>(null);
+// 列表
+const list = ref<any[]>([]);
+// 数量统计
+const tabCount = ref<Record<string, number>>({
+    "all": 0,
+    "approval": 0,
+    "apply": 0,
+    "reject": 0,
+});
 // 选项卡
 const currentTab = ref<string>("all");
-const visibleTabs = ref<{ k: string; name: string; count: number }[]>([
-  { k: "all", name: "全部", count: 0 },
-  { k: "approval", name: "待我审批", count: 0 },
-  { k: "apply", name: "我的申请", count: 0 },
-  { k: "tempOverdue", name: "临时变更超期未处理", count: 0 },
-  { k: "closeOverdue", name: "变更超期未关闭", count: 0 },
-  { k: "reject", name: "驳回处理", count: 0 },
-]);
 // 选项卡切换
 const tabChange = (k: string) => {
     currentTab.value = k;
@@ -48,51 +58,20 @@ const tabChange = (k: string) => {
     // 我的申请
     if(k === "apply"){
         list.value = resetGrouped([...dataSource.value.my_applications]);
-    }
-    // 临时变更超期未处理
-    if(k === "tempOverdue"){
-        
-    }
-    // 变更超期未关闭
-    if(k === "closeOverdue"){
-        
     }
     // 驳回处理
     if(k === "reject"){
-        
+        const arr = [...dataSource.value.my_applications,...dataSource.value.todo];
+        const rejectedList = arr.filter((item: any) => item.status === "REJECTED");
+        list.value = resetGrouped(rejectedList);
     }
 };
 
-// 变更类型
-const typeList = ref<any[]>([]);
-// 变更等级
-const levelList = ref<any[]>([]);
-
 const stages = ["提交申请", "审批", "实施与投用前确认", "投用", "验收", "关闭"];
 const curIdx = computed(() => ({ 审批中: 1, 已批准: 2, 实施中: 2, 待PSSR: 2, 待验收: 4, 待关闭: 5, 已关闭: 6 } as Record<string, number>)[currentRow.value?.status ?? ""] ?? 1);
 const closed = computed(() => currentRow.value?.status === "已关闭");
 const timeOf = (i: number) => (i === 0 ? currentRow.value?.applyTime : i === 3 ? currentRow.value?.actualUse : i === 5 ? currentRow.value?.closeTime : undefined);
 
-const role = ref<string>("applicant");
-const remindDays = ref<number>(7);
-const specialTab = computed(() => currentTab.value === "tempOverdue" || currentTab.value === "closeOverdue");
-const myChanges = ref<MyChange[]>([
-  { id: "MOC-2026-R01-0035", title: "R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）", level: "重要", dur: "永久", stage: "pending", status: "审批中", detail: "专业会签中（周设备、王海燕待签）", applyTime: "2026-07-28 09:12", meta: "计划投用 2026-08-10", updateTime: "2026-07-30 14:20", node: "专业会签", members: [{ name: "王仪表", done: true }, { name: "周设备", done: false }, { name: "王海燕", done: false }] },
-  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", level: "一般", dur: "临时", stage: "pending", status: "审批中", detail: "部门审核（李主任）", applyTime: "2026-06-20 11:26", meta: "计划投用 2026-07-01", updateTime: "2026-06-21 08:40", deadline: "2026-08-01", left: -2, extended: false, node: "部门审核", members: [{ name: "李主任", done: false }] },
-  { id: "MOC-2026-R02-0046", title: "循环水加药泵冲程临时调整", level: "一般", dur: "临时", stage: "pass", status: "已批准", detail: "培训 / PSSR 资料待上传（线下签字后拍照上传）", applyTime: "2026-07-26 10:15", meta: "批准 2026-07-30 · 待实施", updateTime: "2026-07-30 16:20", deadline: "2026-08-20", left: 17, extended: false, node: "投用准备", members: [{ name: "张工艺", done: false }] },
-  { id: "MOC-2026-R02-0047", title: "氮气吹扫流程临时调整", level: "一般", dur: "临时", stage: "pass", status: "已批准", detail: "已到期未办理恢复 / 延期 / 转永久", applyTime: "2026-07-10 10:05", meta: "批准 2026-07-12 · 待实施", updateTime: "2026-07-31 08:10", deadline: "2026-07-31", left: -3, extended: false, node: "实施执行" },
-  { id: "MOC-2026-R02-0045", title: "P-204 出口管线伴热改造", level: "一般", dur: "永久", stage: "pass", status: "已批准", detail: "因装置检修窗口调整未实施", applyTime: "2026-07-15 09:40", meta: "审批通过 2026-07-20 · 计划投用 2026-07-30", updateTime: "2026-07-20 11:00", node: "实施执行" },
-  { id: "MOC-2026-R02-0042", title: "循环水旁滤器临时绕流运行", level: "一般", dur: "临时", stage: "inuse", status: "待验收", detail: "验收材料准备中", applyTime: "2026-07-28 14:10", meta: "投用 2026-08-02 · 到期 2026-08-09", updateTime: "2026-08-02 08:30", deadline: "2026-08-09", left: 6, extended: false, node: "变更验收" },
-  { id: "MOC-2026-R02-0043", title: "空压站干燥器再生周期调整", level: "一般", dur: "永久", stage: "inuse", status: "待验收", detail: "运行数据收集中（验收周期 30 天）", applyTime: "2026-07-18 10:25", meta: "投用 2026-07-25 · 计划验收 2026-08-24", updateTime: "2026-07-25 09:12", node: "运行验证" },
-  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整（紧急补办）", level: "一般", dur: "临时", urgent: true, stage: "closing", status: "待关闭", detail: "待关闭确认（资料更新核查中）", applyTime: "2026-07-15 19:40", meta: "已投用 · 到期 2026-07-27", updateTime: "2026-07-27 09:02", deadline: "2026-07-27", left: -4, extended: false, node: "关闭确认", members: [{ name: "钱峰", done: false }] },
-]);
-const tempOverdueList = computed(() => (role.value === "applicant" ? myChanges.value : []).filter((c: MyChange) => c.stage === "pass" && c.dur === "临时" && (c.left ?? 0) < 0));
-const closeOverdueList = computed(() => (role.value === "applicant" ? myChanges.value : []).filter((c: MyChange) => c.stage === "closing" && (c.left ?? 0) < 0));
-// 源数据
-const dataSource = ref<any>(null);
-// 列表
-const list = ref<any[]>([]);
-
 interface SubOrder {
   id: string;                    // 子单号：原单号-Y1（延期）/ -Z1（转永久）
   parentId: string;              // 原变更单号
@@ -216,6 +195,18 @@ const getList = async () => {
     if(!error){
         dataSource.value = data;
         list.value = resetGrouped([...dataSource.value.my_applications,...dataSource.value.todo]);
+        console.log(data)
+        // 统计数量
+        // 全部
+        tabCount.value["all"] = [...dataSource.value.my_applications,...dataSource.value.todo].length;
+        // 待我审批
+        tabCount.value["approval"] = [...dataSource.value.todo].length;
+        // 我的申请
+        tabCount.value["apply"] = [...dataSource.value.my_applications].length;
+        // 驳回处理
+        const arr = [...dataSource.value.my_applications,...dataSource.value.todo];
+        const rejectedList = arr.filter((item: any) => item.status === "REJECTED");
+        tabCount.value["reject"] = rejectedList.length;
     }
     loading.value = false;
 };
@@ -253,17 +244,45 @@ onMounted(() => {
                 class="h-100% flex flex-wrap items-center gap-2 border border-slate-200 px-3 py-2 mb-3"
                 :style="{ borderRadius: themeStore.themeRadius + 'px' }"
             >
-                <div v-for="t in visibleTabs" :key="t.k" @click="tabChange(t.k)"
+                <div @click="tabChange('all')"
                     class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
                     :style="{ 
                         borderRadius: themeStore.themeRadius + 'px',
                         '--theme-color': themeStore.themeColor,
                     }"
-                    :class="currentTab === t.k ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
-                    {{ t.name }}
-                    <!-- 驳回处理/资料上传/临时变更超期未处理/变更超期未关闭 -->
-                    <NTag v-if="t.k==='reject' || t.k==='upload' || t.k==='tempOverdue' || t.k==='closeOverdue'" size="tiny" round :type="currentTab === t.k ?'default':'error'">{{ t.count }}</NTag>
-                    <NTag v-else size="tiny" round :type="currentTab === t.k ?'default':'primary'">{{ t.count }}</NTag>
+                    :class="currentTab === 'all' ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
+                    全部
+                    <NTag size="tiny" round :type="currentTab === 'all' ?'default':'primary'">{{tabCount["all"]}}</NTag>
+                </div>
+                <div @click="tabChange('approval')"
+                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
+                    :style="{ 
+                        borderRadius: themeStore.themeRadius + 'px',
+                        '--theme-color': themeStore.themeColor,
+                    }"
+                    :class="currentTab === 'approval' ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
+                    待我审批
+                    <NTag size="tiny" round :type="currentTab === 'approval' ?'default':'primary'">{{tabCount["approval"]}}</NTag>
+                </div>
+                <div @click="tabChange('apply')"
+                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
+                    :style="{ 
+                        borderRadius: themeStore.themeRadius + 'px',
+                        '--theme-color': themeStore.themeColor,
+                    }"
+                    :class="currentTab === 'apply' ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
+                    我的申请
+                    <NTag size="tiny" round :type="currentTab === 'apply' ?'default':'primary'">{{tabCount["apply"]}}</NTag>
+                </div>
+                <div @click="tabChange('reject')"
+                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm cursor-pointer select-none"
+                    :style="{ 
+                        borderRadius: themeStore.themeRadius + 'px',
+                        '--theme-color': themeStore.themeColor,
+                    }"
+                    :class="currentTab === 'reject' ? 'bg-[var(--theme-color)] font-medium text-white' : 'text-slate-600 hover:bg-slate-100'">
+                    驳回处理
+                    <NTag size="tiny" round :type="currentTab === 'reject' ?'default':'error'">{{tabCount["reject"]}}</NTag>
                 </div>
             </div>
             <!-- 临时变更临期提醒 -->
@@ -276,11 +295,14 @@ onMounted(() => {
                 <NInputNumber v-model:value="remindDays" :min="1" :max="30" size="tiny" placeholder="" :show-button="false" class="text-11px w-14 text-center" />
                 天提醒（可设置）· 超期红色、临期琥珀色标识
                 <span class="ml-auto">
-                    {{ specialTab ? (currentTab === 'tempOverdue' ? `超期 ${tempOverdueList.length} 项 · 点击行内按钮办理恢复 / 延期 / 转永久` : `超期 ${closeOverdueList.length} 项 · 点击行内按钮进入关闭确认`) : `共 ${myChanges.length} 项 · 点击行内按钮办理各阶段业务` }}
+                    共 {{tabCount["all"]}} 项 · 点击行内按钮办理各阶段业务
                 </span>
             </div> 
             <div class="space-y-2 scroll">
                 <div class="flex flex-col gap-3">
+                    <div v-if="list.length===0" class="text-center text-slate-400">
+                        暂无数据
+                    </div>
                     <div 
                         class="border border-slate-200 p-4"
                         :style="{ borderRadius: themeStore.themeRadius + 'px' }"
@@ -305,7 +327,9 @@ onMounted(() => {
                             <p class="text-13px font-700" :style="{ color: themeStore.otherColor.error }">驳回处理</p>
                             <p class="text-11px text-#94a3b8">{{item.items.length}} 项待处理</p>
                         </div>
-
+                        <div v-if="item.items.length===0" class="text-center text-slate-400 mt-3 border-t pt-4 text-xs">
+                            暂无数据
+                        </div>
                         <div v-if="item.items && item.items.length" class="flex flex-col gap-3 mt-3">
                             <div v-for="c in item.items" :key="c.id"
                                 class="flex flex-wrap items-center gap-3 border px-4 py-3"
@@ -403,7 +427,6 @@ onMounted(() => {
                                 </div>
                             </div>
                         </div>
-                        
                     </div>
                 </div>
             </div>