审批上角标

src/api/key-dm-leave.js

@@ -106,6 +106,7 @@ export const getLeaveTypeList = (param) => {
   })
 }
 
+
 // 转交审批人（前端发起将当前待审批任务转给其他审批人）
 export const transferLeaveApproval = (param) => {
   return axios.request({

src/view/key-person/key_dm_leave/index.vue

@@ -21,7 +21,7 @@
               <Button class="mr10" @click="handleReset('apply')">重置</Button>
               <Button type="success" @click="openApplyModal">申请</Button>
             </Col>
-          </Row> 
+          </Row>
         </div>
         <Table border :loading="loading.apply" :columns="applyColumns" :data="tables.apply">
           <template slot="action" slot-scope="{ row }">
@@ -38,7 +38,12 @@
           show-total show-sizer @on-change="pageChange('apply', $event)" @on-page-size-change="sizeChange('apply', $event)" />
       </TabPane>
 
-      <TabPane label="请假待审核" name="pending">
+      <TabPane name="pending">
+        <template slot="label">
+          <span class="tab-label">请假待审核
+            <span v-if="pendingCount > 0" class="exclaim-inline">！</span>
+          </span>
+        </template>
         <Table border :loading="loading.pending" :columns="pendingColumns" :data="tables.pending">
           <template slot="action" slot-scope="{ row }">
             <div class="action-buttons">
@@ -279,6 +284,7 @@ import {
   getLeaveTypeList,
   selectTransferApprovalList
   , transferLeaveApproval } from '@/api/key-dm-leave'
+// 注意：不单独调用后台的 isPending 接口，改为复用 getPendingList 获取 totalRecord 判定是否存在待办
 import { getLeaveApprovalPermission } from '@/api/key-dm-user-permission'
 
 export default {
@@ -295,6 +301,8 @@ export default {
       tables: { apply: [], pending: [], history: [], query: [], stats: [] },
       pagers: { apply: { pageNo: 1, pageSize: 10, totalRecord: 0 }, pending: { pageNo: 1, pageSize: 10, totalRecord: 0 }, history: { pageNo: 1, pageSize: 10, totalRecord: 0 }, query: { pageNo: 1, pageSize: 10, totalRecord: 0 } },
       loading: { apply: false, pending: false, history: false, query: false, stats: false },
+      // 待审批数量徽章
+      pendingCount: 0,
       leaveTypes: [],
       // 状态下拉
       statusOptions: [
@@ -366,7 +374,7 @@ export default {
             const text = (s === 1 || String(s) === '1') ? '处理中' : ((s === 2 || String(s) === '2') ? '已处理' : ((s === 0 || String(s) === '0') ? '未处理' : '-'))
             return h('span', text)
           }
-        },
+        }
       ],
       applyModal: { visible: false, isEdit: false, saving: false, form: {} },
       approveModal: { visible: false, record: {}, comment: '', submitting: false, transferEnabled: false, transferApprover: '', approvalFlow: [] },
@@ -381,6 +389,8 @@ export default {
     this.loadLeaveTypes()
     this.fetchList('apply')
     this.loadLeaveApprovalOptions()
+    // 加载待审批计数，用于页面顶部/选项卡徽章显示
+    this.loadPendingCount()
   },
   watch: {
     // 当弹窗关闭时清理选择的审批人，确保下次打开时下拉框能正确刷新显示
@@ -464,6 +474,52 @@ export default {
         }
       }).finally(() => { this.loading[tab] = false })
     },
+
+    // 加载待审批数量（用于显示“！”）
+    loadPendingCount () {
+      // 复用 getPendingList，一页一条以从返回中读取 totalRecord
+      // 兼容后端可能返回多种结构：{errcode:0, data:{totalRecord,...}}, {data:{results:[]}}, 直接数组，或 page 对象等
+      getPendingList({ pageNo: 1, pageSize: 1, params: {} }).then(ret => {
+        try {
+          // 常见包装结构：{ errcode:0, data: {...} }
+          if (ret && ret.data) {
+            const root = ret.data
+            // 如果有 errcode 且为 0，取 data 字段优先
+            const payload = (root.errcode === 0 && (root.data !== undefined)) ? root.data : root
+            let count = 0
+            if (payload == null) {
+              count = 0
+            } else if (typeof payload.totalRecord === 'number') {
+              count = payload.totalRecord
+            } else if (typeof payload.total === 'number') {
+              count = payload.total
+            } else if (Array.isArray(payload.results)) {
+              count = payload.results.length
+            } else if (Array.isArray(payload.data)) {
+              count = payload.data.length
+            } else if (Array.isArray(root)) {
+              count = root.length
+            } else if (Array.isArray(ret.data.results)) {
+              count = ret.data.results.length
+            } else {
+              // 兜底：如果 payload 有 totalRecord 字符串
+              const tr = payload.totalRecord || payload.total
+              count = tr ? Number(tr) : 0
+            }
+            // 只要存在 >0 即视为有待办，设置为 1 以便用 v-if 判断
+            this.pendingCount = count > 0 ? 1 : 0
+          } else {
+            this.pendingCount = 0
+          }
+        } catch (e) {
+          console.error('loadPendingCount parse error', e)
+          this.pendingCount = 0
+        }
+      }).catch(err => {
+        console.error('loadPendingCount error', err)
+        this.pendingCount = 0
+      })
+    },
     /**
      * Prepare query params: normalize start_time/end_time into DB datetime strings.
      * - If start_time exists, set to 00:00:00 of that day.
@@ -776,8 +832,9 @@ export default {
         if (ret.data && ret.data.errcode === 0) {
           this.$Message.success('转交成功')
           this.transferModal.visible = false
-          // 刷新待办列表
+          // 刷新待办列表并更新待审批计数徽章
           this.fetchList('pending')
+          this.loadPendingCount()
         } else {
           this.$Notice.error({ title: '转交失败', desc: ret.data && ret.data.errmsg })
         }
@@ -786,7 +843,7 @@ export default {
     confirmApprove () {
       this.approveModal.submitting = true
       approveLeave({ id: this.approveModal.record.id, leave_id: this.approveModal.record.leave_id || this.approveModal.record.id, comment: this.approveModal.comment }).then(ret => {
-        if (ret.data && ret.data.errcode === 0) { this.$Message.success('审批通过'); this.approveModal.visible = false; this.fetchList('pending') } else this.$Notice.error({ title: '审批失败', desc: ret.data && ret.data.errmsg })
+        if (ret.data && ret.data.errcode === 0) { this.$Message.success('审批通过'); this.approveModal.visible = false; this.fetchList('pending'); this.loadPendingCount() } else this.$Notice.error({ title: '审批失败', desc: ret.data && ret.data.errmsg })
       }).finally(() => { this.approveModal.submitting = false })
     },
     confirmTransferApprove () {
@@ -808,6 +865,7 @@ export default {
           this.$Message.success('转交成功')
           this.approveModal.visible = false
           this.fetchList('pending')
+          this.loadPendingCount()
         } else {
           this.$Notice.error({ title: '转交失败', desc: ret.data && ret.data.errmsg })
         }
@@ -817,7 +875,7 @@ export default {
       if (!this.approveModal.comment || !this.approveModal.comment.trim()) { this.$Message.warning('请输入驳回原因'); return }
       this.approveModal.submitting = true
       rejectLeave({ id: this.approveModal.record.id, leave_id: this.approveModal.record.leave_id || this.approveModal.record.id, comment: this.approveModal.comment }).then(ret => {
-        if (ret.data && ret.data.errcode === 0) { this.$Message.success('已驳回'); this.approveModal.visible = false; this.fetchList('pending') } else this.$Notice.error({ title: '驳回失败', desc: ret.data && ret.data.errmsg })
+        if (ret.data && ret.data.errcode === 0) { this.$Message.success('已驳回'); this.approveModal.visible = false; this.fetchList('pending'); this.loadPendingCount() } else this.$Notice.error({ title: '驳回失败', desc: ret.data && ret.data.errmsg })
       }).finally(() => { this.approveModal.submitting = false })
     },
     refillApply () {
@@ -920,7 +978,7 @@ export default {
 </script>
 
 <style scoped>
-.key-dm-leave-wrapper { padding: 10px; min-height: 380px;}
+.key-dm-leave-wrapper { padding: 10px; min-height: 380px; position: relative; }
 .tabsCls { min-height: 380px;}
 .search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
 .mr10 { margin-right: 10px; }
@@ -939,4 +997,26 @@ export default {
 .flow-col .value { display: inline-block; max-width: 100%; overflow: visible; text-overflow: unset; white-space: normal; color: #333; }
 .flow-col .value.no-ellipsis { white-space: normal; overflow: visible; text-overflow: unset; }
 .flow-reason { margin: 6px 0 0; color: #333; font-size: 13px; }
+.exclaim-badge {
+  background: #ff4d4f !important;
+  color: #fff !important;
+  border-radius: 10px !important;
+  padding: 0 6px !important;
+  font-weight: 700 !important;
+  display: inline-block !important;
+  line-height: 18px !important;
+  margin-left: 6px;
+  min-width: 14px;
+  text-align: center;
+}
+.tab-label { display: inline-flex; align-items: center; gap: 6px; }
+.exclaim-inline {
+  color: #ff4d4f;
+  font-weight: 700;
+  display: inline-block;
+  font-size: 16px;
+  margin-left: 6px;
+  transform: translateY(-6px);
+  line-height: 16px;
+}
 </style>