yanghao 1 周之前
父節點
當前提交
953a547a5a
共有 2 個文件被更改,包括 151 次插入22 次删除
  1. 1 1
      src/views/drive/index.vue
  2. 150 21
      src/views/index.vue

+ 1 - 1
src/views/drive/index.vue

@@ -359,7 +359,7 @@ const openDrive = async (option: DriveCard) => {
   align-items: center;
   justify-content: center;
 
-  width: 100%;
+  /* width: 100%; */
   height: 140px;
 
   /* 使用 CSS 变量动态绑定背景图 */

+ 150 - 21
src/views/index.vue

@@ -106,24 +106,64 @@
 
             <!-- 右侧快捷入口 -->
             <div class="quick-access">
-              <button
-                type="button"
-                class="quick-btn"
-                @click="router.push('/todo-list?type=oa')"
+              <el-dropdown
+                trigger="click"
+                popper-class="quick-access-dropdown"
+                @command="handleQuickAccessCommand"
               >
-                <img src="../assets//images//td.png" class="w-5 h-5" alt="" />
-                <span class="btn-label text-[#a1a1aa]!">我的待办</span>
-                <span class="text-[#6b2973]! font-bold">{{ todo }}</span>
-              </button>
-              <button
-                type="button"
-                class="quick-btn"
-                @click="router.push('/oa-done-list?type=oa')"
+                <button type="button" class="quick-btn quick-btn--dropdown">
+                  <img src="../assets//images//td.png" class="w-5 h-5" alt="" />
+                  <span class="btn-label text-[#a1a1aa]!">我的待办</span>
+                  <span class="text-[#6b2973]! font-bold">{{ todo }}</span>
+                  <!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
+                </button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="todo-oa">
+                      <div class="p-2 flex items-center gap-3 text-[#e43c2f]!">
+                        <span>OA</span>
+                        <span>{{ oatodo }}</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="todo-crm">
+                      <div class="p-2 flex items-center gap-3 text-[#e43c2f]!">
+                        <span>CRM</span>
+                        <span>{{ crmtodo }}</span>
+                      </div>
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+              <el-dropdown
+                trigger="click"
+                popper-class="quick-access-dropdown"
+                @command="handleQuickAccessCommand"
               >
-                <Icon icon="mdi:check" class="btn-icon" />
-                <span class="btn-label text-[#a1a1aa]!">我的已办</span>
-                <span class="p-2 inline-block text-[#2da04d]!">{{ done }}</span>
-              </button>
+                <button type="button" class="quick-btn quick-btn--dropdown">
+                  <Icon icon="mdi:check" class="btn-icon" />
+                  <span class="btn-label text-[#a1a1aa]!">我的已办</span>
+                  <span class="p-2 inline-block text-[#2da04d]!">{{
+                    done
+                  }}</span>
+                  <!-- <Icon icon="mdi:chevron-down" class="quick-btn__arrow" /> -->
+                </button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="done-oa">
+                      <div class="p-2 flex items-center gap-3 text-[#2da04d]!">
+                        <span>OA</span>
+                        <span>{{ oadone }}</span>
+                      </div>
+                    </el-dropdown-item>
+                    <el-dropdown-item command="done-crm">
+                      <div class="p-2 flex items-center gap-3 text-[#2da04d]!">
+                        <span>CRM</span>
+                        <span>{{ crmdone }}</span>
+                      </div></el-dropdown-item
+                    >
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
               <!-- <button
                 type="button"
                 class="quick-btn"
@@ -471,6 +511,7 @@ import {
   ssoLogin,
   zentaoSsoLogin,
   getOATasks,
+  getCRMTasks,
   getNotices,
   getRedHeadFiles,
   getNews,
@@ -635,6 +676,20 @@ const handleSearch = () => {
   // 如果需要跳转到独立搜索页,可以在这里添加 router.push
 };
 
+const handleQuickAccessCommand = (command: string) => {
+  const routeMap: Record<string, string> = {
+    "todo-oa": "/todo-list?type=oa",
+    "todo-crm": "/crm-todo-list?type=crm",
+    "done-oa": "/oa-done-list?type=oa",
+    "done-crm": "/crm-done-list?type=crm",
+  };
+
+  const target = routeMap[command];
+  if (target) {
+    router.push(target);
+  }
+};
+
 const filteredSections = computed(() => {
   const keyword = searchKeyword.value.trim().toLowerCase();
 
@@ -700,17 +755,33 @@ const currentNoticeList = computed(
 
 let todo = ref(0);
 let done = ref(0);
+let oatodo = ref(0);
+let oadone = ref(0);
+let crmtodo = ref(0);
+let crmdone = ref(0);
 const loadHomeData = async () => {
   await loadNoticeList(activeNoticeTab.value);
 
   if (!userStore.getUser.username) return;
 
-  const [oaRes, newsRes] = await Promise.all([
+  const [oaRes, crmRes, crmDoneRes, newsRes] = await Promise.all([
     getOATasks({
       id: userStore.getUser.username,
       pageNum: 1,
       pageSize: 10,
     }),
+    await getCRMTasks({
+      id: userStore.getUser.username,
+      type: "pending",
+      pageNum: 1,
+      pageSize: 10,
+    }),
+    await getCRMTasks({
+      id: userStore.getUser.username,
+      type: "approved",
+      pageNum: 1,
+      pageSize: 10,
+    }),
     getNews({
       pageNum: 1,
       pageSize: 10,
@@ -718,8 +789,13 @@ const loadHomeData = async () => {
   ]);
 
   oaTasks.value = oaRes.todoList.slice(0, 3);
-  todo.value = oaRes.todoCount;
-  done.value = oaRes.doneCount;
+  todo.value = Number(oaRes.todoCount) + crmRes.todoCount;
+  done.value = Number(oaRes.doneCount) + crmDoneRes.todoCount;
+
+  oatodo.value = oaRes.todoCount;
+  oadone.value = oaRes.doneCount;
+  crmtodo.value = crmRes.todoCount;
+  crmdone.value = crmDoneRes.todoCount;
   newsList.value = newsRes.list.slice(0, 3);
 };
 
@@ -1002,7 +1078,7 @@ onMounted(async () => {
   await loadHomeData();
 });
 
-const handleNoticeItemClick = async (notice) => {
+const handleNoticeItemClick = async (notice: any) => {
   const res = await ssoLogin({
     username: userStore.getUser.username,
   });
@@ -1048,7 +1124,7 @@ const handleNoticeItemClick = async (notice) => {
   }
 };
 
-const handleTask = async (row) => {
+const handleTask = async (row: any) => {
   const res = await ssoLogin({
     username: userStore.getUser.username,
   });
@@ -1815,6 +1891,16 @@ onUnmounted(() => {
     transform 0.2s ease;
 }
 
+.quick-btn--dropdown {
+  border: none;
+  background: transparent;
+  outline: none;
+}
+
+.quick-btn--dropdown:focus-visible {
+  outline: none;
+}
+
 .quick-btn:hover {
   background: rgba(28, 40, 72, 0.8);
   border-color: rgba(109, 137, 213, 0.4);
@@ -1830,6 +1916,11 @@ onUnmounted(() => {
   white-space: nowrap;
 }
 
+.quick-btn__arrow {
+  font-size: 16px;
+  color: #8a9ab0;
+}
+
 .badge {
   display: inline-flex;
   align-items: center;
@@ -1891,4 +1982,42 @@ onUnmounted(() => {
   font-size: 14px;
   color: #79b0ff; /* 蓝色 */
 }
+/* 下拉菜单主体 */
+:deep(.el-dropdown-menu) {
+  background-color: rgba(0, 0, 0, 0.75) !important;
+  border: none !important;
+  border-radius: 5px;
+  box-shadow: none !important; /* 关键:去除阴影导致的“白边”视觉效果 */
+  padding: 0 !important;
+}
+
+/* Popper 容器及箭头 */
+:deep(.el-popper) {
+  background: transparent !important; /* 改为透明,避免容器背景干扰 */
+  border: none !important;
+  box-shadow: none !important;
+}
+
+/* 去除可能存在的箭头边框 */
+:deep(.el-popper__arrow),
+:deep(.el-popper__arrow)::before {
+  display: none !important;
+}
+
+/* 菜单项 */
+:deep(.el-dropdown-menu__item) {
+  background: #192a5b !important;
+  color: #fff !important; /* 确保文字颜色可见 */
+  padding: 0 !important;
+  margin: 0 !important;
+  border: none !important;
+}
+
+:deep(.el-dropdown-menu__item):hover {
+  background: #182342 !important;
+  color: #fff !important;
+}
+:deep(.el-dropdown-menu) {
+  outline: none !important;
+}
 </style>