我的代办页面绘制路由，跳转入口添加

src/layout/components/ToolHeader.vue

@@ -1,5 +1,7 @@
 <script lang="tsx">
 import { defineComponent, computed } from 'vue'
+import { ElIcon, ElBadge } from 'element-plus' // 导入Element Plus图标组件
+import { Document } from '@element-plus/icons-vue' // 导入Document图标
 import { Message } from '@/layout/components//Message'
 import { Collapse } from '@/layout/components/Collapse'
 import { UserInfo } from '@/layout/components/UserInfo'
@@ -12,6 +14,8 @@ import TenantVisit from '@/layout/components/TenantVisit/index.vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { checkPermi } from '@/utils/permission'
+// 先导入图片
+import todoIcon from '../../assets/images/topTodo.png';
 
 const { getPrefixCls, variables } = useDesign()
 
@@ -51,6 +55,14 @@ const hasTenantVisitPermission = computed(
 export default defineComponent({
   name: 'ToolHeader',
   setup() {
+    // 代办数量
+    const router = useRouter()
+    const documentTodos = ref(0)
+    // 代办：处理跳转逻辑
+    const handleNewPageJump = () => {
+      router.push({ name: 'Agent' })
+    }
+
     return () => (
       <div
         id={`${variables.namespace}-tool-header`}
@@ -69,11 +81,11 @@ export default defineComponent({
           </div>
         ) : undefined}
         <div class="h-full flex items-center">
-          {hasTenantVisitPermission.value ? <TenantVisit /> : undefined}
+          {hasTenantVisitPermission.value ? <TenantVisit/> : undefined}
           {screenfull.value ? (
             <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}
-          {search.value ? <RouterSearch isModal={false} /> : undefined}
+          {search.value ? <RouterSearch isModal={false}/> : undefined}
           {size.value ? (
             <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
           ) : undefined}
@@ -86,6 +98,29 @@ export default defineComponent({
           {message.value ? (
             <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
           ) : undefined}
+          <div
+            class="custom-hover p-2 cursor-pointer"
+            onClick={handleNewPageJump}
+            title="代办页面"
+          >
+            {documentTodos.value > 0 ? (
+              <ElBadge value={documentTodos.value} max={10} class="item">
+                // 然后在模板中使用
+                <img
+                  src={todoIcon}
+                  style="width: 1.2em; height: 1.2em; vertical-align: middle;"
+                  alt="代办图标"
+                />
+              </ElBadge>
+            ) : (
+              // 然后在模板中使用
+              <img
+                src={todoIcon}
+                style="width: 1.2em; height: 1.2em; vertical-align: middle;"
+                alt="代办图标"
+              />
+            )}
+          </div>
           <UserInfo></UserInfo>
         </div>
       </div>
@@ -100,4 +135,9 @@ $prefix-cls: #{$namespace}-tool-header;
 .#{$prefix-cls} {
   transition: left var(--transition-time-02);
 }
+
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
 </style>

src/router/modules/remaining.ts

@@ -101,6 +101,19 @@ const remainingRouter: AppRouteRecordRaw[] = [
           icon: 'ep:message',
           title: '我的站内信'
         }
+      },
+      {
+        path: 'notify-agent',
+        component: () => import('@/views/system/notify/agent/index.vue'),
+        name: 'Agent',
+        meta: {
+          canTo: true,
+          hidden: true,
+          noTagsView: false,
+          icon: 'ep:message',
+          title: '我的代办'
+        }
+
       }
     ]
   },

src/utils/dict.ts

@@ -310,5 +310,6 @@ export enum DICT_TYPE {
   JOB_NOTICE_RULES = 'job_notice_rules',
   ACTION_NOTICE_RULES = 'action_notice_rules',
   ADVANCE_NOTICE_RULES = 'advance_notice_rules',
-  NOTICE_TIME_TYPE = 'notice_time_type'
+  NOTICE_TIME_TYPE = 'notice_time_type',
+  TODO_FINISHED_QUERY_TYPE ='todo_finished_query_type'
 }

src/views/system/notify/agent/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <ContentWrap>
+    <!--    顶部标题-->
+    <div class="topTitle">
+      <img src="../../../../assets/images/my_todo.png" class="todoimg" />
+      <span class="tab-title"> 我的代办</span>
+      <div class="set-btn" @click="goBack">
+        <img src="../../../../assets/images/返回.png" alt="" />
+        返回
+      </div>
+    </div>
+  </ContentWrap>
+  <ContentWrap>
+    <!--    <div class="container">-->
+    <el-tabs type="border-card" class="demo-tabs" v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane name="first">
+        <template #label>
+          <span class="custom-tabs-label">
+            <span>等待中(1)</span>
+          </span>
+        </template>
+        <!--       中间内容-->
+        <div class="middleContent">
+          <div class="itemCon">
+            <section class="title">等待： <span></span></section>
+            <section class="itemDetail">
+              <p>相关作业：<span></span></p>
+              <p>当前步骤：<span></span></p>
+              <p>当前操作：<span style="color: red"></span></p>
+            </section>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane name="second">
+        <template #label>
+          <span class="custom-tabs-label">
+            <span>处理中(1)</span>
+          </span>
+        </template>
+        <!--       中间内容-->
+        <div class="middleContent">
+          <div class="itemCon">
+            <section class="title"><span style="color: red"></span></section>
+            <section class="itemDetail">
+              <p>相关作业：<span></span></p>
+              <p>当前步骤：<span></span></p>
+            </section>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane name="third">
+        <template #label>
+          <span class="custom-tabs-label">
+            <span>已处理()</span>
+          </span>
+        </template>
+        <!--       中间内容-->
+        <div class="middleContent">
+          <div class="selectCon">
+            <span>处理日期：</span>
+            <el-select
+              v-model="nonWorkDay"
+              placeholder=""
+              style="width: 215px;margin-right: 15px"
+              @change="handlenonWorkMoveDayChange()"
+            >
+              <el-option label="全部" value="0" />
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.TODO_FINISHED_QUERY_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+            <el-date-picker
+              v-model="nonWorkDay"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+              size='default'
+            />
+          </div>
+          <div class="itemCon">
+            <section class="title"><span></span></section>
+            <section class="itemDetail">
+              <p>相关作业：<span></span></p>
+              <p>完成时间：<span></span></p>
+            </section>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+    <!--    </div>-->
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import type { TabsPaneContext } from 'element-plus'
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
+
+const router = useRouter()
+// const route = useRoute()
+const nonWorkDay=ref('')
+const activeName = ref('first')
+
+onMounted(() => {})
+// 返回
+const goBack = () => {
+  router.go(-1)
+}
+
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+<style scoped lang="scss">
+.topTitle {
+  width: 100%;
+  line-height: 30px;
+}
+
+.todoimg {
+  width: 20px;
+  height: 20px;
+  margin: 10px 0 0;
+}
+
+.set-btn {
+  width: 60px;
+  height: 30px;
+  border: 1px solid black;
+  border-radius: 6px;
+  text-align: center;
+  line-height: 30px;
+  float: right;
+  cursor: pointer;
+  margin: 10px 0;
+
+  img {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.container {
+  width: 100%;
+  max-height: 800px;
+  overflow: auto;
+  //background: #000;
+}
+
+.middleContent {
+  width: 100%;
+  max-height: 700px;
+  overflow: auto;
+  //background: pink;
+  .itemCon {
+    width: 45%;
+    height: 180px;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
+    transition: all 0.3s ease;
+    //border: 1px solid black;
+    section {
+      width: 100%;
+      padding: 0 15px;
+    }
+
+    .title {
+      height:50px;
+      line-height: 50px;
+      margin-bottom: 5px;
+      border-bottom: 1px solid black;
+    }
+
+    .itemDetail {
+      p {
+        line-height: 35px;
+      }
+    }
+  }
+  .selectCon{
+    width: 100%;
+    height: 60px;
+    padding: 10px 6px;
+  }
+}
+</style>