From 9fa05ac39a830e140a3f1fb6237947eb55730758 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Tue, 31 Mar 2026 10:40:08 +0800
Subject: [PATCH] fix: simplify dept switcher labels

---
 frontend/src/views/TaskHall.vue | 99 +++++++++++++++++++++++++++++++--
 1 file changed, 93 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue
index dbdb1ad..c378d0e 100644
--- a/frontend/src/views/TaskHall.vue
+++ b/frontend/src/views/TaskHall.vue
@@ -12,16 +12,16 @@
               <a-select
                 v-if="switchableDepartments.length > 0"
                 v-model:value="currentDeptView"
-                style="width: 120px; margin-right: 8px;"
+                style="width: 220px; margin-right: 8px;"
                 size="middle"
                 @change="handleDeptViewChange"
                 class="dept-view-select"
               >
                 <a-select-option :value="undefined">
-                  {{ userDeptName }}
+                  {{ userDeptDisplayName }}
                 </a-select-option>
                 <a-select-option v-for="dept in switchableDepartments" :key="dept.deptId" :value="dept.deptId">
-                  {{ dept.deptName }}
+                  {{ dept.displayName }}
                 </a-select-option>
               </a-select>
               <a-month-picker
@@ -2596,11 +2596,12 @@ interface DepartmentViewOption {
   deptId: number
   deptName: string
   deptType: 'demand' | 'receiving' | 'primary_demand'
+  displayName?: string
 }
 
 type ManagedDepartment = DepartmentViewOption
 
-const switchableDepartments = ref<DepartmentViewOption[]>([]) // 用户可切换的其他部门身份
+const switchableDepartmentsRaw = ref<DepartmentViewOption[]>([]) // 用户可切换的其他部门身份（原始列表）
 const managedDepartments = ref<ManagedDepartment[]>([]) // 用户管理的所有部门
 const currentDeptView = ref<number | undefined>(undefined) // 当前选择的部门视角，undefined表示使用用户自己的部门
 const userDeptId = ref<number | null>(null)
@@ -2609,6 +2610,86 @@ const userDeptType = ref<string>('')
 const exportLoading = ref(false) // 导出加载状态
 const withdrawingTaskId = ref<number | null>(null) // 正在撤回的任务ID
 const TASK_CREATE_PUBLISHER_DEPT_KEY = 'task_create_publisher_dept_id'
+const departmentOptions = ref<departmentApi.DepartmentOverview[]>([])
+
+const departmentMap = computed(() => {
+  const map = new Map<number, departmentApi.DepartmentOverview>()
+  departmentOptions.value.forEach((dept) => {
+    map.set(dept.id, dept)
+  })
+  return map
+})
+
+const buildDepartmentDisplayName = (deptId?: number | null, fallbackName = '') => {
+  if (!deptId) {
+    return fallbackName
+  }
+
+  const names: string[] = []
+  const visited = new Set<number>()
+  let currentId: number | undefined = deptId
+
+  while (currentId && !visited.has(currentId)) {
+    visited.add(currentId)
+    const dept = departmentMap.value.get(currentId)
+    if (!dept) {
+      break
+    }
+    names.unshift(dept.deptName)
+    currentId = dept.parentId || undefined
+  }
+
+  if (!names.length) {
+    return fallbackName
+  }
+
+  return names.join(' / ')
+}
+
+const isAncestorDepartment = (ancestorDeptId: number, deptId: number) => {
+  const visited = new Set<number>()
+  let currentId: number | undefined = deptId
+
+  while (currentId && !visited.has(currentId)) {
+    if (currentId === ancestorDeptId) {
+      return true
+    }
+
+    visited.add(currentId)
+    const dept = departmentMap.value.get(currentId)
+    currentId = dept?.parentId || undefined
+  }
+
+  return false
+}
+
+const switchableDepartments = computed<DepartmentViewOption[]>(() => {
+  const rawDepartments = switchableDepartmentsRaw.value
+  if (!rawDepartments.length) {
+    return []
+  }
+
+  return rawDepartments
+    .filter((dept) => {
+      if (dept.deptId === currentDeptView.value) {
+        return true
+      }
+
+      return !rawDepartments.some((otherDept) =>
+        otherDept.deptId !== dept.deptId &&
+        otherDept.deptType === dept.deptType &&
+        isAncestorDepartment(dept.deptId, otherDept.deptId)
+      )
+    })
+    .map((dept) => ({
+      ...dept,
+      displayName: buildDepartmentDisplayName(dept.deptId, dept.deptName)
+    }))
+})
+
+const userDeptDisplayName = computed(() => {
+  return buildDepartmentDisplayName(userDeptId.value, userDeptName.value || '我的部门')
+})
 
 // 获取当前有效的部门类型（根据选择的视角）
 const effectiveDeptType = computed(() => {
@@ -2727,7 +2808,7 @@ const initDeptViewData = async () => {
         managedDepartments.value = []
       }
 
-      switchableDepartments.value = Array.from(switchableMap.values())
+      switchableDepartmentsRaw.value = Array.from(switchableMap.values())
 
       if (currentDeptView.value !== undefined && !switchableMap.has(currentDeptView.value)) {
         currentDeptView.value = undefined
@@ -3579,6 +3660,7 @@ const loadConfigs = async () => {
     // 🔥 加载接单部门列表
     const deptResponse = await departmentApi.getDepartmentList()
     if (deptResponse && deptResponse.data) {
+      departmentOptions.value = deptResponse.data
       // 过滤出接单部门（deptType === 'receiving'），只保留一级和二级部门
       const allDepts = deptResponse.data
       const level1DeptIds = new Set(
@@ -6935,11 +7017,16 @@ onUnmounted(() => {
   // 部门视角切换下拉框样式
   .dept-view-select {
     :deep(.ant-select-selection-item) {
-      max-width: 100px;
+      max-width: 200px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    :deep(.ant-select-item-option-content) {
+      white-space: normal;
+      line-height: 1.4;
+    }
   }
 }